This is awesome and well done!

That’s unbelivable, thanks for sharing!

Very neat my friend. CSS3 is opening so many doors for pure text designs. Gradients, Icons, Special effects, and so many other neat ideas. It’s also inspiring to see people taking these elements and pushing them to the limits.

I love your simple design that draws me into reading text.

Very nice job sir! They even have partial support in ie8! This is great!

Nice moves with :before and :after
Will puzzle initially curious mind if they just look on the demo icons page!

You just don’t stop do you :) This is great work. I would love it if they scaled better as zooming breaks a few of them. eg the mic and email http://cl.ly/3Jge but none the less a great exercise.

Great job. Wish that Firebug could show :before and :after elements.

It is a really great work! But, have you tried the Data URI technique?
Nicholas C. Zakas has a post about it: http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/

This should live on github so the community can contribute, maybe have it in SASS

@Sunny: The web developer tools in Chrome/Safari and Opera allow you to inspect pseudo-elements.

@Hélio Correia: I’m aware of using Data URIs. This is a separate exercise that in and of itself is not a production-ready technique. It isn’t attempting to replace the use of image sprites. It was just about abusing CSS and learning something in the process.

@clyfe: I’d rather it wasn’t on Github because it isn’t something that I want to encourage to be deployed on websites. I don’t think this is practical and I hope people are aware of the limitations. Images and SVG are better tools for the job.

it works just fine in Safari too (no surprise, really), for your information.

Kudos. Great work.

The semantic nature of this is truly impressive. Good job.

Hi Nicolas,

Really impressive use of css3. I’ve set myself the task of creating my personal blog without using a single image.

I would love to use several of these icons (I’m developing primarily for modern browsers).

Would you mind?

They work on the Midori web browser too

We’re getting ever closer to breaking down any creative barrier we can envisage using CSS. Thank you for the inspiration.

Great stuff. Really creative use of CSS.

Très impressionnant, mais le code reste quand même très lourd.
Beau travail en tout cas !

Wow, these are amazing! As Hélio said above, you can use Data URIs, but I like this better, more for the novelty of it. What is the license on these, I would love to use them!

Great job! You bring CSS to high level.

Like I said in the text above: these are not icons intended to be production-ready; they were a technical exercise. Using CSS in this way is no replacement for image sprites, SVG, or the use of Data URIs.

Unbelievable stuff. Amazing. Who needs graphics?

Thanks. It’s very very usefull.

Really awesome! Thanks for sharing it. I really love the pie chart icon.

Some of the best icons I’ve ever seen!

Wow, that was hard work! Great idea.
Thanks for sharing.

Great!!!!!!! Oo

hi, very high quality hack!

i think it’d be also interesting to find the corresponding unicode char when they exist. I did some work in this: http://xahlee.org/comp/unicode_computing_symbols.html

hopefully sometime i’ll organize them the way you have it. (perhaps half of the icons you have here are actually not in unicode) It’ll be great if someone work on this too.

PS i blogged about your work here http://xahlee.blogspot.com/2010/11/css-hack-multiple-background-and.html

This is awesome man. Totally appreciate it. Very cool.

Thank you very much, for this idea!
After some research on, how you did it, I tried to create a creativecommons icon, in opposite to the often used ©.

It’s working with a single HTML-Element preferably an a-tag with rel=”license”.
Have a look at it and I’ll be happy about your feedback.
http://www.pixelfans.de/creativecommons-icon-mit-css/

This is very, VERY cool! I can see a ton of uses for this and will be looking at doing some testing to see how well different browsers handle the CSS.

Can’t believe it, this is pure CSS! Realy good job, Nicolas!

I wish fonts include a set of these standards icons. Lighter than images, neat on the screen, less code.
Is this question on the table of font-forges?

Lots of them look okay in IE8 too

This is really amazing! Thank you for sharing this CSS and HTML – I look forward to trying the various ‘icons’.

I think you did a great work here, and I wanted to post something about it on my blog. Just to let you know…

http://thewebthought.blogspot.com/2011/06/css-pure-css-gui-icons.html

They look great and good job with the semantics. Couple of questions if you don’t mind.

What is the overhead on the browser with all the after and before pseudo-selectors as well as the content property? The browser is creating these in the DOM, or somewhere, so I imagine the more complex they are, and the more you use on a page, the more processing, memory etc. is required? Be good to benchmark them.

How do you build them? Are you writing CSS, refreshing and then tweaking 100 times for each icon? You must have got better and faster with each one but for the rest of us it seems like a time consuming method of building icons?

Really really awesome idea. Love the execution too, very nice and clean. Cheers

This is the most incredible thing I’ve ever seen! I can’t wait to use them in projects!

@Romain: I did a quick test of making a image sprite – not fully optimized – and was able to come up with an image sprite of 2.25K.
The full css is 34KB compressed (non gziped).

While yes – this is neat, I don’t think it ends up being lighter weight in the terms of file size.

It is over seven months after publication, more than 1000 retweets, but it looks like this post is becoming more instructive and stimulating, especially after launches of Firefox 4, 5 and IE 9, 10. What it is a great job :)!

Great work! Simply brilliant!
PS: It also has IE9+ support :)

You really *are* the master of pseudo-classes!
This is so awesome and inspiring (the fact that the markup is semantic is really the icing on the cake!), I’ll be sure to link to this when I create a few tutorials on CSS3 rotations in the near future!

Nicolas, you mention there are “limitations” preventing you from recommending the use these icons in a production system. What limitations come to mind exactly (assuming we only support IE8+)?