icons.md

author	Description	title	ms.assetid	label	template	ms.author	ms.date	ms.topic	ms.prod	ms.technology	keywords	design-contact	doc-status	ms.localizationpriority
mijacobs	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.	Icons	b90ac02d-5467-4304-99bd-292d6272a014	Icons	detail.hbs	mijacobs	05/19/2017	article	windows	uwp	windows 10, uwp	Judysa	Published	medium

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

Common shapes

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

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.

</tr>

Circle		Square	Triangle
Horizontal rectangle		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.

    <td><img src="images/icons-grid-1-1.png" alt="1:1" /></td>
    <td><img src="images/icons-grid-1-2.png" alt="1:2" /></td>
    <td><img src="images/icons-grid-1-3.png" alt="1:3" /></td>
    <td><img src="images/icons-grid-1-4.png" alt="1:4" /></td>
</tr>  

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)

Here are some examples:

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

Geometric construction

We recommend using only pure geometric shapes when constructing icons.

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.

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 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

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 - #128B44	Blue - #2C71B9	Yellow - #FDC214
Positive: done, completed	Neutral: help, notification	Cautionary: alert, warning

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.

Related articles

• Guidelines for tile and icon assets