1# Icon Design Reference
2 
3AI-powered SVG icon generation using Gemini 3.1 Pro Preview. 15 styles, 12 categories, multi-size export.
4 
5## Scripts
6 
7| Script | Purpose |
8|--------|---------|
9| `scripts/icon/generate.py` | Generate SVG icons with Gemini 3.1 Pro Preview |
10 
11## Commands
12 
13### Generate Single Icon
14 
15```bash
16python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
17python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
18python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
19```
20 
21### Generate Batch Variations
22 
23```bash
24python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
25python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "notification bell" --batch 6 --style outlined --output-dir ./icons
26```
27 
28### Generate Multiple Sizes
29 
30```bash
31python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
32```
33 
34### List Styles/Categories
35 
36```bash
37python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
38python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories
39```
40 
41## CLI Options
42 
43| Option | Description | Default |
44|--------|-------------|---------|
45| `--prompt, -p` | Icon description | required |
46| `--name, -n` | Icon name (for filename) | - |
47| `--style, -s` | Icon style (15 options) | - |
48| `--category, -c` | Icon category for context | - |
49| `--color` | Primary hex color | currentColor |
50| `--size` | Display size in px | 24 |
51| `--viewbox` | SVG viewBox size | 24 |
52| `--output, -o` | Output file path | auto |
53| `--output-dir` | Output directory (batch) | ./icons |
54| `--batch` | Number of variations | - |
55| `--sizes` | Comma-separated sizes | - |
56 
57## Available Styles
58 
59| Style | Stroke | Fill | Best For |
60|-------|--------|------|----------|
61| outlined | 2px | none | UI interfaces, web apps |
62| filled | 0 | solid | Mobile apps, nav bars |
63| duotone | 0 | dual | Marketing, landing pages |
64| thin | 1-1.5px | none | Luxury brands, editorial |
65| bold | 3px | none | Headers, hero sections |
66| rounded | 2px | none | Friendly apps, health |
67| sharp | 2px | none | Tech, fintech, enterprise |
68| flat | 0 | solid | Material design, Google-style |
69| gradient | 0 | gradient | Modern brands, SaaS |
70| glassmorphism | 1px | semi | Modern UI, overlays |
71| pixel | 0 | solid | Gaming, retro |
72| hand-drawn | varies | none | Artisan, creative |
73| isometric | 1-2px | partial | Tech docs, infographics |
74| glyph | 0 | solid | System UI, compact |
75| animated-ready | 2px | varies | Interactive UI, onboarding |
76 
77## Icon Categories
78 
79| Category | Icons |
80|----------|-------|
81| navigation | arrows, menus, home, chevrons |
82| action | edit, delete, save, download, upload |
83| communication | email, chat, phone, notification |
84| media | play, pause, volume, camera |
85| file | document, folder, archive, cloud |
86| user | person, group, profile, settings |
87| commerce | cart, bag, wallet, credit card |
88| data | chart, graph, analytics, dashboard |
89| development | code, terminal, bug, git, API |
90| social | heart, star, bookmark, trophy |
91| weather | sun, moon, cloud, rain |
92| map | pin, location, compass, globe |
93 
94## SVG Best Practices
95 
96- **ViewBox**: Use `0 0 24 24` (standard) or `0 0 16 16` (compact)
97- **Colors**: Use `currentColor` for CSS inheritance, avoid hardcoded colors
98- **Accessibility**: Always include `<title>` element
99- **Optimization**: Minimal path nodes, no embedded fonts or raster images
100- **Sizing**: Design at 24px, test at 16px and 48px for clarity
101- **Stroke**: Use `stroke-linecap="round"` and `stroke-linejoin="round"` for outlined styles
102 
103## Model
104 
105- **gemini-3.1-pro-preview**: Best thinking, token efficiency, factual consistency
106- Text-only output (SVG is XML text) — no image generation API needed
107- Supports structured output for consistent SVG formatting
108 
109## Workflow
110 
1111. Describe icon → `--prompt "settings gear"`
1122. Choose style → `--style outlined`
1133. Generate → script outputs .svg file
1144. Optionally batch → `--batch 4` for variations
1155. Multi-size export → `--sizes "16,24,32,48"`
116 
117## Setup
118 
119```bash
120export GEMINI_API_KEY="your-key"
121pip install google-genai
122```
123