I am available for freelance work - HIRE ME

Further Thoughts on CSS, Experiments and Icons

posted by Matt Ward on Aug 21, 2010.

Last week, I published an article entitled “Are We Taking CSS Too Far?” in which I looked at the concept of using icons generated entirely with CSS rules. In this post, I would like to follow up on some of the thoughts that emerged through the discussion of the first article.

Last week, I published an article entitled “Are We Taking CSS Too Far?” in which I looked at the concept of using icons generated entirely with CSS rules. My suggestion was that, while this might be a cool experiment, it really isn’t all that practical in a real world, production environment. To my surprise, the article really took off, and in the span of just one week, it quickly became the most viewed article on this blog (and by a significant margin).

It also seems to have caused a fair amount of discussion (at least for one of my articles). There were an extensive number of comments on the post itself, as well as on Reedit and a site called Hacker News. Jad Limcaco even started a thread over on the Design Informer InForums. As such, there has been a lot of discussion and, while I don’t normally write follow up articles, there are a few things that I wanted to address, based on the comments that came up.

So, if you haven’t read the original article, I’d suggest going out and having a look at that first.

To start, I would like to clarify that I wasn’t really trying to attack anyone with my article. Quite the opposite actually. I was trying to make a point that I thought was important and valid, and in order to do so, I did need to show examples of the types of icons that I was talking about. I tried to do this as respectfully as possible, though, and if it came as anything other than that, I do apologize!

The Benefits of Experiments

One of the most important things that I want to clear up is that I have absolutely no issue with the plethora of CSS experiments that are out there. From a lot of the comments I read, it seemed like some people believed that I was saying that we shouldn’t do anything with CSS unless it had practical application in a production environment.

I don’t think this is the case at all!

I actually like the way that Steve Dennis, the creator of the CSS fail whale, had to say about the article in his comment:

What I don’t agree with is saying that these exercises are pointless. These things are called ‘experiments’ for a reason. We do them to try and discover the capabilities and boundaries of what the technology is currently capable of, and by doing so, help gain a better understanding of where we *can* use these techniques in practical ways.

Think of something like the LHC (not that it’s a fair comparison lol). Smashing particles together serves no practical purpose. But it helps people (hopefully) understand the fundamentals of things so that they may be able to transition their knowledge to practical applications later down the track.

Some other people had similar things to say too, and I think this perspective is spot on. These various CSS experiments are great as experiments, pushing the boundaries of what we can do, and potentially introducing us to some new ways of doing things that can be worth using in a production environment, even if the specific nature of the original experiment is not.

The fail whale is an interesting experiment, despite having no practical purpose

The fail whale is an interesting experiment, despite having no practical purpose

As a case in point, though I (quite obviously) would never use pure CSS icons in my website, my study of Gallagher’s CSS social networking icons did actually teach me a couple of things which I have been able to implement in a practical way that has absolutely nothing to do with icons.

As such, I do think that these CSS experiments have some value, and would encourage people to continue to pursue them for strictly educational purposes – though hopefully in a semantic and well-coded fashion. Let’s just not make the mistake of assuming that these experiments should be used in real, production situations.

One thing that I would suggest, however, might be just a little more editorial on the blog posts that present these experiments to us. Like a good tutorial, point out the interesting concepts or techniques that really come out of the experiment. This should help contextualize the experiment and help readers separate the practical from the impractical.

The Implications of Cost

Another one the article’s comments (from KHT) seems to suggest exactly the same thing that we were just talking about, in terms of experiments:

None of the CSS3 experiments are meant to be practical, they are purely for entertainment purposes. So its not that I disagree with you but there is no argument to begin with.

Obviously, I disagree, for I think there is an argument to be made. Yes, I don’t think that (most of) the CSS experiments are meant to be practical. I also agree that they are have entertainment value, though I think they have even greater value as an educational resource. As long as these things are generally understood, then there’s really no issue, and if things had stayed that way, I would probably not have written the article at all.

However, when we actually start charging money for these icons – as with the Peculiar set – that places everything in an entirely new light, which I have termed the implication of cost. As long as everything remained in in the experimental stage, all this unique CSS work remained could be understood as primarily theoretical and conceptual. The moment we put a price tag on it, though, the implications change.

Charging people for the icons is essentially a means of sanctioning their use in a production environment and are stepping firmly across the line between the experimental and the implementable. When this happens, I think that there is an argument, because we are no longer just in the realm of the experimental, and the message we are sending is the wrong one.

While we’re on the subject of cost, one of the comments that I saw over on Reedit was:

