Grow your CSS skills. Land your dream job.

The Big List of Flat Icons & Icon Fonts

Published by Chris Coyier

Icon fonts are awesome. Other than the fact that they have to be single color, they are superior to using images as icons in every way. But which do you choose? There are loads of different sets out there. I'm going to attempt to round them all up here and keep this updated (this post has already been updated several times).

Pictos

Number 600+
Cost $19-$249

Pictos is the icon font that really popularized this whole idea. In additional to the sets, they also offer Pictos Server, a service which allows you to build your own font set from its library of icons and will host/serve it to you. This allows for very small (quick loading) font files and a nice UI for updating your current sets.

Symbolset

Number 1000+
Cost $5-$60

Symbolset is unique in that they turn words into icons for you. Write the word "heart", get a ❤. This works via OpenType, a typography feature of modern browsers.

Modern Pictograms

Number 130
Cost $25

v1 is free on Font Squirrel. v2 is paid with the complete set at $25 or individual icons as low as $0.50.

Pictonic

Number 2586
Cost Pay per icon, or $199

Pictonic also offers a hosted icon service and offers unique pricing ($0.59 per icon).

StateFace

Number 50
Cost Free

StateFace has all 50 U.S states as an icon font. When you need 'em, you need 'em.

Geobats

Number ~150
Cost Free

GeoBats is an icon font of the world's countries. GeoBats is on DaFont.com - and it's worth running a search for "icon" there to see some of the other stuff they have for free.

iconSweets 2

Number 1,000+
Cost $8

Also has a free predecessor.

Erler Dingbats

Number ~120
Cost Free

A drastic improvement to the standard Dingbats.

Tipogram

Number 90
Cost $18

CleanIcons

Number 55
Cost $5

Meteocons

Number 40+
Cost Free

For the weather!

Ecqlipse 2

Number 281
Cost Free

They have little shadows beneath them (so not exactly "flat"). Very small predecessor.

Heydings Icons

Number 60
Cost Free

IcoMoon

Number 500+
Cost Free - $59

IcoMoon is a set of open source icons. But more importantly, IcoMoon is a web app for customizing and downloading optimized icon fonts. You choose just the icons you want and download that minimized set. You can easily add font from different sets or add icons from SVG files via simple drag-and-drop.

Iconic

Number 171
Cost Free

Gedy Rivera Social

Number 107
Cost $5

Foundation Icons

Number 47 + few other mini sets
Cost Free

Can be used with or without Zurb Foundation.

Fico

Number 52
Cost ~$30

Monospaced.

Web Symbols

Number ~80
Cost Free

WriteSocial

Number ?
Cost $10

Specifically only social media icons. They claim "billions" which obviously it isn't.

Entypo

Number 100+
Cost Free

ClickBits

Number ~400
Cost $12 - $49

In a bunch of different separate fonts based on type (e.g. arrows, icons, circles, etc)

Font Awesome

Number 150+
Cost Free

Designed for use with Twitter Bootstrap. In other words, a redesigned version of the free version of Glyphish which that ships with.

JustVector Social Icons

Number 150+
Cost Free

Social stuff only.

PulsarJS

Number 73
Cost Free

Flexi Social

Number 65
Cost $29

Social stuff only.

Raphaël

Number 116
Cost Free

Sosa

Number 120
Cost Free

Free but they accept donations on the main page.

Pyconic

Number 8 sets, 96 each
Cost $29 per set

The icons as graphics only are priced differently, but the fonts are broken up into 8 sets. Seems like kind of a pain in the ass to buy just the right sets you need since they are just chopped up to be even numbers. If you love the set, you're probably better off buying one of the bundle packs.

Dot Com

Number 92
Cost Free

Snagging it from DaFont then running it through Font Squirrel is your best bet.

Steedicons

Number 94
Cost $39

There is also a Vol. 1 (312 hand-drawn icons) and Vol. 2 (60 miniature works of art) which are not fonts but are flat icons.

Typicons

Number 88
Cost Free

Donatations help keep it going.

Flat Icons Only

The following icons don't come as an @font-face set, but are flat vector icons. You could easily incorporate them into other sets through tools like IcoMoon.

Web Icon Set

Number 1,600+
Cost $25 - $99

They have a couple of smaller sets sets, or you can become a member for access to all of them at less than the cost of two sets.

Rondo

Number 40
Cost Free

Social icon font.

Geomicons

Number 100+
Cost $16 per set

Comes in two sets, one made from solid shapes and one made from strokes.

Picons

Number 100+
Cost $9.90 - $59

