Foundations

Icons

257 icons drawn from Lucide (ISC), rendered with <Icon name="…" />. The 80 portable names work in every KrackedUI system.

Portable names

These names are part of the KrackedUI contract: code that uses them works with any system.

All icons

Usage

Use it to:

  • reinforce a label in buttons, menus and navigation
  • show a status next to text

Don’t use it to:

  • replace text for uncommon actions
  • draw illustrations (icons are 24×24 strokes)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

Decorative and labelled

Without label an icon is hidden from assistive tech; with it, it is an image with that name.

API Reference

Icon

An inline <svg> (stroke = currentColor); supports all SVG props.

PropTypeDefault
name
IconName
size
number
20
label
string

Accessibility

  • Icons are decorative by default. Give label only when the icon means something on its own (a status icon without text).
  • Icon-only controls get their name from the control (IconButton label), not the icon.
  • Icons inherit the text color; meaningful icons need 3:1 contrast against the background.
© 2026 Motion. Internal documentation.