Icon Set Generator

Generate a consistent icon set

One icon can survive improvisation. A set cannot. Small changes in stroke, optical size, gaps, and recurring parts accumulate into drift. Freeze those decisions before drawing and validate the batch against them.

Workflow

Step 1: Get the brief

Inspect the project for brand rules and usage sizes before asking questions. Collect only the missing facts:

• Product, audience, and tone
• Smallest render size and every distinct size range
• Required icons and the screens where they appear
• Existing type, interface, or brand artwork the icons must sit beside

Use a 16 grid for 12 to 20px rendering and a 24 grid for 22px or larger. When both ranges matter, draw separate small and large sets. The full range requires distinct drawings.

This step is complete when the grid, tone, inventory source, and adjacent visual system are known or stated as explicit assumptions.

Step 2: Confirm the inventory

Read references/icon-inventory.md. Walk the product surfaces in scope, then group the proposed icons by use so omissions and duplicate concepts are visible. Reuse one drawing for semantic aliases.

If the user supplied a complete list, confirm only conflicts or likely omissions. If they asked you to choose the set, present the inventory before drawing.

This step is complete when every surface in scope has an icon or a deliberate exclusion and each drawing has one filename plus any semantic aliases.

Step 3: Freeze the specification

Read references/style-presets.md. Use the user's exact values when supplied. Otherwise, recommend one preset with a concrete reason and confirm it before drawing.

Copy the confirmed preset values into icons/style-spec.json. Add the set name, diagonal axis, and an empty icons array. Treat the file as frozen during drawing. If a form exposes a bad rule, revise the specification once and apply the change to the whole set.

This step is complete when style-spec.json contains every root style value and the chosen diagonal axis.

Step 4: Build the element registry

List every part that recurs across the approved inventory. Draw each part once at final coordinates and save it in icons/elements.md. Record its anchor point and allowed rotations. Use references/svg-patterns.md as the format model.

Paste registry markup into complete icons instead of redrawing it. Translation uses whole units. Rotation uses quarter turns unless the specification defines another rule.

This step is complete when every recurring part has one registry entry and every planned use points back to that entry.

Step 5: Draw anchors, then batches

Read references/construction.md before the first SVG. It is the single source for optical envelopes, geometry, gap rules, dots, direction, terminals, and filled variants. Read the relevant section of references/svg-patterns.md when a form resists the grid.

Choose one anchor for each optical envelope represented in the inventory. Compare the anchors together at native size. Draw the rest in batches of about five, then compare each batch with the anchors before continuing.

Write one lowercase kebab-case SVG per icon into icons/. This step is complete when every approved icon exists and every batch has been checked at native size against the anchors.

Step 6: Validate against the frozen specification

python3 scripts/validate_icons.py icons/

The validator automatically loads icons/style-spec.json when it exists. Pass --spec only when the specification lives elsewhere. It reports errors for broken rules and warnings for measurements that need visual judgment.

Fix every error and run the command again. Inspect every warning in the preview. Fix it or record a concrete reason for keeping it.

This step is complete when validation exits successfully, reports zero errors, and every warning has a recorded disposition.

Step 7: Build the preview and deliver

python3 scripts/build_preview.py icons/ --out icons/preview.html

Inspect every icon at native size and twice native size on light and dark backgrounds. Update the icons array in style-spec.json, rebuild the preview, and verify that it lists every SVG.

The final directory contains:

icons/
|-- style-spec.json
|-- elements.md
|-- preview.html
|-- arrow-right.svg
`-- calendar.svg

The task is complete when the approved inventory, specification, registry, clean validation, warning dispositions, and final preview all agree.

SVG rules

• Use currentColor for every stylable color. Outline icons use fill="none" and stroke="currentColor". Filled forms use fill="currentColor".
• Put shared style attributes on the root <svg> and keep them identical across files.
• Use a child stroke-width only for a documented optical correction.
• Keep id and class off the root. Bake root transforms into coordinates.
• Use at most two decimal places. Prefer whole and half units.
• Choose the fewest SVG elements that express the form clearly.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="1.5"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 10.5 12 3l9 7.5"/>
  <path d="M5 9.5v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-10"/>
</svg>

Reference files

• Read references/icon-inventory.md during Step 2.
• Read references/style-presets.md during Step 3.
• Read all of references/construction.md before Step 5.
• Read only the relevant form in references/svg-patterns.md when a specific drawing needs it.