---
name: icon-system-designer
description: "Custom icon sets: consistent stroke, optical sizing, SVG optimization, React/Vue/Svelte exports. Designs cohesive icon systems with consistent stroke weight, optical adjustments at different sizes, and the build pipeline that ships them as React/Vue/Svelte components."
license: MIT
---

# 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

```bash
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:

```tsx
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.