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.
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. Accepts numbers (px) or CSS strings.
16px
24px
32px
40px
48px
<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} />
<!-- CSS string values -->
<Icon name="lucide:star" size="1.5rem" />
<Icon name="lucide:star" size="2em" />Colors
Set color via the color prop or Tailwind text classes. Defaults to currentColor.
<!-- CSS color values -->
<Icon name="lucide:heart" color="red" />
<Icon name="lucide:heart" color="#3b82f6" />
<Icon name="lucide:heart" color="oklch(0.7 0.15 150)" />
<!-- Tailwind classes (inherits text color) -->
<Icon name="lucide:heart" class="text-primary" />
<Icon name="lucide:heart" class="text-success" />
<Icon name="lucide:heart" class="text-error" />
<Icon name="lucide:heart" class="text-warning" />
<Icon name="lucide:heart" class="text-info" />Flip
Mirror icons horizontally or vertically with flipH and flipV.
Default
flipH
flipV
Both
<Icon name="lucide:arrow-right" />
<Icon name="lucide:arrow-right" flipH />
<Icon name="lucide:arrow-right" flipV />
<!-- Both flip -->
<Icon name="lucide:arrow-right" flipH flipV />Rotate
Rotate icons by quarter turns with the rotate prop.
0°
90°
180°
270°
<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 | currentColor |
flipH | boolean | false |
flipV | boolean | false |
rotate | 0 | 90 | 180 | 270 | 0 |
class | string | - |