12 iconos · licencia MIT

Iconos animados de dispositivos

Teléfonos, tabletas, monitores, relojes e impresoras, además de los indicadores de conexión que los rodean: wifi, Bluetooth y batería. Sirven para selectores de dispositivo, conmutadores de vista previa responsive y estado de conectividad.

De los 12 iconos, 1 alterna entre dos estados al hacer clic, 1 se repite con cada clic y 10 se reproducen una vez con hover. 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 dispositivos

Dónde usarlos

Conmutadores de vista previa responsive para móvil, tableta y escritorio
Estado de la conexión wifi y Bluetooth
Indicadores de batería y de carga
Listas de dispositivos en los ajustes de seguridad de la cuenta
Botones de imprimir en facturas e informes

Por interacción

Iconos animados que alternan con un clic · 1
Alterna entre dos estados al hacer clic, o cambia de inmediato si se prefiere movimiento reducido. Wifi Off.
Iconos animados al hacer clic · 1
Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido. Printer.
Iconos animados que se reproducen con hover · 10
Se reproduce una vez con mouseenter, salvo que se prefiera movimiento reducido. Salir no lo detiene, y volver a entrar durante la reproducción no lo reinicia. Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi.

Añade uno a tu app

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

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import wifi from 'react-useanimations/lib/wifi';

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

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

npx shadcn@latest add https://useanimations.com/r/wifi.json

import { AnimatedWifi } from '@/components/animations/wifi';

<AnimatedWifi 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 dispositivos se incluyen?

12 iconos: Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Printer, Smartphone, Tablet, Watch, WiFi y Wifi Off. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

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

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

¿Puedo usar estos iconos animados de dispositivos sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/wifi.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.