Hovue

Animated Vue Icons with Motion Baked In

A collection of beautiful, animated Vue 3 icons with CSS-based animations. Perfect for modern Vue and Nuxt applications.

Packages

This is a monorepo containing:

• @hovue/icons - Core icon library
• @hovue/nuxt - Nuxt module with auto-import
• @hovue/cli - CLI tool for managing icons
• @hovue/website - Official documentation website

Quick Start

Installation

# Install icons package
pnpm add @hovue/icons

# Or with Nuxt auto-import
pnpm add @hovue/icons @hovue/nuxt

Usage

Vue 3

<script setup>
import { HoArrowRight, HoCheck } from '@hovue/icons'
</script>

<template>
  <HoArrowRight :size="24" animation="slide" />
  <HoCheck :size="32" color="green" animation="bounce" />
</template>

Nuxt 3

Add to nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@hovue/nuxt']
})

Then use icons directly (auto-imported):

<template>
  <HoArrowRight :size="24" animation="slide" />
  <HoCheck :size="32" color="green" />
</template>

Features

• 36+ Beautiful Icons - Carefully crafted SVG icons
• CSS Animations - Smooth, performant animations on hover
• TypeScript - Full type safety
• Tree-shakeable - Import only what you need
• Zero Dependencies - No external animation libraries
• Customizable - Size, color, and animation props
• Nuxt Ready - Auto-import support

Documentation

Visit https://hovue.xyz for complete documentation.

Development

This is a monorepo managed by pnpm and Turbo.

# Install dependencies
pnpm install

# Develop all packages
pnpm dev

# Build all packages
pnpm build

# Run playground
cd playground
pnpm dev

License

MIT © Hovue Contributors

Acknowledgments

Inspired by Heroicons and Lucide.