@dendelion/icons

Hand-drawn line icons as React components, shared by @dendelion/func-ui, @dendelion/paper-ui and @dendelion/mojo-ui.

The package sits beside the UI libraries rather than inside one of them, so no library has to depend on another to get an icon. It has no runtime dependencies, ships no CSS, and carries no 'use client' directive — the icons are static SVG and render fine from React Server Components.

Install

pnpm add @dendelion/icons

Usage

import { SearchIcon, TrashIcon } from '@dendelion/icons';

<SearchIcon />
<SearchIcon size={16} />
<TrashIcon className="text-red-500" />

Icons inherit their colour from currentColor and their stroke geometry is drawn on a 24×24 grid, so they line up with text at any size.

Accessibility

Icons are aria-hidden by default, which is correct when they sit next to a visible label or inside an already-labelled control:

<button>
  <TrashIcon /> Delete
</button>

Pass title when the icon is the only content, and it will be exposed as an image with that accessible name:

<TrashIcon title="Delete item" />

Note that the UI libraries' own wrappers already handle labelling — IconButton in func-ui takes a required label prop — so inside those you want the default hidden icon, not a title.

With the UI libraries

Every library accepts an icon as a ReactNode, so these drop straight in:

import { IconButton } from '@dendelion/func-ui';
import { Icon } from '@dendelion/paper-ui';
import { TrashIcon, SearchIcon } from '@dendelion/icons';

<IconButton icon={<TrashIcon />} label="Delete" />
<Icon icon={<SearchIcon />} size="large" />

Icons

ArrowDown ArrowLeft ArrowRight ArrowUp Check CheckCircle Close CloseCircle Copy Download Filter Link Menu Search Share Trash Upload — each exported with an Icon suffix, e.g. ArrowDownIcon.

Adding icons

Drop a raw SVG into svg/ and run:

pnpm run generate

scripts/generate.mjs rewrites src/icons/ from whatever is in svg/, so the components are generated output and should not be hand-edited. The script re-centres each source SVG on a 24×24 grid, swaps hard-coded stroke colours for currentColor, and hoists shared stroke attributes onto the root element.

Source artwork provenance and licensing are tracked in NOTICE.md.