---
title: "Turn taking animated icon"
description: "Turn taking animated icon (Voice agents). The caller yields the floor and the agent takes it. Light: the floor token hops up inside the caller's bubble, swells and drops out through its bottom, falls on a curve into the agent's bubble, landing with a hit; the agent's bubble pops as it takes the floor and settles. Strong: the token gathers higher, the caller's bubble recoils as it lets go, the token lands with a bounce, and the agent's bubble pops harder. Reverse: the token is tossed back up into the caller's bubble, which pops as it takes the floor again."
canonical: https://generativeicons.com/icons/turn-taking/
---

# Turn taking animated icon

The caller yields the floor and the agent takes it. Light: the floor token hops up inside the caller's bubble, swells and drops out through its bottom, falls on a curve into the agent's bubble, landing with a hit; the agent's bubble pops as it takes the floor and settles. Strong: the token gathers higher, the caller's bubble recoils as it lets go, the token lands with a bounce, and the agent's bubble pops harder. Reverse: the token is tossed back up into the caller's bubble, which pops as it takes the floor again.

- Id: `turn-taking`
- Category: Voice agents
- Search terms: take turns, your turn, my turn, back and forth, conversation flow, dialogue, dialog, speaking order, pass the floor, floor control
- Two states: caller-turn to agent-turn, 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.com/assets/turn-taking.lottie (dotLottie, 9095 bytes, sha256 2ab990c63b067f66f738a27c4ee3329e28aca62389c7fc4c4941866a2fbe45fc)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add turn-taking
```

## React

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

export function TurnTakingIcon() {
  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/turn-taking.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/turn-taking/ · https://generativeicons.com/api/icons/turn-taking