Icon Design Reference
AI-powered SVG icon generation using Gemini 3.1 Pro Preview. 15 styles, 12 categories, multi-size export.
Scripts
| Script |
Purpose |
scripts/icon/generate.py |
Generate SVG icons with Gemini 3.1 Pro Preview |
Commands
Generate Single Icon
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
Generate Batch Variations
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "notification bell" --batch 6 --style outlined --output-dir ./icons
Generate Multiple Sizes
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
List Styles/Categories
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories
CLI Options
| Option |
Description |
Default |
--prompt, -p |
Icon description |
required |
--name, -n |
Icon name (for filename) |
- |
--style, -s |
Icon style (15 options) |
- |
--category, -c |
Icon category for context |
- |
--color |
Primary hex color |
currentColor |
--size |
Display size in px |
24 |
--viewbox |
SVG viewBox size |
24 |
--output, -o |
Output file path |
auto |
--output-dir |
Output directory (batch) |
./icons |
--batch |
Number of variations |
- |
--sizes |
Comma-separated sizes |
- |
Available Styles
| Style |
Stroke |
Fill |
Best For |
| outlined |
2px |
none |
UI interfaces, web apps |
| filled |
0 |
solid |
Mobile apps, nav bars |
| duotone |
0 |
dual |
Marketing, landing pages |
| thin |
1-1.5px |
none |
Luxury brands, editorial |
| bold |
3px |
none |
Headers, hero sections |
| rounded |
2px |
none |
Friendly apps, health |
| sharp |
2px |
none |
Tech, fintech, enterprise |
| flat |
0 |
solid |
Material design, Google-style |
| gradient |
0 |
gradient |
Modern brands, SaaS |
| glassmorphism |
1px |
semi |
Modern UI, overlays |
| pixel |
0 |
solid |
Gaming, retro |
| hand-drawn |
varies |
none |
Artisan, creative |
| isometric |
1-2px |
partial |
Tech docs, infographics |
| glyph |
0 |
solid |
System UI, compact |
| animated-ready |
2px |
varies |
Interactive UI, onboarding |
Icon Categories
| Category |
Icons |
| navigation |
arrows, menus, home, chevrons |
| action |
edit, delete, save, download, upload |
| communication |
email, chat, phone, notification |
| media |
play, pause, volume, camera |
| file |
document, folder, archive, cloud |
| user |
person, group, profile, settings |
| commerce |
cart, bag, wallet, credit card |
| data |
chart, graph, analytics, dashboard |
| development |
code, terminal, bug, git, API |
| social |
heart, star, bookmark, trophy |
| weather |
sun, moon, cloud, rain |
| map |
pin, location, compass, globe |
SVG Best Practices
- ViewBox: Use
0 0 24 24 (standard) or 0 0 16 16 (compact)
- Colors: Use
currentColor for CSS inheritance, avoid hardcoded colors
- Accessibility: Always include
<title> element
- Optimization: Minimal path nodes, no embedded fonts or raster images
- Sizing: Design at 24px, test at 16px and 48px for clarity
- Stroke: Use
stroke-linecap="round" and stroke-linejoin="round" for outlined styles
Model
- gemini-3.1-pro-preview: Best thinking, token efficiency, factual consistency
- Text-only output (SVG is XML text) — no image generation API needed
- Supports structured output for consistent SVG formatting
Workflow
- Describe icon →
--prompt "settings gear"
- Choose style →
--style outlined
- Generate → script outputs .svg file
- Optionally batch →
--batch 4 for variations
- Multi-size export →
--sizes "16,24,32,48"
Setup
export GEMINI_API_KEY="your-key"
pip install google-genai