Saltar al contenido
ES

3 iconos · licencia MIT

Iconos animados de controles de formulario

Una casilla de verificación, un botón de opción y un interruptor que se animan entre los estados marcado y desmarcado. Úsalos donde un input normal se queda plano, como en checklists de onboarding y pantallas de ajustes, sin que el estado deje de leerse de un vistazo.

Los 3 iconos alternan entre dos estados al hacer clic. Cada uno se ofrece como componente de React, componente de shadcn/ui, animación Lottie JSON y SVG estático, gratis para uso comercial con la licencia MIT.

Todos los iconos de formularios

Dónde usarlos

  • Interruptores de ajustes para funciones y preferencias
  • Checklists de onboarding y listas de tareas
  • Opciones de respuesta única en encuestas y selectores de plan
  • Casillas de aceptación de términos y de consentimiento

Por interacción

Añade uno a tu app

Con React, instala react-useanimations e importa el icono; reproducirá por sí solo su interacción “Alternar con clic”. Todos los iconos de esta categoría funcionan igual: cambia checkBox por el nombre que aparece en la página de cada uno.

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

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

Con shadcn/ui, la CLI añade un componente listo para usar:

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

<AnimatedCheckBox size={24} />

¿No usas React? Cada icono es un archivo Lottie JSON en /icons/<id>.json; en Iconos Lottie encontrarás reproductores para web, iOS, Android y Flutter.

Preguntas frecuentes

¿Qué iconos animados de controles de formulario se incluyen?

3 iconos: Checkbox, Radio button y Toggle. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de controles de formulario en React?

Instala react-useanimations, añade import checkBox from 'react-useanimations/lib/checkBox' y renderiza <UseAnimations animation={checkBox} size={32} />. El icono reproduce su interacción “Alternar con clic” y sigue el color del texto. Con shadcn/ui, ejecuta en su lugar npx shadcn@latest add https://useanimations.com/r/check-box.json.

¿Puedo usar estos iconos animados de controles de formulario sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/check-box.json) que se reproduce con lottie-web, lottie-ios, lottie-android o el paquete lottie de Flutter; los SVG estáticos están en la página de cada icono (en inglés). Ninguno usa expresiones, así que basta con la versión ligera de lottie-web.