Refreshing the VS Code product icon

[miguelsolorio]

The Icon Journey...Version 2

⚠️ NOTE: Please read our updated response based on the feedback ⚠️

The 2017 icon change showed how much passion and interest there in the iconography for VS Code, and we thank you for that feedback. There are still a few outstanding issues with current icon, and we’ve been spending time over the past few weeks looking at ways to resolve them. We wanted to share where we are and get your thoughts.

The current icon is hard to see on some customers taskbars as well as in some parts of the Windows UI like the file chooser dialog. The size of the VS Code shape itself, when wrapped within the Visual Studio Family ribbon (the “wall” on the right) makes the difference between Visual Studio and Visual Studio Code hard to spot, especially for some customers with color vision deficiency. Finally, some commented that the macOS version of the product icon looks out of place amongst other apps in the dock.

An opportunity to learn

As well as your feedback, there was also efforts going on inside Visual Studio and Visual Studio for Mac on aligning with iconography across Microsoft, being led by Windows and Office. You’ll have seen some of this in the latest product icons for Visual Studio (Windows) and Visual Studio for Mac as well as some of the recent Office icon updates. While this was not our main driver of change, it made sense to learn from the other work and leverage a similar style to solve some of the issues we were seeing.

The proposed icons

VS Code's current Windows icon (above left) and the proposed icon (above right)

Making it easier to find

We are dropping the thick ribbon on the right side of the icon. This allows us to increase the size of the VS Code shape (the key identifier of difference) to a size where it’s now a lot simpler to glance across the taskbar and spot your favorite code editor.

The proposed icons for the stable and Insiders builds of VS Code as well as Visual Studio 2019

To make the icon more legible on a variety of backgrounds (from the desktop to the file chooser), we have added depth to the icon. This allows us to using lighting and shadows to create an overlapped effect, but also has the added advantage of lifting the icon up and off many flat colors it might encounter.

An example of the proposed icon on some of the blues and greens that you can choose in Windows10.

Improving accessibility

To improve accessibility, we needed a something that is more than color, so taking inspiration from the other Visual Studio Preview builds, we have brought a “stencil” look to the Insiders version VS Code while keeping the familiar green.

VS Code's current Insiders build icon (above left) and the proposed version (above right)

Keeping a native macOS style icon

⚠️ NOTE: Please read our updated response, we will not have a custom icon for the Mac, we will use the same icon across all platforms. ⚠️

VS Code's current macOS icon (above left) and the proposed icon (above right)

We’ve kept a macOS style icon for Visual Studio Code on the Mac. We considered having the same icon across all three operating systems but decided to follow the native Mac style. What we also wanted to add to the macOS version was a stronger connection with the Windows icon which would strengthen the recognition between the two versions. Using the same shape, as well as stencil look to the Insiders build, allowed us to do that easily.

Whilst keeping the shape of the background the same for our macOS icons, we were conscious on making sure that VS Code was easy to identify next to Visual Studio for Mac so we’ve adopted a darker look for the shape. This lets you easily spot the difference if you have both installed (and next to each other) in your dock.

Let us know what you think

We would love to hear your feedback on these proposals So let us know what you think!

[orta]

I like the asymmetry of the Mac icons 👍

[fourpastmidnight]

Overall, I get what you're going for, and I think, in terms of consistency with Visual Studio, you're on the right track.

However, I agree with other comments here about the Preview icon style/color.

I think it's too much to have both a different style and color. If you want to denote the difference between the regular version and the insiders version, you should use either a different color or a different style.

While I personally like having a green icon for insiders, I would also be ok with the stenciled look which is blue. This is in keeping with the Visual Studio Preview vs. Release icons. But whatever you do, you should probably choose either color or style to differentiate the "flavors", but not both.

[AlexAegis]

The colors are nice and they pop out well, but I'm not a fan of these rounded corners MS trying to sneak in with the office icons and some parts of the settings app/start menu recently. I like the more angular style of Win10.

Leave the rounded corners to Apple.

[Siraris]

I really like the blue one. A lot. It kind of looks like a space ship, and as we all know, working with VSCode is... out of this world.

[LoadLibraryEx]

