User Add interface
1 .gg-user-add { 2 display: block;
3 transform: scale(var(--ggs,1 ));
4 box-sizing: border-box;
5 width: 20px ;
6 height: 18px ;
7 background:
8 linear-gradient(
9 to left,
10 currentColor 8px ,
11 transparent 0 )
12 no-repeat 14px 6px /6px 2px ,
13 linear-gradient(
14 to left,
15 currentColor 8px ,
16 transparent 0 )
17 no-repeat 16px 4px /2px 6px 18 } 19 20 .gg-user-add::after ,.gg-user-add::before { 21 content: "";
22 display: block;
23 box-sizing: border-box;
24 position: absolute;
25 border: 2px solid
26 } 27 28 .gg-user-add::before { 29 width: 8px ;
30 height: 8px ;
31 border-radius: 30px ;
32 top: 0 ;
33 left: 2px 34 } 35 36 .gg-user-add::after { 37 width: 12px ;
38 height: 9px ;
39 border-bottom: 0 ;
40 border-top-left-radius: 3px ;
41 border-top-right-radius: 3px ;
42 top: 9px 43 }
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="M8 11 C10.2091 11 12 9.20914 12 7 C12 4.79086 10.2091 3 8 3 C5.79086 3 4 4.79086 4 7 C4 9.20914 5.79086 11 8 11 ZM8 9 C9.10457 9 10 8.10457 10 7 C10 5.89543 9.10457 5 8 5 C6.89543 5 6 5.89543 6 7 C6 8.10457 6.89543 9 8 9 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M11 14 C11.5523 14 12 14.4477 12 15 V21 H14 V15 C14 13.3431 12.6569 12 11 12 H5 C3.34315 12 2 13.3431 2 15 V21 H4 V15 C4 14.4477 4.44772 14 5 14 H11 Z" 16 fill="currentColor" 17 /> 18 <path d="M18 7 H20 V9 H22 V11 H20 V13 H18 V11 H16 V9 H18 V7 Z" fill="currentColor" /> 19 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledUserAdd = styled.i` 5 & { 6 display: block;7 transform: scale(var(--ggs, 1 ));8 box-sizing: border-box;9 width: 20px ;10 height: 18px ;11 background: linear-gradient(to left, currentColor 8px , transparent 0 ) no-repeat 14px 6px /6px 2px ,12 linear-gradient(to left, currentColor 8px , transparent 0 ) no-repeat 16px 4px /2px 6px ; 13 } 14 &::after , 15 &::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 border: 2px solid;21 } 22 &::before { 23 width: 8px ;24 height: 8px ;25 border-radius: 30px ;26 top: 0 ;27 left: 2px ;28 } 29 &::after { 30 width: 12px ;31 height: 9px ;32 border-bottom: 0 ;33 border-top-left-radius: 3px ;34 border-top-right-radius: 3px ;35 top: 9px ;36 } 37 ` 38 39 export const UserAdd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 40 (props, ref) => { 41 return ( 42 <> 43 <StyledUserAdd { ...props} ref={ ref} icon-role="user-add" /> 44 </> 45 ) 46 } , 47 ) 48
User Add is an amazing CSS icon built by adopting properties such as: transform, width, height, background, border, border-radius, border-bottom,
