Icons

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.

Overview

Our icons are all designed using basic geometry and composed from a set of straight and curved lines. All of the icons share a bold monostroke that defines the shape. When more expression or presence is needed, some icons feature white or colored fills. The same theory is used to create illustrations and emoji.

System icons

Example of system icons showing a camera icon as line art

System icons

Example of system icons showing a camera icon that's partially filled in

Content icons

Example of system icons showing a camera icon with color fill

System icon grid

Our system icon set has been designed using basic geometry and a two- pixel stroke at 32 x 32 pixels to scale perfectly on a four-pixel grid.

 

 

Example of various icons shown on a 32x32 grid
Enlarged examples of a camera icon on a 32x32 grid

Linear scaling size ramps

Icons are scaled up and down in proportion — this ensures they match the line weight and density of other design elements such as typography.

Group of icons on a 16x16 grid
Group of icons on a 24x24 grid
Group of icons on a 32x32 grid
Group of icons on a 48x48 grid

Common shapes

Icons generally maximize their given space with little padding.

32 EP × 32 EP grid

Enlarged example of a geometrical icon on a 32x32 EP grid

Examples

To design these icons, we started with the shape that corresponds to the icon's orientation and composed the design around these basic parameters. Icons don't necessarily fill or fit completely inside the shape and are adjusted as needed to ensure optimal visual balance.

Circle

Example of a circular shaped icon

Square

Example of a square shaped icon

Triangle

Example of a triagular shaped icon

Horizontal rectangle

Example of an icon that has a predominantly horizontal layout

Vertical rectangle

Example of an icon that has a predominantly vertical layout

Geometric construction

Icons are constructed using only pure geometric shapes.

Guitar icon with
geometric overlay

32 EP × 32 EP grid

Example of geometric construction that makes up the icon

Samples

Example of various icons in a group
Example of various icons in a group
Example of various icons in a group
Example of various icons in a group
Example of various icons in a group
Example of various icons in a group

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

Example of a status icon showing a mute status

Action badge

Example of an action icon showing that something cannot be pinned

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 states

Common states of status icons such as error, done, warnings, etc.

Common states

Connon states of action icons shown in line art, such as lock, edit, reply, etc.

Icon guidelines for UWP apps

For UWP-specific recommendations for icon usage, see the Icon guidelines for UWP apps article  Icon guidelines for UWP apps article.