AI Just Made My App Icon (Better than a Designer)

Creating app icons doesn't have to be painful or expensive. What if you could generate stunning professional icons in minutes using nothing but AI? In this

video, I'll show you step by step how to create modern app icons using AI.

Perfect for Android, iOS, and even the new dot icon format introduced on iOS 26. And as a bonus, we'll generate a

26. And as a bonus, we'll generate a matching splash screen using the same assets. Hey, if you're new here, I'm

assets. Hey, if you're new here, I'm Beto, founder of Code with Betto and developer success engineer at Expo. I

make videos for mobile devs like you and also offer courses, designs, and templates to help you build better applications faster at kodetto.dev. If

you're into React Native or mobile development, hit subscribe. All right,

so let's get started. To generate the main icon asset, we're going to be using Snap AI, which is a free CLI tool that I built that leverages OpenAI image models

to create highquality icons directly from your terminal. So, it's very simple to use, fast, and doesn't require any design skills. You will need an open AI

design skills. You will need an open AI key to use it. I'll link a setup video in the description if you need help with that. Once we've generated the base

that. Once we've generated the base icon, we'll drop in into a Figma template to properly export assets for both iOS and Android, following platform specific best practices. And finally,

I'll show you how to use icon composer, Apple's new tool for generating icon files to generate iOS 16 compatible icons. So the first thing that you need

icons. So the first thing that you need to do is set up snap aai. In case you want to install it globally, you can just run mpm install globally snap aai

or run mpx snap aai directly in your terminal and then you need to set up your API key. I have instructions here in the readme that will guide you on how to do that and then you can just go ahead and create icons. Here we have as

well some examples. You can take a deeper look if you want to. But I've

been getting a a lot of questions asking uh this is optimized for iOS and for the adaptive icon on Android, we need to make it a little bit smaller and some things change as well as the background

for dark mode. And there are so many things moving here. That's why I added the ability to create icons without a background so that we can adapt the icon

wherever we we need it. So I have here a very simple application that I created using Expo. And if I go to the package

using Expo. And if I go to the package JSON, you'll notice that I'm using the Expo SDK 54 Canary. And this is because

on Expo SDK 54, we will have support for the new icon file that Apple introduced on iOS 26. So I'm going to teach you how to do it on iOS 26. And this is

backwards compatible, meaning that it's going to work as well on iOS 18 and older iOS versions. So, if we go to the uh resource project that I'm going to leave down here in the description and

click on the icon composer, this is going to take you to the software that Apple introduced recently. Right now, it is it is in beta, but it might be available in production at the time that

you are watching this video. This is a tool that comes within Xcode. Uh so,

make sure that you have Xcode beta if you want to follow along with me or just use the Figma template that we're going to be using in a moment. So, by the way, we let me just click on the Figma template as well. And this is an

official Figma template that I actually created myself. Um, it is for the

created myself. Um, it is for the community in the Expo Figma profile. And

we can just go ahead and open it in Figma or clone it. But I'm getting ahead of myself. Let's start by just creating

of myself. Let's start by just creating the main asset that we'll use to create multiple icons. So, I'm going to go back

multiple icons. So, I'm going to go back to my project. I'm going to open my terminal. And just to make sure that we

terminal. And just to make sure that we are on the same page, we can run npx snap aai which is the CLI tool. And then

you can pass the h flag if you need help using it. So it's very simple. We only

using it. So it's very simple. We only

have config help and icon. That's all it does. So we can say mpx snap aai config

does. So we can say mpx snap aai config and hit enter. And as you notice I already set up my key and everything looks correct in here. So if you want to

learn more about snap AI and the commands and configurations that you can use directly here in the CLI, you can

say npx snap aai icon and then pass the h flag and this is going to provide help for this specific command. So if we take

a look at the result of this command, we have a lot of flags that we can pass. Uh

so when we create an icon we can say snap AI icon and then pass a prompt to the AI and under the hood this is going to use GPT image one model to generate

the icon but most importantly is the flag background and it supports transparent. So let's go ahead and

transparent. So let's go ahead and create a new icon. So I'm going to say mpx snap a icon and then I'm going to pass a prompt. For example, I was

working in my previous video on an application for uh using charts, right?

So, in my prompt, I'm saying glass-like charts, semi-transparent layers following in perfect uh falling in perfect harmony. Now, notice that I'm

perfect harmony. Now, notice that I'm passing the background transparent here.

