@animateicons/react

1500 animated SVG icons for React. Built on motion/react.

Documentation

For full documentation, visit animateicons.in/icons/docs.

Browse all icons at animateicons.in.

Installation

npm i @animateicons/react

pnpm add @animateicons/react

yarn add @animateicons/react

bun add @animateicons/react

Usage

Import any icon from the lucide or huge subpath:

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

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

The icon animates on hover by default.

Hover, click or both

Every icon has startAnimation() and stopAnimation(). useIconHover calls them for you when a user hovers or clicks:

"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>
    );
}

See the full docs for click, both and multiple icons.

Props

Other frameworks

Not using React? The same icons and the same motion ship as @animateicons/vanilla for plain JS and web components, @animateicons/vue for Vue 3 and Nuxt, and @animateicons/angular for Angular. Docs: Plain JS, Vue and Angular.

License

MIT © Avijit Dey

Icon shapes are based on Lucide and Hugeicons, see the third-party notices.