How we designed our app icon

Our logo is made up of 7 squares. It's an icon that represents our company, our product, and the work all of us do — even if they're blocks in a simple arrangement.

But the design of an app icon is how the logo (the foreground or label) is rendered in the context of its button (the background shape).

After all, it's a rounded square — and like many of the greatest buttons, this digital button should feel utterly satisfying to see and press on a regular basis.

This thinking led us to ask the question, "What is this button made of?"

Since the beginning of our brand evolution, we've used some kind of iridescent and reflective surface to convey a certain meaning for:

• Many different reflections or wavelengths (ideas) on a surface
• A record of these moments
• A shining canvas by which work can be presented

Here's a screenshot from an early moodboard:

We decided that the icon would be "shiny" long before seeing what that might look like. Naturally, the next step was to determine how we would achieve this look.

the right tool

We knew that the best way to capture a stylized spectrum of color was to render it in a 3D environment. By building the entire world for this scene, we could control every aspect of shape, lighting, reflection, roughness, transparency, and even the way light bends.

But we've never created anything in 3D before.

So between May → July 2022, I taught myself how to use Blender and modeled over 50 versions of the app icon.

the shape

At first, I started noticing that rounding the corners on a cube yielded some gnarly (harsh) reflections that distracted from the logo.

I tried softening the light, adding smooth modifiers, and played with all kinds of materials thinking I was probably doing too much.

I paused this exploration out of frustration... until I unexpectedly came across the perfect reference.

My wife and I were playing mancala one evening.

I remembered how much I loved the geometry of each glass marble. It was flatter, almost like an M&M would be, but not as sharp. It's a wonderful-feeling-shape in one's hand.

Reflections were also so much smoother on this shape, so I took this thinking back to Blender and approached the icon base with this in mind.

A rounded square version of this geometry absolutely resulted in nostalgia for me:

I constructed a plump chiclet and it was exactly the feeling I was looking for:

I applied some reflectiveness to the material, tweaked the surface roughness, and started to see the idea come to life:

The color

Our brand palette has evolved. In the past, we've used a solid "blurple" primary color for brand collateral and in-product UI.

But in 2022, we've gone from using a single color → a multitude of purples, blues, and magentas that all swirl around to form a wonderful gradient backdrop.

Related Post — Sound & Motion: How we designed our animated bumper

With the surface of the app icon at my desired reflectiveness/roughness, I went on to define the environment that would create the reflections I wanted.

I applied a gradient ramp through a noise filter and exported the results as an extremely large, flat, image called an HDRI. This monstrous abstract image was plastered as the visual world within my 3D scene.

The HDRI behaves like light sources, throwing light and color all around.

I simply rotated the world until I found a pattern of reflections that were pleasing to see repeatedly without distracting from the logo.

I set the camera to an orthographic lens.

This orange frame just above the Threads logo is the camera, cropped in real close so that the edge of the frame matches the size of the overall shape.

This approach gave me a clean, square image with transparency for export.

And because of the way I constructed this app icon as a real 3D object, I'm able to animate it for many different uses!