CSS Icon Sprite System

At work, we make a lot of web apps. These are usually very data driven, so lots of tables and forms. To help identify actions on each page we use a number of icons for easy recognition.

We use icons in a few distinct ways. As a stand alone icon with no text and as an icon with text. The icon with text could be on it’s own, or floated left or right with other icons with text as potential actions.

As often happens in teams where many people are touching the CSS, we don’t know what all other team members have added to the site. I would find several declaration of the same icon, sometimes with the same styling but with different names such as “add-property” and then again as “add-agreement”.

So I set out to make a more efficient system for using our icons. I think this may have been around the time I first saw Nicole Sullivans Object Oriented CSS talk so I was inspired to make things a little more… object oriented (reusable chunks not tied to any given structure).

This is what I came up with.

How it works

First, lets make the element we want to act on semantically correct. Use the appropriate element (anchor, span, etc) and insert the appropriate text.

<a href="#d">Delete property</a>

Delete property

To make the site a bit more performant I wanted this system to use CSS sprites. So I combined the most commonly used icons into a diagonal sprite. Adding the class of “sprite” loads the sprite image into the layer. Since we are using a diagonal sprite that is positioned to 0,0 by default, it would show nothing. Or more specifically, the empty white space in the top left corner.

<a href="#d" class="sprite">Delete property</a>

Delete property

Not much of a change.

You then call the class of the icon within the sprite (code near end of article) that you want such as delete, edit, info, etc. This positions the sprite correctly to show the specific icon you want but it is still not spaced correctly.

<a href="#d" class="sprite delete">Delete property</a>

Delete property

Then you can add one of the following classes that define how the icon will be used (spacing). Each must be accompanied by the sprite class or they won’t work. They are as follows:


This will hide the text and show the icon only. The element will be set to the icon height (usually 16×16). Useful for a delete/edit/etc column in a table. The text is hidden, but still there for accessibility and potentially SEO if public.

<a href="#d" class="sprite delete icon">Delete property</a>

Delete property


This will add padding to the left side of the element to make room for the icon and a little space in-between (20px total).

<a href="#d" class="sprite delete prefix">Delete property</a>

Delete property


Floats the element to the right and adds a margin-left to provide spacing between multiple floated elements.

<a href="#d" class="sprite delete prefix right">Delete property</a>

Delete property


Floats the element to the left and adds a margin-right to provide spacing between multiple floated elements.

<a href="#d" class="sprite delete prefix left">Delete property</a>

Hopefully it’s obvious how, by mixing the correct classes, you can create many more options then are specifically defined. You can easily add or change icons without having to go back to the CSS to create new combinations each time. You can just add a new “print” icon and instantly use it with the icon/prefix/etc classes. You don’t need to add print-icon, print-prefix, etc.

Here is the CSS

/* Set up the utility classes */
.sprite { background:url(/files/diagonalsprites/sprite-diagonal.png) no-repeat top left;}
.sprite.icon { height:16px; width:16px; overflow:hidden; display:inline-block; text-indent:100em; cursor:hand; cursor:pointer; }
*+html .sprite.icon { text-indent:0; width:0; padding-left:16px; } /*IE7 sucks*/
.sprite.prefix { padding-left:20px; height:20px; display:inline-block; }
.sprite.right { float:right; margin-left:15px; }
.sprite.left { float:left; margin-right:15px; }
/* Now the individual icons */
.accept { background-position: -234px -0px; }
.add { background-position: -208px -26px; }
.bomb { background-position: -182px -52px; }
.delete { background-position: -156px -78px; }
.feed { background-position: -130px -104px; }
.heart { background-position: -104px -130px; }
.lock { background-position: -78px -156px; }
.pencil { background-position: -52px -182px; }
.star { background-position: -26px -208px; }
.user { background-position: -0px -234px; }


I hope this system, or a derivative of it, can help you in your work. Several on my team have found this to be a great time saver. Once you understand the system and can remember the names of the specific icons, you can easily create many different displays for your icons without ever having to go back to the CSS. I use this almost daily at work and love the simplicity it bring to my pages.

I would love any feedback on how it can be improved and to hear of how you leverage it your own projects.

