English16 个图标 · MIT 许可
天气动态图标
太阳、月亮、云、雨、雪、闪电和风，适用于天气预报以及一切随时间变化的内容。太阳和月亮也很适合用作浅色/深色模式切换。
这 16 个图标中，2 个点击时在两种状态之间切换，13 个悬停时播放一次，1 个悬停期间循环播放。每个图标都提供 React 组件、shadcn/ui 组件和 Lottie JSON 动画，并附带静态 SVG，可依据 MIT 许可证免费用于商业项目。
全部天气图标
适用场景
- 天气小组件和预报卡片
- 浅色与深色主题切换
- 旅行应用中的日出日落时间
- 智能家居仪表盘上的温度读数
- 能源和电源状态指示
按交互方式
- 点击切换动态图标 · 2
点击时在两种状态之间切换；当用户偏好减少动态效果时，直接切换到新状态。Cloud Off, Zap Off.
- 悬停播放动态图标 · 13
在 mouseenter 时播放一次，除非用户偏好减少动态效果。移出不会中断播放，播放期间再次移入也不会重新开始。Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap.
- 悬停循环动态图标 · 1
悬停期间循环播放，在 mouseleave 后播完当前一轮；当用户偏好减少动态效果时保持静止。Cloud.
添加到您的应用
在 React 中，安装 react-useanimations 并导入图标即可，它会自动播放“悬停重播”交互。本类别的所有图标用法都一样：把 sun 换成图标页面上的名称。
npm install react-useanimationsimport UseAnimations from 'react-useanimations';
import sun from 'react-useanimations/lib/sun';
<UseAnimations animation={sun} size={32} />使用 shadcn/ui 时，CLI 会添加一个现成的组件：
npx shadcn@latest add https://useanimations.com/r/sun.jsonimport { AnimatedSun } from '@/components/animations/sun';
<AnimatedSun size={24} />没有使用 React？每个图标都是位于 /icons/<id>.json 的 Lottie JSON 文件；网页、iOS、Android 和 Flutter 的播放器用法请参阅 Lottie 图标。
常见问题
包含哪些天气动态图标？
共 16 个图标：Cloud、Cloud Drizzle、Cloud Lightning、Cloud Off、Cloud Rain、Cloud Snow、Droplet、Moon、Sun、Sunrise、Sunset、Thermometer 等另外 4 个。全部可依据 MIT 许可证免费用于个人和商业项目，无需署名。
如何在 React 中使用这些天气动态图标？
安装 react-useanimations，添加 import sun from 'react-useanimations/lib/sun'，然后渲染 <UseAnimations animation={sun} size={32} />。图标会播放它的“悬停重播”交互，并跟随文字颜色。使用 shadcn/ui 时，改为运行 npx shadcn@latest add https://useanimations.com/r/sun.json。
不用 React 也能使用这些天气动态图标吗？
可以。每个图标都是一个 Lottie JSON 文件，地址为 https://useanimations.com/icons/<id>.json（例如 https://useanimations.com/icons/sun.json），可以用 lottie-web、lottie-ios、lottie-android 或 Flutter 的 lottie 包播放；静态 SVG 可以在各个图标页面（英文）下载。这些图标都没有用到表达式，因此 lottie-web 的轻量版（light build）就够用了。