Microsoft

Fluent Icons

A brand new monoline icon system for Microsoft.

View icon repository

The Fluent UI Icons are a set of monoline icons from Microsoft, designed originally for mobile apps but with the web and desktop in mind. These icons are based on the older “MDL2” set originally conceived and widely used by the Windows team.

I was part of a team spanning designers from across the company that laid the groundwork for this icon system. We were able to quickly scale the system from a handful of icons to thousands over a few months. Using an agile approach we were able to release new icons every week, prioritizing icons for teams that needed them immediately.

While being based on the same or similar metaphors to make the transition easier, Fluent Icons have a slightly different visual style. The icons also have rounded corners and end-caps. They span all platforms, creating harmony and uniformity across apps and services.

Examples of Fluent Icons in Yammer on iOS and Outlook on Android, showing how they can scale across platforms.
Examples of Fluent Icons in Yammer on iOS and Outlook on Android, showing how they can scale across platforms.

They are available in multiple styles. Our size ramp goes from 16 to 48 units, with each size being hand-drawn to ensure pixel perfection. Outline and filled states are used for indicating selection, or when a filled icon will be more visible than one that is outlined.

The size ramp and outline vs. filled states.
The size ramp and outline vs. filled states.

There is also a comprehensive modifier system that can be used to easily add common states to an icon — for example, a plus icon can be affixed to any corner to create an “Add” state.

A small subset of the available modifiers.
A small subset of the available modifiers.

There is a great article on Microsoft Design’s Medium site where Fluent Icon leads answer a few questions from the community. I recommend checking it out: Developing an Open Source Icon System at Microsoft. The icon system is now open-source and available for anyone to use in their apps and websites.