Icons

These icons were taken directly from the SVG file for font awesome

Need to add a new icon?

GOOD 

<svg width="90" height="50" viewBox="0 0 89.6 50">
  <switch>
    <path d="M82.6,39.6c0,1.9-1.6,3.5-3.5,3.5h-3.5V7h3.5c1.9,0,3.5,1.6,3.5,3.5V39.6z M79.1,0h-9.9
      c-0.4,0-0.6,0.3-0.6,0.6v48.7c0,0.4,0.3,0.6,0.6,0.6h9.9c5.8,0,10.5-4.7,10.5-10.4V10.4C89.6,4.7,84.9,0,79.1,0z M59.7,39.6
      c0,1.9-1.6,3.5-3.5,3.5s-3.5-1.6-3.5-3.5V10.4c0-1.9,1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5V39.6z M56.2,0c-5.8,0-10.5,4.7-10.5,10.4
      v29.1c0,5.8,4.7,10.4,10.5,10.4c5.8,0,10.5-4.7,10.5-10.4V10.4C66.7,4.7,62,0,56.2,0z M10.5,0C4.7,0,0,4.7,0,10.4v29.1
      C0,45.3,4.7,50,10.5,50c2.5,0,4.7-0.9,6.5-2.3l0.8,2.3h2.5c0.4,0,0.6-0.3,0.6-0.6V20.9c0-0.4-0.3-0.6-0.6-0.6h-9.5
      c-0.4,0-0.6,0.3-0.6,0.6v5.7c0,0.4,0.3,0.6,0.6,0.6H14v12.3c0,1.9-1.6,3.5-3.5,3.5S7,41.5,7,39.6V10.4C7,8.5,8.6,7,10.5,7
      S14,8.5,14,10.4v2.2c0,0.3,0.3,0.6,0.6,0.6h5.7c0.4,0,0.6-0.3,0.6-0.6v-2.2C21,4.7,16.3,0,10.5,0z M36.9,39.6
      c0,1.9-1.6,3.5-3.5,3.5c-1.9,0-3.5-1.6-3.5-3.5V10.4c0-1.9,1.6-3.5,3.5-3.5c1.9,0,3.5,1.6,3.5,3.5V39.6z M33.4,0
      c-5.8,0-10.5,4.7-10.5,10.4v29.1c0,5.8,4.7,10.4,10.5,10.4s10.5-4.7,10.5-10.4V10.4C43.9,4.7,39.1,0,33.4,0z"></path>
    <foreignobject>GOOD</foreignobject>
  </switch>
</svg>

Navigation 

<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <switch>
    <path d="M21.2,6.6V5.1c0-0.2-0.1-0.4-0.2-0.5c-0.2-0.2-0.3-0.2-0.5-0.2H3.5C3.3,4.3,3.1,4.4,3,4.5 C2.8,4.7,2.8,4.9,2.8,5.1v1.5C2.8,6.8,2.8,7,3,7.2c0.2,0.2,0.3,0.2,0.5,0.2h16.9c0.2,0,0.4-0.1,0.5-0.2C21.2,7,21.2,6.8,21.2,6.6z  M21.2,12.8v-1.5c0-0.2-0.1-0.4-0.2-0.5c-0.2-0.2-0.3-0.2-0.5-0.2H3.5c-0.2,0-0.4,0.1-0.5,0.2c-0.2,0.2-0.2,0.3-0.2,0.5v1.5 c0,0.2,0.1,0.4,0.2,0.5c0.2,0.2,0.3,0.2,0.5,0.2h16.9c0.2,0,0.4-0.1,0.5-0.2C21.2,13.2,21.2,13,21.2,12.8z M21.2,18.9v-1.5 c0-0.2-0.1-0.4-0.2-0.5c-0.2-0.2-0.3-0.2-0.5-0.2H3.5c-0.2,0-0.4,0.1-0.5,0.2c-0.2,0.2-0.2,0.3-0.2,0.5v1.5c0,0.2,0.1,0.4,0.2,0.5 c0.2,0.2,0.3,0.2,0.5,0.2h16.9c0.2,0,0.4-0.1,0.5-0.2C21.2,19.3,21.2,19.1,21.2,18.9z"></path>
    <foreignobject>Navigation</foreignobject>
  </switch>
</svg>

Hide 

