icon-set-generator

Name: icon-set-generator
Author: jezweb

1.5kinstalls96forks

How to install icon-set-generator?

jezweb/claude-skills/icon-set-generator

$npx -y skills add jezweb/claude-skills --skill icon-set-generator

Installs into the current project.

Summary

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 u

Files · 1

View on GitHub

SKILL.md

1	# Icon Set Generator
2
3	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.
4
5	## Why This Matters
6
7	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.
8
9	## Workflow
10
11	### Step 1: Understand the Project
12
13	Ask about the project. You need enough to suggest icons and pick a style:
14
15	- What's the business/project? (industry, name, vibe)
16	- Any brand guidelines or colour palette? (informs style choices even though SVGs use currentColor)
17	- What feel? (modern, friendly, corporate, minimal, bold)
18	- Roughly how many icons? (typical small site: 15-25)
19
20	A brief like "plumber in Newcastle, modern feel" is enough to proceed. Don't over-interview.
21
22	### Step 2: Suggest Icons
23
24	Read `references/industry-icons.md` for industry-specific suggestions. Organise into groups:
25
26	- Navigation — menu, close, arrows, search
27	- Communication — phone, email, location, clock
28	- Trust — star, shield, award, users
29	- Actions — download, share, calendar, form
30	- Industry-Specific — icons unique to this business type
31
32	Present the list. Let the user add, remove, or rename before generating.
33
34	### Step 3: Define the Style Spec
35
36	Read `references/style-presets.md` for full preset definitions. Pick one as starting point:
37
38	\| Preset \| Best For \| Stroke \| Caps/Joins \| Corners \|
39	\|--------\|----------\|--------\|------------\|---------\|
40	\| Clean \| Most business sites \| 1.5px \| round/round \| 2px \|
41	\| Sharp \| Corporate/technical \| 1.5px \| square/miter \| 0px \|
42	\| Soft \| Friendly/approachable \| 2px \| round/round \| 4px \|
43	\| Minimal \| Elegant/editorial \| 1px \| round/round \| 0px \|
44	\| Bold \| High impact/accessible \| 2.5px \| round/round \| 2px \|
45
46	Tell the user which preset you're recommending and why, then confirm.
47
48	### Step 4: Generate the Icons
49
50	Generate every icon following the SVG Rules below. Output to an `icons/` directory in the project root (or the user's preferred location).
51
52	Read `references/svg-examples.md` before generating — it contains reference implementations showing the right level of complexity and how to handle common icon shapes.
53
54	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.
55
56	### Step 5: Deliver
57
58	Output structure:
59	```
60	icons/
61	├── style-spec.json
62	├── preview.html
63	├── home.svg
64	├── phone.svg
65	└── ...
66	```
67
68	Present `preview.html` first so the user sees the complete set visually.
69
70	---
71
72	## SVG Rules
73
74	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.
75
76	### SVG Template
77
78	Every icon uses this exact outer structure:
79
80	```xml
81	<svg xmlns="http://www.w3.org/2000/svg"
82	width="{grid}" height="{grid}"
83	viewBox="0 0 {grid} {grid}"
84	fill="none"
85	stroke="currentColor"
86	stroke-width="{strokeWidth}"
87	stroke-linecap="{strokeLinecap}"
88	stroke-linejoin="{strokeLinejoin}">
89	<!-- icon paths here -->
90	</svg>
91	```
92
93	### Hard Rules
94
95	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"`.
96
97	2. Identical viewBox — Every icon uses the same `viewBox`. No exceptions.
98
99	3. Identical root stroke attributes — `stroke-width`, `stroke-linecap`, `stroke-linejoin` on the `<svg>` element must match across all icons. Override on individual elements only when truly necessary.
100
101	4. No transforms on root — No `translate`, `rotate`, `scale`. Bake positioning into coordinates.
102
103	5. No IDs or classes — Keep SVGs clean for external styling.
104
105	6. Coordinate precision — Max 2 decimal places. Snap to half-pixel grid (e.g. `12`, `12.5`, not `12.333`).
106
107	7. **Consistent

People who liked this also viewed

6 picks

Type

icon-set-generator

1.5kinstalls96forks

View on GitHub

How to install icon-set-generator?

jezweb/claude-skills/icon-set-generator

$npx -y skills add jezweb/claude-skills --skill icon-set-generator

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Icon Set Generator
2
3	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.
4
5	## Why This Matters
6
7	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.
8
9	## Workflow
10
11	### Step 1: Understand the Project
12
13	Ask about the project. You need enough to suggest icons and pick a style:
14
15	- What's the business/project? (industry, name, vibe)
16	- Any brand guidelines or colour palette? (informs style choices even though SVGs use currentColor)
17	- What feel? (modern, friendly, corporate, minimal, bold)
18	- Roughly how many icons? (typical small site: 15-25)
19
20	A brief like "plumber in Newcastle, modern feel" is enough to proceed. Don't over-interview.
21
22	### Step 2: Suggest Icons
23
24	Read `references/industry-icons.md` for industry-specific suggestions. Organise into groups:
25
26	- Navigation — menu, close, arrows, search
27	- Communication — phone, email, location, clock
28	- Trust — star, shield, award, users
29	- Actions — download, share, calendar, form
30	- Industry-Specific — icons unique to this business type
31
32	Present the list. Let the user add, remove, or rename before generating.
33
34	### Step 3: Define the Style Spec
35
36	Read `references/style-presets.md` for full preset definitions. Pick one as starting point:
37
38	\| Preset \| Best For \| Stroke \| Caps/Joins \| Corners \|
39	\|--------\|----------\|--------\|------------\|---------\|
40	\| Clean \| Most business sites \| 1.5px \| round/round \| 2px \|
41	\| Sharp \| Corporate/technical \| 1.5px \| square/miter \| 0px \|
42	\| Soft \| Friendly/approachable \| 2px \| round/round \| 4px \|
43	\| Minimal \| Elegant/editorial \| 1px \| round/round \| 0px \|
44	\| Bold \| High impact/accessible \| 2.5px \| round/round \| 2px \|
45
46	Tell the user which preset you're recommending and why, then confirm.
47
48	### Step 4: Generate the Icons
49
50	Generate every icon following the SVG Rules below. Output to an `icons/` directory in the project root (or the user's preferred location).
51
52	Read `references/svg-examples.md` before generating — it contains reference implementations showing the right level of complexity and how to handle common icon shapes.
53
54	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.
55
56	### Step 5: Deliver
57
58	Output structure:
59	```
60	icons/
61	├── style-spec.json
62	├── preview.html
63	├── home.svg
64	├── phone.svg
65	└── ...
66	```
67
68	Present `preview.html` first so the user sees the complete set visually.
69
70	---
71
72	## SVG Rules
73
74	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.
75
76	### SVG Template
77
78	Every icon uses this exact outer structure:
79
80	```xml
81	<svg xmlns="http://www.w3.org/2000/svg"
82	width="{grid}" height="{grid}"
83	viewBox="0 0 {grid} {grid}"
84	fill="none"
85	stroke="currentColor"
86	stroke-width="{strokeWidth}"
87	stroke-linecap="{strokeLinecap}"
88	stroke-linejoin="{strokeLinejoin}">
89	<!-- icon paths here -->
90	</svg>
91	```
92
93	### Hard Rules
94
95	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"`.
96
97	2. Identical viewBox — Every icon uses the same `viewBox`. No exceptions.
98
99	3. Identical root stroke attributes — `stroke-width`, `stroke-linecap`, `stroke-linejoin` on the `<svg>` element must match across all icons. Override on individual elements only when truly necessary.
100
101	4. No transforms on root — No `translate`, `rotate`, `scale`. Bake positioning into coordinates.
102
103	5. No IDs or classes — Keep SVGs clean for external styling.
104
105	6. Coordinate precision — Max 2 decimal places. Snap to half-pixel grid (e.g. `12`, `12.5`, not `12.333`).
106
107	7. **Consistent

People who liked this also viewed

6 picks

Type