@animateicons/react

1132 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

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

License

MIT © Avijit Dey

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