Done uploaded as icons-20may-2010.png.
I've left the last row untouched as some icons oversize the 16x16px grid.

I will try re-create from current images. I'll create demo test set.

I read that you are making the icons a little bigger. That is great news! However, please consider the request to have at least 2 size options for all icons. One should be the standard size and the other should be at least 2X the standard size.

I took a stab at some vector icons. I posted a link to the Illustrator file and three sample renderings at 12, 16, and 20 pixels. Note that the sizes don't exactly match the reference set as I've tried to maximize each icon in its frame. Also, I've only spent a bit of time aligning the icons on the 16px frame (which is where I originally composed them) so some on the 12 and 20 are a bit blurry/mis-aligned. This won't be an issue at larger sizes like 32px but it's a bit of fun down here. We might eventually need 3-4 different vector sets for many icons (whether in layers or separate files) or a sophisticated hinting system. This will depend on the number of small sizes (<24px) we decide to cover and whether a single file will contain both small and large icons (as the current icons do).

If you want to use the Illustrator file, note that there are multiple template layers for grid alignment and two layers for icons. One layer contains icons that are pre-aligned to the pixel grid. Typically these are icons that contain edges that align with pixel lines (as opposed to strokes on pixel lines whose edges don't align). Another layer contains all icons that need to be shifted .5px in each direction before rendering to pixels. This shift should be done ( .5px up and .5px left) as a final step before rendering, never saved in the file.

I don't know if there's an easier way to render to other pixel sizes, but for the 12 and 20 pixel versions, I copied the file and scaled the artboard and contents of all layers by 75% and 125% respectively. I saved as PNG-8. It'll be interesting to see how well these work in ThemeRoller and IE.

Thanks guys for your hard work with the new icons and on making bigger icons sets. It looks wonderful and I really can't wait to use them.

I don't know if the following icons would be used often enough to justify having them included in your sets, but I thought I might list them anyhow, just in case:
- (2x) Sort (see http://openoffice.blogs.com/photos/uncategorized/2007/09/16/sort3icon.gif)
- (1x) Filter (see http://www.katmandoo.org/Help/Reference/Common/Image/ApplyFilter.jpg)
- (3x) Minimize/Restore/Maximize window (though minus-thick looks quite close to minimize, and newwin to restore)
- (1x) Pad (see http://www.seton.net/locations/img/hand_icon.gif)
- (2x) Fit width (see http://help.adobe.com/en_US/livecycle/9.0/designerHelp/images/button_zoom_fit_width.gif) / Fit page (see http://help.adobe.com/en_US/livecycle/9.0/designerHelp/images/button_zoom_fit.gif)
- (1x) Find (see http://help.adobe.com/en_US/livecycle/9.0/designerHelp/images/button_find.gif)
- (1x) Properties (see http://udn.epicgames.com/Two/rsrc/Two/TextureBrowserReference/properties.gif)

just wondering how animated icons are going to be handled. Granted at the moment theres only one (loading icon for autocomplete) not sure if it can be added as part of this sprite layout (never tried it). But seems a bit lonely out on its own and overlooked (who forgot it in the themeroller? :P). Also as part of the main sprite set maybe some icons to support a editor (and other uses) in the future so copy/paste/indent/ and maybe a simple set of emoticons?

A cool experiment for using vector icons:
http://raphaeljs.com/icons/

Vector icons are absolutely awesome! One vote for new "filter" and "view" icon (the last 2) http://uicoded.com/download/ui-icons_000000_256x256.png

Hi,

Is this still being worked on? If so, it would be good to have login and logout icons.

Also, are there source images (vector or otherwise) checked in somewhere? I am looking at integrating theme configuration right into an app (without the need to download images/styles) and I can't find sources for the images used in themeroller (backgrounds in particular).

-Chris

Howdy, I took what was there, and added in the rest as vector, and put up a demo page using canvas to generate the icon images. I added a last example using a gradient fill, and a subtle inset-emboss effect.
Take a look here: http://www.tnghardware.com/sandbox/jQueryIconTests/jqIconTests.html

Is there an existing css doc spelling out the names for the new icons? I plan on adding the css output for Theme Roller over-rides.
Any and all feedback is greatly appreciated.
Thanks!
-Ted

Thanks gents! I created a page with a table of images and suggested class names:
http://www.tnghardware.com/sandbox/jQueryIconTests/nameTable.html
The text in red indicates a new icon. There was one that I really had no idea what it was for-- #250 in the table.
I didn't include the bottom row of radio/check box skins yet--no reason other than I haven't written the javascript to handle the positions of those.

Might I suggest a "new record" icon of the type: right triangle+asterisk?
Something like this: http://www.cultures.org/New%20Record%20button.jpg
While the seek icons (first, prev, next, end) are usually useful for multimedia purposes, they are also useful in designing navigation such as navigating between records in a database. And in this case it is useful to have a "new record" icon alongside the navigation icons. And I think that the most visually recognizable is the right triangle+asterisk.
I have tried simply adding a text asterisk next to the right arrow icon ("ui-icon-triangle-1-e") in a jquery-ui button, but since the other buttons don't have text in them this tends to mess up how they're lined up. Buttons with text don't have the same position as buttons with just icons no text.
I think it would be useful to have a dedicated icon for "new record".

Hey all,
Jörn told me I should post a link to my webfont dingbat/unicode experiments: http://test.learningjquery.com/unicode/. Accessibility is the main concern right now. The good news is that VoiceOver and NVDA don't read content generated with :before and :after, so you can create a very reduced set of characters and map them to alphanumeric keys. The bad news si that some browsers don't support :before and :after, so there would still need to be a fallback, possibly with images.

Anyway, it's all very experimental at this point, so take it all with a grain of salt.

251 .ui-icon-star-full is the same as 123 .ui-icon-star.
Also, could use a pivot icon, as in pivoting a table.

Here's a really nice reference set of icons in various formats and sizes and colors: http://somerandomdude.com/work/iconic/ CC-BY license

Ok, this is awesome: http://fortaweso.me/font-awesome/

When these new icons get added, I'll be heppy! We could do with some new icons.

One request though - could we add a "thumbs up" and a "thumbs down" icon into the set?

http://bugs.jqueryui.com/ticket/4270 requests rotate right and rotate left

http://bugs.jqueryui.com/ticket/9537 requests a share icon.

What's the status of getting these new icons into a jQuery UI release?

I would like to see a hamburger icon (like this https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png ) added to the main jQuery UI icon set. I believe it already exists in jQuery Mobile, but I'd like it to be available in the standard web icons as well.

Hello, how exactly do you use the larger icons? I don't see them anywhere under theme roller. Are there any examples of how to make use of them for buttons?