Icon change for macOS Big Sur

[ardacebi]

macOS Big Sur brings macOS' system icons all with square corners, and some 3rd party developers including Adobe are converting their app icons to match up with these system icons.

Are there any plans for VS Code?

[jessety]

I second this. It's not like all 3rd party apps will adopt the new icon style overnight, but after a while the ones that haven't will start to stick out like a sore thumb.

[ardacebi]

@jessety The release of the developer betas are meant for changes like these. Until September/October, most likely most/all apps will already be using the new shape. And as you said, the ones that aren't will stick out.

Design-wise, this is a really bad practice. An example would be:

A similar situation will happen to all apps when Big Sur is released, this time with circle and freeform icons.

[rhoeltge]

The old macOS icon proposal might be well suited for this change (but in a square shape instead of the hexagon).

[austincondiff]

Perhaps something like one of these?

Light	Light Bordered	Light Overhang
Dark	Dark Bordered	Dark Overhang

This may be a separate issue but I think it might be nice to change the icon according to the theme you have installed. The light version would be used for light themes and the dark for dark themes. The color of the logo could be influenced by the primary color of the theme, and the background of the icon could be influenced by the background color of the theme.

EDIT
For those interested, I've done more icons. You can download them here.

[rhoeltge]

Well, I think adaption to the current theme might be way better suited for an extension. The blue logo simply is a part of VSCode’s branding and shouldn’t be changed by default. Other than that it would make it way harder to differentiate between the Stable version and the Insiders build, if you do use both with the same Theme. Also I’d say that it theoretically would make more sense to switch between the light and dark version depending on the OS setting, but even that would be unexpected behaviour as Apple’s own ions don’t do that as well.

But other than that, I sure do like the standard and the Bordered Icons. The Overhang versions seem unbalanced to me though.

[mohouyizme]

Check out this, I made some icons 2 weeks ago
https://github.com/mohouyizme/vscode-big-sur-icons

[ardacebi]

@mohouyizme These are nice, but a shadow for the new look would be better in my opinion. See @austincondiff's icons.

[mohouyizme]

@ardacebi yes I agree, I did that on purpose, I tried to keep it simple without affecting the identity of the logo, maybe adding a shadows version will be good.
I don’t think shadows are a standard thing or I’m wrong?

[austincondiff]

@mohouyizme shadows are a huge part of the neumorphism technique Apple is following in their Big Sur icons. It is however debatable whether or not every third-party icon needs to adopt it. I think it is always good to be consistent while adhering to brand standards.

[imkarthikk]

Check out this, I made some icons 2 weeks ago
https://github.com/mohouyizme/vscode-big-sur-icons

This is beautiful. Thanks mate.

[ardacebi]

With the macOS Public Beta getting out, this is getting more important. Do we have any updates regarding this?

[austincondiff]

I agree with @ardacebi. Does someone need to submit a PR for this or can a current maintainer pull one of these options in?

[tborychowski]

Hi @austincondiff,
Thanks mate, I love the icons!
Just 1 comment re:

change the icon according to the theme you have installed

I'd rather have an option in settings to do that. The reason is: I use dark themes everywhere and a very dark wallpaper.
If the dark icon would show up on that - the dark plate of the icon would blend with the background, e.g. like plex does currently:

So, using dark theme, I prefer the icons to have more contrast.
Same as on iOS - a lot of icons use white plate, and more apps allow you to change your icon now.

[austincondiff]

@tborychowski https://macosicons.com

I completely agree though!

[jpike88]

Big Sur is about to come out... @sandy081 thoughts?

[austincondiff]

Here's another choice...

[tborychowski]

Thanks @austincondiff that looks fantastic on my dock!
Here's the icns version: vscode.icns.zip
and the script for lazy people like me 😄

sudo cp "~/Desktop/vscode.icns" "/Applications/Visual Studio Code.app/Contents/Resources/Code.icns"
sudo touch "/Applications/Visual Studio Code.app"
killall Finder && killall Dock

[jdsimcoe]

Love this @austincondiff!

[MiddsAU]

Those mockups look really fantastic @austincondiff - would love to see some form of icon update now that we're at a general release, but am sure there's a ton of stuff on the devs plate atm :)

[Stanzilla]

could even go extra fancy and do something like this https://github.com/rrroyal/AutomaticDockTile

[kristof12345]

Perhaps something like one of these?

Light Light Bordered Light Overhang Dark Dark Bordered Dark Overhang This may be a separate issue but I think it might be nice to change the icon according to the theme you have installed. The light version would be used for light themes and the dark for dark themes. The color of the logo could be influenced by the primary color of the theme, and the background of the icon could be influenced by the background color of the theme.

EDIT
For those interested, I've done more icons. You can download them here.

Hi!
Great work!
Is there a way to download these? Also the same icons for Visual Studio (NOT code) would be great too.
Thanks.

[tborychowski]

@kristof12345 have a look here: https://macosicons.com/

[jrmileham]

