icon component

Drop-in semantic component. See examples, sizes, variants, and source.

Icons render from the Lucide set with automatic SVG injection. Write <i class="icon [name]"> and the SVG is fetched from /webroot/assets/css/lucide-icons/[name].svg at runtime. Layer adjectives for size (xs sm md xl lg), semantic color (primary positive negative warning info neutral), opacity (muted faded), or transforms (rotate-90 flip-horizontal). Behaviour is wired by icon.js.

Icon System

Basic Icons

<div class="row wrap">
  <i class="icon house"></i>
  <i class="icon user"></i>
  <i class="icon settings"></i>
  <i class="icon heart"></i>
  <i class="icon star"></i>
  <i class="icon search"></i>
  <i class="icon menu"></i>
  <i class="icon x"></i>
</div>

Icon Sizes

<div class="row wrap">
  <i class="icon settings xs"></i>
  <i class="icon settings sm"></i>
  <i class="icon settings md"></i>
  <i class="icon settings xl"></i>
  <i class="icon settings lg"></i>
</div>

Icon Colors

<div class="row wrap">
  <i class="icon heart negative"></i>
  <i class="icon circle-check positive"></i>
  <i class="icon triangle-alert warning"></i>
  <i class="icon info info"></i>
  <i class="icon star primary"></i>
  <i class="icon zap warning"></i>
</div>

Icon Buttons

Icon-Only Buttons

<div class="row wrap">
  <button class="button icon xs" aria-label="Add (extra-small)">
    <i class="icon plus"></i>
  </button>
  <button class="button icon sm" aria-label="Add (small)">
    <i class="icon plus"></i>
  </button>
  <button class="button icon" aria-label="Add">
    <i class="icon plus"></i>
  </button>
  <button class="button icon xl" aria-label="Add (large)">
    <i class="icon plus"></i>
  </button>
  <button class="button icon lg" aria-label="Add (extra-large)">
    <i class="icon plus"></i>
  </button>
</div>

Colored Icon Buttons

<div class="row wrap">
  <button class="button icon primary" aria-label="Save">
    <i class="icon save"></i>
  </button>
  <button class="button icon positive" aria-label="Confirm">
    <i class="icon check"></i>
  </button>
  <button class="button icon negative" aria-label="Delete">
    <i class="icon trash-2"></i>
  </button>
  <button class="button icon warning" aria-label="Warning">
    <i class="icon circle-alert"></i>
  </button>
</div>

Round Icon Buttons

<div class="row wrap">
  <button class="button icon round" aria-label="Add">
    <i class="icon plus"></i>
  </button>
  <button class="button icon round primary" aria-label="Account">
    <i class="icon user"></i>
  </button>
  <button class="button icon round positive" aria-label="Confirm">
    <i class="icon check"></i>
  </button>
  <button class="button icon round negative" aria-label="Close">
    <i class="icon x"></i>
  </button>
</div>

Ghost Icon Buttons

<div class="row wrap">
  <button class="button icon ghost primary" aria-label="Save">
    <i class="icon save"></i>
  </button>
  <button class="button icon ghost positive" aria-label="Confirm">
    <i class="icon check"></i>
  </button>
  <button class="button icon ghost negative" aria-label="Delete">
    <i class="icon trash-2"></i>
  </button>
  <button class="button icon ghost warning" aria-label="Warning">
    <i class="icon circle-alert"></i>
  </button>
</div>

Outline Icon Buttons

<div class="row wrap">
  <button class="button icon outline primary" aria-label="Save">
    <i class="icon save"></i>
  </button>
  <button class="button icon outline positive" aria-label="Confirm">
    <i class="icon check"></i>
  </button>
  <button class="button icon outline negative" aria-label="Delete">
    <i class="icon trash-2"></i>
  </button>
  <button class="button icon outline warning" aria-label="Warning">
    <i class="icon circle-alert"></i>
  </button>
</div>

Labeled Icon Buttons

<div class="row wrap">
  <button class="button icon labeled primary">
    <span>Save</span>
    <span class="icon-section"><i class="icon save"></i></span>
  </button>
  <button class="button icon labeled positive">
    <span>Confirm</span>
    <span class="icon-section"><i class="icon check"></i></span>
  </button>
  <button class="button icon labeled negative">
    <span>Delete</span>
    <span class="icon-section"><i class="icon trash-2"></i></span>
  </button>
  <button class="button icon labeled warning">
    <span>Alert</span>
    <span class="icon-section"><i class="icon circle-alert"></i></span>
  </button>
</div>

Labeled Icon Buttons (Icon on Left)

<div class="row wrap">
  <button class="button icon labeled left primary">
    <span>Download</span>
    <span class="icon-section"><i class="icon download"></i></span>
  </button>
  <button class="button icon labeled left positive">
    <span>Upload</span>
    <span class="icon-section"><i class="icon upload"></i></span>
  </button>
  <button class="button icon labeled left negative">
    <span>Remove</span>
    <span class="icon-section"><i class="icon trash-2"></i></span>
  </button>
  <button class="button icon labeled left warning">
    <span>Notify</span>
    <span class="icon-section"><i class="icon bell"></i></span>
  </button>
