Icon

Use an icon to represent objects that the user can place in a container.

Do not use an icon to represent a function. Place function choices on menus and in push buttons or tools.

Use large icons only for window icons.

Define an icon to consist of an image and an optional textual label as follows:

Ensure that the image has a border that prevents the image and the background from merging.

Use a readily identifiable shape or outline for the icon. This helps to improve user recognition and reduce a user's dependence on other identifiers such as the label or color. For example, an icon of a printer clearly identifies its purpose; the label can be reduced to a brief identifier for the specific printer.

Design an icon so that it shows the important states associated with the object it represents. Such states might include:

Design an icon so that it shows the important characteristics associated with the object it represents. Such characteristics might include:

If you show shadows on objects to add depth to the image, assume the light source is from the front top-left and place the shadows to the right, below and behind the object.

When several elements or objects are used together within one icon image, visually unite them. For example, overlap the elements to present a more visually unified whole.

If your application will be presented in more than one language, avoid using words, body parts, or figures that involve signing with hands or fingers in the icons.

Limit the detail in a small icon to avoid a cluttered appearance. For example, do not display a count of the number of objects in the container.

Do not use an algorithmically reduced copy of the original icon as a small icon. Instead, use a separate graphic to display a small icon that shows fewer characteristics so that the characteristics can be more easily distinguished.

Use a small icon to represent the general type of an object when space is limited.

Allow a user to customize the image of an icon that represents an object. For example, allow a user to change the icon to make it more meaningful, recognizable, or personal.

Use colors in an icon to enhance user recognition and to intentionally link or group related elements. To avoid a busy, cluttered screen and to reduce the chance of unintentionally indicating a relationship between objects, do not overuse different colors.

If you use colors in icons, also provide a separate set of icons that can be used on gray scale or monochrome displays.

If an icon represents a named object, label the icon with the name of the object.

If direct editing can be used to change the textual label of an icon, include a Properties choice in the icon's pop-up menu, and include a text-entry field in the properties window through which the label can be changed.

Support direct editing to allow mouse users to change the textual label of an icon.

Visually separate the textual label from the icon image.

When the icon has focus, expand the width of the label to display the entire text. For example, when the icon for the "1999 Financial Goals" document has focus, display the entire document name as the icon label.