iconify-static Demo
Icons are loaded from static files, with no external CDN dependency at runtime.
Svelte Component vs Web Component
Both render identically from the same static icon files:
Svelte <Icon> | Web Component <iconify-icon> | Feature |
|---|---|---|
| Basic | ||
| Color | ||
| Flip | ||
| Rotate | ||
| Click here | Click | Inline |
Basic Icons
<Icon icon="mdi:home" />
Display Sizes (width/height props)
<Icon icon="mdi:bell" width="32" />
Same icon rendered at different display sizes using the width prop:
16 24 32 48 64 2em
Supports numbers (width="32") and CSS units (width="2em").
Icon Size Variants (different icons)
<Icon icon="fluent:home-24-regular" width="32" />
Some icon sets have different icon designs for different sizes. Fluent icons are available in sizes: 10, 12, 16, 20, 24, 28, 32, 48.
| 12px | 16px | 20px | 24px | 28px | 32px | 48px | Icon |
|---|---|---|---|---|---|---|---|
home-*-regular | |||||||
home-*-filled | |||||||
star-*-regular |
Note: The size in the icon name affects the icon design (stroke weight, detail). The width prop controls display size. All icons above display at 32px.
Colors
<Icon icon="mdi:palette" color="red" />
Transformations
<Icon icon="mdi:arrow-right" hFlip />
<Icon icon="mdi:arrow-right" rotate={2} /> | Icon | Description |
|---|---|
| Normal | |
| hFlip | |
| vFlip | |
flip="horizontal" | |
flip="vertical" | |
flip="horizontal,vertical" | |
rotate=1 (90deg) | |
rotate=2 (180deg) | |
rotate=3 (270deg) | |
rotate="45deg" |
Inline Text
<p>Click the <Icon icon="mdi:menu" inline /> menu icon...</p>
Click the menu icon or the search icon to get started.
Multiple Icon Sets
<Icon icon="ph:house" /> <Icon icon="carbon:home" />
| Icon | Set |
|---|---|
| Phosphor | |
| Carbon | |
| Tabler | |
| Lucide |
Dynamic Icons (via scanPrefixes)
const ICONS = { email: 'mdi:email' };
<Icon icon={ICONS.email} /> Icons used via constants are auto-detected when scanPrefixes is configured.
Example: scanPrefixes: ['mdi'] detects any "mdi:*" string in code.
| Icon | Constant |
|---|---|
CONTACT_ICONS.email | |
CONTACT_ICONS.phone | |
CONTACT_ICONS.location |