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) |
| class | string | - | Additional CSS classes |
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.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.
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.