Icons for UWP apps

Good icons harmonize with typography and with the rest of the design language. They don’t mix metaphors, and they communicate only what’s needed, as speedily and simply as possible.

Linear scaling size ramps

16px x 16px 24px x 24px 32px x 32px 48px x 48px
Icons at 16x16 effective pixels Icons at 24x24 effective pixels Icons at 32x32 effective pixels Icons at 48x48 effective pixels

Common shapes

Icons should generally maximize their given space with little padding. These shapes provide starting points for sizing basic shapes.

32px by 32px grid

Use the shape that corresponds to the icon's orientation and compose around these basic parameters. Icons don't necessarily need to fill or fit completely inside the shape and may be adjusted as needed to ensure optimal balance.


Circle Square Triangle
A circle A square A triangle
Horizontal rectangle Vertical rectangle
A horizontal rectangle A vertical rectangle

Angles

In addition to using the same grid and line weight, icons are constructed with common elements.

Using only these angles in building shapes creates consistency across all our icons, and ensures the icons render correctly.

These lines can be combined, joined, rotated, and reflected in creating icons.


1:1
45°
1:2
26.57° (vertical)
63.43° (horizontal)
1:3
18.43° (vertical)
71.57° (horizontal)
1:4
14.04° (vertical)
75.96° (horizontal)
1:1 1:2 1:3 1:4

Here are some examples:

A 1:1 angle example A 1:2 angle example A 1:3 angle example A 1:4 angle example

Curves

Curved lines are constructed from sections of a whole circle and should not be skewed unless needed to snap to the pixel grid.


1/4 circle 1/8 circle
1/4 circle 1/8 circle
1/4 cirlce example 1/8 circle example

Geometric construction

We recommend using only pure geometric shapes when constructing icons.

Guitar icon with geometric overlay

Filled shapes

Icons can contain filled shapes when needed, but they should not be more than 4px at 32px × 32px. Filled circles should not be larger than 6px × 6px.

5px by 8px fill

Badges

A "badge" is a generic term used to describe an element added to an icon that's not meant to be integrated with the base icon element. These usually convey other pieces of information about the icon like status or action. Other commons terms include: overlay, annotation, or modifier.

Status badge

Action badge

Status badges utilize a filled, colored object that is on top of the icon, whereas action badges are integrated into the icon in the same monochrome style and line weight.

Common status badges Common action badges
Status badge Action badge

Badge color

Color badging should only be used to convey the state of an icon. The colors used in status badging convey specific emotional messages to the user.

Green - #128B44Blue - #2C71B9Yellow - #FDC214
Positive: done, completed Neutral: help, notification Cautionary: alert, warning
Green statusBlue status Yellow status

Badge position

The default position for any status or action is the bottom right. Only use the other positions when the design will not allow it.

Badge sizing

Badges should be sized to 10–18 px on a 32 px × 32 px grid.