Skip to content

Animated icons

Stroke icons whose parts move on hover, focus or state changes. Preview, tune, and take the source.

TSX + CSS. MIT.Get the code

Components

45 icons
Lens scans, handle redraws

Hover or focus to play

Get the code

Add the files to your app with the shadcn CLI. They land in components/animated-icons.

npx shadcn@latest add https://www.remcostoeten.nl/r/animated-icon-search.json
1import { useEffect } from "react";2import { AnimatedSearchIcon } from "@/components/animated-icons/icons/search";3import { installIconHover } from "@/components/animated-icons/icon-frame";45export function SearchButton() {6  useEffect(() => installIconHover(), []);78  return (9    <button type="button" data-icon-trigger>10      <AnimatedSearchIcon size={48} />11      Search12    </button>13  );14}

What it replaces

Small motion that confirms what just happened.

Use them in navigation, buttons and rows where a hover or a completed action deserves a small response. Call playIcon() from a click handler for feedback on state changes.

  • Each icon is split into parts that animate on their own, such as a lid that lifts or a bell that rings while the clapper lags.
  • Plays on hover or focus of any [data-icon-trigger] ancestor, with a short delay on the first icon in a chain.
  • Plain CSS keyframes and no runtime dependency. Animations stop under reduced motion, except the loading spinner.
  • Every icon is its own registry item with its own CSS, so animated-icon-search.json installs just the search icon and the shared base.

API

<Animated*Icon />
An SVG icon with size and stroke props.
installIconHover()
Plays icons on hover and focus of a trigger.
playIcon(svg)
Plays an icon from code, for state changes.