Icons represent concepts, objects, or actions, and have semantic purpose within a layout. They should always be recognizable, functional, and easily understood.

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.

System icons overview


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

Regular system icons


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

Filled system icons


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.

12 pixel system icons give information

Use 12 pixel icons to give information

They’re generally too small for interactions.​

Match icon size to the tool at hand

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.

Product icons overview

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.

Use icons at specific sizes instead of scalling them

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.

Use full-fidelity icon and scale by factors of four

File type icons

File type icons indicate specific files or file formats.

File type icons overview

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


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

Fluent system icons are literal metaphors

Shield, not security


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

Use modifiers to build on a simple idea

Don't introduct too much complexity

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.


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.

Use solid colors on system icons

Only use solid colors on system icons

Never change the color of product launch icons

Never change the color of product launch icons


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.