@primitiv-ui/icons

Fill-based SVG icon library for the Primitiv ecosystem. Icons inherit currentColor, scale via a size prop, and accept all native SVG attributes. Zero styles, zero runtime overhead, full tree-shaking.

Usage

Within the Primitiv workspace, import directly — no build step required:

import { Check } from "@primitiv-ui/icons";

// Default size (24px)
<Check />

// Custom pixel size
<Check size={16} />

// Rem-based size
<Check size="1rem" />

// Tailwind color via currentColor inheritance
<Check className="text-green-500" />

// Accessible (not decorative)
<Check aria-label="Confirmed" />

Props

All icons share the same props via IconProps:

| Prop | Type | Default | Description | |---|---|---|---| | size | number \| string | 24 | Sets both width and height. Accepts pixel numbers (16) or CSS strings ("1rem"). | | className | string | — | Applied to the <svg> element. Use Tailwind's text-* utilities to set currentColor. | | aria-label | string | — | Makes the icon accessible to screen readers. When absent the icon is aria-hidden="true" (decorative). | | fill | string | "currentColor" | Override the fill colour directly. | | ref | Ref<SVGSVGElement> | — | Forwarded to the underlying <svg> element. |

All other SVG element attributes are accepted and forwarded.

Icons

| Icon | Import | |---|---| | ArrowLeft | import { ArrowLeft } from "@primitiv-ui/icons" | | ArrowRight | import { ArrowRight } from "@primitiv-ui/icons" | | Bell | import { Bell } from "@primitiv-ui/icons" | | Calendar | import { Calendar } from "@primitiv-ui/icons" | | Check | import { Check } from "@primitiv-ui/icons" | | ChevronDown | import { ChevronDown } from "@primitiv-ui/icons" | | ChevronLeft | import { ChevronLeft } from "@primitiv-ui/icons" | | ChevronRight | import { ChevronRight } from "@primitiv-ui/icons" | | ChevronUp | import { ChevronUp } from "@primitiv-ui/icons" | | Close | import { Close } from "@primitiv-ui/icons" | | Copy | import { Copy } from "@primitiv-ui/icons" | | Delete | import { Delete } from "@primitiv-ui/icons" | | Download | import { Download } from "@primitiv-ui/icons" | | Edit | import { Edit } from "@primitiv-ui/icons" | | Error | import { Error } from "@primitiv-ui/icons" | | ExternalLink | import { ExternalLink } from "@primitiv-ui/icons" | | Eye | import { Eye } from "@primitiv-ui/icons" | | EyeOff | import { EyeOff } from "@primitiv-ui/icons" | | File | import { File } from "@primitiv-ui/icons" | | Filter | import { Filter } from "@primitiv-ui/icons" | | Folder | import { Folder } from "@primitiv-ui/icons" | | Grid | import { Grid } from "@primitiv-ui/icons" | | Home | import { Home } from "@primitiv-ui/icons" | | Image | import { Image } from "@primitiv-ui/icons" | | Info | import { Info } from "@primitiv-ui/icons" | | Link | import { Link } from "@primitiv-ui/icons" | | List | import { List } from "@primitiv-ui/icons" | | Mail | import { Mail } from "@primitiv-ui/icons" | | Menu | import { Menu } from "@primitiv-ui/icons" | | Minus | import { Minus } from "@primitiv-ui/icons" | | Moon | import { Moon } from "@primitiv-ui/icons" | | Plus | import { Plus } from "@primitiv-ui/icons" | | Search | import { Search } from "@primitiv-ui/icons" | | Settings | import { Settings } from "@primitiv-ui/icons" | | Share | import { Share } from "@primitiv-ui/icons" | | Sort | import { Sort } from "@primitiv-ui/icons" | | Success | import { Success } from "@primitiv-ui/icons" | | Sun | import { Sun } from "@primitiv-ui/icons" | | Upload | import { Upload } from "@primitiv-ui/icons" | | User | import { User } from "@primitiv-ui/icons" | | Warning | import { Warning } from "@primitiv-ui/icons" |

Adding icons from Figma

1. Export the icon at 24 × 24 px (the md canonical size) as an SVG from Figma.

2. Drop the .svg file into icons/svg/, using kebab-case for the filename (e.g. arrow-right.svg).

3. Run the generator:

   pnpm generate

4. Review the generated component in src/icons/. The generator optimises paths via SVGO and converts hyphenated SVG attribute names to JSX camelCase. Hand-edit the output if needed — the generated files are committed source, not disposable artifacts.

5. Add a row to the Icons table in this README.

6. Write a smoke test in src/icons/<Name>.test.tsx (see Check.test.tsx as a template).

The five design sizes (xs=16, sm=20, md=24, lg=32, xl=48) are all driven by the size prop at runtime — only the md SVG needs to be exported from Figma.

Architecture

icons/svg/*.svg          ← source files from Figma (committed)
    ↓  pnpm generate
src/icons/*.tsx          ← generated components (committed, reviewable)
src/IconBase.tsx         ← shared SVG wrapper (sets viewBox, fill, aria-hidden)
src/types.ts             ← IconProps interface
src/index.ts             ← re-exports everything

IconBase is exported for advanced use cases (e.g. building custom icon wrappers) but is not needed for normal icon consumption.

Testing

# Run all icon tests once
npx vitest run

# Watch mode
npx vitest

# With coverage
npx vitest run --coverage