icon-generation

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

User Says	What Happens
"Create an icon for a music app"	Generates square PNG with transparent background
"Make a settings gear icon, flat style"	Flat design icon with clean lines
"Generate a 3D shopping cart icon"	3D-style icon with depth and shadows
"I need a favicon for my blog"	Small icon optimized for web
"Create icon set: home, search, profile"	Batch generates multiple icons
"Make icons matching this style" + image	Uses reference image to match style
"Generate more icons like this one"	Creates consistent icon set from reference

Prerequisites

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

Icon Styles

Style	Description	Best For
flat	Modern flat design, solid colors, minimal shadows	iOS, Material Design, web
3d	Depth, gradients, realistic shadows	macOS, premium apps
line	Outline only, thin strokes	Minimalist UI, toolbars
glyph	Solid filled shape, single color	System icons, tab bars
gradient	Smooth color transitions	Modern app icons
minimal	Ultra-simple, essential shapes only	Professional, clean UI

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:
   • Generate different sizes
   • Try a different style
   • Create variations
   • Generate as ICO (favicon format)

Script Parameters

Parameter	Short	Description	Default
--prompt	-p	Icon description	Required
--style	-s	Icon style preset	flat
--size	-z	Size(s) in pixels	512 (or auto from reference)
--format	-f	Output format (png, jpeg, webp)	png
--bg-removal	--bg	Background removal method (builtin, rembg, none)	builtin
--output	-o	Output path	auto-generated
--batch	-b	JSON array of concepts	None
--colors	-c	Color preferences	AI choice
--reference	-r	Reference image(s) for style matching	None

Background Removal Methods

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

Method	Description	Best For
builtin	Fast white-to-transparent conversion	Quick iterations, most icons
rembg	AI-based removal using U2-Net model	High-quality results, complex backgrounds
none	Keeps the white background as-is	JPEG output, manual post-processing

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:

Style	Modifier Added
flat	"flat design, solid colors, no gradients, minimal shadows, clean vector style"
3d	"3D style, depth, soft shadows, subtle gradients, professional rendering"
line	"line art, outline only, thin consistent strokes, no fill, minimalist"
glyph	"solid filled shape, single color, bold silhouette, high contrast"
gradient	"smooth gradient colors, modern vibrant transitions, glossy finish"
minimal	"ultra-minimal, essential shapes only, maximum simplicity, geometric"

Common Icon Sizes

Size	Use Case
1024px	iOS App Store, high-resolution displays
512px	Android Play Store, macOS apps
256px	Windows apps, desktop shortcuts
192px	Android launcher icons
180px	iOS home screen
128px	Favicons (high-res), small UI
64px	Toolbar icons
32px	Standard favicon
16px	Smallest favicon

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

Scenario	Use Reference?
Creating multiple icons for same app	Yes - ensures consistency
Matching existing brand icons	Yes - maintains brand identity
Adding to existing icon set	Yes - blends seamlessly
Single standalone icon	Optional - fresh style is fine
Exploring different styles	No - let AI be creative

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"