Heart

8K Views 72 Downloads - 144 API calls 45 Lines - 848 Bytes Apr 23, 2020 design

 .gg-heart,
.gg-heart::after {
 border: 2px solid;
 border-top-left-radius: 100px;
 border-top-right-radius: 100px;
 width: 10px;
 height: 8px;
 border-bottom: 0
}

.gg-heart {
 box-sizing: border-box;
 position: relative;
 transform:
 translate(
 calc(-10px / 2 * var(--ggs,1)),
 calc(-6px / 2 * var(--ggs,1))
 )
 rotate(-45deg)
 scale(var(--ggs,1));
 display: block
}

.gg-heart::after,
.gg-heart::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute
}

.gg-heart::after {
 right: -9px;
 transform: rotate(90deg);
 top: 5px
}

.gg-heart::before {
 width: 11px;
 height: 11px;
 border-left: 2px solid;
 border-bottom: 2px solid;
 left: -2px;
 top: 3px
}

<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="M12.0122 5.57169L10.9252 4.48469C8.77734 2.33681 5.29493 2.33681 3.14705 4.48469C0.999162 6.63258 0.999162 10.115 3.14705 12.2629L11.9859 21.1017L11.9877 21.0999L12.014 21.1262L20.8528 12.2874C23.0007 10.1395 23.0007 6.65711 20.8528 4.50923C18.705 2.36134 15.2226 2.36134 13.0747 4.50923L12.0122 5.57169ZM11.9877 18.2715L16.9239 13.3352L18.3747 11.9342L18.3762 11.9356L19.4386 10.8732C20.8055 9.50635 20.8055 7.29028 19.4386 5.92344C18.0718 4.55661 15.8557 4.55661 14.4889 5.92344L12.0133 8.39904L12.006 8.3918L12.005 8.39287L9.51101 5.89891C8.14417 4.53207 5.92809 4.53207 4.56126 5.89891C3.19442 7.26574 3.19442 9.48182 4.56126 10.8487L7.10068 13.3881L7.10248 13.3863L11.9877 18.2715Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledHeart = styled.i` &, &::after { border: 2px solid; border-top-left-radius: 100px; border-top-right-radius: 100px; width: 10px; height: 8px; border-bottom: 0; } & { box-sizing: border-box; position: relative; transform: translate(calc(-10px / 2 * var(--ggs, 1)), calc(-6px / 2 * var(--ggs, 1))) rotate(-45deg) scale(var(--ggs, 1)); display: block; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; } &::after { right: -9px; transform: rotate(90deg); top: 5px; } &::before { width: 11px; height: 11px; border-left: 2px solid; border-bottom: 2px solid; left: -2px; top: 3px; }`export const Heart = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledHeart {...props} ref={ref} icon-role="heart" /></> ) },)

CSSSVGTSX

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

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="M12.0122 5.57169L10.9252 4.48469C8.77734 2.33681 5.29493 2.33681 3.14705 4.48469C0.999162 6.63258 0.999162 10.115 3.14705 12.2629L11.9859 21.1017L11.9877 21.0999L12.014 21.1262L20.8528 12.2874C23.0007 10.1395 23.0007 6.65711 20.8528 4.50923C18.705 2.36134 15.2226 2.36134 13.0747 4.50923L12.0122 5.57169ZM11.9877 18.2715L16.9239 13.3352L18.3747 11.9342L18.3762 11.9356L19.4386 10.8732C20.8055 9.50635 20.8055 7.29028 19.4386 5.92344C18.0718 4.55661 15.8557 4.55661 14.4889 5.92344L12.0133 8.39904L12.006 8.3918L12.005 8.39287L9.51101 5.89891C8.14417 4.53207 5.92809 4.53207 4.56126 5.89891C3.19442 7.26574 3.19442 9.48182 4.56126 10.8487L7.10068 13.3881L7.10248 13.3863L11.9877 18.2715Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Heart ended up an amazing pure CSS icon made by practicing features such as: .gg-heart, width, height, border-bottom, transform, border-left,
Fun facts, it has: 45 Lines of code at 848b & 585b minified. Quite wonderful 🤗 for a icon designed by code.

Heart

Thank you!