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

Closed
misolori opened this issue Apr 5, 2019 · 276 comments

Comments

@misolori
Copy link
Member

commented Apr 5, 2019

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

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

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

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

commented Apr 5, 2019

Love this idea!

@Stanzilla

This comment has been minimized.

Copy link

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

Closed

Iteration Plan for April 2019 #71830

5 of 9 tasks complete
@pschfr

This comment has been minimized.

Copy link

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

commented Apr 6, 2019

Really nice icons. Its a good idea.

@mstum

This comment has been minimized.

Copy link

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

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

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

commented Apr 6, 2019

Nice ....👍

@flexdinesh

This comment has been minimized.

Copy link

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

commented Apr 6, 2019

it's great, good job

@gwardwell

This comment has been minimized.

Copy link

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

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

commented Apr 6, 2019

I like the blue ones for Mac and PC

@ahmadawais

This comment has been minimized.

Copy link

commented Apr 6, 2019

I like the second proposal. 👌

@twisstosin

This comment has been minimized.

Copy link

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

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

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

commented Apr 6, 2019

I love it

@mariusschulz

This comment has been minimized.

Copy link

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

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

commented Apr 6, 2019

I love the proposed blue icon!

@vitalkanev

This comment has been minimized.

Copy link

commented Apr 6, 2019

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

@avatsaev

This comment has been minimized.

Copy link

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

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

@matpag

This comment has been minimized.

Copy link

commented Jun 11, 2019

@adryd325 Really thanks!!!

How to install on macOS:
Just go in application, find Visual Studio Code app, right click, show package content, open Contents folder then Resources folder and replace Code.icns icon with the one provided by adryd. (you can rename it instead of replacing it if you want to restore the old icon at some point)
Then just remove it from dock or restart it and it will show up.

Those are the results with different background colors and I think now it's a lot better then the current one:
2
3
1

@MilovanovM

This comment has been minimized.

Copy link

commented Jun 11, 2019

Just updated my vsc. Why did you choose a fish without the head as the logo?

@KillyMXI

This comment has been minimized.

Copy link
Contributor

commented Jun 11, 2019

Why did you choose a fish without the head as the logo?

May I remind you something from the time when the previous icon was introduced:

image

So I'd say the fish is doing better now.

@drewcovi

This comment has been minimized.

Copy link

commented Jun 11, 2019

I know there are lovers and haters of the new icon.

I'm a lover. Nice, light and simple.

@JosephWeaver

This comment has been minimized.

Copy link

commented Jun 12, 2019

I'm personally glad that I only use VS Code and not all the other ones, because, wow, these would all be confusing. Imho, a good example of how to make product suite icons is Adobe Creative Suite 6; they are all different colors and different letters, and you don't have to memorize which shape is which program (I have nine on my taskbar, and I have no problems differentiating between them), versus the Microsoft products where two or three of the icons have such similar (fish, infinity, X) icons and such similar (green, teal, aqua, blue) for such similar programs, that I'd get lost if I wasn't just using VS Code.

I like the new icon released, the aqua/teal fish by itself. But I also think having more than one or two icons of this nature, with constantly changing colors/shapes, would be a lot more hassle than benefit, to your power users.

Just my $0.02

@infinnie

This comment has been minimized.

Copy link
Contributor

commented Jun 12, 2019

@JosephWeaver Icons in Microsoft Office Suite are also of different letters and different colors and have similar shapes. They are awesome.

@1baga

This comment has been minimized.

Copy link

commented Jun 12, 2019

How to show new icon in ubuntu?

Anyone care to show us how to show new Icon in Ubuntu?

@jessety

This comment has been minimized.

Copy link

commented Jun 12, 2019

Most icons on macOS have a filled-in center. Because the new icon has a transparent hole in the middle, it looks out of place compared to other Mac apps. I agree with @matpag- @adryd325's implementation of the proposed icon looks consistently better across the board in the dock, the application switcher, in launchpad, and in the application folder. It also looks the same whether dark mode is on or off and regardless of the user's wallpaper color.

I understand the goal of having one icon across all platforms, but it's too bad that macOS visual design language has to suffer. I wasn't particularly fond of the old icon, but at least it looked like a Mac app.

@jonaskohl

This comment has been minimized.

Copy link

commented Jun 12, 2019

Clearing Icon Cache for Stable icons

Depending on your platform, you may still see the earlier logo due to operating system caching of the application icon. Here are a few methods for the Mac that you can attempt to use to clear the cache:

  1. Restart your dock via killall Dock in the terminal
  2. Run these scripts in your terminal (which updates the timestamp of the icons):
sudo touch /Applications/Visual\ Studio\ Code.app;
sudo touch /Applications/Visual\ Studio\ Code.app/Contents/Info.plist;
sudo touch /Applications/Visual\ Studio\ Code.app/Contents/Resources/Code.icns;
killall Dock Finder