48 thoughts on “CSS Icon Sprite System”

  1. I think this is very helpful for productivity, but I can be a little against the separation of structure and design philosophy, don’t you think? what if one link with the class “icon left”, should go to the right and have no icon on a future redesign?

  2. @fs – You are correct. This system doesn’t match the CSS philosophy of all coders. For our use at work these things basically never change. An icon in a table row for editing or deleting will pretty much never change to a prefix as we want to conserve the column width. An icon for “Add new ___” at the top or bottom of the table will similarly rarely change to just an icon as we want the text for context.

    The system likely won’t work for everyone. It has worked well for us and I haven’t had a single issue with needing to change it so far. YMMV.

  3. Hello there, You’ve done a fantastic job. I’ll certainly digg it and personally suggest to my friends. I’m confident they will be benefited from this web site.

  4. Aaron! Thank you! Used this today to set up the small social icons section on a company footer I put together. You can view it here >> http://flourishtorque.com/projects/playmark/index.html

    It’ll all go live by next week. I had to tweak a few things here and there. For some reason, I had the entire link set with a thin dotted line (1px dotted white), but it would only stretch the width of the icon and not the entire link. Had to ditch it the line.

    I’m sure it’s one line of code someplace.

    Loved it, thank you. Rock on.

    BE, Seattle

    1. There isn’t really an easy way to do that because the x/y system is top/left based, and you can’t switch to a “from the right” number.

      The only way you can do it is by using a sprite that is vertically stacked (as opposed to horizontal or diagonal) and use the “right” keyword to align it to the right. But then you can’t position it very well if you wanted to adjust it by a few pixels.

  5. I’m reallpy enjlying the design andd layout οf
    уouг site. It’s a νery easy on the eyes whiϲҺ mɑkes it mսch more
    pleasant fߋr me to ϲome hегe and visit more оften. Ɗid you
    hire out а designer to сreate ƴour theme? Superb

  6. This is the right website for anybody who would like to find
    out about this topic. You know a whole lot its almost tough to argue with you (not that I actually will
    need to…HaHa). You definitely put a fresh spin on a topic that has been written about
    for years. Excellent stuff, just great!

  7. Hey! Do yyou usе Twitter? I’Ԁ loke tօ follow ƴou if thjat աould
    be օkay. І’m absolutely enjoying yoսr blog ɑnd lооk
    forward tߋ neա posts.

  8. Je ai un peu qualité blog sur ce type de sorte
    de l’espace . Exploration dans Yahoo I finalement tombés sur
    ce site de . Étudier informations i suis satisfait à Spectacle
    que Je ai une très incroyablement juste juste ce qu’il me fallait.
    I tellement sans aucun doute assurer? À fais pas oubliez
    ce site web et fournit ce un regard sur une constante base implacable.

  9. Excellent post. I used to be checking continuously this blog
    and I am inspired! Very helpful information particularly the final part :
    ) I handle such info a lot. I used to be seeking this particular information for a very lengthy time.
    Thank you and best of luck.

  10. I blog frequently and I seriously thank you for your content.
    Your article has truly peaked my interest. I am
    going to bookmark your website and keep checking for new details about
    once per week. I subscribed to your Feed too.

  11. Nice post. I ledarn something new and challenging on siotes I stumbleupon every day.
    It will always be interesting to read articles from other writers and use something from their websites.

  12. Heyy There. I djscovered your blog the usage of msn. That is
    an extremely neatly written article. I will make sure to bookmark it and
    come back tto learn more of your helpful info.

    Thank you for the post. I will certainly comeback.

  13. I’ve been surfing online more than three hours lately, yet I by no means discovered
    any interesting article like yours. It is beautiful price sufficient for me.
    In my opinion, if all web owners and bloggers made good content
    as you did, the internet can be a lot more
    helpful than ever before.

  14. hello!,I really like your writing very so much! proportion we keep in touch extra about your article on AOL?
    I require a specialist on this space to resolv my problem.
    Mayy be that’s you! Taking a look ahead to see you.

  15. I’m amazed, I have to admit. Seldom do I encounter a blog that’s bopth
    equhally educative and engaging, and let me tell you, you’ve hhit the nail on the
    head. The isssue is smething not enough men and women are speaking intelligently about.
    I am very happy I stumbled across this in my hunt for something relating to this.

  16. About The – Author: Harris – Noah is an expert
    author on pet products related topics and currently workingfor.

    This tool is a long, hollow, transparent piece of plastic branded with one-foot accretion. In fact,
    there would be plenty of surplus water to irrigate the garden or sell to other consumers.

  17. Howdy very nice blog!! Guy .. Excellent .. Wonderful ..
    I will bookmark your web site and take the feeds
    additionally? I’m happy to search out numerous helpful
    info right here within the publish, we want work out more strategies in this regard, thank you for sharing.
    . . . . .

  18. Just wish to say your article is as astonishing. The clarity in your
    post is simply spectacular and i can assume you’re an expert on this subject.
    Fine with your permission let me to grab your feed to keep updated with forthcoming post.
    Thanks a million and please continue the rewarding work.

  19. Or you may construct an epp wing laminated with copy store laminate, with motor, prop,
    servos, esc, lipo and a keychain digicam for about 60 bucks plus transmitter and just fly it your self – then while you crash it you’ve gotten lost less than $60.

  20. Many aspects go into successful SEO techniques to a lodge oor whichever other kind of trade.
    Clearly bigger projects demands bigger commodity. The reason why innovative SEO firms have received the graphic.

  21. Hi there excellent blog! Does running a blog similar to
    this take a massive amount work? I’ve no understanding of programming
    but I was hoping to start my own blog soon. Anyhow, if you have any
    recommendations or tips for new blog owners please
    share. I know this is off subject but I simply needed to ask.

  22. Have you ever considered publishing an ebook or guest authoring on other blogs?
    I have a blog centered on the same topics you discuss and would really like to have you share some stories/information. I know my viewers would value
    your work. If you are even remotely interested, feel free to send me an e-mail.

Leave a Reply

Your email address will not be published. Required fields are marked *