# app-icon

Generates dimensional iOS and Android app icons for Expo projects and crops them to store requirements.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 396 installs · ★ 233
- Author: Melvynx
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Melvynx/aiblueprint/tree/HEAD/agents-config/skills/app-icon/SKILL.md
- Updated: 2026-10-21
- HTML: https://affpapa.org/en/nevibecode/skills/melvynx-app-icon

## What it does

This skill reads your Expo configuration and creates a 3D-styled app icon using Codex `image_gen` or `gemini-cli`. If no image tool is connected, it gives you the prompt and resumes processing once you supply the image file. Brand concept and colors come straight from the repository, with color names instead of hex codes.

Post-processing relies on `sips` and `magick` command-line tools. The skill exports a 1024×1024 `icon.png` without transparency for iOS, centers the subject within the ~66% safe zone for Android's `adaptive-icon.png`, and creates a 192×192 web `favicon.png`.

You need `sips` and `magick` installed locally to strip alpha channels and fit the adaptive bounds cleanly. Seeing the updated icon requires a native rebuild with `npx expo run:ios` or `npx expo run:android`, because the bundle cache keeps the old assets otherwise.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Melvynx/aiblueprint --skill app-icon -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/app-icon/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/app-icon/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Melvynx/aiblueprint --skill app-icon -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/app-icon/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Melvynx/aiblueprint --skill app-icon -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/app-icon/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Melvynx/aiblueprint app-icon
```

2. **Manually: put the files in place**
- File: `.github/skills/app-icon/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Melvynx/aiblueprint --skill app-icon -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Melvynx/aiblueprint --path agents-config/skills/app-icon
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/app-icon/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Melvynx/aiblueprint --skill app-icon -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Melvynx/aiblueprint/tree/HEAD/agents-config/skills/app-icon/SKILL.md

## When to use it
- generate a dimensional app icon from project branding
- produce store-ready iOS icon.png and Android adaptive-icon.png
- strip alpha transparency and enforce Android safe area margins
- create a matching favicon.png for Expo web

## Example prompts
- Generate an app icon for this Expo project using our brand colors
- Create a 3D mascot app icon and set up the adaptive icon files
- Refresh our app icon and prepare assets for iOS and Android stores

## Similar
- [app-icon-optimization](https://affpapa.org/en/nevibecode/skills/app-icon-optimization.md) — skill · 2700 installs
- [expo-native-ui](https://affpapa.org/en/nevibecode/skills/expo-native-ui.md) — skill · 31700 installs
- [Mobile App Design Standards](https://affpapa.org/en/nevibecode/skills/mobile-app-design-standards.md) — skill · 906 installs
- [expo-app-clip](https://affpapa.org/en/nevibecode/skills/expo-app-clip.md) — skill · 19800 installs
- [limrun-expo-development](https://affpapa.org/en/nevibecode/skills/limrun-expo-development.md) — skill · 43100 installs
- [react-native-brownfield-migration](https://affpapa.org/en/nevibecode/skills/react-native-brownfield-migration.md) — skill · 5200 installs

## Other versions with the same name
- [app-icon · code-with-beto](https://affpapa.org/en/nevibecode/skills/app-icon.md) — 2100 installs

From the same set: [melvynx/aiblueprint](https://affpapa.org/en/nevibecode/by/melvynx/aiblueprint.md) — 2 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md