English5 个图标 · MIT 许可
警告提示动态图标
警告三角、警示圆圈和停止标志，脉动幅度恰到好处，足以引起注意又不会闪烁刺眼。适合放在校验失败的表单字段旁、错误横幅开头或状态列中，这些位置的静态图标很容易被一眼略过。
这 5 个图标中，4 个持续循环播放，1 个每次点击都会重播。每个图标都提供 React 组件、shadcn/ui 组件和 Lottie JSON 动画，并附带静态 SVG，可依据 MIT 许可证免费用于商业项目。
全部警告提示图标
适用场景
- 表单字段下方的行内校验错误
- 页面顶部的错误和警告横幅
- 部署或任务状态表中的失败行
- 危险操作的确认对话框
- 故障期间的系统状态页
按交互方式
添加到您的应用
在 React 中，安装 react-useanimations 并导入图标即可，它会自动播放“循环”交互。本类别的所有图标用法都一样：把 alertTriangle 换成图标页面上的名称。
npm install react-useanimationsimport UseAnimations from 'react-useanimations';
import alertTriangle from 'react-useanimations/lib/alertTriangle';
<UseAnimations animation={alertTriangle} size={32} />使用 shadcn/ui 时，CLI 会添加一个现成的组件：
npx shadcn@latest add https://useanimations.com/r/alert-triangle.jsonimport { AnimatedAlertTriangle } from '@/components/animations/alert-triangle';
<AnimatedAlertTriangle size={24} />没有使用 React？每个图标都是位于 /icons/<id>.json 的 Lottie JSON 文件；网页、iOS、Android 和 Flutter 的播放器用法请参阅 Lottie 图标。
常见问题
包含哪些警告提示动态图标？
共 5 个图标：Alert circle、Alert octagon、Alert triangle、Error 和 X Octagon。全部可依据 MIT 许可证免费用于个人和商业项目，无需署名。
如何在 React 中使用这些警告提示动态图标？
安装 react-useanimations，添加 import alertTriangle from 'react-useanimations/lib/alertTriangle'，然后渲染 <UseAnimations animation={alertTriangle} size={32} />。图标会播放它的“循环”交互，并跟随文字颜色。使用 shadcn/ui 时，改为运行 npx shadcn@latest add https://useanimations.com/r/alert-triangle.json。
不用 React 也能使用这些警告提示动态图标吗？
可以。每个图标都是一个 Lottie JSON 文件，地址为 https://useanimations.com/icons/<id>.json（例如 https://useanimations.com/icons/alert-triangle.json），可以用 lottie-web、lottie-ios、lottie-android 或 Flutter 的 lottie 包播放；静态 SVG 可以在各个图标页面（英文）下载。Error 用到了 After Effects 表达式，因此在网页上需要使用 lottie-web 的完整版。