Inconsistent weight and use of color in iconography throughout UI

[Tyriar]

See images below of the various different icons across the UI at x2 with some comments. This is by no means exhaustive but contains the major icons:

/cc @bpasero

General comments

• Since color is used so sparingly throughout the UI, it draws additional attention to the icons that feature red and green in particular. Clear output should have not have a particularly strong visual presence imo.

  Explorer

• Why is the folder filled in brown and not white?
• Why does the collapse all button feature a blue -, why is it a different blue than the one used in the status bar?

Search

• Why is the red x an inconsistent style with the x used elsewhere?
• Why does the clear icon feature a different light gray than the other icons?

• Why is there a dark border around these icons in particular?

  Git

• Why is the tick icon a different weight, why isn't it solid?

  Debug

• Why is the debug output icon so short?

• Why is the deactivate breakpoints button feature a circle filled with black (vs transparent used elsewhere)

• Why is the close all button filled so it's inconsistent with the collapse all?
• Why does the close all button button have a black border when collapse all doesn't?

Problems

Editor

[jvzr]

Solid vs. Outline was discussed recently in this article: https://uxmovement.com/mobile/solid-vs-outline-icons-which-are-faster-to-recognize/

tl;dr: Solid is better for recognition; some icons however fare better as Outline; in any case, there are some rules to follow for efficient recognition

If you asked me, Solid icons in the two examples shared above were more recognizable to me. Outline seem messy and there are a lot of parallel lines fighting in a close space, ruining recognition

[HazemAM]

I also vote for the outline style. And while I'm usually in favor of more customization, I don't think changing the core icons through themes is a good idea.

It won't just add complexity, but I think core stuff like the layout shapes and icons shouldn't be customizable for consistency's sake (that's why i'm also not a fan of "layout" themes in atom).

But I think adding the option to change the style between filled/outline is a good middle solution for customization vs. consistency+complexity.

[HazemAM]

also, i don't know why, but i'm in love with that bug icon haha especially the outlined one

[fabiospampinato]

@misolori Great job 👏

Do we choose to go with one style or both?

I'd just go with one style and make those icons customizable via themes.

I'd personally pick the solid style for these reasons:

1. They are a bit cleaner and easier to "parse", for example the extensions icon is composed of just 4 squares in the solid style, but it would take 8 squares to make the outline version of it.

2. I think the current icons are closer to the proposed solid-style icons, and therefor they seem more familiar to me.

3. I think sometimes people choose to "fill" outline icons when they are active, this isn't happening in the shared gif, and I'd be kind of expecting it a bit 🤔

Do we allow extensions to override our default icons (similar to file icon themes)?

Yes, I think some people will eventually come up with some high quality themes that take advantage of customizable icons.

If we allow icon themes, how do we handle extension icons in the activity bar (this could introduce clashing styles)?

That's probably a good reason for picking just one default icon style, so that extensions authors can by default use/create icons with a similar style.

I think the burden of producing alternative icons for alternative icons packs should fall on the theme authors.

If we allow icon themes, how are these managed compared to file icon themes (this would introduce a second "icon" theme)?

Not sure, maybe there could be a "Filetypes" icon theme and an "App" icon theme 🤔

Some more feedback:

• Is the enlarge-on-click effect gone for good?

• Those icons in the sidebar look a bit too crammed in there, especially the one for reloading the project:

• I'm not sure it's better to keep the shadow 🤔 I guess it may help with contrast though 🤔

[octref]

Agree with @fabiospampinato one thing that jumped out to me was the reloading icon. The old icons look much better aligned:

[miguelsolorio]

Thanks everyone for the feedback so far!

@octref once we have majority of the icons ready I think we can open it up in insiders.

@beastdestroyer for Octicons we will end up replacing those with our own icons (part of the unification), which means we'll have our version of the same icon that fits our new style.

@fabiospampinato good eyes on the icon sizes, we'll address this. Originally the shadows were added to make the icons stand out against other background colors (because the icons were a fixed color), and we're hoping to solve that issue by allow icons to be styled dynamically to increase the contrast.

[eamodio]

