Microsoft brands
1 .gg-microsoft { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-microsoft,
6 .gg-microsoft::after ,
7 .gg-microsoft::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 18px ;
12 height: 18px 13 } 14 15 .gg-microsoft::after ,
16 .gg-microsoft::before { 17 content: "";
18 position: absolute;
19 width: 8px ;
20 border-top: 8px solid;
21 border-bottom: 8px solid
22 } 23 24 .gg-microsoft::after { 25 right: 0 26 }
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 d="M3 3 H11 V11 H3 V3 Z" fill="currentColor" /> 9 <path d="M3 13 H11 V21 H3 V13 Z" fill="currentColor" /> 10 <path d="M13 3 H21 V11 H13 V3 Z" fill="currentColor" /> 11 <path d="M13 13 H21 V21 H13 V13 Z" fill="currentColor" /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMicrosoft = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after , 10 &::before { 11 box-sizing: border-box;12 position: relative;13 display: block;14 width: 18px ;15 height: 18px ;16 } 17 &::after , 18 &::before { 19 content: '';20 position: absolute;21 width: 8px ;22 border-top: 8px solid;23 border-bottom: 8px solid;24 } 25 &::after { 26 right: 0 ;27 } 28 ` 29 30 export const Microsoft = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 31 (props, ref) => { 32 return ( 33 <> 34 <StyledMicrosoft { ...props} ref={ ref} icon-role="microsoft" /> 35 </> 36 ) 37 } , 38 ) 39
Microsoft became an amazing pure CSS icon made by practicing properties such as: transform, width, height, border-top, border-bottom, .gg-microsoft,
