# AnimateIcons animates 1170 SVG icons on hover and ships motion with them

> AnimateIcons is a React package of animated SVG icons whose shapes come from Lucide and Hugeicons, with animation on hover by default and the motion library bundled. The unusual parts are the CLI that copies a single icon into your project and the monorepo behind it, where the icon catalogue is generated by scripts and checked by other scripts.

**Avijit07x/animateicons** — Free and open-source animated SVG icons for React, built for smooth micro-interactions, easy customization, and lightweight performance.

- Repository: https://github.com/Avijit07x/animateicons
- Website: https://animateicons.in
- Stars: 1,521 · Forks: 79
- Language: TypeScript
- License: MIT
- Published: 2026-10-17 · Updated: 2026-10-17 · Language: en
- Canonical page: https://hysenlabs.com/projects/avijit07x-animateicons

## Hover by default, which is a decision not a default

The package is described as 1170 animated SVG icons for React, with hover and imperative triggers and configurable size, color and duration, built on `motion/react`.

The claim that icons animate on hover by default is the part worth pausing on. Most icon libraries are static and animation is opt-in, because an icon that moves when a pointer passes over it is a design decision, not a technical one.

The component surface is small:

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

export function Notifications() {
	return <BellRingIcon size={24} color="#f45b48" />;
}
```

Five props cover the configuration. `size` is a number defaulting to 24, `color` is a string defaulting to `currentColor`, `duration` is a number defaulting to 1, `isAnimated` is a boolean defaulting to true, and `className` is a plain string.

Three defaults are worth naming. `currentColor` means the icon inherits text colour from its parent with no configuration, which is what makes a set of icons work in both themes. `duration` of 1 is a multiplier rather than milliseconds, so the actual timing depends on the animation defined in the icon itself. And `isAnimated` defaulting to true is what makes it an animated icon set rather than a static one with animation available.

There are two import paths, `@animateicons/react/lucide` and `@animateicons/react/huge`, matching the two shape sources. Choosing between them is a choice about which icon set you want, not about features.

## useIconHover moves the trigger to the element around the icon

Hovering an icon is awkward in most layouts, because the clickable area is usually a button or a card and the icon is inside it. So the animation fires when the pointer is over the padding, not over the glyph.

`useIconHover` is the hook for that case. It returns a ref and a set of trigger props, and the pattern is to spread the trigger props onto the interactive element and put the ref on the icon:

```tsx
"use client";
import { useIconHover } from "@animateicons/react";
import { BellRingIcon } from "@animateicons/react/lucide";

