create-svg-icon

Create SVG Icon

Create original icons through one fixed pipeline:

design system → ImageGen PNG → visual approval → PNG-to-SVG reconstruction → SVG QA

Resolve <skill-dir> to this skill directory and <collection-dir> to its parent. The required conversion skill is <collection-dir>/png-to-svg/SKILL.md.

Non-negotiable workflow gate

• Read references/icon-design-guide.md completely before making design decisions.
• Use the host's callable ImageGen/image-generation tool to create the raster concept.
• Generate only linear or filled icon artwork unless the user explicitly expands the style scope.
• Do not draw, code, trace, or deliver the final SVG until a generated PNG concept has been inspected and accepted for conversion.
• After the PNG is accepted, load and follow the sibling $png-to-svg skill for every final icon.
• Never embed the generated PNG in the SVG. The PNG is design evidence; the SVG is a clean vector reconstruction.

If ImageGen is unavailable, stop and tell the user that the required first stage cannot run. Do not silently bypass it by drawing an SVG directly.

1. Define the icon system

Ask only for information that cannot be inferred from supplied product context. Otherwise make reasonable decisions and record a compact style spec:

• icon names and intended meanings;
• target size and usage context;
• linear or filled construction;
• live area, padding, optical sizing, angle set, and detail budget;
• stroke width/caps/joins for linear icons;
• corner language and fill rule;
• locked color hex values;
• one recurring brand motif, when appropriate;
• light/dark background requirements and active/inactive states.

For a set, write each concept as name — one concrete metaphor. Use one idea per icon and keep abstraction and detail density consistent.

Use references/style-specs.md as the baseline, then adapt it to the product rather than producing generic recolored symbols.

2. Compose the ImageGen prompt

Use references/imagegen-prompt.md. Include, in order: