Microsoft Office Icon System

•

Summary

This project highlights the re-design of our core Microsoft Office experience icons. As an evolution of our visual identity, we focused on reflecting the simple, yet powerful and intelligent qualities of the Office creation tools.

The carefully crafted icons honored the heritage of the Office brand, while welcoming its new future. Ultimately, the process yielded a flexible system adopted throughout Microsoft, working across multiple platforms and devices.

To learn more about this project, please read our article on Medium.

Product Film

For the reveal of this work, we collaborated with our partners Tendril and Zelig to create a film that further illustrates our thinking and rationale for the icon designs. To learn more about the process of creating this film, please visit this Behance page.

Silhouette

Simplicity over complexity was our approach when defining the silhouette of the icon system, which embraced both symmetrical and asymmetric forms. Below are samples of the grid we utlized, featuring shapes with and without a letter plate.

Tint and Shade

The extended Microsoft brand color palette shown here was used to ensure the app icons did not have a predominant color. It was constructed by building a ramp of tints and shades from each Microsoft brand color. Each app icon featured a single color ramp.

Scaling

In order for icons to remain legible across a broad range of sizes, the propotion and layout of each icon and its components, including size sensitive elements, such as stroke width, was adjusted to better align with the pixel grid. We took special care at smaller icon sizes where there were fewer pixels to utilize.

The samples shown here (not to scale) display how the Microsoft Excel app icon has been modified to scale non-proportionally, which allows for better legibility at small sizes. In total, there were five versions of the Microsoft Excel app icon.