Lastpass brands
1 .gg-lastpass { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 20px ;
7 height: 12px 8 } 9 10 .gg-lastpass::after ,
11 .gg-lastpass::before { 12 content: "";
13 display: block;
14 box-sizing: border-box;
15 position: absolute;
16 background: currentColor;
17 border-radius: 22px 18 } 19 20 .gg-lastpass::before { 21 width: 4px ;
22 height: 4px ;
23 box-shadow: 6px 0 0 ,12px 0 0 ;
24 top: 4px 25 } 26 27 .gg-lastpass::after { 28 width: 2px ;
29 height: 12px ;
30 right: 0 31 }
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="M21 6 C20.4477 6 20 6.44771 20 7 V17 C20 17.5523 20.4477 18 21 18 C21.5523 18 22 17.5523 22 17 V7 C22 6.44772 21.5523 6 21 6 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M4 14 C5.10457 14 6 13.1046 6 12 C6 10.8954 5.10457 10 4 10 C2.89543 10 2 10.8954 2 12 C2 13.1046 2.89543 14 4 14 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M12 12 C12 13.1046 11.1046 14 10 14 C8.89543 14 8 13.1046 8 12 C8 10.8954 8.89543 10 10 10 C11.1046 10 12 10.8954 12 12 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M16 14 C17.1046 14 18 13.1046 18 12 C18 10.8954 17.1046 10 16 10 C14.8954 10 14 10.8954 14 12 C14 13.1046 14.8954 14 16 14 Z" 22 fill="currentColor" 23 /> 24 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledLastpass = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 20px ;11 height: 12px ;12 } 13 &::after , 14 &::before { 15 content: '';16 display: block;17 box-sizing: border-box;18 position: absolute;19 background: currentColor;20 border-radius: 22px ;21 } 22 &::before { 23 width: 4px ;24 height: 4px ;25 box-shadow: 6px 0 0 , 12px 0 0 ;26 top: 4px ;27 } 28 &::after { 29 width: 2px ;30 height: 12px ;31 right: 0 ;32 } 33 ` 34 35 export const Lastpass = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledLastpass { ...props} ref={ ref} icon-role="lastpass" /> 40 </> 41 ) 42 } , 43 ) 44
Lastpass ended up a pure CSS icon built by applying features like: transform, width, height, background, border-radius, box-shadow,
