App Icon Generation
0This skill generates professional app icons for React Native Expo apps, providing support for iOS 26 Liquid Glass and Android adaptive icons. It is designed for developers who want to quickly create visually appealing icons using AI.
000Updated 2mo ago
Image Generation
Quick InstallView Source
$ npx skills add https://github.com/code-with-beto/skills --skill app-iconOverview
About This Skill
The App Icon Plugin generates professional app icons using AI, powered by OpenAI via SnapAI CLI. It provides full iOS 26 .icon folder format with Liquid Glass effect support and Android adaptive icons with Material You theming integration. The skill automatically configures your app.json for both platforms and offers multiple style options including minimalism, glassy, gradient, neon, and material designs. Use it to quickly create icons for new Expo projects, update existing icons with fresh designs, or iterate on multiple icon concepts without manual design work. Transparent backgrounds are supported for better platform integration.
How to Use
Install by running `npx skills add https://github.com/code-with-beto/skills --skill app-icon`.
Use Cases
Generate 1024x1024 PNG app icons for iOS and Android.
Create custom app icons from user-defined descriptions.
Automate icon generation with SnapAI CLI integration.
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/code-with-beto/skills --skill app-iconAlternative Install (Git Clone)
git clone https://github.com/code-with-beto/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate a professional app icon for a React Native Expo project targeting iOS 26 Liquid Glass and Android adaptive icons. The icon should represent [APP_NAME], a [APP_DESCRIPTION] in the [INDUSTRY] industry. Use a clean, modern design with [PRIMARY_COLOR] as the dominant color and [SECONDARY_COLOR] for accents. The design should be minimalist, scalable, and suitable for both light and dark modes. Provide the icon in SVG format with a transparent background and a 1024x1024 pixel resolution. Include a brief description of the design choices and how they align with platform guidelines.
Example Output
# App Icon Design for "EcoTrack"
## Icon Preview
## Design Details
- **Primary Color**: `#2E8B57` (Sea Green) for sustainability theme
- **Secondary Color**: `#FFFFFF` (White) for contrast and clarity
- **Shape**: Circular badge with subtle organic wave motif
- **Style**: Minimalist, scalable, and platform-compliant
### Platform Compliance
- **iOS 26 Liquid Glass**: Uses frosted glass effect with 3D depth
- **Android Adaptive Icons**: Supports both light and dark themes
- **Scalability**: Designed at 1024x1024px for crisp rendering at all sizes
### Files Provided
1. `ecotrack-icon.svg` (Transparent background, 1024x1024)
2. `ecotrack-icon-light.png` (Light theme, 512x512)
3. `ecotrack-icon-dark.png` (Dark theme, 512x512)
### Usage Instructions
Add the SVG file to your Expo project's `assets` folder and reference it in `app.json`:
```json
{
"expo": {
"icon": "./assets/ecotrack-icon.svg",
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/ecotrack-icon-light.png",
"backgroundColor": "#2E8B57"
}
}
}
}
```Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan