name: icon-generation
description: >
Generate app icons with transparent backgrounds. Triggers include:
"generate icon", "create icon", "make icon", "app icon", "favicon",
"icon for", "logo icon", "icon set", "icon pack", "transparent icon"
Creates square PNG icons with transparent backgrounds suitable for app icons, favicons, and UI elements.

Icon Generation Skill

Generate professional app icons with transparent backgrounds using AI (Google Gemini).

Output: Square PNG with transparent background - ready for app stores, favicons, or UI.

Quick Examples

Prerequisites

• GOOGLE_API_KEY - Required for Google Gemini image generation
• Get your key at: https://aistudio.google.com/apikey

Icon Styles

Workflow

Step 1: Gather Requirements (REQUIRED)

Use the AskUserQuestion tool for each question. Ask ONE question at a time.

Q1: Icon Concept

"What should this icon represent?

Examples: settings gear, shopping cart, user profile, home, music note, camera"

Wait for response.

Q2: Style

"What style?

• Flat (modern, solid colors)
• 3D (depth, shadows)
• Line (outline only)
• Glyph (solid filled shape)
• Gradient (color transitions)
• Minimal (ultra-simple)"

Wait for response.

Q3: Size

"What size? (can generate multiple)

• 1024px (App Store, high-res)
• 512px (Android, web)
• 256px (desktop apps)
• 128px (favicons, small UI)
• All common sizes"

Wait for response.

Q4: Reference Image (Optional but important for icon sets)

"Do you have a reference image to match the style?

• Yes, I have an existing icon to match
• No, generate fresh style"

If yes, ask for the image path. Wait for response.

Q5: Colors (Optional)

"Any color preferences?

• Let AI choose based on concept
• Specific colors (e.g., blue and white)
• Monochrome (single color + transparency)
• Match brand colors"

Wait for response.

Q6: Output Format

"What file format?

• PNG (transparency, recommended)
• JPEG (smaller file, no transparency)
• WebP (modern format, good compression)"

Wait for response.

Q7: Background Removal Method (for PNG/WebP)

"How should we remove the background?

• Built-in (fast, may have minor artifacts)
• Rembg (AI-based, high quality, runs locally)
• None (keep white background from generation)"

Wait for response.

Step 2: Craft the Prompt

Transform user request into an icon-specific prompt:

Template:

A [STYLE] style icon of [CONCEPT] on a transparent background.
Square format, centered, clean edges, suitable for app icon.
[COLOR PREFERENCES]. Simple, recognizable, professional.

Example transformations:
- User: "music app icon"
- Enhanced: "A flat style icon of a musical note on a transparent background. Square format, centered, clean edges, suitable for app icon. Vibrant purple and pink gradient. Simple, recognizable, professional design with modern aesthetic."

• User: "settings gear, minimal"
• Enhanced: "A minimal style icon of a settings gear on a transparent background. Square format, centered, clean edges. Monochrome gray. Ultra-simple design, essential shapes only, no extra details."

Step 3: Generate the Icon

Execute the script:

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --prompt "your enhanced prompt" \
  --style "flat" \
  --size 1024 \
  --output "/path/to/icon.png"

With multiple sizes:

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --prompt "your enhanced prompt" \
  --style "flat" \
  --size 1024 512 256 128 \
  --output "/path/to/icon"

This generates: icon_1024.png, icon_512.png, icon_256.png, icon_128.png

Batch generation (multiple icons):

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --batch '["home", "search", "profile", "settings"]' \
  --style "flat" \
  --size 512 \
  --output "/path/to/icons"

This generates: home_512.png, search_512.png, profile_512.png, settings_512.png

Step 4: Deliver the Result

1. Show the generated icon(s) to the user
2. Provide the prompt used
3. Offer to:
4. Generate different sizes
5. Try a different style
6. Create variations
7. Generate as ICO (favicon format)

Script Parameters

Background Removal Methods

This skill uses the background-remove skill for transparent background generation.

Requirements

See the background-remove skill for installation instructions.

# Install rembg for AI-based background removal
pip install rembg

# Or with GPU acceleration (requires CUDA)
pip install rembg[gpu]

Style Prompt Modifiers

The script automatically adds these style-specific prompt modifiers:

Common Icon Sizes

Error Handling

Missing API key:

Error: GOOGLE_API_KEY not set. Get your key at https://aistudio.google.com/apikey

Generation failed:
- Retry with simpler prompt
- Check if concept is clear and recognizable
- Ensure style is appropriate for the concept

Non-transparent output:
- The script explicitly requests transparent background
- If still not transparent, try adding "isolated on transparent" to prompt
- For complex concepts, results may vary

Reference Image Support

Use reference images to create consistent icon sets. When you provide a reference, the AI will match:
- Visual style and design language
- Line weight and stroke thickness
- Color palette and shading
- Level of detail and complexity
- Overall proportions and spacing

When to Use Reference Images

Reference Image Examples

Single icon matching existing style:

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "settings gear" \
  -r /path/to/existing_icon.png \
  -z 512

Icon set with consistent style:

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -b '["home", "search", "profile", "settings", "notifications"]' \
  -r /path/to/brand_icon.png \
  -z 512 \
  -o "app_icons"

Multiple reference images (up to 14):

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "calendar" \
  -r /path/to/icon1.png \
  -r /path/to/icon2.png \
  -z 512

Tips for Best Results

1. Be specific about the concept: "shopping cart" is better than "e-commerce"
2. Match style to platform: Flat for iOS/Android, 3D for macOS
3. Keep it simple: Icons should be recognizable at small sizes
4. Test at small sizes: Generate 32px to ensure readability
5. Use consistent style: For icon sets, use same style for all icons
6. Use reference images: For icon sets, always use a reference to ensure consistency

Examples

App Icon

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "camera with colorful lens" \
  -s gradient \
  -z 1024 512 256 \
  -o "camera_icon"

Favicon

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "letter B for blog" \
  -s minimal \
  -z 128 32 16 \
  -o "favicon"

Icon Set

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -b '["home", "search", "notifications", "profile", "settings"]' \
  -s flat \
  -z 512 \
  -o "app_icons"

High-Quality Background Removal (Rembg)

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "detailed gear with shadows" \
  -s 3d \
  -z 512 \
  --bg rembg \
  -o "gear_icon"

WebP Format with Built-in Background Removal

python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "lightning bolt" \
  -s gradient \
  -z 512 \
  -f webp \
  -o "bolt_icon"