HugeiconsIcon Wrapper
The @hugeicons/svelte package provides a HugeiconsIcon component that can render any icon from our libraries.
Think of it as a smart wrapper: you pass it an icon object via the icon prop, and it handles sizing, color, stroke width, and even switching between two icons for different states.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | IconSvgObject | Required | The main icon component imported from an icon package |
| altIcon | IconSvgObject | - | Alternative icon component for states, interactions, or animations |
| showAlt | boolean | false | When true, displays the altIcon instead of the main icon |
| size | number | 24 | Icon size in pixels |
| color | string | currentColor | Icon color (CSS color value) |
| strokeWidth | number | 1.5 | Width of the icon strokes (works with stroke-style icons) |
| absoluteStrokeWidth | boolean | false | When true, keeps the visual stroke width fixed as size changes |
| class | string | - | Additional CSS classes |
| className | string | - | Deprecated alias for class, kept for backward compatibility |
State-based icons with altIcon and showAlt
Use altIcon and showAlt to swap between two icons based on component state:
<script>
import { HugeiconsIcon } from '@hugeicons/svelte'
import { SunIcon, Moon02Icon } from '@hugeicons/core-free-icons'
let isDark = false
</script>
<button on:click={() => (isDark = !isDark)}>
<HugeiconsIcon
icon={SunIcon}
altIcon={Moon02Icon}
showAlt={isDark}
/>
</button>Styling icons
You can style icons in a few ways:
size: controls the rendered icon size in pixels.color: accepts any valid CSS color (e.g.#111827,rgb(0,0,0),currentColor).strokeWidth: adjusts the thickness of stroke-based icons.absoluteStrokeWidth: keeps that thickness fixed as the icon scales.class: attach utility classes from Tailwind, CSS Modules, etc.
<script>
import { HugeiconsIcon } from '@hugeicons/svelte'
import { Notification03Icon } from '@hugeicons/core-free-icons'
</script>
<HugeiconsIcon
icon={Notification03Icon}
size={32}
color="#6366f1"
strokeWidth={1.75}
class="inline-block align-middle"
/>When using currentColor, the icon inherits the text color from its parent, which works well inside buttons, links, and headings.
absoluteStrokeWidth changes how strokeWidth scales. By default the stroke grows with size, so a 48px icon has a stroke twice as thick as a 24px one. With absoluteStrokeWidth the stroke stays at the width you pass no matter the size, which keeps a set of differently sized icons visually consistent. It only takes effect when strokeWidth is set explicitly.
More patterns and examples
- For accessibility, theming, and composition patterns, see Best Practices with Svelte.
- For complete UI examples (search bar, theme toggle, navigation), see Examples with Svelte.