Actions

Icon.

One visual rhythm, across the Lucide icon collection.

LIVE PREVIEWTry it. It works.

Named Lucide imports, with consistent sizing and stroke. Icon-only actions keep their own accessible label.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/icon.json

Registry setup · Open the playground

Usage

import { Camera } from "lucide-react";
import { Icon, IconButton, Button } from "@bld8/ui";

<Icon icon={Camera} size={18} strokeWidth={1.75} />
<IconButton icon={Camera} label="Open camera" />
<Button leadingIcon={Camera}>Add a photo</Button>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Pass a named Lucide component to icon. Defaults: size 18, strokeWidth 1.75 and currentColor. Icons are decorative unless label or aria-label is supplied. Existing name aliases and the dotted BLD8 arrow remain supported. Give icon-only buttons a label. Named imports keep unused icon components out of application bundles.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.