> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Animated icons

> 69 icons that animate on hover, as a drop-in replacement for their static twins.

Every export here mirrors an icon of the same name in `@fanvue/ui` and renders
in the same box, so swapping the import path changes the motion and nothing
about your layout.

```tsx theme={null}
// The static icon, and its animated twin of the same name.
import { HeartIcon } from "@fanvue/ui";
import { HeartIcon as AnimatedHeartIcon } from "@fanvue/ui/animated-icons";
```

<Warning>
  This subpath needs the optional `motion` peer dependency. Install it alongside
  `@fanvue/ui`, or the import will fail to resolve — see [Subpath exports](/docs/ui/subpath-exports).

  ```bash theme={null}
  pnpm add motion
  ```
</Warning>

## Shared props

Every animated icon accepts the standard `SVGAttributes` of an `<svg>` element
(`className`, `style`, `aria-*`), plus:

<ParamField path="size" type="16 | 24 | 32" default="24">
  Pixel size, matching the static icon's box exactly. Available on the 58 icons
  whose static twin is prop-based; the other 11 are sized with a utility
  class instead, e.g. `className="size-6"`.
</ParamField>

<ParamField path="controlRef" type="Ref<AnimatedIconHandle>">
  Drives the animation yourself. When set, hovering the icon no longer starts it,
  and `onMouseEnter` / `onMouseLeave` are forwarded untouched. The handle exposes
  `startAnimation()` and `stopAnimation()`.
</ParamField>

<ParamField path="filled" type="never">
  Not available. The animated artwork is stroke-only, so there is no filled variant
  to swap to; the prop is typed as `never` so passing it through a wrapper's spread
  fails to compile instead of reaching the DOM.
</ParamField>

Each icon also exports a matching `<Name>Props` and `<Name>Handle` type, so a
wrapper component can forward the ref with full typing.

## Driving the animation

Each icon animates on its own hover and focus. To drive it from a parent — a
card that plays its icon when the whole card is hovered — pass a `controlRef`
and call the handle.

```tsx theme={null}
import { useRef } from "react";
import { HeartIcon } from "@fanvue/ui/animated-icons";
import type { HeartIconHandle } from "@fanvue/ui/animated-icons";

function LikeCard() {
  const icon = useRef<HeartIconHandle>(null);
  return (
    <button
      type="button"
      onMouseEnter={() => icon.current?.startAnimation()}
      onMouseLeave={() => icon.current?.stopAnimation()}
    >
      <HeartIcon controlRef={icon} size={24} />
      Like
    </button>
  );
}
```

<Note>
  Nothing animates under `prefers-reduced-motion`. `SpinnerIcon` is deliberately
  absent — a loading indicator must not wait for a hover.
</Note>

## All animated icons

Every name below imports from `@fanvue/ui/animated-icons`. The sizing column says how the icon is sized: the 58 icons whose static twin is prop-based take `size`, and the remaining 11 take a utility class.

