Zoom Out

2K Views 49 Downloads - 16 API calls 36 Lines - 658 Bytes Apr 23, 2020 interface

 .gg-zoom-out {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border: 2px solid;
 border-radius: 100%;
 margin-top: -4px
}

.gg-zoom-out::after,
.gg-zoom-out::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 background: currentColor
}

.gg-zoom-out::after {
 transform: rotate(-45deg);
 border-radius: 3px;
 width: 2px;
 height: 8px;
 top: 10px;
 left: 12px
}

.gg-zoom-out::before {
 width: 8px;
 height: 2px;
 top: 5px;
 left: 2px
}

<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="M15.3431 15.2426C17.6863 12.8995 17.6863 9.1005 15.3431 6.75736C13 4.41421 9.20101 4.41421 6.85786 6.75736C4.51472 9.1005 4.51472 12.8995 6.85786 15.2426C9.20101 17.5858 13 17.5858 15.3431 15.2426ZM16.7574 5.34315C19.6425 8.22833 19.8633 12.769 17.4195 15.9075C17.4348 15.921 17.4498 15.9351 17.4645 15.9497L21.7071 20.1924C22.0976 20.5829 22.0976 21.2161 21.7071 21.6066C21.3166 21.9971 20.6834 21.9971 20.2929 21.6066L16.0503 17.364C16.0356 17.3493 16.0215 17.3343 16.008 17.319C12.8695 19.7628 8.32883 19.542 5.44365 16.6569C2.31946 13.5327 2.31946 8.46734 5.44365 5.34315C8.56785 2.21895 13.6332 2.21895 16.7574 5.34315ZM7.10052 10V12H15.1005V10L7.10052 10Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledZoomOut = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 2px solid; border-radius: 100%; margin-top: -4px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; background: currentColor; } &::after { transform: rotate(-45deg); border-radius: 3px; width: 2px; height: 8px; top: 10px; left: 12px; } &::before { width: 8px; height: 2px; top: 5px; left: 2px; }`export const ZoomOut = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledZoomOut {...props} ref={ref} icon-role="zoom-out" /></> ) },)

CSSSVGTSX

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

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="M15.3431 15.2426C17.6863 12.8995 17.6863 9.1005 15.3431 6.75736C13 4.41421 9.20101 4.41421 6.85786 6.75736C4.51472 9.1005 4.51472 12.8995 6.85786 15.2426C9.20101 17.5858 13 17.5858 15.3431 15.2426ZM16.7574 5.34315C19.6425 8.22833 19.8633 12.769 17.4195 15.9075C17.4348 15.921 17.4498 15.9351 17.4645 15.9497L21.7071 20.1924C22.0976 20.5829 22.0976 21.2161 21.7071 21.6066C21.3166 21.9971 20.6834 21.9971 20.2929 21.6066L16.0503 17.364C16.0356 17.3493 16.0215 17.3343 16.008 17.319C12.8695 19.7628 8.32883 19.542 5.44365 16.6569C2.31946 13.5327 2.31946 8.46734 5.44365 5.34315C8.56785 2.21895 13.6332 2.21895 16.7574 5.34315ZM7.10052 10V12H15.1005V10L7.10052 10Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Zoom Out turned into a wonderful CSS icon built by practicing properties as follows: transform, width, height, border, border-radius, background,
Some stats, it has: 36 Lines of code at 658b & 464b after compiling. Pretty marvelous 💎 for a CSS designed icon.

Zoom Out

Thank you!