Skip to Content
IntegrationsVueExamples with Vue

Examples with Vue

This page shows practical patterns for using HugeiconsIcon in common Vue UI components.
All examples assume you’ve already installed @hugeicons/vue and either the free or Pro icon packages.

Search bar with clear button

A search input that shows a clear button when text is entered:

<script setup>
import { ref } from 'vue'
import { HugeiconsIcon } from '@hugeicons/vue'
import { SearchIcon, CancelCircleIcon } from '@hugeicons/core-free-icons'
 
const searchValue = ref('')
</script>
 
<template>
  <div>
    <input v-model="searchValue" type="text" placeholder="Search..." />
    <HugeiconsIcon
      :icon="SearchIcon"
      :altIcon="CancelCircleIcon"
      :showAlt="searchValue.length > 0"
      @click="searchValue.length > 0 ? (searchValue = '') : null"
    />
  </div>
</template>

Favorite toggle button with Pro Icons

A favorite toggle button that switches based on the state:

<script setup>
import { ref } from 'vue'
import { HugeiconsIcon } from '@hugeicons/vue'
import { FavouriteStrokeStandard } from '@hugeicons-pro/core-stroke-standard'
import { FavouriteSolidStandard } from '@hugeicons-pro/core-solid-standard'
 
const isFavorite = ref(false)
</script>
 
<template>
  <button @click="isFavorite = !isFavorite">
    <HugeiconsIcon
      :icon="FavouriteStrokeStandard"
      :altIcon="FavouriteSolidStandard"
      :showAlt="isFavorite"
      :size="20"
    />
  </button>
</template>

Bottom navigation with active state

A navigation bar that uses different icon styles to indicate the active state:

<script setup>
import { ref } from 'vue'
import { HugeiconsIcon } from '@hugeicons/vue'
import {
  HomeIcon,
  SearchIcon,
  Notification03Icon,
  UserIcon,
} from '@hugeicons/core-free-icons'
import {
  HomeIcon as HomeDuotone,
  SearchIcon as SearchDuotone,
  Notification03Icon as NotificationDuotone,
  UserIcon as UserDuotone,
} from '@hugeicons-pro/core-duotone-rounded'
 
const activeTab = ref('home')
const navItems = [
  { id: 'home', solidIcon: HomeIcon, duotoneIcon: HomeDuotone },
  { id: 'search', solidIcon: SearchIcon, duotoneIcon: SearchDuotone },
  { id: 'notifications', solidIcon: Notification03Icon, duotoneIcon: NotificationDuotone },
  { id: 'profile', solidIcon: UserIcon, duotoneIcon: UserDuotone },
]
</script>
 
<template>
  <nav>
    <button
      v-for="item in navItems"
      :key="item.id"
      @click="activeTab = item.id"
      :class="['nav-item', { active: activeTab === item.id }]"
    >
      <HugeiconsIcon
        :icon="item.solidIcon"
        :altIcon="item.duotoneIcon"
        :showAlt="activeTab === item.id"
        :size="24"
      />
    </button>
  </nav>
</template>

Next steps

Best Practices with VueOverview