I am sure you’ve probably seen those tiny little icons that represent a logo or action to perform. For example “go right”, “go left”, “check the weather”, “purchase the item”, “zoom in”, or “zoom out” that are represented through icons like arrows, shopping cart, magnifying glass, etc. Web designers used to use images for that, but all of that changed thanks to icon fonts.
Most of the icons you see today on websites or mobile apps are not images, they are fonts. Why designers prefer icon fonts over icon images? Simple…icon fonts give greater control over icons. You can easily change color or size or even add properties like drop shadow, opacity or any kind of CSS3 animations, all from your stylesheet. No need to open Photoshop again and again just to make small changes.
In this post I am going to list down what I believe are the top icon fonts available for personal and commercial projects for free.
So, let’s roll out the scroll!
Stroke 7 Icon Font
This is a complete pack of 202 icon fonts inspired by the infamous iOS 7 vector icons. They use the @font-face CSS rule and will be displayed on browsers that support the rule. All of the icons are beautiful and retina-ready.
Github’s Octicons
Inspired by Github’s icons? Well there’s a complete pack of 178 of those icons available for free! It includes icons for Github, code, Behance, and many more social and general icons for your website!
Foundation Icon Fonts 2
There’s a new version of the font pack from Foundation, a popular responsive front-end framework. This is set of bold, black icons and includes an enclosed icons set (icons inside a circle), a social icons set (each social icons is in-line with foundation icons theme), and an accessibility set.
Themify Icons
Themify icons is a complete and comprehensive set of 320+ pixel-perfect vector icons. This is another set that has been inspired by Apple iOS 7 icons. They include arrows/directions icons, web app icons, control icons, text editor icons, layout icons, and brand icons (brand logo icons). These are completely free for everyone and for any use, be it personal or commercial.
Sosa Icon Font
This is a font icon pack consisting of 160+ vector icons for free. The developer has hand-picked all of the icons he “found useful” and made them available in .ttf, .eot, .svg, and .woff files for public use.
Linea Icon Set
This is great set of 730+ icons that is designed to provide the downloader with essentials. So, you can find something for everything (basic, music, ecommerce, software, arrow, and weather). It is distributed under the CCBY license.
Iconic Icon Set
This is an incredible icon set that is available in almost any format you may require. It is extremely legible (down to 8 pixels) and is ready-to-use on any framework. These are great if you want to work with small icons. Currently, it has 223 marks and is “free, open source, and awesome”.
Genericons
These are ultra-flexible icons you can use for your blogs, ecommerce websites, or any other purpose. Genericons were designed to be “clean and simple”. This isn’t a huge list of icons, but if you’re not looking for anything specific, you can probably find the ones you need. You can use HiDPI to change the colors if you wish.
Rapheal Icon Set
This is a cute little pack of 116 icons designed by Dmitry Baranovskiy. They have been converted to a webfont (@font-face) and can easily be embedded into CSS without the need for JavaScript. The developer offers the icon fonts along with an example, so make sure you check it out!
77 Essential Icons
This is a simple and clean set of icons offered by Bryn Taylor on Dribbble.llc. All of the icons are infinitely scalable vectors, pixel perfect, color adjustable, available in several formats (svg, ai, eps, pdf, png, psd) and downloadable for free.
Typicons
If you’re looking for a huge set with plenty of options, give typicons a try. This pack includes 336 pixel-perfect vector icons. The default icons are all a dark gray with thick border outlines. They are available on Github in a minified SVG format.
Iconica
You will find three different types of style in this icon set: regular, filled circle, and outlined. It’s an open font under the SIL license. The work is still in progress, so make sure to keep checking for updates!
Heydings Icons
The Heydings Icons set consists of 60 retina-ready icons that will remind you a lot of MS Webdings. The developer offers them in TTF and says they are intended for the classification of “textual cues” such as navigation elements, hyperlinks, etc. These are all for free.
Just Vector Social Font
Here’s a set of creative social icons that you can easily use as a font. It contains 62 icons that you can resize, recolor, and do whatever you like with. It is distributed under the Free Art License which means you can pretty much do anything with them.
Font Awesome
Probably one of the most used icon font set on web. Font Awesome has a huge collection of icon fonts of all types, ranging from social to web app, currency, gender, directions, and many more.