16 icon · Giấy phép MIT

Icon thời tiết động

Mặt trời, mặt trăng, mây, mưa, tuyết, sấm sét và gió cho dự báo thời tiết và mọi thứ thay đổi theo thời điểm trong ngày. Cặp mặt trời và mặt trăng cũng là lựa chọn tự nhiên cho nút chuyển giao diện sáng/tối.

Trong 16 icon, 2 icon chuyển giữa hai trạng thái khi click, 13 icon phát một lần khi hover và 1 icon lặp khi được hover. Mỗi icon có sẵn dưới dạng React component, component shadcn/ui và animation Lottie JSON, kèm SVG tĩnh, dùng miễn phí cả cho mục đích thương mại theo giấy phép MIT.

Tất cả icon thời tiết

Dùng ở đâu

Widget thời tiết và thẻ dự báo
Nút chuyển giao diện sáng và tối
Giờ mặt trời mọc và lặn trong ứng dụng du lịch
Chỉ số nhiệt độ trên dashboard nhà thông minh
Chỉ báo trạng thái năng lượng và nguồn điện

Theo tương tác

Icon động bật/tắt khi click · 2
Chuyển giữa hai trạng thái khi click, hoặc chuyển ngay lập tức khi người dùng bật giảm chuyển động. Cloud Off, Zap Off.
Icon động phát khi hover · 13
Phát một lần khi con trỏ đi vào (mouseenter), trừ khi người dùng bật giảm chuyển động. Rời chuột không làm hiệu ứng dừng; hover lại trong lúc đang phát cũng không khởi động lại. Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap.
Icon động lặp khi hover · 1
Lặp khi đang hover, chạy nốt chu kỳ hiện tại sau khi con trỏ rời đi (mouseleave) và đứng yên khi người dùng bật giảm chuyển động. Cloud.

Thêm vào ứng dụng của bạn

Với React, hãy cài react-useanimations rồi import icon; icon sẽ tự chạy tương tác “Hover phát lại” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay sun bằng tên ghi trên trang của icon đó.

npm install react-useanimations

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

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

Với shadcn/ui, CLI sẽ thêm sẵn một component:

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

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

<AnimatedSun size={24} />

Không dùng React? Mỗi icon là một tệp Lottie JSON tại /icons/<id>.json; xem Icon Lottie để biết các player cho web, iOS, Android và Flutter.

Câu hỏi thường gặp

Bộ icon thời tiết động gồm những icon nào?

16 icon: Cloud, Cloud Drizzle, Cloud Lightning, Cloud Off, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer và 4 icon khác. Tất cả đều miễn phí cho dự án cá nhân và thương mại theo giấy phép MIT, không bắt buộc ghi nguồn.

Dùng các icon thời tiết động này trong React như thế nào?

Cài react-useanimations, thêm import sun from 'react-useanimations/lib/sun' rồi render <UseAnimations animation={sun} size={32} />. Icon sẽ chạy tương tác “Hover phát lại” của nó và tự lấy theo màu chữ. Nếu dùng shadcn/ui, hãy chạy npx shadcn@latest add https://useanimations.com/r/sun.json.

Có dùng được các icon thời tiết động này mà không cần React không?

Được. Mỗi icon là một tệp Lottie JSON tại https://useanimations.com/icons/<id>.json (ví dụ https://useanimations.com/icons/sun.json), phát được bằng lottie-web, lottie-ios, lottie-android hoặc package lottie của Flutter; SVG tĩnh có trên trang riêng của từng icon (bằng tiếng Anh). Không icon nào dùng expression, nên bản rút gọn (light) của lottie-web là đủ.