THE CHALLENGE:

BUILDING ON AN ESTABLISHED SYSTEM

THE APPROACH: 

A COLLABORATIVE + ITERATIVE DESIGN PROCESS

The icon creation process started with the 20x size – the foundation upon which all other sizes would be built. Our team leveraged the color rules and visual guidelines we had established in our previous engagement with Microsoft, but not every icon was a straightforward translation.

For many, we had to reimagine:

• How colors should represent objects: Which hues best conveyed meaning 
while maintaining consistency?
• How monochromatic forms should evolve into filled shapes: Where should negative space remain, and where should colors take over?
• How the new icons would integrate into the growing Fluent ecosystem: 
Would they align with Microsoft’s evolving design language?

Regular stakeholder reviews kept the process fluid, ensuring that we were meeting their vision while also refining details that weren’t immediately obvious from the outset.

THE SOLUTION:

A REFINED, SCALABLE ICON SYSTEM

After several rounds of iteration, Microsoft approved the 104 unique icon designs, which translated into a total of 410 individual full-color icons across multiple sizes. But we weren’t done yet. With a final week left in our schedule, we went the extra mile, using the time to:

• Fill in missing size gaps by creating 26 additional colorful icons (including all 4 missing 24x icons and 22 missing 32x icons)
• Provide monochromatic proposals for all new designs to ensure consistency across the Fluent icon system
• Deliver a final count of 436 colorful icons, fully integrated into Microsoft’s Figma design system for easy deployment

YOU MIGHT BE CURIOUS ABOUT THESE PROJECTS

CONNECT