This is still really bad for the color blind. They have to identify tiny difference in a tiny icon. I've spoken to people who CANNOT see the color differences.

[AlexAegis]

Can somebody explain why am I getting downvoted? This thread is supposed to be about discussion and feedback. Negative feedback is feedback too. Or the Apple comment is what made you think I'm just "trolling"?

Let me explain: I used Apple here as an example. They have a working ecosystem, and a consistent design language all across their products. Rounded corners are common and It looks good as a whole. (Another good example would be Bootstrap, or Primer)

But let's open VS Code. Or any other modern MS application, and what do we see?

Sharp corners everywhere.

Is that a problem? Hell no. It's another design direction and it's really good too. But please stay consistent. (The only rounded corners I could find in VS Code is the new search widget in the explorer sidebar.)

The icon should reflect the application. The previous icon did that. This one is not. And this is true for the new office icons too, but that's another topic.

[Ehab97]

Nice one , better than the last icon , but I think the one for Mac better than that one in Windows, why?

[ibedwi]

Really good idea!

[asanjabi]

Please consider changing the icon so it looks different than Visual Studio 2019. It makes it very difficult to tell them apart, specially if you are color blind.

[CarlosHdz7]

I really like it

[AlexAegis]

I imagined it like this, old shape, new colors

[Yzrsah]

@AlexAegis The angles you used at the cuts imply the meaning of the object, good work

[Yzrsah]

@AlexAegis Could you please make a version of that with the alpha edge stroke?

[BlackV]

Same icon every single OS, why make them different, why

[juanesmendez]

I like the new icon for Windoes, but I definitely don't like the new one for MacOS.

[wzhudev]

The current icon for macOS seems to have native Mac style. But the proposed one...

[kohlmannj]

I wonder if some added textural elements might help to further distinguish the “Insiders” icon. For example, the Firefox Developer Edition icon adds a polygonal pattern to the globe. A textural treatment such as this for the Insiders icon might accentuate the “stencil” motif as well.

[Yzrsah]

Here's a quick hack with changed angles and inverted.

[ARemaity]

The shape is important as much as the color to differentiate with visual studio Really I like the new shape .

[bolorundurovj]

I really like the new concept

[nihadguluzade]

New proposed design looks pretty awesome. However, for me, icon for macOS, especially that big background don't fit very well.

[vsTianhao]

Nice，very good-looking (except mac icon)

[hho]

Can Linux users get the regular icon instead of the Mac OS one, please?

[roy-lau]

right

[mattpilott]

Not a fan of the macos icons at all

[jamiedawsonyoung]

Hi @fourpastmidnight When we looked at the Insiders and Stable build icons together we knew we needed to use more than just colour to differentiate between them. This is so that the icons are more accessible for customers with color vision deficiency. We started with just the stencil approach but then added the green back from the current Insiders icon for familiarity. The combination of the colour and the stencil has created a bit of feedback around the similarity to the old Excel icon though 😁

[jamiedawsonyoung]

Hey @AlexAegis I wanted to address some of the valuable feedback you've been adding to this thread, you're correct in saying this is a open forum for discussion and feedback, both negative and positive.