And another cool thing is that you can pass the number of images that you can that you want to generate at the same time. So if you pass the end flag and

time. So if you pass the end flag and the number of images. So let's say that I want to generate two options. Let's

hit enter. And now this is going to start generating the icons. Uh because

this is optimized for React Native Expo apps, it's going to put the items inside the the generated items inside the assets folder. But if your project

assets folder. But if your project doesn't have an assets folder, it's going to create one for you and put the icons inside of it. Keep in mind that if

you create m multiple icons at the same time, this might take a while.

But after a moment, it is done. So, I'm

going to close the terminal. And let's

see the result. All right, this looks absolutely amazing to me. And the most important thing is that it's a PNG without a background. So, if you notice, we need to generate an adaptive icon.

This is for Android. And the constraints are a bit different than the icons for iOS. And we have as well a splash icon.

iOS. And we have as well a splash icon.

Now in the latest versions of Expo, the splash dot icon actually does not need a background. So you can just simply use

background. So you can just simply use the generated image like this one. So

what I want to do is just take my assets. I'm going to reveal this in the

assets. I'm going to reveal this in the finder. Then let's go back to the Figma

finder. Then let's go back to the Figma template and I'm going to press open on Figma. Okay. And now we are inside

Figma. Okay. And now we are inside Figma. So you can download the Figma

Figma. So you can download the Figma application if you want to or they also have support to open Figma on the web.

In Figma, what I like to do is press command backslash. That is going to hide

command backslash. That is going to hide those windows. And then we can zoom in.

those windows. And then we can zoom in.

And then you can find some more instructions on how to use this. But

basically, you just need to drag your asset inside this icon template. You can

do this just by bringing the icon that we just generated. So we can drag it and put it in here. So, let's go ahead and take my my icon and put it in here. And

now, take take a look, guys. See how

this looks on the preview. So, if you notice, this is why the icons that we generate with a background by default on Snap AI won't work on Android very well.

So, what I want to do is just kind of center this in the middle of this square and then make it smaller. You can do that by pressing K. And that is going to

bring this tool. And then I can press shift option and start dragging until it is inside the circle. Okay. So I'm going

to put it in here like this. Okay. And

if we take a look at the preview, this is how it looks. I think that's good. Um

I can make it bigger so that everyone can see exactly how this looks. It's

it's good. I think for Android it's perfect. Now what I want to do is press

perfect. Now what I want to do is press again command backslash. And what I want to do now is just hide the background.

So if you press on this little I that is going to get rid of it. And then we can take the icon. So let's select the icon.

I'm going to press escape to get out of the option that we enter by pressing K.

So if you press K, now we have the scale, right? So let me do Ctrl + C. So

scale, right? So let me do Ctrl + C. So

if you press K then the window is going to change. But if you press escape now

to change. But if you press escape now we will have the normal options here. So

I'm going to scroll all the way down until we see the export section here.

Let's press export. And now I need to find my project which is icons snap AI application. And then under assets I

application. And then under assets I want to replace the adaptive icon. So

you can select the adaptive icon and then save and replace the current one.

All right. Now let's go back to the project. Let's take a look at the

project. Let's take a look at the adaptive icon. And now this is perfect.

adaptive icon. And now this is perfect.

So if we go now to the app.json

under Android, we have the adaptive icon section. And we have a foreground image

section. And we have a foreground image which is pointing to the assets adaptive icon file that we just added. And we're

using a background color white which is going to look good as we just saw in the Figma design. All right. Awesome. Now,

Figma design. All right. Awesome. Now,

another thing to notice, guys, is that I'm using the Expo splash screen, which is the default. I think everyone is using it. You don't have to use the

using it. You don't have to use the Canary um to use this one, but because I'm using Expo Canary, this is why my versions look a little bit weird, but don't don't pay too much attention to

that unless you're using Expo SK54 Canary version. So, when you're using

Canary version. So, when you're using the Expo splash screen, you need to add this plugin to add configuration to the splash screen. And this is going to work

splash screen. And this is going to work for Android and iOS. So, if you take a look, I'm just pointing to the splash screen icon that I'm using here, which is this one. But actually, we can

replace it if you want to. So, I'm going to copy the name. And then maybe I can just rename this one to be backup for

example. And then let's use the icon

example. And then let's use the icon that we want to use this one. And to be safe, I'm just going to copy paste again

