Icons

Components take icons by name: leadingIcon="plus" on a React Button, leading-icon="plus" on a Blade one. A name resolves through an icon registry that every stack shares, so the same name draws the same SVG in Livewire, React and Vue.

The default set

The registry ships with a subset of Lucide (ISC license): the icons the components draw themselves, plus common ones for your own use. Names are Lucide's, in kebab-case (chevron-down, circle-alert, log-out).

Every icon renders the same way:

• A 24×24 <svg> with stroke="currentColor" at stroke width 1.5, so it takes the text color around it.
• Sized by the component or part it sits in, from --apui-icon-size-sm (14px), -md (16px) and -lg (20px).
• aria-hidden="true", because an icon beside text is decorative. The Icon component's label makes a standalone icon role="img" with an accessible name.

Adding or replacing icons

Register more names, or replace one, in your stack's registry. In React and Vue:

import { registerIcons } from '@artisanpack-ui/behavior/icons';

registerIcons({
  'brand-logo': '<path d="M4 4h16v16H4z"/><circle cx="12" cy="12" r="4"/>',
});

Each value is the inside of a 24×24 <svg>. In Livewire, register them with the package's icon registry (see the Livewire UI Components docs).

Registered icons are trusted markup. Every stack injects them as HTML, so the registry only accepts plain shapes (path, circle, rect, line, polyline, polygon, ellipse and g) and rejects event handlers, href, style and script URLs. Never register icons from user or CMS input.

Any open-licensed icon set drawn on a 24px grid fits the system. A slot or a node you pass to a component's icon part always overrides the name.

Livewire: existing icon names

Livewire UI Components falls back to Blade Icons for names outside the registry, so 2.x icon names keep rendering. A name without a dot is a Heroicon (o-user and s-home render heroicon-o-user and heroicon-s-home). Other Blade Icons sets take the set's prefix and a dot: Font Awesome's solid user icon is fas.user. A dotless name such as fa-user is looked up as a Heroicon and won't render.

Right-to-left

Icons that point a direction flip under dir="rtl". The registry keeps the list of directional icons, arrow-left, arrow-right, chevron-left and chevron-right by default, and every component follows it. Add your own directional icons with registerDirectionalIcons() (IconRegistry::registerDirectional() in Livewire), or set mirror on a single Icon.

Non-directional icons, numbers, media controls and chart time axes never mirror.

The license

The Lucide license notice (ISC, plus MIT for the icons derived from Feather) ships with the icon set wherever it's copied.