Icon

Renders Lucide icons as Ilha markup.

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.

import { ilha } from "ilha";
import { CircleCheck, Info, TriangleAlert } from "lucide";
import { Icon } from "areia";

export default ilha.render(() => (
  <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>
));

Import

import { Icon } from "areia";

You also need a Lucide icon node from lucide:

import { Info } from "lucide";

Usage

import { ilha } from "ilha";
import { Info } from "lucide";
import { Icon } from "areia";

export default ilha.render(() => <Icon icon={Info} />);

Examples

Sizes

Use class or className to change the rendered SVG size.

import { ilha } from "ilha";
import { Info } from "lucide";
import { Icon } from "areia";

export default ilha.render(() => (
  <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>
));

Color

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

import { ilha } from "ilha";
import {
  CircleCheck,
  Info,
  TriangleAlert,
  CircleX,
} from "lucide";
import { Icon } from "areia";

export default ilha.render(() => (
  <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>
));

Stroke Width

Use strokeWidth to adjust the SVG stroke width.

import { ilha } from "ilha";
import { Info } from "lucide";
import { Icon } from "areia";

export default ilha.render(() => (
  <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>
));

Accessible Icon

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

import { ilha } from "ilha";
import { CircleCheck } from "lucide";
import { Icon } from "areia";

export default ilha.render(() => (
  <Icon icon={CircleCheck} label="Success" />
));

In a Button

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

import { ilha } from "ilha";
import { Plus } from "lucide";
import { Button, Icon } from "areia";

export default ilha.render(() => (
  <Button variant="secondary" icon={<Icon icon={Plus} />}>
    Create item
  </Button>
));

Icon Only Button

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

import { ilha } from "ilha";
import { Plus } from "lucide";
import { Button, Icon } from "areia";

export default ilha.render(() => (
  <Button
    variant="secondary"
    shape="square"
    icon={<Icon icon={Plus} />}
    aria-label="Create item"
  />
));

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.