DEV Community

David Neal
David Neal

Posted on • Edited on

Customize Your VS Code Icon

(Or any application icon, for that matter.)

The orange Visual Studio Code icon seemed to rub a lot of people the wrong way. So much so, Microsoft is changing it in the next release.

Some folks were so displeased with the "pumpkin spice" icon, they started replacing it with something else.

I came up with a couple of my own variations, reminiscent of our old MS Office friend, Clippy.

You can download the files for Windows or Mac at: https://github.com/reverentgeek/vs-code-icons

Let me know if you have any suggestions or requests for your own custom icons!

How to change an application icon on macOS

  • Download or clone the GitHub repository
  • Open the desired .iconset folder
  • Double-click on the largest .png file to open in Preview
  • Press CMD+C to copy the image to your clipboard

  • Open your Applications folder
  • Right-click on the Visual Studio Code application
  • Click "Get Info"

  • Click on the application icon in the top-left corner
  • Press CMD+V to paste the custom image

You are now operating in beast mode.

How to change an application icon on Windows

While it is technically possible to change an application's icon in Windows by carefully modifying the .exe file (not for the faint of heart!), the only practical thing you can do is change the shortcut.

  • Download or clone the GitHub repository
  • Launch the VS Code application
  • Right-click the running application and pin the application to your taskbar (if you haven't already)
  • Close the application
  • Shift+Right+Click the pinned application on the taskbar
  • Click "Properties"

  • Click the "Change Icon" button

  • Click the "Browse..." button

  • Locate the desired .ico file and click "Open"

At least your pinned application looks awesome!

Top comments (15)

Collapse
 
ben profile image
Ben Halpern

This is the most amazing thing I've ever seen

Collapse
 
reverentgeek profile image
David Neal

Glad you liked it πŸ˜€

Collapse
 
igorshubovych profile image
Igor Shubovych

They should open plugin API, so everybody will be able to donate their own weird icons!
Having weird icons cannot be controlled by corporation!
We need freedom of creating weird icons!

Collapse
 
reverentgeek profile image
David Neal

Great idea πŸ˜„

Collapse
 
edwin_r_c profile image
Edwin Ramirez

@david Neal I'm not sure you realize what you started here. You just created a need, a need to customize our favorite IDE/text editor with wacky icons. You better be prepared to satisfy that need with a constant stream of wacky icons from now on.

Collapse
 
reverentgeek profile image
David Neal

I am ready and willing to accommodate all wacky shenanigans.

Collapse
 
argherna profile image
Andy Gherna

This is so ridiculous. Why is everyone so upset about the icon change? It doesn't change at all how good the editor is!

Collapse
 
edwin_r_c profile image
Edwin Ramirez

Some people really, really care about logos and icons. Every time there is some company or team changing their logo, there is somebody in the comment section arguing about its bad design, bad color combination, etc.

Collapse
 
reverentgeek profile image
David Neal

It didn’t bother me much, but some folks sure had strong opinions about it!

Collapse
 
marcfearby profile image
Marc Fearby

This is OK if you want to look at the different icon on your pinned taskbar without opening the app. As soon as you load VSCode, its internal icon takes over and the custom icon is gone :-(

Collapse
 
whozzawuzza profile image
'''⌐(ಠ۾ಠ)¬'''

They’re changing it back now.

Collapse
 
reverentgeek profile image
David Neal

Yes!

Collapse
 
nick_leake profile image
Nick Leake

Dig the orange myself but was definitely curious as to the reasoning behind the change.

Collapse
 
peirama2 profile image
peirama2

I use macOs and had to copy/paste the entire folder with all the icons sizes to make it work.

Collapse
 
smakosh profile image
smakosh

Lol nice idea