Boy signs
1 .gg-boy,
2 .gg-boy::after ,
3 .gg-boy::before { 4 display: block;
5 box-sizing: border-box;
6 border-radius: 42px 7 } 8 9 .gg-boy { 10 position: relative;
11 width: 20px ;
12 height: 20px ;
13 transform: scale(var(--ggs,1 ));
14 overflow: hidden;
15 box-shadow: inset 0 0 0 2px 16 } 17 18 .gg-boy::after ,
19 .gg-boy::before { 20 content: "";
21 position: absolute;
22 width: 2px ;
23 height: 2px ;
24 background: currentColor;
25 box-shadow: 6px 0 0 ;
26 left: 6px ;
27 top: 10px 28 } 29 30 .gg-boy::after { 31 width: 20px ;
32 height: 20px ;
33 top: -13px ;
34 right: -12px ;
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 d="M9 14 C9.55228 14 10 13.5523 10 13 C10 12.4477 9.55228 12 9 12 C8.44771 12 8 12.4477 8 13 C8 13.5523 8.44771 14 9 14 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M16 13 C16 13.5523 15.5523 14 15 14 C14.4477 14 14 13.5523 14 13 C14 12.4477 14.4477 12 15 12 C15.5523 12 16 12.4477 16 13 Z" 14 fill="currentColor" 15 /> 16 <path 17 fill-rule="evenodd" 18 clip-rule="evenodd" 19 d="M12 22 C17.5228 22 22 17.5228 22 12 C22 6.47715 17.5228 2 12 2 C6.47715 2 2 6.47715 2 12 C2 17.5228 6.47715 22 12 22 ZM12 20 C16.4183 20 20 16.4183 20 12 C20 11.1637 19.8717 10.3574 19.6337 9.59973 C18.7991 9.82556 17.9212 9.94604 17.0152 9.94604 C13.2921 9.94604 10.0442 7.91139 8.32277 4.89334 C5.75469 6.22486 4 8.90751 4 12 C4 16.4183 7.58172 20 12 20 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledBoy = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 border-radius: 42px ;11 } 12 & { 13 position: relative;14 width: 20px ;15 height: 20px ;16 transform: scale(var(--ggs, 1 ));17 overflow: hidden;18 box-shadow: inset 0 0 0 2px ;19 } 20 &::after , 21 &::before { 22 content: '';23 position: absolute;24 width: 2px ;25 height: 2px ;26 background: currentColor;27 box-shadow: 6px 0 0 ;28 left: 6px ;29 top: 10px ;30 } 31 &::after { 32 width: 20px ;33 height: 20px ;34 top: -13px ;35 right: -12px ;36 } 37 ` 38 39 export const Boy = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledBoy { ...props} ref={ ref} icon-role="boy" /> 44 </> 45 ) 46 } , 47 ) 48
Boy is an amazing pure CSS icon made by practicing properties such as: .gg-boy, border-radius, width, height, transform, overflow, box-shadow, background,
