sun icon

sun from Font Awesome 6 Regular by Dave Gandy · Regular · Energy · CC-BY-4.0 Attribution required.

Name
sun
Set
Font Awesome 6 Regular
Style
Regular
Category
Energy
Viewbox
512×512
License
CC BY 4.0

The same icon in other sets

sunAkar Iconssun-filledAnt Design IconssunBootstrap IconssunBoxIcons v2sunBoxIcons v2 SolidsunCarbonsunEmoji One (Colored)sun-fillEva IconssunFont Awesome 6 SolidsunFont Awesome RegularsunFont Awesome SolidsunFeather Iconssun-outlineFlowbite IconssunFluent EmojisunFluent Emoji FlatsunFluent Emoji High Contrastsuncss.ggsunHeroIconssunHumbleiconssunIconParksunIconPark OutlinesunIconPark SolidsunIconPark TwoTonesunJam Icons

More energy icons from Font Awesome 6 Regular

lightbulb

Use the sun icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1L173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5l-98.5 18.2c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256L4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1l18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4l82.6-56.8l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5l98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1zM269.6 110l65.6-45.2l14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4l-45.2 65.6c-5.7 8.2-5.7 19 0 27.2l45.2 65.6l-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3l-65.6-45.2c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2l-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3l-78.3-14.4l45.2-65.6c5.7-8.2 5.7-19 0-27.2l-45.2-65.6l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3l65.6 45.2c8.2 5.7 19 5.7 27.2 0M256 368a112 112 0 1 0 0-224a112 112 0 1 0 0 224m-64-112a64 64 0 1 1 128 0a64 64 0 1 1-128 0"/></svg>

React

import type { SVGProps } from "react";

export function Fa6RegularSun(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1L173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5l-98.5 18.2c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256L4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1l18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4l82.6-56.8l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5l98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1zM269.6 110l65.6-45.2l14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4l-45.2 65.6c-5.7 8.2-5.7 19 0 27.2l45.2 65.6l-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3l-65.6-45.2c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2l-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3l-78.3-14.4l45.2-65.6c5.7-8.2 5.7-19 0-27.2l-45.2-65.6l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3l65.6 45.2c8.2 5.7 19 5.7 27.2 0M256 368a112 112 0 1 0 0-224a112 112 0 1 0 0 224m-64-112a64 64 0 1 1 128 0a64 64 0 1 1-128 0"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1L173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5l-98.5 18.2c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256L4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1l18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4l82.6-56.8l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5l98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1zM269.6 110l65.6-45.2l14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4l-45.2 65.6c-5.7 8.2-5.7 19 0 27.2l45.2 65.6l-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3l-65.6-45.2c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2l-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3l-78.3-14.4l45.2-65.6c5.7-8.2 5.7-19 0-27.2l-45.2-65.6l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3l65.6 45.2c8.2 5.7 19 5.7 27.2 0M256 368a112 112 0 1 0 0-224a112 112 0 1 0 0 224m-64-112a64 64 0 1 1 128 0a64 64 0 1 1-128 0"/></svg>
</template>

CSS

.icon-sun {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M375.7%2019.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8%202.4L256%2061.1L173.5%204.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9%209.8-14.4%2017.8l-18.1%2098.5l-98.5%2018.2c-8%201.5-14.7%206.9-17.8%2014.4s-2.2%2016.1%202.4%2022.8L61.1%20256L4.2%20338.5c-4.6%206.7-5.5%2015.3-2.4%2022.8s9.8%2013%2017.8%2014.4l98.5%2018.1l18.1%2098.5c1.5%208%206.9%2014.7%2014.4%2017.8s16.1%202.2%2022.8-2.4l82.6-56.8l82.5%2056.9c6.7%204.6%2015.3%205.5%2022.8%202.4s12.9-9.8%2014.4-17.8l18.1-98.5l98.5-18.1c8-1.5%2014.7-6.9%2017.8-14.4s2.2-16.1-2.4-22.8L450.9%20256l56.9-82.5c4.6-6.7%205.5-15.3%202.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1zM269.6%20110l65.6-45.2l14.4%2078.3c1.8%209.8%209.5%2017.5%2019.3%2019.3l78.3%2014.4l-45.2%2065.6c-5.7%208.2-5.7%2019%200%2027.2l45.2%2065.6l-78.3%2014.4c-9.8%201.8-17.5%209.5-19.3%2019.3l-14.4%2078.3l-65.6-45.2c-8.2-5.7-19-5.7-27.2%200l-65.6%2045.2l-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3l-78.3-14.4l45.2-65.6c5.7-8.2%205.7-19%200-27.2l-45.2-65.6l78.3-14.4c9.8-1.8%2017.5-9.5%2019.3-19.3l14.4-78.3l65.6%2045.2c8.2%205.7%2019%205.7%2027.2%200M256%20368a112%20112%200%201%200%200-224a112%20112%200%201%200%200%20224m-64-112a64%2064%200%201%201%20128%200a64%2064%200%201%201-128%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M375.7%2019.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8%202.4L256%2061.1L173.5%204.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9%209.8-14.4%2017.8l-18.1%2098.5l-98.5%2018.2c-8%201.5-14.7%206.9-17.8%2014.4s-2.2%2016.1%202.4%2022.8L61.1%20256L4.2%20338.5c-4.6%206.7-5.5%2015.3-2.4%2022.8s9.8%2013%2017.8%2014.4l98.5%2018.1l18.1%2098.5c1.5%208%206.9%2014.7%2014.4%2017.8s16.1%202.2%2022.8-2.4l82.6-56.8l82.5%2056.9c6.7%204.6%2015.3%205.5%2022.8%202.4s12.9-9.8%2014.4-17.8l18.1-98.5l98.5-18.1c8-1.5%2014.7-6.9%2017.8-14.4s2.2-16.1-2.4-22.8L450.9%20256l56.9-82.5c4.6-6.7%205.5-15.3%202.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1zM269.6%20110l65.6-45.2l14.4%2078.3c1.8%209.8%209.5%2017.5%2019.3%2019.3l78.3%2014.4l-45.2%2065.6c-5.7%208.2-5.7%2019%200%2027.2l45.2%2065.6l-78.3%2014.4c-9.8%201.8-17.5%209.5-19.3%2019.3l-14.4%2078.3l-65.6-45.2c-8.2-5.7-19-5.7-27.2%200l-65.6%2045.2l-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3l-78.3-14.4l45.2-65.6c5.7-8.2%205.7-19%200-27.2l-45.2-65.6l78.3-14.4c9.8-1.8%2017.5-9.5%2019.3-19.3l14.4-78.3l65.6%2045.2c8.2%205.7%2019%205.7%2027.2%200M256%20368a112%20112%200%201%200%200-224a112%20112%200%201%200%200%20224m-64-112a64%2064%200%201%201%20128%200a64%2064%200%201%201-128%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-regular/sun.svg?color=%231a73e8&size=48