Top 10 Icon Fonts

Remember the archaic times of yesteryear, when you would have to create a multitude of images for element of the website you were working on. Everything from background gradients to box shadows to curved corners, and worst of all, text. Dark days. One of the latest mod-cons of web design, and one that has come none too soon, is icon fonts. Gone are the days of having to create your icons to a specific size, then maybe if you were feeling sassy turn it into a sprite, just for the plush novelty of ‘hover effect’.

Icon fonts are vector based graphics which the browser renders as fonts. This means that like fonts, they are infinitely scalable with no loss of quality. Furthermore, as they are rendered as fonts, they can utilise all the CSS properties that can be applied to fonts. This means changing their colour or size, or adding text shadows can all be done with fundamental ease.

This is a round up of the top 10 icon fonts available now. If I’ve missed any that you feel belong on the list then leave a comment!

 

1. Font Awesome

Font Awesome Free Icon Fonts
A firm favourite with most of my web designer buddies. Over 400 different icons, with more being added all the time. Also included are a few loading spinners in there too – meaning you can add CSS effects to your loading icons, rather than being stuck with a static gif.
http://fortawesome.github.io/Font-Awesome/

 

2. Octicons

Octicons Free Icon Font from Github
Quite recently Github announced that it was going to open up it’s own Octicon icon font for the world to use for free. This is a great collection, perfect for a web application although it does lack a few of the fundamentals you might need on a standard website.
https://octicons.github.com/

 

3. Icomoon

Icomoon Free Icon Font
Over 3,500 different icons fonts to choose from over at Icomoon, not only that – you can chop and choose which ones you want and create your own icon set – perfect for keeping the page lightweight and the rendering snappy, especially when working on a mobile-first build.
http://icomoon.io/

 

4. Glyphicons

Glyphicons Icon Fonts
One of the original icon fonts – Glyphicons has a great range of slick vectors in their icon collection. They also offer filetype icons and halflings (icons re-optimised for 16px use). There’s a few different packages available ranging from the Free collection to the $59 Pro collection.
http://glyphicons.com/

 

5. Entypo

Entypo Icon Fonts
Another fantastic collection of 250+ beautifully crafted free web icons. Entypo also offer the EPS, PDF and PSD formats of the original icons. Plus, I kinda like that green too.
http://www.entypo.com/

 

6. Fontello

Fontella Free Icon Fonts
Fontello not only offers a great selection of icon fonts for free use, but they also have a great icon font generator tool for building your own lightweight package. Oh, and there’s also an API and Github repo. Get in.
http://fontello.com/

 

7. Stackicons

Stackicons Free Icon Fonts
Stackicons is a cheery collection of multi-colour social web icons. Very neat and visually appealing, this icon collection would be perfect for any socially targeted website or application.
http://stackicons.com/

 

8. Elegant Icon Font

Elegant Icon Font free from Elegant Themes
A nice little icon font collection from the team at Elegant Themes. This free vector collection contains some very sharp icons – great for a flat UI website, and sharp enough to still be clear on a mobile application.
http://www.elegantthemes.com/blog/resources/elegant-icon-font

 

9. Typicons

Typicons Icon Fonts
A bouncy, well rounded free icon font collection comprised of 220 unique graphics. This collection certainly stands out for it’s accentuated rounded borders, adding a outer-stroke feel to all the icons.
http://typicons.com/

 

10. Symbolset

Symbolset - Premium Icon Fonts
Symbol set offers a great collection of premium icon fonts. A beautiful collection of individually tailored web vectors with collections hand crafted for specific purposes – a great selection.
https://symbolset.com/

 

 

Tweet about this on TwitterShare on Facebook0Share on Google+0Share on LinkedIn1


Leave a reply