HugeiconsIcon Wrapper

The @hugeicons/vue package provides a universal HugeiconsIcon component that can render any icon from our libraries.
Think of it as a smart wrapper for Vue: you pass it an icon object, and it handles sizing, color, stroke width, and even switching between two icons for different states.

Props

State-based icons with altIcon and showAlt

Use altIcon and showAlt to swap between two icons based on component state:

<script setup>
import { ref } from 'vue'
import { HugeiconsIcon } from '@hugeicons/vue'
import { SunIcon, Moon02Icon } from '@hugeicons/core-free-icons'
 
const isDark = ref(false)
</script>
 
<template>
  <button @click="isDark = !isDark">
    <HugeiconsIcon :icon="SunIcon" :altIcon="Moon02Icon" :showAlt="isDark" />
  </button>
</template>

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 setup>
import { HugeiconsIcon } from '@hugeicons/vue'
import { Notification03Icon } from '@hugeicons/core-free-icons'
</script>
 
<template>
  <HugeiconsIcon
    :icon="Notification03Icon"
    :size="32"
    color="#6366f1"
    :strokeWidth="1.75"
    class="inline-block align-middle"
  />
</template>

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 Vue.
• For complete UI examples (search bar, theme toggle, navigation), see Examples with Vue.