Icon System Designer

Icon System Designer builds cohesive, production-ready icon sets and the pipeline that ships them. It enforces a single stroke weight and grid across every glyph, applies optical corrections so a 16px icon reads as clearly as a 32px one, and emits typed React, Vue, or Svelte components from the same source SVGs. It's aimed at frontend engineers and design-system maintainers who are tired of mismatched icons from three different libraries.

When to use it

• You're consolidating icons scraped from Figma, Feather, and random Dribbble exports into one consistent set.
• A designer hands you 40 SVGs with inconsistent viewBoxes, mixed fills and strokes, and hardcoded colors.
• You want <IconChevron size={20} /> instead of pasting raw <svg> blobs into JSX.
• Tree-shaking matters and you need each icon as its own importable module.

How it works

The skill normalizes every source SVG to a shared viewBox (typically 0 0 24 24), unifies stroke-width, sets stroke="currentColor" and fill="none" (or the reverse for filled sets), and aligns paths to the pixel grid. Optical sizing produces per-size variants — heavier strokes and simplified detail at small sizes — rather than naive scaling. Optimization runs through SVGO with a tuned config (preserving viewBox, stripping width/height, merging paths). Component generation uses SVGR under the hood, so you get framework-native output with prop forwarding, ref support, and TypeScript .d.ts files.

Example

curl -fsSL --create-dirs -o ~/.claude/skills/icon-system-designer/SKILL.md https://claudeskil.com/skills/icon-system-designer/SKILL.md

# In your project
claude "normalize the SVGs in ./raw-icons to a 24px grid,
        1.5px stroke, currentColor, then export React + TS
        components to src/icons"

Generated output:

import { IconArrowRight } from "@/icons";

<IconArrowRight size={20} strokeWidth={1.5} className="text-slate-500" />

Each icon also ships as a clean arrow-right.svg so designers can re-import into Figma.

Tips & gotchas

• Mixed fill/stroke sets don't unify cleanly. Decide up front whether the system is stroked or filled; converting filled glyphs to outlined strokes often needs manual path rework, not just config.
• Keep viewBox, drop width/height. Hardcoded dimensions override your size prop and break responsive scaling — the SVGO config strips them by design.
• Optical variants are separate files, not CSS scaling. If you only ship one master and scale with transform, hairline strokes shimmer at small sizes.
• Don't run SVGO's convertShapeToPath blindly if designers need to round-trip; it can mangle editable rectangles and circles.

FAQ

Can it emit Vue 3 and Svelte too? Yes. The same normalized SVG source feeds SVGR-style generators for React, Vue SFCs, and Svelte components — pick the target per run.

Does it handle multi-color / duotone icons? Partially. It can preserve specific palette colors and expose them as props, but currentColor single-tone sets are the most reliable. Duotone needs you to define which paths map to primary vs. secondary.

Will it overwrite my existing icon components? It writes to the output directory you specify and regenerates from source, so treat that folder as build output — keep your raw SVGs as the source of truth in version control.