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 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.
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.
Icons generally maximize their given space with little padding.
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.
Icons are constructed using only pure geometric shapes.
Guitar icon with
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.
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.