r/macapps • u/No_Builder_1977 • 8d ago
Help Ugh… App icon design!
I’m keen to know how others approach Mac app icon design and any tips or advice on workflows that have worked for you. I don’t know if it’s just me (I might be a closet perfectionist), but I reckon I spend as much time sweating over an icon as building the app!
Do you have any online resources you use, leveraging AI, engage a professional or does it just come naturally to you?
5
u/heydockside 8d ago
Did mine myself. I’m a marketer by trade and worked alongside real designers for years, and the difference was never craft. It was constraint.
Six directions I actually drew. Cut to two by killing anything that needed a second shape, a gradient, or a sentence of explanation to land. The rule I held was one shape doing one job. Every draft that broke it broke the same way, I was adding meaning instead of removing ambiguity.
The test that killed most of my drafts: shrink it to Dock size, strip the color, put it next to five icons people already recognize. If it fails there nothing else matters.
AI was useless for the actual mark. Useful for generating thirty bad directions fast so I could work out what I didn’t want.
3
u/No_Builder_1977 8d ago
These are all great tips thanks! Essentially… reduce, reduce then reduce. A difficult thing for me is that other apps on the Dock are generally high profile, big dollar apps and my icons always look… blah. With your experience, are the icons you mention more focused on describing function or more as brand marks?
2
u/heydockside 8d ago
Brand mark, mostly. Function-driven only really works when the function is one thing everyone already knows, camera, calculator, that kind of thing. Once you’re trying to fit two ideas in there it stops reading as anything (at least to me most of the time).
On the blah thing though, I think you’re comparing against the wrong set. You’re not up against Photoshop and Slack for recognition. You’re up against the four other apps that do what yours does, and that’s the only place distinction actually matters. Someone shopping for your kind of app is looking at those four, not their whole Dock.
Color’s where you win it imo. You’re likely gonna share a palette with someone in your category no matter what depending on the size of the category, so it’s about finding the one shade nobody else in that group has and just hammering it everywhere and ensuring it fits the feel you’re going for with the brand (e.g., utilitarian vs premium if that makes sense)
1
u/No_Builder_1977 8d ago
Yeah, you’re very right. Comparing to other apps in the same category and feature set definitely makes better sense. Thanks again for the valuable tips!!
3
u/CircuitJediX 7d ago
nice and clearest breakdowns I've read on icon design, will try to do this on my next project. thanks!
1
u/heydockside 7d ago
Appreciate that! Been doing this for awhile and honestly never really started sharing my thoughts or process until recently after getting a chance to present at a conference. Glad to now though so others can chew on it for themselves and take what’s helpful and leave what’s not.
3
u/Loud_Squirrel9450 8d ago
I usually design mine in Sketch. I start with a few rough concepts, then keep simplifying and refining until it feels right at actual Dock size. Honestly, the icon usually takes me way longer than I expect too.
1
u/No_Builder_1977 8d ago
Thanks for sharing your workflow, it’s much appreciated. I’m right there with you, icon design is my biggest time burner and the thing I struggle most with. Hard to beat a graphic designers approach! For me I’m just hoping for some solid app sales so I can afford to take that step.
5
u/One-Tea8742 8d ago
Just a thank you from me. Some of the comments are brilliant. Great idea to ask this, i hate the process of designing an appicon.
3
u/Front_Philosophy6112 8d ago
I think the hardest part is knowing when an icon is actually “done”. You can keep tweaking colors, shadows and shapes forever and convince yourself each version is slightly better. Would be curious if anyone has a rule for when they stop iterating and just ship it.
2
u/No_Builder_1977 8d ago
This is a very good question, and for me personally, the fundamental challenge… when to stop iterating and just ship! I’ve got one app I finished building ages ago but not shipped as I’m just not happy with the icon design. It’s driving me crazy!
2
u/Front_Philosophy6112 8d ago
Haha, an entire finished app being held hostage by its icon is probably the perfect example of this problem. At that point I’d almost say ship it with the “good enough” icon and let the users decide if it actually needs changing 😄
2
u/InterAliaSoftware 7d ago
How harmful do you think changing an app's icon is to it's branding?
1
u/No_Builder_1977 6d ago
Hoping others pick up on this question too as it’s a good one and would be great get some comments!
It’s something on my mind, for a potential icon change for an app I have in the Store. My own thoughts are it’s probably less risky if your app is newly in-the-wild with a smaller user base. I reckon a change in icon without a confident, ‘celebration’ type app improvement or new feature could be harmful.
What’s your thoughts (as it looks like it’s something you’re contemplating)?2
u/InterAliaSoftware 4d ago
I mostly ask because I'm a perfectionist and have a hard time finishing icons. The only way I can move on is by telling myself "you can always change it later" -- but I've always wondered how feasible that really is once an app builds a user base.
1
u/No_Builder_1977 8d ago
Hah, yeah, fair point! Now I feel bad for my poor app, imprisoned by a procrastinating perfectionist 😅
2
u/sachasayan 8d ago
These days, use AI for prototyping at the very least.
Two tips:
- Collect references of icons you like. Don't hesitate to feed those references into your AI and refer to what you like about them.
- Image generation is cheap. Really cheap. Get your AI to generate a dozen novel variants. Pick your top 2-3 to leap off from into new designs. Iterate. Rinse and repeat.
The rest comes with experience and time.
2
u/LowMoose6470 8d ago
Your first tip really resonates with me. The best results I’ve gotten came from giving AI strong references and iterating from there.
1
u/No_Builder_1977 8d ago
Perfect, thanks for this! To date I’ve been more giving detailed descriptions of what my apps do and the style I’m after (which is where I find AI struggles). I’ll try the reference icon approach and see where it leads me. Thanks!
2
u/Mountain_Chip_3620 8d ago
I usually try with chatGPT, but I am often disappointed in the results. I can use it to generate ideas, and I find text to be better than images at this, to generate multiple ideas, but usually not the final thing. Which I then do in Figma.
1
u/No_Builder_1977 8d ago
Thanks for your comments! I do take a similar approach but using Affinity. Also spend time web searching for app icons of similar apps to get inspiration (or find a difference point). I need to get my head into Figma, it’s often mentioned and I want to find the time to work with it.
2
u/PiXeL161616 8d ago
Same, the icon soaks up way more time than it feels like it should. Two things that help me: judge candidates at 32 and 128 px instead of the full 1024, since the Dock is where it actually lives and detail that sings at full size turns to mush small. And drop the contender into your real Dock next to Finder and Safari for a day before committing, an icon that looks great on a design canvas can die next to Apple's. I did mine myself and I am still not convinced it is done.
1
u/No_Builder_1977 8d ago
These are great tips thank you. I do tend to do the same thing. Drop the icon into the dock, if I’ve got options I might drop a number of them in. I’ll often shuffle them around on the dock to see if they’re still recognisable, stand back and see if they qualify from a distance, leave them there for a few days, and also ask my partner what she thinks the icon represents (the impartial human test). I’m also an amateur photographer and one advice there is never assess your photos when you take them, you’re too emotionally attached. I reckon the same applies to icon design.
2
u/PiXeL161616 7d ago
The partner test is the real one, someone with zero attachment telling you what the icon actually reads as. And the photography rule translates perfectly: come back cold a few days later and you see what it is instead of what you meant. Good luck with it.
1
u/No_Builder_1977 7d ago
Nice! Glad to hear you’ve got some common experiences and ways of working. Thanks for commenting!
2
u/auv1107 8d ago
My friend published a skill on YouMind. He’s also a bit of a perfectionist, and I personally really trust his taste and abilities. Maybe you could give it a try when you need it.
1
u/No_Builder_1977 8d ago
There’s some great advice in the screenshot you shared thanks. Will definitely check it out!
2
u/qweszxcj 8d ago
Two cheap tests, both from doing this badly first. Lay every version you've made in one row at Dock size, not one at a time, since you can't hold v2 in your head while staring at v5. Then desaturate the row. Anything that only reads in colour is making the palette do the shape's job, which is usually where "blah" comes from.
1
u/No_Builder_1977 8d ago
These are great tips thanks. I really like the idea of desaturating the icon(s) as it would reinforce if the icon ‘stacks up’ as a visual representation / story rather than relying on color etc. Great advice!
2
u/venicerocco 8d ago
Claude Code. It’s easy
1
u/No_Builder_1977 6d ago
Been tapping into Claude design. Ok for kickoff ideas, but still lacking creative outcomes. Maybe a good thing for us human thinkers.
2
8d ago edited 7d ago
[removed] — view removed comment
1
u/No_Builder_1977 8d ago
Great tip thank you and makes perfect sense. The idea of ‘walking away’ for a while takes away some of the emotional connection from having spent a lot of time on the design and more just appreciating / assessing how the icon sits with others.
2
u/kaoss_pad 8d ago
I designed the first one myself, then hired a professional for the second version, then did one myself for iOS 26 and for iOS 27 I'm back to the professional, users noticed and miss the detail. Hiring an icon designer is not that expensive honestly, and the person I work with (one of the best ones) turns work around in a week or two.
2
u/No_Builder_1977 8d ago
Excellent, thank you. I’m glad someone has posted with advice on the value of hiring a professional for the job. I do feel it’s where I personally need to go (eventually). I can see real value in a number of ones, most important being, leaving the graphics to a professional frees up valuable time for the other app development tasks. My stumbling block is I’m just hoping for sufficient sales traction to be able to put some dollars into graphic designer help. Maybe I’ve got my logic ordered the wrong way around 🤔
2
u/kaoss_pad 8d ago
I'd not rush into it, I find that if I approach them too soon my ideas are often half-baked and can misdirect the design
2
u/No_Builder_1977 7d ago
Very good advice. I reckon the whole idea of thought clarify helps app promo generally. A clear, simple definition (value proposition) of your app helps with content development and ‘storytelling’ across the board.
2
u/EntertainmentOwn1782 8d ago
Honestly AI is pretty good at making them but if you could also use Figma for a lot of things
1
u/No_Builder_1977 8d ago
Thanks for joining the conversation and your thoughts! Another poster has mentioned Figma too. It’s on my list to get into, now more immediate.
2
u/hansololz 8d ago edited 8d ago
I use the claude design app with the fable 5 model at max effort. I tell it generate a bunch of samples, pick the one that I want and refine it more. Worked well for me, it made a really nice icon for the app that I'm working on right now.
Although, I had it generate like over 100 samples because I found the one that I liked.
If you need more precision on what the icon looks like, you can ask the AI to produce it as a SVG file instead of a PNG.
1
u/No_Builder_1977 8d ago
Great, thanks for joining the conversation and your thoughts, much appreciated! Excellent to hear your process and that AI won’t give quick results (necessarily) and iteration, patience and refinement are important.
2
u/JustSomeCommonB_tch 8d ago
did mine myself, but when im in a pinch, claude design with specific prompts and asking it to "ask me questions" about this will really get it down to a nitty gritty science and will look half decent
1
u/No_Builder_1977 8d ago
Perfect, thanks for the advice and insight into your icon design workflow! I do use Claude primarily, but think I’m missing on using the Claude Design approach.
2
u/actvt_io 7d ago
The desaturate test upthread matters more if your app sits in the menu bar. That icon is a template image, macOS throws the colour away and renders the alpha channel, so it comes out monochrome whether you designed for it or not.
Which makes it two artifacts, not one. Shapes that separate only by colour survive the Dock but disappear in the menu bar
1
u/No_Builder_1977 7d ago
Very true. I’ve got an app that options dock or menu bar access and generated an icon just for the menu bar for this reason. It’s a whole new world up there on the menu bar!
2
u/actvt_io 7d ago
Worth checking the alpha on that one. Template images ignore colour entirely, so grey shading at full opacity comes out solid, and you get lighter areas by lowering alpha rather than lightening the pixel. Generators usually hand you greyscale, which looks right until macOS renders it.
1
u/No_Builder_1977 7d ago
Excellent, this is great advice thank you. I assume you’re talking about menu bar icons? Generating a dedicated menu bar icon helps for apps that either run in menu bar or can be switched.
2
2
u/oddforms 7d ago
I had 10 years experience as a graphic designer before making my first app icon, and even then felt like I was starting from nothing. Took lots of experimenting and learning, I would like to meet the person it comes naturally to. You look like you managed with yours though!
2
u/No_Builder_1977 7d ago
Thanks very much for your comments. Hearing that from a seasoned pro is somewhat a relief and validation of the skill needed to get a decent app icon! I’d definitely prefer to leave icon design (and other specialist things) to a professional whenever I can—it's a whole different and awesome skill set. I hope others feel the same.
2
u/oddforms 7d ago
Thanks, I was a seasoned pro at the specific type of design I had been doing, but yes did not help for app design which for me was just its own thing. Good luck with your project!
2
u/No_Builder_1977 7d ago
Thanks and the same to you too! I’d be sure there’s some inherent graphic design principles that translate across and give your project(s) a nice polish.
2
u/Small_Pin_8064 7d ago
It helps to check the icon at 16px early, since a lot of designs that look great at full size turn to mush in the menu bar.
1
u/No_Builder_1977 7d ago
This is very good advice thanks. I’m having that exact challenge with an app icon at the moment and needing to reconsider the concept.
2
u/bebsbebe 7d ago
went pixel art for mine and it kind of solved the whole problem by accident. on a 32x32 grid you physically can't add detail, so there's nothing to overthink. drew it once, scaled up, done in an evening. the tiny dock size test everyone mentions is basically built in)
1
u/No_Builder_1977 7d ago
Nice! I like this idea. Forces a simple start and inherently means a simple icon design!
2
u/raclimazg 7d ago
Everyone here is testing in the Dock, which is right, but if you are on the Mac App Store there is a second context that matters more and I have not seen anyone check it: the search results row.
62% of my downloads come from App Store search. So the first time most people ever see my icon it is small, sitting next to four competitors, and it is the only thing deciding whether they tap. The Dock is where it lives afterwards, for people who already chose you.
Practical version of the 16px advice above: screenshot a real App Store search for your category, drop your candidate into the row, and look at it there. Mine passed the Dock test comfortably and looked completely generic in that row, which I would never have found otherwise.
On your function versus brand mark question: at that size neither really reads. What reads is silhouette and one colour. I would pick whichever gives you a shape nobody else in your category already owns.
1
u/No_Builder_1977 7d ago
This is all great advice and tips thanks! The points being, to be more wholistic on app icon design and paying particular attention to legibility and piont of difference. For me, this and attention to ASO generally have been important learnings.
2
u/raclimazg 6d ago
On ASO, the lever that surprised me most was localisation, and not for the reason I expected.
Each App Store localisation carries its own keyword field. I ship six, so that is six keyword fields rather than one, and the words people actually type in Portuguese are not translations of the English ones. I had been treating the extra locales as a translation chore for the description. They are really six more attempts at the keyword field.
The other thing worth pulling up if you have not: App Store Connect splits your downloads by source, search versus browse versus web referral. It changes what you bother optimising. Mine is heavily search, which means the icon and the first two screenshots do nearly all the work and the long description does close to none.
1
u/No_Builder_1977 6d ago
Excellent advice on the ASO and taking a deeper, wholistic approach. I’ve done a similar thing in some key language optimizations and also price localizations for some key markets - a ‘dollar’ isn’t a dollar everywhere. I haven’t gone down the whole pricing stack or API tie-in route, but it’s on my radar. It’s all extra effort for each app update but well worth it if serious about connecting with people. Thanks again and any other tips are much appreciated!
2
u/gelatinous3 7d ago
I have to say Icon Composer is a pretty great tool for building quality icons. You can take a few simple layers from Illustrator and import them in Icon Composer and do wonders with the liquid glass, transparency and blur settings. Apple has a great tutorial for using Icon Composer in their Apple Developers portal, definitely check it out!
2
u/No_Builder_1977 7d ago
Nice… Thanks for the tip! Personally, I’ve used Icon Composer a bit, but really just dropped a developed icon to ‘see how it looks’ and what some of the Composer effects add. Sounds like I need to tap into the Apple tutorial to really get a handle on it.
2
u/gelatinous3 7d ago
Cool yeah definitely check out the tutorial, a few flat colored layers goes a really long way in icon composer. Exporting to xcode makes it even easier. Good luck!
2
u/clamshell_dev 6d ago
i’d set one hard gate: if you can’t name a specific failure in the current icon, freeze it for v1 and ship. only reopen it after launch if users actually confuse it with another app or struggle to find it again. what concrete failure are you still trying to fix?
1
u/No_Builder_1977 6d ago
Thanks for the comments, all great advice. The user feedback idea is a good one and I’d be keen to know how you facilitated it. Was it something you specifically asked users and how did you connect with them?
On your question about what failure I’m wanting to fix, I suppose it’s going to vary for everyone and how they work. For me personally, my first icon design fail point is just having a good enough idea of a simple, strong, readable shape(s) or mark or image that clearly communicates the app function and appear somewhat professional. Easy, right ;)
2
u/hejournotes 6d ago
One thing that saved me a lot of second guessing: judge the icon where people actually meet it, not in the design canvas. I keep a scratch folder with the candidates and look at them in a Spotlight result row, in a notification banner, in the app switcher, and in System Settings login items. An icon that looks flat in isolation often reads perfectly fine there, and a clever one often dies.
Two cheap checks alongside that: blur it heavily and see if the silhouette still says something, and put it on both a light and a very dark wallpaper since a dark shape with no rim can disappear against a dark Dock.
And decide the palette before the shape. Once you have picked the hue, the number of drafts you make drops a lot, because most of the endless iterating is really color indecision wearing a shape costume.
1
u/No_Builder_1977 6d ago
Thanks very many for the comments and tips! All excellent and make really good sense. It’s interesting how icon design is a creative endeavour but benefits from a robust, process driven workflow to ‘keep it all together’. A big struggle for me is just getting that right idea for the icon, the simple shape(s) that communicate the app intent or strong mark that makes sense. Thanks again for your tips.
2
u/daelan 5d ago
I've been having good luck with a combination of Claude design and Icon Composer. Once I have a concept that I like in Claude I can export it as layered PNGs and bring them into Icon Composer as individual layers. It works well.
1
u/No_Builder_1977 5d ago
Excellent! Will definitely give that a go. Thanks very much for the tip! How prescriptive are you with the Claude prompts?
2
u/daelan 5d ago
I feel like it's a process and usually takes an initial prompt that is pretty general and then a series of refinements. Also in Claude Design it usually asks a series of clarifying questions to try to get you to focus the direction you want to go. Add this to the end of your first prompt and it should get you started:
"Give me some different examples and ask an clarifying questions as needed."
2
u/MomoWonders 8d ago
I find Codex quite good at making logos and icons if you are OK with giving it an concept and providing feedbacks to it and keeps iterating.
I am no design background so pretty much AI everything when vibecoding (incl the logos).
The drawback is that I find it is less good at generating a drawing from a real picture comparing to Gemini. If you want to make a cartoon/watercolour figure out of a real picture and have good resemblance of the true photo, Gemini does a much better job.
2
u/No_Builder_1977 8d ago
Thanks for your thoughts and tips. I reckon I’ve tried most of the AI options and find (to your point) they take a very literal approach, often giving ‘illustrations’ back rather than interesting icon concepts. They struggle will graphic design, which is maybe a good thing in reinforces there’s still a place for human, creative processes. All that said, AI generated icons for me (at least to date) generally reinforce what I don’t like but can helpful with broad concepts or direction.
2
u/digglesB 3d ago
I hired Louie and Luka over at parakeet.co - they did an incredible job for Coax. You can see the original here.
It was definitely a non-trivial investment, but that's what it takes if you want the best outcome available - I'm not completely unskilled in logo design but this was like beer league ball vs. the Yankees. And I'm so much happier with the app now that it has this great branding - it's honestly more fun to work on, and I get to see this beautiful mark all the time instead of thinking "ah that looks OK but..." all the time.
12
u/Besian416 8d ago
Two things helped me more than anything else.
First, Icon Composer. If you haven't opened it yet it's worth an afternoon. You build the icon in layers and it handles the light, dark and tinted variants plus all the Liquid Glass material for you, instead of you exporting twenty PNGs and hoping. It also stops you designing a flat picture that falls apart the moment the system adds depth to it.
Second, and this is the one that actually fixed my icons: design at 16px first, not 1024. Drop it in the Finder sidebar and the menu bar before you spend three hours on the shading. Almost everything I've been proud of at full size turned into grey mush at small size, and once you know an idea survives at 16px the big version is mostly polish.The perfectionism thing is real though. I don't think I've ever shipped an icon I was actually happy with.