npm-github-twitter svg's

center aligned, minimal code

by Nicholas Berlette

HTML

<svg class="npm" fill="currentColor" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <title>npm</title>
      <path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331z"/>
      <path d="M10.665 10H12v2.667h-1.335V10z"/>
    </svg>

    <svg class="github" fill="currentColor" viewBox="0 0 33 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <title>github</title>
      <path d="M16.3,0 C7.3,0 -3.55271368e-15,7.3 -3.55271368e-15,16.3 C-3.55271368e-15,23.5 4.7,29.6 11.1,31.8 C11.9,31.9 12.2,31.4 12.2,31 L12.2,28.2 C7.7,29.2 6.7,26 6.7,26 C6,24.2 5,23.7 5,23.7 C3.5,22.7 5.1,22.7 5.1,22.7 C6.7,22.8 7.6,24.4 7.6,24.4 C9.1,26.9 11.4,26.2 12.3,25.8 C12.4,24.7 12.9,24 13.3,23.6 C9.7,23.2 5.9,21.8 5.9,15.5 C5.9,13.7 6.5,12.3 7.6,11.1 C7.4,10.7 6.9,9 7.8,6.8 C7.8,6.8 9.2,6.4 12.3,8.5 C13.6,8.1 15,8 16.4,8 C17.8,8 19.2,8.2 20.5,8.5 C23.6,6.4 25,6.8 25,6.8 C25.9,9 25.3,10.7 25.2,11.1 C26.2,12.2 26.9,13.7 26.9,15.5 C26.9,21.8 23.1,23.1 19.5,23.5 C20.1,24 20.6,25 20.6,26.5 L20.6,31 C20.6,31.4 20.9,31.9 21.7,31.8 C28.2,29.6 32.8,23.5 32.8,16.3 C32.6,7.3 25.3,0 16.3,0 L16.3,0 Z"></path>
    </svg>

<!--     <svg class="nextein" fill="currentColor" viewBox="0 0 155 140" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <title>Nextein</title>
        <defs>
          <filter id="shadow1" x="0" y="0" width="100%" height="120%">
            <feOffset result="offOut" in="SourceAlpha" dx="0" dy="5" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
          </filter>
        </defs>
      <g transform="matrix(1,0,0,1,-159.075,-163.661)">
        <g transform="matrix(0.440542,0,0,0.574469,-40.8871,-3.2098)">
          <path filter="url(#shadow1)"
          ...

CSS

body {
  place-items: center;
  width: 100vw;
  height: 100vh;
  display: grid;
  margin: 0;
  padding: 0;
}

svg.npm {
  color: #bb1111;
  margin: -1em 0 -3em 0;
}
svg.github {
  color: #21111d;
}
svg.nextein {
  color: rgba(0, 0, 0, 0.66);
}
svg.nextein path {
  text-shadow: 0px 10px 10px rgba(0,0,0,0.5);
  
}
svg.twitter {
  color: #00aaff;
}
svg {
  min-width: 5em;
  max-width: 10em;
  display: block;
  margin: .5em 0em;
}