<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <switch>
    <path d="M16.9,9c0-0.2-0.1-0.4-0.2-0.6l-1.1-1.1c-0.1-0.1-0.3-0.2-0.6-0.2c-0.2,0-0.5,0-0.6,0.2L12,9.8L9.5,7.3 C9.4,7.1,9.1,7.1,8.9,7.1c-0.2,0-0.4,0.1-0.6,0.3L7.2,8.5C7.1,8.6,7,8.8,7,9s0.1,0.4,0.2,0.6L9.6,12l-2.4,2.4C7.1,14.5,7,14.8,7,15 c0,0.2,0.1,0.4,0.2,0.6l1.1,1.1c0.1,0.1,0.3,0.2,0.6,0.2c0.2,0,0.4-0.1,0.6-0.2l2.4-2.4l2.4,2.4c0.1,0.1,0.3,0.2,0.6,0.2 s0.4-0.1,0.6-0.2l1.1-1.1c0.1-0.1,0.2-0.3,0.2-0.6c0-0.2-0.1-0.4-0.2-0.6L14.1,12l2.4-2.4C16.8,9.4,16.9,9.2,16.9,9z"></path>
    <foreignobject>Hide</foreignobject>
  </switch>
</svg>


<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <path d="M22,12c0-0.2-0.1-0.4-0.2-0.6l-9.4-8.2C12.2,3.1,12,3,11.8,3c-0.2,0-0.4,0.1-0.6,0.2l-0.5,0.5c-0.2,0.2-0.3,0.4-0.3,0.6 c0,0.2,0.1,0.4,0.3,0.6l7,5.9l-15,0.1c-0.2,0-0.4,0.1-0.5,0.3C2.1,11.3,2,11.5,2,11.7v0.6c0,0.2,0.1,0.4,0.2,0.6s0.3,0.3,0.5,0.3 h15l-7,6.1c-0.2,0.1-0.3,0.3-0.3,0.5s0.1,0.4,0.3,0.6l0.5,0.5c0.2,0.2,0.4,0.3,0.6,0.3c0.2,0,0.4-0.1,0.6-0.3l9.4-8.2 C21.9,12.4,22,12.2,22,12z"></path>
</svg>

Facebook 

<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <switch>
    <path d="M14.5,2c-1.4,0-2.5,0.4-3.3,1.2s-1.2,2-1.2,3.5v2.6H6.8v3.6h3.1V22h3.7v-9.1h3.1l0.5-3.6h-3.5V7 c0-0.6,0.1-1,0.4-1.3c0.2-0.3,0.7-0.4,1.4-0.4h1.9V2.1C16.5,2,15.6,2,14.5,2z"></path>
    <foreignobject>Facebook</foreignobject>
  </switch>
</svg>

Twitter 

<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <switch>
    <path d="M19.2,6.7c0.8-0.5,1.4-1.2,1.7-2.1c-0.8,0.5-1.6,0.8-2.5,0.9c-0.8-0.8-1.7-1.2-2.8-1.2c-1.1,0-2,0.4-2.7,1.1 s-1.1,1.7-1.1,2.7c0,0.3,0,0.6,0.1,0.9C10.3,9,8.8,8.6,7.4,7.9C6,7.2,4.8,6.2,3.9,5C3.5,5.6,3.3,6.3,3.3,7c0,0.7,0.2,1.3,0.5,1.9 c0.3,0.6,0.7,1,1.3,1.4c-0.6,0-1.2-0.2-1.8-0.5v0c0,0.9,0.3,1.8,0.9,2.5s1.3,1.2,2.2,1.3c-0.3,0.1-0.7,0.1-1,0.1 c-0.2,0-0.5,0-0.7-0.1c0.2,0.8,0.7,1.4,1.4,1.9s1.4,0.8,2.3,0.8c-1.4,1.1-3,1.7-4.8,1.7c-0.3,0-0.7,0-0.9,0c1.8,1.2,3.8,1.7,6,1.7 c1.4,0,2.7-0.2,3.9-0.7s2.2-1,3.1-1.8c0.9-0.7,1.6-1.6,2.2-2.5c0.6-1,1.1-1.9,1.4-3s0.5-2.1,0.5-3.1c0-0.2,0-0.4,0-0.5 c0.8-0.6,1.4-1.2,1.9-2C20.7,6.5,20,6.7,19.2,6.7z"></path>
    <foreignobject>Twitter</foreignobject>
  </switch>
</svg>

LinkedIn 

