Examples Gallery
Browse code examples for all Hovue icons. Each example shows the icon name, description, and a complete code snippet you can copy and use in your project.
Visual Examples
Button with Icon
<template>
<button class="btn">
Next
<HoArrowRight :size="20" />
</button>
</template>
<button class="btn">
Next
<HoArrowRight :size="20" />
</button>
</template>
Loading State
Loading...
<HoLoader
v-if="isLoading"
animation="rotate"
:animation-duration="1000"
/>
v-if="isLoading"
animation="rotate"
:animation-duration="1000"
/>
Status Icons
Success
Error
<HoCheck v-if="isComplete" />
<HoX v-else />
<HoX v-else />
Navigation Menu
<template>
<nav>
<a href="#">
<HoHome /> Home
</a>
</nav>
</template>
<nav>
<a href="#">
<HoHome /> Home
</a>
</nav>
</template>
Arrows Icons
HoArrowRight
Right-pointing arrow
// Basic usage
import { HoArrowRight } from '@hovue/icons'
<HoArrowRight />
// With props
<HoArrowRight
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoArrowRight } from '@hovue/icons'
<HoArrowRight />
// With props
<HoArrowRight
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoArrowLeft
Left-pointing arrow
// Basic usage
import { HoArrowLeft } from '@hovue/icons'
<HoArrowLeft />
// With props
<HoArrowLeft
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoArrowLeft } from '@hovue/icons'
<HoArrowLeft />
// With props
<HoArrowLeft
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoArrowUp
Up-pointing arrow
// Basic usage
import { HoArrowUp } from '@hovue/icons'
<HoArrowUp />
// With props
<HoArrowUp
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoArrowUp } from '@hovue/icons'
<HoArrowUp />
// With props
<HoArrowUp
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoArrowDown
Down-pointing arrow
// Basic usage
import { HoArrowDown } from '@hovue/icons'
<HoArrowDown />
// With props
<HoArrowDown
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoArrowDown } from '@hovue/icons'
<HoArrowDown />
// With props
<HoArrowDown
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoChevronRight
Right chevron
// Basic usage
import { HoChevronRight } from '@hovue/icons'
<HoChevronRight />
// With props
<HoChevronRight
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoChevronRight } from '@hovue/icons'
<HoChevronRight />
// With props
<HoChevronRight
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoChevronDown
Down chevron
// Basic usage
import { HoChevronDown } from '@hovue/icons'
<HoChevronDown />
// With props
<HoChevronDown
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoChevronDown } from '@hovue/icons'
<HoChevronDown />
// With props
<HoChevronDown
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
Actions Icons
HoCheck
Checkmark icon
// Basic usage
import { HoCheck } from '@hovue/icons'
<HoCheck />
// With props
<HoCheck
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoCheck } from '@hovue/icons'
<HoCheck />
// With props
<HoCheck
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoX
Close/X icon
// Basic usage
import { HoX } from '@hovue/icons'
<HoX />
// With props
<HoX
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoX } from '@hovue/icons'
<HoX />
// With props
<HoX
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoPlus
Plus/add icon
// Basic usage
import { HoPlus } from '@hovue/icons'
<HoPlus />
// With props
<HoPlus
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoPlus } from '@hovue/icons'
<HoPlus />
// With props
<HoPlus
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoMinus
Minus/remove icon
// Basic usage
import { HoMinus } from '@hovue/icons'
<HoMinus />
// With props
<HoMinus
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoMinus } from '@hovue/icons'
<HoMinus />
// With props
<HoMinus
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoSearch
Search icon
// Basic usage
import { HoSearch } from '@hovue/icons'
<HoSearch />
// With props
<HoSearch
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoSearch } from '@hovue/icons'
<HoSearch />
// With props
<HoSearch
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoMenu
Menu/hamburger icon
// Basic usage
import { HoMenu } from '@hovue/icons'
<HoMenu />
// With props
<HoMenu
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoMenu } from '@hovue/icons'
<HoMenu />
// With props
<HoMenu
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
Ui Icons
HoHome
Home icon
// Basic usage
import { HoHome } from '@hovue/icons'
<HoHome />
// With props
<HoHome
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoHome } from '@hovue/icons'
<HoHome />
// With props
<HoHome
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoUser
User/profile icon
// Basic usage
import { HoUser } from '@hovue/icons'
<HoUser />
// With props
<HoUser
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoUser } from '@hovue/icons'
<HoUser />
// With props
<HoUser
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoSettings
Settings/gear icon
// Basic usage
import { HoSettings } from '@hovue/icons'
<HoSettings />
// With props
<HoSettings
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoSettings } from '@hovue/icons'
<HoSettings />
// With props
<HoSettings
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoBell
Notification bell
// Basic usage
import { HoBell } from '@hovue/icons'
<HoBell />
// With props
<HoBell
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoBell } from '@hovue/icons'
<HoBell />
// With props
<HoBell
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoMail
Mail/email icon
// Basic usage
import { HoMail } from '@hovue/icons'
<HoMail />
// With props
<HoMail
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoMail } from '@hovue/icons'
<HoMail />
// With props
<HoMail
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoHeart
Heart/favorite icon
// Basic usage
import { HoHeart } from '@hovue/icons'
<HoHeart />
// With props
<HoHeart
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoHeart } from '@hovue/icons'
<HoHeart />
// With props
<HoHeart
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
Media Icons
HoPlay
Play button
// Basic usage
import { HoPlay } from '@hovue/icons'
<HoPlay />
// With props
<HoPlay
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoPlay } from '@hovue/icons'
<HoPlay />
// With props
<HoPlay
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoPause
Pause button
// Basic usage
import { HoPause } from '@hovue/icons'
<HoPause />
// With props
<HoPause
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoPause } from '@hovue/icons'
<HoPause />
// With props
<HoPause
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoVolume
Volume/sound icon
// Basic usage
import { HoVolume } from '@hovue/icons'
<HoVolume />
// With props
<HoVolume
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoVolume } from '@hovue/icons'
<HoVolume />
// With props
<HoVolume
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoCamera
Camera icon
// Basic usage
import { HoCamera } from '@hovue/icons'
<HoCamera />
// With props
<HoCamera
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoCamera } from '@hovue/icons'
<HoCamera />
// With props
<HoCamera
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoImage
Image/picture icon
// Basic usage
import { HoImage } from '@hovue/icons'
<HoImage />
// With props
<HoImage
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoImage } from '@hovue/icons'
<HoImage />
// With props
<HoImage
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoMusic
Music icon
// Basic usage
import { HoMusic } from '@hovue/icons'
<HoMusic />
// With props
<HoMusic
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoMusic } from '@hovue/icons'
<HoMusic />
// With props
<HoMusic
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
Files Icons
HoFile
File document
// Basic usage
import { HoFile } from '@hovue/icons'
<HoFile />
// With props
<HoFile
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoFile } from '@hovue/icons'
<HoFile />
// With props
<HoFile
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoFolder
Folder icon
// Basic usage
import { HoFolder } from '@hovue/icons'
<HoFolder />
// With props
<HoFolder
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoFolder } from '@hovue/icons'
<HoFolder />
// With props
<HoFolder
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoCopy
Copy icon
// Basic usage
import { HoCopy } from '@hovue/icons'
<HoCopy />
// With props
<HoCopy
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoCopy } from '@hovue/icons'
<HoCopy />
// With props
<HoCopy
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoTrash
Trash/delete icon
// Basic usage
import { HoTrash } from '@hovue/icons'
<HoTrash />
// With props
<HoTrash
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoTrash } from '@hovue/icons'
<HoTrash />
// With props
<HoTrash
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoDownload
Download icon
// Basic usage
import { HoDownload } from '@hovue/icons'
<HoDownload />
// With props
<HoDownload
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoDownload } from '@hovue/icons'
<HoDownload />
// With props
<HoDownload
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoUpload
Upload icon
// Basic usage
import { HoUpload } from '@hovue/icons'
<HoUpload />
// With props
<HoUpload
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoUpload } from '@hovue/icons'
<HoUpload />
// With props
<HoUpload
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
Loaders Icons
HoLoader
Loading spinner
// Basic usage
import { HoLoader } from '@hovue/icons'
<HoLoader />
// With props
<HoLoader
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoLoader } from '@hovue/icons'
<HoLoader />
// With props
<HoLoader
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoRefresh
Refresh/reload icon
// Basic usage
import { HoRefresh } from '@hovue/icons'
<HoRefresh />
// With props
<HoRefresh
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoRefresh } from '@hovue/icons'
<HoRefresh />
// With props
<HoRefresh
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoSync
Sync icon
// Basic usage
import { HoSync } from '@hovue/icons'
<HoSync />
// With props
<HoSync
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoSync } from '@hovue/icons'
<HoSync />
// With props
<HoSync
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoClock
Clock/time icon
// Basic usage
import { HoClock } from '@hovue/icons'
<HoClock />
// With props
<HoClock
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoClock } from '@hovue/icons'
<HoClock />
// With props
<HoClock
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoCalendar
Calendar icon
// Basic usage
import { HoCalendar } from '@hovue/icons'
<HoCalendar />
// With props
<HoCalendar
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoCalendar } from '@hovue/icons'
<HoCalendar />
// With props
<HoCalendar
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
HoStar
Star icon
// Basic usage
import { HoStar } from '@hovue/icons'
<HoStar />
// With props
<HoStar
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>
import { HoStar } from '@hovue/icons'
<HoStar />
// With props
<HoStar
:size= "24"
color= "currentColor"
animation= "slide"
:animation-duration= "300"
/>