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

[miguelsolorio]

@eamodio there's no such thing as too much feedback 😄

• Close/collapse all - I agree that it does look busy, will try and remove an extra layer
• Refresh: since it's round it's going to be a bit pixelated so it may appear lighter, if we make it wider then it becomes more blurry/too big. Let me try again.
• Gear: it looks like the middle circle is a bit pixelated, I can try to adjust this and/or make it smaller.

[eamodio]

For the refresh icon maybe just increase the brightness slightly to compensate?

[dalDevelo]

@misolori The padlock state is much easier to identify as locked or unlocked now 👍🏼

To follow up on what @eamodio mentioned about the search icon being thinner than the others, I think both the search icon and the explorer icons look thinner than the rest, it's easier to see this when the explorer icon isn't selected.

I saw your reply about being harder to make this thicker without going overboard, but perhaps the source control, debug and extensions icons can be made thinner to balance it all out?

[kowalski7cc]

I feel that making icons thinnker would make them less visible

[miguelsolorio]

Updated Exploration Build

❤️ Thanks to all of the feedback so far, we very much value the time you take to test this, and please keep them coming. I've updated the build with more fixes and we've also been keeping this updated with master so it should contain the latest fixes. Here are the icon fixes:

• Search is now the same the width as the rest of the activity bar icons
• Collapse/close all is simplified
• Split editor is slimmer
• Dirty state is now a filled dot instead of an outline
• Gears/Refresh/Json were resized to improve pixelation
• Fold/unfold are now chevrons (let me know what you think)
• Actions in Grouped editors and error peek views are fixed

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 Looks awesome!!! :shipit: Really love the fold/unfold chevrons!

My only concern left is the lightbulbs -- and I noticed the blue one today and was even harder to see imo

[eamodio]

Here are a few other nits :smile:

• Open changes icon is quite fuzzy
• Open file icon, because of the up arrow, makes me think I'm uploading the file or something
• The next/previous change icons (above), while I like them, I worry about the similarity to the expand chevrons elsewhere especially with the bottom panel (below) -- or maybe the max/min panel icon should change?
• For the kill terminal command (above), the trash can doesn't feel like the right metaphor (imo) -- maybe more like the close icon or a combo of a terminal and an the close? Maybe like this but with the close [x]? Maybe use a similar for the + terminal too (the terminal with a +)?
• The problems panel still has the 3 part collapse all icon
• The debug views (watch, breakpoints) have the 3 part close icon
• The debug console button feels too much like a terminal icon imo. I think I like the old one better (if it was sized a bit better) -- although I might argue that the button isn't even needed there at all
• I probably just need to get used to it, but the unstage icon just looks like a big dash rather than a minus to me
• The commit checkmark feels too small, especially next to the refresh
• The open preview icon doesn't feel preview-y, and the sizing seems off. Also it seems to have lost its alt-command (which would open the preview in the same editor group)
• Outside of just icons, but is there any way to fix up the dropdown arrow it is off-center and kind of narrow (as you can see in the dropdowns above)

[eamodio]

Oh and finally the status bar (mainly because of the octicons) doesn't really fit with the outline icons (imo)

[miguelsolorio]

@eamodio 🙏 thank you as always

