Animated icon

Effects

Contextual motion for the shared icon catalog: draw, tremor, spinning settings, bouncing navigation and morphing validation.

React · copy into your project · light and dark themes

Try it

Variant

Hover or focus an action. Select it to replay; the loader runs until released.

Find an icon

1–12 of 100 icons

Select an icon for its name and motion.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/animated-icon.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes icon, button, input, label. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/icon.json https://luv-jeri.github.io/cojeev-ui/r/animated-icon.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/input.json https://luv-jeri.github.io/cojeev-ui/r/label.json

Using animated icon

Use inside a named Button or link. Hover and focus are inherited from that control.
Set active for a processing state; omit it for pointer and focus interaction.
Choose a preset to override the name-based default.
The auto preset chooses action-specific SVG-part feedback. Explicit presets keep their own visual treatment, and bounce follows the icon direction.
Use active to control feedback directly. amplitude={0} suppresses movement. Loader auto feedback repeats only while active; other action reactions are finite.
Auto maps all 100 semantic action names to original part-level feedback. Only loader loops while active; finite feedback settles for other actions. Search by name or action in the example.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

AnimatedIconProps

Prop	Type	Required
`amplitude`	`number \| string \| undefined`	No
`preset`	`IconMotion`	No
`active`	`boolean`	No
`duration`	`number`	No

StateChevronProps

Prop	Type	Required
`open` Omit to follow the closest native trigger's data-state/aria-expanded.	`boolean`	No
`direction`	`"down" \| "right"`	No

Accessibility

Icons remain decorative beside a text label.
Motion pauses offscreen, while the document is hidden, and when reduced motion or Motion Off is enabled.

States and appearance

idlehoveredfocusedactiveoffscreenreduced-motion

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.