icon-set-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Icon Set Generator

SVG图标集生成器

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.

生成为特定项目量身定制的、视觉风格统一的SVG图标集。每套图标都基于统一的风格规范构建，确保所有图标风格协调一致——相同的描边粗细、相同的边角处理、相同的视觉密度。

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.

通用图标库（如Lucide、Heroicons）固然好用，但使用这些库的网站都会显得大同小异。自定义图标集能赋予项目独特的视觉标识。难点在于保持风格一致性——单独绘制20多个图标很容易出现风格偏差。此技能通过一次性定义风格规则并在所有图标中强制执行，解决了这一问题。

Workflow

工作流程

Step 1: Understand the Project

步骤1：了解项目背景

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.

询问项目相关信息。你需要足够的信息来推荐图标并选择风格：

业务/项目类型？（行业、名称、氛围）
是否有品牌指南或调色板？（尽管SVG使用currentColor，这仍会影响风格选择）
想要何种风格调性？（现代、友好、商务、极简、醒目）
大致需要多少个图标？（小型网站通常为15-25个）

像“纽卡斯尔的水管工，现代风格”这样的简短描述就足以推进工作，无需过度询问。

Step 2: Suggest Icons

步骤2：推荐图标

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.

查阅

references/industry-icons.md

获取行业专属图标建议。将图标分组整理：

导航类 — 菜单、关闭、箭头、搜索
沟通类 — 电话、邮件、位置、时钟
信任类 — 星星、盾牌、奖项、用户
操作类 — 下载、分享、日历、表单
行业专属类 — 该业务类型特有的图标

将列表呈现给用户，允许用户在生成前添加、删除或重命名图标。

Step 3: Define the Style Spec

步骤3：定义风格规范

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.

查阅

references/style-presets.md

获取完整的预设定义。选择一个作为起始风格：

预设风格	适用场景	描边粗细	端点/连接方式	圆角半径
Clean（简洁）	大多数商务网站	1.5px	round/round（圆角/圆角连接）	2px
Sharp（锐利）	商务/技术类网站	1.5px	square/miter（方角/斜接连接）	0px
Soft（柔和）	友好/亲和类网站	2px	round/round（圆角/圆角连接）	4px
Minimal（极简）	优雅/编辑类网站	1px	round/round（圆角/圆角连接）	0px
Bold（醒目）	高冲击力/易访问类网站	2.5px	round/round（圆角/圆角连接）	2px

告知用户你推荐的预设风格及理由，然后确认。

Step 4: Generate the Icons

步骤4：生成图标

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.

按照以下SVG规则生成每个图标。将输出保存到项目根目录的

icons/

文件夹中（或用户指定的位置）。

生成前请查阅

references/svg-examples.md

——其中包含参考实现，展示了合适的复杂度水平以及如何处理常见的图标形状。

以约5个图标为一批次进行生成。每完成一个批次，需先视觉检查风格一致性，再继续生成。所有图标完成后，创建预览页面和style-spec.json文件。

Step 5: Deliver

步骤5：交付成果

Output structure:

icons/
├── style-spec.json
├── preview.html
├── home.svg
├── phone.svg
└── ...

Present

preview.html

first so the user sees the complete set visually.

输出结构：

icons/
├── style-spec.json
├── preview.html
├── home.svg
├── phone.svg
└── ...

优先展示

preview.html

，让用户能直观查看完整的图标集。

SVG Rules

SVG规则

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

SVG模板

Every icon uses this exact outer structure:

xml

<svg xmlns="http://www.w3.org/2000/svg"
  width="{grid}" height="{grid}"
  viewBox="0 0 {grid} {grid}"
  fill="none"
  stroke="currentColor"
  stroke-width="{strokeWidth}"
  stroke-linecap="{strokeLinecap}"
  stroke-linejoin="{strokeLinejoin}">
  <!-- icon paths here -->
</svg>

每个图标都必须使用以下统一的外层结构：

xml

<svg xmlns="http://www.w3.org/2000/svg"
  width="{grid}" height="{grid}"
  viewBox="0 0 {grid} {grid}"
  fill="none"
  stroke="currentColor"
  stroke-width="{strokeWidth}"
  stroke-linecap="{strokeLinecap}"
  stroke-linejoin="{strokeLinejoin}">
  <!-- 图标路径写在这里 -->
</svg>

Hard Rules

硬性规则

currentColor
only — Never hardcode colours. SVGs inherit colour from CSS. No
```
fill="#000"
```
or
```
stroke="blue"
```
. If a shape needs fill, use
```
fill="currentColor"
```
.
Identical viewBox — Every icon uses the same
```
viewBox
```
. No exceptions.
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.
No transforms on root — No
```
translate
```
,
```
rotate
```
,
```
scale
```
. Bake positioning into coordinates.
No IDs or classes — Keep SVGs clean for external styling.
Coordinate precision — Max 2 decimal places. Snap to half-pixel grid (e.g.
```
12
```
,
```
12.5
```
, not
```
12.333
```
).
Consistent padding — Maintain configured padding from viewBox edge. For 24px grid with 2px padding, draw within 2–22 coordinate range.
Minimal elements — Fewest
```
<path>
```
,
```
<circle>
```
,
```
<rect>
```
,
```
<line>
```
elements practical. Simpler = smaller + faster rendering.
Visual centring — Appear visually centred, not just mathematically centred. A leftward arrow shifts slightly right. A house with a chimney adjusts for asymmetry.

