Eye Alt

Views Downloads - API calls 42 Lines - 821 Bytes Apr 23, 2020 interface

 .gg-eye-alt {
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 24px;
 height: 18px;
 border-bottom-right-radius: 100px;
 border-bottom-left-radius: 100px;
 overflow: hidden;
 box-sizing: border-box
}

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

.gg-eye-alt::after {
 top: 2px;
 box-shadow:
 inset 0 -8px 0 2px,
 inset 0 0 0 2px;
 width: 24px;
 height: 24px
}

.gg-eye-alt::before {
 width: 8px;
 height: 8px;
 border: 2px solid transparent;
 box-shadow:
 inset 0 0 0 6px,
 0 0 0 4px,
 6px 0 0 0,
 -6px 0 0 0 ;
 bottom: 4px;
 left: 8px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C6.40848 3 1.71018 6.82432 0.378052 12C1.71018 17.1757 6.40848 21 12 21C17.5915 21 22.2898 17.1757 23.6219 12C22.2898 6.82432 17.5915 3 12 3ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledEyeAlt = styled.i` & { position: relative; display: block; transform: scale(var(--ggs, 1)); width: 24px; height: 18px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; overflow: hidden; box-sizing: border-box; } &::after, &::before { content: ''; display: block; border-radius: 100px; position: absolute; box-sizing: border-box; } &::after { top: 2px; box-shadow: inset 0 -8px 0 2px, inset 0 0 0 2px; width: 24px; height: 24px; } &::before { width: 8px; height: 8px; border: 2px solid transparent; box-shadow: inset 0 0 0 6px, 0 0 0 4px, 6px 0 0 0, -6px 0 0 0; bottom: 4px; left: 8px; }`export const EyeAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledEyeAlt {...props} ref={ref} icon-role="eye-alt" /></> ) },)

CSSSVGTSX

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

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="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z"
10	fill="currentColor"
11	/>
12	<path
13	fill-rule="evenodd"
14	clip-rule="evenodd"
15	d="M12 3C6.40848 3 1.71018 6.82432 0.378052 12C1.71018 17.1757 6.40848 21 12 21C17.5915 21 22.2898 17.1757 23.6219 12C22.2898 6.82432 17.5915 3 12 3ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
16	fill="currentColor"
17	/>
18	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Eye Alt turned into a magic 100% CSS icon made by practicing properties like: transform, width, height, overflow, border-radius, box-shadow, border,
Fun facts, it has: 42 Lines of code at 821b & 568b minified. Actually marvelous 💎 for a icon designed by code.

Eye Alt

Thank you!