---
title: Icons
description: Built-in Lucide mask icons, Icon component, component icon props,
  and interactive icon gallery.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# Icons

> Built-in Lucide mask icons, Icon component, component icon props, and interactive icon gallery.

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:

```css title="src/index.css"
@import 'moraine/icon.css';
```

## The `<Icon>` Component

Render standalone icons using the `<Icon>` component:

```tsx
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:

```tsx
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:

- `icon-arrow-down`
- `icon-arrow-left`
- `icon-arrow-right`
- `icon-arrow-up`
- `icon-caution`
- `icon-check`
- `icon-chevron-double-left`
- `icon-chevron-double-right`
- `icon-chevron-down`
- `icon-chevron-left`
- `icon-chevron-right`
- `icon-chevron-up`
- `icon-close`
- `icon-copy`
- `icon-copy-check`
- `icon-dark`
- `icon-drag`
- `icon-ellipsis`
- `icon-error`
- `icon-external`
- `icon-eye`
- `icon-eye-off`
- `icon-file`
- `icon-folder`
- `icon-folder-open`
- `icon-hash`
- `icon-info`
- `icon-light`
- `icon-loading`
- `icon-menu`
- `icon-minus`
- `icon-panel-close`
- `icon-panel-open`
- `icon-plus`
- `icon-reload`
- `icon-search`
- `icon-stop`
- `icon-success`
- `icon-system`
- `icon-tip`
- `icon-upload`
- `icon-warning`