Adding icons

Drop the SVGCopy Anchor Link

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 metadataCopy Anchor Link

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 everythingCopy Anchor Link

pnpm icons

This single command runs the full pipeline:

1. icons:clean — normalizes root <svg> attributes and strips inline presentation attributes from child elements.
2. icons:check — checks the normalized SVGs and their metadata without changing them, and stops on problems such as transforms, dots too short for Safari, geometry outside the 1px margin, or metadata that doesn't match icon.schema.json.
3. build — builds @jedd-icons/shared, generates the per-icon TS files, then builds @jedd-icons/core and @jedd-icons/react.