8 High Quality and Free Icon Fonts Available for Embedding

It seems to be the latest hot trend (or ‘buzz’ if you will) in the web design community: Icon Web Fonts. Why? It’s quite simple actually, there are many advantages of using a web font (in place of images) to render icons into your UI or web design.

The increasing popularity of CSS @font-face embedding for custom fonts on websites makes it possible to display scalable vector icons (or dingbats) on the web. The advantages of replacing icon images with icon fonts are impressive, especially the ability to style icons dynamically with CSS and their infinite scalability.

Icon Web Fonts can be an ideal alternative to graphics, here’s a little sum-up of the advantages and disadvantages of using embedded Icon Fonts:

The Advantages of Webfont Icons

• Ability to style icons dynamically with CSS (e.g. color, text-shadow, hover, transition, etc.)
• The ‘icon’ is inserted and treated as text, making scaling for different zoom levels an implementary non-issue
• Webfonts offer good cross-browser compatibility and even work in older browsers (yes, also IE6!)
• Requires just one http request for the all-encompassing icon library that is the font itself
• Reduces graphic loading times and server load

The Disadvantages of Webfont Icons

Webfonts may not always be appropriate:

• Font characters are single-colored
• Generating fonts is not as easy as PNGs or SVGs
• Image file sizes will be smaller if you only require a few icons.

 

Icon Web Fonts are best used to enhance text-based content. Probably the best way of achieving this is via the :before and :after pseudo-classes, since this requires no changes to the markup or just embed these fonts by using @font-face.

In this Article I would like to share some of the best, high quality and free icon web fonts available for embedding, .. so let’s rock baby!

 

Modern Pictograms

Modern Pictograms is a nifty icon style typeface made for all creative persons. The Design Office has designed Modern Pictograms to work on-screen at sizes down to 18 pixels.

Design by: The Design Office

Downloadlink

 

Socialico (Social Media Icon Pack)

Socialico is a package of 74 social media icons, combined within a single weight font. Every single icon matches a particular key on your keyboard – for example, the lower caps of the basic Latin alphabet form the more popular social icons in a circle, while the representations in capital letters of the same alphabet show them without the circle formation – in their pure form.

designed by Jelio Dimitrov

Download: Fontfabric™

 

A Free Icon Web Font | HeydonWorks

It’s a fairly modest collection of 60 glyphs specifically intended for the accessorization and classification of textual cues such as hyperlinks, navigation elements and buttons. You can, of course, use the set much more expressively as well. Also, there’s no requirement to embed; you may just want to use it as a desktop/print font.

Designed by: Heydon Pickering

Downloadlink

 

Erler Dingbats - The World’s first Complete Unicode Dingbat

For the first time in the entire history of Unicode standard, the full encoding range for dingbats (U + 2700 – U + 27BF) is now covered by a complete, contemporary quality font. Erler Dingbats is a spin-off of the distinguished FF Dingbats 2.0 family, and was designed as a special collaboration between designers Johannes Erler and Henning Skibbe.

Designed by: Johannes Erler and Henning Skibbe

Downloadlink

 

IcoMoon - Icon Fonts Done Right

You can download a free version of IcoMoon below. It contains 85 handpicked icons, along with the font generator and everything else present in the full version. This free package is licensed under a Creative Commons Attribution 3.0 Unported License. In short,commercial use and modification of this work is allowed as long as you give back credit.

Designed by: Keyamoon

Downloadlink

 

Iconic - An open source icon set that’s a lot more than just icons

Iconic aims to be the most forward-thinking icon set around based on its support of forward facing display/deployment methods. Icons should not just be clear and attractive, they should be easy and flexible to work with.

Iconic comes in PNG, SVG, SWC, OFT/TTF/EOT and Omnigraffle stencil formats as well as the tools used to generate them.

Designed by: P.J. Onori

Downloadlink

 

Web Symbols typeface

Web Symbols is a set of vector html-compliant typefaces, so it might be used in any size, color and browser (okey, mostly — but IE7 for sure). JustbeNiceStudio designed a typeface that includes all frequently used iconographics and symbols. Although, the idea is not hot-baked — Webdings and Windings have been around for quite a time — all of them have a lot of unnecessary and sometimes actually scary symbols.

Designed by Just Be Nice studio

Downloadlink

 

Social Networking Icons

Designed to cut out having to paste graphics around as well as simplify icons on the web, feel free to embed using tecnologies like @font-face and cufon. Embedding this font in a website using tecnologies like @font-face and Cufón reduce graphic loading times and server load as well as creating a handy format to hold the graphics in.

Each Icon can be coloured using either CSS or using other methods such as Lettering.js (a JQuery Plugin). The use of CSS3 properties such as shadows or other text effects can effectively customise the icons to a certain theme.

Design by: Matt Grey

Downloadlink

 

*UPDATE*

PulsarJS @FontFace 73 Free IconFont

An IconFont with some of the most used icons used in mobile development.All gfx done with flash and edited with inkscape!!!

 

Designed by xperiments

Downloadlink

 

How to Make your own Icon Font?

If you want to know how to make your own Icon Web Font then you’re very lucky, today (24^th January 2012) a new article was written on webdesignerdepot by Heydon Pickering (see HeydonWorks): How to make your own icon webfont.

Here he examines the science behind making successful UI icons, and explains in-depth the procces from designing the individual icons to converting them for @font-face embedding, and even licensing them for distribution, .. by using only free software and online services!