Note: For Insiders and Explorations, simply append \ -\ Insiders or \ -\ Exploration to each version name reference.

  1. Force the IconService cache to be rebuilt using these steps

For Windows 10 you can just execute the following command in the run dialog (Win+R):

ie4uinit.exe -show
@rben01

This comment has been minimized.

Copy link

commented Jun 12, 2019

I haven't read through the entire thread so I hope I'm not repeating points made above.

Unfortunately I didn't realize this conversation was taking place until the change to the icon was actually pushed out — so I hope my feedback is still worth something — but as a Mac user I really don't like the new icon. I much prefer both the old icon or the new-but-rejected Mac icon. The new icon feels out of place on my Mac because it violates the following (empirical) rules that nearly all other (roughly 100) app icons on my Mac follow:

  1. Icons are either circular, upright rectangular, or tilted rectangular. In particular, document-centric apps (e.g., Pages, TextEdit, Notes, Mail), which VS Code is, are tilted rectangular. VS Code's icon is none of these shapes.
  2. Icons are simply connected — no holes. VS Code's icon has a hole in the middle.
  3. Icons are nearly convex: the outline has at most a few minor protrusions (the pens sticking out of the aforementioned document-centric apps, the "tails" of Messages.app, the squiggly outline of the stamp that is the Mail icon) but is otherwise convex. VS Code's icon has two prominent nonconvexities, further accentuated by the acute angles of the icon.
  4. When an icon uses a gradient to indicate the presence of a light source, that light source is above the icon. In contrast, VS Code's icon's light source is almost directly in front of it, as indicated by the darker regions closer to the "back" of the icon. The top-to-bottom gradient of the icon is too subtle.
  5. The icon is quite hard to see when using the transparent dock on certain backgrounds (see screenshots below). Most icons have a border that helps them stand out on any background, but VS Code's icon does not.
    Screen Shot 2019-06-12 at 2 34 39 PM Screen Shot 2019-06-12 at 2 33 28 PM

I think that it's more important for the icon to fit in on each individual system it's on than it is to have the same icon across all systems, especially because icons naturally interact with the system they're on, point 5 above being an example of this — Mac icons need to work well on a variety of backgrounds of varying saturation, whereas (I assume) Windows icons don't. The rejected Mac icon is certainly better than the new icon, but even the old Mac icon was fine, and in my opinion better than both new icons.

@djlondon

This comment has been minimized.

Copy link

commented Jun 13, 2019

The new icon looks off centered. When navigating to vscode, I find my eyes drawn to the smaller "x" then having to make the conscious decision to move it to the right (where the icon is bigger) before clicking.

Could we work on making the icon more centered or have the choice to switch to the older icon? Having a smaller surface area towards the middle of the icon is off-putting. Pls +1 if you experience the same.

Or maybe rotating the icon to look like a flask might help :)
vscode-icon-offcenter

It looks better if your dock is on the side.

@ErikHumphrey

This comment has been minimized.

Copy link

commented Jun 13, 2019

Most icons on macOS have a filled-in center. Because the new icon has a transparent hole in the middle, it looks out of place compared to other Mac apps. I agree with @matpag- @adryd325's implementation of the proposed icon looks consistently better across the board in the dock, the application switcher, in launchpad, and in the application folder. It also looks the same whether dark mode is on or off and regardless of the user's wallpaper color.

I understand the goal of having one icon across all platforms, but it's too bad that macOS visual design language has to suffer. I wasn't particularly fond of the old icon, but at least it looked like a Mac app.

I think it depends on what's behind the Dock, really. It would be nice if Apple kept with the last rendition of the 3D glass Dock from many years ago; it looks nicest on that.

@StefanJanssen95

This comment has been minimized.

Copy link

commented Jun 13, 2019

Im a bit late to the party, just like last time. Im really annoyed by the VS Code logo using similar colors to the VS 2019 logo (for colorblind people). I dont see any difference between the two and that makes switching between the two really difficult. I am currently creating my own builds with a pink VS Code logo to actually see the difference between the two.

Hopefully this can be taken in account next time there is a logo change?

@ErikHumphrey

This comment has been minimized.

Copy link

commented Jun 13, 2019

Im a bit late to the party, just like last time. Im really annoyed by the VS Code logo using similar colors to the VS 2019 logo (for colorblind people). I dont see any difference between the two and that makes switching between the two really difficult. I am currently creating my own builds with a pink VS Code logo to actually see the difference between the two.

Hopefully this can be taken in account next time there is a logo change?

Visual Studio's logo is an infinity symbol, whereas Visual Studio Code's is a fish.

@SoftHippo

This comment has been minimized.

Copy link

commented Jun 13, 2019

I came here after seeing the Release Notes showing off the new logo to say the same thing as @StefanJanssen95. A large amount of people are red/green colorblind (the most common kind) and this icon is incredibly hard to tell apart from VS2019 (the little line on the left of the VS2019 icon is insignificant on a dark, small taskbar). Maybe a colorblind mode is appropriate, like in many other apps.

