Skip to content

3 icons · MIT licensed

Animated form control icons

A checkbox, a radio button and a toggle switch that animate between their checked and unchecked states. Use them where a plain input feels flat, such as onboarding checklists and settings screens, while keeping the state readable at a glance.

All 3 icons toggle between two states on click. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.

All form icons

Where to use them

  • Settings switches for features and preferences
  • Onboarding and to-do checklists
  • Single-choice options in surveys and plan pickers
  • Terms and consent checkboxes

By interaction

  • Click-to-toggle animated icons · 3

    Toggles between two states on click, or switches immediately when reduced motion is preferred. Checkbox, Radio button, Toggle.

Add one to your app

With React, install react-useanimations and import the icon; it plays its click toggle interaction on its own. Every icon in this category works the same way: swap checkBox for the name on its page.

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

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

With shadcn/ui, the CLI adds a ready-made component:

npx shadcn@latest add https://useanimations.com/r/check-box.json
import { AnimatedCheckBox } from '@/components/animations/check-box';

<AnimatedCheckBox size={24} />

Not using React? Each icon is a Lottie JSON file at /icons/<id>.json; see Lottie icons for web, iOS, Android and Flutter players.

FAQ

Which animated form control icons are included?

3 icons: Checkbox, Radio button and Toggle. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated form control icons in React?

Install react-useanimations, add import checkBox from 'react-useanimations/lib/checkBox' and render <UseAnimations animation={checkBox} size={32} />. The icon plays its click toggle interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/check-box.json instead.

Can I use these animated form control icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/check-box.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.