---
title: "Shape morph animated icon"
description: "Shape morph animated icon (Motion design). The circle becomes the target square through matching path points. Light: the source circle gives a little first, then the shape's points run out to the rounded square, snapping a touch past it and settling; the target square answers with a pulse as the match lands. Strong: after the source gives, the circle winds back (it pinches and counter-turns), then twists through as it morphs, overshooting both the turn and the corners before settling square, and the target answers harder. The preview reset fades it back."
canonical: https://generativeicons.lottiefiles.com/icons/shape-morph/
---

# Shape morph animated icon

The circle becomes the target square through matching path points. Light: the source circle gives a little first, then the shape's points run out to the rounded square, snapping a touch past it and settling; the target square answers with a pulse as the match lands. Strong: after the source gives, the circle winds back (it pinches and counter-turns), then twists through as it morphs, overshooting both the turn and the corners before settling square, and the target answers harder. The preview reset fades it back.

- Id: `shape-morph`
- Category: Motion design
- Search terms: morphing, tween, shape tween, path morph, circle to square, shapeshift, shape shift, change shape, reshape, metamorphosis
- Two states: prepared to result, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.lottiefiles.com/assets/shape-morph.lottie (dotLottie, 8617 bytes, sha256 aad159eaa7c64a0d15ea5c62641dd396dbd091c08a6bd1b2fe70a1eefa391ea0)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add shape-morph
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/shape-morph.mjs';

export function ShapeMorphIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/shape-morph.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.lottiefiles.com/icons/shape-morph/ · https://generativeicons.lottiefiles.com/api/icons/shape-morph