The next phase of this work will cover the remaining product surfaces that aren’t being covered in phase one, which are Developer Tools and our Extension experience. Additional to iconography, we know that there are many elements that represent Fluent design. Three-dimensional rendering of a blue refresh icon with rounded caps (Image by Cody Sorgenfrey) This will improve scannability as you browse menus and navigation. We’ve also seen optimized rendering across platforms and devices so no matter which device you’re browsing the web on the icons will appear sharp and easy to read. Lastly, if you’re a Microsoft 365 user you’ll start to see more coherence between Edge and other great products you probably already use, such as Outlook for iOS and Android where these icons are already in use. There were many reasons we felt this effort was worth our attention, but most notably our motivations were to start modernizing the look & feel of the user interface. The new Fluent iconography system provides functional optimizations for user experience as each icon is based on a standard keyline and grid. Side-by-side comparison of the Edge browser frame with the old and new icons (Image by Cody Sorgenfrey) W e’re now rolling out the first of 2 phases to update the app iconography. This phase will impact many of our high-touch user interfaces, including tabs, address bar, as well as navigational and wayfinding icons found in our various menus.

The new icon system builds off the visual design updates first seen in our refreshed Microsoft app icons, which includes the latest Edge logo. We recently released the first of many visual updates we have planned for Edge as we modernize and evolve our design language. First, we’re focusing on our core system iconography which hasn’t been updated since the days of our second Microsoft Design Language (MDL2), circa 2014. This has been a Microsoft-wide design initiative and it was important for Edge to be early adopters of the new, open- source Fluent Design System icons which were announced at the 2020 Build conference. This effort covers more than two hundred icons, many of which have been custom made for Edge.

Three-dimensional rendering of some of the new Fluent icons (Image by Cody Sorgenfrey)

Microsoft edge icon image