@austincondiff Can I get a copy of your icons that you mention above (#101014 (comment))? They're soo much more inspiring than the ones with white backgrounds.

Also as a general note, this issue (#101014 (comment)) still happens even on intel only graphics. I don't think there has been an electron update between this and last version? So why broken now?

[kowalski7cc]

Next step will be to make all icons with same colors, and white background, so you will be not able to distinguish them. Just like with Google new garbage design icons

[alicerunsonfedora]

In the end, if you don't like the Icons it's more than easy to switch them out on macOS.

That's not completely true, after each update the icon is reset.

I've found that the Pictogram app is a good workaround as it adds a helper that will automatically replace the icon for you if it isn't the one you applied: https://pictogramapp.com

[quenbyako]

Am i supposed to talk how strange does white background looks now?

Of course, i can patch app bundle with old icon, but... Ehm... Maybe we can at least add choice in preferences?

Don't think that i gonna toxicate this issue thread, i REALLY appriciate designers work. The icon is amazing. But it could be better, if vscode user to choose 🙃 (don't mind anything bad, really.)

P.S. btw, this icon looks really nice, i love it! Why are you guys choosed white background? 😂

[quenbyako]

Horrible, lazy icons.

@bdougherty (and other P.I.T.A. guys) Calm down, dude 🤨

Cmon, don't hate guys who contributed new icons! Apple design system is sometimes not amazing (like in a this situation), but let's be honest: guys who drew this icons are not lazy at all. Just white background doesn't fit at all wallpapers and dark theme at the same time

[GautamMakadia]

Not sure if it's something todo with my machine, but the Icon shows a render issue in smaller sizes. It's fine in the dock and big preview sizes.

Running the latest build (Commit: 111a6ce) of Insiders on macOS Catalina (10.15.7)

Not sure if it's something todo with my machine, but the Icon shows a render issue in smaller sizes. It's fine in the dock and big preview sizes.

Running the latest build (Commit: 111a6ce) of Insiders on macOS Catalina (10.15.7)

also in the macOS bigsur 11.2.3, I have same issue.

[thijsvandien]

Generally, I think the new icon is fine, although I liked the one with overhang better. I do agree that the white background is too white now. Not a single other app icon here uses #ffffff; it's all #f5f5f5, #fbfbfb, #fcfcfc, #fefefe and so on. Hard to say what it should be, but pure white is definitely too harsh. Perhaps not providing a guideline for that was an oversight by Apple, because I'm not looking forward to so many distinct whites in my dock.

[quenbyako]

@thijsvandien still has question: is it so hard to make custom option in preferences? or, lol, even better, why not to allow user themes change icon?

I've researched this problem, looks like any app can replace its own icon without requiring any permissions (just patching app bundle, symlinks allowed), soooooo why not to? Real deal is to make this option intuitive, cuz apps doesn't update them icons without removing from dock and adding it again, maybe macos api provide some method, which could force reload app data on all system

[stevepsharpe]

So my app icon updated today. How do I revert my icon back? Does anyone know where I can get the previous .icns file? It doesn't look like it's in this repo.

[plfoley]

Same issue in the Launch Pad.

However when I expand the tile to display its content the VSCode icon appears fine.
It seems to be related to displaying the scaled down version of the icon.

[eliyap]

So my app icon updated today. How do I revert my icon back? Does anyone know where I can get the previous .icns file? It doesn't look like it's in this repo.

Check out Pictogram if you're on Big Sur, and this .icns
Code.icns.zip

[mrleblanc101]

@misolori
How did you get that Big Sur Teams icon ? Is that a sneak peak ?
Same question for Spotify, is that a custom icon or is this a beta version ?

[josephillips85]

I hope is just a test this is on a stable release at least please change the background color a little bit less white

…

On Sat, Apr 3, 2021 at 2:12 AM Sébastien LeBlanc ***@***.***> wrote: @misolori <https://github.com/misolori> How did you get that Big Sur Teams icon ? Is that a sneak peak ? Same question for Spotify, is that a custom icon or is this a beta version ? [image: 112679588-920c1200-8e29-11eb-8d65-98a1ede95732] <https://user-images.githubusercontent.com/17392251/113471451-4dd0d100-942a-11eb-8dbb-8d358c6a4969.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#101014 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG3RNOUST3NEIF2XFIHKIW3TG25WDANCNFSM4OIFAPWA> .

[miguelsolorio]

For those encountering issues with the app icon appearing glitched, please see #120305 as we're planning to roll out a patch for it this week.

[quenbyako]

@misolori what about changing icon in preferences feature? Btw, it could be useful in other OSes, cuz it looks like too many people don't like new logo with white background

[miguelsolorio]

For those wanting to configure the app icon, please upvote and subscribe to #120604

[vasilenka]

So my app icon updated today. How do I revert my icon back? Does anyone know where I can get the previous .icns file? It doesn't look like it's in this repo.

Check out Pictogram if you're on Big Sur, and this .icns
Code.icns.zip

Hi @eliyap, can you point me out where I can get the previous icon for the Insiders build, please?

[ndevenish]

Excellent, I always wanted all the icons on my bar to look the same blank white square with tiny symbol in, it was far too easy to click on the app I wanted without carefully studying my dock 👍 big improvement

[JamieGoodson]

I'm glad the team want to make the icon design more inline with Big Sur, however this white background is very stark and almost hurts the eyes to look at against the rest of my dock icons. The white also makes the app look 'non-devy' and more 'everyday consumer' focused, which makes me feel like the product isn't aimed at pros (at least in the context of code editors).

I feel a grey/dark background would look more pleasing as well as more 'devy' 🙂

I'm currently using an alternative icon which I much prefer.

Credit: https://github.com/dhanishgajjar/vscode-icons

[floatingpurr]

I'm on BigSur 11.2.3 (20D91)

VS code:

Version: 1.55.2
Commit: 3c4e3df
Date: 2021-04-13T09:36:32.643Z (1 wk ago)
Electron: 11.3.0
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Darwin x64 20.3.0

But the icon in the dock did not change after the upgrade.

[floatingpurr]

Ok, fixed with this #101014 (comment)

[jaymegordo]

@austincondiff do you have those dark icons for code-insiders (green ish) available for download? The dark w shadow is 👌🏻