---
title: "Aperture animated icon"
description: "Aperture animated icon (Photos & camera). Open to stopped down: the six blades sweep in together and close the iris to a small opening, like an aperture ring clicking to a smaller f-stop. Light: one decisive close that stops dead on the stop, bounces open a little off it and settles. Strong: the iris stops down in two clicks, half way and then fully, each landing with a bounce, the second harder. The ring never moves. Reverse opens the blades again."
canonical: https://generativeicons.com/icons/aperture/
---

# Aperture animated icon

Open to stopped down: the six blades sweep in together and close the iris to a small opening, like an aperture ring clicking to a smaller f-stop. Light: one decisive close that stops dead on the stop, bounces open a little off it and settles. Strong: the iris stops down in two clicks, half way and then fully, each landing with a bounce, the second harder. The ring never moves. Reverse opens the blades again.

- Id: `aperture`
- Category: Photos & camera
- Search terms: iris, f-stop, f stop, f number, shutter, lens, camera lens, diaphragm, depth of field, photography, dslr
- Two states: open to stopped, 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/aperture.lottie (dotLottie, 8153 bytes, sha256 3971f90a2a17a3ae6b61d1f4a317a67fe1fa0f50406acada40ff3627d943a47c)
- License: MIT

## Install

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

## React

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

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