Iconography

Fluent icon collections

Fluent iconography is familiar, friendly, and modern to ensure an inviting, intuitive experience. Our icons are divided into three collections for use: system, product launch, and file icons. Read about each collection for guidance on application, usage, and licensing.

System Icons

Use system icons inside a UI for items like command bars, navigation, or status indicators. System icons are open-source under the MIT License.

Themes

System icons support two themes to accommodate various layouts, visual weights, and optimized usability.

Regular

Regular themed icons are used primarily as a wayfinding device to help people identify and select available actions (download, buy, launch, etc.).​

Filled

Filled theme icons are used for highlighting selected states or for smaller moments that need a little more weight and readabililty.

Icon size

Icon size will vary based on use case and platform. Smaller icons can give information or reinforce an idea, but should not be used for interaction. When choosing size, consider the way someone might move through an experience. The more precise the tool at hand, the smaller the icon can be.

Use 12 pixel icons to give information

They’re generally too small for interactions.​

Match the icon size to the tool at hand

Use larger icons on smaller screens where people may need a larger touch target.

Product launch icons

Product launch icons represent Microsoft apps. Their primary role is to identify a Microsoft capability and the collaboration and productivity it enables. They can also allow people to take an action, like buying, downloading, or launching the app.

These icons draw a connection to our Microsoft brand, but they do not represent the company and should never be used in place of the Microsoft logo.

Scaling down

As the product icons scale below 48 pixels, they simplify in detail in favor of readability. Use icons at specific sizes, instead of scaling them, to create pixel-perfect results.

Scaling up

When scaling product icons larger than 48 pixels, use the full-fidelity icon and scale by factors of four, (48, 64, 96…). Scaling to 4x the base icon, i.e. 48 pixels to 192 pixels, ensures pixel perfection.

File type icons

File type icons indicate specific files or file formats.

Size and format

Multicolor file type icons look best at 16, 48, and 96 pixel sizes in most Microsoft UIs.

These icons are available as SVGs and.webps. SVGs are vectors and are therefore more versatile and can be resized easily, but not all browsers support SVGs. PNGs have wider browser support but require many sizes to remain visually crisp.

Icon usage

Naming

Fluent system icons are literal metaphors and are named for the shape or object they represent, not the functionality they provide.

Shield, not security

Modifiers

When necessary, modifiers can be added to icons to express a more specific metaphor, like an associated action. Modifiers are always the filled theme for best contrast and should always be placed in the bottom right corner of the icon.

Use modifiers to build on a simple idea

Don’t introduce too much complexity

Don’t use modifiers if they will introduce too much complexity in the visual representation or the meaning of the icon.

Color

Adding color to an icon may disrupt its visual balance so consider carefully before using color on an icon. If including color on an icon, only use one color and keep contrast in mind.

Only use solid colors on system icons

Never change the color of product launch icons

Localization

Understand the cultural connotations of certain symbols in different cultures. While in most cases iconography doesn’t require localization, certain icons may be acceptable in one culture but not in another. Validate your iconography choices with the context in which they will be used.