仅使用
currentColor
— 绝不硬编码颜色。SVG从CSS继承颜色。禁止使用
```
fill="#000"
```
或
```
stroke="blue"
```
。如果图形需要填充颜色，使用
```
fill="currentColor"
```
。
统一的viewBox — 所有图标使用相同的
```
viewBox
```
，无一例外。
统一的根元素描边属性 — 所有图标
```
<svg>
```
元素的
```
stroke-width
```
、
```
stroke-linecap
```
、
```
stroke-linejoin
```
必须完全一致。仅在绝对必要时才可在单个元素上覆盖这些属性。
根元素禁止使用变换 — 不得使用
```
translate
```
、
```
rotate
```
、
```
scale
```
。将位置信息直接融入坐标中。
禁止使用ID或类名 — 保持SVG代码简洁，以便外部样式控制。
坐标精度 — 最多保留2位小数。对齐半像素网格（例如
```
12
```
、
```
12.5
```
，而非
```
12.333
```
）。
统一的内边距 — 保持与viewBox边缘的配置内边距。对于24px网格+2px内边距的情况，图形应绘制在2-22的坐标范围内。
最少元素数量 — 尽可能使用最少的
```
<path>
```
、
```
<circle>
```
、
```
<rect>
```
、
```
<line>
```
元素。代码越简洁，文件体积越小，渲染速度越快。
视觉居中 — 确保图标在视觉上居中，而非仅数学上的居中。例如向左箭头需略微右移，带烟囱的房屋需调整以抵消不对称性。

Optical Corrections

视觉校正

Subtle but essential for professional results:

Curved stroke compensation: Curves appear thinner than straight lines at same stroke width. For primarily curved icons (phone, globe), make paths slightly larger rather than changing stroke width.
Pointed shape overshoot: Arrows, chevrons, triangles extend ~0.5px beyond where a square would stop to appear the same size.
Visual weight balancing: Simple icons (single chevron) look lighter than complex ones (gear). Make simpler icons slightly larger in the grid, or use slightly more substantial paths. No icon should look noticeably lighter or heavier than the others.

这些细微的调整对于实现专业级效果至关重要：

曲线描边补偿：相同描边粗细下，曲线看起来比直线更细。对于以曲线为主的图标（如电话、地球仪），应适当增大路径尺寸，而非改变描边粗细。
尖形元素超出：箭头、V形图标、三角形需比方形元素的终止位置超出约0.5px，以确保视觉大小一致。
视觉重量平衡：简单图标（如单个V形图标）看起来比复杂图标（如齿轮）更轻。应将简单图标在网格中适当放大，或使用更粗的路径。确保没有任何图标在视觉上明显比其他图标更轻或更重。

style-spec.json

json

{
  "name": "project-name-icons",
  "preset": "clean",
  "grid": 24,
  "strokeWidth": 1.5,
  "strokeLinecap": "round",
  "strokeLinejoin": "round",
  "cornerRadius": 2,
  "padding": 2,
  "opticalBalance": true,
  "iconCount": 20,
  "icons": ["home", "phone", "email"],
  "generated": "2026-02-15"
}

json

{
  "name": "project-name-icons",
  "preset": "clean",
  "grid": 24,
  "strokeWidth": 1.5,
  "strokeLinecap": "round",
  "strokeLinejoin": "round",
  "cornerRadius": 2,
  "padding": 2,
  "opticalBalance": true,
  "iconCount": 20,
  "icons": ["home", "phone", "email"],
  "generated": "2026-02-15"
}

Preview Page

预览页面

Generate a self-contained HTML file displaying all icons for visual review. Read

references/preview-template.md

for the template. Requirements:

Grid of all icons at native size (24px) with labels
Same grid at 2x (48px) for detail inspection
Dark background section (white on dark) for contrast check
Style spec summary at top
Inline CSS, no dependencies — just open in browser
Inline all SVGs directly into the HTML (don't reference external files)

生成一个独立的HTML文件，用于展示所有图标以便视觉检查。模板请查阅

references/preview-template.md

。要求：

以原始尺寸（24px）展示所有图标并附带标签的网格布局
提供2倍尺寸（48px）的相同网格，用于细节检查
深色背景区域（深色背景配白色图标）用于对比度检查
顶部显示风格规范摘要
使用内联CSS，无外部依赖——直接在浏览器中打开即可
将所有SVG直接内联到HTML中（不要引用外部文件）

Quality Checklist

质量检查表

Verify every item before delivering:

All SVGs have identical

viewBox

stroke-width

stroke-linecap

stroke-linejoin

All SVGs use
```
currentColor
```
exclusively
Visual weight is balanced across the set
Padding is consistent (nothing touching viewBox edge)
All icons visually centred
Filenames are lowercase kebab-case (
```
arrow-right.svg
```
)
Preview HTML renders all icons correctly
style-spec.json is accurate and lists all icons

交付前请验证以下所有项：

所有SVG的

viewBox

、

stroke-width

、

stroke-linecap

、

stroke-linejoin

完全一致

所有SVG仅使用
```
currentColor
```
整个图标集的视觉重量保持平衡
内边距统一（无元素触碰viewBox边缘）
所有图标在视觉上居中
文件名使用小写短横线命名法（如
```
arrow-right.svg
```
）
预览HTML能正确渲染所有图标
style-spec.json准确无误且列出了所有图标

Reference Files

参考文件

Read these before generating:

```
references/style-presets.md
```
— Detailed preset definitions and selection guidance
```
references/industry-icons.md
```
— Industry-specific icon suggestions
```
references/preview-template.md
```
— HTML template for the preview page
```
references/svg-examples.md
```
— Example SVGs showing proper construction at various complexity levels

生成前请阅读以下文件：

```
references/style-presets.md
```
— 详细的预设定义及选择指南
```
references/industry-icons.md
```
— 行业专属图标建议
```
references/preview-template.md
```
— 预览页面的HTML模板
```
references/svg-examples.md
```
— 展示不同复杂度水平的正确SVG构建方式的示例图标