@StefanJanssen95

This comment has been minimized.

Copy link

commented Jun 13, 2019

Visual Studio's logo is an infinity symbol, whereas Visual Studio Code's is a fish.

wow, yes that is true but barely quickly recognizable.

@selvarajblr93

This comment has been minimized.

Copy link

commented Jun 14, 2019

Visual Studio's logo is an infinity symbol, whereas Visual Studio Code's is a fish.

wow, yes that is true but barely quickly recognizable.

Logic wise visual studio code is 75% of infinity

@matronator

This comment has been minimized.

Copy link

commented Jun 14, 2019

@adryd325 Really thanks!!!

How to install on macOS:
Just go in application, find Visual Studio Code app, right click, show package content, open Contents folder then Resources folder and replace Code.icns icon with the one provided by adryd. (you can rename it instead of replacing it if you want to restore the old icon at some point)
Then just remove it from dock or restart it and it will show up.

Didn't worked for me. I mean, it kinda did, but not all the way. This is what I mean:

Click to expand image

weird

I quit VSCode, removed from Dock and did killall Finder but it's still the same. Gonna try the sudo method. Btw, I'm on Mojave 10.14.5.

EDIT: Clearing the cache from jonaskohl's comment worked. Thank you and big thanks to @adryd325 for the macOS-friendly icon 👍

Oh, and just to be clear. That I'm using the @adryd325's icon, doesn't mean I don't appreciate all the time and effort put into the new design by the VSCode team! 😉

@adryd325

This comment has been minimized.

Copy link

commented Jun 14, 2019

@matronator

This comment has been minimized.

Copy link

commented Jun 14, 2019

Try killall Dock

@adryd325 Thanks, already fixed it (post edited, but it probably didn't show up in your mail notification) 😉

@ErikHumphrey

This comment has been minimized.

Copy link

commented Jun 14, 2019

You can also achieve something similar for just the .app by opening the new image or ICNS file with Preview, hitting Cmd+A, Cmd+C, then clicking the small icon of the Get Info window (below) and hitting Cmd+V to paste the new icon into the pool. Fastest way to change all your icons on macOS.

image

@matronator

This comment has been minimized.

Copy link

commented Jun 14, 2019

You can also achieve something similar for just the .app by opening the new image or ICNS file with Preview, hitting Cmd+A, Cmd+C, then clicking the small icon of the Get Info window (below) and hitting Cmd+V to paste the new icon into the pool. Fastest way to change all your icons on macOS.

image

👍 I've been doing that for folders, great feature. But you would still have to update the cache so the change would show up in Dock/Finder/Launchpad (or at least I had too).

@EvilTony

This comment has been minimized.

Copy link

commented Jun 14, 2019

The easiest way to refresh the icon in the dock on MacOS:

  1. Pin VS Code to Dock (Keep in Dock).
  2. Quit VS Code if it is open.
  3. Unpin VS Code from dock (Remove from Dock).
  4. Open Applications in Finder and drag the app back to the dock.
@matronator

This comment has been minimized.

Copy link

commented Jun 14, 2019

The easiest way to refresh the icon in the dock on MacOS:

  1. Pin VS Code to Dock (Keep in Dock).
  2. Quit VS Code if it is open.
  3. Unpin VS Code from dock (Remove from Dock).
  4. Open Applications in Finder and drag the app back to the dock.

Don't know why but this is exactly how I did it the first time and it didn't worked. I had to quit VSCode and follow instructions from a comment above.

sudo touch /Applications/Visual\ Studio\ Code.app;
sudo touch /Applications/Visual\ Studio\ Code.app/Contents/Info.plist;
sudo touch /Applications/Visual\ Studio\ Code.app/Contents/Resources/Code.icns;
killall Dock Finder
@ErikHumphrey

This comment has been minimized.

Copy link

commented Jun 14, 2019

In my experience, quitting the application and restarting it (by clicking it in the Dock) almost always updates its icon, but whatever works. Logging out and back in or restarting is probably pretty fast nowadays, too.

@sebolio

This comment has been minimized.

Copy link

commented Jun 14, 2019

Windows 10. Updated. Same icon.

@jamilraichouni

This comment has been minimized.

Copy link

commented Jun 15, 2019

Windows 10. Updated. Same icon.

Same here. Windows 10, Updated VSCode, started the latest version, ran command

ie4uinit.exe -show

but still have the blue icon.

@ricarditodev

This comment has been minimized.

Copy link

commented Jun 16, 2019

How do I update the icon in windows 7?

@Oopspw

This comment has been minimized.

Copy link

commented Jun 19, 2019

Why did you choose a fish without the head as the logo?

May I remind you something from the time when the previous icon was introduced:

image

So I'd say the fish is doing better now.

that's good

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.