The Big List of Flat Icons & Icon Fonts

Published
April 3, 2012
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 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.

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.

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.

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.

Share On

Comments

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!

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

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?

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?

As nice as it is that some icon font creators offer @font-face, I wish they’d name the icons and provide an easy way to access each icon.

I’ve created this for the last three icon fonts I’ve used. I also include an aria fix if that’s required. Doesn’t seem to be much interest in including this sort of stylesheet, however. If anyone finds it useful or is behind the idea let me know! I wouldn’t mind creating this for all the free icon fonts that are currently available.

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…

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?

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.

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

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

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.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.