Skip to content

Add SVG icons

Switching from PNGs (Portable Network Graphics) or Icon Fonts, to SVG (Scalable Vector Graphics) icons. Updated on 5 April 2021.

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

SVGs are best for icons

Useful SVG attributes

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

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>