16 iconos · licencia MIT

Iconos animados del clima

Sol, luna, nubes, lluvia, nieve, rayos y viento para pronósticos y para todo lo que siga la hora del día. El sol y la luna también funcionan como un interruptor natural entre modo claro y modo oscuro.

De los 16 iconos, 2 alternan entre dos estados al hacer clic, 13 se reproducen una vez con hover y 1 se repite en bucle mientras el cursor está encima. 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 clima

Dónde usarlos

Widgets del tiempo y tarjetas de pronóstico
Interruptores entre tema claro y tema oscuro
Horas de amanecer y atardecer en apps de viajes
Lecturas de temperatura en paneles de casa inteligente
Indicadores de energía y de estado de alimentación

Por interacción

Iconos animados que alternan con un clic · 2
Alterna entre dos estados al hacer clic, o cambia de inmediato si se prefiere movimiento reducido. Cloud Off, Zap Off.
Iconos animados que se reproducen con hover · 13
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. Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap.
Iconos animados en bucle con hover · 1
Se repite en bucle durante el hover, termina el ciclo en curso tras mouseleave y se queda estático si se prefiere movimiento reducido. Cloud.

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 sun por el nombre que aparece en la página de cada uno.

npm install react-useanimations

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

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

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

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

import { AnimatedSun } from '@/components/animations/sun';

<AnimatedSun 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 del clima se incluyen?

16 iconos: Cloud, Cloud Drizzle, Cloud Lightning, Cloud Off, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer y 4 más. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados del clima en React?

Instala react-useanimations, añade import sun from 'react-useanimations/lib/sun' y renderiza <UseAnimations animation={sun} 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/sun.json.

¿Puedo usar estos iconos animados del clima sin React?

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