Adding icons

Drop the SVG

Save your file at icons/<variant>/<name>.svg using kebab-case, where <variant> is stroke or fill. Icons must fit inside a 24×24 viewBox and use strokes only (no fills on child elements). The canonical root attributes are:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="butt" stroke-linejoin="miter">
  <!-- geometry only: <path>, <circle>, <rect>, <line>, <polygon>, <polyline> -->
</svg>

Child elements should contain geometry attributes only (d, cx, r, points, …) — not presentation attributes like stroke or fill. Those are set on the root <svg> and inherited at render time so the color and strokeWidth props work.

Design rules

• Stay inside the 24×24 viewBox with ~1px padding on each side.
• Stroke-only — no fill on child elements.
• Keep geometry flat: no <g> groups, <defs>, or <mask>. The parser is intentionally simple.

Add metadata

Create icons/<variant>/<name>.json next to the SVG. The required fields are $schema, contributors, tags, and categories:

{
  "$schema": "../../icon.schema.json",
  "contributors": ["yourname"],
  "tags": ["search-keyword-1", "search-keyword-2"],
  "categories": ["shapes"]
}

The full set of fields lives in icon.schema.json at the repo root. Useful optional fields:

{
  "aliases": [{ "name": "older-name" }],
  "deprecated": true,
  "deprecationReason": "Use new-name instead"
}

categories is an enum — valid values are listed in icon.schema.json.

Build everything

pnpm icons

This single command runs the full pipeline:

1. clean-svgs — normalizes root <svg> attributes and strips inline presentation attributes from child elements.
2. build — builds @jedd-icons/shared, generates the per-icon TS files, then builds @jedd-icons/core and @jedd-icons/react.