Skip Navigation

The new Sketch icon: how we redesigned a classic for Big Sur

“We tried to explore as many ideas as possible to see what we could do with the new style”

Last month we released version 70 of our Mac app with a major UI refresh for macOS Big Sur. And while our design team spent a long time working out the best way to get Sketch looking great in the updated OS, they had another project to think about — a new icon for the Mac app.

The UI needed hundreds of hours of work to get pixel-perfect, but redesigning an icon that may sit in your Dock (and in front of your eyes) all day, every day is no small task either.

This week we sat down with the project’s Design Lead, Prekesh, to find out how he went about re-imagining the Sketch icon for a new era, and why it was never as simple as just recreating our famous diamond.


Experimentation

Reimagining an icon that’s so well-known across the industry is no easy challenge. For Prekesh, the goal was to try and do something new, while maintaining the essence of Sketch.

“I think I called the first document I created ‘definitely not a diamond on a white box‘,” he says, with a wry smile. “We tried to explore as many ideas and options as possible to see what we could do with Big Sur’s new style.” He isn’t kidding. The process started with almost 50 concepts on an iPad, drawn using an Apple Pencil.

“I just started sketching a bunch of ideas that came to my mind, no matter how outlandish,” he explains. “The goal was to throw ideas at the wall and see what stuck, what didn’t, and what we could move forward with.” Next, he took those drawings into Sketch and started exploring the different approaches in higher fidelity.

An image showing some of the initial idea sketches that Prekesh created.

Prekesh had some fun exploring ideas in the initial sketching stage: “Not all of these were realistically going to actually become app icons, but I took the ones I liked the most to Sketch.”

As he posted updates in our internal Slack channels, excitement started to grow, and he got a ton of useful feedback from other designers on the team. Some of the more ‘out there’ designs really picked up some interest, as Prekesh thought about the pros and cons of reinventing the app’s icon entirely.

An image showing some initial sketches of icons with pens and nibs alongside vector versions of those icon ideas.

After exploring some ways to incorporate vector editing and the Pen too, Prekesh found that these ideas got messy as the icon scaled down — plus, Sketch is much more than a vector editor.

An image showing some initial ideas of icons with pencils overlaid on rectangles, with vector versions of these ideas next to them.

Prekesh had a great time making extra tools like pencils, but these ideas were too monochrome.

“We experimented with moving away from the diamond, but that seemed a little silly considering that it’s such a strong part of our brand,” he explains. “So we created a bunch of new diamond shapes — some with perspective, some without; some with more faces, some with less.” From there, it became of question of which ones worked best, and how to integrate these elements with different backdrops.

An imagine showing a top-down reimagining of the Sketch diamond in an early drawing and a vector version of that drawing.

He started moving onto ideas that used the diamond, but in different ways. By taking an old alternative top-down icon he’d worked on and tweaking it to fit into the squircle shape.

Finding the balance

Getting the balance right between the foreground shapes and the background was particularly tough. “Something we found out very quickly was that there was often a visual struggle between the rounded rectangle backdrop and the diamond,” he says. “We knew we needed to find a way for them to compliment each other, rather than fight for the viewers’ attention.”

An image showing sketches and vector versions of icon ideas that used the new Sketch UI and a semi-transparent diamond.

These were the first ideas that included elements of the Sketch UI in the icon. Prekesh tried working some transparency into it — both in the diamond and the sidebar.

An image showing different ways of using the diamond overlaid on an illustrated version of the Sketch UI, with annotations explaining the pros and cons of each approach.

As concept work continued, the window and diamond metaphor stuck. Balancing the background and diamond proved a challenge, which resulted in Prekesh simplifying the background slightly.

As work progressed, two frontrunners emerged, both on a similar background — one using something very close to our current diamond, and another that took a more 3D approach.

An illustration showing the two diamond designs that Prekesh worked with during development.

Since we were refreshing the icon, Prekesh also worked on a new, 3D version of the diamond. You’ll see this slightly tilted variant used throughout the other mockups on this page.

A 3D render of the two diamond shapes that Prekesh worked with during development.

He then used Blender to create rough 3D renders for lighting reference.

In the end, after several weeks of internal testing and a lot of input from teams across the company, the decision was clear. This would be our final icon:

The final icon, shown on the left standing on its own, and on the right in a macOS Dock

By stripping back the icon’s background to its basics and adding a subtle transparency to the sidebar, we think it achieves a nice balance.

