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
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.
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.
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.
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.
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.
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.
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.
8. Elegant Icon Font
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.
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.
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.