Band Aid

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

 .gg-band-aid {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform:
 rotate(-25deg)
 scale(var(--ggs,1));
 width: 24px;
 height: 12px;
 border: 2px solid;
 border-radius: 22px
}

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

.gg-band-aid::before {
 width: 12px;
 height: 10px;
 top: -2px;
 left: 4px;
 border-left: 2px solid;
 border-right: 2px solid
}

.gg-band-aid::after {
 width: 2px;
 height: 2px;
 background: currentColor;
 box-shadow:
 0 4px 0,
 4px 0 0,
 4px 4px 0;
 border-radius: 22px;
 left: 7px;
 top: 1px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9389 9.76478C11.7055 10.2653 11.1105 10.4819 10.61 10.2485C10.1094 10.0151 9.89288 9.42008 10.1263 8.91954C10.3597 8.419 10.9547 8.20244 11.4552 8.43585C11.9558 8.66925 12.1723 9.26423 11.9389 9.76478Z" fill="currentColor" /><path d="M8.9195 13.8737C9.42004 14.1071 10.015 13.8905 10.2484 13.39C10.4818 12.8895 10.2653 12.2945 9.76474 12.0611C9.2642 11.8277 8.66922 12.0442 8.43581 12.5448C8.20241 13.0453 8.41896 13.6403 8.9195 13.8737Z" fill="currentColor" /><path d="M13.8737 15.0805C13.6403 15.581 13.0453 15.7976 12.5447 15.5642C12.0442 15.3308 11.8276 14.7358 12.061 14.2352C12.2944 13.7347 12.8894 13.5181 13.39 13.7516C13.8905 13.985 14.1071 14.5799 13.8737 15.0805Z" fill="currentColor" /><path d="M14.2352 11.9389C14.7357 12.1723 15.3307 11.9558 15.5641 11.4552C15.7975 10.9547 15.581 10.3597 15.0804 10.1263C14.5799 9.89292 13.9849 10.1095 13.7515 10.61C13.5181 11.1106 13.7347 11.7055 14.2352 11.9389Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M17.0714 1.12432C14.0682 -0.276119 10.4983 1.02321 9.09783 4.02645L4.02641 14.9021C2.62598 17.9054 3.92531 21.4753 6.92855 22.8757C9.93179 24.2761 13.5017 22.9768 14.9021 19.9736L19.9735 9.09787C21.374 6.09463 20.0746 2.52475 17.0714 1.12432ZM13.9347 17.3157L17.3157 10.0653L10.0652 6.6843L6.68427 13.9348L13.9347 17.3157ZM13.0895 19.1283L5.83903 15.7474C4.90541 17.7495 5.77163 20.1295 7.77379 21.0631C9.77595 21.9967 12.1559 21.1305 13.0895 19.1283ZM16.2262 2.93693C18.2283 3.87055 19.0945 6.25047 18.1609 8.25264L10.9104 4.87169C11.8441 2.86953 14.224 2.00331 16.2262 2.93693Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledBandAid = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: rotate(-25deg) scale(var(--ggs, 1)); width: 24px; height: 12px; border: 2px solid; border-radius: 22px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; } &::before { width: 12px; height: 10px; top: -2px; left: 4px; border-left: 2px solid; border-right: 2px solid; } &::after { width: 2px; height: 2px; background: currentColor; box-shadow: 0 4px 0, 4px 0 0, 4px 4px 0; border-radius: 22px; left: 7px; top: 1px; }`export const BandAid = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledBandAid {...props} ref={ref} icon-role="band-aid" /></> ) },)

CSSSVGTSX

1	.gg-band-aid {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform:
6	rotate(-25deg)
7	scale(var(--ggs,1));
8	width: 24px;
9	height: 12px;
10	border: 2px solid;
11	border-radius: 22px
12	}
13
14	.gg-band-aid::after,
15	.gg-band-aid::before {
16	content: "";
17	display: block;
18	box-sizing: border-box;
19	position: absolute
20	}
21
22	.gg-band-aid::before {
23	width: 12px;
24	height: 10px;
25	top: -2px;
26	left: 4px;
27	border-left: 2px solid;
28	border-right: 2px solid
29	}
30
31	.gg-band-aid::after {
32	width: 2px;
33	height: 2px;
34	background: currentColor;
35	box-shadow:
36	0 4px 0,
37	4px 0 0,
38	4px 4px 0;
39	border-radius: 22px;
40	left: 7px;
41	top: 1px
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="M11.9389 9.76478C11.7055 10.2653 11.1105 10.4819 10.61 10.2485C10.1094 10.0151 9.89288 9.42008 10.1263 8.91954C10.3597 8.419 10.9547 8.20244 11.4552 8.43585C11.9558 8.66925 12.1723 9.26423 11.9389 9.76478Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M8.9195 13.8737C9.42004 14.1071 10.015 13.8905 10.2484 13.39C10.4818 12.8895 10.2653 12.2945 9.76474 12.0611C9.2642 11.8277 8.66922 12.0442 8.43581 12.5448C8.20241 13.0453 8.41896 13.6403 8.9195 13.8737Z"
14	fill="currentColor"
15	/>
16	<path
17	d="M13.8737 15.0805C13.6403 15.581 13.0453 15.7976 12.5447 15.5642C12.0442 15.3308 11.8276 14.7358 12.061 14.2352C12.2944 13.7347 12.8894 13.5181 13.39 13.7516C13.8905 13.985 14.1071 14.5799 13.8737 15.0805Z"
18	fill="currentColor"
19	/>
20	<path
21	d="M14.2352 11.9389C14.7357 12.1723 15.3307 11.9558 15.5641 11.4552C15.7975 10.9547 15.581 10.3597 15.0804 10.1263C14.5799 9.89292 13.9849 10.1095 13.7515 10.61C13.5181 11.1106 13.7347 11.7055 14.2352 11.9389Z"
22	fill="currentColor"
23	/>
24	<path
25	fill-rule="evenodd"
26	clip-rule="evenodd"
27	d="M17.0714 1.12432C14.0682 -0.276119 10.4983 1.02321 9.09783 4.02645L4.02641 14.9021C2.62598 17.9054 3.92531 21.4753 6.92855 22.8757C9.93179 24.2761 13.5017 22.9768 14.9021 19.9736L19.9735 9.09787C21.374 6.09463 20.0746 2.52475 17.0714 1.12432ZM13.9347 17.3157L17.3157 10.0653L10.0652 6.6843L6.68427 13.9348L13.9347 17.3157ZM13.0895 19.1283L5.83903 15.7474C4.90541 17.7495 5.77163 20.1295 7.77379 21.0631C9.77595 21.9967 12.1559 21.1305 13.0895 19.1283ZM16.2262 2.93693C18.2283 3.87055 19.0945 6.25047 18.1609 8.25264L10.9104 4.87169C11.8441 2.86953 14.224 2.00331 16.2262 2.93693Z"
28	fill="currentColor"
29	/>
30	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Band Aid ended up an amazing pure CSS icon created by using attributes like: transform, width, height, border, border-radius, border-left, border-right, background, box-shadow,
Fun to know, it has: 42 Lines of code at 773b & 521b after compression. Actually stunning 🤩 for a icon designed by code.

Band Aid

Thank you!