Icon fonts are great asset because they are delivered as a font. This gives them a number of advantages over traditional image icons. You will not need to open Photoshop each time you want to update an icon color or size, add an animation or shadow; It can easily be done with CSS and they will scale gracefully and look great at all resolutions even Retina displays.

There are quite a number of icon font providers out there, but this post rounds up only the best and high-quality collection of free icon fonts that you can use to speed up your work or otherwise gain some help for web design, user interface design, and other projects.

Free Icon Font Sets and Generators



Fontello is a highly customizable. This tool lets you combine icon webfonts for your own project. With fontello you can shrink glyph collections, minimizing font size, merge symbols from several fonts into a single file and access large sets of professional-grade open source icons that give you a lot of icons variations for use.

With Fontello service, you can even use your own icon as well. What you need to do is just create a svg format icon and drag it on the section provided.

Fontastic is a great free icon font generator that makes your life easier and your workflow faster. The biggest plus for “Fontastic” is the much wider choice of crisp; clear icons are available that works on almost every browser and look great with retina displays. It allows you to create fonts based on data, sensors, live feeds, or any other algorithm, or manipulate existing fonts to create your own version to use in any design program or website.

Font Custom runs on Ruby and generates cross-browser icon fonts from a collection of SVGs, making it easy to create your own free icon font and vectors. There is no configuration required and you can just create a directory of your SVG files, run a command and FontCustom will create the font files and accompanying CSS file.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Foundation Icon Fonts 3 provides you all the handy web fonts in one library. A couple lines of CSS and the right markup will get you going in no time. Now your icons can be any size, any color and any style available in CSS.

Iconvault is a simple, custom Icon-font generation. It has an ever expanding range of icons for you to choose from, carefully crafted and curated for all your icon needs. Easily apply CSS styling you are already familiar with, including colour, text-shadows, vertical-alignment, animation & font- size.

WeLoveIconFonts is a free and open source icon fonts directory to choose and build your own icon font package, with a choice of several high quality icon fonts, including Brandicon, Entypo, FontAwesome, OpenWeb Icons, Typicons and Zocial.

A beautifully designed and crafted suite of 300+ icons for web and user interface design. Each icon in the Batch PSD is a single shape layer, meaning they can be scaled up or down without loss of quality.

Sosa is an icon font including 160+ icons I find useful. The download includes the .ttf .eot .svg & .woff files need to use this icon font via @font-face.

ElusiveIcons is a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects! It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other “attribution” claws.

An open source icon set with 223 marks in SVG, webfont and raster formats. Open Iconic will always be free and open and awesome.

Typicons are free-to-use vector icons embedded in a webfont for easy use in your user interfaces, whether it be on the web or in a native application.

This is the great Raphaël Icon-Set by Dmitry Baranovskiy converted to a Webfont. Though normaly used as SVGs with the Javascript-Library Raphaël you can now include them with pure CSS and without the need to have javascript enabled. And because the icons are just text you can do all the fancy CSS3 stuff with them. Make sure to try zooming in and out!

Maki is a clean point of interest icon set made for web cartography. It includes 112 different symbols at 3 sizes each for a total of 336 pixel-perfect icons and growing.