Install AnimateIcons

Learn how to install AnimateIcons using the shadcn CLI and start using animated SVG icons in your React or Next.js project.

1. Setup shadcn/ui

These icons use the shadcn CLI. If you have not installed shadcn yet, follow the official guide first.

Open shadcn installation guide

2. Install Icon

Install the icon directly into your project.

pnpm dlx shadcn@latest add https://animateicons.in/r/lu-eye.json

Basic Usage

Import and use the icon like any React component.

import { EyeIcon } from "@/components/ui/eye"

export default function Example() {
	return <EyeIcon size={24} />
}

Icon Props

All props are optional.

size?: number
className?: string

duration?: number
isAnimated?: boolean

onMouseEnter?: () => void
onMouseLeave?: () => void

Imperative API

Control animations programmatically using refs.

"use client"

import { useRef } from "react"
import { EyeIcon, type EyeIconHandle } from "@/components/ui/eye"

export default function Demo() {
	const ref = useRef<EyeIconHandle>(null)

	return (
		<div className="flex items-center gap-6">
			<button
				onMouseEnter={() => ref.current?.startAnimation()}
				onMouseLeave={() => ref.current?.stopAnimation()}
				className="cursor-pointer"
			>
				<EyeIcon ref={ref} size={28} duration={1} />
			</button>	
		</div>
	)
}