---
title: "Trim clip animated icon"
description: "Trim clip animated icon (Video editing). The clip is trimmed. Light: the trim handle cuts 7 units into the clip and stops dead with a small knock, and the 7-unit offcut it leaves behind tips off its cut edge, falls away and fades. Strong: the handle takes a short backswing, cuts in hard and settles in two beats, and the offcut tumbles farther. The clip stays trimmed. The reverse brings the offcut back up into place, then the handle drags the clip back out to full length."
canonical: https://generativeicons.com/icons/trim-clip/
---

# Trim clip animated icon

The clip is trimmed. Light: the trim handle cuts 7 units into the clip and stops dead with a small knock, and the 7-unit offcut it leaves behind tips off its cut edge, falls away and fades. Strong: the handle takes a short backswing, cuts in hard and settles in two beats, and the offcut tumbles farther. The clip stays trimmed. The reverse brings the offcut back up into place, then the handle drags the clip back out to full length.

- Id: `trim-clip`
- Category: Video editing
- Search terms: trim video, trim footage, shorten, shorten video, clip length, cut ends, trim handle, in out points, cut length
- Two states: full to trimmed, 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/trim-clip.lottie (dotLottie, 6532 bytes, sha256 77c660fdb26373b97512041d2b3b1beae19aafdb10f34f1b963d5646c8105c07)
- License: MIT

## Install

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

## React

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

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