---
title: Icon
description: Renders Lucide icons as Ilha markup.
order: 16
tags: [components]
---

import { Preview } from "$lib/components/preview";
import { Button, Icon } from "areia";
import {
  CircleCheck,
  CircleX,
  Info,
  Plus,
  TriangleAlert,
} from "lucide";

# Icon

Renders Lucide icons as Ilha markup.

[Source Code](https://github.com/ilhajs/areia/blob/main/packages/areia/src/components/icon/index.ts)

`Icon` accepts a Lucide `IconNode` and converts it into raw SVG markup that can be passed into other Areia components, such as `Button` and `Banner`.

<Preview
  code={
    'import ilha from "ilha";\nimport { CircleCheck, Info, TriangleAlert } from "lucide";\nimport { Icon } from "areia";\n\nexport default ilha.render(() => (\n  <div class="flex flex-wrap items-center gap-3 text-areia-default">\n    <Icon icon={Info} />\n    <Icon icon={CircleCheck} class="text-areia-success" />\n    <Icon\n      icon={TriangleAlert}\n      class="text-areia-warning-soft-foreground"\n    />\n  </div>\n));'
  }
  lang="tsx"
>
  <div class="flex flex-wrap items-center gap-3 text-areia-default">
    <Icon icon={Info} />
    <Icon icon={CircleCheck} class="text-areia-success" />
    <Icon
      icon={TriangleAlert}
      class="text-areia-warning-soft-foreground"
    />
  </div>
</Preview>

## Import

```ts
import { Icon } from "areia";
```

You also need a Lucide icon node from `lucide`:

```ts
import { Info } from "lucide";
```

## Usage

<Preview
  code={
    'import ilha from "ilha";\nimport { Info } from "lucide";\nimport { Icon } from "areia";\n\nexport default ilha.render(() => <Icon icon={Info} />);'
  }
  lang="tsx"
>
  <Icon icon={Info} />
</Preview>

## Examples

### Sizes

Use `class` or `className` to change the rendered SVG size.

<Preview
  code={
    'import ilha from "ilha";\nimport { Info } from "lucide";\nimport { Icon } from "areia";\n\nexport default ilha.render(() => (\n  <div class="flex items-center gap-3 text-areia-default">\n    <Icon icon={Info} class="size-3" />\n    <Icon icon={Info} />\n    <Icon icon={Info} class="size-5" />\n    <Icon icon={Info} class="size-6" />\n  </div>\n));'
  }
  lang="tsx"
>
  <div class="flex items-center gap-3 text-areia-default">
    <Icon icon={Info} class="size-3" />
    <Icon icon={Info} />
    <Icon icon={Info} class="size-5" />
    <Icon icon={Info} class="size-6" />
  </div>
</Preview>

### Color

Icons use `currentColor`, so text color utilities can be used to control their color.

<Preview
  code={
    'import ilha from "ilha";\nimport {\n  CircleCheck,\n  Info,\n  TriangleAlert,\n  CircleX,\n} from "lucide";\nimport { Icon } from "areia";\n\nexport default ilha.render(() => (\n  <div class="flex items-center gap-3">\n    <Icon icon={Info} class="text-areia-info-soft-foreground" />\n    <Icon\n      icon={CircleCheck}\n      class="text-areia-success-soft-foreground"\n    />\n    <Icon\n      icon={TriangleAlert}\n      class="text-areia-warning-soft-foreground"\n    />\n    <Icon\n      icon={CircleX}\n      class="text-areia-destructive-soft-foreground"\n    />\n  </div>\n));'
  }
  lang="tsx"
>
  <div class="flex items-center gap-3">
    <Icon icon={Info} class="text-areia-info-soft-foreground" />
    <Icon
      icon={CircleCheck}
      class="text-areia-success-soft-foreground"
    />
    <Icon
      icon={TriangleAlert}
      class="text-areia-warning-soft-foreground"
    />
    <Icon
      icon={CircleX}
      class="text-areia-destructive-soft-foreground"
    />
  </div>
</Preview>

### Stroke Width

Use `strokeWidth` to adjust the SVG stroke width.

<Preview
  code={
    'import ilha from "ilha";\nimport { Info } from "lucide";\nimport { Icon } from "areia";\n\nexport default ilha.render(() => (\n  <div class="flex items-center gap-3 text-areia-default">\n    <Icon icon={Info} strokeWidth={1} />\n    <Icon icon={Info} strokeWidth={1.75} />\n    <Icon icon={Info} strokeWidth={2.5} />\n  </div>\n));'
  }
  lang="tsx"
>
  <div class="flex items-center gap-3 text-areia-default">
    <Icon icon={Info} strokeWidth={1} />
    <Icon icon={Info} strokeWidth={1.75} />
    <Icon icon={Info} strokeWidth={2.5} />
  </div>
</Preview>

### Accessible Icon

By default, icons are decorative and rendered with `aria-hidden="true"`. Provide `label` when the icon itself communicates meaning without nearby text.

<Preview
  code={
    'import ilha from "ilha";\nimport { CircleCheck } from "lucide";\nimport { Icon } from "areia";\n\nexport default ilha.render(() => (\n  <Icon icon={CircleCheck} label="Success" />\n));'
  }
  lang="tsx"
>
  <Icon icon={CircleCheck} label="Success" />
</Preview>

### In a Button

Use `Icon` to provide Lucide icons to components that accept an `icon` slot.

<Preview
  code={
    'import ilha from "ilha";\nimport { Plus } from "lucide";\nimport { Button, Icon } from "areia";\n\nexport default ilha.render(() => (\n  <Button variant="secondary" icon={<Icon icon={Plus} />}>\n    Create item\n  </Button>\n));'
  }
  lang="tsx"
>
  <Button variant="secondary" icon={<Icon icon={Plus} />}>
    Create item
  </Button>
</Preview>

### Icon Only Button

When an icon is used without visible text, provide an accessible label on the button.

<Preview
  code={
    'import ilha from "ilha";\nimport { Plus } from "lucide";\nimport { Button, Icon } from "areia";\n\nexport default ilha.render(() => (\n  <Button\n    variant="secondary"\n    shape="square"\n    icon={<Icon icon={Plus} />}\n    aria-label="Create item"\n  />\n));'
  }
  lang="tsx"
>
  <Button
    variant="secondary"
    shape="square"
    icon={<Icon icon={Plus} />}
    aria-label="Create item"
  />
</Preview>

## API Reference

| Prop          | Type               | Default | Description                                                                   |
| ------------- | ------------------ | ------- | ----------------------------------------------------------------------------- |
| `icon`        | `IconNode`         | -       | Lucide icon node to render.                                                   |
| `class`       | `string`           | -       | Additional CSS classes applied to the root SVG.                               |
| `className`   | `string`           | -       | Alias for `class`.                                                            |
| `label`       | `string`           | -       | Accessible label. When omitted, the icon is hidden from assistive technology. |
| `strokeWidth` | `string \| number` | `1.75`  | SVG stroke width.                                                             |