Icon sizes [#261078]

Icons come in many different sizes, and I'm thinking icon packs should also support that. One theme might want to use 16x16 icons, while another looks better with 32x32.

Which icon sizes should an icon pack support? 16x16, 22x22, 32x32, 48x48? How about 12 or 10px (e.g. for smaller action icons)?
How should different sizes be provided? Desktop icon sets usually have folders for each icon size within the icon set's folder.
Themes could specify a preferred icon size, which the user could also override (on the icon settings page for the theme).
What to do if an icon is not available in the preferred icon size?

Comments

Comment #1

erofadd commented 21 May 2008 at 13:38

Yeah, I would like to comment on the last question. If an icon is not available in the preferred icon size, What I experienced in my first time with drupal was this same problem but I used a graphics editor such as gimp or photoshop and change the image size to your preferred size

To be able to do this you must import the image file into your graphics editor and then go to the image button to resize the icon size.

Please remember to save the resized image with the same name of the old file as *.ICO and then copy to replace the old one.

Thanks

Comment #2

ximo commented 21 May 2008 at 13:44

And of course, themes and modules may want to use tiny icons some places (action icons) and larger ones elsewhere (headers, status messages, etc.).

theme('icon', 'nav-next', 12); // 12x12px "next" icon
theme('icon', 'status-warning', 48); // 48x48px "warning" icon

Comment #3

ximo commented 21 May 2008 at 13:55

erofadd:
Thanks for the comment! We could require a large-sized original icon image file (eg 128x128 px), and automatically scale it down to a smaller size if one isn't already provided. But the quality of the scaled-down icon wouldn't be that good, especially below 32x32 px. So ideally, we might want to require icon packs to provide icons in 12x12, 16x16, 22x22, 32x32 as a minimum..

Comment #4

yoroy commented 23 May 2008 at 21:06

Agreed on 12x12, 16x16, 22x22 and 32x32 as a minimum. For the high-res version of the icon I would recommend 512x512px. The point is kind of mute of course since the design should be done in a vector illustration app, but I found out that in the Windows OS 256x256px is used and 512x512px in Mac OS X.

512x512px might seem large, but it's actually a nice size to design at when viewed @100% in Illustrator or Inkscape. Also, a 512px version makes it possible to re-use (crops of) the icons as an illustration. For blog posts or in marketing materials, etc.

As for dir. structure, I'm also for following the directory structure as used for these icon packs for Gnome: http://art.gnome.org/themes/icon/

iconpack
  /12x12
  /16x16
  /32x32
  …etc
  /src (contains the design master vector files, don't know if those must/should be included in a distribution but this is where the design files should live)

I even like the 11 standard contexts that are defined in the spec

Actions : Icons which are generally used in menus and dialogs for interacting with the user.
Emblems : Icons for tags and properties of files, that are displayed in the file manager. This context contains emblems for such things as “read-only” or “photos”.
MimeTypes : Icons for different types of data, such as audio or image files.
Categories : Icons for basic Drupal concepts and icons that group functionality.
Applications (Modules?) : Icons that describe what an application is.
Emotes :-)
International : Icons for international denominations such as flags.
Places : Icons used to represent locations
Status : Icons for presenting status to the user.
Animations : to indicate background processes.
Devices : Icons for hardware

I'm structuring my design sources along these contexts, using a directory for each of them in the 'src' folder.