Back to Dictionary
Action Feedback
●●○Customize
Morphing SVG Icon
A seamless vertex-to-vertex transformation between two distinct icons (e.g., Play -> Pause, Menu -> Close), fluidly shifting shapes rather than just a hard cut swap.
Live Demo
What It Is
A seamless vertex-to-vertex transformation between two distinct icons (e.g., Play -> Pause, Menu -> Close), fluidly shifting shapes rather than just a hard cut swap.
✓When to Use
- Media players
- Hamburger menus
- Interactive toggle buttons
✕When NOT to Use
- When icons have drastically different structural nodes that result in chaotic spaghetti morphs
Configuration Tips
- 01Ensure SVG paths have the same number of data points, or rely on Framer Motion's powerful cross-morph capabilities for simpler SVGs.
You've Seen It In
YouTube AppSpotify UIMaterial Navigation
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Use framer-motion to animate an SVG path 'd' attribute smoothly from a play triangle to two vertical pause bars.
Code Example (Tailwind CSS)
export function MorphingSvgIconDemo() {}