Icon

Thin wrapper over a curated subset of Lucide icons. Enforces Chonky's stroke width (1.5), size tokens, and currentColor inheritance so icons feel consistent across the library. Consumers use <Icon name="clock" /> for allowlisted icons or pass an arbitrary Lucide component via icon={...} for one-offs.

Sizes

Size tokens: xs (12px), sm (14px, default), md (16px), lg (20px), xl (24px). Accepts a raw number too.

xs (12px)

sm (14px)

md (16px)

lg (20px)

xl (24px)

size=40

Allowlist

Every icon currently on the allowlist, rendered at each size token. Import as <Icon name="clock" /> or the direct component import { ClockIcon } from '@chrissnell/chonky-ui/icons'.

name	xs	sm	md	lg	xl
`clock`
`check`
`check-check`
`alert-circle`
`refresh-cw`
`radio`
`radio-tower`
`wifi`
`wifi-off`
`send`
`reply`
`message-square`
`bot`
`user`
`users`
`user-x`
`chevron-left`
`chevron-right`
`chevron-down`
`arrow-up`
`arrow-down`
`plus`
`x`
`copy`
`pencil`
`trash-2`
`search`
`filter`
`download`
`upload`
`settings`
`more-vertical`
`more-horizontal`
`eye`
`eye-off`
`volume-2`
`volume-x`
`map-pin`

Stroke width override

Chonky default is 1.5. Override via strokeWidth only when needed.

1.0 (thin)

1.5 (default)

2.0 (lucide default)

2.5 (bold)

Color inheritance

Icons use currentColor; to tint one, set color on the parent. There is no color prop on <Icon />.

default danger warning info accent

Accessibility

Icons are decorative by default (aria-hidden="true"). Pass a label to announce the icon as an image to assistive tech (role="img" + aria-label).

decorative — accompanied by visible "delete" text

labeled — icon-only button would use this form

Ad-hoc Lucide passthrough

For icons not on the allowlist, pass any lucide-svelte component directly via icon. Same stroke/color/size behavior applies.

<script>
  import { Icon } from '@chrissnell/chonky-ui';
  import Sparkles from 'lucide-svelte/icons/sparkles';
</script>

<Icon icon={Sparkles} size="md" />

Direct import (tree-shake-friendly)

For callers who want the raw component without going through <Icon />, the allowlist is re-exported under /icons with PascalCase + Icon suffix. These ship the Lucide defaults (stroke 2, variable color) — no Chonky wrapping.

import { ClockIcon, RadioTowerIcon } from '@chrissnell/chonky-ui/icons';

<ClockIcon size={14} strokeWidth={1.5} color="currentColor" />

Props

Prop	Type	Default	Description
`name`	`IconName`	—	Allowlisted icon name (kebab-case)
`icon`	`LucideIconComponent`	—	Ad-hoc Lucide component; wins over `name`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	`'sm'` (14px)	Size token or raw px
`strokeWidth`	`number`	`1.5`	SVG stroke width
`label`	`string`	—	Announced label; omit for decorative icons
`class`	`string`	—	Additional CSS classes (merged with `chonky-icon`)

Usage

<script>
  import { Icon } from '@chrissnell/chonky-ui';
</script>

<!-- decorative -->
<Icon name="clock" size="sm" />

<!-- button with labeled icon -->
<button aria-label="Delete">
  <Icon name="trash-2" size="md" label="Delete" />
</button>

<!-- tinted via parent color -->
<span style="color: var(--color-danger);">
  <Icon name="alert-circle" /> Error
</span>