morphing-icons

Every icon is composed of exactly three SVG lines. Icons that need fewer lines collapse the extras to invisible center points. This constraint enables seamless morphing between any two icons.

1. Line Definition

Each line has coordinates and optional opacity:

```ts

interface IconLine {

x1: number;

y1: number;

x2: number;

y2: number;

opacity?: number;

}

```

2. Collapsed Lines

Icons needing fewer than 3 lines use collapsed lines—zero-length lines at the center:

```ts

const CENTER = 7; // Center of 14x14 viewbox

const collapsed: IconLine = {

x1: CENTER,

y1: CENTER,

x2: CENTER,

y2: CENTER,

opacity: 0,

};

```

3. Icon Definition

Each icon has exactly 3 lines, optional rotation, and optional group:

```ts

interface IconDefinition {

lines: [IconLine, IconLine, IconLine];

rotation?: number;

group?: string;

}

```

4. Rotation Groups

Icons sharing a group animate rotation when transitioning between them. Icons without matching groups jump to the new rotation instantly:

```ts

// These rotate smoothly between each other

{ lines: plusLines, rotation: 0, group: "plus-cross" } // plus

{ lines: plusLines, rotation: 45, group: "plus-cross" } // cross

// These rotate smoothly between each other

{ lines: arrowLines, rotation: 0, group: "arrow" } // arrow-right

{ lines: arrowLines, rotation: 90, group: "arrow" } // arrow-down

{ lines: arrowLines, rotation: 180, group: "arrow" } // arrow-left

{ lines: arrowLines, rotation: -90, group: "arrow" } // arrow-up

```

`morphing-three-lines`

Every icon MUST use exactly 3 lines. No more, no fewer.

Fail:

```ts

const checkIcon = {

lines: [

{ x1: 2, y1: 7.5, x2: 5.5, y2: 11 },

{ x1: 5.5, y1: 11, x2: 12, y2: 3 },

], // Only 2 lines

};

```

Pass:

```ts

const checkIcon = {

lines: [

{ x1: 2, y1: 7.5, x2: 5.5, y2: 11 },

{ x1: 5.5, y1: 11, x2: 12, y2: 3 },

collapsed, // Third line collapsed

],

};

```

`morphing-use-collapsed`

Unused lines must use the collapsed constant, not omission or null.

Fail:

```ts

const minusIcon = {

lines: [

{ x1: 2, y1: 7, x2: 12, y2: 7 },

null,

null,

],

};

```

Pass:

```ts

const minusIcon = {

lines: [

{ x1: 2, y1: 7, x2: 12, y2: 7 },

collapsed,

collapsed,

],

};

```

`morphing-consistent-viewbox`

All icons must use the same viewBox (14x14 recommended).

Fail:

```ts

// Mixing viewbox scales

const icon1 = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] }; // 14x14

const icon2 = { lines: [{ x1: 4, y1: 14, x2: 24, y2: 14 }, ...] }; // 28x28

```

Pass:

```ts

const VIEWBOX_SIZE = 14;

const CENTER = 7;

// All coordinates within 0-14 range

```

`morphing-group-variants`

Icons that are rotational variants MUST share the same group and base lines.

Fail:

```ts

// Different line definitions for arrows

const arrowRight = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] };

const arrowDown = { lines: [{ x1: 7, y1: 2, x2: 7, y2: 12 }, ...] }; // Different!

```

Pass:

```ts

const arrowLines: [IconLine, IconLine, IconLine] = [

{ x1: 2, y1: 7, x2: 12, y2: 7 },

{ x1: 7.5, y1: 2.5, x2: 12, y2: 7 },

{ x1: 7.5, y1: 11.5, x2: 12, y2: 7 },

];

const icons = {

"arrow-right": { lines: arrowLines, rotation: 0, group: "arrow" },

"arrow-down": { lines: arrowLines, rotation: 90, group: "arrow" },

"arrow-left": { lines: arrowLines, rotation: 180, group: "arrow" },

"arrow-up": { lines: arrowLines, rotation: -90, group: "arrow" },

};

```

`morphing-spring-rotation`

Rotation between grouped icons should use spring physics for natural motion.

Fail:

```tsx

```

Pass:

```tsx

const rotation = useSpring(definition.rotation ?? 0, activeTransition);

```

`morphing-reduced-motion`

Respect prefers-reduced-motion by disabling animations.

Fail:

```tsx

function MorphingIcon({ icon }: Props) {

return ;

}

```

Pass:

```tsx

function MorphingIcon({ icon }: Props) {

const reducedMotion = useReducedMotion() ?? false;

const activeTransition = reducedMotion ? { duration: 0 } : transition;

return ;

}

```

`morphing-jump-non-grouped`

When transitioning between icons NOT in the same group, rotation should jump instantly.

Fail:

```tsx

// Always animating rotation regardless of group

useEffect(() => {

rotation.set(definition.rotation ?? 0);

}, [definition]);

```

Pass:

```tsx

useEffect(() => {

if (shouldRotate) {

rotation.set(definition.rotation ?? 0); // Animate

} else {

rotation.jump(definition.rotation ?? 0); // Instant

}

}, [definition, shouldRotate]);

```

`morphing-strokelinecap-round`

Lines should use strokeLinecap="round" for polished endpoints.

Fail:

```tsx

```

Pass:

```tsx

```

`morphing-aria-hidden`

Icon SVGs should be aria-hidden since they're decorative.

Fail:

```tsx

```

Pass:

```tsx

```

Two-Line Icons (check, minus, equals, chevron)

Use one or two collapsed lines:

```ts

const check = {

lines: [

{ x1: 2, y1: 7.5, x2: 5.5, y2: 11 },

{ x1: 5.5, y1: 11, x2: 12, y2: 3 },

collapsed,

],

};

```

Three-Line Icons (menu, asterisk, play)

Use all three lines:

```ts

const menu = {

lines: [

{ x1: 2, y1: 3.5, x2: 12, y2: 3.5 },

{ x1: 2, y1: 7, x2: 12, y2: 7 },

{ x1: 2, y1: 10.5, x2: 12, y2: 10.5 },

],

};

```

Point Icons (more, grip)

Use zero-length lines as dots:

```ts

const more = {

lines: [

{ x1: 3, y1: 7, x2: 3, y2: 7 },

{ x1: 7, y1: 7, x2: 7, y2: 7 },

{ x1: 11, y1: 7, x2: 11, y2: 7 },

],

};

```

Use exponential ease-out for smooth morphing:

```ts

const defaultTransition: Transition = {

ease: [0.19, 1, 0.22, 1],

duration: 0.4,

};

```

When auditing morphing icon implementations, output findings as:

```

file:line - [rule-id] description of issue

Example:

components/icon/index.tsx:45 - [morphing-three-lines] Icon "check" has only 2 lines, needs collapsed third

components/icon/index.tsx:78 - [morphing-group-variants] arrow-down uses different line definitions than arrow-right

```

After findings, output a summary:

| Rule | Count | Severity |

|------|-------|----------|

| morphing-three-lines | 2 | HIGH |

| morphing-group-variants | 1 | HIGH |

| morphing-reduced-motion | 1 | MEDIUM |

• [Benji's experiments with Claude](https://benji.org/morphing-icons-with-claude)
• [Motion useSpring](https://motion.dev/docs/react-use-spring)
• [SVG Line Element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line)