Icon Font vs SVG – real world performance comparison

I keep hearing this debate over and over. Most of them are back-and-forth arguments about backwards-compatibility, accessibility, developer workflow, sharpness, colors, and other mostly developer-related issues. This happens when you compare apples to oranges.

Most web-masters care about speed first, customization second, browser-compatibility/accessibility last. So I’ve simplified it to this:

1. 2 or 3 Icons (svg)

All you need are 2 or 3 icons? Go SVG and you’re done.

2. Tiny everyday icons (icon font)

Most of you only need a speech cloud for the comment icon, hamburger menu, the “user” avatar, and some social media icons (10 icons or less). If this is the case, you can go with either one (icon font OR svg). Heck, you might even be able to get away with PNG.

Why is ICON FONT the best here? Because it’s easy to use, smaller size so it downloads faster, and also less complicated in the browser (loads faster to the user). You can even get a custom set at fontello of fontastic so that it loads faster (because you’re getting only the icons you want. Nobody needs the entire fontawesome library.

3. Custom icons (icon font OR svg)

Making your own custom icons, like material icons? It really depends. If you plan to have a bunch…say 30-40, font icon wins. If you plan to have 10, SVG is probably the way to go.

4. Large scalable images or multiple-colors (svg)

This is where SVG’s shine. You can make images that are intended to scale to larger sizes and use multiple colors to get a full visual graphic effect. For most folks, this isn’t even a requirement and should not be part of the usual icon font vs SVG debate!

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *