Kick-start app icon design with ChatGPT and Dall-E

tldr;

1. Describe your app concept to ChatGPT. Ask it for prompts for Dall-E.
2. Input the best prompts into Dall-E (eg. via Bing Image Creator).
3. Give ChatGPT feedback on the generated images. Generate refined Dall-E prompts.
4. Repeat #2 and #3 until you have something to work with.
5. Create a design based on the best output in #4.

With this method, I created a decent app icon as a developer with no app icon design expertise. Read on for an example process and the final result!

Step 1 – Initial prompt to ChatGPT

Give ChatGPT (or, "Chat") some background info about your application. Then ask it to suggest prompts for AI image generators.

My original prompt:

I'm building a simple daily reading tracker for iOS. Make some suggestions for midjourney prompt to generate app icons.

– Me

I also pasted in a part of Apple's icon design guidelines for extra context.

I got this response back:

Here's an excerpt:

1. Book and Calendar Theme:
   • "An app icon featuring an open book with a calendar overlay, in a minimalistic style, with pastel colors."
   • "A modern app icon showing a stack of books with a small calendar on the top book, in a flat design with vibrant colors."
2. Reading Glasses and Clock:
   • "An app icon depicting reading glasses resting on an open book with a small clock in the background, in a sleek and clean design."
   • "A minimalist app icon showing reading glasses over a calendar page, in a soft color palette."
3. Checkmarks and Progress Bars:
   • "An app icon with a book and a checkmark, indicating completion, in a modern flat design with bold colors."
   • "A stylish app icon with a book and a progress bar, symbolizing daily reading goals, in a bright and engaging design." …

– ChatGPT

#2 – Dall-E: Use prompt

I skimmed the suggestions and pasted my favourite prompt into Bing Image Generator¹. It's a free image generation tool that uses Dall-E under the hood. Any similar tool will do.

This is what it created:

Prompt: 'A simple app icon featuring an open book with a small calendar overlay, using a minimalistic design and soft pastel colors'

#3 – ChatGPT: Refine

The generated icons look cool by themselves, but they don't fit the iOS design.

From the Human Interface Guidelines on icons.

I gave this feedback to Chat:

I tried #1, it was too cluttered and not in line with how ios icons look. Revise the remaining if necessary.

– Me

It returned some refined prompts.

Certainly! Here are revised prompts to better align with the simplicity and clarity expected for iOS app icons:

1. Reading Glasses and Clock:
   • "A simple app icon depicting reading glasses with a small, minimalistic clock integrated into the design, using a sleek and modern style with a flat color scheme."
2. Checkmarks and Progress Bars:
   • "A clean app icon with a single book and a checkmark, using a flat design with a bold, solid color palette."
3. Character Reading:
   • "A minimalistic app icon featuring a silhouette of a person reading a book, using a simple background and an elegant, streamlined style."
4. …

– ChatGPT

#4: Iterate

Repeat #3 and #4 until you have something to work with.

I used Chat's prompt on checkboxes to try a different direction:

Notice how much simpler the design is. It still doesn't look like iOS, but we're getting closer.

I gave Chat the feedback to move away from checkmarks. I also made it explicit that this is a tracker for Bible reading (something that I forgot to mention earlier):

I like #3 much more, but it's not really clear that it's for the Bible. Also, I don't use the progress indicator in the app. I also don't want to use a checkmark - it feels too much like a habit tracker. Are there other metaphors?

– Me

I moved back and forth between Chat and Dall-E and explored progress bars,

rays of light,

and a more prominent sun:

This style is already much more aligned with the iOS-native look I want to go for. This iteration progress takes seconds: I skim Chat's response, paste it into Bing Image Creator, give my immediate feedback to Chat and generate another image.

Eventually, Bing generated these icons:

The image in the top right looks very similar to what I wanted my icon to look like. It's good enough, and I can move to the final step.

#5: Implement the design

Yes, this process involves getting hands-on with some design tools.

I wish we could copy and paste the result straight away, but

1. the output is a jpeg file, and you'll likely need something rasterised like an svg,
2. it seems like you can't use images created with Bing Image Creator for commercial purposes² – so this might rule out some projects,
3. and most importantly: the result isn't that great. You'll need to make some improvements.

I pasted the favourites into my graphic design software of choice³:

I traced the outlines of some of the icons, tweaked the design, and changed the background colour. This is what I landed on:

I think that's a great-looking icon for the beta version of this app! If I can produce something neat like this in minimal time, I'm sure you can create something even more beautiful.

If you have feedback on the design, please let me know on this tweet or over email.

AI tools like this can kick-start a creative process when you know what you want but don't quite have the knowledge to implement it.