• Original address: The Icon Kaleidoscope
  • Originally by Jon Friedman
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: 👊 Badd
  • Proofreader: PingHGao, zh1an

Kaleidoscope of ICONS

Redesign over 100 ICONS with new colors, materials, and retouches

Whitespace and redesigns are not as good as follow-ups.

Last year, we introduced a new version of the Office icon to show customers that we had developed products to support a changing work environment. In a world that is more mobile than ever before, both social connections and collaboration are critical to success. With the new flow of information, the world has enormous potential for creativity and development.

Throughout Microsoft’s product portfolio, we are committed to helping facilitate and enhance these kinds of interactions and experiences. Expanding the icon design effort from 10 to hundreds to reflect this new world was both daunting and exciting.

However, the company’s design team came together as a whole and worked together to develop design guidelines that encouraged personalization while creating a more cohesive whole. From giant companies to small businesses to consumers, product teams ensure that each icon truly conveys the true meaning of the product and the broader Microsoft brand culture.

We share knowledge, iterate together, overcome difficulties together, and share the joy of success together. We compared ICONS in different application scenarios and made different changes for different scenarios. More importantly, we inspire each other. This is truly a concerted effort at Microsoft, and we can’t wait to hear your feedback.

Expand the coverage of the design system

From tools such as calculators to mixed reality apps that give shoppers instant access to every corner of the world, the diversity of user needs has been growing exponentially. We need to keep our modern icon system up to date.

With the latest wave of iconrefresh, we face two big creative challenges. We need to innovate and change while maintaining user affinity. We also need to build a flexible, open design system that can adapt to a range of different application scenarios while remaining true to Microsoft’s philosophy.

Our Fluent design system helps us address both of these challenges. Fluent emphasizes building intimacy — designing for users’ existing knowledge, rather than requiring them to develop new habits or learn new concepts. Fluent also means enabling a diverse but connected system. In order to accommodate such a wide range of application scenarios and experiences, we have expanded the icon colors, materials and embellishments from the original library.

Users spend a lot of time using Microsoft Edge and Office to get their work done, so teams are excited about experimenting with new design styles on these star products. We know how important these experiences are to our users, so these ICONS need to be both integrated and unique. Based on extensive testing and user feedback, we adopted a rich gradient, expanded the color range, and achieved a vibrant dynamic effect with ribbon texture.

Users are also using mixed reality to achieve their goals in new ways. Blending the real world with the digital world in ICONS allows us to push the boundaries of traditional thinking and experiment with new colours, retouches and materials. We needed to think about how to achieve three dimensions, so we chose a new design material that reflected light, depth and more touch.

Whether they’re using a phone, a PC, or a VR headset to do their work, we want to reach them in every scenario. The latest design guidelines help us unify the iconography within the company and within each product family.

Work together to design our future

We have worked with the community from the beginning to the end, and this is certainly no exception on the way to redesigning the logo. We did countless investigations for each icon. From graceful to bold, we have studied a large number of different styles of design guidelines, collecting the opinions of users around the world. We learned what resonated with our users (depth, hierarchy, rich color, dynamic) and what didn’t (flat design, minimalist color), and these lessons guided our thinking.

As we continue to advance our technology and create icon sets that represent the future of Microsoft, our design systems will evolve to accommodate new scenarios we never thought of. Building a system that covers the full range of concepts, from words to abstractions, while balancing product features with Microsoft’s overall style is a huge challenge-but it takes a lot to make it work.

There’s a long way to go, but we’re proud of what the team has accomplished so far, and we can’t wait to get your feedback. Leave your insights in the comments section!


If you want to keep up with the latest developments in Microsoft Design, please visitInstagram,Twitter å’Œ FacebookFollow us, or join usWindows Preview Experience program. If you are interested in joining the Microsoft team, please click hereAka. Ms/DesignCaree….

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.


The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.