---
title: "Barge in animated icon"
description: "Barge in animated icon (Voice agents). Caller speech enters beneath the speaking agent. The incoming arrow reaches the agent bubble and its output bars stop. Strong briefly raises the output before cutting it off. Reverse releases the interruption and restores speech."
canonical: https://generativeicons.com/icons/barge-in/
---

# Barge in animated icon

Caller speech enters beneath the speaking agent. The incoming arrow reaches the agent bubble and its output bars stop. Strong briefly raises the output before cutting it off. Reverse releases the interruption and restores speech.

- Id: `barge-in`
- Category: Voice agents
- Search terms: interrupt, interruption, cut in, cut off, talk over, speak over, interrupt agent, stop talking, user interrupt, overlapping speech
- Two states: Agent speaking to Caller interrupted, 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/barge-in.lottie (dotLottie, 17439 bytes, sha256 12a051a7c9b296d24e9498d0bba181b3ef53c49a63557632d8bc02ad472c5ba5)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add barge-in
```

## React

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

export function BargeInIcon() {
  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/barge-in.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/barge-in/ · https://generativeicons.com/api/icons/barge-in