---
title: "Exposure animated icon"
description: "Exposure animated icon (Photos & camera). Exposure goes up a stop. Light: the light side grows: the divider clicks a full stop toward the minus corner, pushing the shadow back, bounces a little off the stop and holds, then the exposure eases back. Strong: two clicks, each landing with a bounce, the second deeper into the corner than Light's one, before it eases back. The divider's ends stay on the frame the whole way; the frame, plus and minus never move."
canonical: https://generativeicons.com/icons/exposure/
---

# Exposure animated icon

Exposure goes up a stop. Light: the light side grows: the divider clicks a full stop toward the minus corner, pushing the shadow back, bounces a little off the stop and holds, then the exposure eases back. Strong: two clicks, each landing with a bounce, the second deeper into the corner than Light's one, before it eases back. The divider's ends stay on the frame the whole way; the frame, plus and minus never move.

- Id: `exposure`
- Category: Photos & camera
- Search terms: ev, exposure compensation, exposure value, overexposed, underexposed, plus minus, lighten, darken, iso, shutter speed
- 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/exposure.lottie (dotLottie, 5262 bytes, sha256 8241abe015df8e10462f8d954354ffbea30c4ea08b7965fef482f7c84a29aa49)
- License: MIT

## Install

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

## React

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

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