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

Explore a non-tilted icon on Mac #36692

Open
chrisdias opened this Issue Oct 21, 2017 · 31 comments

Comments

Projects
None yet
@chrisdias
Member

chrisdias commented Oct 21, 2017

based on @donysukardi's comment here: #6607 (comment)

@chrisdias chrisdias added the icon label Oct 21, 2017

@chrisdias chrisdias self-assigned this Oct 21, 2017

@Mlocik97-issues Mlocik97-issues referenced this issue Oct 24, 2017

Closed

All issues related to icons. #35746

14 of 17 tasks complete
@franky47

This comment has been minimized.

Show comment
Hide comment
@franky47

franky47 Oct 25, 2017

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.

franky47 commented Oct 25, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Rylon

Rylon Oct 31, 2017

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.

Rylon commented Oct 31, 2017

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

This comment has been minimized.

Show comment
Hide comment
@dlech

dlech Nov 2, 2017

Contributor

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

Contributor

dlech commented Nov 2, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Rylon

Rylon Nov 2, 2017

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 😆

Rylon commented Nov 2, 2017

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

This comment has been minimized.

Show comment
Hide comment
@coreh

coreh Nov 4, 2017

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

coreh commented Nov 4, 2017

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

@averzen

This comment has been minimized.

Show comment
Hide comment
@averzen

averzen Nov 9, 2017

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

averzen commented Nov 9, 2017

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

@TankedThomas

This comment has been minimized.

Show comment
Hide comment
@TankedThomas

TankedThomas Nov 9, 2017

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

TankedThomas commented Nov 9, 2017

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

@averzen

This comment has been minimized.

Show comment
Hide comment
@averzen

averzen Nov 9, 2017

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

averzen commented Nov 9, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mklbtz

mklbtz Nov 9, 2017

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.

code logo

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!

mklbtz commented Nov 9, 2017

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.

code logo

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

This comment has been minimized.

Show comment
Hide comment
@heshuimu

heshuimu Nov 9, 2017

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.

heshuimu commented Nov 9, 2017

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

This comment has been minimized.

Show comment
Hide comment
@foresmac

foresmac Nov 9, 2017

FWIW, I personally like the logo without the black tilted background as shown here: #6607 (comment)

screen shot 2017-11-09 at 1 44 52 pm

foresmac commented Nov 9, 2017

FWIW, I personally like the logo without the black tilted background as shown here: #6607 (comment)

screen shot 2017-11-09 at 1 44 52 pm

@user3587412

This comment has been minimized.

Show comment
Hide comment
@user3587412

user3587412 Nov 10, 2017

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.

user3587412 commented Nov 10, 2017

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.

@jonathanherdt

This comment has been minimized.

Show comment
Hide comment
@jonathanherdt

jonathanherdt Nov 10, 2017

I have VSCode right next to Xcode and it looks like it belongs there, especially because of the tilt. I like it!
screen shot 2017-11-10 at 10 23 21

jonathanherdt commented Nov 10, 2017

I have VSCode right next to Xcode and it looks like it belongs there, especially because of the tilt. I like it!
screen shot 2017-11-10 at 10 23 21

@adrientetar

This comment has been minimized.

Show comment
Hide comment
@adrientetar

adrientetar Nov 12, 2017

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

adrientetar commented Nov 12, 2017

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

@lloeki

This comment has been minimized.

Show comment
Hide comment
@lloeki

lloeki Nov 13, 2017

Contributor

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.

screen shot 2017-11-13 at 09 38 57
screen shot 2017-11-13 at 09 38 40

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.

Contributor

lloeki commented Nov 13, 2017

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.

screen shot 2017-11-13 at 09 38 57
screen shot 2017-11-13 at 09 38 40

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

This comment has been minimized.

Show comment
Hide comment
@TankedThomas

TankedThomas Nov 15, 2017

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.

TankedThomas commented Nov 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@lloeki

lloeki Nov 15, 2017

Contributor

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.

Contributor

lloeki commented Nov 15, 2017

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.

@averzen

This comment has been minimized.

Show comment
Hide comment
@averzen

averzen Nov 16, 2017

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

averzen commented Nov 16, 2017

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

@bpasero bpasero added mac and removed workbench labels Nov 16, 2017

@pluma

This comment has been minimized.

Show comment
Hide comment
@pluma

pluma Nov 17, 2017

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:

logos of Google Play Music, Franz, Gnome Terminal, VS Code, Firefox Quantum and Nautilus in the Ubuntu side bar

and in the activities panel:

smaller version of the VS Code logo in the Activities switcher

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.

pluma commented Nov 17, 2017

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:

logos of Google Play Music, Franz, Gnome Terminal, VS Code, Firefox Quantum and Nautilus in the Ubuntu side bar

and in the activities panel:

smaller version of the VS Code logo in the Activities switcher

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

This comment has been minimized.

Show comment
Hide comment
@logicbus

logicbus Nov 20, 2017

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?

logicbus commented Nov 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@cig0

cig0 Nov 21, 2017

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.

cig0 commented Nov 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@lloeki

lloeki Nov 21, 2017

Contributor

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

Contributor

lloeki commented Nov 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@cig0

cig0 Nov 21, 2017

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

cig0 commented Nov 21, 2017

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

@piotrekkmt

This comment has been minimized.

Show comment
Hide comment
@piotrekkmt

piotrekkmt Nov 21, 2017

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

piotrekkmt commented Nov 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@jeffbax

jeffbax Nov 27, 2017

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:

screen shot 2017-11-27 at 6 17 31 pm

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.

jeffbax commented Nov 27, 2017

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:

screen shot 2017-11-27 at 6 17 31 pm

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

This comment has been minimized.

Show comment
Hide comment
@publicarray

publicarray Dec 3, 2017

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

publicarray commented Dec 3, 2017

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

@matt3224

This comment has been minimized.

Show comment
Hide comment
@matt3224

matt3224 May 4, 2018

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

screen shot 2018-05-04 at 13 19 45

matt3224 commented May 4, 2018

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

screen shot 2018-05-04 at 13 19 45

@averzen

This comment has been minimized.

Show comment
Hide comment
@averzen

averzen May 5, 2018

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.

averzen commented May 5, 2018

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.

@matt3224

This comment has been minimized.

Show comment
Hide comment
@matt3224

matt3224 May 5, 2018

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

matt3224 commented May 5, 2018

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

@averzen

This comment has been minimized.

Show comment
Hide comment
@averzen

averzen May 6, 2018

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

averzen commented May 6, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@christopherkang

christopherkang Oct 3, 2018

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?

christopherkang commented Oct 3, 2018

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment