The age of using CSS sprite images for icons are long gone. Today, it is as easy to use icons in HTML as it is to place one in Photoshop. All of this is possible because of “Icon Fonts”. There are numerous advantage of using icon fonts over sprite images. The top one being that it does not loose quality even when the size of the icons are increased. It somewhat behaves like a SVG(Scalable Vector Graphic). There are many icon fonts in the internet, but today I will be sharing my top icon fonts choices.
1. Font Awesome
Arguably the most popular icon font in the internet. I you already know about icon fonts, then chances are you have already heard about font awesome. As the name suggest, this font is awesome. Font Awesome is my primary choice of font to use as icons because it has a huge array of icons in its bag.
2. Glyphicons
This font set comes with bootstrap. It is one of the many awesome components the CSS responsive framework offers. The glyphicons is the one of the most popular and mostly ignored font icons in my view. The fonts are somewhat appear like font awesome but has its own bootstrap taste. But don’t get me wrong, just because I ignore it most of the times (remember most of the times), it is still one of the most popular icon fonts out there in internet and is widely used by many top designers around the world.
3. Line Icons
I love its minimal design approach, after all lines are supposed to be minimal. The thing I love most about this font is that it is very symmetrical, it’s neither too wide neither too tall. It is just perfect to use for a minimal look and feels. Another good thing about this font is that it also offers a Premium package that includes way lot more icons in it.
4. Material Icons
There is only one reason why I love this font because google made it. That’s the only reason I love this.
If you believe my last sentence then, I was just kidding. That’s just the one reason I love this font. Everything that google makes is awesome, except for one thing you know. 😉
Material Icon are very consistent in it’s design, because I think it does not over variations of same icons. But if you think of it, it can actually be a good thing. You will have less scratching your head to choose the types of appearance of a single icon.
So these are my top icon fonts that I use when designing my websites. May be you can also try out some of the options available all over the internet. Sometimes you find your perfect icon as a font and sometimes you have to use SVG from sites like Flat Icon.
But don’t worry, if you prefer to use icons instead of SVG (because your folder size reduces). There is an app that I frequently use when using a custom SVG as icons. Check out Fontastic, the site takes your SVG and gives you an Icon Fonts to use in your site. Once you download the fonts you can use it like font awesome and other icon fonts. I have to say the app is fantastic or should I say “Fontastic”.
