App Icon Plugin

AI-powered app icon generation for React Native Expo apps with full iOS 26 Liquid Glass support and Android adaptive icons.

What This Plugin Does

Generates app icons using AI via SnapAI, an open-source CLI by the Code with Beto team.
Creates iOS 26 .icon folder with proper Liquid Glass icon format for modern iOS apps
Configures Android adaptive icons with support for foregroundImage, backgroundImage, and monochromeImage
Updates app.json automatically with correct paths for both iOS and Android
Uses transparent backgrounds enabling better integration with Material You theming and iOS effects
Handles SnapAI configuration including API key setup and verification

When to Use

You're starting a new Expo app and need an app icon
You want to update your existing app icon with a fresh design
You need iOS 26 Liquid Glass support (.icon format)
You want proper Android adaptive icons with Material You theming
You prefer AI-generated icons over manually designing them
You need to quickly iterate on multiple icon concepts

Tips & Advanced Usage

Iterating on the Icon in Icon Composer (iOS)

After generating your icon, you can refine it using Apple's Icon Composer:

Open the .icon folder in Xcode:
```
open assets/app-icon.icon
```
Or double-click the .icon folder in Finder
Edit in Icon Composer:
- Adjust translucency, shadow, and glass effects
- Add fill specializations for light/dark mode
- Fine-tune positioning and scale
- Preview across different platforms (iOS, watchOS, macOS)
Save changes:
- Icon Composer saves automatically back to the .icon folder
- No need to update app.json—it already points to the folder

Generating Multiple Icon Variations

If you want to try different styles:

Generate a new icon:

npx snapai icon --prompt "your new prompt" --background transparent --style minimalism

Compare before replacing:
- The new icon will have a different timestamp
- Preview both before deciding
- Keep backups if needed

Replace the main asset:

# Update iOS
cp assets/icon-[new-timestamp].png assets/app-icon.icon/Assets/icon.png

# Update Android in app.json
# Change the paths to point to the new PNG

Test the changes:

npx expo prebuild --clean
npx expo run:ios
npx expo run:android

Requirements

Node.js and npm/npx
OpenAI API key (provider usage charges apply)
Expo project with app.json
SnapAI CLI (automatically used via npx)

About SnapAI

SnapAI is a free, open-source CLI built by the Code with Beto team. It uses your own provider API key to generate icons, with provider usage billed to your account. The key can be stored in a local config file (~/.snapai/config.json) or supplied through an environment variable. SnapAI ships no telemetry and has no intermediary backend.

License

MIT

3.0 KiB Raw Permalink Blame History