Over the past few years, Microsoft has continued to invest in Android and iOS development, and as we've ramped up it has been essential to create a strong design system to bring unity and understanding between our apps. However, a key piece was missing - system icons. Every team was using its own style and size which resulted in an inconsistent look and feel between Microsoft products.
We aimed to create a set of icons that were tailored for mobile, feel great on iOS and Android, and are unique to Microsoft.
We formed a V-team of designers from across the company to work together to explore styles, create a set of principles and extract a set of guidelines. The style and guidelines would become essential for us to scale beyond mobile to every team and product in Microsoft. The principles are as follows:
Familiar. Understood by all and based on existing shapes in the Microsoft ecosystem.
Friendly. Rounded, simple, and beautifully crafted.
Modern. Inclusive and accessible, mobile-optimized, cross-platform.
Style, Sizes & Naming
Fluent icons are available in two themes: regular and filled. Regular are stroked icons and the filled style doubles as an active state.
In the past, every team used different sizes and naming conventions which lead to widespread inconsistency. The first step was for each team to provide icon audits that helped us to consider the level of detail and size that our system needed to account for. We standardized our sizes from 16, 20, 24, and 28px frames which give us the flexibility to create pixel-perfect icons that work for every product, including from mobile to large screen.
Each icon has a filled and regular state
The left nav in the Outlook iOS app and a bottom sheet in the Android app.
Design to Code
To bring them to our users we worked closely with our engineering teams to create a solution that is future-proof and ready for all of our teams to use.
Our developers Will Hou and Nick Romano began to develop libraries that easily bring in the icons into Xcode and Android Studio and remain up to date across platforms and product teams.
A Figma plugin exports frames to PDF (iOS) and SVG (Android and web) and correctly names the icons for each platform and places the assets inside their folders. Our libraries are available on Cocoapods, Flutter, and Android and help to create a seamless handoff between design and engineering.
In code engineers can use autocomplete to search and insert the icons, we even created a Mac app that allows designers and engineers to search and copy code snippets.
The Fluent Mac app helps us to search for icons and copy code snippets
Autocomplete to add Fluent Icons in Android Studio
As teams have adopted Fluent icons we're seeing more and more designers contributing to the library. By creating a set of principles and guidelines has allowed us to scale fast but keep the style, size, and naming consistent.
Fluent UI System Icons form a huge part of our design language and are essential in bringing our products together as a family of Microsoft apps. See them for yourself today in Microsoft Outlook, Edge, OneDrive, Teams, and Office.