Using the Silk Icon Sprite

CSS sprites can significantly improve the performance of websites and is one of the "best practices" recommendations by Yahoo's YSlow tool.

Making sprites for a series of icons can be tedious and error prone. but we've done it for you for the Silk Icon set. The Silk Icon Sprite Builder creates a single image file and associated CSS to make it simple to add Silk Icons to your web page and minimize download times for end users.

Using the Sprite

The generated CSS is designed to replace 3 common HTML elements: anchor, span and input.

Replacing Anchor Tags (Links) With Icons

When not using sprites, creating an icon link looks something like this:

<a href="/save"><img src="/images/save.gif" /></a>

But this isn't search engine friendly and it shows that annoying "missing image" placeholder while the icon is downloaded. And since the image doesn't have the width or height specified, when the image does load it might cause the entire page to shift. Using the CSS sprite solves all of these issues.

<a href="/save" class="ui-silk ui-silk-disk">Save</a>

Now the link renders as Save to search engines and as Save to your users. 

Status Icons

Adding icons to indicate status is as simple too. Just add a <span> element where the icon should be.

<span class="ui-silk ui-silk-accept"></span> Order Approved!

  Order Approved!

Form Buttons

Replacing your form's submit button is just as easy.

<form action="/search">
	<input type="text" name="query" />
	<input type="submit" value="Search" class="ui-silk ui-silk-magnifier" />
</form>

Download Entire Set

Download the entire Silk Icon set and css-sprite.

Build a Custom Set

View the discussion thread without JavaScript.

Christiaan: If you would align all images in the sprite vertically, you could use the class in an HTML button with text. Now, you can't because the button will show adjacent images also if the button is wider then 16px.
Paul Alexander: That was the original intent, however it generated PNGs taller than 4096 pixels which crashed some browsers and image processors.
Paul Alexander: That was the original intent, however it generated PNGs taller than 4096 pixels which crashed some browsers and image processors.
Joel: Awesome. Thanks dude.
: I'm sorry, how can I use gray icons? I try and doesn't it works
PKKid: Did you see how Twitter Bootstrap did the markup for icons using a sprite?  I believe this would work on buttons as well keeping the same sprite image.
lolka_bolka: Great work man! The only problem is, there are several javascript error on your download page. Select / deselect all not works. (Chrome, FF). I rewrote the pixel size to 32px, downloaded it, but it is the 16px version. Please fix it. Thank you, and keep up the good work!
lolka_bolka: Now I checked. In the css the sprites are 32x32 but the images in sprites are 16x16, I mean, there are a lot of transparent area around the icons. Does you have a bigger sprite image with 32x32 icons?