We Love Icon Fonts

We must stop here, this is icon fonts country!


This is a free & open source icon fonts hosting service (like Google Web Fonts, but icon fonts only). Hurray!


This is a public gamma. Use this service for mockups, reduced test-cases or CodePens, but not on productive systems!


Send a message to @WeLoveIconFonts or create an issue on GitHub.


Crowdsourced collection of web brands by fontello.


A set of 250+ carefully crafted pictograms by Daniel Bruce.

Font Awesome

The iconic font designed for use with Twitter Bootstrap by Dave Gandy.


A bunch of emoticons, loading- and browser-icons are in this awesome collection by fontello.


It's a clean point of interest icon set made for web cartography by MapBox.

OpenWeb Icons

Be proud of using Open Web Standards and show it to the world... by Matthias Pfefferle.


All-purpose icons by Stephen Hutchings.


A huge collection of zocial & brand icons by Sam Collins.

Use selected font(s)

Pro tip: Select some icon fonts to the see real output here!

How to!

3 steps to integrate icon fonts into your project:

1. Add the icon font(s) to your collection:

2. Import the icon fonts(s) into your css and add the font-family('s):

@import url(http://fonts.twiddern.it/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;

3. Burn baby, burn!

<!-- Single Element -->
<span class="zocial-dribbble"></span>

<!-- Group of Elements -->
  <li class="zocial-twitter"></li>
  <li class="zocial-flickr"></li>
  <li class="zocial-lastfm"></li>
  <li class="zocial-reddit"></li>

Pro Tip: Use the element inspector of your favorite browser and discover the icons on this page for more examples!