Component API - Hugeicons Animated

All generated icon components use the same wrapper contract.

Props#

Prop	Type	Default	Description
`size`	`number`	`28`	Sets the SVG width and height in pixels.
`className`	`string`		Adds classes to the wrapper `div`.
`ref`	`IconHandle`		Enables direct animation control.
`...props`	`HTMLAttributes<HTMLDivElement>`		Passes standard `div` attributes to the wrapper.

The SVG uses currentColor. Set color or a text-color class on the wrapper to change the stroke color.

interface Notification03IconHandle {  startAnimation: () => void;  stopAnimation: () => void;}

Method	Behavior
`startAnimation()`	Starts the icon's animation unless reduced motion is active or the animation is already running.
`stopAnimation()`	Stops looping gestures and returns them to rest. Finite gestures finish their current beat.

Note

Each icon exports its own handle type, such as Notification03IconHandle or RefreshIconHandle.

The icon preserves onMouseEnter and onMouseLeave handlers that you pass to it. Its automatic animation runs after your handler.

<Notification03Icon  onMouseEnter={() => track('notification-icon-hovered')}/>

When you pass a ref, the component treats the icon as controlled and disables its automatic hover behavior.