Font-Embedding Icons: This Is a Big Deal

Update: This process has been refined. Read the blog post which describes the new method in detail.

A little over a week ago, Wayne Helman posted an article proposing the use of @font-face for displaying icons. The article was well-received, but I was honestly expecting more excitement around this idea. From my view, this now seems like the way to set icons in a site. I feel strongly about the potential of this method, so I thought I would take the time to generate a font set for Iconic and to talk about why we should all be using this method for displaying icons.

Look Ma, No Images

Before I go into details, if this method is new to you, here is a simple demo of font-embedded icons. The basic idea is to generate a font containing your icons (much like wingding font sets), embedding that font using the @font-face CSS rule and taking advantage of the :before selector and content rule to inject a character bound to a specific icon.

  • Home
  • Plus
  • Minus
  • Window
  • Dial
  • Lightbulb
  • Link
  • Image
  • Article
  • Spin
  • Map Pin
  • Pin
  • Denied
  • Calendar
  • Bolt
  • Clock
  • Book
  • Tag
  • Heart
  • Info
  • Chat
  • Key
  • Unlocked
  • Locked
  • Mail
  • Phone
  • Box
  • Pencil
  • Comment
  • Trash
  • User
  • Volume
  • Mute
  • Cog
  • Check
  • Beaker

This demo is a simple list with a tags given specific classes for specific icons. Wayne Helman’s method was structured in a slightly different manner, but the general concept is the same. This method is surprisingly backwards compatible and low maintenance.

Pros and Cons of Font-Embedded Icons

Like pretty much everything in life, tradeoffs do exist with this method. I know for a fact that I will be implementing this method on my site, but I am certain I will not be using it for all my projects. Below is a basic breakdown of advantages and disadvantages.


Potentially far less HTTP requests
Downloading 100 small files can be far slower than downloading one large file. Depending on the individual situation, this could result in a faster page load.
One icon, infinite sizes
Vector icons mean vector scaling. No more icon_8x8.png, icon_16x16.png, icon_24x24.png, etc.
Cleaner system for icon management
Managing icons in multiple colors and sizes can be a serious pain. With font-based icons, all the color/size variations you need are in just one file.
Switching your icons in one line of CSS
With all the talk about TypeKit and how easy it is to embed fonts, the same could soon be the case for icons. No more batch-replace of image references.
CSS3 transitions open interesting doors
Transitions, effects and transforms are all open game. More on that further down in the article.


Fonts can be large in size
A complex font can easily be 90Kb. That can be a hard pill to swallow if you simply want to use one specific icon.
No standards in place for key-binding
If you are under the opinion that TypeKit should offer icon sets as embeddable fonts, there needs to be some standards in place for what icons are in an icon set and what keys they are bound to. Otherwise switching icon sets could display unexpected icons.
Potential for tag-bloat
After playing around with embedding icons, it became clear that improper implementations could easily lead to ugly markup.
Multi-colored icons are a no-go
If you want to embed icons like famfamfam with various colors/shades, you’re screwed. CSS3 can give you some simple gradients, but beyond that this method is just not going to work.


The following is a quick rundown on how I implemented the demo at the beginning of the article. I am not presuming that my method is the best or even a proper method at all. I would really enjoy seeing how others think the HTML/CSS should look for this use case.

The CSS is cut and dry. Most of us have seen this plenty of times. Snook goes into far more detail if you are interested.

