Composing app icons

I'll happily shell out thousands of dollars for an excellent app icon. However, most of my own projects never reach a point where it bears any amount of ROI so I mostly make them myself. Over time, I like to pretend that I at least have built myself a usable pipeline for crafting something that looks good enough for someone who lacks the skillset of a proper designer but is able to use tools like Figma, Blender and Inkscape.

Design and AI

Quick note: I've never been able to get good designs directly from any LLM or image generation models. I've tried.

What I've found is that LLMs can be good at conceptualizing or capturing some broader idea and condense it into keywords, making it easier to start conceptualizing an icon. Hell, they're even great for creating an abstract description of the icon, but they haven't been able to generated any meaningful visual output yet.

The best tool I've used so far for generating and editing images is Figma AI. I'll feed it with some concept, some reference icon, images, palettes, and it usually is pretty alright at generating images. I already pay for Figma and this is a great value-add. I could probably get better output with great prompting and Midjourney/FLUX, but I'm not there yet.

In my opinion, the greatest downside of AI-generated visuals is that none of them generate human editable source files, like vector graphics or (workable) 3D models unless it's exceptionally simple shapes.

Tip: a trick I've found useful is to feed the model with Apple's HIG docs on app icons.

From concept to visuals

Unless I'm in a exceptional creative flow where ideas are plentiful (I'm an engineer so this relatively rare) I tend to use Claude to help me both research and boil down the product vision into visual concepts.

From there I like to prototype both by hand and by using Figma AI to test out different ideas. In this phase I'm not looking for a usable icon, but some rough sketch that captures the essence of what I want. It's kind of like modeling a car with clay; you work out the shapes and proportions, not the textures, materials and polish.

When I'm happy with the visual concept, it's time to... do even more research. This is where I'll actually spend some time finding textures and materials that I like. Keep in mind, this is meant for app icons and not logomarks. This means we can be more playful and experiment with combinations in textures, colors, even variations. It's like art, really, being able to present an icon or logomark in different types of expressions and visual directions.

Flair and style

How you want your icon(s) to look is truly subjective. Go with whatever you like. And if you're going for variants, try to mix it up a little. Not just different colors or inverted for dark mode, but different textures, shapes, lighting, etc.

Nowadays, I tend to lean into a more physical and three-dimentional direction. I really like the depth and tactility of a good three-dimensional icon. This usually means that I'll often use Blender or Cinema4D in order to capture both physical materials but also lighting and depth.

There's a lot of true wizard designers who are able to create depth using vector-based tools, like Inga Hampton. I'm just a lvl 1 deng¹ so I'll stick to the tools that don't require me to think as much.

The great thing about 3D tools is that there's a ton of pre-made, readily available materials on the internet. Whatever type of physical material or shader you're after, it's just a quick search away.

The render

When I'm satisfied with lighting, materials, textures, shaders and composition, I'll render out the final image. A regular 1:1 raster output is okay, but we're not aiming for okay. We're splitting up our render to preferably export every depth layer isolated. If I have 3 visually distinctive layers in my composition, I'll perform 3 renders.

This way we can use tools like Apple's Icon Composer to generate truly dynamic icons while maintaining the visual hierarchy. Likewise, we can also utilize Android's 2-layer icon representation to create a nice parallax effect.

That's it.

Some notes, links and thoughts

• Use Apple's Human Interface Guidelines. These are great.
• When rendering for export to Icon Composer, keep in mind that iOS/macOS apply a 45° light on the icon itself. Use this for shading and lighting your own objects.
• Play around with concepts. App icons can be dynamically updated and driven by real data, but don't do something just because you can.
• Learn the foundations of three-dimensional lighting.
• Play with materials (roughness, metallic, refraction, sheen).
• Go extreme when experimenting and tone it down afterwards.
• There's nothing wrong with quick hacks.

Footnotes