SVGs vs. Icon Fonts: The Battle Without Resolution

At some point, every front end developer has to decide what kind of icon system wants to build. Right now we have two valuable players - SVGs and icon fonts. In this article, we’ll consider pros & cons of both of them and I’ll try to prove that this decision is fully dependent on the project we’re working on.

We’ll examine certain areas like Performance, Usage, Browser support, Accessibility, and Semantics.

Performance

I’ve created some basic batch of 200 icons using Icomoon. Let’s compare the file sizes.

	SVGs	Icon Font
Sprite	98kb	40kb (eot/ttf/woff) - 122kb (svg)
Inline	126kb	-

SVG format in case of icon fonts is poorly used across the browsers so we can easily consider 40kb as a target file size.

We must remember that SVG sprites can be colored only via CSS mask or a filter which has extremely low browser support. So in projects where we use multiple colors for icons, we actually need to use inline SVGs. You see the difference in file sizes, right? Additionally, inline SVG defs cannot be cached; sprites can. So every single page view requires a 126kb request for SVG icon set.

Winner: Icon Fonts.

Usage

Preparing a set

I think creating Icon Fonts sprites is way much easier than SVGs. In case of Icon Fonts, we need just 4 files of the font and some CSS. In case of SVGs usually, we need to support both sprites and defs in HTML code. There’re of course some compilers which do all the work for us however it takes some time to configure them to automate the process. I remember some issues when adding some icons to my set. I was using Node package called gulp-svg-sprite. I added one icon which was placed somewhere in the middle (via alphabetical order) and it turned out that half of my icons changed background-position. I needed to update few places across my CSS. This couldn’t happen with Font Icons because every icon has its own unique code like \e101 placed in a pseudo element.

	SVGs	Icon Font
Preparing a set	Sprites + Defs + configuration of some plugin	Copy files + Update CSS

Usage & Transformation

What about using them across the projects? Both have some advantages and disadvantages. With SVGs declared as a path in HTML code, we can do almost everything. There’re plenty of attributes like stroke, fill, clip. We can style separated paths, animate them etc. Icon Fonts are way more restricted in this area. First of all, we can use them with only solid color, we can’t animate the paths. However, it’s easier to use Icon Fonts across our CSS code. Let’s say we need to style some slider plugin and we don’t want to change the HTML. In a case like this we can’t use inline svg so need to set a background-position for the element we want to style. You remember that in SVG sprites we can’t easily change the color, right? It could be extremely painful for performance, and of course, could make us mad a little bit. With Icon Fonts all we need to do is to replace: before’s content value. 

However, the most frequent operation with an icon is of course scaling. I must say I had to spend too much time to scale SVGs properly and I still don’t like the ways it is done. Using calc or scale is an overkill for just changing the size of the icon. What’s more, it’s not as readable as it could be. With Icon Fonts it’s just a simple font-size.

I saw many arguments that we shouldn’t use Icon Fonts because it’s semantically wrong and they're just not images like SVGs are. I totally understand that it’s a hack. IMHO a great one! One of the best I saw in a front-end world. We can also provide good semantics and accessibility for it so what’s a real deal here? Oh, and the fact Icon Fonts are treated as a text is actually an advantage to me. Just think of situations we use icons - most of the text-like abilities are just great there.

	SVG	Icon Font
Usage across CSS	We need a sprite (one sprite is one color).	Editing: before’s content value
Transformations	Almost unlimited	Treated as text, only solid color

Winner: ?

Browser support

Both SVGs and Icon Fonts require some work from us to make them comprehensive. Icon Fonts are slightly better here because can support even IE6. SVGs is originally supported by IE9+. In IE8 we need a JS polyfill for fallbacks.

	SVGs	Icon Font
Browser support	IE9+. Polyfill for IE8	IE8+ out of the box. Even IE6 possible

Winner: Icon Fonts

Accessibility & Semantics

SVGs come with better accessibility than Icon Fonts - that’s for sure. They’re treated as an image, not as a text! With SVGs, we can provide either title and description for it. What’s more, it works awesome with WAI-ARIA.

<svg aria-labelledby="svg-globe-title svg-globe-desc" rol

e="img">

<title id="svg-close-title">Globe</title>

<desc id="svg-globe-desc">An icon represets a globe."><

/desc>

<use xlink:href="#svg-globe"></use>

</svg>​

 In case of Font Icons, we can actually use a simple title attribute. For screen readers, I recommend aria-label attribute.

<i class="icon-globe" arial-label="An icon represents a globe." role="img"></i>​

When we implement an icon only for decorative purposes in both cases we can use both aria-hidden or just set a class and let CSS do the work.

<i class="icon icon-globe" aria-hidden="true"></i>

<svg aria-hidden="true"></svg>

<button class="button icon icon-globe"></button>​

 And CSS would be just like this:

/* SVGs */

.icon {

background-image: url("assets/fonts/icons.svg");

}

.icon-globe {

background-position: 0 25%;

}

/* Icon Fonts */

.icon {

/* Must remember that we can't set icon styles directly

on this elem */

&:before {

font-family: "Icons";

/* Here goes all Icon Font styles like font-variant:

normal, speak: none etc. */

}

}

.icon-globe:before {

content: "\e101";

}​

	SVGs	Icon Font
Accessibility	<title> & <desc> combined with aria-labelledby attr	aria-label attr & title attr

Winner: SVGs

Let's summarize

We discussed 4 separated areas and pointed pros & cons of both SVGs and Icon Fonts. The result is not clear! Icon Fonts are faster and have better browser support. However, SVGs provide a higher level of accessibility. The usage wasn’t clear enough to select a winner.

Now, let’s try to remember our last projects we worked on. I can say that using Icon Fonts was way much easier to me. However, I needed to use SVG 2 or 3 times per project so I could provide all features designed.

In my opinion, there’s no clear answer whether we should use SVGs or Icon Fonts. We just need to estimate which of them will be a better match for our project.

Author: Grzegorz Bielak