Free Icon Fonts for Web User Interfaces

Aug 13 2012 by Jacob Gube | 27 Comments

Free Icon Fonts for Web App User Interfaces

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.

Foundation Icons Fonts

2. Sosa icon font

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

Sosa icon font

3. Font Awesome

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

Font Awesome

4. Iconic Icon Set

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

Iconic Icon Set

5. Raphaël Icon-Set

Number of icons: 116. License: MIT License.

Raphaël Icon-Set

6. PulsarJS @FontFace

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

PulsarJS @FontFace

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.

IcoMoon

8. Typicons

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

Typicons

9. Entypo

Number of icons: 100+. License: Creative Commons Attribution 3.0 Unported.

Entypo

10. Heydings Icons

Number of icons: 60. License: Attribution-NoDerivs 3.0 Unported.

Heydings Icons

11. Heydings Controls (App Icon Font)

Number of icons: 50. License: Attribution-NoDerivs 3.0 Unported.

Heydings Controls (App Icon Font)

12. JustVector Social Icons Font

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

JustVector Social Icons Font

13. Modern Pictograms

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

Modern Pictograms

14. Brandico

Number of icons: 18. License: SIL Open Font License and Attribution-ShareAlike 3.0 Unported.

Brandico

15. Signify Lite

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

Signify Lite

16. Web Symbols typeface

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

Web Symbols typeface

17. Social Media Icons

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

Social Media Icons

18. ikoo

Number of icons: 65. License: Attribution-ShareAlike 3.0 Unported.

ikoo

Icon Font Resources

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

Related Content

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.

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

Rob

August 14th, 2012

Great collection guys. Where were you last week when I needed some of these icons! I really love the Hey Dings Icons

terry

August 14th, 2012

very nice sharing, thanks a lot!

wasser

August 14th, 2012

Good list Jacob. You could also make your own using Inkscape + FontForge :)

JHawes

August 14th, 2012

Very nice list. JustVector is a repeat I think, though #17 is a very nice sm font – thanks for the additions!

John

August 15th, 2012

Excellent list. I’m surprised you didn’t include the open source http://thenounproject.com/, which kind of count as icons.

Jacine

August 15th, 2012

good post .thank you

Luiz

August 15th, 2012

Awesomeee, thanks

Vincent Le Moign

August 15th, 2012

Great list Jacob! And at the right moment, Icons Fonts are now essential in a web designer toolbox

Ramnath

August 15th, 2012

Wow! excellent collection. It’s a timely requirement for my template designing. @font-face + CSS3 + HTML5 it will look awesome. Thank you

Rajesh

August 17th, 2012

Nice list Jacob, thanks for posting. I like 17th social icons.

Richard Fleming

August 18th, 2012

You need to add Sam Collins css-social-buttons zocial font to the list…

http://zocial.smcllns.com

Cheers,

Rich

Jonas

August 19th, 2012

This is great ! Thanks

Jon Tarbuck

August 20th, 2012

Really useful for making web sites more Retina-ready.

Exist To Create

August 22nd, 2012

Nice list Jacob, Entypo and Signify are the favourites.

tarekitsme

August 24th, 2012

nice icons,,,thanks for sharing,,,:)

Theo

August 26th, 2012

Great and useful list, many licenses too.

Kaye

August 29th, 2012

thank you so much! :)

bomazen

September 1st, 2012

all of it is nice

Neil Charlton

October 7th, 2012

Great list guys. We put together a little demo using the Iconic set you featured above:

http://demos.themesto.re/2012/css-icon-buttons/

You can change the size, background and icon colors to get a real feel for the power of this technique. Looks great in a retina display too!

Karen Menezes

June 23rd, 2013

icomoon is really powerful. i use it on almost all projects. Did a post on jazzing up icon font thumbnails here http://blog.karenmenezes.com/2013/jun/23/beautiful-icon-font-thumbnails/

Leave a Comment

Subscribe to the comments on this article.