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

[bpasero]

+1, our icon set needs a champion that owns and fixes them. I would add on top that I was never a big fan of the icons we use in the activity bar...

[Tyriar]

@bpasero what in particular about the activity bar icons; size, style?

[bpasero]

Yeah, activity bar could be smaller imho for what it provides. Basically all icons we use are pretty much 4 years old I would say, a general face lift might be cool to bring them all in sync.

[bgashler1]

It so happens that the we have some new icons in the works that match the new Microsoft Design Language (cleaner and more modern icons that use strokes instead of heavy-weight fills).

[stevencl]

Great points @Tyriar. I think with our recent discussions around panels, colours etc that we should look at a UI and UX overhaul. We've built up enough UX and UI debt as the product has evolved that we need to address it.

[bpasero]

I must also admit that I am not a big fan of the recently introduced icons in the integrated terminal:

They do not seem to fit our other icon set at all. I also find the "Hide" icon questionable as one can easily confuse it with a dropdown menu.

[Tyriar]

@bpasero the consistency of the icons will be solved in time as @bgashler1 mentions this is the way we're heading (there may be 1 or 2 releases where they're inconsistent though). @bgashler1 actually came up with some pretty nice looking icons that featured a mini terminal (box around >) and +/- symbols in the top corner, the argument against these was that the most important part of the icons (+/-) was the smallest.

See #8018 for discussion on the new close icon.

[bgashler1]

@bpasero I totally hear you on the consistency issue. What we could do is possibly get these icons ported into our old look (heavier stroke weight) to remain consistent while we await a new icon set.

[bpasero]

I would be interested to get a look at the icon set when it is available 👍

[Tyriar]

@bgashler1 any update on this?

[bgashler1]

I want to get to this, but the priority shifted to some other things first. Also there was a bit of speed bump with this which I can speak more in person about.

[Tyriar]

The dark border looks particularly awkward on a grey background.

https://marketplace.visualstudio.com/items?itemName=rebornix.nova

[bgashler1]

@Tyriar this is a halo, and you are correct that it doesn't belong here. We'll be getting them out eventually.

[fabiospampinato]

IMHO, aesthetics-wise, the icons are the worst part of the editor, by far. They should really be taken more seriously, this issue is more than 1 year old!

Just look at the icons used for the "Output" panel:

Pretty much everything that could have gone wrong did: inconsistent shades of gray, style and shapes (X icon), the maximize/un-maximize icon doesn't properly illustrate it's function, the "toggle output scroll lock" icon seems taken straight from an iOS password manager or something, I prefer to hide it via some custom CSS than to have it displayed to me.

Also, the whole "enlarge on click" effect is pretty distracting, I cannot think of any other app that uses it. Just look at this and tell me if you find it pleasing to watch:

[stevencl]

Thanks for your comments @fabiospampinato. Unfortunately we do not have the capacity right now to address the issues with the icons. At some point we hope to, but as you have quite rightly pointed out, this issue is over a year old.

[Tyriar]

/cc @chryw

[Tyriar]

Something we should also do when tackling this is sharing the icon image files across components so we don't have multiple of the same image loaded into memory.

[fabiospampinato]

Perhaps octicons should be extended with all the needed icons. This way they could also be used by extensions.

One, albeit minor, problem this would solve: I needed a refresh icon for one extension I made, and I wanted to use the same one VSC uses, so I had to find the actual file and embed it with the extension. If that icon ever changes my extension's icon will feel inconsistent. If it could reference to what VSC uses this problem won't happen.

The limitation of this is that all icons would have to be mono-colored, unless they are combined afterwards via CSS.

[hbjydev]

They don't follow *those* guidelines because they're only for UWP apps. Code isn't UWP, so it doesn't need to follow the standards. Anyway, MS's brand is changing so at the end of the day the icons are bound to change too. @10f

…

On Thu, Aug 15, 2019 at 12:30 PM 10F ***@***.***> wrote: Ok, so I appreciate the new design. But the rounded edges on the Explorer and Extensions icons are not in inline with Microsoft's icon guidelines. <https://docs.microsoft.com/en-us/windows/uwp/design/style/icons> The rounded corners are for corners that are somewhat round in real life like the edges of the shell of the USB drive, but not the actual corners of the metal port. [image: 59722433-844b4680-91d8-11e9-9428-2b36137b0f0a] <https://user-images.githubusercontent.com/18104031/63091392-7c9ce980-bf5e-11e9-846e-191fbfa7cc55.png> The Explorer icon is 2 sheets of paper, I can't find any of the official Microsoft icons that have sheets of paper in them, to have round corners for the paper. The Extensions icon, we can debate that, but if it is supposed to represent building blocks, legos have pretty sharp edges. Plus it will be much easier on the eye. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8017?email_source=notifications&email_token=AFKK6BOM5YVVPFHX2O4KHYDQEU44ZA5CNFSM4CHQNTN2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4LSESY#issuecomment-521609803>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFKK6BP2AC7ZTTBDXSW6IB3QEU44ZANCNFSM4CHQNTNQ> .

-- Kind regards, Hayden Young hayden@haydennyyy.com