to duplicate the image and then rename it to be splash icon.png.

So now my splash screen is going to use this icon. As you can see here, you can

this icon. As you can see here, you can also pass the background color, but very cool as well is that you can also set the background color for the splash screen on dark mode. So, in dark mode,

I'm just using black and light mode is going to use white. I recommend using image width of 200 and resize mode contained. Feel free to play around with

contained. Feel free to play around with other values in here, but I think this looks good. by the way. Now, and I'm

looks good. by the way. Now, and I'm getting ahead of myself right now. I

have this icon in here, but let's just go ahead and delete this for now. And

let's try this on Android. Let's preview

the application by running npx expo prebuild. Hit enter. This will generate

prebuild. Hit enter. This will generate the native folders for Android and iOS.

After that, I'm going to run it for Android by saying MPX expo run Android.

So now this application is going to be installed on my Android emulator and it it should use my icon. Okay, and the build was successful. Let's take a look.

Okay, there we have it. So that's a splash screen. And then we have the app.

splash screen. And then we have the app.

Of course, I don't have anything in the app. Let's close it. And look at that,

app. Let's close it. And look at that, guys. We have our icon right there.

guys. We have our icon right there.

Looks really nice. Let me close it and get out of here. All right. And that's

how it looks. So that looks amazing to me. It's perfect. And we can actually

me. It's perfect. And we can actually ship this right now. It was super quick to do. And by the way, if you enjoy

to do. And by the way, if you enjoy using Snap AI, make sure to start the repo, guys. There are a couple bugs that

repo, guys. There are a couple bugs that I want to fix, but the stars keep me motivated. And that's it for Android,

motivated. And that's it for Android, guys. You can do the same if you want.

guys. You can do the same if you want.

If you are targeting iOS 18, you can do the same using the iOS icon template here. And you can create multiple

here. And you can create multiple variants. So, for example, I can copy

variants. So, for example, I can copy the icon and paste it in here. And then

you can see the preview here. So let me hide this. And then just to show just to

hide this. And then just to show just to show you, we can increase the size of this. And you can double check that it's

this. And you can double check that it's looking good in here. And then you can create the variants, export them, and use them in your application. But right

now, I want to show you how you can do this using the icon composer on Xcode 26. Now let's open our iOS project in

26. Now let's open our iOS project in Xcode. So make sure that you are using

Xcode. So make sure that you are using Xcode 26 otherwise you won't be able to see the icon composer to open the iOS

folder in Xcode. We can run XD iOS. This

is a shortcut that is going to open Xcode for us. So if I hit enter now Xcode is going to pop up. There we have it. Okay. So now I have open Xcode. And

it. Okay. So now I have open Xcode. And

just to show you if I go to the about Xcode, this is using the VETA version VA 4 Xcode 26. So let's go ahead and close that. If you're using the VEA or just

that. If you're using the VEA or just Xcode 26 at the time that is in production, you can just go to the Xcode tab here and then go to the open

developers tools and you'll find this icon composer. Let's let's click on it.

icon composer. Let's let's click on it.

This is going to open this window where you can select where you want to create your icon. So in this case, I'm inside

your icon. So in this case, I'm inside my assets folder for this project. And

this is the place that I want to to use.

But if you want to save your icon in the desktop or documents folder, you can just select it and then uh press new document. So we need to bring our asset

document. So we need to bring our asset again. Let's go back in here again.

again. Let's go back in here again.

Let's rightclick and say reveal in Finder. This will open my exploder. And

Finder. This will open my exploder. And

from here, what I want to do is just select the icon that we want to use. So,

you can choose between these two. I'm

going to use this one right now. And we

can just drag it and drop it in here.

All right. Cool. This is basically all we need to do right now. Uh, but of course, this blue background color is horrible. So you can click here on the

horrible. So you can click here on the left on the icon and then come here and select the colors that you want to use.

It's pretty cool actually. You can

select different colors. So for example, we can have a gradient. Then you'll have to select another color. This actually

looks amazing if you know how to create beautiful gradients. Uh but for now,

beautiful gradients. Uh but for now, let's keep it simple for this quick tutorial. I'm just going to select this

tutorial. I'm just going to select this system light. So if you select the icon

system light. So if you select the icon on the left, then on the right you can find more things that you can modify.

For example, we can turn off the effect.

And this is the default effect that the liquid glass on iOS 26 is going to apply to the icon. We can turn that off if we want to or turn it on. It this is how it