Various sets of different sizes and styles at different prices, including some non-flat ones.

Symbolicons

Number ~500
Cost $5 - $43

One big set with a couple of little add on packs.

Bixel

Number 65
Cost $9.99

Fundraiser that looks like it's over but the icons are still for sale. I believe they are only PNG, not vector, and I'm also not sure if you get the 40 "add-on" pack icons automatically or not.

Tabs

Number 745
Cost $10 - $60

Free updates.

Pixeds

Number 90
Cost $14

Also has a non-font set with more icons than come in the font set.

Gentleface

Number 304
Cost $29.99

Free if used for personal or community sites.

Glyphish

Number 400
Cost Free - $25

Set of 200 is free in one size, or set of 400 in two sizes for $25.

Glyphicons

Number 350
Cost Free - $49

Free for personal and community sites, or pay for royalty-free and more formats.

The Noun Project

Number A Zillion?
Cost Per Icon or Free w/ Attribution

The Noun Project is probably the largest collection of icons out there. It's not really a "set" but rather a huge archive of symbols. You can download them one-by-one for free if you agree to attribute the author, or buy the symbol to get it royalty-free. You'll have to combine them all together to use as a font. You can submit your own.

iconmonstr

Number 1000+
Cost Free

Similar to The Noun Project, iconmonstr is an archive of icons that you can search through and download one-by-one as needed.

Batch

Number 300+
Cost Free

Comes with PSD, SVG, and PNG

Gcons

Number 100
Cost Free

Open source

Pixelated

Number 36
Cost Free

Eddit iPhone UI

Number 160
Cost $69 - $189

$189 gets you the vector PSD.

Simplicity

Number 205
Cost $19

Picas

Number 250
Cost $10 - $25

Couple of free preview packs available.

Helveticons

Number 600+
Cost $159 - $499

Eco Ico

Number 36
Cost Free

By Matthew Skiles.

Brankic1979 Icons

Number 350
Cost Free

Cuticons

Number 70
Cost Free

By Vaibhav.

Roam Design

Number 99
Cost Free

Personal use only.

IconEden Glyph

Number 679
Cost $35

Similar set as strokes instead of solid shapes.

UIcons

Number 362
Cost $20

@font-face version is "coming soon" and will likely be a small set of originals.

Jigsoar

Number 60
Cost Free

Free with attribution.

Cosmo Basic

Number 65
Cost $7

Webalys

Number 750
Cost $37

Omnigraffle stencil for easy icon insertion there, if you use that for wireframes. Looks like a big update to the set coming soon.

Design Kindle Glyphs

Number 70
Cost Free

Skewed Icons

Number 240
Cost $15

Carbon

Number ~100
Cost $99

Broccolidry

Number 108
Cost Free

By Visual Idiot.

Icon Minia

Number 139
Cost Free

By Egemen Kapusuz.

Silkcons

Number 99
Cost Free

By Vaibhav.

105 Loops

Number 105
Cost Free

By Pranav.

WPZOOM Developer

Number 154
Cost Free

Feather

Number 48
Cost $14.99

Fontelico

Number 30
Cost Free

Open source and crowdsourced ("we will create 1 icon for every 50$"). Part of the Fontello project.

Picto Foundry Icons

Number 350
Cost $20

Metricons

Number 750
Cost $75

Based on Windows 8.

Pixicon

Number 600+
Cost $25-$80

Mobile Pro Icons

Number 315
Cost $8

Stylistica

Number 115
Cost $26.20 - $262

Pixiconz

Number 285+
Cost Free

Hand Drawn Icons

Number 310
Cost $19

PictoPro

Number 630
Cost $15

Each set (outlines or solid) is $15 or both for $25.

Miniicons

Number 1500
Cost $59

 

Other Information

  • Make sure you use these with the correct semantic/accessible markup.
  • A few reasons why Icon Fonts are Awesome.
  • IcoMoon is a fantastic app for customizing, mapping, and creating your own icon font with just the stuff you need.
  • Fontello takes a few of the free font icon sets and allows you to pick and choose characters and apply mappings to your own liking. Similar to IcoMoon - simpler but less features.
  • Hieroglyph - Generate an icon font from a directory of vector (SVG) files
  • Glyphs - the font editor for everyone.

