Back to Details

icon-generation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Icon Generation Skill

图标生成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.
使用AI（Google Gemini）生成带透明背景的专业应用图标。
输出结果： 带透明背景的方形PNG图标 - 适用于应用商店、网站图标（favicon）或UI界面。

Quick Examples

快速示例

User SaysWhat 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" + imageUses reference image to match style
"Generate more icons like this one"Creates consistent icon set from reference
用户指令执行效果
"Create an icon for a music app"生成带透明背景的方形PNG图标
"Make a settings gear icon, flat style"生成具有简洁线条的flat风格图标
"Generate a 3D shopping cart icon"生成具有立体感和阴影的3D风格图标
"I need a favicon for my blog"生成针对网页优化的小尺寸图标
"Create icon set: home, search, profile"批量生成多个图标
"Make icons matching this style" + 图片参考图片风格生成匹配的图标
"Generate more icons like this one"参考现有图标创建风格统一的图标集

Prerequisites

前置条件

Icon Styles

图标风格

StyleDescriptionBest For
flatModern flat design, solid colors, minimal shadowsiOS, Material Design, web
3dDepth, gradients, realistic shadowsmacOS, premium apps
lineOutline only, thin strokesMinimalist UI, toolbars
glyphSolid filled shape, single colorSystem icons, tab bars
gradientSmooth color transitionsModern app icons
minimalUltra-simple, essential shapes onlyProfessional, clean UI
风格描述适用场景
flat现代flat设计，纯色填充，阴影极简iOS、Material Design、网页
3d具有立体感、渐变效果、真实阴影macOS、高端应用
line仅轮廓线条，纤细笔触极简UI、工具栏
glyph纯色填充形状，单一颜色系统图标、标签栏
gradient平滑色彩过渡现代应用图标
minimal超简洁，仅保留核心形状专业、干净的UI界面

Workflow

工作流程

Step 1: Gather Requirements (REQUIRED)

步骤1：收集需求（必填）

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.
使用
AskUserQuestion
工具逐个提问，每次仅问一个问题。
问题1：图标概念
"这个图标需要代表什么？
示例：设置齿轮、购物车、用户头像、首页、音符、相机"
等待用户回复。
问题2：风格
"选择什么风格？
  • flat（现代、纯色）
  • 3D（立体感、阴影）
  • line（仅轮廓）
  • glyph（纯色填充形状）
  • gradient（色彩过渡）
  • minimal（超简洁）"
等待用户回复。
问题3：尺寸
"选择什么尺寸？（可生成多个尺寸）
  • 1024px（应用商店、高分辨率）
  • 512px（安卓、网页）
  • 256px（桌面应用）
  • 128px（网站图标、小型UI元素）
  • 所有常用尺寸"
等待用户回复。
问题4：参考图片（可选但对图标集很重要）
"是否有参考图片用于匹配风格？
  • 是，我有现有图标需要匹配风格
  • 否，生成全新风格"
如果用户选择是，询问图片路径，等待回复。
问题5：颜色偏好（可选）
"是否有颜色偏好？
  • 由AI根据概念自动选择
  • 指定颜色（例如：蓝白配色）
  • 单色（单一颜色+透明）
  • 匹配品牌颜色"
等待用户回复。
问题6：输出格式
"选择什么文件格式？
  • PNG（支持透明，推荐）
  • JPEG（文件更小，不支持透明）
  • WebP（现代格式，压缩效果好）"
等待用户回复。
问题7：背景移除方式（针对PNG/WebP格式）
"如何移除背景？
  • Built-in（快速，可能有轻微瑕疵）
  • Rembg（基于AI，高质量，本地运行）
  • None（保留生成时的白色背景）"
等待用户回复。

Step 2: Craft the Prompt

步骤2：编写提示词

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."
将用户需求转换为图标专用提示词：
模板：
A [STYLE] style icon of [CONCEPT] on a transparent background.
Square format, centered, clean edges, suitable for app icon.
[COLOR PREFERENCES]. Simple, recognizable, professional.
示例转换：
  • 用户："music app icon"
  • 优化后："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."
  • 用户："settings gear, minimal"
  • 优化后："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

步骤3：生成图标

Execute the script:
bash
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:
bash
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):
bash
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
执行脚本：
bash
python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --prompt "your enhanced prompt" \
  --style "flat" \
  --size 1024 \
  --output "/path/to/icon.png"
生成多尺寸图标：
bash
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"
此命令将生成：
icon_1024.png
, 
icon_512.png
, 
icon_256.png
, 
icon_128.png
批量生成（多个图标）：
bash
python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  --batch '["home", "search", "profile", "settings"]' \
  --style "flat" \
  --size 512 \
  --output "/path/to/icons"
此命令将生成：
home_512.png
, 
search_512.png
, 
profile_512.png
, 
settings_512.png

Step 4: Deliver the Result

步骤4：交付结果

  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)
  1. 向用户展示生成的图标
  2. 提供使用的提示词
  3. 提供以下可选服务：
    • 生成不同尺寸的图标
    • 尝试不同风格
    • 创建变体图标
    • 生成ICO格式（网站图标专用格式）

Script Parameters

脚本参数

