Icon fonts don't degrade gracefully when someone (ie me) disables "let websites use their own fonts". Either you get meaningless letters or those little unicode squares - neither of which are actually useful, of course.

Additionally, icon fonts rely on the PUA to render their glyphs. Given the emoji explosion over the past several years, that PUA is getting harder and harder to assign glyphs to.

I can't be the only one that's visited a site on my phone and found emojis where an icon font glyph was meant to be.

See probably the most famous example: https://www.etsy.com/teams/7720/bugs/discuss/14559563/

Thanks for the feedback, polymeris. I'll into why they're looking blurry, I haven't seen that before.

As for why not use an icon font, we've actually outlined the research in details here: https://medium.com/claritydesignsystem/the-road-to-svg-and-c...

That screenshot was taken from Firefox 53.0.3 on Linux/Cinnamon, if it helps.

Maybe SVG should support hinting...

Same for Firefox 54.0.1 on Windows 10.

The icons look blurry on most zoom levels. On zoom 90% the effect is reversed and the left icon looks ok but the others don't: https://imgur.com/a/AeREO