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.
• 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.

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.