• Open changes: will fix this
• Open file icon: I can try pointing the arrow to the right
• We do have another set of next/prev that I can use, I think it's fair that it can be confusing with the collapse/expand
• Collapse all: thanks for catching those (there's so many of them 😝)
• Debug console: I can iterate on this one
• Unstage: I can shorten this one a bit
• Checkmark: I can increase the size
• Preview: I'll iterate on this and make it the same size as the split button and fix the alt-command icon
• Dropdown icon: I believe this is the native dropdown but will see if we can tweak this
• Octicons: these will also be updated when we update everything else (couldn't fit that into this yet)

[dalDevelo]

Also, in @eamodio's post above, the split pane and trashcan icons don't look correctly aligned (vertically) in the terminal window (3rd image).

[miguelsolorio]

@dalDevelo the split icon is tricky because it needs to be off by 1px to avoid pixelation. I can try to reduce the height of the trash icon so they appear the same (might look a bit weird though).

[dalDevelo]

@misolori maybe bottom aligning them would help?

As I'm typing this, I have insiders terminal open and looking closely, I can also see that those icons appear top aligned in that build, I guess it's just more noticeable in exploration because the lines are thinner.

Was just an observation really, not a big issue, and one that you were already aware of anyway 😊.

[smlombardi]

For the sidebar "search" perhaps consider switching icons, due to the thickness issue. I would think of other metaphors for searching through an entire project (which is what the sidebar icon does), like binoculars or the like. I've had users thinking that the sidebar magnifying glass is "find in page" not even knowing about the other tool for that.

[kurtextrem]

Unrelated to this thread, but is there any other info on the exploration build? From the icon it looks like a canary version. Will there be a continued build after this issue is done?

[miguelsolorio]

@kurtextrem the exploration build is what we use to test things that we don’t want to push to Insiders yet, so it serves as a testing playground. We often will test a new version of electron (or new icons 😉), but we’ll always have the exploration build around.

[Stanzilla]

Cogwheel here also looks pretty fuzzy, in general I feel like the solid ones look way better!

[miguelsolorio]

Icon explorations are now available on Insiders

We've moved our icon explorations to our Insiders build as we're getting a closer to finalizing them. You can enable this via the workbench.iconExploration.enabled setting, which means you can use your own file icons now 😉. We still don't have these icons in the status bar but those will be coming soon.

Additionally, given the feedback from here and on our user studies, we've found the outline style to have the most positive impact and will be going in that direction for the style.

Also, we won't be updating the exploration build and will be using Insiders from here on out. Please comment here if you see any issue with this. Thank you everyone for the feedback so far, it really is helpful!

[Stanzilla]

See above, cogwheel still a bit fuzzy, also does that mean code will come only the outline style or will both styles be included?

[jtlowe]

Can the active icon become a little bolder as well? There’s still a lack of contrast that makes it more difficult to differentiate for me.

[miguelsolorio]

@Stanzilla I'll look into the settings/cog pixelation. Given the feedback we've been receiving via GitHub/Twitter/Reddit and from our user studies, the outline style has had the most positive impact and will be going with that style. And given the complexity of introducing two styles with extensions and the icons they provide, it would be a lot of work on extensions to support this. We'd need to have a better icon system in order for that to happen, but one step at a time 😄

@jtlowe I'll try to improve the contrast of active/inactive activity bar icons.

[eamodio]

Noticed another minor issue -- the outline versions of the info/warning/error icons are hard to see:

[eamodio]

The debug icons feel too thin to me -- especially restart

[kowalski7cc]

I still feel that files is thinner. HiDPI screen 250% 3200 x 1800 13"

[Tyriar]

Zoom level 0 on Windows at 100% scale, the explorer is aligned to the grid but the other straight lines aren't (ext, scm):

[eamodio]

@misolori only with the new icons on in the insiders build, I am seeing a new bug -- the twisties are no longer independently clickable which causes issues for items that both have children and an on-click command.

[miguelsolorio]

@eamodio can you elaborate? I'm able to click on the twisties and other commands

Edit: Nevermind, I see what you mean with the compare branch. There appears to be some weird bug where changing the background-image on a pseudo element renders it invisible, making it un-clickable. Going to have to investigate this a bit more since this doesn't happen anywhere else. Can you point to where this is on the GitLens repo?

[eamodio]

@misolori Here's the code that creates that item -- basically it is an item that has a TreeItemCollapsibleState of either Collapsed or Expanded as well as a command

https://github.com/eamodio/vscode-gitlens/blob/f827bc660140e5da29ba43ca2d27c9a5d3af883f/src/views/nodes/compareBranchNode.ts#L51-L87

[eamodio]

@misolori Here is the offending code: https://github.com/Microsoft/vscode/blob/555739fa7383ef69a7871c9c835ebffbcce3ef32/src/vs/base/parts/tree/browser/treeDefaults.ts#L227-L230

Its checking for a background image, which no longer exists

[eamodio]

Also for the twisties, rather than switching between 2 images -- it looks cool with a rotation and a transition 😄

[miguelsolorio]

@eamodio Ok, I think I fixed the issue now (this is only an issue on the icon exploration as I'm using css to override the icons, shouldn't happen in stable):

[miguelsolorio]

Here's a summary of all of the updates coming in the next insiders:

• Debug controls have been increased in weight (might encounter pixelation in the pause/stop buttons on non-retina)

• Lightbulbs are now filled

• All Next/Prev arrows are consistent

• Quick outline icon are now aligned

• Debug console icon increased in height

• Activity bar badges are smaller

• Refresh icons are smaller

• Compare changes is slightly bigger

[JMS55]

• "Open Changes" for git is very fuzzy, and seems too small
• "Commit" checkmark for git seems too wide

[miguelsolorio]

@JMS55 I'll try and tweak the open changes, this one is going to be fuzzy because of the circle angles as those always sit off the pixel grid. The checkmark was previously too small so we bumped it up a size. You seem to have a missing icon in the Git action up top (gray square), are you using a GIt extension?

[JMS55]

@misolori yes, git-graph's icon is broken, I assume I'll just file an issue there once 1.36 releases. It's not about the checkmark being too small or thin, can you decrease the angle of the check? More like the current (stable) icon

[miguelsolorio]

@JMS55 I increased the compare changes icon and also fixed the missing icon for git graph (was a bug on my end). Thanks for the feedback!

[HazemAM]

Just noticed that the conditional References view has a very small icon compared to other views (not updated yet?):

[eamodio]

The arrow for the next change in the diff view seems broken

The resume button when debugging is broken too

[miguelsolorio]

@HazemAM thanks, will fix that one.

@eamodio yea those two have been fixed (we haven't released a new Insiders yet since Thursday)

[glen-84]

1. Will the collapse/expand icons be open or filled? (in your most recent screenshot of the explorer, they are filled, which I think I prefer)
2. I agree with @kowalski7cc WRT the explorer icon in the activity bar (the stroke size doesn't match the other icons).
3. There is a black line on top of the collapse/expand icons (maybe you're already aware of this)
   • It's coming from this selector: .monaco-editor.hc-black .margin-view-overlays .folding.collapsed, .monaco-editor.vs-dark .margin-view-overlays .folding.collapsed

[miguelsolorio]

@glen-84

1. I didn't realize the old twisties/chevrons were showing (can't seem to repro), but the tree expand/collapse icons will be the > chevrons you've seen around
2. We're still looking into how to make all of our icons the same stroke width while still being readable
3. Good catch, will fix this. Thanks.

[mtxr]

where can I download this version to test? I'm using fedora. I saw url only for debian based distros

[miguelsolorio]

@mtxr see here, you can download Insiders and enable via the workbench.iconExploration.enabled setting.

[JMS55]

Error icons are hard to read compared to stable. Additionally lots of colors throughout the app seem off.

[SupinePandora43]

what's about material design?!

[Stanzilla]

@SupinePandora43 you mean Fluent Design? This is Microsoft not Google :D

[SupinePandora43]

@Stanzilla , yes... but does vscode supports custom UI icons (not file/folder icons)

[MatiasOlivera]

1. The explorer icon is thinner

2. The Replace All button is a little complex

3. The checkboxes are outdated

4. The angle bracket should be updated? (>)

5. The keyboard shortcut icons are outdated

[miguelsolorio]

I've updated the activity bar icons so they are all uniform and match the thickness of the other icons:

A little bit of details: these icons were designed at the original 16x16 and then scaled up so the strokes are the same, which means that they will be off-grid. We did try these to be on-grid at 1px but they ended up looking too thin/small (see below). We also added bevel corners help make the angles more consistent and aligns with the the new Microsoft Design Language (Fluent) icons which Visual Studio will also adopt.

[eamodio]

TBH, I prefer the ones on the left (thin), but I don't feel strongly about it 😄

[miguelsolorio]

@eamodio I was originally leaning towards the thinner ones but after seeing them on higher dpi screens the icons became harder to see and harder to tell which one was active.