Voicemail

1K Views Downloads - API calls 35 Lines - 699 Bytes Apr 23, 2020 interface multimedia

 .gg-voicemail-o {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 22px;
 height: 22px;
 background:
 linear-gradient(
 to left,currentColor 10px,transparent 0)
 no-repeat 5px 10px/8px 2px;
 border-radius: 30px;
 border: 2px solid
}

.gg-voicemail-o::after,
.gg-voicemail-o::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 6px;
 height: 6px;
 border: 2px solid;
 border-radius: 10px;
 top: 6px
}

.gg-voicemail-o::before {
 left: 2px
}

.gg-voicemail-o::after {
 right: 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="M11 12C11 12.3506 10.9398 12.6872 10.8293 13H13.1707C13.0602 12.6872 13 12.3506 13 12C13 10.3431 14.3431 9 16 9C17.6569 9 19 10.3431 19 12C19 13.6569 17.6569 15 16 15H8C6.34315 15 5 13.6569 5 12C5 10.3431 6.34315 9 8 9C9.65685 9 11 10.3431 11 12ZM9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12ZM17 12C17 12.5523 16.5523 13 16 13C15.4477 13 15 12.5523 15 12C15 11.4477 15.4477 11 16 11C16.5523 11 17 11.4477 17 12Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledVoicemailO = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 22px; height: 22px; background: linear-gradient(to left, currentColor 10px, transparent 0) no-repeat 5px 10px/8px 2px; border-radius: 30px; border: 2px solid; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 6px; height: 6px; border: 2px solid; border-radius: 10px; top: 6px; } &::before { left: 2px; } &::after { right: 2px; }`export const VoicemailO = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledVoicemailO {...props} ref={ref} icon-role="voicemail-o" /></> ) },)

CSSSVGTSX

1	.gg-voicemail-o {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 22px;
7	height: 22px;
8	background:
9	linear-gradient(
10	to left,currentColor 10px,transparent 0)
11	no-repeat 5px 10px/8px 2px;
12	border-radius: 30px;
13	border: 2px solid
14	}
15
16	.gg-voicemail-o::after,
17	.gg-voicemail-o::before {
18	content: "";
19	display: block;
20	box-sizing: border-box;
21	position: absolute;
22	width: 6px;
23	height: 6px;
24	border: 2px solid;
25	border-radius: 10px;
26	top: 6px
27	}
28
29	.gg-voicemail-o::before {
30	left: 2px
31	}
32
33	.gg-voicemail-o::after {
34	right: 2px
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	fill-rule="evenodd"
10	clip-rule="evenodd"
11	d="M11 12C11 12.3506 10.9398 12.6872 10.8293 13H13.1707C13.0602 12.6872 13 12.3506 13 12C13 10.3431 14.3431 9 16 9C17.6569 9 19 10.3431 19 12C19 13.6569 17.6569 15 16 15H8C6.34315 15 5 13.6569 5 12C5 10.3431 6.34315 9 8 9C9.65685 9 11 10.3431 11 12ZM9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12ZM17 12C17 12.5523 16.5523 13 16 13C15.4477 13 15 12.5523 15 12C15 11.4477 15.4477 11 16 11C16.5523 11 17 11.4477 17 12Z"
12	fill="currentColor"
13	/>
14	<path
15	fill-rule="evenodd"
16	clip-rule="evenodd"
17	d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
18	fill="currentColor"
19	/>
20	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Voicemail turned into a magic CSS icon created by adopting features as follows: transform, width, height, background, border-radius, border, .gg-voicemail-o,
Fun facts, it has: 35 Lines of code at 699b & 496b after compression. Pretty marvelous 💎 .

Voicemail

Thank you!