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>
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
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
: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:
Background(both as gradients and as a solid colour)
Border(the seldom used border styles such as
doublewere also useful)
Box-shadow(sometimes used as a second border)
Content(it felt like cheating, but the Microsoft Word icon required
Font-weight(where I've used
contentto add an ASCII character)
Outline(sometimes used as a second border)
There's comments in the CSS, for some of the more complicated techniques.
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).
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.
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
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
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?
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?
The markup used to add an icon to the page is smaller than that for a