Fugue Icon Set and Fugue Sprite CSS Framework

Nov

2009

Fugue is a free icon set created by Yusuke Kamiyamane–free for personal and commercial projects.

Let’s look at Fugue and how you can quickly add icons from the set to your site via the Fugue CSS Sprite Framework.

Fugue – A Huge Icon Set

This icon set currently has over 2000 16×16 pixel icons (in PNG format and PSD) and more are constantly being added. With this many icons, there’s usually at least 1 or 2 suitable icons for whatever you’re wanting to represent. Each icon is available with or without a shadow.

This set would be great for any web app–it contains many interface and UI icons among others. For example, I used Fugue for my OpenX Admin Icon Set v2.0.

Customize Fugue Icons With the Devkit

Yusuke has also graciously included Photoshop files (PSD’s) for every icon in the set; letting you tweak and combine icons if what’s there is not exactly what you want.

License

Fugue is available under a Creative Commons Attribution 3.0 license.

If you prefer not to provide attribution (or can’t), you can also buy a royalty-free license for $49.

Fugue Sprite CSS Framework

If you’re planning on using several icons from Fugue on your website, you might consider using Fugue Sprite CSS from Alison at AlisoTheGeek.com.

The Fugue Sprite CSS framework works on the same principle as any other CSS sprite technique–only easier and faster. Way easier, because you don’t have to do anything by hand.

How To Use It

To use it, just place the single sprite image in the same directory as the Sprite CSS file. To display an icon, use the icon key that’s provided, find the name of the icon, and use that name as the class for your styled element.

Example: You want to display the leaf icon. Find the leaf icon in the list of icons in the key and copy the name of it (fugue-leaf). Include it in your CSS by adding a ‘.‘ in front of the icon name (.fugue-leaf). Fugue Sprite CSS takes care of the rest.

Considerations

Since the sprite framework contains all the icons from the Fugue set, the framework’s a bit large (684 KB total). But if you’re planning on using quite a few icons from the Fugue set, it’d be worth it.