I’m developing a layout for a web site, this time I surrendered to the icon fonts. Here are some examples.
What are Icon Fonts?
Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters.
And because they’re treated like web fonts, icon fonts:
- Have great cross-browser support (even IE6, for example, can render web fonts using the
- Can be scaled on-the-fly if the user adjusts their web browser settings
- Can be rendered with different colors
- Can embody font- and text-related CSS properties (like
See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page.
To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage.
Free Icon Fonts
Below are 18 excellent icon free fonts that have licenses that permit commercial use. I strongly recommend reading the license terms and conditions of any freebie you get online, just to be sure that you can use the free resource for your particular purpose.
Number of icons: 137. License: MIT Open Source License.
Number of icons: 121. License: Custom license (use in commercial projects permitted).
3. Font Awesome
Number of icons: 196. License: Creative Commons Attribution 3.0 Unported.
Number of icons: 172. License: SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0.
Number of icons: 116. License: MIT License.
Number of icons: 73. License: SIL Open Font License.
Number of icons: 88. License: Creative Commons Attribution 3.0 Unported.
Number of icons: 100+. License: Creative Commons Attribution 3.0 Unported.
10. Heydings Icons
Number of icons: 60. License: Attribution-NoDerivs 3.0 Unported.
11. Heydings Controls (App Icon Font)
Number of icons: 50. License: Attribution-NoDerivs 3.0 Unported.
Number of icons: 62. License: Free Art License.
Number of icons: 86. License: SIL Open Font License.
Number of icons: 18. License: SIL Open Font License and Attribution-ShareAlike 3.0 Unported.
15. Signify Lite
Number of icons: 38. License: Custom license (use in commercial projects permitted).
Number of icons: 78. License: SIL Open Font License.
Number of icons: 74. License: Custom license (use in commercial projects permitted).
Number of icons: 65. License: Attribution-ShareAlike 3.0 Unported.
For those that are out of the loop, you can think of an icon font as a grown-up version of dingbats…with an actual use-case. The core idea is to take a set of icons or pictograms that would normally be implemented as an image or vector file and then convert it into a font. There are many reasons to do this too, according to Pictonic, as an icon font can load as much as 14% faster than images and can to be as much as 90% smaller than SVG files.
Now that a ton of options have emerged as popular choices among Web designers, we’ve made this brief list of 7 typefaces to point you in the right direction. If we missed your favorite, please share it with us in the comments below!
19. Font Awesome (free)
Font Awesome is an icon font that was designed to work perfectly with Twitter Bootstrap. Above you can see the font in use to make buttons, navigation, and more.
20. Fontello (free)
Differing from Font Awesome, Fontello is actually a tool that lets you easily piece together your own icon font based on icons from a number of sources, including: Entypo, Font Awesome, Iconic and Brandico.
21. Modern Pictograms (free)
The first icon font we discovered, Modern Pictograms was designed to work on-screen at sizes down to 18 pixels, and is remarkably pixel-perfect and useful as a pictographic font.
22. Typicons (free): Yet another set of well-made, clean icons for Webfont use.
23. Pictonic (free-$160)
A well-supported and growing collection of 2300+ icons, 230 of which are free.
24. Pictos ($49)
Pictos is an impressive set of icons that you can host and embed yourself via CSS @font-face (like the icon fonts above), or you can take advantage of Pictos Server, available through subscriptions.
All of the above fonts are impressive and worth a look, especially if you’re planning on embracing responsive design and supporting higher resolution screens like the Retina display. Additionally, using icon fonts enables designers to quickly adjust the size, color and shadow of their icons on the fly — saving tons of time when changes have to be made and details refined. Your toolkit is only limited to what you can achieve with CSS.