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 Thanks, I really enjoy the fluent update. Can you please add scrollbars that autodetect the page background color and change to dark or light mode accordingly? I also wish, the mobile version was sync'ed in terms of  its usability with the desktop version.

Microsoft's design departments aren't really in the habit of talking to each other. Take the recent 19042 update of Windows 10, which removed the solid blocks of color behind app icons in the Start menu. A welcome update; those were an eyesore. They just forgot that app icons are used other places in the Windows 10 UI than the Start menu, and that those other places need to be updated as well. See, for example, the icons in the Default Apps section of Settings, which still have the ugly highlight color block behind them. |

Sorry, I'm pretty salty about Microsoft's design inconsistency lately. They're trying so hard to refresh things, but they're not bothering to refresh things in consistent ways, so it's not really an improvement.
I also have this issue. I have the new icons for Add to Favorites, Favorites, Collections, Send Feedback, and the generic Folder and Page icons, but not for the New Tab icon.

Sadly, this hits home. It's super frustrating seeing Microsoft roll out half-baked (being generous) UI changes, that never are uniformly updated throughout the OS.  They really need to hire a UI czar that forces every team to adhere to the same UI and enforce consistency. It's one thing that Apple is remarkable consistent at and it pays off huge dividends. The coherent, cohesive unity of macOS is something that is lacking. Fluent UI is a great UI, but it's just half-baked since it's not uniformly applied. Please, please, please fix this. 

@I Don't have a clue WHY you would even bother with such subtle changes that aren't even pertinent. Secondly, I have just gotten the 88.0.702.0 (64bit) update and I don't even see the slight changes you promised. so if there is a different version out there that has this, why don't you tell them and quit bothering me with junk that doesn't apply to my version?

 

Thanks for the suggestion! The team is looking at how we can incorporate additional Fluent elements into Edge. Our goal is to make your browsing experience feel modern, expressive, and tailored to you. The elements you've noted are in consideration as we evaluate our options. Your opinion and feedback help us understand this better.

Icons look slightly blurry to me too, especially the new tab + icon. Also the + icon sometimes keeps its position for a while after you close tabs, as shown in this screenshot.

@IrinaL I really don't like the new icons ... Why does everything has to be so round ? A feature to keep the old ones would be most welcome.

@nlphite Calling all Edge Insiders! This issue is being fixed, according to @IrinaL.
wow. consistency. we love it!

@Kam 


@Kam wrote:
@nlphiteCalling all Edge Insiders! This issue is being fixed, according to @IrinaL.

There is nothing to be fixed. they are simply telling us that Edge has updated icons consistent with the fluent design from Microsoft.

@HotCakeX I'll show you:

 


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

It was for opening or seeing the new tab's favicon. The design is still old.

Yeah I guess if they wanna change that then also change the favorites folder icon, the yellow folder, to something else and unique to Edge.

@nlphite 


@nlphite wrote:
Microsoft's design departments aren't really in the habit of talking to each other. Take the recent 19042 update of Windows 10, which removed the solid blocks of color behind app icons in the Start menu. A welcome update; those were an eyesore. They just forgot that app icons are used other places in the Windows 10 UI than the Start menu, and that those other places need to be updated as well. See, for example, the icons in the Default Apps section of Settings, which still have the ugly highlight color block behind them. |

Sorry, I'm pretty salty about Microsoft's design inconsistency lately. They're trying so hard to refresh things, but they're not bothering to refresh things in consistent ways, so it's not really an improvement.

Hi,

i agree with you, I've made a feedback about this in feedback hub, upvote and share it if you want

https://aka.ms/AAadtt9

@HotCakeX Right. And what about and blue-and-green folder that matches with the icon?
Don't know what you are talking about
@HotCakeX For the icon for bookmarks.
I don't see blue or green in bookmark/favorite icons but that doesn't matter to me.
Thanks for your feedback! What would you like to see?
To clarify, are you requesting this functionality or are you seeing this in the current builds? Thanks!