---
title: "Reverse clip animated icon"
description: "Reverse clip animated icon (Video editing). The clip now plays backwards. Light: the play mark flips through its axis to point left with a hard stop, then kicks backward 1.6 units with two speed streaks trailing behind it on the right, and eases back to its place as the streaks fade. Strong: it stretches forward first, snaps through past the mirror and settles, kicks back farther with longer streaks, overshoots its place and settles. It stays pointing left. The reverse flips it forward again and it kicks forward once, without streaks. The clip frame never moves."
canonical: https://generativeicons.com/icons/reverse-clip/
---

# Reverse clip animated icon

The clip now plays backwards. Light: the play mark flips through its axis to point left with a hard stop, then kicks backward 1.6 units with two speed streaks trailing behind it on the right, and eases back to its place as the streaks fade. Strong: it stretches forward first, snaps through past the mirror and settles, kicks back farther with longer streaks, overshoots its place and settles. It stays pointing left. The reverse flips it forward again and it kicks forward once, without streaks. The clip frame never moves.

- Id: `reverse-clip`
- Category: Video editing
- Search terms: play backwards, backwards, backward, reverse video, reverse playback, play in reverse, rewind, reversed
- Two states: forward to reversed, 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/reverse-clip.lottie (dotLottie, 7065 bytes, sha256 b6e9f0e9dbfd75c58eb3b729ff64cf68f1ea2f2315c7a2b044e8ad05a250ef4d)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add reverse-clip
```

## React

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

export function ReverseClipIcon() {
  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/reverse-clip.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/reverse-clip/ · https://generativeicons.com/api/icons/reverse-clip