Icons and the web ecosystem — Font Icons vs Inline SVG

David Barahona
Sep 2, 2018 · 2 min read

Making decisions about what technology to use to build your design in a web environment is not an easy task.

On the one hand, I unconsciously want to do what everyone else is already doing. But on the other hand, you must think it’s easier to maintain and streamline your workflow. This kind of decisions is really difficult.

The Scenery

I use Sketch to work, and I have a collection of icons designed ready to use in my prototypes.

Icons collection used in Hobbiespot app design.

Currently, I export in PDF and SVG the icons for deployment in iOS and Android. But — when we talk about the web, I am not very clear about the best way to work to make it easy to maintain.

The knowledge learned leads to unreasoned choices.

The Font Icons our old friends, we know how it works.

You can control the size (via font-size), the shadows (via text-shadow), rotation, color, etc. via CSS.

Browsers consider it text, so the icons are anti-aliased as such. That’s why the icons may not look as sharp as you might think.

And — the process of creating the font is just dirty. For example, I used to use tools like https://icomoon.io/ — wasting to much time on the process.

Coming to the conclusion

Nowadays we create icons as vectors, for that SVG is the best choice. And browsers are better supported than ever before.

The render is exactly as you expect. Keeping it sharp and perfect.

You hold all the same CSS control as with a font, but so much better, because you can manage individual parts and use SVG-specific CSS like stroke properties.

Icons are little images, but with super-powers. The semantics of <svg> says “I’m an image.” and it seems better to me. 👌🏻

David Barahona

Written by

#UX #ProductDesigner and #BrandGuardian at @HobbieSpot 📱💪🏻

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade