Introducing new Fluent Iconography for Microsoft Edge

Microsoft

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

Hello Edge Insider community! 

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.

 

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’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. 

 

Side-by-side comparison of the Edge browser frame with the old and new icons (Image by Cody Sorgenfrey)Side-by-side comparison of the Edge browser frame with the old and new icons (Image by Cody Sorgenfrey)

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. 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. 

 

Three-dimensional rendering of a blue refresh icon with rounded caps (Image by Cody Sorgenfrey)Three-dimensional rendering of a blue refresh icon with rounded caps (Image by Cody Sorgenfrey)

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. Over the next few months we’ll be actively exploring ways that we can create a more beautiful, expressive, moving, browsing experiences for all our users. Our goal is to make something unique to browsers, while delivering a modern look and feel that matches Microsoft 365 and our brand personality. We hope you’ll love the new iconography as much as we do, and as always please share your thoughts with us so we can continue to improve and evolve. 

 

To send us feedback, head to the ... menu in the top right of your browser > Help and feedback > Send feedback.  Or, feel free to leave comments on this post as well.

- Irina Litvin, Senior Program Manager, Microsoft Edge

73 Replies
@IrinaL Cool! But I don't like some of it. Can you please use this as a toggle and not a MS-controled feature?
I like the new icons, they give a fresh look to Edge and it's good to know they are going to be consistent with the rest of MSFT products

@IrinaL Will the Reveal effect be done?, that in the winUI3 is presenting that option. and the acrylic option will be made? or you can make it as a theme for those who want to have that design..

What pieces of the update don't work for you? We'd love to know!

@IrinaL I already sent feedback but here's a bug: the new tab is not round. I have the latest version: 88.0.702.0.

aliasForKam_0-1605645822877.png

 

@IrinaL This is great; I really like the new "tab" icon and the refresh icon (even though it's just been rotated a bit) but why is the folder icon in the bookmarks bar going to different from the recently updated folder icon in my Windows 10 Start Menu? They share the same visual style, which I'm very happy to see, but they aren't actually the same, which just seems odd.

Thanks for the feedback, we saw that come through and are working on getting that fixed up!

Will the rest of Windows and other non-mobile apps across the Microsoft ecosystem also be getting icon updates? The rest of Windows uses the icon set in the stable builds of Edge, and I'd hate to see Edge be the only Windows app to get an icon change and be even more inconsistent with Windows design than it already is. [EDIT: looking more closely here, it looks like the new icons are going to be the same across all of Microsoft]

@IrinaL The new fluent design icons are smooth, curvy, and amazing. Just looking at them feels satisfying. But, like always, there's a catch. I don't know if this is a bug or not, but I'll upload a screenshot of what I found. 

The old new tab logo shows up on the new tab, instead of the new fluent oneThe old new tab logo shows up on the new tab, instead of the new fluent oneIsn't the circled logo still the older one instead of the new one?
I'm running Edge Version 88.0.702.0 (Official build) dev (64-bit).
Is anyone else having this issue?

Awesome, I like the new icons, looks refreshed.

@IrinaLIt has Edge on the name and you are removing all the sharp edges. Please stop rounding up the corners. It's becoming more and more like Chrome. Atleast it's not as round as Chrome though.

Windows and Fluent Design as a whole is planned to move in that direction, though, so rounded corners make sense.

@Gekkouga Edge doesn't mean corner, or typical edges. It means staying on the bleeding edge of browser technology -_-
Also, having rounded features does not make edge similar to chrome.
The roundness is different in both of them, and will never be the same.
Edge is making is look even better. Also, the fluent design is moving towards sleek, smooth, round icons, and much more.
So it makes sense to see things from a better perspective.

@IrinaL For some reason, the icons look more blurry than the old icons on my monitor.


Icons are disfigured in Omini Box when hovering over that icon.
Look at this post : https://techcommunity.microsoft.com/t5/discussions/icons-are-disfigured-in-omini-box/m-p/1899357#M38...

I'm running the same version and I have the same issue.

Change the People icons back they were better of before you changed them
That's pretty cool, but what about things we've ACTUALLY been asking for, like acrylic and reveal effects?