Copy to clipboard
The most repeated swap in real apps: Copy settles into Check.
npm i morphicons
Showcase
The icon swaps real shadcn/ui apps use most, as morphs. Pick a library, tune the spring, copy the component for your framework.
- Why this path
- Inline SVG from icon data, exact on first paint, accessible by default. The default way to ship a morph, and the lightest.
- What it weighs
- About 10 KB gzip with a framework binding and zero runtime dependencies. Subpath exports: you only pay for what you import.
- The tradeoff
- Filled icons need a 5.4 KB chunk, fetched the first time one shows up. Until it lands they render close to exact, and a morph may fall back to a shrink-and-grow.
Password visibility
Eye to EyeOff on the input's trailing button.
Theme toggle
Sun to Moon in one slot: no double SVG, no CSS swap.
Player controls
Play and pause, plus mute on the same cluster.
ambient-01.wav3:42
Inline validation
The trailing icon tracks the field: Check when valid, X when not.
File tree
Folders morph open; the disclosure chevron stays CSS.
- button.tsx
- input.tsx
- toggle.tsx