---
title: "Thumbnail animated icon"
description: "Thumbnail animated icon (Video editing). A frame is picked for the thumbnail. Light: the picture scrubs: the scene (mountains and sun) slides out to the left and fades while the next frame slides in from the right, lands with a hard stop and a small knock, and stays (the two scenes cross-fade, so the card is never empty). Strong: the scene leans the other way first, the scrub is faster and longer, the new frame knocks twice, and the card clicks (a quick squeeze) as the frame is set. The rest pose is the v1 drawing."
canonical: https://generativeicons.com/icons/thumbnail/
---

# Thumbnail animated icon

A frame is picked for the thumbnail. Light: the picture scrubs: the scene (mountains and sun) slides out to the left and fades while the next frame slides in from the right, lands with a hard stop and a small knock, and stays (the two scenes cross-fade, so the card is never empty). Strong: the scene leans the other way first, the scrub is faster and longer, the new frame knocks twice, and the card clicks (a quick squeeze) as the frame is set. The rest pose is the v1 drawing.

- Id: `thumbnail`
- Category: Video editing
- Search terms: cover image, cover photo, video cover, poster frame, poster, still frame, preview image, preview frame, frame grab, video preview
- One action, back to rest
- 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/thumbnail.lottie (dotLottie, 4324 bytes, sha256 ce8644cab91e44f8f47c8d6bfdbaabee5649895289665e66090f164c522737f8)
- License: MIT

## Install

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

## React

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

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