Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refreshing the VS Code product icon #71827

Open
misolori opened this Issue Apr 5, 2019 · 94 comments

Comments

@misolori
Copy link
Member

misolori commented Apr 5, 2019

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

2017-2019-stable

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.

Windows taskbar-new-office

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.

2019-colours

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.

2017-2019-insiders

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

Keeping a native macOS style icon

2017-2019-mac

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.

macOS dock

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!

@misolori misolori added the icon label Apr 5, 2019

@misolori misolori added this to the On Deck milestone Apr 5, 2019

@Barbapapazes

This comment has been minimized.

Copy link

Barbapapazes commented Apr 5, 2019

Love this idea!

@Stanzilla

This comment has been minimized.

Copy link

Stanzilla commented Apr 5, 2019

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?

@kieferrm kieferrm referenced this issue Apr 5, 2019

Open

Iteration Plan for April 2019 #71830

2 of 9 tasks complete
@pschfr

This comment has been minimized.

Copy link

pschfr commented Apr 5, 2019

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

This comment has been minimized.

Copy link

RandyPJ commented Apr 6, 2019

Really nice icons. Its a good idea.

@mstum

This comment has been minimized.

Copy link

mstum commented Apr 6, 2019

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

This comment has been minimized.

Copy link

Nosherwan commented Apr 6, 2019

  • 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.
@YednapNibas

This comment has been minimized.

Copy link

YednapNibas commented Apr 6, 2019

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

@IyyappanAmirthalingam

This comment has been minimized.

Copy link

IyyappanAmirthalingam commented Apr 6, 2019

Nice ....👍

@flexdinesh

This comment has been minimized.

Copy link

flexdinesh commented Apr 6, 2019

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.

@uxitten

This comment has been minimized.

Copy link

uxitten commented Apr 6, 2019

it's great, good job

@gwardwell

This comment has been minimized.

Copy link

gwardwell commented Apr 6, 2019

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

This comment has been minimized.

Copy link

jimmybrawn commented Apr 6, 2019

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

@tauheedul

This comment has been minimized.

Copy link

tauheedul commented Apr 6, 2019

I like the blue ones for Mac and PC

@ahmadawais

This comment has been minimized.

Copy link

ahmadawais commented Apr 6, 2019

I like the second proposal. 👌

@twisstosin

This comment has been minimized.

Copy link

twisstosin commented Apr 6, 2019

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

@rjt-rockx

This comment has been minimized.

Copy link

rjt-rockx commented Apr 6, 2019

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.

inoticedthis

@vinayakkulkarni

This comment has been minimized.

Copy link

vinayakkulkarni commented Apr 6, 2019

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

@ngohungphuc

This comment has been minimized.

Copy link

ngohungphuc commented Apr 6, 2019

I love it

@mariusschulz

This comment has been minimized.

Copy link

mariusschulz commented Apr 6, 2019

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

This comment has been minimized.

Copy link

karol-majewski commented Apr 6, 2019

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

@WaveHack

This comment has been minimized.

Copy link

WaveHack commented Apr 6, 2019

I love the proposed blue icon!

@vitalkanev

This comment has been minimized.

Copy link

vitalkanev commented Apr 6, 2019

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

@avatsaev

This comment has been minimized.

Copy link

avatsaev commented Apr 6, 2019

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

@andrewfluck

This comment has been minimized.

Copy link

andrewfluck commented Apr 6, 2019

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

@wendzhue

This comment has been minimized.

Copy link

wendzhue commented Apr 9, 2019

image

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

@kohlmannj

This comment has been minimized.

Copy link

kohlmannj commented Apr 9, 2019

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

This comment has been minimized.

Copy link

Yzrsah commented Apr 9, 2019

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

icon
icon

@ARemaity

This comment has been minimized.

Copy link

ARemaity commented Apr 9, 2019

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

@bolorundurovj

This comment has been minimized.

Copy link

bolorundurovj commented Apr 9, 2019

I really like the new concept

@nihadguluzade

This comment has been minimized.

Copy link

nihadguluzade commented Apr 9, 2019

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

@vsTianhao

This comment has been minimized.

Copy link

vsTianhao commented Apr 9, 2019

Nice,very good-looking (except mac icon)

@hho

This comment has been minimized.

Copy link

hho commented Apr 9, 2019

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

@roy-lau

This comment has been minimized.

Copy link

roy-lau commented Apr 9, 2019

right

@matt3224

This comment has been minimized.

Copy link

matt3224 commented Apr 9, 2019

Not a fan of the macos icons at all

@jamiedawsonyoung

This comment has been minimized.

Copy link
Member

jamiedawsonyoung commented Apr 9, 2019

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

This comment has been minimized.

Copy link
Member

jamiedawsonyoung commented Apr 9, 2019

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

This comment has been minimized.

Copy link

flppv commented Apr 9, 2019

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

@fourpastmidnight

This comment has been minimized.

Copy link

fourpastmidnight commented Apr 9, 2019

@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

This comment has been minimized.

Copy link

bradleykenny commented Apr 10, 2019

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

@robinmanuelthiel

This comment has been minimized.

Copy link
Member

robinmanuelthiel commented Apr 10, 2019

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)

Untitled

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...

Screen Shot 2019-04-10 at 18 09 48

@ivansvlv

This comment has been minimized.

Copy link

ivansvlv commented Apr 10, 2019

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

This comment has been minimized.

Copy link

gbale commented Apr 10, 2019

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

This comment has been minimized.

Copy link

takanasun commented Apr 11, 2019

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...

@dhruvil2000

This comment has been minimized.

Copy link

dhruvil2000 commented Apr 12, 2019

Amazing.

@buianhthang

This comment has been minimized.

Copy link

buianhthang commented Apr 14, 2019

Nice. When is this shipped?

@JakubSteplowski

This comment has been minimized.

Copy link

JakubSteplowski commented Apr 14, 2019

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.

immagine

@prasadmudedla

This comment has been minimized.

Copy link

prasadmudedla commented Apr 15, 2019

Really love the icons.

@ghost1372

This comment has been minimized.

Copy link

ghost1372 commented Apr 16, 2019

awesome

@robertcalvert

This comment has been minimized.

Copy link

robertcalvert commented Apr 16, 2019

Can Linux get the same icon as Windows, please?

@takanasun

This comment has been minimized.

Copy link

takanasun commented Apr 17, 2019

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

@AdamJonsson

This comment has been minimized.

Copy link

AdamJonsson commented Apr 19, 2019

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)?

newVsIcon

@johnletey

This comment has been minimized.

Copy link

johnletey commented Apr 19, 2019

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

This comment has been minimized.

Copy link

NielsVerheijen commented Apr 19, 2019

Love the proposals!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.