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 -->
<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" />Bundled Icons
The icons the library uses for its own chrome ship inside it and are registered with Iconify at module load. They render during server-side rendering and are present in the first paint, so they no longer pop in after hydration or shift the layout around them, and they keep working offline. The whole set costs about 1.2KB gzipped.
Every other Iconify name still resolves through the API on the client, exactly as before. Nothing changes in how you use the component: these 24 Lucide icons are simply already there when the page arrives.
<!-- The icons the library itself uses are bundled and registered
with Iconify at module load, so they render during SSR and
appear in the very first paint. No API call, no pop-in, no
layout shift, and they still work offline. Cost: ~1.2KB gzip. -->
<Button label="Save" loading /> <!-- lucide:loader-circle -->
<Select {items} /> <!-- lucide:chevron-down -->
<Sidebar {items} /> <!-- lucide:panel-left -->
<ColorPicker bind:value={color} /> <!-- lucide:pipette -->
<!-- Any other Iconify name still resolves through the API on the
client, exactly as before. -->
<Icon name="mdi:account" />
<Icon name="heroicons:star" />Sizes
Control icon dimensions with the size prop. Accepts numbers (px) or CSS strings.
<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.
<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.
<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.
<!-- 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." />Accessibility & Attributes
Give meaningful icons a role and accessible name, make them interactive with tabindex and event handlers, or attach data-* hooks.
<!-- Meaningful icon: give it a role and an accessible name -->
<Icon name="lucide:circle-check" role="img" aria-label="Completed" color="#16a34a" />
<!-- Interactive icon: make it focusable and handle events -->
<Icon
name="lucide:bell"
role="button"
tabindex={0}
aria-label="Notifications"
onclick={() => alert('Notifications')}
class="cursor-pointer"
/>
<!-- Test / data hooks -->
<Icon name="lucide:star" data-testid="favorite-icon" />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 | - |