Home Screen

3K Views 53 Downloads - 7 API calls 35 Lines - 678 Bytes Apr 23, 2020 devices

 .gg-home-screen {
 display: block;
 position: relative;
 box-sizing: border-box;
 transform: scale(var(--ggs,1));
 width: 14px;
 height: 22px;
 border-radius: 3px;
 border: 2px solid
}

.gg-home-screen::after,
.gg-home-screen::before {
 content: "";
 display: block;
 position: absolute;
 box-sizing: border-box;
 border-radius: 2px;
 width: 2px;
 height: 2px;
 left: 1px;
 background: currentColor
}

.gg-home-screen::after {
 top: 1px;
 box-shadow:
 3px 0,6px 0,0 3px,
 3px 3px,6px 3px,0 6px
}

.gg-home-screen::before {
 bottom: 1px;
 box-shadow: 3px 0 0,6px 0 0
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 5C10 5.55228 9.55228 6 9 6C8.44771 6 8 5.55228 8 5C8 4.44772 8.44771 4 9 4C9.55228 4 10 4.44772 10 5Z" fill="currentColor" /><path d="M9 9C9.55228 9 10 8.55228 10 8C10 7.44772 9.55228 7 9 7C8.44771 7 8 7.44772 8 8C8 8.55228 8.44771 9 9 9Z" fill="currentColor" /><path d="M10 19C10 19.5523 9.55228 20 9 20C8.44771 20 8 19.5523 8 19C8 18.4477 8.44771 18 9 18C9.55228 18 10 18.4477 10 19Z" fill="currentColor" /><path d="M9 12C9.55228 12 10 11.5523 10 11C10 10.4477 9.55228 10 9 10C8.44771 10 8 10.4477 8 11C8 11.5523 8.44771 12 9 12Z" fill="currentColor" /><path d="M13 5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5Z" fill="currentColor" /><path d="M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z" fill="currentColor" /><path d="M13 19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19C11 18.4477 11.4477 18 12 18C12.5523 18 13 18.4477 13 19Z" fill="currentColor" /><path d="M15 6C15.5523 6 16 5.55228 16 5C16 4.44772 15.5523 4 15 4C14.4477 4 14 4.44772 14 5C14 5.55228 14.4477 6 15 6Z" fill="currentColor" /><path d="M16 8C16 8.55228 15.5523 9 15 9C14.4477 9 14 8.55228 14 8C14 7.44772 14.4477 7 15 7C15.5523 7 16 7.44772 16 8Z" fill="currentColor" /><path d="M15 20C15.5523 20 16 19.5523 16 19C16 18.4477 15.5523 18 15 18C14.4477 18 14 18.4477 14 19C14 19.5523 14.4477 20 15 20Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C6.34315 1 5 2.34315 5 4V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V4C19 2.34315 17.6569 1 16 1H8ZM16 3H8C7.44771 3 7 3.44772 7 4V20C7 20.5523 7.44772 21 8 21H16C16.5523 21 17 20.5523 17 20V4C17 3.44772 16.5523 3 16 3Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledHomeScreen = styled.i` & { display: block; position: relative; box-sizing: border-box; transform: scale(var(--ggs, 1)); width: 14px; height: 22px; border-radius: 3px; border: 2px solid; } &::after, &::before { content: ''; display: block; position: absolute; box-sizing: border-box; border-radius: 2px; width: 2px; height: 2px; left: 1px; background: currentColor; } &::after { top: 1px; box-shadow: 3px 0, 6px 0, 0 3px, 3px 3px, 6px 3px, 0 6px; } &::before { bottom: 1px; box-shadow: 3px 0 0, 6px 0 0; }`export const HomeScreen = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledHomeScreen {...props} ref={ref} icon-role="home-screen" /></> ) },)

CSSSVGTSX

1	.gg-home-screen {
2	display: block;
3	position: relative;
4	box-sizing: border-box;
5	transform: scale(var(--ggs,1));
6	width: 14px;
7	height: 22px;
8	border-radius: 3px;
9	border: 2px solid
10	}
11
12	.gg-home-screen::after,
13	.gg-home-screen::before {
14	content: "";
15	display: block;
16	position: absolute;
17	box-sizing: border-box;
18	border-radius: 2px;
19	width: 2px;
20	height: 2px;
21	left: 1px;
22	background: currentColor
23	}
24
25	.gg-home-screen::after {
26	top: 1px;
27	box-shadow:
28	3px 0,6px 0,0 3px,
29	3px 3px,6px 3px,0 6px
30	}
31
32	.gg-home-screen::before {
33	bottom: 1px;
34	box-shadow: 3px 0 0,6px 0 0
35	}

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	d="M10 5C10 5.55228 9.55228 6 9 6C8.44771 6 8 5.55228 8 5C8 4.44772 8.44771 4 9 4C9.55228 4 10 4.44772 10 5Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M9 9C9.55228 9 10 8.55228 10 8C10 7.44772 9.55228 7 9 7C8.44771 7 8 7.44772 8 8C8 8.55228 8.44771 9 9 9Z"
14	fill="currentColor"
15	/>
16	<path
17	d="M10 19C10 19.5523 9.55228 20 9 20C8.44771 20 8 19.5523 8 19C8 18.4477 8.44771 18 9 18C9.55228 18 10 18.4477 10 19Z"
18	fill="currentColor"
19	/>
20	<path
21	d="M9 12C9.55228 12 10 11.5523 10 11C10 10.4477 9.55228 10 9 10C8.44771 10 8 10.4477 8 11C8 11.5523 8.44771 12 9 12Z"
22	fill="currentColor"
23	/>
24	<path
25	d="M13 5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5Z"
26	fill="currentColor"
27	/>
28	<path
29	d="M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z"
30	fill="currentColor"
31	/>
32	<path
33	d="M13 19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19C11 18.4477 11.4477 18 12 18C12.5523 18 13 18.4477 13 19Z"
34	fill="currentColor"
35	/>
36	<path
37	d="M15 6C15.5523 6 16 5.55228 16 5C16 4.44772 15.5523 4 15 4C14.4477 4 14 4.44772 14 5C14 5.55228 14.4477 6 15 6Z"
38	fill="currentColor"
39	/>
40	<path
41	d="M16 8C16 8.55228 15.5523 9 15 9C14.4477 9 14 8.55228 14 8C14 7.44772 14.4477 7 15 7C15.5523 7 16 7.44772 16 8Z"
42	fill="currentColor"
43	/>
44	<path
45	d="M15 20C15.5523 20 16 19.5523 16 19C16 18.4477 15.5523 18 15 18C14.4477 18 14 18.4477 14 19C14 19.5523 14.4477 20 15 20Z"
46	fill="currentColor"
47	/>
48	<path
49	fill-rule="evenodd"
50	clip-rule="evenodd"
51	d="M8 1C6.34315 1 5 2.34315 5 4V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V4C19 2.34315 17.6569 1 16 1H8ZM16 3H8C7.44771 3 7 3.44772 7 4V20C7 20.5523 7.44772 21 8 21H16C16.5523 21 17 20.5523 17 20V4C17 3.44772 16.5523 3 16 3Z"
52	fill="currentColor"
53	/>
54	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Home Screen is an amazing 100% CSS icon created by applying features such as: transform, width, height, border-radius, border, background, box-shadow,
Some stats, it has: 35 Lines of code at 678b & 486b after compiling. Quite awesome 🙆‍♂️ huhh.

Home Screen

Thank you!