CSS icons

All of the icons below are made out of CSS shapes. This means they're not based on images, SVGs or typefaces. They can be included together, or individually, in a CSS stylesheet and they just work. This was partially inspired by The Shapes of CSS on the excellent CSS Tricks.

There's a more technical description, after the icons.

Adjust font size: Download all the icons, in one CSS file

Markup (hover over an icon to view)

Up Go Down Back Up Go Down Back Up Next Down Previous Up Next Down Previous * * Show detail Hide detail Show detail Hide detail Remove Remove Yes Yes Rating Search Trash Home Recycle Edit Favourite Club Diamond Spades Time Download Upload Map Comment Print Arrivals Departures Error Telephone Cloud Film Security Headphones Gaming User User User User Toilet Text document PDF Microsoft Word Microsoft Excel Microsoft Powerpoint Twitter Facebook Facebook Chrome Play Pause Microsoft Windows Apple

Technical description

Markup

Each icon is created from one HTML element, for example:

<i class="shape sh-gaming"></i>

Because sometimes icons are used without text labels, I recommend adding some screen-reader only text inside:

<i class="shape sh-gaming"><b class="sr-only">Gaming</b></i>

The tags i and b are used as they are semantically meaningless and use less characters than span. The icons should work with any tag, but have been designed with inline tags in mind.

Sizing the icons

While the icons are vector, they render much better if the final sizing is done in pixels. Every value within the CSS of each icon is in ems but there can be some cross-browser inaccuracies, if they are placed on the page and sized in ems.

The icons are built to a 16 unit grid. If added to a page with a font-size of 1px, they will be sixteen pixels square.

How the icons were made

Because a single HTML tag is used, the only elements we have to manipulate is the parent tag itself, and the :before and :after pseudo elements. Use of CSS gradients allow us to add what appears to be additional tags, but note that these shapes will not appear in print (backgrounds are hidden during print in all modern browsers).

Each shape is made using the following CSS properties:

There's comments in the CSS, for some of the more complicated techniques.

Limitations

Transparency

While the icons appear to be only one colour, several of them require a solid background colour, which matches colours in the icons themselves. For example, the keyhole in the security icon: is a solid white colour on top of the grey colour, rather than a hole through which you can see the background.

Icon fonts, SVGs and CSS sprites do not have this limitation.

Changing the colour of the icons

Because the colour of the icon can come from the border, the background or the outline, changing the colour a specific instance of an icon can be tricky. To recolour the whole set of icons, perform a find for #666 and replace it with your own colour (note that there is one exception to this: a bug in Chrome means that .sh-user3 uses rgba(0,0,0,.6) instead of #666).

Printing

The icons do not print well as many of them rely on background colour to work. Inline SVG, inline images and icon fonts do not share this limitation.

Browser support

The use of transform means that IE8 does not support all of the icons (it will support some, however).

The use of CSS gradients means that IE9 does not support all of the detail in some icons.

What's up with the PDF icon?

PDF Yeah, sorry about that. Because each of the three curves is one quarter of a different circle (or rather a box where the border-radius matches it's height), that particular icon takes up a lot more space than it looks like it does. Those invisible circles might get in the way of links placed adjacent to the icon. If it's a problem, you might want to look into pointer-events.

Your Chrome logo is missing a bit / your Apple / Twitter icon looks rubbish

Chrome Apple Twitter Fair point. But I've only three elements to play with here. Hopefully, if you include the icons at a small enough size, no-one will notice.

What's up with .sh-user2?

Not really sure. Perhaps he's an alien? User

Why not just use CSS sprites / SVGs / icon typefaces / the extended ASCII character set?

You make a good point. All of these techniques are valid.

Jeepers! You make them sound rubbish! What are they good at?

Third-party libraries

CSS icons would be really useful to drop into some kinds of JavaScript libraries - for example carousels, modal popups or accordions. Because they have no external dependencies, users can copy the CSS, and the images will just show up. They never need to worry about image paths.

Animation

Developers can use transition: .2s ease-in; (for example), to tween between two CSS icons, or to add animation to one particular icon. The Play and Pause icons are built with this in mind - they should smoothly animate from one to the other, like they do in a YouTube video.

Keeping down HTTP requests

You already have a stylesheet, right? And you need to add an icon to your site quickly. Why add another HTTP request?

Tiny markup

The markup used to add an icon to the page is smaller than that for a img tag.