.. Your Daily Design Dosis

8 High Quality and Free Icon Fonts Available for Embedding

| 25 Comments

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

Download

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.

Social media Icons pack

designed by Jelio Dimitrov

Download

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.

icon webfont

Designed by: Heydon Pickering

Download

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

Download

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

Download

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

Download

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

Download

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

Download

 

*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

Download

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 (24th 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!

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

25 comments

on this article: “8 High Quality and Free Icon Fonts Available for Embedding”
  1. Typicons is a free webfont I’ve been working on. You can find it at typicons.com!

    • Hi Stephen,

      .. love it, downloaded it and will try it in a new project? Is there any chance you’re gonna make more glyphs for this webfont, tho 88 glyphs will probably cover almost all needs. But missing a bit the social media icons, so you really can use it for UI or websites. Nevertheless, great work, well done!

      Thanks for letting us know about your icontfont, Cheers & Ciao!

      • Definitely plan on making a few more additions to the font and would love to hear any suggestions!

        • Hi Stephen,

          .. cool! IMHO, if you add some of the popular social media icons to your collection, you not only can use this for UI, but also for websites. Success and let me know when you’re finished! I’ll add it to this article, .. if you don’t mind ;-P

          Thans for your update, Cheers & Ciao ..!

  2. Such a beautiful sets. as a designer this will gonna useful to me! thanks for this Great Share :)

    • Hi Sam,

      I’m glad you liked my little collection of iconfonts, and yep, I agree .. it’s very tempting to use these in a future webdesign ;-P

      Thanks for your comment, Cheers & Ciao ..

  3. IcoMoon – Icon Fonts Done Right – 404 not found ;)

  4. Social networking icon set is good! i download this set, n gonna to check on my blog!!

  5. This is such a fad at the minute, It’s nice to see all the fonts in one place.

  6. Nice bunch ! I love the minimal design of some. I may use them for upcoming projects. Thanks Jan !

    • Hi Nicolas,

      How are you doing? Glad you liked my little collection cause there ain’t much more free examples (and especially High Quality like these) of icon fonts? I too am thinking about implementing these in future projects, but make sure you have enough different icons! Because for 2 or 3 icons per site, I think it’s more profitable to take images ..

      Thanks for your time to comment, sleep well for later! Cheers & Ciao Amigo ..!