Icons and the web ecosystem — Font Icons vs Inline SVG
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.

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. 👌🏻
