---
title: "Saturation animated icon"
description: "Saturation animated icon (Photos & camera). Low to high: colour is added and the saturation rises. Light: a drop of colour forms under the tip, falls through the drop and lands in the colour; on contact the level rises from a fifth to just above half in one decisive fill while the surface sloshes and settles level. Strong: two drops land in turn and the level climbs in two clicks that stop dead, each landing sloshing the surface harder. The level never overshoots and the drop never moves. Reverse drains the colour back down with a small slosh as it lands."
canonical: https://generativeicons.com/icons/saturation/
---

# Saturation animated icon

Low to high: colour is added and the saturation rises. Light: a drop of colour forms under the tip, falls through the drop and lands in the colour; on contact the level rises from a fifth to just above half in one decisive fill while the surface sloshes and settles level. Strong: two drops land in turn and the level climbs in two clicks that stop dead, each landing sloshing the surface harder. The level never overshoots and the drop never moves. Reverse drains the colour back down with a small slosh as it lands.

- Id: `saturation`
- Category: Photos & camera
- Search terms: vibrance, vibrancy, color intensity, colour intensity, chroma, saturate, desaturate, vivid, color boost, colour boost
- Two states: low to high, 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/saturation.lottie (dotLottie, 7439 bytes, sha256 08e48212e34e94924e603d7eb92b9a7437f58f95e37269ecd7b8aa5b93040361)
- License: MIT

## Install

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

## React

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

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