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
Yeah, Folder icons (for bookmarks/favorites) like windows 10 please, with customizable colors. Current folder icon doesn't look good. @IrinaL

@IrinaL Still not fixed :(

Kam_0-1606861137547.png

Do you know when this will be fixed? Approximate date?

@IrinaL The new icon design is nice. But that's just icons.Microsoft Edge is easy to use, so why didn't Microsoft release an Edge for UWP in Microsoft Store?

We need acrylic effect, transparent tabs and tabs bar and some other fluent effects such as light at the hover place of the buttons/menus.

Ideally I'd love to see animated acrylic menues like in windows start menu and taskbar.
It would be nice if you guys are revamp downloading bar to be more legacy and less chrome.
Now downloading bar reducing the page size when it appears but it need to be just a popup message which asks you will you or will you download the file or save it as. and with usual cross X button to cancel, not the cancel button with text CANCEL

@royamicus185 everything you said except the hover effect. that was so ugly imo!

I hope it will be consistent throughout like in macOS 11 where all the icons are constant
Some of the icons are too stretched out or overly rounded. The folder icon in favorites is to stretch out vertically and the save as button in the PDF viewer is too rounded which changes the icon too much from its originality. The icons still need to be constant with the other icons even if they aren't using fluent UI as well so it doesn't through off the icons. I.E. the floppy disk save icon in PDF should be similar to the save icon in Microsoft word and wherever else it is being used.
This isn't really an edge question, but when are we getting fluent design icons in Microsoft word, or are they already there?
Please take the que from Apple to Use the Same icons for the same actions. Folders should all have the same icon; back buttons should be the same thought windows and any icon that is used throughout windows and even in Microsoft office use the same icons throughout, please 🙏🏼

@aliasForKam I already got the newest version of it

If I'm honest, it's hard to feel excited about these new icons when the design is once again inconsistent with the rest of Windows. And why are the scrollbars not updated? They're still using Chrome's design instead of the design used by the rest of Windows

@IrinaL can you add a gaming mode for upgrade performance pls2021-06-29.png

 

 

2021-06-29.png

@IrinaL 

 

Hi.

 

Good overall initiative. Cohesive UI across ALL MSFT Products would definitely be a win for Win (LOL).

 

Seriously though, the new "Refesh icon" has an issue. It's almost a 100% circle. That's less easily communicating a "recycle and refresh the page" "arrow".

 

It looks like a circle. Primarily. if it was say 75% of a circle with the arrow on it, then it would be easier to recognize if you're "scanning" and not really 100% focused on the UI, but just for Productivity/Browsing.