Free Icon Fonts for Web User Interfaces

Aug 13 2012 by Jacob Gube | 26 Comments

This roundup features 18 free icon fonts that can be used in your commercial projects. The icon fonts in this post are perfect for your app user interfaces (UIs).

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 and gradient)

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.

Icon Font Resources

Below are some good icon-font-related articles and tutorials on the Web.

HTML for Icon Font Usage
Fontello: A web tool for creating a font file from a variety of free icon fonts.
Displaying Icons with Fonts and Data- Attributes
Making, Using, & Bulletproofing Icon Fonts

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

26 Comments

Francis Boudreau

August 13th, 2012

Font icons are great!

Nic

August 13th, 2012

This is awesome! Thanks for this. You could probably make your own handwritten icons into a font at http://www.FontPanda.com. I’d love to see more of that. Cheers!

Julian

August 13th, 2012

twitter icon in #14 is outdated.

Gie-Art

August 13th, 2012

Woww.. awesome lists :)

SYDNEY MILES

August 13th, 2012

Thanks for sharing your vast resource of ideas…Cheers and may the force be always with you. Cheers!

Kreativ Theme

August 13th, 2012

I cannot believe that such great icons are free, and this new web dev trick with icon fonts is very handy, specially for traffic optimization … nice collection.