export default function Bell() {
	const { ref, triggerProps } = useIconHover(); // hover (default)

	return (
		<button {...triggerProps}>
			<BellRingIcon ref={ref} size={28} />
		</button>
	);
}
```

Two details make this usable. The spread props are what attach the event handlers to whatever element wraps the icon, so the same hook works for a button, a link or a card. And the component has a `ref` in its prop list, which is not something you can assume about a function component in general.

The comment on the call marks hover as the default, and the docs page it links to covers click, both and multiple icons, so the hook has more than one mode.

The `use client` directive at the top is required, which tells you these components are client components and cannot be used in a server component tree without care.

## The CLI copies one icon so you can own the code

One feature stands out because it is the opposite of what a component package usually offers.

The README says that if you prefer to own the code, you can copy one icon into your project:

```bash
npx animateicons add bell-ring
```

Most icon packages are an npm dependency you import. This one will copy a single component into your source tree and then you are responsible for it.

That is a reasonable offer for two reasons. An animated icon is a component with a keyframe definition inside it, and once it is in your repository you can tune the timing, the colour transitions and the paths for your own design without forking a package or overriding a prop that does not exist.

It is also the escape hatch from the licensing question below. If your compliance process needs the code in your repository rather than in a transitive dependency, copying it is a way to resolve that once for the icons you actually use rather than for the whole set.

The documentation is described as covering the CLI, shadcn, MCP, styling and the full API. The shadcn reference suggests icons can also be installed through a component registry workflow, which is the modern default for people who want the file rather than the import.

## The monorepo generates the catalogue and then checks itself

The published README is short, but the repository manifest shows how a thousand-plus icons are kept consistent.

The root package is a private `animateicons-monorepo` on pnpm, and the scripts fall into three groups.

Five generation scripts produce the catalogue: `gen:indices`, `gen:icons-json`, `gen:registry`, `gen:catalog` and `gen:docs`, all run through tsx, with a single `gen:icons` script that runs all five in order.

Three check scripts verify it: `check:icons` for duplicate icons, `check:registry` for the registry, and `check:readme` for the counts in the README. That last one is a detail worth appreciating. A README claiming 1170 icons is a number that goes stale the moment somebody adds one, so a script compares it against the actual catalogue.

Then the verification chain. `verify` runs the checks, the typecheck, the tests and the package-level verifications in order, and `ship` is verify followed by the build. The release script for npm runs the react package's patch release and then pushes with `--follow-tags`.

There are three packages built explicitly, `@animateicons/core`, `animateicons` and `@animateicons/mcp`, each with its own build and verify step, which is why the repository has separate `core/`, `npm/` and `mcp/` directories.

The tooling around that is modern and thorough: `vitest.config.ts`, `knip.json` for unused dependency detection, `commitlint.config.mjs`, `.githooks/` with a script to point git at them, `eslint.config.mjs` with custom rules in `eslint-rules/`, and a Next.js site on turbopack for the documentation.

## Licensing is MIT for the code and something else for the shapes

The licence needs two sentences rather than one, and the second is the one that matters.

The README says the project is MIT. It also says the icon shapes are based on Lucide and Hugeicons, and points at THIRD_PARTY_NOTICES.md in the repository root for the third-party notices.

So the MIT licence covers the packaging, the components, the CLI and the animation code. The outlines themselves are derived from Lucide and Hugeicons. That distinction is not a warning so much as a fact to check, and THIRD_PARTY_NOTICES.md is where you check it.

This is the same situation as any icon package built on an existing set, and it is worth resolving once rather than assuming. If your usage is a web application with a permissive upstream licence, you are probably fine. If your distribution includes an app you ship to customers, read the notices first.

The CLI that copies an icon into your project interacts with this. The underlying path data is still derived from the upstream set, so the notices matter either way.

Two other details. There is a SECURITY.md and a CODE_OF_CONDUCT.md, plus AGENTS.md and CLAUDE.md at the root, so the repository carries the same governance files as a much older project. And there are no GitHub releases, so the version history lives on npm, with the last push on 2026-10-11.

## Conclusion

Adopt AnimateIcons if you want animated icons in React without hand-writing keyframes, and if Lucide or Hugeicons shapes are acceptable as your base. Skip it if your design system needs original artwork, since the icon shapes are derived from those two sets rather than authored here. Verify first which subpath you import from, `@animateicons/react/lucide` or `@animateicons/react/huge`, and read THIRD_PARTY_NOTICES.md.

## FAQ

### How do I install and use an AnimateIcons icon?

Run `pnpm add @animateicons/react`, then import from `@animateicons/react/lucide` or `@animateicons/react/huge`, for example `import { BellRingIcon } from "@animateicons/react/lucide"`. Icons animate on hover by default and motion is bundled.

### What props does an AnimateIcons component accept?

Five: `size` as a number defaulting to 24, `color` as a string defaulting to `currentColor`, `duration` as a number defaulting to 1, `isAnimated` as a boolean defaulting to true, and `className` as a string.

### Can I trigger an icon's animation from a button or card instead of the icon?

Yes. The `useIconHover` hook returns a ref and trigger props; spread the trigger props onto the surrounding button, link or card and put the ref on the icon component. It supports hover by default, with click and combined modes documented separately.

## Sources

- [Avijit07x/animateicons on GitHub](https://github.com/Avijit07x/animateicons)
- [Issues](https://github.com/Avijit07x/animateicons/issues)
- [License: MIT](https://github.com/Avijit07x/animateicons/blob/main/LICENSE)
- [Project website](https://animateicons.in)
- [README](https://github.com/Avijit07x/animateicons/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/avijit07x-animateicons