I personally like the open/light feeling of the outline icons -- especially for the ones with simple strokes (explorer, search, git, etc), but for the more complex ones (gear, extensions a bit, collapse, add folder) I think the icons themselves needs revisiting for something visually simpler. I also really like the airy feel of the activity bar with the outline versions, as they fade into the background more and don't compete with the main view as much.

As for having 1 or 2 (or customizable) styles, I would definitely lean toward 1 style (which imo helps drive the identity of the product). Having more than 1 built-in style, creates a lot of work for extensions having to adapt to multiple styles -- and, to be honest, creating 1 set of icons is hard enough 😄. This would also require new "apis" to allow specifying icons for different styles (we already have to deal with light and dark versions).

[smbkr]

I think accessibility and legibility (see the link posted by @jvzr) should be prioritised, far above what "looks" best (which is subjective anyway).

I personally think that many of the proposed icons (both solid and outline) are very busy and too detailed, considering the size they're intended to be viewed at.

[miguelsolorio]

@jvzr @smbkr thanks for the feedback. We are definitely considering the legibility of these icons, regardless of style, and are conducting user studies to further validate them.

[jtlowe]

Agree with @smbkr. I sometimes have difficulty determining the active icon in the Activity Bar, which leads me to unintentionally collapse the sidebar. This probably won't be helped by solid vs. outline icons alone. My vote is for solid icons if the active view will continue to be indicated only by a brighter/whiter icon.

I love the new icons by the way!

[fbartho]

Please also compare these icons on a Light-colored theme! I don't know what the solid icons would look like in that situation. The current solid icons seem a bit harsh:

[ianp]

Whichever theme you decide to go with, it would be really cool if you could work with other popular extensions (e.g. Azure, GitLens) to provide them with matching icons.

Also: 👍 to making this a setting in Insiders so we can try them out in day-to-day usage!

[TheAndroidGuy]

I vote for both styles, but if i had to choose only one, i would go with outlined icons.

[bwl]

Outlined style fits with Microsoft - should be the default. Would be nice to have theme support for them as well.

[tomByrer]

It would be great if I can have both icon sets as options in Insiders to give them a spin.

Or at least a before/after GIF.

I prefer the solid; need more contrast since my icons are almost too small on my 4k.

[barcia]

Personally I like the solid style more. Both are great, but the solid I think is simpler and better in terms of UX.

Also, the outline style is more "Microsoft" but the reality is that VSCode is used in more OS, and with the solid style it will look better in all the OS.

And finally, I think the solid style will look better with the icons of most extensions.

But I repeat, great both. 😉

[anthcool]

I am for the outline variant of icons over the solid ones. Also, like others have said already, the outline ones go along with the design of other MSFT apps' icons as well.

[bramschulting]

I feel like the filled icons are much easier to parse and therefore are the better option.

[3zzy]

Outline for large tab icons, solid for small (collapse etc..) icons.

[smbkr]

