Making an Icon for VS Code
Visual Studio Code is a code editor favored by many developers, including my partner. Being an iOS & web developer, he’s been using VS Code a ton for years. He even writes our iOS app using mainly VS Code instead of Xcode. Yet when it comes to the VS Code icon, things become less rosy.
VS Code’s official app icon has been evolving throughout the years without getting much approval. Back in 2017, they introduced an update that even provoked lots of negative feedback :(
In 2020, with the release of macOS Big Sur, many app icons started to share a rounded-rectangle shape in order to convey a look that “belongs in macOS 11”. Same for VS Code. But this uniformity came with side effects. When you place the white square background icons next to each other in the Dock, it feels like they’re cut from the same cloth.
So why not make some icons that fit our own needs?
Inspiration
I had always thought that the Visual Studio icon came from the infinity symbol. And I was totally wrong. According to this video, the original icon depicted two circles each representing the Intranet & the Internet, which were then combined by an “X” resembling the ActiveX flow. It presented a way data moving between the two worlds. So obvious.
Apparently there was no point in aligning with that. Back to infinity. I’ve always been a fan of the Monument Valley game, and I admire M.C. Escher’s amazing artworks constantly. Infinity, I choose you.
Design
With the original icon as a reference, there was no need to start from scratch. It was about looking for better ways to render the geometry.
I started by sketching on paper — it always feels easier on paper for me, a large piece of paper. I preferred to have the main shape with round corners, and here’s what I ended up with.
Sometimes I’d build a simple 3D model which offers great flexibility. But drawing was enough for this simple and abstract icon.
Next was about redrawing the outlines in Adobe Illustrator to have everything in vector. I played around with the line weights and proportions until I found a balance.
Then it came to adding colors (I picked the basic colors from the official blue icon). Colors are really about lights and shadows — imagine what material the surface feels like, and where the light comes from.
With the main shape ready, I made two other variations — one with an editor as the background, another one highlighting the outlines which we later named “Outlier”.
The Human Interface Guidelines on App Icon is a good place to look for tips on how to make things look real. For example, with the editor one, I added a slight interior shadow to the editor contour, applied a tiny amount of highlight to the code lines, and dropped a light gradient to the upper-right corner to make it feel like glass. Choose how deep you wanna go depend on the time you have.
Download for free
You can check out the icons here.
Let us know what you think about them. Thanks and have fun!
About me
I’m the designer of a two-person indie team. I also spend time on drawing comics about our indie life.
