Anwar Hussain

Anwar Hussain

Front-End Web Developer - HTML5, CSS3, JavaScript, React, VueJS, Git

Icon Font vs SVG: Why I switched from an Icon Font to SVG

We all use a lot of icon font throughout our front end work. Most of my acquainted people design and develop templates for various marketplaces which ultimately used by startups, business team and large companies. I have witnessed a lot of the templates being used icon-font libraries like font-awesome, elegant-icons, line-icons etc. Here I will tell you why I choose to use SVG icon over icon font.

1. Some devices don’t honour the Private Unicode Area

I’d heard rumors about devices replacing glyphs in the Private Unicode Area (PUA) and using them to serve emoji but I hadn’t seen that happened recently. Emoji was historically stored in PUA, but at a different range. So, it would make sense that there could be conflicts.

2. Browser support is terrible in some cases

I can’t remember when but many days back I’d visited one of my template from an older device just to check the browser support. Surprisingly all the font icons were printed as normal Georgia text and also had some support request saying, they see black squares in the place of icons on their mobile browsers. But the website performed amazingly in responsive test. There are some older browsers where I encountered such bugs.

But every stable modern browser doesn’t occur such wired issue. peace!

3. Multi-color icon

I was tempted to use a multi-color icon to my site (not this one) but font icons are well known to have a single colour limitation. So I had to use PNG sprite alongside icon font.

SVGs, on the other hand, can support multiple colors as well as gradients and other graphical features.

4. SVG allows us to use animations within icons

Well, I haven’t yet utilised this feature but historically SVG is known for its magical power of smooth animations. So, maybe near future, I will use SVG to handle animations within icons. Certainly it will be a great fun!

5. It always felt like a hack

Using font-face for icons has always felt like a hack to me. Web fonts were never discovered for icons, no doubt, it’s a manipulation of fonts and a great hack.

If you feel the same way I felt or you might have some other feelings regarding my opinion: icon fonts vs SVGs, please write on the comment section. I’d definitely love to hear from you!

Have a nice weekend,
Anwar Hussain

If you have enjoyed this post and have some feelings to share, please comment below or drop few lines!

Leave a Reply