you lost me when you mentioned ‘forking out’ $25 for the next set of icons, and saying the price was too steep. $25 too steep? Mental.

Though that was more of a secondary statement, I thought I should probably clarify that one too. I was just comparing it against other icon sets, like the Origami Vector icons over at IconDock. At $40 for 204 beautifully, full colour icons, the cost comes out to about $0.196 per icon. At $25 for 45 the simple pictograms in the Peculiar set, the cost comes out to about $0.556 per icon, which is significantly more.

Of course, if the Peculiar icon set works for your project (and if you want to use CSS icons), then $25 isn’t all that much. My “steep” assessment was mostly relative. I probably should just have left this whole statement out, but that was my basic thinking.

A Viable Icon Alternative

One thing that I thought about mentioning in the previous article (but didn’t) is that there is another, interesting and experimental alternative for implementing scalable, vector-like icons on your website, as outlined in the Nettuts+ article “Quick Tip: Ever Thought About Using @Font-face for Icons?”. The basic idea is to use a dingbat font to add in the necessary icons as characters.

There are several benefits to this:

  1. All of the icons can be included in a single library, much like with a CSS image sprite.
  2. Because you’re using a font, the icons are fully scalable (though they may loose some detail at smaller sizes).
  3. You can change the colour of the icons as easily as you can change the colour of text.
  4. Simplify your CSS so that you don’t have to use extensive background position properties

Of course, there are some drawbacks too. The icons can only have a single colour, for instance, and it relies on @font-face support.

The Pictos font is a beautiful set of monochromatic icons packages as a font

The Pictos font is a beautiful set of monochromatic icons packages as a font

Still, with beautiful icon fonts like the Pictos set, this technique does seem to have a much more viable, real-world application than CSS icons do. I would even consider doing something like this myself in the future, when @font-face is a bit more widely supported.


So there you have it. I hope this article has helped clarify a few things in regards to the original article, and possibly even given you a few more things to think about when it comes to CSS experiments and icons.

Personally, I’ve really enjoyed seeing all the different thoughts and comments on this subject over the past week. I’ve also determined that there are a few other areas that I need to start brushing up on, such as the whole world of SVG. I’m also interested in looking at CSS extensions like Sass, and seeing if they have any real value for me.

What about you? Did this article clear things up a bit? How do you feel about CSS experiments as experiments? Would you ever use @font-face for your icons?

Note: Main article image supplied via ShutterStock

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!


Aug 21, 2010

Steven says:

Pure CSS Twitter ‘Fail Whale’ … 38KB for a 5KB image!? Would we be equally impressed if it was made from bread, photographed on an iPhone and converted to an RSS feed in real-time and randomly twittered to geo locations that matched co-ordinates of the picture!?

Pointless amusement aside, new technology has long proved to take some time before it is adopted to full potential and HTML5 and CSS3 are going to be no different.

I personally like the whale picture as it is for aesthetic appreciation, as much as I would also have liked to see it made using 10bytes of data in a 20 minute animated adventure with a sountrack … that would be real technological advancement for me.

Aug 22, 2010

Spyros Martzoukos says:

Lol@steven about the bread failwhale.

My answer to the dingbat + @font-face question would be yes.
Now that minimalism is, at last, an acceptable trend there’s no need for multicolored icons – after all they don’t serve a decorative purpose rather than a usability one.
After all, using css3’s text-shadow property and some different color at :hover states, we can significantly “ungrey” them.

Cudos for the bold expression of your view – finally someone spoke about the elephant in the room.

Aug 22, 2010

Jansen Tolle says:

Great follow-up article. I had the same thoughts as you when I first saw a set of CSS icons.
“Cool, but impractical”.

Aug 22, 2010

Sunny Singh says:

I like your way of thinking, respectful yet assertive when needed.

Using @font-face icons seem a bit odd to me though. How would they be “read” on screen readers (even though icons shouldn’t have any text value)? Since dingbats are just regular characters, I assume the actual value of them would be random letters.

Also even though @font-face isn’t fully supported in browsers at the moment, using them now would mean a flash of random characters before seeing the actual “dingbat icon” (when the font has loaded).

Aug 22, 2010

Jasper says:

Reedit != reddit. :-)

Leave a Comment


  1. CSS Brigit | Further Thoughts on CSS, Experiments and Icons
  2. CSS Brigit | Further Thoughts on CSS, Experiments and Icons
  3. Further Thoughts on CSS, Experiments and Icons « Produxion

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

There is no TOP commenters at this time.
Copyright © Echo Enduring Media 2009-2015