The Icon Kaleidoscope

Redesigning over 100 icons with new colors, materials, and finishes

Jon Friedman
Dec 12, 2019 · 5 min read
A translucent ribbon with a sample of icons in a grid flowing across it.
A translucent ribbon with a sample of icons in a grid flowing across it.
A sampling of the new Microsoft 365 icons.

Blank pages and redesigns have nothing on sequels.

Last year, we rolled out the new Office icons to show our customers that we’ve evolved our products to support the changing world of work. A world where, despite being more mobile than ever before, social connectedness and collaboration are paramount to success. A world with immense potential for creativity and growth thanks to new flows of information.

Across Microsoft, we’ve worked to help facilitate and enhance these kinds of interactions and experiences. Scaling an icon design effort from 10 products to over a hundred to reflect this new world of work was both daunting and thrilling.

Image for post
Image for post
Scaling a design across the Microsoft ecosystem requires an open and flexible system.

But design teams across the company came together as a collective to develop design guidelines that encourage individuality while creating a cohesive whole. From enterprise to small business to consumer, product teams ensured each icon authentically represented both the product truth and the larger Microsoft brand.

We shared knowledge, iterations, obstacles, and successes. We compared icons in different contexts and made changes for one another. Most importantly, we inspired each other. This was truly a One Microsoft effort, and we can’t wait to hear what you think.

Image for post
Image for post
Image for post
Image for post

Widening the aperture of our design system

From tools like a calculator to a mixed-reality app that puts an expert anywhere in the world, the diversity of our customers’ needs continues to grow exponentially. We needed our modern icon system to continuously reflect changing tides.

With the newest wave of icon redesigns, we faced two major creative challenges. We needed to signal innovation and change while maintaining familiarity for customers. We also had to develop a flexible and open design system to span a range of contexts while still being true to Microsoft.

A designer’s desk covered with materials and sketches of icons.
A designer’s desk covered with materials and sketches of icons.
Rich gradients, soft curves, and fluid motion connect the Edge and Office logos to each other and the rest of the icons.

Our Fluent Design System was instrumental in helping us navigate both these challenges. Fluent emphasizes building off the familiar — designing for what our customers already understand, not asking them to develop new habits or learn something new. Fluent is also about creating space for a diverse yet connected system. To account for such a breadth of contexts and experiences, we expanded our initial library of icon colors, materials, and finishes.

Image for post
Image for post
Image for post
Image for post

People spend most of their working time using Microsoft Edge and Office to get things done, and the teams were excited to experiment with the new materials on these popular products. We know how important these experiences are to our customers, so the icons needed to fit in and stand out at the same time. Based on extensive testing and customer feedback, we introduced rich gradients, broadened our spectrum of colors, and implemented a dynamic motion with ribbon-like qualities.

Our customers are also beginning to use mixed reality to accomplish goals in a completely new way. Blending the physical and digital worlds in our icons helped us think beyond traditional manifestations of colors, finishes, and materials. We needed to consider the third dimension, so we chose new materials that reflected light and depth and felt more tactile.

Whether our customers use their phone, PC, or VR headset to get work done, we wanted to reach people in every environment. The newest design guidelines helped us unify icon construction across the company and within each product family.

Designing our future together

Our community has been on this journey with us from the beginning, and the path to this icon redesign was no different. We conducted countless rounds of research for every icon. From mild to wild, we explored a multitude of design directions and listened to customers around the world. We learned what didn’t resonate with people (flat design and muted colors) and what did (depth, gradations, vibrant colors, and motion), all of which drove our decisions.

A designer’s desk with materials and icons.
A designer’s desk with materials and icons.
Designing for 3D means starting in 3D.

As we continue to evolve our technology and roll out new icons that will reflect the future of Microsoft, our design system will also evolve to address new scenarios that we haven’t considered yet. Developing a system that encompasses the spectrum of literal to abstract while balancing product identity and the Microsoft brand is a huge challenge — but nothing worth accomplishing is ever easy.

There’s always work to be done, but we’re incredibly proud of what our teams accomplished and can’t wait to see how you respond. Let us know your thoughts in the comments below!

To stay in-the-know with Microsoft Design, follow us on Instagram, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team at Microsoft, head over to aka.ms/DesignCareers.

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft

Jon Friedman

Written by

Head of Microsoft Office design, leading the next generation of experiences for work & life. Opinions expressed here are my own, even the few good ones;-)

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Jon Friedman

Written by

Head of Microsoft Office design, leading the next generation of experiences for work & life. Opinions expressed here are my own, even the few good ones;-)

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store