Comments

  1. Great collection of font icon sets! I see huge usefulness in terms of comping. As far as @font-face, my hesitation would be that use of these font icons as web fonts could make for very garbled content. Could be an SEO’s worst nightmare (not that I actually care). But I do believe style should be style and content should be content. This introduces another layer which could be seen as a design infringement on that ideal.

    On the other hand, @font-face icons removes what some may see as a redundancy in the comping/development process. torn!

    • That’s why it’s important not to put them in markup, but to set them using the “content” property of your :before and :after pseudo elements :)

    • Permalink to comment#

      Hey Kevin,

      Can you re-explain what you mean by using the icon fonts in the “content” property? I’m having a hard time understanding what you mean by it.

      Thanks

    • Permalink to comment#

      Adam,
      Kevin is referring to adding the icon font in the css like below (where ‘@’ would refer to the character the icon is assigned to):

      
      .icon-font:before  {
        content: '@';
        font-family: icons;
      }
      

      Althout the method i prefer is to put the icon in a data attribute like below:
      Le HTML:

      <a class="icon-font" href="#" data-icon="@">link here</a>

      Le CSS:

      
      .icon-font:before {
        content: attr(data-icon);
        font-family: icon;
      }
      

      Ideally you would also be able to assign the icon to the supplementary private use area of unicode so it won’t be read out by screen readers, which I know Icomoon offers.

      Jon hicks goes into a bit more depth in his 24Way’s interview – http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes

  2. Unbearably comprehensive list. Even went through some of mine to try and find holes, but nope, you got them all :)

    Bookmarked, and happy to be able to ditch a series of tags and random saved links.

    Might want to include some filters/dropdowns eventually(free/commercial/etc)… I could see this post becoming a common resource.

  3. JC
    Permalink to comment#

    I found a bunch of really nice icons, called eclipse.

    http://chrfb.deviantart.com/gallery/#/dzor6y

  4. Great list, Chris! I need to make more of an effort to incorporate icon fonts into my workflow.

  5. Permalink to comment#

    I noticed that U Icons cost money and DotCom icons are a pain to download since you have to individually.

    this might be the most comprehensive listing of places to get icons.

    Of course, http://www.iconfinder.com/free_icons is a great site to use.

    • nile
      Permalink to comment#

      I think the point was for it to be a font that contains icons.

  6. Thanks so much Chris. This is a great list!

  7. Thanks for the collection! I like the “Modern Pictograms”

  8. Great solution. Thanks for that collection.

  9. Free picture fonts – http://bit.ly/GIweFq – different icons, smileys, bullets… Whether it serves :).

  10. Rabble rabble rabble! I hate things that are different from things I already know and am comfortable with. Must be rough.

    You are a true genius in words!

    These are amazing, and still tossing up between font-face or svg.. If someone could like to argue it out for me.

  11. jsdev
    Permalink to comment#

    @Jason Paul you can use CSS psuedo selectors like :before and :after and use content attribute to inject your icons, thus keeping your page content and presentation separate. So that should not be a worry.

    Whilse SEO does take in account javascript loaded content, I don’t think it takes in account CSS injected content.

    Anyone back me up on that?

  12. Excellent roundup, Chris. Thank you.

    Here a couple more free sets over at Design Kindle:

    http://www.designkindle.com/2011/10/13/glyph-icons/

    http://www.designkindle.com/2011/09/20/mini-icons-vol-1/

  13. Roy J
    Permalink to comment#

    Great post! I am always in need of icons.

  14. Kelly
    Permalink to comment#

    What a great resource, thanks a lot for posting.

  15. I would be extremely interested in knowing how typefaces such as Tabs are able to get away with including copyrighted content (like the Apple logo) in their fonts.

  16. Great research of fonts. Interesting how these icons are becoming more and more simplistic in appearance as websites are getting so cluttered with all the various social media outlets.

  17. C. L.
    Permalink to comment#

    Can someone convince me that using arbitrary letters to represent icons is a good idea (icon fonts)? I understand we can keep the markup “clean” by using the ::after / ::before combined with “content:” but more and more I feel that overloading those pseudo-elements to hack in content you want to hide is wrong, even for clearfixing. I’ve run into issues where I actually want to add real content using ::after but I can’t because I’ve already used it for a clearfix or additional borders. Any thoughts?

  18. Great list, especially for the Icons fonts.

    But for the flat icons, mine are missing: http://www.webalys.com/premium/design-vector-icons-library.html
    Do you know it?

  19. Mike
    Permalink to comment#

    It’s shocking to see how often and broadly that Disney’s intellectual properties are seemingly ripped off. No, I don’t work for them but it always strikes me as ironic (hypocritical?) when designers take such liberties with another’s work (iconsweets). I know there are laws about using content in parody/comedy and so on. Nor am I a lawyer–don’t gang up on me.

    Perhaps I’ve not been properly coached on when you can and can’t use Mickey Mouse as part of a paid collection. The law isn’t doesn’t always have nice sharp corners that you can clearly see.

    I don’t have the same legal misgivings when I use a Facebook logo on a website. Somehow that seems different. What’s the legal protocol here?

    The Fun Police: “We’re always on duty”

  20. Great roundup,

    I’m using the icoMoon font. In combination with the @font-face generator its awesome.

    On my latest project I have a lot of icons , in combination with different sizes and a mobile retina support it was impossible without a icon font.

    But now my problem :after pseudo element doesn’t work in IE7 ..!!
    So all of my icons don’t show, support is still necessaire i am afraid.

    Also in IE8 where :after does work the icon font get loaded too slow and often hangs. Seeing all does ugly characters all over the site.

    Any solutions for these problems?

  21. David Higginbotham
    Permalink to comment#

    Amazing collection here Chris! Found some gems in here that even with my iconophilia didn’t have, Cheers.

  22. Juan
    Permalink to comment#

    Great collection!, Thank you.

  23. Awesome….I kept scrolling and scrolling down the page…to ever more icon fonts…It could not have been easy to compile such a list…So thank you so much for doing so…I will be sharing a link to this page with our students…

  24. Amruth Raj
    Permalink to comment#

    Wow, this is a great collection, thanks dude. Keep posting such useful links. :)

  25. Tnx a lot Chris, this post is going straight to my bookmark wall in my office!

  26. I love this idea. I incorporated some icons in a navigation today and quickly realized that the font was being bumping around much differently between Windows and OSX browsers. I tried a bunch of different approaches as far as alignment goes but nothing seems to work for both operating systems. I made a jsfiddle to demonstrate the issue I’m having. You’ll see the problem i’m having on the top (horizontal nav). Currently it is set to line up properly for OSX, but is quite off for Windows. I’m guessing it has something to do with the fact that they render font’s differently. Any body have any ideas for how I could make this more consistent?

    http://jsfiddle.net/allusis/F3y2K/

  27. Just awesome collection. Really was looking for something like this.
    Thanks! You really do a good job.

  28. Great Collections of icons.
    Is there any site where we can find lots of icons like iconfinder?

  29. Ultimate collection, of all these Pictos and WebSymbols are most popular ones. Thanks for sharing.

  30. DERC
    Permalink to comment#

    The best of all: Helveticons!

  31. erwin
    Permalink to comment#

    Thanks for that awesome roundup! I haven’t seen one that comprehensive (if that’s the right word 8).. Things are starting to get interesting concerning the design of resolution-independent websites I think.

  32. Permalink to comment#

    Great collection Chris. I’d love to see one of these pop up in the Google Web Fonts collection.

    Anyone know if someone is working on that? Would be a game changer for widespread, easy to implement, icon fonts availability.

  33. Omar Fareh
    Permalink to comment#

    Thanks Chris for the great icon collection :)

  34. great font and icon roundup. a lot of times we just use iconfinder – but you had more in this one post than we could search in an hour there – great find!

  35. Permalink to comment#

    Great Stuff. Thanks For sharing these :)

  36. Robert
    Permalink to comment#

    Thank you for sharing this. Awesome collection, it really impress me. Can you suggest other collections? For example I work as a web designer, even if this is a large collection, for me isn’t enough. Please help me :)

  37. Permalink to comment#

    There is a github repository called Font Awesome which is designed to be used with Twitter Bootstrap. It looks nice :)

  38. Robert
    Permalink to comment#

    Thank you very much for the link, Daniel, it was exactly what I needed! Best wishes!

  39. This is probably the most complete round up of flat icons there is!

    I released a big update to IcoMoon about two weeks ago. You can start using the new app right here.

    It’s all free. You can import your own SVG images or fonts. This means that you could basically import any kind of glyph and make any kind of font you wish. For the encoding of your icons, you can use a new Symbols option, as well as SPUA, or any other custom Unicode point you wish.

    Aside from making fonts, this tool also lets you quickly search and find vector icons. Unlike thenounproject, it works very fast! You could easily download the vector icons to modify or use them.

    You may watch this screencast to learn more. It’s not a pro/high quality screencast like what Chris makes, but I tried :P

  40. Permalink to comment#

    A really nicely designed general set http://www.zurb.com/playground/foundation-icons

  41. Permalink to comment#

    Hmm this might cost a small fortune, but I want them all. The Dotcom icons are probably the only ones I might have problems using on some of our projects – it’s still unique though. Great share.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".