It’s all in the details

For Prekesh, it’s the small details that make our new icon special. “I like its subtlety,” he says. “There are details and iterations that update the previous icon, but don’t necessarily move too far away from what makes the Sketch icon the Sketch icon.” But after all his outlandish sketches, is he disappointed that we ended up with a design that’ll feel familiar to people?

“Not really — that’s kind of what felt right to go with after all of our explorations,” he explains. “And there are some subtle details that I love. The rounded rectangle background is actually a simplified representation of Sketch’s Big Sur user interface, and the Sidebar on the left has transparency, which means it ever-so-slightly takes on the background color of your wallpaper.” The diamond itself got some love too — Prekesh redrew and re-colored it from scratch to improve the contrast and make it slightly more vibrant. Plus, a new, deeper shadow makes it feel like it’s really floating in front of the UI.

The subtle transparency in the sidebar means you get a hint of your wallpaper through the icon.

Prekesh says he took his inspiration from Big Sur’s new design, and Apple’s own icons — of which he’s a big fan. “I love the new direction,“ he says. “The restriction of the rounded rectangle for icons will no doubt encourage people to use that space more creatively.”

Reflecting on the process of reinventing such a well-known icon, Prekesh admits he felt the huge responsibility on his shoulders. “It was a little surreal at first, because I’ve looked up to the designers of the previous icons for basically my entire career,” he explains. “For Emanuel Sá, (our Chief Design Officer) and Marcelo Marfil, (our Design Director) to entrust me to explore and create the next iteration of the app icon felt pretty great. But the pressure was on!” he laughs.

The Sketch Cinematic Universe

As if redesigning the icon you’ll see in your Dock every day wasn’t enough of the challenge, that wasn’t the end of the journey. As well as the version of our Mac app that you use, we also maintain several test builds, each at a different stage of development. From the QA team’s Debug version and the early Experimental build, all the way through to our Private and Public Beta versions, we use different icons for each so it’s clear who’s testing what features, and when.

An image showing the six icons we used to use to denote different internal versions of the Mac app.

Before, each release build had a different colored diamond. In the top row: Release, Beta and Private. In the bottom row: Internal, Experimental and Debug.

Before, we simply used different colored diamonds to denote the different versions. But for Big Sur, Prekesh decided to have some fun. “I thought of ideas where there was literal visual progress from the ‘Xcode build’ icon all the way to public release icon, and they sort of told a story,” he explains. “But that would only make sense to us internally, and didn’t feel like the right approach for these.”

The result is six completely unique icons, each with its own color scheme and flavor. It was a chance for Prekesh to bring some of those early, more outlandish ideas to life.

An icon design inspired by the Matrix, with green outlines and green characters floating in the background.

This Matrix-inspired design very nearly became the icon for our Debug release. In the end, the team decided on a design that felt closer to Xcode’s blue macOS icon.

“Our Experimental build always includes the newest features that we’re working on, and Glenn Hitchcock, (another member of the design team) had the idea to try something that showed that it was really ‘out there’. So why not put the diamond in space?”

The new icon for our internal ‘Experimental’ release, featuring a purple diamond on a space background.

The Experimental build icon. In this case, the it really does to live up to its name.

And what about the icon hiding behind the curtain? “That one’s slightly funny. We wanted to tease the new icon on Twitter, so I spent most of a day drawing the cloth for what was just going to be used in a teaser image,” he laughs. “After all that work, I realized we could actually use it for our Private Beta icon. So that saved me some time!”

An image of an early sketch of a diamond icon covered by a cloth, next to the finished version of the icon we now use for our Private build.

”Marcelo specifically told me not to spend too long on this because it was for Twitter and I still had more work to do on the icons,” smiles Prekesh.

For Prekesh, the challenge was to give each icon its own identity — and make sure it communicated something about what people should expect from that version. He’s pleased with the results. And it’s fair to say they’ve gone down well with the rest of the team internally, too.

An image showing all six new Sketch icons in a grid.

The full team assembled. In the top row: Release, Beta and Private. In the bottom row: Internal, Experimental and Debug

“I suspect some people will see these and want to use them as their main Sketch icon,” he smiles. “Hey, all I can say is: we’re hiring — come join us!”


We love giving you behind-the-scenes peeks at the work we do on Sketch. What would you like to see? Let us know on social and we’ll consider your ideas for our next sneak peek. For now, we hope you enjoy using the latest Mac release.