Icon Design

Visual Studio 2012 and Windows 8 share design tenets of modern style. The updated modern-style Visual Studio icons have simple geometry, clean lines, and only enough detail to communicate their meanings. The majority of new Visual Studio icons are gray-scale. Limiting the use of color ensures that certain icons stand out and draw the user’s attention.

Note the differences between some previous-generation icons and their redesigned counterparts:

Key design points

Modern-style icons have clean geometry, a 50/50 balance of positive/negative (light/dark), and use direct, understandable metaphors. Crucial icon design points center around clarity, simplification, and context.

1. Clarity. Focus on the core metaphor that gives an icon its meaning and individuality.

2. Simplification. Reduce the icon to its core meaning—get the theme across with just the necessary element(s) and no frills.

3. Context. Consider all aspects of an icon’s role during concept development, which is crucial when deciding which elements constitute the icon’s core metaphor.

With icons there are a number of design points to avoid.

• Don’t use icons that signify UI elements except when appropriate. Choose a more abstract or symbolic approach when the UI element is neither common, evident, nor unique.

• Don’t overuse common elements like documents, folders, arrows, and the magnifying glass; use such elements only when essential to the icon’s meaning. For example, the right-facing magnifying glass should indicate only Search, Browse, and Find.

• Although some legacy icon elements maintain the use of perspective, don’t create new icons with perspective unless the element lacks clarity without it.

• Don’t cram too much information into an icon. An icon cannot tell the whole story.

Icon creation

Concept development

Visual Studio has within its UI a wide variety of icon types. Carefully consider the icon type during development. Don’t use unclear or uncommon UI objects for your icon elements. Opt for the symbolic in these cases, such as with the Smart Tag icon. Note that the meaning of the abstract tag on the left is more obvious than the vague, UI-based version on the right:

Correct usage:

Incorrect:

There are instances in which standard, easily recognizable UI elements do work well for icons. Add Window is one such example:

Correct usage:

Incorrect:

Don’t use a document as a base element unless it is essential to the icon’s meaning. Without the document element on Add Document (below) the meaning is lost, whereas with Refresh the document element is unnecessary to communicate the meaning.

Correct usage (Add Document):

Incorrect (Refresh):

The concept of “show” should be represented by the icon which best illustrates what is being shown, such as with the Show All Files example. A lens metaphor may be used to indicate the concept of “view” if necessary, such as with the Resource View example.

Correct usage (Show All Files):

Incorrect (Resource View):

The right-facing magnifying glass icon should represent only Search, Find, and Browse. The left-facing variant with the + or – symbol should represent only zoom in/zoom out.

Search, Find, Browse

Zoom

With tree view icons use only the modifier; don’t include the folder:

Correct usage:

Incorrect:

Style details

Layout

