Most of the sidebar icons come from our stock set (along with a few from other sources). The icons look a bit squashed because they’re using the 32 pixel icons from the free set and scaling them to 16 pixels (Note: our pro toolbar icon set includes meticulously sized 16 pixel versions of these icons).

It’s great to see the icons being put to good use in the wild. Browser interfaces will doubtless evolve quickly over the coming years and we’re proud to be (even tangentially) involved in the discussion of where they should go. A few more threads in the conversation can be found at:

• Aza Raskin’s post on moving Firefox tabs to the sidebar (Aza is head of User Experience for Mozilla Labs)
• Frederic Lardinois’ article on a tabless Firefox with built-in Ubiquity at ReadWriteWeb

Oh, and Mozilla—if you’re looking for some new icon designs, we’re available to hire :-)

Download the Icons

or check out the demo page

Users need a hint

We could provide text instructions on the page, explaining which objects are draggable and what to do with them, but we all know that people don’t read on the web; they scan. So, let’s give visitors a visual cue to help them quickly identify draggable components.

The icons

I’ve created a draggable icon to help address the problem. Actually, there are two icons: one for use on light backgrounds and another for dark backgrounds. The icons are 16 × 16 pixel PNG images with alpha transparency. Here’s the quick preview:

You can see the draggable icons in action on the demo page.

Making use of the icons

In the example, I put the icons to use as background images in the headers of my draggable boxes. Here is the HTML:

<div class="draggable dark">
<h3 class="title">Dark background</h3>
</div>


In the CSS, .draggable h3 gets the background image and is assigned a 24 pixel left padding. Its line height is also set to 24 pixels and the icon is positioned 4 pixels from the top of it’s containing h3 tag in order to keep everything vertically aligned. Here is that bit of CSS:

.dark h3.title {
background: #36c url(../images/icon_draggable_dark.png) no-repeat 2px 4px;
color: #fff;
font-size: 12px;
font-weight: bold;
line-height: 24px;
margin: 0;
padding-left: 24px;
}


Note: line-height and padding-left should be set to at least 16 pixels each in order to display the full icon.

Also note that the draggable boxes have been assigned cursor: pointer in their CSS styles in order to display the pointing hand cursor when a user hovers over them. The cursor style has now been changed to “move”. This is the better option and one I had previously overlooked. This helps to indicate that the draggable box is an actionable object. Without this style, the default cursor in our example would have been the text selector, which is less suited to the functionality we are trying to emphasize.

License

The jQuery UI draggable icons are free and licensed under both the GPL and MIT licenses—the same licensing used for the jQuery JavaScript library itself. Basically, you can put the icons to any use you wish, whether personal or commercial, and you won’t have to jump through any special hoops in order to do so.

Download the Icons

or check out the demo page