| Icon                | Upstream slug         | Sizing                  |
| ------------------- | --------------------- | ----------------------- |
| `AddIcon`           | `plus`                | `size={16 \| 24 \| 32}` |
| `AffiliatesIcon`    | `users`               | `size={16 \| 24 \| 32}` |
| `AIIcon`            | `sparkles`            | `size={16 \| 24 \| 32}` |
| `ArrowDownIcon`     | `arrow-down`          | `size={16 \| 24 \| 32}` |
| `ArrowLeftIcon`     | `arrow-left`          | `size={16 \| 24 \| 32}` |
| `ArrowRightIcon`    | `arrow-right`         | `size={16 \| 24 \| 32}` |
| `ArrowUpIcon`       | `arrow-up`            | `size={16 \| 24 \| 32}` |
| `ArrowUpRightIcon`  | `arrow-up-right`      | `className`             |
| `AtSignIcon`        | `at-sign`             | `size={16 \| 24 \| 32}` |
| `BellIcon`          | `bell`                | `size={16 \| 24 \| 32}` |
| `BoltIcon`          | `zap`                 | `size={16 \| 24 \| 32}` |
| `CalendarIcon`      | `calendar-days`       | `size={16 \| 24 \| 32}` |
| `CardIcon`          | `credit-card`         | `size={16 \| 24 \| 32}` |
| `CheckIcon`         | `check`               | `className`             |
| `CheckOutlineIcon`  | `circle-check`        | `className`             |
| `ChevronDownIcon`   | `chevron-down`        | `size={16 \| 24 \| 32}` |
| `ChevronLeftIcon`   | `chevron-left`        | `size={16 \| 24 \| 32}` |
| `ChevronRightIcon`  | `chevron-right`       | `size={16 \| 24 \| 32}` |
| `ChevronUpIcon`     | `chevron-up`          | `size={16 \| 24 \| 32}` |
| `ClockIcon`         | `clock`               | `size={16 \| 24 \| 32}` |
| `CloseIcon`         | `x`                   | `size={16 \| 24 \| 32}` |
| `CogIcon`           | `cog`                 | `size={16 \| 24 \| 32}` |
| `CoinIcon`          | `circle-dollar-sign`  | `size={16 \| 24 \| 32}` |
| `CopyIcon`          | `copy`                | `size={16 \| 24 \| 32}` |
| `CrossIcon`         | `x`                   | `className`             |
| `DiscordIcon`       | `discord`             | `size={16 \| 24 \| 32}` |
| `DoubleTickIcon`    | `check-check`         | `size={16 \| 24 \| 32}` |
| `DownloadIcon`      | `download`            | `size={16 \| 24 \| 32}` |
| `EmojiIcon`         | `smile`               | `className`             |
| `ExpandIcon`        | `maximize-2`          | `size={16 \| 24 \| 32}` |
| `EyeIcon`           | `eye`                 | `size={16 \| 24 \| 32}` |
| `EyeOffIcon`        | `eye-off`             | `size={16 \| 24 \| 32}` |
| `FlameIcon`         | `flame`               | `size={16 \| 24 \| 32}` |
| `HeartIcon`         | `heart`               | `size={16 \| 24 \| 32}` |
| `HelpIcon`          | `circle-help`         | `size={16 \| 24 \| 32}` |
| `HomeIcon`          | `home`                | `size={16 \| 24 \| 32}` |
| `HourglassIcon`     | `hourglass`           | `size={16 \| 24 \| 32}` |
| `LanguageIcon`      | `languages`           | `size={16 \| 24 \| 32}` |
| `LinkIcon`          | `link`                | `size={16 \| 24 \| 32}` |
| `LocationIcon`      | `map-pin`             | `size={16 \| 24 \| 32}` |
| `LockerIcon`        | `lock-keyhole`        | `size={16 \| 24 \| 32}` |
| `MenuCloseIcon`     | `panel-left-close`    | `size={16 \| 24 \| 32}` |
| `MenuIcon`          | `menu`                | `size={16 \| 24 \| 32}` |
| `MenuOpenIcon`      | `panel-left-open`     | `size={16 \| 24 \| 32}` |
| `MicrophoneIcon`    | `mic`                 | `size={16 \| 24 \| 32}` |
| `NewMessageIcon`    | `message-square-plus` | `size={16 \| 24 \| 32}` |
| `OpenIcon`          | `external-link`       | `className`             |
| `PeopleIcon`        | `users`               | `className`             |
| `PhoneIcon`         | `phone`               | `size={16 \| 24 \| 32}` |
| `PlusIcon`          | `plus`                | `className`             |
| `ReverseIcon`       | `history`             | `size={16 \| 24 \| 32}` |
| `SearchIcon`        | `search`              | `size={16 \| 24 \| 32}` |
| `SendIcon`          | `send`                | `size={16 \| 24 \| 32}` |
| `SettingsIcon`      | `sliders-horizontal`  | `size={16 \| 24 \| 32}` |
| `SoundIcon`         | `audio-lines`         | `size={16 \| 24 \| 32}` |
| `SunIcon`           | `sun`                 | `size={16 \| 24 \| 32}` |
| `ThumbDownIcon`     | `downvote`            | `size={16 \| 24 \| 32}` |
| `ThumbUpIcon`       | `upvote`              | `size={16 \| 24 \| 32}` |
| `TickCircleIcon`    | `circle-check`        | `size={16 \| 24 \| 32}` |
| `TickIcon`          | `check`               | `size={16 \| 24 \| 32}` |
| `TrashBinIcon`      | `delete`              | `className`             |
| `TrashIcon`         | `delete`              | `size={16 \| 24 \| 32}` |
| `UploadCloudIcon`   | `cloud-upload`        | `className`             |
| `UploadIcon`        | `upload`              | `size={16 \| 24 \| 32}` |
| `UploadToCloudIcon` | `cloud-upload`        | `size={16 \| 24 \| 32}` |
| `UsersIcon`         | `users`               | `size={16 \| 24 \| 32}` |
| `WalletIcon`        | `wallet`              | `size={16 \| 24 \| 32}` |
| `WifiIcon`          | `wifi`                | `size={16 \| 24 \| 32}` |
| `WrenchIcon`        | `wrench`              | `className`             |

Artwork and animations from [lucide-animated](https://lucide-animated.com) (MIT).

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming) · [Subpath exports](/docs/ui/subpath-exports)