</div>

Icons with Text

Buttons with Icons

<div class="row wrap">
  <button class="button">
    <i class="icon download"></i>
    Download
  </button>
  <button class="button primary">
    <i class="icon save"></i>
    Save Changes
  </button>
  <button class="button positive">
    Continue
    <i class="icon arrow-right"></i>
  </button>
  <button class="button negative">
    <i class="icon trash-2"></i>
    Delete
  </button>
</div>

Links with Icons

External Link Download File Learn More

<div class="row wrap">
  <a href="#" class="link">
    <i class="icon external-link sm"></i>
    External Link
  </a>
  <a href="#" class="link">
    <i class="icon download sm"></i>
    Download File
  </a>
  <a href="#" class="link">
    Learn More
    <i class="icon arrow-right sm"></i>
  </a>
</div>

Icon Animations

Animated Icons

<div class="row wrap">
  <i class="icon loader animate-spin xl"></i>
  <i class="icon heart animate-pulse xl negative"></i>
  <button class="button icon" aria-label="Refresh">
    <i class="icon refresh-cw"></i>
  </button>
  <button class="button primary">
    <i class="icon loader animate-spin"></i>
    Loading...
  </button>
</div>

Icon States

<div class="row wrap">
  <i class="icon star xl"></i>
  <i class="icon star xl muted"></i>
  <i class="icon star xl faded"></i>
  <button class="button icon" disabled aria-label="Save">
    <i class="icon save"></i>
  </button>
</div>

Icon Utilities

Rotation & Flipping

<div class="row wrap">
  <i class="icon arrow-right xl"></i>
  <i class="icon arrow-right xl rotate-45"></i>
  <i class="icon arrow-right xl rotate-90"></i>
  <i class="icon arrow-right xl rotate-180"></i>
  <i class="icon arrow-right xl rotate-270"></i>
  <i class="icon arrow-right xl flip-horizontal"></i>
  <i class="icon arrow-right xl flip-vertical"></i>
</div>

Common Patterns

Left Icon

<div class="stack">
                <div class="input-wrapper has-left-icon">
                    <i class="icon search left"></i>
                    <input type="text" class="input" placeholder="Search...">
                </div>
                <div class="input-wrapper has-left-icon">
                    <i class="icon mail left"></i>
                    <input type="email" class="input" placeholder="Email address">
                </div>
            </div>

Right Icon

<div class="input-wrapper has-right-icon">
  <input type="email" class="input" value="user@example.com" />
  <i class="icon check right positive"></i>
</div>

Both Icons (Clearable)

<div class="input-wrapper has-both-icons">
  <i class="icon search left"></i>
  <input type="text" class="input" value="lorem ipsum" />
  <i class="icon x right clickable" aria-label="Clear"></i>
</div>

Icons with Badges

<div class="row wrap">
  <div class="relative">
    <i class="icon bell xl"></i>
    <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
  </div>
  <div class="relative">
    <i class="icon message-square xl"></i>
    <span
      class="absolute -top-2 -right-2 px-1.5 min-w-[20px] h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center"
      >3</span
    >
  </div>
  <button class="button icon notification" data-count="5" aria-label="Inbox, 5 unread">
    <i class="icon inbox"></i>
  </button>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`icon`	Required base class on an `<i>`	Pair with the icon name (e.g. `icon star`)
Sizes	`xs`	12px (w-3 h-3)	Standalone modifier
	`sm`	16px (w-4 h-4)	Standalone modifier
	`md` / (default)	20px (w-5 h-5)	Default size; class is optional
	`xl`	24px (w-6 h-6)	Standalone modifier
	`lg`	32px (w-8 h-8)	Standalone modifier
Color	`primary`	blue-600	Standalone modifier
	`positive`	green-600	Standalone modifier
	`negative`	red-600	Standalone modifier
	`warning`	orange-500	Standalone modifier
	`info`	blue-600	Alias of `primary`
	`neutral`	gray-500	Standalone modifier
State	`muted`	60% opacity	Standalone modifier
State	`faded`	40% opacity	Standalone modifier
Animation	`animate-spin`	Continuous rotation	Loaders / spinners
Animation	`animate-pulse`	Opacity pulse	Status indicators
Transform	`rotate-45`	Rotate 45°	Standalone modifier
	`rotate-90`	Rotate 90°	Standalone modifier
	`rotate-180`	Rotate 180°	Standalone modifier
	`rotate-270`	Rotate 270°	Standalone modifier
	`flip-horizontal`	Mirror on X-axis	Standalone modifier
	`flip-vertical`	Mirror on Y-axis	Standalone modifier
Position	`left`	Position icon at the left of an `input-wrapper`	Pair wrapper with `has-left-icon`
	`right`	Position icon at the right of an `input-wrapper`	Pair wrapper with `has-right-icon`
	`clickable`	Cursor + hover scale on a non-button icon	Standalone modifier