Icons

Moraine provides built-in CSS mask styles for Lucide icons. Mask icons render as pure CSS, inheriting text color and size automatically without runtime SVGs or flash-of-unstyled-content.

Zero-Config Setup#

To enable built-in icons, import Moraine’s icon stylesheet into your main application entry:

@import 'moraine/icon.css';

The <Icon> Component#

Render standalone icons using the <Icon> component:

import { Icon } from 'moraine'

export function SearchIndicator() {
  return <Icon name="icon-search" class="text-primary size-5" />
}

Component Icon Props#

Button and Badge accept leading and trailing icon props. Select-family controls use leadingIcon and trailingIcon; tabs use each item’s icon. Wrap a native-style Input in InputGroup to add an icon:

import { Button, Icon, Input, InputGroup } from 'moraine'

export function SearchBar() {
  return (
    <div class="flex items-center gap-2">
      <InputGroup>
        <InputGroup.Leading>
          <Icon name="icon-search" />
        </InputGroup.Leading>
        <Input aria-label="Search components" placeholder="Search components..." />
      </InputGroup>
      <Button leading="icon-plus" variant="default">
        New Item
      </Button>
    </div>
  )
}

The published stylesheet includes Moraine’s semantic aliases such as icon-search and icon-chevron-down. Other names such as i-lucide-search need their own CSS generator, for example UnoCSS’s presetIcons() with the Lucide collection. Passing an icon name does not load its CSS.

Icon Gallery#

Browse and search all built-in Lucide icons below. Click any icon to copy its name to your clipboard: