Digitalocean brands
1 .gg-digitalocean { 2 position: relative;
3 display: block;
4 transform: scale(var(--ggs,1 ));
5 width: 20px ;
6 height: 20px ;
7 background:
8 linear-gradient(
9 to left,
10 currentColor 4px ,
11 transparent 0 12 ) no-repeat 1px 14px /2px 2px ,
13 linear-gradient(
14 to left,
15 currentColor 4px ,
16 transparent 0 17 ) no-repeat 3px 16px /3px 3px 18 } 19 20 .gg-digitalocean::after ,
21 .gg-digitalocean::before { 22 content: "";
23 display: block;
24 position: absolute;
25 box-sizing: border-box
26 } 27 28 .gg-digitalocean::after { 29 width: 4px ;
30 height: 4px ;
31 background: currentColor;
32 bottom: 4px ;
33 left: 6px 34 } 35 36 .gg-digitalocean::before { 37 width: 20px ;
38 height: 20px ;
39 border: 4px solid;
40 transform: rotate(-45deg );
41 border-radius: 100px ;
42 border-left-color: transparent
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 d="M12 6 C8.68629 6 6 8.68629 6 12 H1 C1 5.92487 5.92487 1 12 1 C18.0751 1 23 5.92487 23 12 C23 18.0751 18.0751 23 12 23 V18 C15.3137 18 18 15.3137 18 12 C18 8.68629 15.3137 6 12 6 Z" 10 fill="currentColor" 11 /> 12 <path d="M7 18 V13 H12 V18 H7 Z" fill="currentColor" /> 13 <path d="M3 18 V22 H7 V18 H3 Z" fill="currentColor" /> 14 <path d="M3 18 H1 V16 H3 V18 Z" fill="currentColor" /> 15 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDigitalocean = styled.i` 5 & { 6 position: relative;7 display: block;8 transform: scale(var(--ggs, 1 ));9 width: 20px ;10 height: 20px ;11 background: linear-gradient(to left, currentColor 4px , transparent 0 ) no-repeat 1px 14px /2px 2px ,12 linear-gradient(to left, currentColor 4px , transparent 0 ) no-repeat 3px 16px /3px 3px ; 13 } 14 &::after , 15 &::before { 16 content: '';17 display: block;18 position: absolute;19 box-sizing: border-box;20 } 21 &::after { 22 width: 4px ;23 height: 4px ;24 background: currentColor;25 bottom: 4px ;26 left: 6px ;27 } 28 &::before { 29 width: 20px ;30 height: 20px ;31 border: 4px solid;32 transform: rotate(-45deg );33 border-radius: 100px ;34 border-left-color: transparent;35 } 36 ` 37 38 export const Digitalocean = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledDigitalocean { ...props} ref={ ref} icon-role="digitalocean" /> 43 </> 44 ) 45 } , 46 ) 47
Digitalocean ended up a 100% CSS icon created by practicing features like: transform, width, height, background, border, border-radius, border-left-color,
