Repolode
Submit
Avijit07x

Avijit07x/animateicons

A React, Vue, Angular and plain JavaScript library of 1,170 animated SVG icons that play on hover or on demand.

View on GitHubWebsite
Stars
1,521
Forks
79
Open issues
0
Last commit
6 hours ago

What is it?

AnimateIcons is an icon library where every icon has built-in motion. It ships 1,170 SVG icons, based on the Lucide and Hugeicons sets, and each one animates on hover by default. Developers can also trigger animations imperatively from code.

Icons accept props for size, color, duration and whether animation is enabled, and take a className for styling. The React package is imported per icon set, such as @animateicons/react/lucide or @animateicons/react/huge. Separate packages cover Vue 3 and Nuxt, Angular, and plain JavaScript, which also works with web components, Svelte, Solid and Astro. The motion is built on the motion library, which is bundled with the React package.

A useIconHover hook plays an icon when the user hovers or clicks the button, link or card around it. A CLI command can copy a single icon's source into a project, and the project also documents shadcn and MCP integration.

Key features

  • 01Provides 1,170 SVG icons with hover-triggered animation by default.
  • 02Supports size, color, duration and on/off animation props.
  • 03Offers packages for React, Vue and Nuxt, Angular, and plain JavaScript.
  • 04Includes a useIconHover hook for animating icons from a surrounding button or card.
  • 05Lets you copy individual icon source into your project with a CLI command.

Use cases

  • Adding motion feedback to buttons, navigation items or notification bells in a React web app.
  • Using animated icons in a Vue or Nuxt site without writing animation code.
  • Copying a single icon into a codebase that you want to customize directly.

Quick start

  1. 1

    Install the React package

    pnpm add @animateicons/react
  2. 2

    Import an icon and render it

    import { BellRingIcon } from "@animateicons/react/lucide";

Things to know

  • Icon shapes derive from Lucide and Hugeicons, so third-party notices apply.

In collections

Frontend frameworks & UI components

Topics

#icons#animation#svg#react#vue#angular#motion#ui-components#animated-icons#framer-motion

FAQ

What is animateicons?
A React, Vue, Angular and plain JavaScript library of 1,170 animated SVG icons that play on hover or on demand. AnimateIcons is an icon library where every icon has built-in motion. It ships 1,170 SVG icons, based on the Lucide and Hugeicons sets, and each one animates on hover by default. Developers can also trigger animations imperatively from code.
Is animateicons free to use? What license does it have?
animateicons is open source under the MIT license. Check the license terms before using it in commercial products.
Is animateicons still maintained?
Actively maintained. The last commit to animateicons was on Nov 7, 2026.
What can I use animateicons for?
Adding motion feedback to buttons, navigation items or notification bells in a React web app. Using animated icons in a Vue or Nuxt site without writing animation code. Copying a single icon into a codebase that you want to customize directly.
How do I install animateicons?
Install the React package: pnpm add @animateicons/react Import an icon and render it: import { BellRingIcon } from "@animateicons/react/lucide";
Where can I get animateicons?
The source code and installation instructions are on GitHub: https://github.com/Avijit07x/animateicons

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects