App icons for AI coding agents

---
name: app-icons
description: Create or update app icons for iOS, Android (adaptive and themed icons), Expo, React Native or Flutter apps from one image, using the SquareOne MCP server or CLI. Use when the user asks to add, change, fix or resize an app icon or launcher icon.
---

# App icons with SquareOne

SquareOne generates every app icon from one image: an iOS AppIcon.appiconset (single 1024px icon, optional iOS 18 dark/tinted), Android legacy, round, adaptive and themed icons plus a Play Store icon, an Expo app.json config and Flutter flutter_launcher_icons files. Docs: https://squareone.dewxit.com/agents

## Tools

Prefer the MCP tools when the `squareone` server is connected:

- `preview_app_icon` - renders a PNG of the icon on iOS (incl. dark/tinted) and Android (circle and rounded masks, themed icon).
- `generate_app_icons` - writes the icons to a folder and returns integration steps.
- `get_app_icon_specs` - sizes and rules for every platform.

Without MCP, use the CLI (Node 18+):

```bash
npx -y squareone preview path/to/icon.png -o icon-preview.png
npx -y squareone generate path/to/icon.png -p ios,android -o app-icons
npx -y squareone specs
```

## Workflow

1. Detect the project type:
   - `app.json` / `app.config.*` with Expo config -> platform `expo`.
   - `pubspec.yaml` -> platform `flutter`.
   - `ios/` and `android/` folders (bare React Native or native apps) -> platforms `ios`, `android`.
2. Find the artwork. Prefer a square PNG or SVG of at least 1024px. Ask the user if there is none; never use a screenshot or a low-resolution favicon.
3. Preview first. Full-bleed artwork works at scale 100; a logo on a transparent background usually needs scale 70-85 and a background color. Check that nothing important is cut off by the Android circle mask and that the themed icon is recognizable.
4. Generate into a temporary folder such as `app-icons` (not directly into the project).
5. Integrate by following the returned README for each platform:
   - iOS: replace the contents of the existing `AppIcon.appiconset` in the app's asset catalog (React Native: `ios/<App>/Images.xcassets`). Keep the set name the target uses.
   - Android: copy `res/` into `android/app/src/main/res`, replacing the existing launcher files with the same name. Make sure the manifest uses `@mipmap/ic_launcher` and `@mipmap/ic_launcher_round`. Remove stale `ic_launcher` files of other formats (e.g. .webp) with the same name, or the build fails with duplicate resources.
   - Expo: copy the images, set `icon` and `ios.icon` and replace the whole `android.adaptiveIcon` object in app.json / app.config (drop any template `backgroundImage`, it hides the background color).
   - Flutter: copy `assets/icon`, put `flutter_launcher_icons.yaml` next to `pubspec.yaml`, add `flutter_launcher_icons` (0.14.2+) as a dev dependency and run `dart run flutter_launcher_icons`.
6. Delete the temporary folder after integrating.
7. Tell the user what changed and that a native rebuild is needed (Expo Go keeps its own icon; iOS may cache the old icon until the app is reinstalled).

## Rules

- iOS icons must be opaque and must not be pre-rounded; SquareOne already handles this.
- Upload `android/play-store-512.png` to Google Play Console manually; don't commit it into res/.

## App icons

Use SquareOne for app / launcher icons instead of resizing images by hand.

- MCP server: `npx -y squareone mcp` (tools: `preview_app_icon`, `generate_app_icons`, `get_app_icon_specs`).
- CLI fallback: `npx -y squareone generate <image> -p <ios,android,expo,flutter> -o app-icons`, then follow `app-icons/README.md`.
- Preview first: logos on a transparent background usually need scale 70-85 and a background color.
- Generate into a temporary folder, integrate, then delete it. Remove stale launcher files with the same name but another format (.webp) to avoid duplicate resources.
- Full instructions: https://squareone.dewxit.com/agents/SKILL.md