Usage

Every icon shares the same small API: a few style props and an optional ref handle. The examples below use EyeIcon, but they apply to every icon in both libraries.

#Styling

Every icon strokes currentColor, so it inherits the surrounding text color. You can also pass color, className, or use the duration and isAnimated props to control playback.

Styling.tsx

tsx

// Color - sets currentColor inline
<EyeIcon color="#f45b48" />

// Tailwind utility - works because icons stroke="currentColor"

<EyeIcon className="text-primary" />

// Speed - duration is a multiplier (lower = faster)

<EyeIcon duration={0.6} />

// Disable hover animation

<EyeIcon isAnimated={false} />

Because icons stroke currentColor, they inherit color from any parent, so a Tailwind text-* class or a CSS color is all you need to theme them.

#Imperative API

Need to trigger an animation from a parent, on click, on focus, or programmatically? Pass a ref. Each icon exports its own *Handle type.

Demo.tsx

tsx

"use client"

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

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

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

}

Icons render fine inside Server Components. Pass plain props such as size, color and duration. The ref handle only works in Client Components, so add "use client" to the file that calls startAnimation() or passes event handlers.

Use useIconHover to play icons on hover or click without writing the handlers yourself. See the Hover helper.

#Props & types

Types

interface IconProps {
	size?: number
	color?: string
	className?: string
	duration?: number
	isAnimated?: boolean
	onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void
	onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void
	style?: React.CSSProperties
}

interface IconHandle {
startAnimation: () => void
stopAnimation: () => void
}

Animations respect the OS-level Reduce Motion preference, so no extra setup is required.