We're Proudly Open Source

Icons that move
with intent

Editable Vue components with motion baked in. Works seamlessly with Nuxt, shadcn-vue, and modern design systems.

Browse Icons Star on GitHub
<script setup>
import { HoArrowRight, HoCheck, HoLoader } from '@hovue/icons'
</script>

<template>
  <HoArrowRight:size="24"animation="slide"/>
  <HoCheck:size="24"animation="bounce"/>
  <HoLoader:size="24"animation="spin"/>
</template>

Built for modern Vue development

Every icon is designed with motion as a feature, not an afterthought.

Motion First

Every icon ships with thoughtfully crafted animations. Hover, click, or trigger programmatically.

Fully Customizable

Size, color, stroke width, animation duration—every aspect is a prop. TypeScript support included.

Tree-Shakeable

Import only what you need. Each icon is a standalone component with zero runtime overhead.

Nuxt Ready

First-class Nuxt module with auto-imports. Just install and use—no configuration required.

shadcn-vue Compatible

Designed to work beautifully alongside shadcn-vue components and your existing design system.

Open Source

MIT licensed and community-driven. Contribute, fork, or use in commercial projects freely.

Vue 3
Nuxt 3
shadcn-vue
TypeScript

100+ animated icons and growing

Each icon comes with multiple animation variants. Click to copy.

HoArrowRight
Copied!
HoArrowLeft
Copied!
HoArrowUp
Copied!
HoArrowDown
Copied!
HoChevronRight
Copied!
HoChevronDown
Copied!
HoCheck
Copied!
HoX
Copied!
HoPlus
Copied!
HoMinus
Copied!
HoSearch
Copied!
HoMenu
Copied!
HoHome
Copied!
HoUser
Copied!
HoSettings
Copied!
HoBell
Copied!
HoMail
Copied!
HoHeart
Copied!
HoPlay
Copied!
HoPause
Copied!
HoVolume
Copied!
HoCamera
Copied!
HoImage
Copied!
HoMusic
Copied!
HoFile
Copied!
HoFolder
Copied!
HoCopy
Copied!
HoTrash
Copied!
HoDownload
Copied!
HoUpload
Copied!
HoLoader
Copied!
HoRefresh
Copied!
HoSync
Copied!
HoClock
Copied!
HoCalendar
Copied!
HoStar
Copied!

100+

Animated Icons

5+

Animation Variants

<2kb

Per Icon (gzipped)

100%

TypeScript

Get started in seconds

Install via your favorite package manager and start using immediately.

npm

npm install @hovue/icons

pnpm

pnpm add @hovue/icons

yarn

yarn add @hovue/icons

bun

bun add @hovue/icons

Comprehensive docs

Everything you need to get up and running quickly.

Introduction

Hovue is a collection of beautifully crafted, animated icons for Vue 3 and Nuxt 3 applications. Each icon is built as a standalone Vue component with motion baked in.

Key Features

Unlike static icon libraries, Hovue icons are designed with animation as a first-class citizen. Every icon includes thoughtfully crafted hover states, click feedback, and programmatic animation triggers.

// Import individual icons
import { HoArrowRight, HoCheck } from 'hovue'

// Use in your template
<HoArrowRight
  :size="24"
  color="currentColor"
  animation="slide"
  :animation-duration="300"
/>

Nuxt Auto-Import

Using Nuxt? Icons are auto-imported automatically when you add the module.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['hovue/nuxt']
})

Ready to bring your icons to life?

A growing open source library of animated icons built for real interfaces.

Browse Icons Star on GitHub