@cerevialabs/icons

React icon components with a string-keyed Icon resolver, a typed name list for pickers, and a registry map for advanced use.

Install

npm install @cerevialabs/icons

Peer dependency: React 18+.

Usage

import { Icon, iconNames, type IconName } from "@cerevialabs/icons";

<Icon name="arrow-up-compact" strokeWidth={1.5} />
<Icon name="camera-filled" />
<Icon name="gear" ref={svgRef} />

For icon pickers and other UIs that only need the name list (and want a minimal bundle), import from the subpath instead of the main entry:

import { iconNames, type IconName } from "@cerevialabs/icons/icon-names";

• name — must be a known id; TypeScript autocomplete via IconName.
• strokeWidth (and other SVG props) — forwarded to the root <svg>; stroke icons inherit width from the root so overrides work.
• Unknown name at runtime — Icon returns null (no fallback in v1).

Use iconNames (sorted, deterministic) as the source of truth for icon pickers and virtualized grids; virtualization lives in your app (e.g. @tanstack/react-virtual), not in this package.

Build (maintainers)

npm install
npm run build

• npm run dev — Vite dev server for the local gallery (src/main.tsx, index.html).
• build:icons — regenerates src/components/*.tsx, icons-map.ts, and icon-names.ts from src/svg/*.svg.
• tsup — emits dist/ (ESM + CJS, declarations, minified, no source maps).
• npm test — Vitest (registry + Icon behavior).

Bundle shape

• @cerevialabs/icons — one bundle that initializes every icon when the module loads. Importing only iconNames from this entry still pulls in the full icon set (same file). Per-icon tree-shaking is not supported in v1.
• @cerevialabs/icons/icon-names — tiny entry (~1 KB) that exports only iconNames and IconName. Use this in picker/search UIs that must not ship all SVG components.