General

Icon

Render any icon from the Iconify library. Supports 200,000+ icons across 150+ collections including Lucide, Material Design, Heroicons, and more.

Playground

Experiment with different props in real-time.

Icon

Size

Rotate

Basic Usage

Use the name prop with Iconify format: collection:icon-name.

<script lang="ts">
  import { Icon } from 'sv5ui';
</script>

<Icon name="lucide:home" />
<Icon name="lucide:settings" />
<Icon name="lucide:user" />

Icon Collections

Works with any Iconify icon set. Browse all at icon-sets.iconify.design.

Lucide

MDI

Heroicons

Phosphor

Tabler

<!-- Lucide -->
<Icon name="lucide:heart" />

<!-- Material Design Icons -->
<Icon name="mdi:account" />

<!-- Heroicons -->
<Icon name="heroicons:star" />

<!-- Phosphor -->
<Icon name="ph:globe-bold" />

<!-- Tabler -->
<Icon name="tabler:brand-github" />

Sizes

Control icon dimensions with the size prop.

<Icon name="lucide:star" size={16} />
<Icon name="lucide:star" size={24} />
<Icon name="lucide:star" size={32} />
<Icon name="lucide:star" size={40} />
<Icon name="lucide:star" size={48} />

Colors

Set color via the color prop or Tailwind text classes.

<Icon name="lucide:heart" color="red" />
<Icon name="lucide:heart" color="#3b82f6" />
<Icon name="lucide:heart" color="oklch(0.7 0.15 150)" />

<!-- Using Tailwind classes -->
<Icon name="lucide:heart" class="text-primary" />
<Icon name="lucide:heart" class="text-success" />
<Icon name="lucide:heart" class="text-error" />

Transforms

Flip and rotate icons without CSS.

Default

flipH

flipV

0°

90°

180°

270°

<!-- Flip -->
<Icon name="lucide:arrow-right" />
<Icon name="lucide:arrow-right" flipH />
<Icon name="lucide:arrow-right" flipV />

<!-- Rotate -->
<Icon name="lucide:arrow-up" />
<Icon name="lucide:arrow-up" rotate={90} />
<Icon name="lucide:arrow-up" rotate={180} />
<Icon name="lucide:arrow-up" rotate={270} />

With Components

Most sv5ui components accept icon names directly via props.

Note

Icons are loaded automatically via Iconify.

<!-- Inside Button -->
<Button leadingIcon="lucide:download" label="Download" />
<Button icon="lucide:plus" />

<!-- Inside Badge -->
<Badge icon="lucide:star" label="Featured" />

<!-- Inside Alert -->
<Alert icon="lucide:info" title="Note" description="Icons are loaded automatically via Iconify." />

Props

Prop	Type	Default
`name`	`string`	`-`
`size`	`number \| string`	`24`
`color`	`string`	`-`
`flipH`	`boolean`	`false`
`flipV`	`boolean`	`false`
`rotate`	`0 \| 90 \| 180 \| 270`	`0`
`class`	`string`	`-`

FieldGroup Link