App Icon Generation Workflow Overview
Generate professional app icons using AI and configure them for both iOS (with iOS 26 Liquid Glass support) and Android platforms in Expo apps.
Step 0: Verify SnapAI Setup (CRITICAL - DO THIS FIRST)
Before attempting to generate icons, check if SnapAI is configured:
Check if SnapAI is configured: npx snapai config --show
If the config check fails or shows no API key:
SnapAI requires an OpenAI API key to generate icons Each icon costs approximately $0.04 via OpenAI's image generation API Ask the user: "SnapAI requires an OpenAI API key. Do you have one, or would you like me to help you set it up?"
If the user has an API key:
Ask them to provide it securely
Configure it for them with:
snapai config --api-key
Verify the setup worked: snapai config --show
If the user needs to get an API key:
Direct them to: https://platform.openai.com/api-keys Explain: "You'll need to: Create an OpenAI account if you don't have one Navigate to API keys section Click 'Create new secret key' Copy the key (starts with 'sk-') Come back here and provide it to me" Once they provide the key, configure it using the command above
Important Notes:
API keys are stored locally and remain private (zero data collection) Do NOT proceed with icon generation if SnapAI is not configured The key must start with "sk-" to be valid You can handle the configuration for the user - just ask for their API key Step 1: Understand the App Context Read the app.json to understand the app name and current icon configuration Ask the user what the app is about if not clear from context Identify the app's theme, purpose, and target aesthetic Step 2: Get Style Preferences
Ask the user what style they'd like for the icon. Available styles:
minimalism - Clean, Apple-inspired minimalism (2-3 colors max) glassy - Premium glass aesthetic with semi-transparent elements gradient - Vibrant gradients, Instagram-inspired neon - Cyberpunk, futuristic with glowing effects material - Google Material Design ios-classic - Traditional iOS with subtle gradients pixel - Retro 8-bit/16-bit game art style geometric - Bold, angular compositions
Or let the user provide a custom style description.
Step 3: Generate Icon with SnapAI
Pre-flight check: Verify SnapAI is configured before running (see Step 0)
Generate a 1024x1024 icon with transparent background (critical for both platforms):
npx snapai icon --prompt "YOUR_PROMPT_HERE" --background transparent --output-format png --style STYLE_NAME
Important flags:
--background transparent - REQUIRED for iOS 26 and Android adaptive icons --output-format png - Ensures PNG format --style - Optional, enhances the visual style --quality high - Optional, for final production icons
The icon will be saved to ./assets/icon-[timestamp].png
Step 4: Create iOS 26 .icon Folder Structure
Create the new iOS 26 Liquid Glass icon format:
Create the folder structure: mkdir -p assets/app-icon.icon/Assets
Copy the generated PNG: cp assets/icon-[timestamp].png assets/app-icon.icon/Assets/icon.png
Create assets/app-icon.icon/icon.json with this basic configuration: { "fill": "automatic", "groups": [ { "layers": [ { "glass": false, "image-name": "icon.png", "name": "icon" } ], "shadow": { "kind": "neutral", "opacity": 0.5 }, "translucency": { "enabled": true, "value": 0.5 } } ], "supported-platforms": { "circles": ["watchOS"], "squares": "shared" } }
Step 5: Update app.json
Update the app.json to configure icons for both platforms:
For iOS: { "expo": { "ios": { "icon": "./assets/app-icon.icon" } } }
For Android:
Option 1: Simple (with solid background color)
{ "expo": { "android": { "adaptiveIcon": { "foregroundImage": "./assets/icon-[timestamp].png", "backgroundColor": "#ffffff" } } } }
Option 2: Comprehensive (recommended - use same icon for all) Since the icon has a transparent background, you can use it for all three Android adaptive icon fields:
{ "expo": { "android": { "adaptiveIcon": { "foregroundImage": "./assets/icon-[timestamp].png", "backgroundImage": "./assets/icon-[timestamp].png", "monochromeImage": "./assets/icon-[timestamp].png" } } } }
Benefits of Option 2:
foregroundImage - Main icon displayed backgroundImage - Provides layered depth effect on Android 8.0+ monochromeImage - Used for themed icons on Android 13+ (automatically recolored by system)
Note:
For Option 1, ask the user for their preferred backgroundColor, or use white (#ffffff) as default For Option 2, the same transparent PNG works perfectly for all three fields Option 2 provides better integration with Android's Material You theming Step 6: Verify and Test Verify the folder structure exists: ls -la assets/app-icon.icon/
Verify app.json is valid JSON: cat app.json | jq .
Inform the user to test the app with: npx expo prebuild --clean npx expo run:ios npx expo run:android
Important Notes
Transparent background is critical - The icon must have a transparent background for both iOS Liquid Glass effect and Android adaptive icons
iOS 26 .icon format - The .icon folder enables Liquid Glass effects on iOS 26+
Keep original PNG - Don't delete the generated PNG, it's used for Android (and can be reused for all three Android icon fields)
Android adaptive icon flexibility - The same transparent PNG can be used for foregroundImage, backgroundImage, AND monochromeImage fields
Material You support - Using monochromeImage enables Android 13+ themed icons that adapt to user's color scheme
File naming - The .icon folder name can be customized (e.g., app-icon.icon, myapp.icon)
Troubleshooting
SnapAI Configuration Issues
"No API key found" - Run snapai config --api-key