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

Learn how to create stunning, professional app icons quickly using AI, without needing design skills. I demonstrate Snap AI, a free CLI tool I built that uses OpenAI image models to generate icons directly from your terminal. This approach works for iOS, Android, and the new iOS 16 dot icon format.

You'll also see how to use a Figma template I created to prepare icons for different platforms, and Apple's Icon Composer tool to generate iOS 16 compatible icon files. Finally, I cover how to update your Expo project with adaptive icons and splash screens using the generated assets.

What's inside

• Creating app icons doesn't have to be painful or expensive
• The new icon file format introduced by Apple on iOS 16
• Crafting effective AI prompts for icon generation
• Centering and resizing icons inside the Figma template
• Using Figma to export platform-specific icon assets
• Replacing adaptive icons and splash screens in Expo projects
• Previewing the app with new icons on Android emulator
• Exploring more customization options for icons and splash screens

Creating app icons doesn't have to be painful or expensive

Designing app icons can be a tedious and costly process, especially if you lack design skills. I show how Snap AI, a free CLI tool I developed, leverages OpenAI's image generation models to create high-quality icons in minutes. You just run a simple command with a descriptive prompt, and it outputs PNG icons with transparent backgrounds.

Snap AI automatically creates an assets folder if your project doesn't have one and places the generated icons there. It supports generating multiple icon options at once by passing a flag. This makes icon creation fast, accessible, and integrated into your development workflow.

The new icon file format introduced by Apple on iOS 16

iOS 16 introduces a new dot icon format for app icons, which is backward compatible with older iOS versions. To support this, I use Expo SDK 54 Canary, which includes support for this new icon format.

Apple also released Icon Composer, a tool bundled with Xcode (currently in beta) that helps generate iOS 16 compatible icon files. I demonstrate how to use Icon Composer to package your icons properly for iOS 16 and earlier versions.

Crafting effective AI prompts for icon generation

When generating icons with Snap AI, the prompt you provide guides the AI's output. For example, I used a prompt describing "glass-like charts, semi-transparent layers falling in perfect harmony" to generate an icon for a charting app.

You can specify the background as transparent to get icons without backgrounds, which is important for adaptive icons on Android. Snap AI also lets you generate multiple images at once by passing a number flag, giving you options to choose from.

Centering and resizing icons inside the Figma template

After generating the base icon, I open my official Expo Figma icon template to prepare assets for iOS and Android. I drag the generated icon into the template and use Figma's scale tool (activated by pressing K) to resize and center the icon inside the adaptive icon circle.

This step is crucial because Android adaptive icons require the foreground image to fit within a circle, and Snap AI icons generated with backgrounds won't work well on Android. I also hide the background layer in Figma to export a transparent icon.

Using Figma to export platform-specific icon assets

With the icon properly positioned, I use Figma's export feature to generate the required icon files. The template follows platform-specific best practices for iOS and Android icon sizes and formats.

Exported icons replace the existing adaptive icon files in the Expo project's assets folder. This ensures your app uses the new AI-generated icons correctly across platforms.

Replacing adaptive icons and splash screens in Expo projects

In the Expo app.json configuration, I update the Android adaptive icon foreground image to point to the new icon file exported from Figma. The background color is set to white to match the design.

For the splash screen, I duplicate the icon file and rename it to splash icon.png. Expo's splash screen configuration supports setting different background colors for light and dark modes, which I configure as white and black respectively. This ensures a polished launch experience on both themes.

Previewing the app with new icons on Android emulator

To test the new icons, I run npx expo prebuild to generate native Android and iOS folders, then run npx expo run:android to install the app on an Android emulator.

The app launches with the new adaptive icon and splash screen, confirming the assets are correctly integrated. This workflow helps you quickly iterate on icon designs and see results on real devices.

Exploring more customization options for icons and splash screens

I also highlight additional flags and options in Snap AI for customizing icon generation, such as the number of images and background transparency.

In Figma, you can adjust icon size and positioning further to fit your branding needs. The Expo splash screen plugin supports various resize modes and background colors, letting you tailor the launch screen appearance for your app.

Resources

CourseReact Native course

Master React Native fundamentals and build production apps with confidence.

Premium resourcePro membership

Access exclusive tools, templates, and tutorials to speed up your app development.