ParameterShortDescriptionDefault
--prompt
-p
Icon descriptionRequired
--style
-s
Icon style presetflat
--size
-z
Size(s) in pixels512 (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 pathauto-generated
--batch
-b
JSON array of conceptsNone
--colors
-c
Color preferencesAI choice
--reference
-r
Reference image(s) for style matchingNone
参数简写描述默认值
--prompt
-p
图标描述提示词必填
--style
-s
图标风格预设flat
--size
-z
图标尺寸（像素）512（或根据参考图片自动适配）
--format
-f
输出格式（png, jpeg, webp）png
--bg-removal
--bg
背景移除方式（builtin, rembg, none）builtin
--output
-o
输出路径自动生成
--batch
-b
概念列表（JSON数组）无
--colors
-c
颜色偏好AI自动选择
--reference
-r
用于风格匹配的参考图片无

Background Removal Methods

背景移除方式

This skill uses the background-remove skill for transparent background generation.
MethodDescriptionBest For
builtinFast white-to-transparent conversionQuick iterations, most icons
rembgAI-based removal using U2-Net modelHigh-quality results, complex backgrounds
noneKeeps the white background as-isJPEG output, manual post-processing
本Skill使用background-remove Skill生成透明背景图标。
方式描述适用场景
builtin快速将白色背景转换为透明快速迭代、大多数图标
rembg基于U2-Net模型的AI背景移除高质量结果、复杂背景
none保留生成时的白色背景JPEG输出、手动后期处理

Requirements

依赖要求

See the background-remove skill for installation instructions.
bash
undefined
查看background-remove Skill获取安装说明。
bash
undefined

Install rembg for AI-based background removal

安装rembg以使用AI背景移除功能

pip install rembg
pip install rembg

Or with GPU acceleration (requires CUDA)

或启用GPU加速（需要CUDA）

pip install rembg[gpu]
undefined
pip install rembg[gpu]
undefined

Style Prompt Modifiers

风格提示词修饰符

The script automatically adds these style-specific prompt modifiers:
StyleModifier 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"
脚本会自动添加以下风格专用的提示词修饰符：
风格添加的修饰符
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

常用图标尺寸

SizeUse Case
1024pxiOS App Store, high-resolution displays
512pxAndroid Play Store, macOS apps
256pxWindows apps, desktop shortcuts
192pxAndroid launcher icons
180pxiOS home screen
128pxFavicons (high-res), small UI
64pxToolbar icons
32pxStandard favicon
16pxSmallest favicon
尺寸使用场景
1024pxiOS应用商店、高分辨率显示器
512px安卓应用商店、macOS应用
256pxWindows应用、桌面快捷方式
192px安卓启动器图标
180pxiOS主屏幕图标
128px高分辨率网站图标、小型UI元素
64px工具栏图标
32px标准网站图标
16px最小尺寸网站图标

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
缺少API密钥：
Error: GOOGLE_API_KEY not set. Get your key at https://aistudio.google.com/apikey
生成失败：
  • 使用更简单的提示词重试
  • 检查概念是否清晰易识别
  • 确保风格与概念匹配
输出无透明背景：
  • 脚本已明确要求透明背景
  • 如果仍不透明，尝试在提示词中添加"isolated on transparent"
  • 复杂概念的结果可能会有差异

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
使用参考图片创建风格统一的图标集。提供参考图片后，AI将匹配以下内容：
  • 视觉风格和设计语言
  • 线条粗细和笔触
  • 调色板和阴影
  • 细节程度和复杂度
  • 整体比例和间距

When to Use Reference Images

何时使用参考图片

ScenarioUse Reference?
Creating multiple icons for same appYes - ensures consistency
Matching existing brand iconsYes - maintains brand identity
Adding to existing icon setYes - blends seamlessly
Single standalone iconOptional - fresh style is fine
Exploring different stylesNo - let AI be creative
场景是否使用参考图片？
为同一应用创建多个图标是 - 确保风格统一
匹配现有品牌图标是 - 保持品牌一致性
添加到现有图标集是 - 实现无缝融合
单个独立图标可选 - 全新风格即可
探索不同风格否 - 让AI自由创作

Reference Image Examples

参考图片示例

Single icon matching existing style:
bash
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:
bash
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):
bash
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
匹配现有风格的单个图标：
bash
python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "settings gear" \
  -r /path/to/existing_icon.png \
  -z 512
风格统一的图标集：
bash
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"
多张参考图片（最多14张）：
bash
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
  1. 概念描述要具体："shopping cart"比"e-commerce"效果更好
  2. 风格与平台匹配：iOS/Android用flat风格，macOS用3D风格
  3. 保持简洁：图标在小尺寸下应清晰可识别
  4. 测试小尺寸效果：生成32px尺寸确保可读性
  5. 保持风格统一：图标集所有图标使用相同风格
  6. 使用参考图片：创建图标集时，务必使用参考图片确保风格一致

Examples

示例

App Icon

应用图标

bash
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"
bash
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

网站图标

bash
python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -p "letter B for blog" \
  -s minimal \
  -z 128 32 16 \
  -o "favicon"
bash
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

图标集

bash
python3 ${CLAUDE_PLUGIN_ROOT}/skills/icon-generation/scripts/icon_generator.py \
  -b '["home", "search", "notifications", "profile", "settings"]' \
  -s flat \
  -z 512 \
  -o "app_icons"
bash
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)

高质量背景移除（Rembg）

bash
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"
bash
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

WebP格式与内置背景移除

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