@animateicons/react

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.

Imperative API

Trigger animation from a parent via ref:

"use client";
import { useRef } from "react";
import {
	BellRingIcon,
	type BellRingIconHandle,
} from "@animateicons/react/lucide";

export default function Bell() {
	const ref = useRef<BellRingIconHandle>(null);

	return (
		<button
			onMouseEnter={() => ref.current?.startAnimation()}
			onMouseLeave={() => ref.current?.stopAnimation()}
		>
			<BellRingIcon ref={ref} size={28} />
		</button>
	);
}

Props

| Prop | Type | Default | | ------------ | --------- | -------------- | | size | number | 24 | | color | string | currentColor | | duration | number | 1 | | isAnimated | boolean | true | | className | string | - |

License

MIT © Avijit Dey