How to choose: icon fonts vs SVGs

How to choose: icon fonts vs SVGs

Introduction

At Cdiscount, a team of seasoned professionals take care of our design systems. The Design Factory, as we call it, wanted to build up a library of icons.

Even if icons are pretty small in size, selecting a format for our design system icons is not an easy decision.

Web developers have often two main options: SVGs or icon fonts. Which one should we use?

Comparison

Size

Inline SVGs will increase our page size, be careful.

The difference between icon font and SVG file sizes is not that important and can be ignored. So let's move on performance!

Performance

One cons of using icon fonts is that most font sets contain useless icons for our need, so they just take up space for nothing. Also with icon fonts, we have to deal with FOIT.

Inline SVGs are not cached by the browser.

External SVGs can be cached by browser. So you must consider using:

<svg>
  <use xlinkHref="assets/my-icon.svg#symbolid" />
</svg>

Flexibility / Scalability

Both icon fonts and SVGs can be styled using CSS.

Browsers consider icon fonts as… font. Therefore anti-aliasing can be apply and affects the visual quality by blurring the icon.

SVGs are treated as images by browsers. Sharp!

Browser Support

Icon fonts are widely supported by all browsers and OS. It's only a font file.

For SVGs, I don't know when you will read this article so be sure to read:

However, in 2021, most users have moved away from legacy browsers, it shouldn't be a concern for our apps.

Positioning

Icon fonts are inserted as CSS pseudo-elements. So positioning can be tricky.

For SVG, set the initial size and enjoy!

Animation / Colorization

CSS-animate a SVGs offers a multiple diversity of possibility. Each stroke and path could be animated separately.

For multicolored icon, using inline SVGs is mandatory.

Accessibility

SVGs are built-in semantic HTML elements.

Summary

There will be always some debate in the community regarding icon fonts vs SVGs. Because it depends on the circumstance in which it is being used.

However at Cdiscount, at the Design Factory, SVGs are the preferred method. They're much more scalable, offer a better user experience and are supported by all major browsers.