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!

[Barbapapazes]

Love this idea!

[Stanzilla]

I think a color change is enough to differentiate Insider from Retail, does not have to be a different shape as well. Did you guys explore going into the same direction as the Office guys then? I thought everything across Microsoft has to follow the same scheme now?

[pschfr]

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.

[RandyPJ]

Really nice icons. Its a good idea.

[mstum]

A green X is Excel - the Excel logo never looked like that, but the Mandela Effect will be a thing. How about Orange for the insiders build?

That said, I like the shape, it's in-line with Visual Studio 2019 just like the current icon is like the VS 2017 one. Just no Green X please.

And maybe don't have a gap at all, in small sizes (e.g., Taskbar icon) it looks more like the icon is actually broken and is missing a column of pixels, the 3D look only works at bigger sizes for me.

[Nosherwan]

• I like the proposed look for both stable & insiders build specifically the macos one's.
• I love the 3d look of the icons.
• However in the insider build one the stencil dark band or border can be reduced in thickness, after all only an effect.

[pandeysabin]

I love blue icon of #code and the proposed one with blue, I think is good

[Angusoft-India]

Nice ....👍

[flexdinesh]

Love the idea. Both look great but I'm a lil bit biased towards the stencil look. It will make code icon standout from a pile of icons in a glimpse. Time to spot the stencil icon is seemingly less compared to the other new icon.

[behnammodi]

it's great, good job

[gwardwell]

I like what you’ve done here overall. That being said, have you considered drawing from the new Microsoft Office, Skype, etc. logos? The brand consistency might be nice.

[jimmybrawn]

The macOS icons are fire! I want them shipped in the next build. Tyvm

[tauheedul]

I like the blue ones for Mac and PC

[ahmadawais]

I like the second proposal. 👌

[twisstosin]

I've always wondered why the thick ribbon was there, made it look weird, these look a lot better, great idea!

[rjt-rockx]

Most likely an oversight, but the Insiders icons in the Proposed and Windows 10 background presentations aren't rounded at the bottom part while they appear rounded in the mockups of the Win 10 taskbar and the macOS dock.

[vinayakkulkarni]

macOS one looks super dope. Maybe thinner border but the proposed one still looks sweet.

[ngohungphuc]

I love it

[mariusschulz]

Love the depth of the proposed icon! Just the right level of shadows and rounded corners.

However, I'd prefer the macOS icon without the outline — the same as the Windows one. The shape of the outline looks weird to me and doesn't seem to match the typical macOS icon style. I think the "inner" icon would stand beautifully on its own. 🙂

[karol-majewski]

Nice! I wouldn't mind having the Windows one on macOS as well — it's so beautiful! 😍

[WaveHack]

I love the proposed blue icon!

[vitalkanev]

Looking good. I guess. Especially the blue ("stable") one. 😍

[avatsaev]

Get rid of the cutout on green icon, make it same shape as the blue icon.

[andrewfluck]

I like the new icons, however, o do like the old macOS icon background. If you could find some way to incorporate it, that'd be nice it better fits with the system in that's sense

[dswersky]

Growing on me the more I look at them, really like the Mac icons!

[mariusschulz]

Get rid of the cutout on green icon, make it same shape as the blue icon.

@avatsaev For accessibility reasons, the icons shouldn’t solely differ in color. It’s easier to discern them if their shape is slightly different.

[PolymathWhiz]

Its nice

[loucyx]

Loving them ♥

[Negan1911]

Loving the new icon, but i would keep the same shape among normal and insider builds

[amirrezaask]

loving the new icon, specially the windows one

[chen86860]

The new icon in macOS like no better than the current one, somebody agree?

[bmakuh]

The new macOS icons look like coffins to me 😢

[rubo]

As a lot of folks already mentioned here and on Twitter, the green one with cutouts reminds Excel. Not a good choice.

@misolori Would love to know why VS Code's infinity is incomplete. To stress that VS Code is not as feature-rich as VS? Or is it a fish and not an infinity?

[emeryao]

what about to bing back the orange one for insiders?

[Otman404]

The green one looks like Excel, i prefere the blue ones

[ruben69695]

It's a good idea, like the new ones!! 🤙🏻

[dhavalgshah]

These are great looking logos. However, I beg to differ that they should be accepted.

