Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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.

Vector files to SVG

To get the above from Sketch, we

  1. Create a slice for the icon (this sets the viewBox)
  2. Select the icon and the slice
  3. Edit/Right click and choose “Copy SVG code”
  4. Paste into icons.svg, then trim and edit code until it looks like the above.

Warning: Sketch can produce some funky SVG code that is uses lots of transforms. You may need to play around with it in Sketch or Illustrator before you have nice code.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.