Skip to content
Click to toggle
Interaction
Click toggle
Duration
0.33 s
Artboard
32 × 32 px
Lottie size
5.5 kB

Settings V2

Toggles between two states on click, or switches immediately when reduced motion is preferred. Free under the MIT license.

actioncoggearpreferencessettingssliders
Download ZIPLottie JSONSVG

React

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import settings2 from 'react-useanimations/lib/settings2';

<UseAnimations animation={settings2} size={32} />

shadcn/ui

npx shadcn@latest add https://useanimations.com/r/settings-v2.json
import { AnimatedSettingsV2 } from '@/components/animations/settings-v2';

<AnimatedSettingsV2 size={24} />

Files

https://useanimations.com/icons/settings-v2.json  # Lottie JSON
https://useanimations.com/icons/settings-v2.zip   # Lottie JSON + static SVGs

The animation as Lottie JSON and a ZIP with it and the SVGs. See Files & icons.json.

Static SVG

sliders.svg

More in Action