@font-face {
  font-family: 'IconicStroke';
    src: url("iconic_stroke.eot");
    src: local('IconicStroke'),
       url("iconic_stroke.svg#iconic") format('svg'),
       url("iconic_stroke.otf") format('opentype');

I apply a class (perhaps too specifically) named ‘iconic’ for wherever I want to use the font-embedded icon. I set the display to inline-block to allow for CSS3 transformations.

.iconic {
  font-family: "IconicStroke";

I then add rules for each icon where I use the content rule to inject the ASCII character bound to that specific icon.

.iconic.home:before {
  content: '!';

Lastly, in the HTML, I use an a tag, since it could also potentially be used as an anchor destination in certain situations. The use of the blank a tag is not necessary, but it seemed like solid method to create a tag exclusively for the icon when it needed specific styling.

<a name='home' class='iconic home'></a> Home

Using CSS3 With Font-Embedded Icons

Integrating CSS3 into font-embedded icons is the difference between this method and using images for icons becomes apparent. Below is a simple, yet not-so-aesthetic example of what can be done to a font-embedded icon with CSS3. This used to be the sort of thing that was completely relegated to Flash. With vector icons, we have full scaling flexibility &#8212 something that is far more powerful than we typically think. Note, you must be viewing this in Safari or Chrome to see some of the effects and the transitions.

Roll over this text to see transition

Below is the code used to implement this. No Javascript was needed for this.

.iconic {
	font-family: "IconicStroke";
	text-shadow: 0px 0px 2px rgba(0,0,0,.33);
	-webkit-transform: rotate(0deg) scale(1);
	-moz-transform: rotate(0deg);
	-webkit-mask-image: -webkit-gradient(linear,
		left top,
		left bottom,
	-webkit-transition: all .3s ease-in-out;
	cursor: default;
	padding:10px 0 10px 10px;

.iconic:hover {
	-webkit-transform: rotate(-10deg) scale(1.3);
	-moz-transform: rotate(-10deg) scale(1.3);
	text-shadow: 0px 0px 4px rgba(0,0,0,.5);
	color:#c00 !important;

This Concept is Worthwhile

There are many CSS techniques that come around which ultimately end up being gimmicky — this is not one of them. If implemented appropriately, this method could allow for more creative flexibility, all while using less bandwidth. I have taken the time to compile many of the icons in Iconic into a typeface in addition to creating a starter CSS file. This should give anyone who is interested in implementing this method enough to be on their way. I look forward to making the switch on my site and hope to see others do the same.

36 thoughts on “Font-Embedding Icons: This Is a Big Deal”

  1. Brilliant idea, when will the iconic font be coming out? Really like the rollover, which BTW, works in Firefox as well.

  2. Elegantly put. For those concerned about certain browsers transitioning from text to icon, the method I’ve been deploying is to set opacity on the element to 0 and post-load, fade the icon in with your favourite JavaScript API. Just be certain to have the icon’s element defined as some kind of block with a width and height, so the browser can determine layout issues during rendering.

  3. Actually i read the article on tutsplus too and thought just as you.
    However if you think about it it’s just not that good.
    Some of my points:

    1. You don’t change the size of an icon normally. (Do you?)
    2. HTTP-Requests can be saved with sprites.
    3. It’s harder to add new icons to the set ( at least for me it would. )
    4. Filesize is little smaller with pngs. (look at #1)
    5. Semantics / Accessability

    I think that’s all.

    Further discussion is appreciated. (@mklappstuhl)

    – Martin

  4. Incredible! This is pure genius!!!

    I think I’m gonna use this on my new site.

    I was playing around and made a slight change:

    I wasn’t happy with the extra code in this line:
    as I see no real use of an “a” tag everytime I need an icon… so I thought about using the :first-letter pseudo code.

    This is my final CSS code:

    .iconic {
    .iconic:first-letter {
    font-family: “IconicStroke”;
    .iconic.home:before {
    content: ‘!’;

    and the HTML:

    and still works for me

  5. I dunno, I don’t really see this as big of a deal as you. I don’t use a lot of icons in my designs, when I do, I only use a few. It is hard to imagine a design that needed enough to justify making a font for all of the icons.

  6. Accessibility and file size. At the moment I just don’t see it as workable solution. I like the concept and cheer on smart folks continuing to make it better. Thanks for working on this and I’ll be sure to keep checking in on its progress.

  7. It would be cool if your font was ‘monospaced’ so each ocon occupied the same horizontal space – in this way the text in a list with prefixed icons would line up a lot nicer I think 🙂

  8. I only wish that you’d suggested a fall-back, because of course browsers that don’t support @font-face aren’t going to render this. Although I suppose an image fall-back would make the whole thing pointless..?

  9. This isn’t really semantically correct. This is the font equivalent of using tables for layout or putting text inside images. Users whose browser doesn’t 100% support the features in question are going to get garbage results.

    Consider your advantages list:
    1. Potentially far less HTTP requests
    2. One icon, infinite sizes
    3. Cleaner system for icon management
    4. Switching your icons in one line of CSS
    5. CSS3 transitions open interesting doors

    Image-based icons can offer all of the same advantages. First, use CSS sprites to make a single image file that has all the required images in it. This obviates #1, #3, #4.

    Also, #5 can apply just as well to images. Certain CSS effects (like text-shadow) won’t work the same, it’s true. But there are lots of other effects which will work. And as you mentioned, Fonts have one single colour whereas images have 24M. And transparency.

    Next, image files are easier to work with as the tools and knowledge are more widespread.

    The only advantage the font approach has is that it automatically provides scalable icons out of the box. In my experience that isn’t very useful. If your icons are identical at all sizes you can easily just generate the smaller icons automatically. If they are not identical then the font approach falls apart. The work involved in maintaining the fonts is the same as in maintaining SVG icons.

    So in essence you are adding random characters to your document, which screen-readers can’t understand, and using advanced features of CSS to turn those characters into pictures, when everyone’s browser already understands pictures and every web developer can already easily make pictures, even CSS Sprite pictures.

    I’d say stick with sprites.

  10. This would completely break accessibility guidelines. Imagine coming to your page and hearing it read out to you. You’d get garbage like “exclamation point link home” (even if you switched to spans, which would be better than using As for this nonsense, you still have the problem).

    If you don’t need to worry about making your site accessible for some reason (just what reason is that?) then OK, I guess it’s a neat trick.

  11. @Carl – I think that’s a good point. I am a little uninformed of screen reader mechanics, but it may prove useful to disable if a screen reader client is detected (from what I know, you can do such a thing), and inject the elements at runtime for basic browsers. I’m less interested in the nitty-gritty and much more interested in the basic idea of it.

  12. This doesn’t seem to work in the new IE9 and its not working in the compatibility view of IE9 for IE7. Has anyone else experiences this?

  13. Yeah,
    I’ve been waiting for this for along time.. Ever since the flash days I’ve wanted to imbed my icons.
    I guess there are really no downsides as long as you supply text plus icons. In fact you could provide preferences to to text + Icon, Icon only or text only…

  14. Two things:

    1) I love this method and your font set. Thanks so much for this.

    2) We (and many others) use a separate asset host / CDN for our CSS to reduce page load times. This causes problems in old versions of Firefox (which lately seems to be the new IE6 in my life) as it doesn’t allow cross domain fonts resulting in just the letters being rendered which looks a bit poo.

    A solution I came across here is to Base64 encode the fonts and embed them using font-squirrel, however they don’t allow you to upload the TTF file to encode because it’s been ‘excluded’ due to copyright restrictions (it’s ok, I understand the reasoning and have just encoded the font elsewhere and then used font-squirrel to generate the CSS and made substitutions where necessary).

    Could you include a BASE64 version in your example CSS perhaps?

  15. Pingback: Quora

Leave a Reply

Your email address will not be published. Required fields are marked *