shadcn.io is not affiliated with official shadcn/ui
Animated Icons Features Block for React
A three-by-three grid of hand-drawn SVG icons that each play their own animation on hover, keyboard focus or tap: a bell rings, a check draws, an arrow uploads.
Installation
Overview
An animated-icon features section for React with Base UI. A header and a hint sit above nine cells whose hairlines overshoot their corners. Each cell is a hand-drawn icon, its name and a line about how it moves: a bell that rings, a check that draws its ring and tick, an arrow that lifts off and drops back, a heart that pops and fills, a refresh arrow that turns, a letter that slides out, a switch that flips, a lens that sweeps and a signal whose bars dip in turn. They rest still and play when hovered, focused with the keyboard or tapped. The animations are SVG's own, started by a small handler, with no animation library. For icon sets, design systems and any product that shows off its micro-interactions.
FAQ
What starts an animation?
Hovering the cell, moving keyboard focus to it, or tapping it. Each cell is a button inside its h3, stretched over the whole cell, so a keyboard user can tab through all nine; Enter and Space replay it.
What happens with reduced motion?
Nothing plays. The handler checks prefers-reduced-motion and does nothing, so every icon stays at rest, which is its finished drawing. Nothing animates on load either.
How are the icons animated?
With SMIL, SVG's own animation elements (animate and animateTransform), set to begin on demand and started with beginElement(). There are no keyframes to install and no animation library. Each icon is its own small component.
How do I add my own icon?
Write a component that returns a Glyph containing your paths, add animate or animateTransform elements with begin="indefinite", then add an entry to ICONS. Keep the drawn state as the resting state, since that is what reduced-motion visitors see.
Related
- Pro
Dotted Corner Card Grid Features
Card gridsSix schematic cards for a diagramming tool, each a small line diagram of a queue, fan-out, funnel, retry loop, cache or gate with a dot travelling its path, in cells that end in corner marks.
- Pro
Borderless Compact Icon Grid Features
Card gridsA searchable directory of nine capabilities: a search field with a live count marks matches in a borderless 3 by 3 icon grid and quiets the rest, with an empty state when nothing matches.
- Pro
Floating Icon Sextet Features
Card gridsSix features of a cloud-storage app on a framed stage, each an icon tile floating at its own height in a wave that lifts on hover or focus, with a title, a sentence and a link under it.
- Pro
Keyboard Focus Grid Features
Live controlsA six-cell feature grid for a keyboard-first notes app: one focus ring glides between cells with the arrow keys, and Enter or a tap writes the cell's detail into a strip under the grid.
- Pro
Badge Counter Wall Features
Metrics and chartsA wall of eight channel counters for a unified inbox, with a two-button toggle that switches between every channel and only those with unread messages.
- Pro
Aspect Ratio Mockup Cards Features
Card gridsA six-cell report-type grid for a reporting tool: a trend line, a table, a funnel, a ranked list, a heat strip and a donut, each drawn on a 4:3 plate above its title and one sentence.