Developing an Open Source Icon System at Microsoft
A Q+A between our community and design leads about our new Fluent icons
UPDATE ON JUNE 23, 2020:
- Our Fluent icon set is now available on GitHub
- The full set of icons in Figma can be found here. The Android-specific mobile kit can be found here. The iOS one can be found here.
Icons transcend languages. They’re signposts that light the way for an easy, delightful user experience. If an icon’s direction or message lacks clarity, it becomes eye candy at best and a distraction at worst. So, when the team began the feat of creating 500 Fluent Design System icons to work across Microsoft products, the web, Android OS, and Apple iOS, they knew they had to get it right.
But what exactly goes into “getting it right”? And how exactly does one start designing mobile icons for a company that already has desktop ones? And why does it take so darn long to design and implement anything across the product ecosystem? These are just some of the tough topics inquiring minds asked us on Instagram, Twitter and Facebook.
Senior Product Designer Joe Woodward and Senior Designer Jason Custer (with cameos from Principal Designer Janet Longhurst), two of the leads behind the Fluent icon initiative, answer these questions in the Q&A below. We hope you find it helpful and, as always, we’d love to hear your thoughts on the icons in the comments below.
Questions from customers and answers from designers have been lightly edited for clarity and concision.
@hraikai: Why does it take so long for a design system to be applied across a company?
Jason: Imagine the system is a train. And as a train, you have to get people on and off, but you also want to get them to their destination. We don’t want to go so slow that we fall behind and teams are leaving the design system, but we don’t want to get to a place too early when people haven’t caught up to the code components yet. It’s the fine balance of pushing forward and getting teams on board without losing them. And also showing the value too, that’s the piece that’s hard. When a team is used to going at their own speed, and then you ask them to join the effort, it can be hard for them to see the value of joining the effort if that speed isn’t the same as theirs.
Joe: So, you have the whole effort of actually creating the icons, the design language, or whatever it is. And then there’s this whole other part of convincing different teams to adopt the new design system. At a company this big, if you design a whole set of icons and come in at the last minute and say, “Hey, use this set,“ I think people will feel less likely to be OK with that. You really need to bring them along the journey so they can give feedback and be part of it. It also helps if you have a couple of teams that have already adopted it so others can see what everything looks like in practice.
Jason: You’re totally right, the proof is in the pudding. There’s also the challenge of teams all having their own priorities to meet, like fixing certain bugs or releasing new features. They already have their schedule set, so adding these kinds of polish or alignment efforts can be difficult.
Janet: It was also crucial for all the tooling structures and naming systems to make sense to everyone across all of the design teams. So to Joe’s point about bringing people along, we reexamined our process to see what it might look like if we designed in the open, designed in a way that encouraged all teams to partake and invest in the work. We ultimately scaled the work through transparently sharing our progress with teams across the company. And, as you know, sharing, iterating, sharing again, it all takes time.
@catcatwack*: How do you think about future-proofing icons?
Joe: I think it comes back to creating an icon system that works in multiple places. The icons need to look great in different sizes and weights as well. Icons become like a font where you can have adaptability in the stroke weight and the sizes. These decisions make a system scale and help it be a bit more future proof.
Jason: Agreed. That kind of flexibility is key. If someone tries to bend something and it breaks, they’ll drop out of the system and start making their own icons. A lot of times, a designer makes an icon in one size and just scales it to other sizes based on that. So, you’d make an icon at 32 pixels, but if you need it at 24 pixels, you just scale it down, but you can’t control what that icon looks like in that placement. So we built icons at each size, making the system more flexible, and the icons more consistent.
Joe: Yeah, this Fluent icon system is as flexible as they come. We also built a regular state and a fill state. I think because we designed those states side by side and in context, we gained some flexibility and ensured they both work no matter where they are.
*Microsoft employee
@niels9001: How do you align desktop, web, and mobile icons?
Joe: We knew our icons needed a refresh with a mobile point of view. We started from our current set designed with MDL2, but really investigated how touch devices evolved and how icons can adapt to our modern productivity tools.
Jason: To also help create that seamless experience across platforms, the metaphors we use for icons span web, desktop and mobile. These are familiar icons that will likely continue to carry on until we’re tired of using something like a floppy disk for save. We also made a few exceptions for icons that are platform specific.
@pkbullock: How do you balance different colors together?
Joe: Fluent icons don’t have colors applied to them yet — at least not multiple colors. On mobile, we only apply color in code, but those colors only indicate something like an “active” state (for example, Outlook is blue, PowerPoint is red). This helps us make our icons work for light and dark mode, and it allows us to increase contrast for things like accessibility. Accessibility is at the core of Fluent Design, and it remains a core value here, too.
Applying color in code also means that if any designer wants to change the icon color in their design, they can just swap the layer style, and the icon itself will remain linked to the master icon. When the library gets updated, their icon will get updated, too.
@jackerb07: How do you achieve pixel perfect design?
Joe: On our 24-pixel art board, we actually use a 1.5 pixel stroke on mobile, which can be a bit contentious because it’s off the pixel grid. This means icons could potentially look a bit blurry on the edges because they’re sitting between pixels. This isn’t such a problem on high-res screens, but it could become an issue on lower-res screens. But we did a bunch of testing, and we basically align the outside of the stroke to the pixel grid, which means that only one side of the stroke is sitting at a .5 pixels. This reduces the blurring as much as possible. We use 1.5 pixels because we’ve found it helps the icons look their best across platforms.
Jason: Because it’s a 1.5 pixel stroke, it kind of shakes the core of designers that’ve worked on icons for years. You either have one or two pixels, and you never go outside of that. But I think there’s something super interesting about shaking that up, knowing that with high-density screens it doesn’t really matter, so it’s great to do something outside of the norm that works really well.
Janet: Because this is an icon set that spans mobile and desktop, we’ve also crafted icons with a 1 pixel stroke for lower resolution devices. And to Jason’s point, it is interesting to explore what the differences between platforms can bring and play to those strengths. In thinking about the future, our set may need to scale to a multi-weight system and include 1 pixel, 1.5 pixel and 2 pixel to account for all devices.
@jackerb07: Can you share some early prototypes?
Janet: We can! Here’s a simplified version of how we iterated on the person icon.
1: The person icon is often shown in a circle avatar, so a curved bottom might work better here.
2: We curved the bottom and the proportions work better but the two people felt unbalanced. Also, we needed a clear contrast between shoulder and bottom roundness. Also, the right head felt a bit small in comparison to its body.
3: This is the final icon. This version fixed all the issues of V2 and we worked with design teams to confirm the shape worked well across all the variations of people icons that were needed.
Anything else?
Joe: Our icons are available for everyone to use! Download them here.
Jason: The other thing is that there isn’t a team of designers who are fully dedicated to this effort. It was initially whoever had time to build them would. But now we’re at a great spot where it’s more like an organic coherent effort, and now we’re at 500 icons.
Joe: Yeah, that’s a great point. We had designers from different product teams coming together to help bring their different perspectives, which also meant each team would be more likely to adopt the icons. It really feels like a collective effort versus a top-down one.
Thanks for the questions, everyone! We enjoy finding different opportunities to connect with you all, and we hope you found this useful. You’ll start to see these icons appearing in our products over the next few months, and we look forward to seeing them out in the wild, too.
The team is continuously growing and learning as a collective, and they encourage any feedback to help with future iterations. Let them know what you love and areas for improvement in the comments below.
Oh and by the way, we’ll be rolling out the Fluent mobile design kit at Microsoft Build 2020, which will be a free 48-hour digital event from May 19 — May 20.
Shout out to the icon design team: Jason Custer, Joe Woodward, Janet Longhurst, Benedikt Lehnert, Caleb Warren, Spencer Nelson, Charu Choudha, Michael West, Linsie Figueroa, Victor Coulon, Timothy Achumba, Ting Zhang, Julius Schaeper, and Miles Fitzgerald. And much gratitude to our awesome engineers, William Hou and Nick Romano, for bringing these icons to our apps.
To stay in the know with Microsoft Design, follow us on Twitter, Instagram, Facebook or join our Windows Insider program. And if you are interested in joining our team at Microsoft, head over to aka.ms/DesignCareers.