I think your point around how a product icon should reflect the ui of the product (or even the OS) is interesting but maybe limiting? Where I agree that Apple 'owned' the rounded corner for a long time, I'm not sure that's the case anymore (and I'm not sure that's how they'd like to be remembered either 😉) Similarly for Windows, I see many examples of less than sharp corners across all of our major products and I think that's okay too.

We try to design our products with the most appropriate ui for the task you're trying to complete as well as follow the platform we're designing for. How you round the edge in a ui can have a huge impact to the cohesive look of an application (or even OS) but we shouldn't limit ourselves, as that could limit what we deliver to you 😃

[flppv]

Looks cool! Can't wait to see it in my dock. Reminded Taxi in Detroit game a bit

[fourpastmidnight]

@jamiedawsonyoung Ah, I see. Well, it was just a thought that color and style might be too much. Either way, I do like the new logo design for Windows.

However, I also find the mock-up designs by @AlexAegis and @Yzrsah very nice, too. I actually like them better than the current flat design. Nice work.

[bradleykenny]

Really love the logos! Would love the Mac one to match the Windows one though. Not a fan of the border.

[robinmanuelthiel]

Can't we just make the style consistent across every platform? Purple for Visual Studio, blue for Visual Studio Code and green for Insiders if fine, but please don't use a different icon style in macOS!

I would love to see something like this (as @mariusschulz already proposed)

You are writing, that you thought about using the same icons but decided against it to follow the native Mac style:

We’ve kept a macOS style icon for Visual Studio Code on the Mac. We considered having the same icon across all three operating systems but decided to follow the native Mac style.

I would argue, that the newly proposed Mac icon does not follow the native Mac style. It looks very unnatural in comparison to most other apps. The new Windows icon you proposed also fits perfectly to the Mac style. Without any macOS specific modifications

Take a look at the Visual Studio 2019 icon in my dock: It looks very unnatural there...

[ivansvlv]

Take a look at the Visual Studio 2019 icon in my dock: It looks very unnatural there...

@robinmanuelthiel So you say Sketch icon looks natural for example? Still it's nice and I love to have it in the dock :)

[gbale]

Great icons. I like the colour and the differentiation (colour and style) between regular and insiders. However I agree with the feedback that the icon should be consistent across platforms, which seems the route that other MS products (namely Office) are taking. I would prefer to see the "Windows-style" icon used everywhere; no macOS-specific icon. It's unfortunate that Visual Studio 2019 did not already go this route.

[takanasun]

I think having the Insider icon have those cutouts opposed to the stable build makes it look too much like an X, especially a green X, i. e. Excel.

I think so too!!! looks like Excel Icon...

[ghost]

Amazing.

[anhthang]

Nice. When is this shipped?

[JakubSteplowski]

I think having the Insider icon have those cutouts opposed to the stable build makes it look too much like an X, especially a green X, i. e. Excel.

But it follows the Visual Studio style, so it's correct. I prefer to see an X rather than having two software of the same family (Visual Studio) with different icon styles.

[prasadmudedla]

Really love the icons.

[ghost1372]

awesome

[robertcalvert]

Can Linux get the same icon as Windows, please?

[takanasun]

awesome!! but ,I like more short width edge line. Of course I think it is a very nice design.

[AdamJonsson]

Love the new icons overall! Just a small detail on the edges of the insider icon that is bothering me a little. Maybe it would be better to have them rounded instead of (crooked)?

[jletey]

Great work! Really love the new logos and can't wait for them to be released! As many people have said above, I would also love for the Mac icon to match the Windows icon. Not a fan of the border!

[NielsVerheijen]

Love the proposals!

[SethuSenthil]

I think a round icon for Mac os will look better, like the Safari icon since it looks more standardised.

[dphfox]

I'm not so sure that the whole Excel X thing would be much of a problem considering that the vast majority of VS Code insider users are highly computer literate? Then again I don't have much experience.

Also Mac icon = Windows icon? I actually think they'd fit in more without the background, especially when you add in the Office icons.

But these new icons overall are just 🔥🔥🔥. Thanks so much MS!

[turtuga]

I really like these icons :) This is not merged in April iteration?

[victor871129]

https://daedtech.com/bike-sheds-ducks-and-nuclear-reactors/

[uglycoyote]

The new design looks nice, but it has me confused about something:

I always assumed that the icon was supposed to represent "infinity". At least, the Visual Studio ("Not Code") icon is clearly an infinity, and the VSCode icon appears to be based on the same idea. Although the leftmost fold of the infinity is hidden in the VSCode icon, I mentally pictured this as being "still there, just the same colour as the background", like it is camouflaged by reflecting light or something.

With the new design, it is harder to continue my mental fiction. Because of the rounded edges on the left side of the two crossing lines, it is much harder to imagine that fourth hidden side. The rounding ends say "this line stops here", it doesn't make sense to imagine them as "folded over" anymore

So I have to ask -- was it it ever supposed to represent infinity? I don't find any mention of infinity in this page at all. The 2017 redesign page says that "We iterated on the infinity logo for some time...until we landed on the current fish". So is it a fish, or infinity?

[ndedic]

Looks good