---
name: icon-set-generator
description: >
Generate cohesive, project-specific SVG icon sets for websites and applications.
Use this skill whenever the user needs custom icons, an icon set for a website or app,
icons for a client project, or mentions needing SVG icons that look consistent together.
Also trigger when the user describes a project and icons would naturally be part of the
deliverable — e.g. "I'm building a site for a plumber" implies they'll need service icons.
Trigger on: "icons for", "icon set", "custom icons", "SVG icons", "make me icons",
"I need icons", "website icons", "project icons", or any request for consistent visual
assets for a web project. This skill produces individual SVG files with a consistent
style engine, not generic icon library lookups.
---
# Icon Set Generator
Generate custom, visually consistent SVG icon sets tailored to specific projects. Each set is built from a shared style specification so every icon looks like it belongs with the others — same stroke weight, same corner treatment, same visual density.
## Why This Matters
Generic icon libraries (Lucide, Heroicons) are great but every site using them looks similar. A custom icon set gives a project distinct visual identity. The hard part is consistency — drawing 20+ icons individually causes style drift. This skill solves that by defining style rules once and enforcing them across every icon.
## Workflow
### Step 1: Understand the Project
Ask about the project. You need enough to suggest icons and pick a style:
- What's the business/project? (industry, name, vibe)
- Any brand guidelines or colour palette? (informs style choices even though SVGs use currentColor)
- What feel? (modern, friendly, corporate, minimal, bold)
- Roughly how many icons? (typical small site: 15-25)
A brief like "plumber in Newcastle, modern feel" is enough to proceed. Don't over-interview.
### Step 2: Suggest Icons
Read `references/industry-icons.md` for industry-specific suggestions. Organise into groups:
- **Navigation** — menu, close, arrows, search
- **Communication** — phone, email, location, clock
- **Trust** — star, shield, award, users
- **Actions** — download, share, calendar, form
- **Industry-Specific** — icons unique to this business type
Present the list. Let the user add, remove, or rename before generating.
### Step 3: Define the Style Spec
Read `references/style-presets.md` for full preset definitions. Pick one as starting point:
| Preset | Best For | Stroke | Caps/Joins | Corners |
|--------|----------|--------|------------|---------|
| Clean | Most business sites | 1.5px | round/round | 2px |
| Sharp | Corporate/technical | 1.5px | square/miter | 0px |
| Soft | Friendly/approachable | 2px | round/round | 4px |
| Minimal | Elegant/editorial | 1px | round/round | 0px |
| Bold | High impact/accessible | 2.5px | round/round | 2px |
Tell the user which preset you're recommending and why, then confirm.
### Step 4: Generate the Icons
Generate every icon following the SVG Rules below. Output to an `icons/` directory in the project root (or the user's preferred location).
Read `references/svg-examples.md` before generating — it contains reference implementations showing the right level of complexity and how to handle common icon shapes.
Generate in batches of ~5. After each batch, visually review for consistency before continuing. After all icons are done, create the preview page and style-spec.json.
### Step 5: Deliver
Output structure:
```
icons/
├── style-spec.json
├── preview.html
├── home.svg
├── phone.svg
└── ...
```
Present `preview.html` first so the user sees the complete set visually.
---
## SVG Rules
Every icon in a set MUST follow all of these. Even small inconsistencies — a slightly different stroke width, a rounded corner where others are sharp — make the set look amateur.
### SVG Template
Every icon uses this exact outer structure:
```xml
```
### Hard Rules
1. **`currentColor` only** — Never hardcode colours. SVGs inherit colour from CSS. No `fill="#000"` or `stroke="blue"`. If a shape needs fill, use `fill="currentColor"`.
2. **Identical viewBox** — Every icon uses the same `viewBox`. No exceptions.
3. **Identical root stroke attributes** — `stroke-width`, `stroke-linecap`, `stroke-linejoin` on the `