<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <switch>
    <path d="M3,8.9v11.9h4V8.9H3z M6.6,3.8C6.2,3.4,5.7,3.2,5,3.2S3.8,3.4,3.4,3.8S2.8,4.6,2.8,5.2c0,0.6,0.2,1.1,0.6,1.5 S4.3,7.3,5,7.3h0c0.7,0,1.2-0.2,1.6-0.6s0.6-0.9,0.6-1.5C7.2,4.6,7,4.1,6.6,3.8z M20,10c-0.8-0.9-1.9-1.4-3.3-1.4 c-0.5,0-1,0.1-1.4,0.2c-0.4,0.1-0.8,0.3-1,0.5s-0.5,0.4-0.7,0.6s-0.3,0.4-0.5,0.7h0V8.9h-4l0,0.6c0,0.4,0,1.6,0,3.6s0,4.6,0,7.8h4 v-6.6c0-0.4,0-0.7,0.1-1c0.2-0.4,0.4-0.8,0.8-1c0.3-0.3,0.8-0.4,1.3-0.4c0.7,0,1.2,0.2,1.5,0.7c0.3,0.5,0.5,1.1,0.5,2v6.4h4V14  C21.2,12.2,20.8,10.9,20,10z"></path>
    <foreignobject>LinkedIn</foreignobject>
  </switch>
</svg>

Instagram 

<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <switch>
    <path d="M22,19.4c0,1.4-1.2,2.6-2.6,2.6H4.6C3.2,22,2,20.8,2,19.4V4.6C2,3.2,3.2,2,4.6,2h14.9C20.8,2,22,3.2,22,4.6 V19.4z M19.7,10.5H18c0.2,0.5,0.3,1.1,0.3,1.7c0,3.3-2.8,6-6.2,6c-3.4,0-6.2-2.7-6.2-6c0-0.6,0.1-1.2,0.3-1.7H4.2v8.4 c0,0.4,0.4,0.8,0.8,0.8h13.9c0.4,0,0.8-0.4,0.8-0.8V10.5z M12,8.1c-2.2,0-4,1.7-4,3.9c0,2.1,1.8,3.9,4,3.9c2.2,0,4-1.7,4-3.9 C16,9.8,14.2,8.1,12,8.1z M19.7,5.1c0-0.5-0.4-0.9-0.9-0.9h-2.3c-0.5,0-0.9,0.4-0.9,0.9v2.1c0,0.5,0.4,0.9,0.9,0.9h2.3 c0.5,0,0.9-0.4,0.9-0.9L19.7,5.1L19.7,5.1z"></path>
    <foreignobject>Instagram</foreignobject>
  </switch>
</svg>

Download 

<svg class="icon" width="20" height="20" viewBox="0 0 20 20">
  <switch>
    <g>
      <path d="M17,7c-0.5-0.5-1.2-0.5-1.6,0l-4.2,4.2V2.6c0-0.6-0.5-1.2-1.2-1.2S8.8,2,8.8,2.6v8.6L4.6,7,C4.2,6.5,3.5,6.5,3,7S2.6,8.1,3,8.6l6.2,6.2c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3L17,8.6C17.4,8.1,17.4,7.4,17,7z"></path>
      <path d="M17.4,18.6H2.6c-0.6,0-1.2-0.5-1.2-1.2s0.5-1.2,1.2-1.2h14.8c0.6,0,1.2,0.5,1.2,1.2S18,18.6,17.4,18.6z"></path>
    </g>
    <foreignobject>Download</foreignobject>
  </switch>
</svg>

Dimensions

Consider adding width and height attributes to the icon, just like you would for an image. This will help the icons render at a reasonable size without a style sheet. A value of 24 pixels works well in most cases.

Instagram 
<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <switch>
    <path d="M22,19.4c0,1.4-1.2,2.6-2.6,2.6H4.6C3.2,22,2,20.8,2,19.4V4.6C2,3.2,3.2,2,4.6,2h14.9C20.8,2,22,3.2,22,4.6 V19.4z M19.7,10.5H18c0.2,0.5,0.3,1.1,0.3,1.7c0,3.3-2.8,6-6.2,6c-3.4,0-6.2-2.7-6.2-6c0-0.6,0.1-1.2,0.3-1.7H4.2v8.4 c0,0.4,0.4,0.8,0.8,0.8h13.9c0.4,0,0.8-0.4,0.8-0.8V10.5z M12,8.1c-2.2,0-4,1.7-4,3.9c0,2.1,1.8,3.9,4,3.9c2.2,0,4-1.7,4-3.9 C16,9.8,14.2,8.1,12,8.1z M19.7,5.1c0-0.5-0.4-0.9-0.9-0.9h-2.3c-0.5,0-0.9,0.4-0.9,0.9v2.1c0,0.5,0.4,0.9,0.9,0.9h2.3 c0.5,0,0.9-0.4,0.9-0.9L19.7,5.1L19.7,5.1z"></path>
    <foreignobject>Instagram</foreignobject>
  </switch>
