shadcn.io is not affiliated with official shadcn/ui
Animated Icons Features Block for Svelte
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 Svelte with Ark 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.