Free Icon Fonts (Pictograms) For Today’s Web Designer

Icon Fonts (or pictograms) are available for a very long time but the ones that are specifically designed for web apps are appearing lately.

They are so flexible and fun to use considering each icon can be resized, colored, rotated and styled very easily. No need to hack them in our image editing apps but just CSS is enough.

And, making buttons, menus, lists, etc. with icons becomes painless as we deal with a single element: "the text" rather than "the text and the images/icons".

Previously, pictograms for common-use were shared (Designing With Fonts: 30 Useful & Free Dingbats). But, this time, we come up with the ones that are perfect for websites and web apps, the ones that may replace your icon sets. And, they are free.

Entypo (100+ items)

Entypo is a high-quality icon font with 100+ items and available in OpenType font, vector EPS and web font.

Font Awesome (150+ items)

Font Awesome is designed to be used with Twitter Bootstrap but also can fit into any other web project.

There are 150+ items, comes with various font formats and includes CSS + LESS styles.

Modern Pictograms (90+ items)

A set of 90+ slick pictograms which can be used in any size (but work much better in >24px).

Iconic (171 items)

Iconic is an impressive set that is available in in raster, vector and font formats.

It even includes JSX and Python scripts to allow you to build your own PNG, SVG and font files however you would like.

Web Symbols Typeface (75+items)

Web Symbols is a beautiful icon font built with modern web designs in mind and includes many popular icons like social networks or actions.

Raphaël Icon-Set via @font-face (100+ items)

Here is the Raphaël Icon-Set converted into a webfont. There are 100+ items, very clearly designed and all suitable for web apps.

Social Media Pictograms (74 items)

These pictograms include almost every social network icon you can think of as there are 74 unique items.

Depending if the letters used are capital or lower-case, they appear with or without circles.

PulsarJS @FontFace (73 items)

An icon font, with 73 items, designed with mobile development in mind but would look good on any web project.

Heydings Icons (60 items)

Heydings Icons consists 60 beautiful items which are all high-quality.

Peculiar (45 items)

Peculiar is a very cool set of items which are all built with HTML + CSS and nothing more.

The minimum size they can be used is 16px and there are 45 items.

Helpful tools

When using web fonts, you are not bound with a single set but combine items from each set and generate your own font. This is also a good idea for minimizing the number of items. Fontomas is a handy open source resource built for this case.

You can also create your own web fonts from standard ones with the help Font Squirrel's @Font-Face Generator.

Any other tools you know that will ease consuming icon fonts?