[Siccity]

Apart from my general dislike, here are a couple of minor nitpicks.

• Expand/collapse is no longer consistent with collapse all.
  The icon for collapse all was consistent with the old square icon set for expand/collapse, but with the new chevrons their relation is not apparent anymore.

• The folder icon looks more like a tab than a folder. This was previously made clear with the yellowish color that folders commonly have.

[miguelsolorio]

Update

Thank you to everyone who's been providing feedback, we've been listening all week on here and on Twitter so we appreciate you taking the time to comment. There are some issues that have risen out of this and we've been trying to prioritize them so that we can address them soon.

In terms of the feedback about the icons being too thin/hard to see, we've passed this feedback to our icon team that works on the Microsoft Design Language (MDL) icons and they are working to address this.

Below is a list of the issues that have come up that we're actively tracking in case you are wanting to 👍 any (you can also see the full list of icons-product issue):

• Update Octicons to match new icon style Update Octicons to match new icon style #76909
• Provide library of icons for extension authors Provide library of icons for extension authors #74974
• Update extension icons to match new icon style Update extension icons to match new icon style #77411
• New notification icons are not very readable New notification icons are not very readable #78857
• Code folding chevron icon is confusing Code folding chevron icon is confusing #78024
• Allow configuration of product icons Allow configuration of product icons #79130

[Hum4n01d]

I know this was already posted earlier, but I'd like to request an option for (or overall switch) a filled in version of the new icons:

[image originally posted by @misolori earlier in the thread]

[miguelsolorio]

@Hum4n01d please see my post update right above your comment:

• Allow configuration of product icons Allow configuration of product icons #79130

[Hum4n01d]

Ah, sorry 😅 I missed that

[kiprasmel]

Can I revert back to the old icons whilst still getting the new updates?

I personally highly prefer the old ones over the new ones (specifically in the activity bar, others are fine), and the fact that this feature was not made as an opt-in is pretty nerve wracking.

I've seen #78748 (comment) and no, I do not want to roll back to a previous version.

---

#78748 (comment)

Sorry, we don't have a way for you to use the old icons without rolling back to a previous version.

C'mon people..

---

Edit:

I see potential in #79130 (comment)

[waynebloss]

Hey guys, thanks for a great, free product but these new icons suck. There's no color in any of them... Why is that?

What exactly is the value of "unifying things" to us and why does unification mean removal of color?

[blundster]

Hey guys, thanks for a great, free product but these new icons suck.

I completely agree - MS please stop fixing things that are not broken!
With all that talk about diversity in teams and so on - you now need to unify things..
Please take into account that while it's a Microsoft product - it's also a community effort.
I must admit, that the team responsible for VS code has been listening to the voice of users and contributors so far, and that's part of the reason why vscode is so freakin' awesome!
I hope it will also be the case this time!
I don't want to stop updating this product as I did with macOS or Adroid.

[gwardwell]

I love the update. Thanks guys!

[guillaumep]

Changes like this will always leave some people unsatisfied. But I also personally love it! Thanks for the great update!

[ackvf]

What I don't like about the update is that all of the userland extension icons now don't match the new theme. Also, why are the icons smaller? Anyway, I guess I like the new update after all.
before | now

[mattwoodco]

Reading this PR, I understand why they were introduced, but when you combine rounded-corners with very thin stroke widths, you make the user do a lot of work.

The trash can is blurry and split panel looks like a pillow:

I'm not able to see the + in these first two icons:

I would strongly suggest revising the icons so they render clearly on both regular and retina screens. Look into "pixel-fitting" techniques. Take a look at this fine post from 2012 by @dcurtis — https://dcurt.is/pixel-fitting

[ErikHumphrey]

After getting used to them a bit, most of new icons (sidebar, explorer) seem better overall.

[johnoscott]

I am a big fan of the new outline icons for this simple reason; they are more readable the same way the written character is.

[unixcow]

new icons are indeed harder to interpret at a glance, didn't have that problem with old ones

[spartanatreyu]

I am a big fan of the new outline icons for this simple reason; they are more readable the same way the written character is.

Depends on the screen, the lighting in the room and the person. The very fact that this is comment 309 on this issue (and this is one issue out of a bunch of related issues) should hint how many people are having problems with the new icons.

[KodyJKing]

I find the new activity bar icons harder to read. They also look pretty blurry for me. I use window zoom level -2 though.

[akaleeroy]

Not a regular user so I can't speak for all of the icons, but the prominent ones on the sidebar are now cleaner, and with the clutter gone it makes me feel more relaxed working in the editor for long stretches of time. 👍 Thank you!

[SupinePandora43]

"if it works, don't touch it!" - i think this caused tons of comments for "reverting old icons back"

[zzzorgo]

And here is my humble contribution to this topic. The old git-related icons looked clearer on a low density screens (the current ones are almost as dust particles over the screen). Also inconsistency of icons became worse.

[jletey]

@zzzorgo The inconsistent icon that is in the screenshot belongs to the GitLens plugin. The GitLens icons have already been updated by @eamodio, and will be released very soon!