Browse

3K Views 54 Downloads - 28 API calls 47 Lines - 964 Bytes Apr 23, 2020 interface content design

 .gg-browse {
 display: block;
 position: relative;
 transform: scale(var(--ggs,1));
 box-sizing: border-box;
 width: 16px;
 height: 22px;
 border: 2px solid;
 border-radius: 3px;
 background:
 linear-gradient(
 to left,
 currentcolor 10px,
 transparent 0
 ) no-repeat center 2px/8px 2px,
 linear-gradient(
 to left,
 currentcolor 10px,
 transparent 0
 ) no-repeat center 6px/8px 2px
}

.gg-browse::after,
.gg-browse::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 border-radius: 22px
}

.gg-browse::before {
 width: 6px;
 height: 6px;
 border: 2px solid;
 left: 3px;
 top: 9px
}

.gg-browse::after {
 width: 2px;
 height: 4px;
 background: currentColor;
 bottom: 1px;
 right: 2px;
 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="M14.364 13.1214C15.2876 14.045 15.4831 15.4211 14.9504 16.5362L16.4853 18.0711C16.8758 18.4616 16.8758 19.0948 16.4853 19.4853C16.0948 19.8758 15.4616 19.8758 15.0711 19.4853L13.5361 17.9504C12.421 18.4831 11.045 18.2876 10.1213 17.364C8.94975 16.1924 8.94975 14.2929 10.1213 13.1214C11.2929 11.9498 13.1924 11.9498 14.364 13.1214ZM12.9497 15.9498C13.3403 15.5593 13.3403 14.9261 12.9497 14.5356C12.5592 14.145 11.9261 14.145 11.5355 14.5356C11.145 14.9261 11.145 15.5593 11.5355 15.9498C11.9261 16.3403 12.5592 16.3403 12.9497 15.9498Z" fill="currentColor" /><path d="M8 5H16V7H8V5Z" fill="currentColor" /><path d="M16 9H8V11H16V9Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C4 2.34315 5.34315 1 7 1H17C18.6569 1 20 2.34315 20 4V20C20 21.6569 18.6569 23 17 23H7C5.34315 23 4 21.6569 4 20V4ZM7 3H17C17.5523 3 18 3.44772 18 4V20C18 20.5523 17.5523 21 17 21H7C6.44772 21 6 20.5523 6 20V4C6 3.44772 6.44771 3 7 3Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledBrowse = styled.i` & { display: block; position: relative; transform: scale(var(--ggs, 1)); box-sizing: border-box; width: 16px; height: 22px; border: 2px solid; border-radius: 3px; background: linear-gradient(to left, currentcolor 10px, transparent 0) no-repeat center 2px/8px 2px, linear-gradient(to left, currentcolor 10px, transparent 0) no-repeat center 6px/8px 2px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; border-radius: 22px; } &::before { width: 6px; height: 6px; border: 2px solid; left: 3px; top: 9px; } &::after { width: 2px; height: 4px; background: currentColor; bottom: 1px; right: 2px; transform: rotate(-45deg); }`export const Browse = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledBrowse {...props} ref={ref} icon-role="browse" /></> ) },)

CSSSVGTSX

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

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="M14.364 13.1214C15.2876 14.045 15.4831 15.4211 14.9504 16.5362L16.4853 18.0711C16.8758 18.4616 16.8758 19.0948 16.4853 19.4853C16.0948 19.8758 15.4616 19.8758 15.0711 19.4853L13.5361 17.9504C12.421 18.4831 11.045 18.2876 10.1213 17.364C8.94975 16.1924 8.94975 14.2929 10.1213 13.1214C11.2929 11.9498 13.1924 11.9498 14.364 13.1214ZM12.9497 15.9498C13.3403 15.5593 13.3403 14.9261 12.9497 14.5356C12.5592 14.145 11.9261 14.145 11.5355 14.5356C11.145 14.9261 11.145 15.5593 11.5355 15.9498C11.9261 16.3403 12.5592 16.3403 12.9497 15.9498Z"
12	fill="currentColor"
13	/>
14	<path d="M8 5H16V7H8V5Z" fill="currentColor" />
15	<path d="M16 9H8V11H16V9Z" fill="currentColor" />
16	<path
17	fill-rule="evenodd"
18	clip-rule="evenodd"
19	d="M4 4C4 2.34315 5.34315 1 7 1H17C18.6569 1 20 2.34315 20 4V20C20 21.6569 18.6569 23 17 23H7C5.34315 23 4 21.6569 4 20V4ZM7 3H17C17.5523 3 18 3.44772 18 4V20C18 20.5523 17.5523 21 17 21H7C6.44772 21 6 20.5523 6 20V4C6 3.44772 6.44771 3 7 3Z"
20	fill="currentColor"
21	/>
22	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Browse ended up an amazing 100% CSS icon created by applying attributes such as: transform, width, height, border, border-radius, background,
Fun to know, it has: 47 Lines of code at 964b & 640b after compression. Pretty wonderful 🤗 for a icon designed by code.

Browse

Thank you!