</svg>

If you add a width and height, you’ll also want to include a viewBox with the same dimensions. (This helps with styling, particularly in Safari.)

Instagram 
<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <switch>
    <path d="M22,19.4c0,1.4-1.2,2.6-2.6,2.6H4.6C3.2,22,2,20.8,2,19.4V4.6C2,3.2,3.2,2,4.6,2h14.9C20.8,2,22,3.2,22,4.6 V19.4z M19.7,10.5H18c0.2,0.5,0.3,1.1,0.3,1.7c0,3.3-2.8,6-6.2,6c-3.4,0-6.2-2.7-6.2-6c0-0.6,0.1-1.2,0.3-1.7H4.2v8.4 c0,0.4,0.4,0.8,0.8,0.8h13.9c0.4,0,0.8-0.4,0.8-0.8V10.5z M12,8.1c-2.2,0-4,1.7-4,3.9c0,2.1,1.8,3.9,4,3.9c2.2,0,4-1.7,4-3.9 C16,9.8,14.2,8.1,12,8.1z M19.7,5.1c0-0.5-0.4-0.9-0.9-0.9h-2.3c-0.5,0-0.9,0.4-0.9,0.9v2.1c0,0.5,0.4,0.9,0.9,0.9h2.3 c0.5,0,0.9-0.4,0.9-0.9L19.7,5.1L19.7,5.1z"></path>
    <foreignobject>Instagram</foreignobject>
  </switch>
</svg>

Alternate Text

Consider adding alternate text if the icon represents content (just like an alt attribute for an <img> element).

<button>
  <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
    <switch>
      <path d="M22,19.4c0,1.4-1.2,2.6-2.6,2.6H4.6C3.2,22,2,20.8,2,19.4V4.6C2,3.2,3.2,2,4.6,2h14.9C20.8,2,22,3.2,22,4.6 V19.4z M19.7,10.5H18c0.2,0.5,0.3,1.1,0.3,1.7c0,3.3-2.8,6-6.2,6c-3.4,0-6.2-2.7-6.2-6c0-0.6,0.1-1.2,0.3-1.7H4.2v8.4 c0,0.4,0.4,0.8,0.8,0.8h13.9c0.4,0,0.8-0.4,0.8-0.8V10.5z M12,8.1c-2.2,0-4,1.7-4,3.9c0,2.1,1.8,3.9,4,3.9c2.2,0,4-1.7,4-3.9 C16,9.8,14.2,8.1,12,8.1z M19.7,5.1c0-0.5-0.4-0.9-0.9-0.9h-2.3c-0.5,0-0.9,0.4-0.9,0.9v2.1c0,0.5,0.4,0.9,0.9,0.9h2.3 c0.5,0,0.9-0.4,0.9-0.9L19.7,5.1L19.7,5.1z"></path>
      <foreignobject>Instagram</foreignobject>
    </switch>
  </svg>
</button>

The <foreignObject/> is useful to software like screen readers, and browsers that don’t understand SVG.

<button>
  <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
    <path d="M22,19.4c0,1.4-1.2,2.6-2.6,2.6H4.6C3.2,22,2,20.8,2,19.4V4.6C2,3.2,3.2,2,4.6,2h14.9C20.8,2,22,3.2,22,4.6 V19.4z M19.7,10.5H18c0.2,0.5,0.3,1.1,0.3,1.7c0,3.3-2.8,6-6.2,6c-3.4,0-6.2-2.7-6.2-6c0-0.6,0.1-1.2,0.3-1.7H4.2v8.4 c0,0.4,0.4,0.8,0.8,0.8h13.9c0.4,0,0.8-0.4,0.8-0.8V10.5z M12,8.1c-2.2,0-4,1.7-4,3.9c0,2.1,1.8,3.9,4,3.9c2.2,0,4-1.7,4-3.9 C16,9.8,14.2,8.1,12,8.1z M19.7,5.1c0-0.5-0.4-0.9-0.9-0.9h-2.3c-0.5,0-0.9,0.4-0.9,0.9v2.1c0,0.5,0.4,0.9,0.9,0.9h2.3 c0.5,0,0.9-0.4,0.9-0.9L19.7,5.1L19.7,5.1z"></path>
  </svg>
  Instagram
</button>

If the icon has a label, you can skip the <foreignObject/>.