Animated icons
Stroke icons whose parts move on hover, focus or state changes. Preview, tune, and take the source.
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.json1import { 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}