Flat Icons & Icon Fonts
There are many such roundups. This one is mine.
Icon Fonts...
are awesome. They typically come with standard vectors as well if you prefer working with them that way, but these icon projects go the extra mile in offering an @font-face compatible font for web use.
Pictos
![set-pictos](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-pictos.png)
Number | 600+ |
---|---|
Cost | $19-$249 |
Pictos is in a class of its own in that it offers Pictos Server, a service which allows you to build your own font set from it's 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.
Modern Pictograms
![set-modernpictograms](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-modernpictograms.png)
Number | 89 |
---|---|
Cost | Free |
Available at Font Squirrel for free, but donations welcome.
iconSweets 2
![set-iconSweets2](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-iconSweets2.png)
Number | 1,000+ |
---|---|
Cost | $8 |
Also has a free predecessor.
Erler Dingbats
![set-erlerdingbats](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-erlerdingbats.png)
Number | ~120 |
---|---|
Cost | Free |
A drastic improvement to the standard Dingbats.
Tipogram
![set-tipogram](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-tipogram.png)
Number | 90 |
---|---|
Cost | $18 |
CleanIcons
![set-cleanicons](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-cleanicons.png)
Number | 55 |
---|---|
Cost | $5 |
Ecqlipse 2
![set-ecqlipse2](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-ecqlipse2.png)
Number | 281 |
---|---|
Cost | Free |
They have little shadows beneath them (so not exactly "flat"). Very small predecessor.
Heydings Icons
![set-heydings](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-heydings.png)
Number | 60 |
---|---|
Cost | Free |
IcoMoon
![set-icomoon](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-icomoon.png)
Number | 500+ |
---|---|
Cost | $35 |
IcoMoon offers a Font Generator that comes with the download, which produces optimized font files with only the icons/mappings you need.
Iconic
![set-iconic](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-iconic.png)
Number | 171 |
---|---|
Cost | Free |
Gedy Rivera Social
![set-gedyrivera](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-gedyrivera.png)
Number | 107 |
---|---|
Cost | $5 |
Fico
![set-fico](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-fico.png)
Number | 52 |
---|---|
Cost | ~$30 |
Monospaced.
Web Symbols
![set-websymbols](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-websymbols.png)
Number | ~80 |
---|---|
Cost | Free |
WriteSocial
![set-writesocial](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-writesocial.png)
Number | ? |
---|---|
Cost | $10 |
Specifically only social media icons. They claim "billions" which obviously it isn't.
Entypo
![set-entypo](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-entypo.png)
Number | 100+ |
---|---|
Cost | Free |
ClickBits
![set-clickbits](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-clickbits.png)
Number | ~400 |
---|---|
Cost | $12 - $49 |
In a bunch of different separate fonts based on type (e.g. arrows, icons, circles, etc)
Font Awesome
![set-fontawesome](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-fontawesome.png)
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
![set-justvectorssocial](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-justvectorssocial.png)
Number | 150+ |
---|---|
Cost | Free |
Social stuff only.
PulsarJS
![set-pulsarjs](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-pulsarjs.png)
Number | 73 |
---|---|
Cost | Free |
Flexi Social
![set-flexisocial](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-flexisocial.png)
Number | 65 |
---|---|
Cost | $29 |
Social stuff only.
Raphaël
![set-raphael](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-raphael.png)
Number | 116 |
---|---|
Cost | Free |
Dot Com
![set-dotcom](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-dotcom.png)
Number | 92 |
---|---|
Cost | Free |
Snagging it from DaFont then running it through Font Squirrel is your best bet.
Steedicons
![set-steedicons](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-steedicons.png)
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
![set-typicons](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-typicons.png)
Number | 88 |
---|---|
Cost | Free |
Donatations help keep it going.
Flat Icons Only
Web Icon Set
![set-webiconset](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-webiconset.png)
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.
Geomicons
![set-geomicons](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-geomicons.png)
Number | 100+ |
---|---|
Cost | $16 per set |
Comes in two sets, one make from solid shapes and one made from strokes.
Picons
![set-picons](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-picons.png)
Number | 100+ |
---|---|
Cost | $9.90 - $59 |
Various sets of different sizes and styles at different prices, including some non-flat ones.
Symbolicons
![set-symbolicons](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-symbolicons.png)
Number | ~500 |
---|---|
Cost | $5 - $43 |
One big set with a couple of little add on packs.
Bixel
![set-bixel](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-bixel.png)
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
![set-tabs](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-tabs.png)
Number | 745 |
---|---|
Cost | $10 - $60 |
Free updates.
Gentleface
![set-gentleface](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-gentleface.png)
Number | 304 |
---|---|
Cost | $29.99 |
Free if used for personal or community sites.
Glyphish
![set-glyphish](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-glyphish.png)
Number | 400 |
---|---|
Cost | Free - $25 |
Set of 200 is free in one size, or set of 400 in two sizes for $25.
Glyphicons
![set-glyphicons](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-glyphicons.png)
Number | 350 |
---|---|
Cost | Free - $49 |
Free for personal and community sites, or pay for royalty-free and more formats.
The Noun Project
![set-thenounproject](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-thenounproject.png)
Number | 424 |
---|---|
Cost | Free |
Gcons
![set-gcons](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-gcons.png)
Number | 100 |
---|---|
Cost | Free |
Open source
Pixelated
![set-pixelated](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-pixelated.png)
Number | 36 |
---|---|
Cost | Free |
Eddit iPhone UI
![set-edditiphoneui](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-edditiphoneui.png)
Number | 160 |
---|---|
Cost | $69 - $189 |
$189 gets you the vector PSD.
Simplicity
![set-simplicity](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-simplicity.png)
Number | 205 |
---|---|
Cost | $19 |
Picas
![set-picas](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-picas.png)
Number | 250 |
---|---|
Cost | $10 - $25 |
Couple of free preview packs available.
Helveticons
![set-helveticons](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-helveticons.png)
Number | 600+ |
---|---|
Cost | $159 - $499 |
Roam Design
![set-roamdesign](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-roamdesign.png)
Number | 99 |
---|---|
Cost | Free |
Personal use only.
UIcons
![set-uicons](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-uicons.png)
Number | 362 |
---|---|
Cost | $20 |
@font-face version is "coming soon" and will likely be a small set of originals.
Jigsoar
![set-jigsoar](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-jigsoar.png)
Number | 60 |
---|---|
Cost | Free |
Free with attribution.
Webalys
![set-webalys](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-webalys.png)
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
![set-designkindleglyphs](http://cdn.css-tricks.com/wp-content/uploads/2012/04/set-designkindleglyphs.png)
Number | 70 |
---|---|
Cost | Free |
Other Tools
- Fontomas takes a few of the free font icon sets and allows you to pick and choose characters and apply mappings to your own liking.
- Hieroglyph - Generate an icon font from a directory of vector (SVG) files
- Glyphs - the font editor for everyone.