# Motion Icon Hover Set

Sidebar navigation where each section icon plays as the link is hovered or focused.

- id: `motion-icon-hover-set`
- Page: https://agentic-ui-kit.com/components/motion-icon-hover-set
- Live preview: https://agentic-ui-kit.com/live/component/motion-icon-hover-set

## Install

```bash
agentic-ui add motion-icon-hover-set
npx shadcn@4.17.0 add @agentic-ui/motion-icon-hover-set
```

## Metadata

- **Level:** primitive
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** animated-icons, hover-micro-animation, press-micro-animation, parent-trigger, line-and-filled-variants, personality-timing, pause-offscreen, reduced-motion-fallback
- **Intents:** navigate, configure, communicate
- **Suits domains:** saas, project-management, file-storage, ai-workspace, personal-productivity, settings
- **Interaction:** hover, click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Sidebar navigation where each section icon plays as the link is hovered or focused, Toolbar icon buttons (refresh, send, download) that animate when pressed, Empty states or feature lists that play each icon once as it comes into view
- **Avoid when:** Dense data tables with an icon in every row (hundreds of triggers for little benefit), Icons that switch between two states such as menu and close (use motion-icon-morph), Healthcare, legal or finance screens where the policy keeps motion minimal
- **Preserve when adapting:** decorative-aria-hidden-default, parent-hover-and-focus-visible-trigger, transform-opacity-only-keyframes, no-restart-while-playing, static-icon-fallback
- **Replace when adapting:** icon-choice, labels-and-titles, knockout-surface-colour
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8.5/10, responsive 9/10, accessibility 9/10, code 8.5/10
- **Uses primitives:** button, badge
- **npm dependencies:** @agentic-ui/motion, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion