sun icon

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

Name
sun
Set
Font Awesome Solid
Style
Solid
Category
Energy
Viewbox
640×640
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 RegularsunFont Awesome 6 SolidsunFont Awesome RegularsunFeather Iconssun-outlineFlowbite IconssunFluent EmojisunFluent Emoji FlatsunFluent Emoji High Contrastsuncss.ggsunHeroIconssunHumbleiconssunIconParksunIconPark OutlinesunIconPark SolidsunIconPark TwoTonesunJam Icons

More energy icons from Font Awesome Solid

battery-emptybattery-fullbattery-halfbattery-quarterbattery-three-quartersburnfanlightbulbpoopsolar-panelwatersun-plant-wilt

Use the sun icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 32c8.4 0 16.3 4.4 20.6 11.7l55.5 92.6L500.9 110c8.2-2 16.9.4 22.8 6.3s8.3 14.7 6.3 22.8l-26.3 104.7l92.7 55.5c7.2 4.3 11.7 12.2 11.7 20.6s-4.4 16.3-11.7 20.6l-92.7 55.6L530 500.8c2 8.2-.4 16.9-6.3 22.8S509 532 500.9 530l-104.7-26.3l-55.5 92.7c-4.3 7.2-12.2 11.7-20.6 11.7s-16.3-4.4-20.6-11.7l-55.6-92.7L139.2 530c-8.2 2-16.8-.4-22.8-6.3S108 509 110 500.8l26.2-104.7l-92.6-55.5C36.4 336.2 32 328.4 32 320s4.4-16.3 11.7-20.6l92.6-55.5L110 139.1c-2-8.2.3-16.8 6.3-22.8s14.7-8.3 22.9-6.3l104.7 26.2l55.5-92.6l1.8-2.6c4.5-5.7 11.4-9.1 18.8-9.1zm0 144c-79.5 0-144 64.5-144 144s64.5 144 144 144s144-64.5 144-144s-64.5-144-144-144m0 240c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidSun(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 32c8.4 0 16.3 4.4 20.6 11.7l55.5 92.6L500.9 110c8.2-2 16.9.4 22.8 6.3s8.3 14.7 6.3 22.8l-26.3 104.7l92.7 55.5c7.2 4.3 11.7 12.2 11.7 20.6s-4.4 16.3-11.7 20.6l-92.7 55.6L530 500.8c2 8.2-.4 16.9-6.3 22.8S509 532 500.9 530l-104.7-26.3l-55.5 92.7c-4.3 7.2-12.2 11.7-20.6 11.7s-16.3-4.4-20.6-11.7l-55.6-92.7L139.2 530c-8.2 2-16.8-.4-22.8-6.3S108 509 110 500.8l26.2-104.7l-92.6-55.5C36.4 336.2 32 328.4 32 320s4.4-16.3 11.7-20.6l92.6-55.5L110 139.1c-2-8.2.3-16.8 6.3-22.8s14.7-8.3 22.9-6.3l104.7 26.2l55.5-92.6l1.8-2.6c4.5-5.7 11.4-9.1 18.8-9.1zm0 144c-79.5 0-144 64.5-144 144s64.5 144 144 144s144-64.5 144-144s-64.5-144-144-144m0 240c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 32c8.4 0 16.3 4.4 20.6 11.7l55.5 92.6L500.9 110c8.2-2 16.9.4 22.8 6.3s8.3 14.7 6.3 22.8l-26.3 104.7l92.7 55.5c7.2 4.3 11.7 12.2 11.7 20.6s-4.4 16.3-11.7 20.6l-92.7 55.6L530 500.8c2 8.2-.4 16.9-6.3 22.8S509 532 500.9 530l-104.7-26.3l-55.5 92.7c-4.3 7.2-12.2 11.7-20.6 11.7s-16.3-4.4-20.6-11.7l-55.6-92.7L139.2 530c-8.2 2-16.8-.4-22.8-6.3S108 509 110 500.8l26.2-104.7l-92.6-55.5C36.4 336.2 32 328.4 32 320s4.4-16.3 11.7-20.6l92.6-55.5L110 139.1c-2-8.2.3-16.8 6.3-22.8s14.7-8.3 22.9-6.3l104.7 26.2l55.5-92.6l1.8-2.6c4.5-5.7 11.4-9.1 18.8-9.1zm0 144c-79.5 0-144 64.5-144 144s64.5 144 144 144s144-64.5 144-144s-64.5-144-144-144m0 240c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2032c8.4%200%2016.3%204.4%2020.6%2011.7l55.5%2092.6L500.9%20110c8.2-2%2016.9.4%2022.8%206.3s8.3%2014.7%206.3%2022.8l-26.3%20104.7l92.7%2055.5c7.2%204.3%2011.7%2012.2%2011.7%2020.6s-4.4%2016.3-11.7%2020.6l-92.7%2055.6L530%20500.8c2%208.2-.4%2016.9-6.3%2022.8S509%20532%20500.9%20530l-104.7-26.3l-55.5%2092.7c-4.3%207.2-12.2%2011.7-20.6%2011.7s-16.3-4.4-20.6-11.7l-55.6-92.7L139.2%20530c-8.2%202-16.8-.4-22.8-6.3S108%20509%20110%20500.8l26.2-104.7l-92.6-55.5C36.4%20336.2%2032%20328.4%2032%20320s4.4-16.3%2011.7-20.6l92.6-55.5L110%20139.1c-2-8.2.3-16.8%206.3-22.8s14.7-8.3%2022.9-6.3l104.7%2026.2l55.5-92.6l1.8-2.6c4.5-5.7%2011.4-9.1%2018.8-9.1zm0%20144c-79.5%200-144%2064.5-144%20144s64.5%20144%20144%20144s144-64.5%20144-144s-64.5-144-144-144m0%20240c-53%200-96-43-96-96s43-96%2096-96s96%2043%2096%2096s-43%2096-96%2096%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2032c8.4%200%2016.3%204.4%2020.6%2011.7l55.5%2092.6L500.9%20110c8.2-2%2016.9.4%2022.8%206.3s8.3%2014.7%206.3%2022.8l-26.3%20104.7l92.7%2055.5c7.2%204.3%2011.7%2012.2%2011.7%2020.6s-4.4%2016.3-11.7%2020.6l-92.7%2055.6L530%20500.8c2%208.2-.4%2016.9-6.3%2022.8S509%20532%20500.9%20530l-104.7-26.3l-55.5%2092.7c-4.3%207.2-12.2%2011.7-20.6%2011.7s-16.3-4.4-20.6-11.7l-55.6-92.7L139.2%20530c-8.2%202-16.8-.4-22.8-6.3S108%20509%20110%20500.8l26.2-104.7l-92.6-55.5C36.4%20336.2%2032%20328.4%2032%20320s4.4-16.3%2011.7-20.6l92.6-55.5L110%20139.1c-2-8.2.3-16.8%206.3-22.8s14.7-8.3%2022.9-6.3l104.7%2026.2l55.5-92.6l1.8-2.6c4.5-5.7%2011.4-9.1%2018.8-9.1zm0%20144c-79.5%200-144%2064.5-144%20144s64.5%20144%20144%20144s144-64.5%20144-144s-64.5-144-144-144m0%20240c-53%200-96-43-96-96s43-96%2096-96s96%2043%2096%2096s-43%2096-96%2096%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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