Explore a non-tilted icon on Mac

[chrisdias]

based on @donysukardi's comment here: https://github.com/Microsoft/vscode/issues/6607#issuecomment-335664326

[franky47]

It seems logical, at a time where almost everyone moves to flatter & simpler-looking icons (Apple, Google, even Microsoft...), to stay in the same trend, rather than moving away from it by adding unnecessary complexity.

[Rylon]

I was actually quite pleased with the introduction of the tilted icon, as it feels like it better adheres to the Human Interface Guidelines for application icons on macOS:

https://developer.apple.com/macos/human-interface-guidelines/icons-and-images/app-icon/

Many (most?) of Apple's built-in applications still follow this convention of a slight tilt, even in the latest version.

[dlech]

Apparently Apple only follows their own HIG 1/2 of the time. I count 13 out of 26 Apple apps on my laptop have the tilt. I also count that only 4 out of 50 3rd party apps have the tilt (2 of which are Visual Studio, and a total of 6 if you count 2 that are tilted in the wrong direction).

Furthermore, the Mac icon for VSCode is also used on Linux. The GNOME Desktop also uses non-tilted icons. https://developer.gnome.org/hig/stable/icons-and-artwork.html.en

Likewise, elementary OS, which is a very Mac-like Linux distro, does the same. https://elementary.io/docs/human-interface-guidelines#iconography

[Rylon]

Haha true, they're not all tilted, but I think most of the utilities are (Mail, Notes, Reminders, TextEdit, Calendar, Contacts, Pages. You're right in that they don't seem to be following it consistently. I don't see a pattern of exactly what is tilted and what isn't 😆

[coreh]

Maybe the rectangle on the back could be tilted, but the VS Code logo could be straight?

[razor-4eg]

I start used VS Code because I liked new tilted and orange icon!!! old icon was awful...

[TankedThomas]

I'm glad this is being looked into. Not sure why the Windows icons aren't just used for Mac. Looks fine to me.

[razor-4eg]

TankedThomas maybe because it’s ugly like hell? I’m seriously, I download VS Code when they used windows icon on Mac, and that icon was so disgusting, I can’t watch on it in my dock, so I stop using and return to sublime. After update it feels natural on Mac, and more native...

[mklbtz]

First, I'd like to say that I really like the rectangle with the new blue color because visually mimics the actual window (dark gray window with blue accents, by default). I also appreciate that the VS Code team has made the effort to give us an icon that fits with the Mac platform. 👏

However, one of the main issues I see is the dark rectangle tends to fade into other dark backgrounds, making it hard to pick out in a lineup.

The Apple HIG — which are of course just guidelines — mentions this effect specifically. Perhaps there's some way to incorporate this idea into the rectangle.

Consider adding a slight glow just inside the edges of your icon. If your app icon includes a dark reflective surface, such as glass or metal, add an inner glow to make the icon stand out and prevent it from appearing to dissolve into dark backgrounds.

Cheers and thanks for your hard work!

[heshuimu]

While every OS does start to make the icon and UI look "flatter", they did not abandon the "material" feel. You still see lightings and shadows, and that is how to make it look not like a 2D shape in a grid of 2D shapes on top a 2D wallpaper with zero depth. The current icon does just that, nothing much.

The first icon VS Code ever had looks really out of place among all other softwares but now that we have this new icon that looks great on the Launchpad, I don't think I'll ever going back to background-less icons. Having an icon consistent with the OS human design have not been something I can even expect from a open source application.

Plus, it does not looks small in Launchpad and Dock given that it already has a distinct color and shape.

[foresmac]

FWIW, I personally like the logo without the black tilted background as shown here: https://github.com/Microsoft/vscode/issues/6607#issuecomment-339807539

[user3587412]

I just wanted to say that I was pleased with this new icon for macOS as well.

I thought this article did a great job in terms of classifying macOS icons into 4 types: http://macreplacementicons.com/articles/mac_app_icon_categories/

I do not agree with the sentiment that the rotation makes the icon look outdated; it fits the design language of macOS perfectly--the tilt is still a convention that Apple follows for their apps that "create things", which is exactly what we're doing with Visual Studio Code.

[jonathanloske]

I have VSCode right next to Xcode and it looks like it belongs there, especially because of the tilt. I like it!

[adrientetar]

The tilt could totally be removed on Linux, there's no tilt convention there.

[lloeki]

This analysis of macOS (then OS X) icons is still worth a read. Heavily excerpted:

The Shape Hierarchy

The Circle

The circle appears to be used for apps — light weight pieces of software; entertainment, or consumer focused products.

The Square

The square seems to be used for System-related utilities.

The Tilted Rectangle

The tilted rectangle will be the most used shape out of these three. It’s used for Applications — tools to help you get work done

I'm entirely OK with the VSC tilted icon itself on a light dock. It just doesn't quite sit right with a dark dock: there ought to be some slight border for contrast or something, like the white icons on a white dock.