Just putting it out there @misolori , but I'd love to see a detailed blog post/write up about how you approached this task, the different considerations you've had to keep in mind (accessibility, localisation (i.e the tick mark doesn't exist in Japan), balancing branding with platform look and feel), the process/workflow for the team, etc.

[gautamsi]

@misolori I just want to bring it to everyone's notice that if you use MDL there is catch to OSS license use with this.

MDL assets (fonts/icons) are not licensed as MIT. I (and others) have raised this several times with Office UI Fabric repo

I would prefer the Solid one without compromising the OSS licensing (MIT) or If the MDL stuff comes as an extension

Or better, push them to release Font and icons (except brand icons) as OFL/MIT and anyone can use them.

[miguelsolorio]

@gautamsi yes, we are definitely aware of this and have been working with the MDL owners to see how we can use them with an MIT license. If we’re not able to then we’ll create our own set inspired by MDL.

[JHjertvik]

Love the line icons.

I've been developing a Visual Studio Code extension for some time now. One thing I found tricky was to create something that looked consistent with the overall design of VS-Code as its currently a bit all over the place.

More info about the extension at https://gimli.app/ if anyone is interested.

[smikitky]

I basically like outline icons, but most existing brand logos are "solid", and many would look bad or unfamiliar when outlined. Some cannot be outlined for legal reasons.

Complicated parts like Octocat's right arm and the boxes on the dock are improperly rendered, but I don't think we can modify the path to make it look better. The Dropbox logo is difficult to recognize. Obviously, the mixture of solid and outline icons is horrible. Unlike Windows, MS cannot control everything shown in the activity bar, so I think solid icons are safer.

[miguelsolorio]

@smikitky I don't think we'd impose that brands change their style, it would be against most brand guidelines.

[smikitky]

@misolori Then our activity bar will end up in the mixture of two different styles. We are trying to solve the visual inconsistency of the icons, aren't we?

EDIT: I'm sorry if I didn't make myself clear, but what I'm saying is that our icons owned by vs code should be solid. Out-of-the-box experience of outline icons is good, but it can become inconsistent once people start installing extensions with (usually solid) brand icons. This is what is happening in my Windows 10 task tray. It is a hodgepodge of outline default icons and solid third-party icons, which I think is not very nice.

[joshsleeper]

sure, but I think the focus is to make the iconography "owned" by vs code (so to speak) consistent, not to re-create every single brand icon that might ever show up in the app!

[miguelsolorio]

@smikitky yes, we are trying to solve the overall consistency of our icons, but we don't own branding for other products. We can provide guidance for extensions to follow, but it is ultimately up to the brand (some do provide a solid/outline version).

[Studio384]

@smikitky Going after every brand is a none-starter. Even if you go with solid icons, the iconography style is still going to be different. You shouldn't pay attention to third party icons when designing your product icons. If that where the case everyone and everything should be using the same icons.

[diabolicle]

Please allow extensions to override the default icons. I don't like the new style and would prefer to just fix a few of the current icons.

[jared1000]

@misolori Can this be pushed to Insiders? What's stopping?

[miguelsolorio]

@jared1000 we're currently in the process of setting up usability studies for both of the proposed styles. I'm also hoping to have a custom build ready for everyone to try out soon as well, when that's ready I'll mention here.

[dalDevelo]

@misolori I noticed the exploration build is now using the new icons and I have to say I like them! However, the 'toggle output scroll lock' padlock is incredibly difficult to visually identify as locked or unlocked. I think this could do with some serious improvement.

[sneakyvince]

@misolori I noticed the exploration build is now using the new icons and I have to say I like them! However, the 'toggle output scroll lock' padlock is incredibly difficult to visually identify as locked or unlocked. I think this could do with some serious improvement.

Can you give me the download link? I can't seem to find it

[dalDevelo]

Exploration build available here #61787, don't forget to run the update after you've installed it as the linked file may not be the most up to date build of VSCode exploration.

[miguelsolorio]

Iconography Re-design Build

We've got a build ready for those who want to test out the new icons. We have most of the areas covered, but there are still some areas missing (like the Status bar). We recommend playing with the build for a few days (taking notes along the way) to allow the changes to settle in. We're still iterating on these icons as they're not final and would love get your feedback here.

Change Icon Styles

This build uses the file icon themes, to change your theme go to Preferences > File Icon Theme and select either VS Code Icon Explorations: Outline or VS Code Icon Explorations: Solid. The default is set to Outline.

Send Us Your Feedback

As you explore the build, please let us know what you think. If you find any issues with certain icons, or would like certain areas covered, drop a comment below.

Tip: If you'd like to migrate your settings + extensions, I recommend using the Settings Sync extension.

Download Build

This build is part of our Exploration build that has Electron 4.0.x and you can have this installed alongside Stable and Insiders:

• macOS: Download
• Linux: Download
• Windows: Download

[darknoon]

hey @misolori, I appreciate the update and build!

A few points:

• Overall, I think the sidebar icons are a lot clearer as to what they do. Debug icon and Extensions icons particularly. The shape of the Source Control icon feels a little awkward to me, though it accommodates badging better.
• I prefer the outline-styled sidebar icons, but the solid ones for the rest of the app. The visual weight difference of the sidebar has always struck me as weird in vscode. I would love to see a take where they all have a stroke weight of 1.5pt to see if it feels more cohesive.
• It's a little weird that the "new file" / "new folder" / "collapse all" icons have slightly rounded corners when the 99% of the UI is hard squares
  
  (this also applies to the file icon in sidebar)
• Personally, I would prefer having rounded corners and Sentence Case labels on mac since it fits with the platform aesthetic better, but I realize that is a departure from the UI style heretofore. Framer's code editor is based on monaco and I think they do a nice job with their take:
• The files icon is blurry on mac retina
  
• The weight is inconsistent between these two sets of icons. Maybe it just hasn't been updated yet?

Again, thank you for giving the design some love, and being open to feedback 🥳

[miguelsolorio]

@darknoon thanks for detailed feedback, keep it coming! We will be addressing the blurry icons, we're still playing around with placing them on/off the grid depending on the curves/diagonals the icon has but this is great to hear that it's noticeable (and not good). I'll take a second look at those icons in the Git explorer, I can see in this context that they look off balanced.

@dalDevelo thanks for the feedback on the lock icons, I did wonder if we needed to have a stronger contrast between the two:

[Tyriar]

@misolori the stroke seems thinner on the search icon

[Tyriar]

The weights of all the terminal icons seem off, + looks disabled (Windows):

[miguelsolorio]

@Tyriar is that on a non-retina screen? Some of them might be a little fuzzy because they don't sit entirely on the pixel grid.

[Tyriar]

@misolori yes it's my widescreen monitor in the office

[chrisdias]

I'm a fan of the outline version of the icons, thanks for doing this.

The one thing that it hurting my eyes is the split icon:

The left/right arrow doesn't imply split to me, it implies some sort of movement and since its both left and right i don't know where its going to go :).

Can we get an updated/lighter version of the existing split icon?

[jletey]

@misolori The number of stars and downloads seem to be a bit higher than the version number:

[miguelsolorio]

Updated Build

Thanks for all of the feedback, I've updated the exploration build to address the issues raised here:

• Update the plus (+) icon so it's on the grid and not blurry @ 1x
• Updated the splitting icons so it looks closer to the previous version
• Updated Explorer icon in activity bar so it's not off-grid (blurry)
• Increased the gap of unlocked icon for stronger contrast
• Update close button, dirty state, auto fix lightbulb and fold/unfold icons
• Fixed alignment in the Extension viewlet
• Fixed a bug in the Git viewlet for extension that contributed icons (was showing gray fill)

Note: If you already have the exploration build, it will prompt you to update and you can get the latest through there. Otherwise you can use the download links below:

• macOS: Download
• Linux: Download
• Windows: Download

[eamodio]

@misolori Looking great. Just a couple of issues I've seen:

The search icon still looks too thin compared to the others

The {} feels too blurry/hard to see in both outline and filled -- also the split still feels out of place in the outline style -- its too heavy comparatively

The save all/close all icons in the open editor groups are corrupted?

The editor folding icons for the filled style are imo way to big and heavy (those alone would make me want to not use the filled style). Also not a fan of the ones in the outline style either -- what about trying the folding arrows like in the trees? (Related, it looks like the auto-hide/show on the folding controls is broken -- they are always showing)

I feel like the outline bulb is too subtle and the filled one is too bold (or more like its kind of lost the bulb shape?)

Also I'd, personally, rather the dirty state indicator stay a dot (like the filled style) always -- don't feel like that needs to follow a the outline vs filled style, imo anyway 😄

[eamodio]

Also any thought to have the checkmarks also get thinner for the outline style?

[miguelsolorio]

@eamodio thanks so much for the (quick!) detailed feedback, this is very helpful!

• Search icon: let me try this one again, it's hard to make this thicker without going too far and while also not being too pixelated.
• { } + split: I'll try and tweak these
• thanks for catching the broken icons in the group editors
• I like the idea of using the collapse chevrons, I can try this out
• The lighbulb, I'm a little torn on this one. I do prefer the simplicity of the outline but it can also not have enough weight to be noticeable. I'll play around with a few different styles for this.

[eamodio]

The close all/collapse all icon still feel busy to me -- maybe change it to just 2 outlines rather than 3, like the save all?

[eamodio]

Is the refresh icon actually lighter than the others?

IMO, the big gear looks good, but at this size it feels too busy or maybe just too fuzzy?

OK, I'm done 😉