Sun

6K Views 61 Downloads - 23 API calls 46 Lines - 1038 Bytes Apr 23, 2020 design interface

 .gg-sun {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 24px;
 height: 24px;
 background:
 linear-gradient(to bottom,
 currentColor 4px,transparent 0)
 no-repeat 5px -6px/2px 6px,
 linear-gradient(to bottom,
 currentColor 4px,transparent 0)
 no-repeat 5px 14px/2px 6px,
 linear-gradient(to bottom,
 currentColor 4px,transparent 0)
 no-repeat -8px 5px/6px 2px,
 linear-gradient(to bottom,
 currentColor 4px,transparent 0)
 no-repeat 14px 5px/6px 2px;
 border-radius: 100px;
 box-shadow: inset 0 0 0 2px;
 border: 6px solid transparent
}

.gg-sun::after,
.gg-sun::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 24px;
 height: 2px;
 border-right: 4px solid;
 border-left: 4px solid;
 left: -6px;
 top: 5px
}

.gg-sun::before {
 transform: rotate(-45deg)
}

.gg-sun::after {
 transform: rotate(45deg)
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H13V4.06189C12.6724 4.02104 12.3387 4 12 4C11.6613 4 11.3276 4.02104 11 4.06189V0ZM7.0943 5.68018L4.22173 2.80761L2.80752 4.22183L5.6801 7.09441C6.09071 6.56618 6.56608 6.0908 7.0943 5.68018ZM4.06189 11H0V13H4.06189C4.02104 12.6724 4 12.3387 4 12C4 11.6613 4.02104 11.3276 4.06189 11ZM5.6801 16.9056L2.80751 19.7782L4.22173 21.1924L7.0943 18.3198C6.56608 17.9092 6.09071 17.4338 5.6801 16.9056ZM11 19.9381V24H13V19.9381C12.6724 19.979 12.3387 20 12 20C11.6613 20 11.3276 19.979 11 19.9381ZM16.9056 18.3199L19.7781 21.1924L21.1923 19.7782L18.3198 16.9057C17.9092 17.4339 17.4338 17.9093 16.9056 18.3199ZM19.9381 13H24V11H19.9381C19.979 11.3276 20 11.6613 20 12C20 12.3387 19.979 12.6724 19.9381 13ZM18.3198 7.0943L21.1923 4.22183L19.7781 2.80762L16.9056 5.6801C17.4338 6.09071 17.9092 6.56608 18.3198 7.0943Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledSun = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 24px; height: 24px; background: linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 5px -6px/2px 6px, linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 5px 14px/2px 6px, linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat -8px 5px/6px 2px, linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 14px 5px/6px 2px; border-radius: 100px; box-shadow: inset 0 0 0 2px; border: 6px solid transparent; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 24px; height: 2px; border-right: 4px solid; border-left: 4px solid; left: -6px; top: 5px; } &::before { transform: rotate(-45deg); } &::after { transform: rotate(45deg); }`export const Sun = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledSun {...props} ref={ref} icon-role="sun" /></> ) },)

CSSSVGTSX

1	.gg-sun {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 24px;
7	height: 24px;
8	background:
9	linear-gradient(to bottom,
10	currentColor 4px,transparent 0)
11	no-repeat 5px -6px/2px 6px,
12	linear-gradient(to bottom,
13	currentColor 4px,transparent 0)
14	no-repeat 5px 14px/2px 6px,
15	linear-gradient(to bottom,
16	currentColor 4px,transparent 0)
17	no-repeat -8px 5px/6px 2px,
18	linear-gradient(to bottom,
19	currentColor 4px,transparent 0)
20	no-repeat 14px 5px/6px 2px;
21	border-radius: 100px;
22	box-shadow: inset 0 0 0 2px;
23	border: 6px solid transparent
24	}
25
26	.gg-sun::after,
27	.gg-sun::before {
28	content: "";
29	display: block;
30	box-sizing: border-box;
31	position: absolute;
32	width: 24px;
33	height: 2px;
34	border-right: 4px solid;
35	border-left: 4px solid;
36	left: -6px;
37	top: 5px
38	}
39
40	.gg-sun::before {
41	transform: rotate(-45deg)
42	}
43
44	.gg-sun::after {
45	transform: rotate(45deg)
46	}

1	<svg
2	width="24"
3	height="24"
4	viewBox="0 0 24 24"
5	fill="none"
6	xmlns="http://www.w3.org/2000/svg"
7	>
8	<path
9	fill-rule="evenodd"
10	clip-rule="evenodd"
11	d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z"
12	fill="currentColor"
13	/>
14	<path
15	fill-rule="evenodd"
16	clip-rule="evenodd"
17	d="M11 0H13V4.06189C12.6724 4.02104 12.3387 4 12 4C11.6613 4 11.3276 4.02104 11 4.06189V0ZM7.0943 5.68018L4.22173 2.80761L2.80752 4.22183L5.6801 7.09441C6.09071 6.56618 6.56608 6.0908 7.0943 5.68018ZM4.06189 11H0V13H4.06189C4.02104 12.6724 4 12.3387 4 12C4 11.6613 4.02104 11.3276 4.06189 11ZM5.6801 16.9056L2.80751 19.7782L4.22173 21.1924L7.0943 18.3198C6.56608 17.9092 6.09071 17.4338 5.6801 16.9056ZM11 19.9381V24H13V19.9381C12.6724 19.979 12.3387 20 12 20C11.6613 20 11.3276 19.979 11 19.9381ZM16.9056 18.3199L19.7781 21.1924L21.1923 19.7782L18.3198 16.9057C17.9092 17.4339 17.4338 17.9093 16.9056 18.3199ZM19.9381 13H24V11H19.9381C19.979 11.3276 20 11.6613 20 12C20 12.3387 19.979 12.6724 19.9381 13ZM18.3198 7.0943L21.1923 4.22183L19.7781 2.80762L16.9056 5.6801C17.4338 6.09071 17.9092 6.56608 18.3198 7.0943Z"
18	fill="currentColor"
19	/>
20	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledSun = styled.i`
5	& {
6	box-sizing: border-box;
7	position: relative;
8	display: block;
9	transform: scale(var(--ggs, 1));
10	width: 24px;
11	height: 24px;
12	background: linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 5px -6px/2px 6px,
13	linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 5px 14px/2px 6px,
14	linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat -8px 5px/6px 2px,
15	linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 14px 5px/6px 2px;
16	border-radius: 100px;
17	box-shadow: inset 0 0 0 2px;
18	border: 6px solid transparent;
19	}
20	&::after,
21	&::before {
22	content: '';
23	display: block;
24	box-sizing: border-box;
25	position: absolute;
26	width: 24px;
27	height: 2px;
28	border-right: 4px solid;
29	border-left: 4px solid;
30	left: -6px;
31	top: 5px;
32	}
33	&::before {
34	transform: rotate(-45deg);
35	}
36	&::after {
37	transform: rotate(45deg);
38	}
39	`
40
41	export const Sun = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
42	(props, ref) => {
43	return (
44	<>
45	<StyledSun {...props} ref={ref} icon-role="sun" />
46	</>
47	)
48	},
49	)
50

HTMLCSSJSONXML

MarkupSVG Sprite

Sun ended up a magic 100% CSS icon built by using attributes like: transform, width, height, background, border-radius, box-shadow, border, border-right, border-left, .gg-sun,
Fun facts, it has: 46 Lines of code at 1038b & 799b after compression. Truly stunning 🤩 for a icon designed by code.

Sun

Thank you!