Icon Fonts for Web User Interfaces

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.

Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, just like other web fonts, use the CSS @font-face rule to display icons in web browsers.

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 @font-face rule)
• 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 text-shadow andgradient)

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.

1. Foundation Icons Fonts

Number of icons: 137. License: MIT Open Source License.

2. Sosa icon font

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.

4. Iconic Icon Set

Number of icons: 172. License: SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0.

5. Raphaël Icon-Set

Number of icons: 116. License: MIT License.

6. PulsarJS @FontFace

Number of icons: 73. License: SIL Open Font License.

7. IcoMoon

To create a font file, you’ll need to use the IcoMoon web app. Number of icons: 316.License: Attribution-ShareAlike 3.0 Unported.

8. Typicons

Number of icons: 88. License: Creative Commons Attribution 3.0 Unported.

9. Entypo

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.

12. JustVector Social Icons Font

Number of icons: 62. License: Free Art License.

13. Modern Pictograms

Number of icons: 86. License: SIL Open Font License.

14. Brandico

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).

16. Web Symbols typeface

Number of icons: 78. License: SIL Open Font License.

17. Social Media Icons

Number of icons: 74. License: Custom license (use in commercial projects permitted).

18. ikoo

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.

via sixrevisions.com and thenextweb.com

Advertisement