---
title: "Blend steps animated icon"
description: "Blend steps animated icon (Vector editing & design). The in-between step is generated from the circle. Light: the middle step slides back into the circle, turning round as it goes, the circle gulps it and kicks it back out, and it travels along the blend to its place, changing shape on the way, overshoots toward the square and settles. Strong: the circle kicks harder, the step flies further toward the square and swings back to its place in two decaying beats. The square never moves."
canonical: https://generativeicons.com/icons/blend-steps/
---

# Blend steps animated icon

The in-between step is generated from the circle. Light: the middle step slides back into the circle, turning round as it goes, the circle gulps it and kicks it back out, and it travels along the blend to its place, changing shape on the way, overshoots toward the square and settles. Strong: the circle kicks harder, the step flies further toward the square and swings back to its place in two decaying beats. The square never moves.

- Id: `blend-steps`
- Category: Vector editing & design
- Search terms: blend tool, blend shapes, shape blend, interpolate, interpolation, in-between, inbetweens, intermediate steps, shape transition, step count
- One action, back to rest
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/blend-steps.lottie (dotLottie, 4186 bytes, sha256 fa003e75b94b6a65165de4b3cfc08567be4a6a8c7dc0b6c9ab73319cc640c465)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add blend-steps
```

## React

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

export function BlendStepsIcon() {
  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/blend-steps.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.com/icons/blend-steps/ · https://generativeicons.com/api/icons/blend-steps