sun icon
sun from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.
- Name
- sun
- Set
- BoxIcons v2
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
- Aliases
- bx-sun
The same icon in other sets
sunAkar IconssunBootstrap IconssunBoxIcons v2 SolidsunCarbonsunEmoji One (Colored)sun-fillEva IconssunFont Awesome 6 RegularsunFont Awesome 6 SolidsunFeather IconssunFluent EmojisunFluent Emoji FlatsunFluent Emoji High Contrastsuncss.ggsunHeroIconssunHumbleiconssunJam IconssunLine AwesomesunLucidesunMage IconssunMajesticonssun-fillMingCute IconsunNoto Emojisun-16OcticonssunOpenMoji
Use the sun icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993S6.993 9.239 6.993 12M12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007S8.993 13.658 8.993 12S10.342 8.993 12 8.993M10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122l1.415 1.414l-2.12 2.122zM16.24 6.344l2.122-2.122l1.414 1.414l-2.122 2.122zM6.342 7.759L4.22 5.637l1.415-1.414l2.12 2.122zm13.434 10.605l-1.414 1.414l-2.122-2.122l1.414-1.414z"/></svg>
React
import type { SVGProps } from "react";
export function BxSun(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993S6.993 9.239 6.993 12M12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007S8.993 13.658 8.993 12S10.342 8.993 12 8.993M10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122l1.415 1.414l-2.12 2.122zM16.24 6.344l2.122-2.122l1.414 1.414l-2.122 2.122zM6.342 7.759L4.22 5.637l1.415-1.414l2.12 2.122zm13.434 10.605l-1.414 1.414l-2.122-2.122l1.414-1.414z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993S6.993 9.239 6.993 12M12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007S8.993 13.658 8.993 12S10.342 8.993 12 8.993M10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122l1.415 1.414l-2.12 2.122zM16.24 6.344l2.122-2.122l1.414 1.414l-2.122 2.122zM6.342 7.759L4.22 5.637l1.415-1.414l2.12 2.122zm13.434 10.605l-1.414 1.414l-2.122-2.122l1.414-1.414z"/></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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.993%2012c0%202.761%202.246%205.007%205.007%205.007s5.007-2.246%205.007-5.007S14.761%206.993%2012%206.993S6.993%209.239%206.993%2012M12%208.993c1.658%200%203.007%201.349%203.007%203.007S13.658%2015.007%2012%2015.007S8.993%2013.658%208.993%2012S10.342%208.993%2012%208.993M10.998%2019h2v3h-2zm0-17h2v3h-2zm-9%209h3v2h-3zm17%200h3v2h-3zM4.219%2018.363l2.12-2.122l1.415%201.414l-2.12%202.122zM16.24%206.344l2.122-2.122l1.414%201.414l-2.122%202.122zM6.342%207.759L4.22%205.637l1.415-1.414l2.12%202.122zm13.434%2010.605l-1.414%201.414l-2.122-2.122l1.414-1.414z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.993%2012c0%202.761%202.246%205.007%205.007%205.007s5.007-2.246%205.007-5.007S14.761%206.993%2012%206.993S6.993%209.239%206.993%2012M12%208.993c1.658%200%203.007%201.349%203.007%203.007S13.658%2015.007%2012%2015.007S8.993%2013.658%208.993%2012S10.342%208.993%2012%208.993M10.998%2019h2v3h-2zm0-17h2v3h-2zm-9%209h3v2h-3zm17%200h3v2h-3zM4.219%2018.363l2.12-2.122l1.415%201.414l-2.12%202.122zM16.24%206.344l2.122-2.122l1.414%201.414l-2.122%202.122zM6.342%207.759L4.22%205.637l1.415-1.414l2.12%202.122zm13.434%2010.605l-1.414%201.414l-2.122-2.122l1.414-1.414z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/sun.svg?color=%231a73e8&size=48
