IconMorph

Icon with blur-crossfade morph animation between icon changes. Drop-in replacement for Icon when you need animated transitions. The icon stays in place while crossfading with a blur effect.

Usage

import { IconMorph, IconMorphProps } from "@desk/ui/components/icon-morph";

Best practices

Change morphKey whenever icon changes (e.g. play↔pause) — the crossfade is keyed off it, so a stale key swaps the new glyph in with no morph.
Use it as the animated drop-in for Icon; for a plain static glyph stay on Icon and skip the extra AnimatePresence/motion cost.
Needs ReducedMotionProvider for the blur-crossfade to run and honour reduced motion; like Icon it renders aria-hidden, so name the control elsewhere.

Props

Prop	Type	Description
enterDuration	`number`	Duration for enter animation in seconds. Defaults to `durations.normal`.
enterEasing	`EasingValue`	Easing for enter animation. Accepts named preset or bezier tuple. Defaults to `easings.customGentle`.
exitDuration	`number`	Duration for exit animation in seconds. Defaults to `durations.quick`.
exitEasing	`EasingValue`	Easing for exit animation. Accepts named preset or bezier tuple. Defaults to `easings.customIn`.
icon(required)	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`	Icon component from lucide-react or any SVG React component.
morphKey(required)	`string`	Unique key to trigger morph animation when icon changes.
size	`IconSize`	Size scale for icons. Defaults to `base` (20px).

Also exports

interfaceIconMorphProps

Composition

Builds on

Icon

Used by

ThinkingLoader