svg-icons.md

SVG Icons

SVGs are the future. SVG icon manifests are now widely-supported by all major browsers, but svg4everybody is still available as a polyfill if needed.

Manifest

The SVG Manifest looks something like this (we’ll call this icons.svg):

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="facebook" viewBox="0 0 512 512">
    <title>Facebook</title>
    <path d="M426.9 64H85.1C73.5 64 64 73.5 64 85.1v341.6c0 11.7 9.5 21.1 21.1 21.1h184V299.2H219v-58h50.1v-42.7c0-49.5 30.2-76.5 74.5-76.5 21.1 0 39.4 1.6 44.7 2.3v51.8h-30.6c-24.2 0-28.8 11.4-28.8 28.2v37h57.4l-7.5 58H329v148.6h97.8v.1c11.7 0 21.1-9.5 21.1-21.1V85.1c.1-11.6-9.4-21.1-21-21.1z"/>
  </symbol>
  <symbol id="instagram" viewBox="0 0 512 512">
    <title>Instagram</title>
    <path d="M280 45c-57.3 0-64.5.2-87.1 1.2-22.4 1-37.8 4.6-51.2 9.8-14 5.4-25.6 12.6-37.4 24.4s-18.9 23.5-24.4 37.4c-5.2 13.4-8.8 28.7-9.8 51.2-1 22.4-1.2 29.7-1.2 87s.2 64.5 1.2 87.1c1 22.4 4.6 37.8 9.8 51.2 5.4 14 12.6 25.6 24.4 37.4s23.5 18.9 37.4 24.4c13.4 5.2 28.7 8.8 51.2 9.8s29.7 1.2 87.1 1.2 64.5-.2 87.1-1.2c22.4-1 37.8-4.6 51.2-9.8 14-5.4 25.6-12.6 37.4-24.4s18.9-23.5 24.4-37.4c5.2-13.4 8.8-28.7 9.8-51.2 1-22.5 1.2-29.7 1.2-87.1s-.2-64.5-1.2-87.1c-1-22.4-4.6-37.8-9.8-51.2-5.4-14-12.6-25.6-24.4-37.4s-23.5-18.9-37.4-24.4c-13.4-5.2-28.7-8.8-51.2-9.8-22.6-.8-29.8-1.2-87.1-1.1zm0 38c56.4 0 63 .2 85.3 1.2 20.6.9 31.8 4.4 39.2 7.3 9.9 3.8 16.9 8.4 24.3 15.7 7.4 7.4 12 14.4 15.7 24.3 2.9 7.5 6.4 18.6 7.3 39.2 1 22.3 1.2 28.9 1.2 85.3s-.2 63-1.2 85.3c-.9 20.6-4.4 31.8-7.3 39.2-3.8 9.9-8.4 16.9-15.7 24.3-7.4 7.4-14.4 12-24.3 15.7-7.5 2.9-18.6 6.4-39.2 7.3-22.3 1-28.9 1.2-85.3 1.2s-63-.2-85.3-1.2c-20.6-.9-31.8-4.4-39.2-7.3-9.9-3.8-16.9-8.4-24.3-15.7-7.4-7.4-12-14.4-15.7-24.3-2.9-7.5-6.4-18.6-7.3-39.2-1-22.3-1.2-28.9-1.2-85.3s.2-63 1.2-85.3c.9-20.6 4.4-31.8 7.3-39.2 3.8-9.9 8.4-16.9 15.7-24.3 7.4-7.4 14.4-12 24.3-15.7 7.5-2.9 18.6-6.4 39.2-7.3 22.3-1 28.9-1.2 85.3-1.2"/><path d="M280 326.3c-38.9 0-70.3-31.5-70.3-70.3s31.5-70.3 70.3-70.3 70.3 31.5 70.3 70.3-31.4 70.3-70.3 70.3zm0-178.7c-59.8 0-108.4 48.5-108.4 108.4S220.2 364.4 280 364.4 388.4 315.8 388.4 256 339.8 147.6 280 147.6zM417.9 143.4c0 3.4-.7 6.6-2 9.7-1.3 3.1-3.1 5.8-5.5 8.2-2.4 2.4-5.1 4.2-8.2 5.5-3.1 1.3-6.4 2-9.7 2-3.4 0-6.6-.7-9.7-2-3.1-1.3-5.8-3.1-8.2-5.5-2.4-2.4-4.2-5.1-5.5-8.2-1.3-3.1-2-6.4-2-9.7 0-3.4.7-6.6 2-9.7 1.3-3.1 3.1-5.8 5.5-8.2 2.4-2.4 5.1-4.2 8.2-5.5 3.2-1.3 6.4-2 9.7-2 3.4 0 6.6.7 9.7 2 3.1 1.3 5.8 3.1 8.2 5.5 2.4 2.4 4.2 5.1 5.5 8.2 1.4 3.1 2 6.4 2 9.7z"/>
  </symbol>
  <symbol id="twitter" viewBox="0 0 512 512">
    <title>Twitter</title>
    <path d="M173.6 444c175.4 0 271.5-145.5 271.5-271.4 0-4.1 0-8.2-.2-12.3 18.6-13.4 34.7-30.3 47.5-49.4-17.1 7.6-35.5 12.7-54.8 15.1 19.8-11.7 34.7-30.5 42-52.9-18.4 10.9-38.9 18.8-60.6 23C401.6 77.5 376.7 66 349.4 66c-52.7 0-95.4 42.8-95.4 95.4 0 7.4.9 14.7 2.5 21.8-79.2-3.8-149.6-42-196.6-99.7-8.2 14.2-12.8 30.5-12.8 48.1 0 33.1 16.9 62.3 42.4 79.4-15.7-.6-30.3-4.8-43.1-11.9v1.3c0 46.2 32.9 84.8 76.5 93.6-8 2.2-16.3 3.3-25.1 3.3-6.2 0-12.1-.6-17.9-1.7 12.1 38 47.4 65.5 89.1 66.2-32.8 25.7-73.8 41-118.4 41-7.6 0-15.3-.3-22.7-1.3 41.7 26.7 91.9 42.5 145.7 42.5"/>
  </symbol>
</svg>

These are all individual SVGs, compressed with svgo, and then thrown inside <symbol> tags. Note how all classes have been stripped, as have all the individual <svg> tags.

Usage

Wherever you’d like to use an icon, render:

<svg>
  <use xlink:href="icons.svg#twitter"></use>
</svg>

And it will appear. Note how we used icons.svg in the xlink:href attribute—that should be replaced with the name and path to your SVG manifest file. You can add CSS classes to the <svg> tag to style it. Also be mindful of ARIA labels.