: Sam Morris > Tutorials > CSS Tutorials > CSS Sprites Tutorial

CSS Sprites Tutorial

Bookmark and Share

This tutorial will show you how to use a sprite for a set of icons. Sprites are generally preferred rather than using separate image files since less HTTP requests are made. In addition, from a graphic design standpoint I personally find it much easier to manage a set of icons when they are all placed within one Photoshop file. It makes it much easier to grab a part of an icon and use it for another, or match colors for multiple icons. To complete this tutorial you’ll need to have some basic HTML/CSS knowledge and optionally a copy of Photoshop.

CSS with Sprites

The CSS code for sprites is generally broken into 2 parts. The first part of the CSS code sets the basic styling for all of my icon spans. This is where the background is set to the sprite image, but by default backgrounds will be aligned to the top left. Part 2 of the CSS code sets the background-position of each icon span. The first value (X) of background-position is going to be 0 in this tutorial, since the icons in the sprite are flush with the left edge of CSS_Sprites_Icon_Tutorial.png. Alternatively, if  the sprite file used 2 columns of icons, then I would need to set X to move the backgrounds selection to the right. The second value of background-position is the vertical value (Y), which will change based on which icon we want display. Keep in mind the values will always be negative for the Y value, since the top left is 0. As we get each background section we’ll be moving down (further into negative values).


  1. As mentioned above, the first part of the CSS for the sprite will be setting the general styling for all of the icons. div.icons is going to be used as a container for the icons. By not giving the span an ID or class we’re saying ANY span within div.icons will have the style defined below. If possible, you should always use a container since it enables you to easily define styling for all icons at once. Alternatively if my icons were not going to be placed within a container I would need to define each icon span. EX: span.icon1, span.icon2, span.icon3 {/* styling for all icons here */}. Add the following code to your stylesheet or between your <style> </style> tags. Refer to CSS_Sprites_Icon_Tutorial.html if needed.
    /* RESET */
    /* START ICON CSS */
    /* This is where we set the general styling for all icons. */
    .icons span
    font:11px Arial, Helvetica, sans-serif;
    line-height: 16px;
    color: #666;
    background: url(Icon_Sprite.png) no-repeat;
    width: 100px;
    height: 16px;
    margin: 2px 0 4px 5px;
    padding: 0 0 0 22px;
    display: block;
    float: left;
    If you set float to left the icons will display horizontally instead of vertically.
  2. Now we’ll setup the HTML code needed to display the icons. Add the following code to the body of your HTML document.
    <!– START ICONS –>
    <div class="icons">
    <span class="one">Icon One</span>
    <span class="two">Icon Two</span>
    <span class="three">Icon Three</span>
    <span class="four">Icon Four</span>
    <span class="five">Icon Five</span>
    <!– END ICONS –>
  3. At this point you should have the CSS code from step 1 added to your document (unless you’re using an external stylesheet), and the HTML code from step 1 in the <body>. Next make sure that the CSS_Sprites_Icon_Tutorial.png is saved in the same place as your HTML file. Then have a look at the results and you should see 5 icons with text to the right of each icon. If not, refer to CSS_Sprites_Icon_Tutorial.html and compare it with your own code.
  4. Everything is setup at this point and the last step is going to be defining the background-position for each of the spans that will be using the icon sprite. The background image will be inherited from div.icons span, so we don’t need to define the background a second time. Add the following CSS code to your HTML document under where we placed the CSS code from step 1.
    /* This is where we set the icon image for each icon by specifying what area of the sprite to display.
    All other properties will be inherited from above so we can easily change the styling for all icons at once.*/
    background-position: 0 0;
    background-position: 0 -16px;
    background-position: 0 -32px;
    background-position: 0 -48px;
    background-position: 0 -64px;
    /* END ICON CSS */

When I was originally writing this tutorial, I found it somewhat hypocritical writing about how beneficial sprites can be for a website while using very few on this site. I created a sprite for my own site consisting of various images that are reused throughout my site. Have a look… sprite.png . It ultimately shaved off around 12-15 requests per page, which I’ve found has made a significant improvement in loading time for my website. If you don’t already have it installed, you should grab FireBug and more specifically YSlow which can help you benchmark your site and measure loading time.

Lastly, if you’re looking for an icon set to use on your own site check out Silk Icons at This is definitely one of my favorite icon sets, and is by far the most complete set I’ve come across (and it’s FREE).

CSS Tutorials