Description
The Icon Journey...Version 2
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
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!