---
title: "Video filter animated icon"
description: "Video filter animated icon (Video editing). The filter is applied across the frame. Light: the wipe sweeps 14 units to the right, accelerating, with the filtered region following it, stops dead at the far side with a small knock and seats; a sparkle twinkles on in the filtered picture as the wipe lands and fades. Strong: the wipe pulls back first, sweeps hard, settles in two decaying beats, and the sparkle pops bigger. The frame stays filtered. The reverse sweeps the wipe back and the region shrinks with it, knocking once on arrival."
canonical: https://generativeicons.com/icons/video-filter/
---

# Video filter animated icon

The filter is applied across the frame. Light: the wipe sweeps 14 units to the right, accelerating, with the filtered region following it, stops dead at the far side with a small knock and seats; a sparkle twinkles on in the filtered picture as the wipe lands and fades. Strong: the wipe pulls back first, sweeps hard, settles in two decaying beats, and the sparkle pops bigger. The frame stays filtered. The reverse sweeps the wipe back and the region shrinks with it, knocking once on arrival.

- Id: `video-filter`
- Category: Video editing
- Search terms: effects, video effects, fx, color grading, colour grading, lut, preset, tint, apply effect
- Two states: original to filtered, 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/video-filter.lottie (dotLottie, 7451 bytes, sha256 f297a3db5aced21cbd80ad03e6b7a2390b5fc598e5215142777e7bf62a30481b)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add video-filter
```

## React

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

export function VideoFilterIcon() {
  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/video-filter.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/video-filter/ · https://generativeicons.com/api/icons/video-filter