Add SVG icons

Switching from PNGs (Portable Network Graphics) or icon fonts, to SVG (Scalable Vector Graphics) icons.

Screenshot of the Twitter bird being edited in a vector drawing application
The Twitter icon being edited in Figma

SVGs are best for icons

  • SVGs are vector images
  • They can be zoomed without pixelating
  • Inline SVGs can be styled with CSS
  • Inline SVGs are good for performance
  • SVGs have accessibility advantages
  • They are better than icon fonts
  • Browser support is good
  • Editable using code or vector drawing applications

Useful SVG attributes

  • height=""
  • width=""
  • viewBox=""
  • aria-hidden="true"
  • xmlns="http://www.w3.org/2000/svg"
  • focusable="false"
  • aria-labelledby=""
  • fill="currentColor"

Add focusable="false" to SVGs

Scott O'Hara explains why and when to use focusable="false"

focusable="false" is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG.

Inline SVG performance benefits

  • There is one less http request because we don't need to load an external image file
  • File size is often smaller (unless the icon very complex)
  • Only load what you need (instead of a whole icon font)

Related links

What I changed on the blog

Old HTML

<i class="icon icon-social icon-instagram">
<span class="visuallyhidden">Instagram</span>
</i>

New HTML

<span class="icon">
<svg height="25" width="25" viewBox="0 0 25 25" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-labelledby="iconTwitterTitle">
<title id="iconTwitterTitle">Twitter icon</title>
<path d="M7.8 22.6c8 .1 14.6-6.3 14.6-14.3v-.9c1-.7 1.8-1.6 2.5-2.7-.9.4-1.9.7-3 .8a4.7 4.7 0 0 0 2.2-2.8c-1 .6-2.1 1.1-3.2 1.3a5.1 5.1 0 0 0-7.3-.2c-1 1-1.6 2.3-1.6 3.7l.1 1.1C8.2 8.4 4.4 6.5 1.7 3.3a5 5 0 0 0 1.5 6.8c-.7 0-1.5-.2-2.2-.6v.1c0 2.4 1.7 4.6 4.1 5.1-.7.2-1.5.2-2.3.1a5 5 0 0 0 4.8 3.5 10.5 10.5 0 0 1-6.4 2.2H0c2.3 1.4 5.1 2.1 7.8 2.1"/>
</svg></span>