Take any logo design pundit and ask them basic principles. Everyone of them would, among other things, say "A great logo should be distinct and should work equally great in grayscale."

Proposed logos are too similar to Visual Studio. Also, they have somewhat similarity with old Excel's logo.

On a regular workday, it is very much possible to click the wrong icon. And for color-blind, they would look exactly the same throughout.

I am sure that people are working hard, looking at every aspect of impact of this change and would never be hiding behind (very) subtle distinctions sans the color in current versions.

PS: Here is what WCAG2.1 say about the use of Color.

[Dan503]

Remember that complaint about VS Code and VS icons looking too similar?

You're walking right back into that issue with the new VS Code and VS icons. It would help if there was a bit more difference between the two than just the tiny left edge being connected in one of them.

[rudyhuyn]

As mentioned before, the Insider logo bottom right corner seems very off compared to the rest of the logo. I would suggest to round the corner of the hollow side, to be consistent with other corners but also with Visual Studio 2019 Preview

[bluemix]

About the Mac version, and since the icon has a dark background, it would be consistent if a dark color theme is loaded by default.

And, at the same time, I am not supporting having different icons for different platforms

• cause you need to have statistics that lots of users use VisualStudio + VSCode on their Mac (as far as I know, most use VSCode only).
• will make Mac users see two VSCode icons most of the time (marketplace, official and other websites as well).

[kevinvavelin]

I really like the proposal here, it enters in an uniformisation of the brand visual studio, with colours you know which one you are using, even on macOS. Keep going team !

[Nagarian]

I really dislike this new icon proposal which exists only to align with the release of VS 2019 (which is also ugly). This icon feel the warm up of older draft which have been put away.

What's make the current icon much more better, is the fact that it's monochrome in opposition of your proposal. And if you want to redesign the Mac icon, you don't need to rework the windows versions too.

Next point, if you really need to change the icon because of visual deficiency why don't you change completely the icon instead of only the shape of it ? Having two REAL different icons between VS Code and VS19 will be much more appropriate instead of only make subtle changes that nobody take care about.

[pogpog]

I like them. The slight differences in shape are important for accessibility. Differing colour only is not enough.

[jamiedawsonyoung]

Hey @rudyhuyn & @rjt-rockx thanks for your eagle-eyed feedback! The issue actually came from my deft resizing of the icons for this GitHub post (you can see the corner is rounded in the VS Mac version) 🙄 I've updated the images in the main issue now. Keep the feedback coming! 👍

[Yzrsah]

The original VS icon is like an infinity sign, or a ribbon.

When the new green icon is evaluated on its own, I am not sure how to interpret it because it loses its 3d form. It does not really have a metaphor. It relies on HSL values that vary by 10% lightness to imply that this object is a truncated or modified version of some other 3d object. Is it a flat object? Is it a fish? You have to be looking at the original different icon to understand the reason behind the shading.

The place where the ribbons are cut has been rounded off. But the shading does not work because the angles used to cut the ribbons makes the object inexplicably flat. The angles at the cuts do not imply the 3d form of the original object and so it rotates the perspective to make a warped effect.

[gwardwell]

Can someone explain the idea behind this software being “Visual Studio Code”? They’re not really similar under he hood, right? And their target purpose isn’t necessarily the same, especially since Visual Studio is now available for Mac. That being the case, why play homage to the Visual Studio logo at all? Why even play homage to the name? Why not an entirely new direction with the logo, or even going as far as changing the name to “Microsoft Code”?

[Nosherwan]

@gwardwell this is probably going to go tangent to the issue, but I think you are right. The "visual" aspect was in visual studio where devs could drop and drag and create stuff. vscode is more of an editor than that, so yes dropping the word "visual" makes sense 😄

[jonbp]

Stellar work 👏

[gulshan]

I once suggested to drop "studio" and rename it to "Visual Code" which was rejected- #3611

[jamiedawsonyoung]

Hey @Stanzilla & @gwardwell thanks for the feedback on the alignment with other Microsoft products like Office 😃 We have actually been working with both Office and Windows on aligning across Microsoft on an icon style. Given the breadth of different products that need work together we have more guiding principles rather than trying to match each other exactly. The depth (and the subsequent lighting and shadows) we've introduced with this icon refresh is a step towards this alignment. I've updated the taskbar image with some new Office icons so you can see this more clearly.