Nov 17 2020 10:42 AM - edited Nov 17 2020 12:32 PM
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.
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.
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
Nov 19 2020 12:40 PM
Nov 19 2020 02:39 PM
Nov 19 2020 04:26 PM
@nlphite Seems to me it's an approach where they take it one step at a time instead of waiting for everything to be complete. However, I feel like the transition from Win 7 to 8 never even completed IIRC, so the amount of time it takes seems really rough.
I'd be willing to bet that design committees are changing the goals while the artists are still working on the last set of goals, so they're always playing catchup. Just a theory.
Nov 19 2020 04:58 PM
@IrinaL will do that, thank you
Nov 19 2020 09:09 PM - edited Nov 19 2020 09:10 PM
+1 That would be awesome to identify the folders properly. Currently just a shhityy workaround
Nov 20 2020 12:20 AM
@IrinaL The new tab icon seems a bit off, like it's transparent. Also it would be great if you can make all the new icons a bit bold because they look very thin and on screens with less resolution than full hd they all look blurry and pixelated. Thanks.
Nov 20 2020 12:21 AM
@aliasForKam Why would they make a toggle just for icons -_-
Nov 20 2020 12:26 AM
@YgorCortes I don't think acrylic effect is a part of the new Fluent Design System. So, it won't be coming any time soon.
Nov 20 2020 02:09 AM
@hussain5416 wrote:+1 That would be awesome to identify the folders properly. Currently just a shhityy workaround
Send feedback about it through Edge feedback button please, that's all they care about when prioritizing feature requests, I've been told this by multiple Edge developers. I've already sent 1.
more feedbacks about the same feature means more people want it and they give it higher priority.
Nov 20 2020 02:24 AM - edited Nov 20 2020 02:31 AM
@Orion01 wrote:@YgorCortes I don't think acrylic effect is a part of the new Fluent Design System. So, it won't be coming any time soon.
it is part of the Fluent Design system:
https://docs.microsoft.com/en-us/windows/apps/fluent-design-system
and with the new WinUI 3, it will be accessible to Windows apps (Win32 + UWP)
Acrylic material is on the road map
https://github.com/microsoft/microsoft-ui-xaml/blob/master/docs/roadmap.md
Nov 20 2020 08:49 AM
Nov 20 2020 09:10 AM
Nov 20 2020 02:06 PM
Nov 20 2020 10:51 PM
@IrinaL Thanks, and I would like to know that any new icon for .htm/.html documents of Edge? I like a specific icon for .htm/.html like IE/Legacy Edge rather than the current big Edge icon same as app.
Nov 21 2020 08:20 AM
Nov 21 2020 11:02 AM
I just noticed, new NTP icon is missing from ntp only when you are online,
NTP will show newer icon on offline NTP tabs (take a look at screenshots)
Hope it helps.
Nov 26 2020 02:06 AM
Nov 26 2020 11:29 PM
@IrinaL Acrylic and reveal effects are what most people here want. To me, it is a mystery how these are not on the roadmap yet.
Nov 26 2020 11:31 PM
All said and done, the new microsoft edge looks nothing like windows 10.
Nov 27 2020 09:42 AM
Love the new icons! Rounded things make things look more modern.