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.
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.
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.
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 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.
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.
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.
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
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!
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.
@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.
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.
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.
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.
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!
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 :)
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
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.
Loading...
This comment thread is closed. If you have important information to share, please contact us.
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 :)
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
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):
Althout the method i prefer is to put the icon in a data attribute like below:
Le HTML:
Le CSS:
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
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.
I found a bunch of really nice icons, called eclipse.
http://chrfb.deviantart.com/gallery/#/dzor6y
added
Great list, Chris! I need to make more of an effort to incorporate icon fonts into my workflow.
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.
I think the point was for it to be a font that contains icons.
Thanks so much Chris. This is a great list!
Thanks for the collection! I like the “Modern Pictograms”
I found some awesome Icons here http://fontfabric.com/social-media-icons-pack/
Great solution. Thanks for that collection.
Free picture fonts – http://bit.ly/GIweFq – different icons, smileys, bullets… Whether it serves :).
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.
@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?
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/
Great post! I am always in need of icons.
What a great resource, thanks a lot for posting.
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.
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.
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/::beforecombined 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::afterbut I can’t because I’ve already used it for a clearfix or additional borders. Any thoughts?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?
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”
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.
Entypo CSS
Socialico CSS
Heydings Icons CSS
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?
Amazing collection here Chris! Found some gems in here that even with my iconophilia didn’t have, Cheers.
Great collection!, Thank you.
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…
Wow, this is a great collection, thanks dude. Keep posting such useful links. :)
Tnx a lot Chris, this post is going straight to my bookmark wall in my office!
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/
Just awesome collection. Really was looking for something like this.
Thanks! You really do a good job.
Great Collections of icons.
Is there any site where we can find lots of icons like iconfinder?
Ultimate collection, of all these Pictos and WebSymbols are most popular ones. Thanks for sharing.
The best of all: Helveticons!
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.
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.
I don’t know if anyone is working on it but YES WANT.
I can’t tell you the number of times I’ve gone to google web fonts and forgot that they don’t have webdings on there. I would LOVE THAT.
Thanks Chris for the great icon collection :)
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!
Great Stuff. Thanks For sharing these :)
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 understand what you mean because I feel the same. For more icons and fonts you can check iconfinder, http://www.creattor.com or iconshoc. Enjoy!
There is a github repository called Font Awesome which is designed to be used with Twitter Bootstrap. It looks nice :)
Thank you very much for the link, Daniel, it was exactly what I needed! Best wishes!
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
A really nicely designed general set http://www.zurb.com/playground/foundation-icons
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.