English13 个图标 · MIT 许可
通讯动态图标
电话、聊天气泡、发送按钮、语音信箱和 RSS。通话图标涵盖通话记录所需的来电、去电、未接和转接状态；发送图标会在点击时给消息一个小小的“送行”动画。
这 13 个图标中，1 个点击时在两种状态之间切换，3 个每次点击都会重播，9 个悬停时播放一次。每个图标都提供 React 组件、shadcn/ui 组件和 Lottie JSON 动画，并附带静态 SVG，可依据 MIT 许可证免费用于商业项目。
全部通讯图标
适用场景
- 聊天和评论表单中的发送按钮
- 包含来电、去电和未接来电的通话记录
- 联系我们和客服按钮
- 聊天组件的启动按钮
- 提及和邮箱地址输入框
按交互方式
- 点击切换动态图标 · 1
点击时在两种状态之间切换；当用户偏好减少动态效果时，直接切换到新状态。Phone Off.
- 点击重播动态图标 · 3
每次点击都从头播放一次，除非用户偏好减少动态效果。Phone, Phone Call, Send.
- 悬停播放动态图标 · 9
在 mouseenter 时播放一次，除非用户偏好减少动态效果。移出不会中断播放，播放期间再次移入也不会重新开始。At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail.
添加到您的应用
在 React 中，安装 react-useanimations 并导入图标即可，它会自动播放“点击重播”交互。本类别的所有图标用法都一样：把 send 换成图标页面上的名称。
npm install react-useanimationsimport UseAnimations from 'react-useanimations';
import send from 'react-useanimations/lib/send';
<UseAnimations animation={send} size={32} />使用 shadcn/ui 时，CLI 会添加一个现成的组件：
npx shadcn@latest add https://useanimations.com/r/send.jsonimport { AnimatedSend } from '@/components/animations/send';
<AnimatedSend size={24} />没有使用 React？每个图标都是位于 /icons/<id>.json 的 Lottie JSON 文件；网页、iOS、Android 和 Flutter 的播放器用法请参阅 Lottie 图标。
常见问题
包含哪些通讯动态图标？
共 13 个图标：At Sign、Message Circle、Message Square、Phone、Phone Call、Phone Forwarded、Phone Incoming、Phone Missed、Phone Off、Phone Outgoing、RSS、Send 等另外 1 个。全部可依据 MIT 许可证免费用于个人和商业项目，无需署名。
如何在 React 中使用这些通讯动态图标？
安装 react-useanimations，添加 import send from 'react-useanimations/lib/send'，然后渲染 <UseAnimations animation={send} size={32} />。图标会播放它的“点击重播”交互，并跟随文字颜色。使用 shadcn/ui 时，改为运行 npx shadcn@latest add https://useanimations.com/r/send.json。
不用 React 也能使用这些通讯动态图标吗？
可以。每个图标都是一个 Lottie JSON 文件，地址为 https://useanimations.com/icons/<id>.json（例如 https://useanimations.com/icons/send.json），可以用 lottie-web、lottie-ios、lottie-android 或 Flutter 的 lottie 包播放；静态 SVG 可以在各个图标页面（英文）下载。这些图标都没有用到表达式，因此 lottie-web 的轻量版（light build）就够用了。