16 ikon · Berlisensi MIT

Ikon animasi cuaca

Matahari, bulan, awan, hujan, salju, petir, dan angin untuk prakiraan cuaca dan apa pun yang mengikuti waktu dalam sehari. Matahari dan bulan juga pas sebagai sakelar light mode dan dark mode.

Dari 16 ikon di kategori ini, 2 beralih antara dua keadaan saat diklik, 13 diputar sekali saat di-hover, dan 1 berputar berulang selama di-hover. Setiap ikon tersedia sebagai komponen React, komponen shadcn/ui, dan animasi Lottie JSON, lengkap dengan SVG statis. Semuanya gratis untuk penggunaan komersial di bawah lisensi MIT.

Semua ikon cuaca

Tempat memakainya

Widget cuaca dan kartu prakiraan
Sakelar tema terang dan gelap
Waktu matahari terbit dan terbenam di aplikasi perjalanan
Pembacaan suhu di dashboard rumah pintar
Indikator status energi dan daya

Berdasarkan interaksi

Ikon animasi toggle saat diklik · 2
Beralih antara dua keadaan saat diklik, atau langsung berpindah jika reduced motion dipilih. Cloud Off, Zap Off.
Ikon animasi yang diputar saat hover · 13
Diputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang. Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap.
Ikon animasi loop saat hover · 1
Berputar berulang selama di-hover, menyelesaikan siklusnya setelah mouseleave, dan tetap diam jika reduced motion dipilih. Cloud.

Tambahkan ke aplikasi Anda

Di React, instal react-useanimations lalu import ikonnya; ikon langsung menjalankan interaksi putar sekali saat hover bawaannya. Semua ikon di kategori ini bekerja dengan cara yang sama: ganti sun dengan nama yang tertera di halaman ikonnya.

npm install react-useanimations

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

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

Dengan shadcn/ui, CLI-nya menambahkan komponen siap pakai:

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

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

<AnimatedSun size={24} />

Tidak memakai React? Setiap ikon adalah file Lottie JSON di /icons/<id>.json; lihat Ikon Lottie untuk player web, iOS, Android, dan Flutter.

FAQ

Ikon animasi cuaca apa saja yang tersedia?

16 ikon: Cloud, Cloud Drizzle, Cloud Lightning, Cloud Off, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, dan 4 lainnya. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi cuaca ini di React?

Instal react-useanimations, tambahkan import sun from 'react-useanimations/lib/sun', lalu render <UseAnimations animation={sun} size={32} />. Ikon menjalankan interaksi putar sekali saat hover bawaannya dan mengikuti warna teks. Jika memakai shadcn/ui, jalankan npx shadcn@latest add https://useanimations.com/r/sun.json sebagai gantinya.

Bisakah ikon animasi cuaca ini dipakai tanpa React?

Bisa. Setiap ikon adalah file Lottie JSON di https://useanimations.com/icons/<id>.json (misalnya https://useanimations.com/icons/sun.json) yang bisa diputar dengan lottie-web, lottie-ios, lottie-android, atau paket lottie untuk Flutter; SVG statis tersedia di halaman masing-masing ikon (halaman ikon hanya dalam bahasa Inggris). Tidak ada yang memakai expression, jadi build ringan lottie-web sudah cukup.