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>