16 ícones · licença MIT

Ícones animados de clima

Sol, lua, nuvens, chuva, neve, raios e vento para previsões do tempo e tudo o que acompanha a hora do dia. O sol e a lua também formam um seletor natural entre modo claro e modo escuro.

Dos 16 ícones, 2 alternam entre dois estados no clique, 13 tocam uma vez no hover e 1 fica em loop durante o hover. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON, além de SVGs estáticos, e é gratuito para uso comercial sob a licença MIT.

Todos os ícones de clima

Onde usar

Widgets de clima e cards de previsão do tempo
Seletores de tema claro e escuro
Horários de nascer e pôr do sol em apps de viagem
Leituras de temperatura em dashboards de casa inteligente
Indicadores de energia e status de alimentação

Por interação

Ícones animados que alternam no clique · 2
Alterna entre dois estados no clique, ou troca na hora quando o usuário prefere movimento reduzido. Cloud Off, Zap Off.
Ícones animados que tocam no hover · 13
Toca uma vez no mouseenter, a menos que o usuário prefira movimento reduzido. Sair não interrompe a animação, e entrar durante a reprodução não a reinicia. Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap.
Ícones animados em loop no hover · 1
Fica em loop durante o hover, termina o ciclo atual depois do mouseleave e fica estático quando o usuário prefere movimento reduzido. Cloud.

Adicione um ao seu app

Com React, instale o react-useanimations e importe o ícone; ele executa a interação “Reproduzir no hover” sozinho. Todos os ícones desta categoria funcionam do mesmo jeito: troque sun pelo nome que aparece na página do ícone.

npm install react-useanimations

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

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

Com o shadcn/ui, a CLI adiciona um componente pronto:

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

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

<AnimatedSun size={24} />

Não usa React? Cada ícone é um arquivo Lottie JSON em /icons/<id>.json; veja em Ícones Lottie os players para web, iOS, Android e Flutter.

Perguntas frequentes

Quais ícones animados de clima estão incluídos?

16 ícones: Cloud, Cloud Drizzle, Cloud Lightning, Cloud Off, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer e mais 4. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.

Como uso estes ícones animados de clima no React?

Instale o react-useanimations, adicione import sun from 'react-useanimations/lib/sun' e renderize <UseAnimations animation={sun} size={32} />. O ícone executa a interação “Reproduzir no hover” e segue a cor do texto. Se você usa shadcn/ui, rode npx shadcn@latest add https://useanimations.com/r/sun.json.

Posso usar estes ícones animados de clima sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/sun.json), que pode ser reproduzido com lottie-web, lottie-ios, lottie-android ou o pacote lottie do Flutter; os SVGs estáticos ficam na página de cada ícone (em inglês). Nenhum deles usa expressões, então o build light do lottie-web é suficiente.