Icons and Other Graphics 

To design pictorial representations, such as icons or other graphics, begin by defining the graphic's purpose and use. How will the graphics help the users finish a task? Graphics are used to support or illustrate the user's task rather than to compete with or distract from the task.

Graphics for symbolic purposes, such as icons or toolbar images, are most effective when you use real-world metaphors. It is often difficult to design icons that define operations or processes — activities that rely on verbs. Consider nouns instead. For example, scissors can represent the action cut.

All Images

• For accessibility reasons, do not convey essential information through images alone.
• Do not use text in graphics, because it would require localization.
  Exception: If it will not need to be localized, you may use text.
• Do not use culturally specific images. What may have a certain meaning in one country or culture might not have the same meaning in another. Avoid using people, stereotypes, faces, gender, or body parts as icons. This is particularly important for an international audience, as such images may not easily translate or could be offensive.
• When you must represent people or users, depict them as generically as possible; avoid realistic depictions.
• Make the scale, orientation, and color consistent with other related images.
• Provide sufficient contrast for your images so that users can identify different elements or details of the images.
• Do not use a triangular arrow graphic similar to the one used in cascading menus, drop-down controls, and scroll arrows, except where user interaction results in additional information being displayed. Such an arrow on a button implies that a menu will appear when the user clicks it.
• For graphics that represent interactive content, provide a visual cue that the item is interactive and a text description of what it does. Visual cues include changing the pointer or displaying a ToolTip.

Icons

Icons are used throughout the Windows interface to represent objects or tasks. The system uses icons to represent your software's objects, so it is important to design effective icons that communicate their purpose.

Icons should be designed as a set; consider their relationship to each other and to the user's tasks.

Icon Sizes and Types

Windows Server 2003 applications use 16-color icons in three sizes: 16 X 16 pixels, 32 X 32 pixels, and 48 X 48 pixels.

Icons are produced in either BMP or ICO formats, depending on the requirements of the application.

• Use colors drawn from the 16-color system palette to make sure that icons look correct in all color configurations.
• Define icons not only for your application's executable file, but also for all data file types supported by your application.
  Icons for documents and data files should be distinct from the application's icon. Include some common element of the application's icon, but focus on making the document icon recognizable and representative of the file's content.
  
• Register the icons you supply in the system registry. If your software does not register any icons, the system automatically provides one for your application. However, it is unlikely to be as detailed or distinctive as one you supply.
  

Icon Style

• Use a common design style across all icons. Repeat common characteristics but avoid repeating unrelated elements.
• Use real-world (rather than metaphorical) imagery. Literal representations communicate concepts more effectively than abstract symbols.
  
• To facilitate recollection, design icons simply and distinctly. Apply the icon consistently to build recognition; design small icons to be as similar as possible to their larger counterparts. Try to preserve their general shape and any distinctive detail. If there are existing images for illustrating objects such as documents, rather than introducing new visuals for communicating established concepts, reuse (or extend) the established visuals.
• Consider how overlay images — such as a shortcut icon, an offline icon, or other visual annotations — might affect the appearance of icons. Overlays (such as the shortcut arrow or a status indicator) will obscure detail in the lower-left and lower-right corners of an icon.
• Use only one status annotation per icon. This increases the impact of each annotation and reduces information overload for users. Choose the most important status information you want to display, and then select the status annotation that corresponds to that concept.
  Always place the status annotation in the lower-right corner of the icon. Consistently placing status annotations makes it easier for users to distinguish the status information from the icon itself.
  

Icon Usage

Icons are primarily intended to represent objects with which users can interact. Therefore, be careful in the use of icons, and follow these guidelines:

• Use an icon as the representation of an object — for example, a folder icon in a folder's property sheet.
• Use an icon to reinforce important information — for example, a warning icon in a message dialog box.
• Use an icon to provide visual anchors to help users quickly navigate through a task.
• Avoid using icons in lower-level dialog boxes, as this creates visual clutter.

Toolbar Buttons

• Use the system's common toolbar images as a resource to maintain consistency.
• Make the icon dimensions 16 X 16 pixels.
• Use the Windows 16-color palette.
• Place a black border around the image for both the default and active states, except for arrows or Xs.
• Images should be fairly flat in appearance with little dimension or shading.
• Use standard icons as shown:
  If you use these images, use them only for the functions described. Consistent use of these common tool images allows the user to transfer learning and skills from product to product. If you use one of the standard images for a different function, you might confuse the user.

See Also

Concepts

Layout Specifications: Win32
Layout Specifications: Windows Forms
Toolbars