Sanscons

UPDATE: Sanscons now comes in four more sizes with the release of Sanscons+.

Introduction

Sanscons is a small spinoff of the Bitcons icon set that allows for CSS-based coloring and framing. The icon design is exactly the same, the only thing missing is a background - allowing you to set it to any color you so desire. The inspriation behind making a CSS-centric icon set came from Chameleon made by Dan Cederholm.

Example

Click on the colors below to change the color of all the icons:

orange
yellow
green
blue
purple
pink

Click on the shapes below to change the shape of all the icons:

Download

Download Sanscons

Promote Sanscons (please)

Post to del.icio.us

How It Works

As you probably know, this technique isn’t new at all. There was a very good article about two and a half years ago on this very method. Nonetheless, I have yet to see icons like these propagate on websites. The premise is very simple — use transparent gif icons and take advantage of CSS to style them in whatever way you choose.

You start with your average img tag with a "icon" class assigned to it.



   <img class="icon" src="/i/icon.gif" alt=&quoticon&quot />

Within the CSS, we set the background color and the framing background image (i.e. rounded corners). I keep the framing separate because I feel it adds a level of flexibility to the icon. Rounded corners may be perfect for some designs, but not others. My goal was to try to set the icon in the most generic state and the use CSS to fill in the blanks.



   .icon {

      background-color:#f00;

      background-image: url(/i/rounded_bg.gif);

      background-repeat: no-repeat;

   }

I’ve kept all the background styles separate in case I would want an exception. For instance, it the majority of my icons are red with rounded corners but in some instances, I would want a blue icon with rounded corners, I would just apply another class to that image to override the background color.



   .blue{

      background-color:#00f;

   }

The big advantage with this technique is that the file size for each icon is next to nothing. It also allows much greater flexibility for you as the designer if you should someday decide to change the color scheme of your site. Obviously, there are many ways to use CSS to achieve the same ends. This icon set will let you do just that.

UPDATE: As you may know by now, this icon set has changed names.