Zoom In

5K Views 53 Downloads - 12 API calls 38 Lines - 776 Bytes Apr 23, 2020 interface

 .gg-zoom-in {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border: 2px solid;
 border-radius: 100%;
 background:
 linear-gradient(to bottom,
 currentColor 5px,transparent 0)
 no-repeat 2px 5px/8px 2px;
 margin-top: -4px
 }

 .gg-zoom-in::after,
 .gg-zoom-in::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 2px;
 height: 8px;
 background: currentColor
 }

 .gg-zoom-in::after {
 transform: rotate(-45deg);
 border-radius: 3px;
 top: 10px;
 left: 12px
 }

 .gg-zoom-in::before {
 top: 2px;
 left: 5px
 }

<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.34315ZM10.1005 7H12.1005V10H15.1005V12H12.1005V15H10.1005V12H7.10052V10H10.1005V7Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledZoomIn = 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%; background: linear-gradient(to bottom, currentColor 5px, transparent 0) no-repeat 2px 5px/8px 2px; margin-top: -4px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 2px; height: 8px; background: currentColor; } &::after { transform: rotate(-45deg); border-radius: 3px; top: 10px; left: 12px; } &::before { top: 2px; left: 5px; }`export const ZoomIn = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledZoomIn {...props} ref={ref} icon-role="zoom-in" /></> ) },)

CSSSVGTSX

1	.gg-zoom-in {
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	background:
11	linear-gradient(to bottom,
12	currentColor 5px,transparent 0)
13	no-repeat 2px 5px/8px 2px;
14	margin-top: -4px
15	}
16
17	.gg-zoom-in::after,
18	.gg-zoom-in::before {
19	content: "";
20	display: block;
21	box-sizing: border-box;
22	position: absolute;
23	width: 2px;
24	height: 8px;
25	background: currentColor
26	}
27
28	.gg-zoom-in::after {
29	transform: rotate(-45deg);
30	border-radius: 3px;
31	top: 10px;
32	left: 12px
33	}
34
35	.gg-zoom-in::before {
36	top: 2px;
37	left: 5px
38	}

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.34315ZM10.1005 7H12.1005V10H15.1005V12H12.1005V15H10.1005V12H7.10052V10H10.1005V7Z"
12	fill="currentColor"
13	/>
14	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledZoomIn = 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	background: linear-gradient(to bottom, currentColor 5px, transparent 0) no-repeat 2px 5px/8px
15	2px;
16	margin-top: -4px;
17	}
18	&::after,
19	&::before {
20	content: '';
21	display: block;
22	box-sizing: border-box;
23	position: absolute;
24	width: 2px;
25	height: 8px;
26	background: currentColor;
27	}
28	&::after {
29	transform: rotate(-45deg);
30	border-radius: 3px;
31	top: 10px;
32	left: 12px;
33	}
34	&::before {
35	top: 2px;
36	left: 5px;
37	}
38	`
39
40	export const ZoomIn = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
41	(props, ref) => {
42	return (
43	<>
44	<StyledZoomIn {...props} ref={ref} icon-role="zoom-in" />
45	</>
46	)
47	},
48	)
49

HTMLCSSJSONXML

MarkupSVG Sprite

Zoom In turned into a magic pure CSS icon made by applying properties like: transform, width, height, border, border-radius, background,
Fun facts, it has: 38 Lines of code at 776b & 532b after compression. Truly marvelous 💎 don't you think ?.

Zoom In

Thank you!