Voicemail

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

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

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

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

.gg-voicemail-r::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.5 12C11.5 12.3506 11.4398 12.6872 11.3293 13H13.6707C13.5602 12.6872 13.5 12.3506 13.5 12C13.5 10.3431 14.8431 9 16.5 9C18.1569 9 19.5 10.3431 19.5 12C19.5 13.6569 18.1569 15 16.5 15H8.5C6.84315 15 5.5 13.6569 5.5 12C5.5 10.3431 6.84315 9 8.5 9C10.1569 9 11.5 10.3431 11.5 12ZM9.5 12C9.5 12.5523 9.05228 13 8.5 13C7.94772 13 7.5 12.5523 7.5 12C7.5 11.4477 7.94772 11 8.5 11C9.05228 11 9.5 11.4477 9.5 12ZM17.5 12C17.5 12.5523 17.0523 13 16.5 13C15.9477 13 15.5 12.5523 15.5 12C15.5 11.4477 15.9477 11 16.5 11C17.0523 11 17.5 11.4477 17.5 12Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8C1.5 6.34315 2.84315 5 4.5 5H19.5C21.1569 5 22.5 6.34315 22.5 8V16C22.5 17.6569 21.1569 19 19.5 19H4.5C2.84315 19 1.5 17.6569 1.5 16V8ZM4.5 7H19.5C20.0523 7 20.5 7.44772 20.5 8V16C20.5 16.5523 20.0523 17 19.5 17H4.5C3.94772 17 3.5 16.5523 3.5 16V8C3.5 7.44772 3.94772 7 4.5 7Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledVoicemailR = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 21px; height: 14px; background: linear-gradient(to left, currentColor 10px, transparent 0) no-repeat 5px 6px/7px 2px; border-radius: 3px; 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: 2px; } &::before { left: 2px; } &::after { right: 2px; }`export const VoicemailR = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledVoicemailR {...props} ref={ref} icon-role="voicemail-r" /></> ) },)

CSSSVGTSX

1	.gg-voicemail-r {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 21px;
7	height: 14px;
8	background:
9	linear-gradient(
10	to left,currentColor 10px,transparent 0)
11	no-repeat 5px 6px/7px 2px;
12	border-radius: 3px;
13	border: 2px solid
14	}
15
16	.gg-voicemail-r::after,
17	.gg-voicemail-r::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: 2px
27	}
28
29	.gg-voicemail-r::before {
30	left: 2px
31	}
32
33	.gg-voicemail-r::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.5 12C11.5 12.3506 11.4398 12.6872 11.3293 13H13.6707C13.5602 12.6872 13.5 12.3506 13.5 12C13.5 10.3431 14.8431 9 16.5 9C18.1569 9 19.5 10.3431 19.5 12C19.5 13.6569 18.1569 15 16.5 15H8.5C6.84315 15 5.5 13.6569 5.5 12C5.5 10.3431 6.84315 9 8.5 9C10.1569 9 11.5 10.3431 11.5 12ZM9.5 12C9.5 12.5523 9.05228 13 8.5 13C7.94772 13 7.5 12.5523 7.5 12C7.5 11.4477 7.94772 11 8.5 11C9.05228 11 9.5 11.4477 9.5 12ZM17.5 12C17.5 12.5523 17.0523 13 16.5 13C15.9477 13 15.5 12.5523 15.5 12C15.5 11.4477 15.9477 11 16.5 11C17.0523 11 17.5 11.4477 17.5 12Z"
12	fill="currentColor"
13	/>
14	<path
15	fill-rule="evenodd"
16	clip-rule="evenodd"
17	d="M1.5 8C1.5 6.34315 2.84315 5 4.5 5H19.5C21.1569 5 22.5 6.34315 22.5 8V16C22.5 17.6569 21.1569 19 19.5 19H4.5C2.84315 19 1.5 17.6569 1.5 16V8ZM4.5 7H19.5C20.0523 7 20.5 7.44772 20.5 8V16C20.5 16.5523 20.0523 17 19.5 17H4.5C3.94772 17 3.5 16.5523 3.5 16V8C3.5 7.44772 3.94772 7 4.5 7Z"
18	fill="currentColor"
19	/>
20	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Voicemail ended up a pure CSS icon created by adopting attributes as follows: transform, width, height, background, border-radius, border, .gg-voicemail-r,
Fun facts, it has: 35 Lines of code at 697b & 494b minified. Pretty wonderful 🤗 .

Voicemail

Thank you!