---
title: "Feature flag animated icon"
description: "Feature flag animated icon (Developer & version control). A feature flag is switched on. Light: the knob in the flag's toggle-shaped banner draws back a little, snaps across to the far end and stops with a hit, and the banner dips on the pole from the knock and springs back. Strong: the knob draws back further and slams across, rebounding off the end, and the banner swings and settles in two beats. Turning it off snaps the knob back to the pole end, and the banner lifts and settles."
canonical: https://generativeicons.com/icons/feature-flag/
---

# Feature flag animated icon

A feature flag is switched on. Light: the knob in the flag's toggle-shaped banner draws back a little, snaps across to the far end and stops with a hit, and the banner dips on the pole from the knock and springs back. Strong: the knob draws back further and slams across, rebounding off the end, and the banner swings and settles in two beats. Turning it off snaps the knob back to the pole end, and the banner lifts and settles.

- Id: `feature-flag`
- Category: Developer & version control
- Search terms: feature toggle, feature switch, release toggle, rollout, gradual rollout, ab test, experiment, kill switch, enable feature, beta, remote config
- Two states: off to on, 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/feature-flag.lottie (dotLottie, 5976 bytes, sha256 cd10a54e9afc8e4404d77675d5466340c88c483d773354d35636b324fa1b797e)
- License: MIT

## Install

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

## React

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

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