Magic Icons for Lazy People (like me)

A neat little trick for those that want to change a site’s colors — but also create only one set of images that also reflects those changes. It’s been done on numerous sites, and I’ve employed the method on Fast Company with the redesign done back in April.

The idea is pretty darn simple, and works best with two-color images. Create a two-color .gif image and choose one of the colors to be transparent. Next, we’ll “fill in” the missing color with CSS using background. Change the CSS rule and the images will change with it. Very simple — but effective, and a heck of a lot simpler than creating multiple sets of icons.

Here’s an example (using inline styles to demonstrate). Below is a small little icon (13px x 13px) that is white and transparent. I’ll fill in the transparency with a few different colors using the same icon image, repeated:

*
*
*
*

On Fast Company I place icons within h3 headings and style them like this:


h3 img {
background: #369;
vertical-align: middle;
}

It’s important to note that because I’m using white as the visable color, the icons will be invisible on the un-styled version of the page. This could an unintended benefit. Keeping decorative images entirely in the CSS file using background-image is arguably a more ideal solution — but the chameleon effect you can create with one set of transparent images is a nice little trick.

12 Comments

  1. Jon-Paul LeClair says:

    Couldn’t you add the icon as a background image and adjust the left padding accordingly?
    this removes the img tag from your markup.
    that’s the way I do it…

  2. Allen Ormond says:

    I used this same idea to color my smilies at my site. I described the process here.
    I’ve been thinking that another cool idea would be to use this for structural elements of the page design… such as the logo or any menu graphics that might exist. With png transparency you could get some pretty cool results.

  3. leonard says:

    keep up the good job Dan! Really neat and nice codes you’ve got!

  4. Bruce says:

    This is a very useful technique. It’s especially useful for nav rollovers which have text in an obscure font so need to be images, but are simple enough for GIF.

  5. saumendra says:

    Good articles to read on. Nice Practicle tips which can be mastered to make huge diffrence.

  6. Will says:

    I like Jon-Paul’s suggestion. I already use transparent GIFs as icons for certain “utility” links (i.e. e-mail, comments), so I’m going to implement something similar to his idea. I’ll apply a class to the anchor tag and then use CSS to add left-hand padding and the appropriate icon as a background image. The image will simply go away when content is unstyled. If (when) we get native browser PNG support and alpha transparencies this tip will be even more powerful. Thanks Dan!

  7. Kevin says:

    This is great. Thanks for the tip. I’m going to implement this for rounded corners on my boxes so that I can switch box colors more easily. Thanks!

  8. test says:

    hello world

  9. Thanks for the great tutorial! I will try to implement this in the left menu over at Favlets.com

  10. Big Si says:

    This could be useful with Flash transparency too. Although it isn’t fully supported, I’ve used <param name=”wmode” value=”transparent” /> before and that could create some interesting results while modifying the page background through CSS.

  11. Lucky says:

    I think that is cool idea. I’m from Czech Republic but this pages are very perfectly. I congratulations to you. Bye

  12. Carlos says:

    That is very nice
    Allen, i can’t see your example :(
    the url is broke