List design content interface
1 .gg-list { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 22px ;
7 height: 20px ;
8 border: 2px solid;
9 border-radius: 3px 10 } 11 12 .gg-list::after ,
13 .gg-list::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 width: 2px ;
19 height: 2px ;
20 background: currentColor;
21 top: 3px ;
22 left: 3px ;
23 box-shadow:
24 0 4px 0 ,
25 0 8px 0 26 } 27 28 .gg-list::after { 29 border-radius: 3px ;
30 width: 8px ;
31 left: 7px 32 }
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="M20 4 H4 C3.44771 4 3 4.44772 3 5 V19 C3 19.5523 3.44772 20 4 20 H20 C20.5523 20 21 19.5523 21 19 V5 C21 4.44771 20.5523 4 20 4 ZM4 2 C2.34315 2 1 3.34315 1 5 V19 C1 20.6569 2.34315 22 4 22 H20 C21.6569 22 23 20.6569 23 19 V5 C23 3.34315 21.6569 2 20 2 H4 ZM6 7 H8 V9 H6 V7 ZM11 7 C10.4477 7 10 7.44772 10 8 C10 8.55228 10.4477 9 11 9 H17 C17.5523 9 18 8.55228 18 8 C18 7.44772 17.5523 7 17 7 H11 ZM8 11 H6 V13 H8 V11 ZM10 12 C10 11.4477 10.4477 11 11 11 H17 C17.5523 11 18 11.4477 18 12 C18 12.5523 17.5523 13 17 13 H11 C10.4477 13 10 12.5523 10 12 ZM8 15 H6 V17 H8 V15 ZM10 16 C10 15.4477 10.4477 15 11 15 H17 C17.5523 15 18 15.4477 18 16 C18 16.5523 17.5523 17 17 17 H11 C10.4477 17 10 16.5523 10 16 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledList = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 22px ;11 height: 20px ;12 border: 2px solid;13 border-radius: 3px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 2px ;22 height: 2px ;23 background: currentColor;24 top: 3px ;25 left: 3px ;26 box-shadow: 0 4px 0 , 0 8px 0 ;27 } 28 &::after { 29 border-radius: 3px ;30 width: 8px ;31 left: 7px ;32 } 33 ` 34 35 export const List = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledList { ...props} ref={ ref} icon-role="list" /> 40 </> 41 ) 42 } , 43 ) 44
List ended up an amazing CSS icon built by using properties such as: transform, width, height, border, border-radius, background, box-shadow,