Note: WRT the semantics of icon shape, the one that infuriates me the most is the SourceTree icon, which is a blue circle. In my mind it just doesn't make any sense, and every single time I can't find it! Now that I reread that article I can definitely see why.

[TankedThomas]

Wait, so no one liked the new icon and now that I say it's bad, people suddenly like it? Geez...

No, the tilted icon definitely looks terrible on Mac. It's too small, for starters, and the black just sort of disappears. The icon before was perfectly fine. It needs be to visible and blend in with the system more than anything else. The black doesn't really work. Even Terminal does a better job of blending in, with the silver border.

[lloeki]

Wait, so no one liked the new icon

@TankedThomas My bad, I was ambiguous:

• I'm ok with VSCode being a tilted icon, not necessarily that titled icon.
• If it has to be a tilted icon, the icon is properly visible on a light dock, but it's definitely not good at all on a dark dock.

A particularity of tilted icons is that they represent something, with possibly an overlaying object at a different angle: a sheet, a page, a stamp, a calculator, sticky notes, some window with code... This one is a dark bland slab mount overlaid by an already busy logo at the same angle. What does that mean? There is no semantic purpose to that slab, it's horror vacui at that point. The mirrored alpha "fish" wants to be embedded into the mount but the overhanging, mirrored L combined with the slightly antagonistic shading just contradicts that, making the composition cognitively dissonant. So maybe the mirrored L itself is horror vacui, and the problem lies with being hell bent on building a family identity from a visually uninteresting graphic element that dominates the composition.

The icon before was perfectly fine

I disagree and find neither are OK, but for entirely different reasons.

[razor-4eg]

@TankedThomas I liked new icon, it great. The previous icon was terrible. It was so ugly that I deleted VSCode from the system and came back to Sublime. And when I saw the new icon I tried Code again and now using it all time.

[pluma]

Can we maybe at least get the non-tilted version without background on Ubuntu? Here's how it would look with the default dark theme:

and in the activities panel:

EDIT: Here's the PNG source I used, save it as code.png and put it in ~/.local/share/icons and Ubuntu will pick it up automagically.

[logicbus]

I have 22 icons in my dock. Two are tilted: Visual Studio Code and (iOS Device) Simulator. Everyone seems to have abandoned the tilt.

I use VSC on Mac and Windows. What if they just use the exact same icon on all OSes, just like almost every other app that is available on multiple OSes?

[cig0]

Like it's shown in @jonathanherdt screenshot, the problem isn't the tilt of the background shape but it's orientation. Since VSCode is a developer tool, more associated to Xcode than to productivity tools like Calendar, Mail or notes, the background should be horizontally tilted, not vertically.

[lloeki]

the background should be horizontally tilted, not vertically.

You mean landscape vs portrait? Because both are tilted the exact same way, standing on a grid rotated by 9°.

[cig0]

Hi @lloeki -- yes, exactly, landscape is what I meant. Thanks for the clarification :)

[piotrekkmt]

Agree that a big full scale icon would fit better between the rest of the giants in my Dock. There's an optical illusion that it's smaller even though it's not more different than the MacOS system icons. But if you're clicking the icon every single day you'd like it to be appealing and easy to find, would you not? Here's a great article about the perception of optically balanced icons https://medium.muz.li/optical-effects-9fca82b4cd9a

[jeffbax]

Could it be a user setting? I much prefer the titled graphic... I think that the Windows-icon style (just the outline) looks terribly lost -- and at least for me I feel like most of my "document" applications are indeed titled:

Naturally, the highly non-native RubyMine bucks the trend...

I will probably change to the beta build just for the orange icon though... most docks are overwhelmingly blue as it is, so I'm sad to see blue become the standard.

[publicarray]

I'm fine with the tilt, but I do click sublime text's icon by accident ;) In my option the VS Code's icon background needs to be lighter to increase the contrast on a dark background.

[mattpilott]

I can't see why we can't have a few icons to choose from in the options. At the very least there should be a different icon for the dark dock on macos. CodeKit does a thing where they auto switch the icon to either a white or dark icon depending on the macos mode you have set. Also titanium (the utility app, for macos) let's you set an icon of your choosing, which is cool

[razor-4eg]

mat3224, on Mac you can change icon to whatever you want on any file, folder or app, just change it if you want it. I’m happy with current icon on dark theme.

[mattpilott]

@averzen doesnt it get reset everytime you do an update?

[razor-4eg]

@matt3224 if update replace whole app folder - it does, if only content - it stay (if you assign icon to app_folder.app through info window.)

[christopherkang]

Did we come to a consensus on this? There will always be personal preference, but should we allow selection of tilted/straight icons or simply choose one to use universally?

[bpasero]

via https://github.com/Microsoft/vscode-docs/blob/vnext/release-notes/v1_35.md#updated-visual-studio-code-icon