Pure CSS Icons

Pure CSS Icons

View the icons

This post will take 1 minute to read.

As you may already know, I’m a big fan of CSS. I have done my fair share of CSS experiments, and I have learnt an incredible amount by doing so. One of the most important things I have learnt is this: it’s not okay to use non-semantic markup for styling. Style is not content, and they are kept separate for a reason. I have seen many experiments in which entire images are made only using HTML and CSS, and I have to ask why? While it is often challenging to complete such experiments, aren’t they teaching others that it is okay to use markup for styling purposes?

With my latest experiment, pure CSS icons, I had two strict guidelines in place:

  1. No extra markup just for styling
  2. No need for a solid background colour for the icons to work

This made it incredibly difficult to produce high calibre icons, especially as I was working with a single anchor element for each icon. However, it was quite the accomplishment when I was able to do so. The most difficult aspects were creating the triangular shapes (due to my use of borders), and producing certain icons without using a solid background colour.

Pure CSS Icons

This experiment, as always, was a lesson. Firstly, pseudo-elements are incredibly powerful, and secondly, if you are using non-semantic markup, then you are probably doing it wrong. My advice to you would be that next time you are undertaking a challenging CSS experiment, introduce some limiting guidelines, you might be surprised with the result.

Note

These icons are just an experiment; they degrade terribly in older browsers. Feel free to poke around the source code, play with, replicate, and learn from them, but I wouldn’t recommend using them on a website. If you want to fork the code on GitHub, you can do so here.

Tweet this

9 Comments

  1. Justin

    I think they are great. It’s definitely more lightweight than a whole icon font, but the degradation is a problem. You could always feature test with modernizr and only display them with modern browsers. Then if the feature test fails, degrade to a ACSII character or something.

  2. Joshua Hibbert

    I think that would make a lot of sense Justin. That’s how I would do it if I was implementing these icons. Thanks for your feedback!

  3. Gene Locklin

    Very nice, Josh. I dig the overlap in the heart. That’s a great little detail. 

    Here they are as Sass mixins. Altering the colors should be much easier now. 

  4. Joshua Hibbert

    Thanks for linking to those Nicolas, you have done a great job with them.

    I was exercising a little more constraint with my icons; they all use a single element so that they don’t need to be wrapped in a list item or a span to work. Also, I noticed that there are couple of your icons (e.g. file, tools, and pie chart) that won’t work without a solid background colour. One my main goals when creating these icons was to create a set that wouldn’t require background color hacks to work.

  5. Justin

    I agree Josh. If we are to use CSS icons, as you have done, in production work in the future, we have to stay way from unnecessary markup that dilutes the separation of presentation and structure. If we have to use hacks and extra markup (as you mentioned), then svg or icon fonts will continue to be superior.

    Keep it up, Josh. You’ve done some really good work here.