Certain project icons include the language type (such as C#) as an element in the icon. If more than three elements need to be in the icon, use the modifier element as the base and remove the project element. Modifier elements are those stacked on top of the base or project element.

Stack elements as shown for standard 16x16 icons:

Status notification elements (below) are better used as stand-alone icons. There are contexts, however, in which a notification should be stacked on the base element, such as with the Network Disconnecthed icon in the above illustration (top right).

Project icons are typically .ico files that contain multiple sizes. Most 16x16 and 24x24 pixel icons contain the same elements; the 32x32 versions have more details, including the project type when applicable.

VB Windows Control Library Project icons, 16x16, 24x24, and 32x32 pixels, respectively

Center an icon within its pixel frame. If that is not possible, align the icon to the top and/or right of the frame.

Icon centered within the pixel frame

Icon aligned to the top-right of the frame

Icon centered and aligned to the top of the frame

To achieve ideal alignment and balance, avoid obstructing the icon’s base element with the glyph. Place the glyph near the top-left of the base element. When adding an additional element consider the alignment and balance of the icon.

Correct usage:

Incorrect:

Ensure size parity for icons that share elements and are used in sets. Note that in the incorrect pairing on the right the circle and arrow are oversized and don’t match.

Correct pairing:

Incorrect pairing:

Use consistent line and visual weights. Evaluate how the icon you are building compares to other icons by using a side-by-side comparison. Never use the entire 16x16 pixel frame; use 15x15 or fewer pixels. The negative-to-positive (dark-to-light) ratio should be 50-50.

Correct:

Incorrect:

Use simple, comparable shapes and complementary angles to build your elements without sacrificing element integrity. Use 45° or 90° angles where possible.

Perspective

Keep the icon clear and understandable. Use perspective and a light source only when necessary. Although using perspective on icon elements should be avoided, some elements are unrecognizable without it. In such cases a stylized perspective communicates the element’s clarity.

3-point perspective

1-point perspective

Most elements should be facing or angled to the right.

Use light sources only when adding necessary clarity to an object. The two icons on the left show correct use of lighting; the two on the right show incorrect use.

Use outlines only to enhance legibility or to better communicate the metaphor. The negative-positive (dark-light) balance should be 50-50.

Icon types

Shell and command bar

Consists of no more than 3 of the following elements: 1 base, 1 modifier, 1 action or 1 status.

Tool window command bar

Consists of no more than 3 of the following elements: 1 base, 1 modifier, 1 action or 1 status.

Tree view disambiguators

Consists of no more than 3 of the following elements: 1 base, 1 modifier, 1 action or 1 status.

State-based value taxonomy

Exists in the following states: active, active disabled, inactive disabled.

Intellisense

Consists of no more than 3 of the following elements: 1 base, 1 modifier, 1 status.

Project (16x16)

Consists of no more than 3 of the following elements: 1 base, 1-2 modifiers.

Project (32x32)

Consists of no more than 4 of the following elements: 1 base, 1-2 modifiers, 1 language overlay.

Production details

All new UI elements should be created using Windows Presentation Foundation (WPF) and all new icons for WPF should be in 32-bit PNG format. The 24-bit PNG is a legacy format that does not support transparency and is therefore not recommended for icons.

Save icons with the following naming convention: iconname_uniqueID#.ext

Save the resolution at 96 DPI.

File types

32-bit PNG The preferred format for icons. A lossless data compression file format that can store a single raster (pixel) image. 32-bit PNG files support alpha-channel transparency, gamma correction, and interlacing.

32-bit BMP For Non-WPF controls. A true-color RGB image format, 24-bit BMP is an icon convention that creates a layer of transparency by using magenta (R=255, G=0, B=255) as a color key for a knock-out transparency layer. In a 24-bit BMP, all magenta surfaces are displayed using the background color.

32-bit ICO For Project icons and Add Item. All ICO files are 32-bit true color with alpha-channel transparency (RGB/A). ICO files can store multiple sizes (16x16, 32x32, 48x48, and 256x256) and color depths. In order to display properly in Windows Explorer, ICO files must be saved-down to 24-bit and 8-bit color depths for each image size.

XAML For design surfaces and Windows adorners. XAML icons are vector-based image files that support scaling, rotating, filing, and transparency. They are becoming more popular because of their flexibility.

24-bit BMP For the Visual Studio command bar. A true-color RGB image format, 24-bit BMP is an icon convention that creates a layer of transparency by using magenta (R=255, G=0, B=255) as a color key for a knock-out transparency layer. In a 24-bit BMP, all magenta surfaces are displayed using the background color.

24-bit GIF For the Visual Studio command bar. A true-color RGB image format, 24-bit BMP is an icon convention that creates a layer of transparency by using magenta (R=255, G=0, B=255) as a color key for a knock-out transparency layer. In a 24-bit BMP, all magenta surfaces are displayed using the background color.

Icon construction

• The smallest icon size in Visual Basic is 16x16. The largest in common use is 32x32. Keep in mind not to fill up the entire 16x16, 24x24, or 32x32 pixel frame when designing an icon. Legible, uniform icon construction is essential to user recognition.

• Icons should be clear, understandable, and consistent.

• It is better to use the status notification elements as single icons and not to stack them on top of an icon base element. In certain contexts, the UI may require the status element to be paired with a base element.

• Project icons are usually .ico files that contain several sizes. Only the 16x16, 24x24, and 32x32 pixel icons are being updated. Most 16x16 and 24x24 pixel icons will contain the same elements. The 32x32 pixel icons contain more details, including the project language type when applicable.

• For 32x32 icons, the base elements generally have a 3-pixel line weight. A 1- or 2-pixel line weight can be used for detail elements. Use your best judgment to determine which is more suitable.

• Have at least a 1-pixel spacing between elements for icons sized 16x16 and 24x24 pixels. For 32x32 icons, use 2-pixel spacing between elements and between the modifier and base element.

Element spacing for icons sized 16x16, 24x24, and 32x32, respectively:

Line weight

Line weights for icon elements fit into small, medium, and large categories. The standard base element outline for 16x16 and 24x24 icons is 2 pixels. Element details are 1 pixel. Most 32x32 icons have a line weight of 3 pixels. For detail elements, use a line weight of 1 or 2 pixels.

Color, accessibility, and other considerations

Visual Studio compliance guidelines require that all icons checked into the product pass the accessibility requirements for color and contrast. The default luminosity contrast ratio for icons is 3:1. Color visibility is based on the Contrast Ratio algorithm which is suggested by the World Wide Web Consortium.

Follow these key design points:

• Icons no longer contain color gradients or drop shadows.

• Ensure that the scale and orientation of your graphics are consistent with other objects.

• Do not use color in a way that requires the user to discriminate between hues as the only means to convey information. Indicate an action, prompt a response, or distinguish a visual element.

• Consider the cultural impacts of your graphics. Avoid using letters and words as this creates extra work for globalization and localization, and may make the graphics difficult to translate to other cultures. An exception would be including the language element (C#, C++, VB, etc.) when appropriate.

• Certain project icons specify platform type. If a project has more than three elements that need to be included in the icon, use the modifier element as the base and remove the project element.

• Most icons have three gray colors and are optimized for Visual Studio 2012 themes.

  

• All Visual Studio icons should be built with a light gray border in order to meet the 3:1 luminosity contrast ratio requirement. Build 16x16 and 24x24 icons with a 1-pixel gray border outline and 32x32 icons with a 2-pixel gray border outline. On the left is a 16x16 icon with 1px gray border; on the right is a 32x32 icon with 2px gray border.