20 @fontface Icon Sets

by CSS, Fonts, GUI, Icons, Resources

The pros for using @fontface for icons far outweigh the cons. First of all, there are the obvious benefits of being infinitely scalable and being able to style them dynamically using any CSS property (color, gradients, shadow…). Secondly, its much easier to manage one single font file as opposed to juggling lots of individual images or having to create sprites. Thirdly, a single font file will only need a single HTTP Request for all the icons you use. And finally, just to round things off and finally convince you of the benefits of using @fontface icons, they look amazing.

As @fontface icons are a relatively new trend that is slowly moving into the mainstream, there are very few icon-sets that are available in a font format. But, we have to managed to find 20 quality sets that we are sure you will find fantastic. Not all are free, there are 15 free and 7 premium icon-sets.

You mayt also like…
25 Completely Free Fonts Perfect for @fontface →
8 Free Pictogram Icon Libraries and Collections →
Useful and Free Pictogram Dingbat Fonts →

Modern Pictograms

Modern Pictograms @fontface font
Number of Icons/Characters: 89
Price: Free
License: Open Font License →
Download Page: Modern Pictograms →

Web Symbols Typeface

Web Symbols Typeface @fontface font
Number of Icons/Characters: 77
Price: Free
License: SIL Open Font License (OFL) →
Download Page: Web Symbols Typeface →

A Free Icon Web Font

A Free Icon Web Font @fontface font
Number of Icons/Characters: 60
Price: Free
License: SIL Open Font License (OFL) →
Download Page: A Free Icon Web Font →

Iconic Icon Set

Iconic Icon Set @fontface font
Number of Icons/Characters: 171
Price: Free
License: Creative Commons Share Alike 3.0 →
Download Page: Iconic Icon Set →

Raphaël Icon-Set

Raphaël Icon-Set @fontface font
Number of Icons/Characters: 116
Price: Free
License: The MIT License (MIT) →
Download Page: Raphaël Icon-Set →

Modern Pictograms

Modern Pictograms @fontface font
Number of Icons/Characters: 92
Price: Free
License: SIL Open Font License (OFL) →
Download Page: Modern Pictograms →

Symbol Signs

Symbol Signs @fontface font
Number of Icons/Characters: 21
Price: Free
License: Creative Commons – Attribution →
Download Page: Symbol Signs →

Pictos

Pictos @fontface font
Number of Icons/Characters: 94
Price: $49
License: Pictos License →
Download Page: Pictos →

Fico

Fico @fontface font
Number of Icons/Characters: 52
Price: €19
Download Page: Fico →

Web Symbols

Web Symbols @fontface font
Number of Icons/Characters: 78
Price: Free
License: SIL Open Font License (OFL) →
Download Page: Web Symbols →

iconSweets 2

iconSweets 2 @fontface font
Number of Icons/Characters: 400+
Price: $8
License: You may use these icons/font for both commercial and non-commercial projects and customize them any way you like. You may NOT redistribute these icons.
Download Page: iconSweets 2 →

Tipogram

Tipogram @fontface font
Number of Icons/Characters: 90
Price: $18
License: Tipogram License @fontface font” width”640″>
Download Page: Tipogram @fontface font” width”640″>

InfoBits Icons & Dingbats

InfoBits Icons & Dingbats @fontface font
Number of Icons/Characters: 190
Price: $29 for both styles
License: Fonthead Standard EULA →
Download Page: InfoBits Icons & Dingbats →

ikoo

ikoo @fontface font
Number of Icons/Characters: 65
Price: Free
License: Creative Commons Attribution-Share Alike →
Download Page: ikoo →

Social Media Icons Pack

Social Media Icons Pack @fontface font
Number of Icons/Characters: 74
Price: Free
Download Page: Social Media Icons Pack →

GUI Design Icons

GUI Design Icons @fontface font
Number of Icons/Characters: 30
Price: $17
Download Page: GUI Design Icons →

Dot Com Font

Dot Com Font @fontface font
Number of Icons/Characters: 93
Price: Free
License: Free for personal use.
Download Page: Dot Com Font →

ClickBits Web Icon & Dingbat System

ClickBits Web Icon & Dingbat System @fontface font
Number of Icons/Characters: 300+
Price: $49 for all styles
License: Fonthead Standard EULA →
Download Page: ClickBits Web Icon & Dingbat System →

Social Networking Icons Font

Social Networking Icons Font @fontface font
Number of Icons/Characters: 56
Price: Free
Download Page: Social Networking Icons Font →

Writesocial

Writesocial @fontface font
Number of Icons/Characters: 18
Price: Free $10
License: Free Art License →
Download Page: Writesocial @fontface font” width”640″>

JustVector Social Icons Font

JustVector Social Icons Font @fontface font
Number of Icons/Characters: 30
Price: Free
Download Page: JustVector Social Icons Font →

Flexi Social Icons

Flexi Social Icons @fontface font
Number of Icons/Characters: 65
Price: Free $29
Download Page: Flexi Social Icons →

You might also like…

25 Completely Free Fonts Perfect for @fontface →
8 Free Pictogram Icon Libraries and Collections →
Useful and Free Pictogram Dingbat Fonts →
Top 20 Free Fonts for Distinctive Headlines and Titles →
50 Beautiful and Fresh Free Fonts →

Author: (566 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine. You can follow Speckyboy on Twitter, on Facebook, on Digg or you can subscribe via RSS.

  • http://www.oldworldcreative.com Evan Skuthorpe

    These are great. I’ve never seriously considered using @font-face for icons before. The only downside I can see is the design limitations of using something not of your own creation…

  • http://twitter.com/iamcreative_ Aaron Summers

    Brilliant, thanks for finding these little beauties!

    Just one point…
    The Flexi Social Icons are now $29.00!!!

     

    • Paul Andrew

      Thanks Aaron, I have just amended the prices.

      Cheers, Paul.

  • justanothersky

    Thanks for the great article, Paul.
    Just want to point out that when I clicked on the download links for ‘Flexi Social’ & ‘Writesocial’, both are not (or no longer) free. And the ‘Social Networking Icon’ doesn’t seem to be available from dafont.com.

    • Paul Andrew

      HI, thanks for the heads up. I have edited the post to show the new prices. I double checked all prices last Friday (10th Feb) as well.
      What a difference a couple of days make :-)

      Thanks again, Paul.

  • WebDesignerDave

    Only problem I can see with Icon Fonts is in relation to semantics. How would anyone reading this comment tell a search engine not to index the corresponding Icon Font key. Some screen readers read the CSS content value so I guess Google might. Aria-hidden=”true” is to be used when visibillity is set to hidden in the CSS, If visibility isn’t set to hidden in the CSS would Google still index the value of the span below?

    If this makes sense please comment 
    1) <span aria-hidden=”true”> k </span> (and not setting visibility to hidden in CSS)
    2) <span data-icon=”k”></span>  CSS span::before{content: attr(data-icon);}
    3) Or something Else

    My problem is…
    I want to you Icon fonts before the text of an h2 element. What would be the best way of doing this?

    Any Ideas?

    • http://daankortenbach.nl/ WordPress Expert

      Have you seen Zocial? (http://zocial.smcllns.com) It uses a variant of your second solution. IMHO semantically the best option.

  • afox82

    GUI Design Icons are listed as “desktop only”

  • http://twitter.com/ajasnls Ajas A

    thanks for sharing

  • Iwan Rmpl

    thanks!…:D

  • http://www.nediva.com.ar/ Diseño Web

     Thanks so much for sharing! These are really useful!