sun icon
sun-sharp from Keyline Icons by Keyline Icons · Sharp · MIT Free for personal and commercial use.
- Name
- sun-sharp
- Set
- Keyline Icons
- Style
- Sharp
- Viewbox
- 24×24
- License
- MIT
7 other variants in Keyline Icons
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 RegularsunFont Awesome SolidsunFeather Iconssun-outlineFlowbite IconssunFluent EmojisunFluent Emoji FlatsunFluent Emoji High Contrastsuncss.ggsunHeroIconssunHumbleiconssunIconParksunIconPark OutlinesunIconPark SolidsunIconPark TwoTone
Related icons in Keyline Icons
Use the sun icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M16.5 12C16.5 14.4854 14.4854 16.5 12 16.5C9.5147 16.5 7.5 14.4854 7.5 12C7.5 9.5147 9.5147 7.5 12 7.5C14.4854 7.5 16.5 9.5147 16.5 12ZM19.5 12L23 12M17.3033 17.3033L19.7782 19.7782M12 19.5L12 23M6.6967 17.3033L4.2218 19.7782M4.5 12L1 12M6.6967 6.6967L4.2218 4.2218M12 4.5L12 1M17.3033 6.6967L19.7782 4.2218"/></svg>
React
import type { SVGProps } from "react";
export function KeylineIconsSunSharp(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="2" d="M16.5 12C16.5 14.4854 14.4854 16.5 12 16.5C9.5147 16.5 7.5 14.4854 7.5 12C7.5 9.5147 9.5147 7.5 12 7.5C14.4854 7.5 16.5 9.5147 16.5 12ZM19.5 12L23 12M17.3033 17.3033L19.7782 19.7782M12 19.5L12 23M6.6967 17.3033L4.2218 19.7782M4.5 12L1 12M6.6967 6.6967L4.2218 4.2218M12 4.5L12 1M17.3033 6.6967L19.7782 4.2218"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M16.5 12C16.5 14.4854 14.4854 16.5 12 16.5C9.5147 16.5 7.5 14.4854 7.5 12C7.5 9.5147 9.5147 7.5 12 7.5C14.4854 7.5 16.5 9.5147 16.5 12ZM19.5 12L23 12M17.3033 17.3033L19.7782 19.7782M12 19.5L12 23M6.6967 17.3033L4.2218 19.7782M4.5 12L1 12M6.6967 6.6967L4.2218 4.2218M12 4.5L12 1M17.3033 6.6967L19.7782 4.2218"/></svg> </template>
CSS
.icon-sun-sharp {
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%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M16.5%2012C16.5%2014.4854%2014.4854%2016.5%2012%2016.5C9.5147%2016.5%207.5%2014.4854%207.5%2012C7.5%209.5147%209.5147%207.5%2012%207.5C14.4854%207.5%2016.5%209.5147%2016.5%2012ZM19.5%2012L23%2012M17.3033%2017.3033L19.7782%2019.7782M12%2019.5L12%2023M6.6967%2017.3033L4.2218%2019.7782M4.5%2012L1%2012M6.6967%206.6967L4.2218%204.2218M12%204.5L12%201M17.3033%206.6967L19.7782%204.2218%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%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M16.5%2012C16.5%2014.4854%2014.4854%2016.5%2012%2016.5C9.5147%2016.5%207.5%2014.4854%207.5%2012C7.5%209.5147%209.5147%207.5%2012%207.5C14.4854%207.5%2016.5%209.5147%2016.5%2012ZM19.5%2012L23%2012M17.3033%2017.3033L19.7782%2019.7782M12%2019.5L12%2023M6.6967%2017.3033L4.2218%2019.7782M4.5%2012L1%2012M6.6967%206.6967L4.2218%204.2218M12%204.5L12%201M17.3033%206.6967L19.7782%204.2218%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/sun-sharp.svg?color=%231a73e8&size=48
