Icons

Applies to Windows and Windows Phone

Windows icons

 

Icons say what needs to be said without explanation. They are an essential part of navigation. Because they are symbolic in nature, icons move past text to convey meaning. In essence, they are about efficiency and getting the user to the next step as quickly as possible. Icons are the building blocks of productivity and provide a visual foundation upon which navigation within a UI is built.

Icons in Windows

Windows icons are graphic and symbolic. They use clean lines and simple shapes that are easily recognizable. They are integral to navigating a touch-first system and should help a user navigate the UI. They shouldn't be used in place of bullet points in a list.

Windows icons distill and simplify concepts using a minimum of parts and details. They reinforce the idea of content over chrome by being graphic in nature, flat in perspective, and monochromatic.

Perspective

Windows icons are two-dimensional symbolic shapes. Icons can subtly hint at volume or depth, but generally we avoid adding perspective lines or angles. Most icons represent one concept or object. If an icon represents more than one object, the object in front "knocks out" the object in back.

 

icon with knock out

 

 

 

 

To "knock out" an object means that when one element in an icon appears to overlap another, the overlap creates a gap that matches the color of the background.

 

 

Color

The primary color of Windows icons is pure white. White is the single color that displays well in most color contexts, such as app tiles and app bars, which have richly colored backgrounds.

 

icons for Windows Store apps

 

Details

Windows gives careful attention to details such as line weight, angles, corners, and “knock outs.” The attention to details allows a large, assorted set of glyphic icons to hold together as a family. Line weights in a touch system should never feel fragile. In smaller size icons a difference of one pixel can make a line or object feel too heavy or too light. In the case of touch icons, always lean in favor of the heavy over the light. Details, including knock outs, should carry a weight of at least two pixels.

Scaling for high DPI

Windows icons target three primary scaling plateaus. The base icon size is 1x. The higher DPI sizes are 1.4x and 1.8x. If scaling to the higher scaling plateaus causes results in partial pixels, simply round down to the nearest pixel.

Production

We recommend that you draw all Windows icons with vectors, preferably in Adobe Illustrator or Expressions Design. Snapping vector shapes to the pixel grid is essential in the glyph system. Windows icons must have crisp, clean edges.

How you can use icons

Because icons are simple, they provide an opportune place to add personality. When you look at a system of icons you can see how brands not only identify themselves, but identify with users. Icons start to tell the story through visual cues that are drawn at the most basic level. Icons allow you to differentiate your app in very simple ways. You can draw uniform location icons, as in the Foursquare app, or you can draw scenarios, as in the Songza app.

 

icons in Foursquare app

 

icons in Songza app

 

Iconography does more than provide functionality. It helps to connect users with the overall vision of the app and can even evoke favorable emotions toward the app. Songza does a good job of giving its iconography the right attitude for the application. The personality of the brand shines through while maintaining efficiency in the interface.

Related topics

Guidelines for Segoe UI Symbol icons

 

 

Show:
© 2014 Microsoft