looks. I honestly don't really like it,

looks. I honestly don't really like it, so I'm going to turn it off. So this is pretty much like the normal icon. The

only thing I did is just drag my asset.

Uh, if you want, you can turn on the grid and then just make sure that everything is inside the safe areas of the icon. I'm going to turn that off

the icon. I'm going to turn that off because it looks good to me. And you can also play around with the background.

This is how it's going to look with a background. And there's an option as

background. And there's an option as well to see how this would look on an Apple Watch, which is really nice. Looks

good to me. Um, and all right. So, now

that we are good to go, this is basically all I want to do. Of course,

you can play around with everything else here on the right, but the goal to me is just do this fast. And I'm happy with

default dark and the mono. Right. So,

I'm going to press command save and then give it a name. You can say icon or I'm going to say in this case icon 2 because I created one earlier and press save.

Now, if we go back to VS Code, you'll notice that now I have this icon 2 icon folder. And you can inspect this if you

folder. And you can inspect this if you want to, but basically it's the configuration that Apple needs for this icon. So, if you're using Expo SDK 54,

icon. So, if you're using Expo SDK 54, you can now pass the icon path directly here. So, I'm going to say icon and I'm

here. So, I'm going to say icon and I'm inside the iOS folder. So I'm going to access the assets and then I'm going to use my icon 2 in this case dot icon and

hit save. This is if you are targeting

hit save. This is if you are targeting iOS 26 which I'm targeting right now.

But I also want to explain or show you that this icon property inside the iOS folder can also take an object and then

you can specify the path for the dark icon as well as the path for light and tinted. So, if you use the template, the

tinted. So, if you use the template, the Figma template and export the three icons, you can just pass the paths here and they're going to be used um automatically. Either way, for now, I'm

automatically. Either way, for now, I'm going to delete this and just use my icon for optimize for iOS 26. And then

after you set your icon, we need to prebuild the project again. So, for

this, I'm going to close Xcode. Then go

back to my project and let's run MPX expo prebuild. If you want, you can just

expo prebuild. If you want, you can just preview for iOS by passing the platform iOS. From here, let's open Xcode again.

iOS. From here, let's open Xcode again.

And I want to test this on my real iPhone, which is using iOS 26. And I

have it right here with me. So from the dropdown, I'm going to select my iPhone 15 Pro Max, and press command R to start building the application. Okay. And the

build succeeded. Notice that I had that icon but after a moment now I get the new um icon which is coming as well in my splash screen. Uh of course my app is

not working but this is actually good because we can see the splash screen and then if I turn dark mode on the splash screen is working as you can see here we

are using now this background color that I specified and if I close my application it's how it looks. So, let's

switch back to light mode and again to dark. And this works perfectly fine.

dark. And this works perfectly fine.

Let's try to edit. I'm going to customize. And we can select the tinted

customize. And we can select the tinted version. And as you notice, my icon is

version. And as you notice, my icon is reacting. And it looks, you know, that

reacting. And it looks, you know, that way. We can also use the clear, which is

way. We can also use the clear, which is what we were seeing on the composer application, right? And it doesn't look

application, right? And it doesn't look bad to be honest. It looks good to me.

We can pass the dark or light version.

Looks good to me. And I'm going to leave auto. You can set dark or default. Just

auto. You can set dark or default. Just

to show you that this is going to work as well on previous iOS versions. I'm

going to compile this for iPhone 16 Pro, iOS 18. So, let's press command R to

iOS 18. So, let's press command R to start building it. All right. And here

we have the simulator. We can switch between dark and light and see this splash screen. Looks really nice to me.

splash screen. Looks really nice to me.

And I can close it. And this is how it looks. All right. This is using iOS 18

looks. All right. This is using iOS 18 as well. Works using the icon composer

as well. Works using the icon composer um icon. And now you got beautiful AI

um icon. And now you got beautiful AI generated app icons ready for Android, iOS, and even Apple's new icon format.

And with a splash screen, we've got a complete visual identity all done in minutes, not hours. If you want to dive deeper into Snap AI or learn how to write better prompts for design work,

I'm going to leave another video down here. And if you're building a mobile

here. And if you're building a mobile app and want to move faster with better tools and templates, check out codewithto.dev. There's a discount

codewithto.dev. There's a discount running right now. Thanks for watching and I'll see you in the next