Icon Fonts / Wingdings / Dingbats

As a UX Designer I’ve found that there are thousands of icon sets out there.  I’ve downloaded many of them and despite the recurring issue of finding a set that has all the icons you need I always come back to the same two headaches (one new one) once I reach development:

1. They’re images and don’t scale easily
2. They’re difficult to theme
3. Retina Display resolution

So for the past few months I’ve been researching better ways of incorporating icons into our web app (www.3point5.com / www.promotive.com). I’m a fan of LESS CSS and Twitter’s Bootstrap and came across Font Awesome (see favorites below). After plugging that into our application I instantly became hooked on the concept of icons as a font that are fully scalable and theme-able with a few lines of CSS.

// Icon Fonts (My Favorites)

• Fontello (Pick and choose out of above fonts which ones you want)
• Font Awesome
• Entypo (include desktop version)
• Modern Pictograms | The design office
• ShiftIcons
• Icon Sweets 2

// Icon Fonts (Free)

• Entypo
• Font Awesome
• Iconic
• Fontello (Pick and choose out of above fonts which ones you want)
• Foundation Icon Fonts | Zurb
• Raphael Icon Set
• Social Media Icon Pack | Font Fabric
• Modern Pictograms | The design office
• Heydings Icons
• Modern Pictograms | Font Squirrel
• Erler
• Web Symbols Typeface | Just Be Nice Studio

// Icon Fonts (Paid)

• Shifticons
• Pictos
• Icon Moon
• Fico – A font with icons
• Icon Sweets 2
• Fonthead
• Tipogram

// Demo’s (Examples)

• CSS Tricks - Icon Fonts are Awesome
• CSS3 + Icon Fonts Demo