I understand there are tools on the net to make a sprite, but I'd like to learn how to create icons for the different states of the icon. Is there an easy way to make all these different variations of this icon:

alt text

(Also, can you tell me how I can better word my question so it doesn't sound like I'm asking for sprite advice?)

2 Answers 2


If I understand your question, and you already know that a sprite is really just an image-combining-image, then the last part you need to know is about the CSS.

The CSS is what associates a portion of your image with a state. You create the html representing the button, assign it a class, then you write up your CSS.

    background:url('my-button-sprite.gif') top left no-repeat;
.my-button:hover{background-position: 20px 0px;}

Just add an appropriate horizontal offset (the first number) to bump the sprite where it should appear for the desired state.

  • Virtuosi Media is right, sprites can be used for more than just button states. One one of my sites I have a sprite that combines all of my buttons, bullets, icons AND horizontal repeat images. My CSS is pretty clean, assigning the background to 30+ elements at once, then only adjusting the offsets for each. This dramatically cut down the number of requests and page load time. Commented Sep 3, 2010 at 21:35

Hover images aren't the only use for a CSS sprite, you can also use a sprite for static images or different icon states. You would create a single image pretty much like you have given as an example and use different CSS background coordinates for each icon state. The trick is just getting the background coordinates right.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.