Pure CSS Icons

Pure CSS Icons

View the icons

As you may already know, I’m a big fan of CSS. I have done my fair share of CSS exper­i­ments, and I have learnt an incred­ible amount by doing so. One of the most import­ant things I have learnt is this: it’s not okay to use non-semantic markup for styl­ing. Style is not con­tent, and they are kept sep­ar­ate for a reason. I have seen many exper­i­ments in which entire images are made only using HTML and CSS, and I have to ask why? While it is often chal­len­ging to com­plete such exper­i­ments, aren’t they teach­ing oth­ers that it is okay to use markup for styl­ing purposes?

With my latest exper­i­ment, pure CSS icons, I had two strict guidelines in place:

  1. No extra markup just for styling
  2. No need for a solid back­ground col­our for the icons to work

This made it incred­ibly dif­fi­cult to pro­duce high cal­ibre icons, espe­cially as I was work­ing with a single anchor ele­ment for each icon. However, it was quite the accom­plish­ment when I was able to do so. The most dif­fi­cult aspects were cre­at­ing the tri­an­gu­lar shapes (due to my use of bor­ders), and pro­du­cing cer­tain icons without using a solid back­ground colour.

Pure CSS Icons

This exper­i­ment, as always, was a les­son. Firstly, pseudo-elements are incred­ibly power­ful, and secondly, if you are using non-semantic markup, then you are prob­ably doing it wrong. My advice to you would be that next time you are under­tak­ing a chal­len­ging CSS exper­i­ment, intro­duce some lim­it­ing guidelines, you might be sur­prised with the result.

Note

These icons are just an exper­i­ment; they degrade ter­ribly in older browsers. Feel free to poke around the source code, play with, rep­lic­ate, and learn from them, but I wouldn’t recom­mend using them on a web­site. If you want to fork the code on GitHub, you can do so here.

Tweet this

Comments

  1. Justin

    I think they are great. It’s def­in­itely more light­weight than a whole icon font, but the degrad­a­tion is a prob­lem. You could always fea­ture test with mod­ern­izr and only dis­play them with mod­ern browsers. Then if the fea­ture test fails, degrade to a ACSII char­ac­ter 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 imple­ment­ing these icons. Thanks for your feedback!

  3. Gene Locklin

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

    Here they are as Sass mix­ins. Altering the col­ors should be much easier now. 

  4. Joshua Hibbert

    Thanks for link­ing to those Nicolas, you have done a great job with them.

    I was exer­cising a little more con­straint with my icons; they all use a single ele­ment 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 back­ground col­our. One my main goals when cre­at­ing these icons was to cre­ate a set that wouldn’t require back­ground color hacks to work.

  5. Justin

    I agree Josh. If we are to use CSS icons, as you have done, in pro­duc­tion work in the future, we have to stay way from unne­ces­sary markup that dilutes the sep­ar­a­tion of present­a­tion and struc­ture. If we have to use hacks and extra markup (as you men­tioned), then svg or icon fonts will con­tinue to be superior.

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