> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mantle.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Icons

> Lucide icon library

Over 1,400 icons from [Lucide](https://lucide.dev), integrated through `@ng-icons/lucide` for consistent, scalable
iconography.

## Installation

```bash theme={null}
pnpm add @ng-icons/core @ng-icons/lucide
```

## Usage

Import icons individually for optimal tree-shaking:

```typescript theme={null}
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideSettings, lucideUser, lucideHome } from '@ng-icons/lucide';

@Component({
  imports: [NgIcon],
  providers: [provideIcons({ lucideSettings, lucideUser, lucideHome })],
  template: `<ng-icon name="lucideSettings" size="sm" />`,
})
export class MyComponent {}
```

### With Spartan UI

Add the `hlm` directive for consistent styling:

```html theme={null}
<ng-icon hlm name="lucideSettings" size="sm" class="text-muted-foreground" />
```

## Sizes

| Size | Value | Usage                  |
| ---- | ----- | ---------------------- |
| `xs` | 12px  | Inline with small text |
| `sm` | 16px  | Buttons, form inputs   |
| `md` | 20px  | Default size           |
| `lg` | 24px  | Headers, navigation    |
| `xl` | 32px  | Hero sections          |

## Common Icons

<CardGroup cols={4}>
  <Card title="Navigation" icon="compass">
    `lucideHome`, `lucideMenu`, `lucideArrowLeft`, `lucideChevronDown`
  </Card>

  <Card title="Actions" icon="mouse-pointer-click">
    `lucidePlus`, `lucideTrash`, `lucideEdit`, `lucideDownload`
  </Card>

  <Card title="Status" icon="circle-check">
    `lucideCheck`, `lucideX`, `lucideAlertCircle`, `lucideInfo`
  </Card>

  <Card title="UI" icon="layout">
    `lucideSettings`, `lucideUser`, `lucideSearch`, `lucideBell`
  </Card>
</CardGroup>

## Resources

<CardGroup cols={2}>
  <Card title="Lucide Icons" icon="search" href="https://lucide.dev/icons">
    Browse the complete icon library with search and preview.
  </Card>

  <Card title="ng-icons Docs" icon="book" href="https://ng-icons.github.io/ng-icons">
    Full documentation for Angular integration.
  </Card>
</CardGroup>