English22 个图标 · MIT 许可
社交媒体动态图标
社交网络以及开发者和设计师分享作品的平台的品牌图标：X、Instagram、YouTube、Discord、Telegram、Figma 等。它们在悬停时播放动画，让页脚和个人主页链接看起来更明显可点。
这 22 个图标中，3 个悬停时播放、移开时倒放，9 个悬停时播放一次，10 个悬停期间循环播放。每个图标都提供 React 组件、shadcn/ui 组件和 Lottie JSON 动画，并附带静态 SVG，可依据 MIT 许可证免费用于商业项目。
全部社交媒体图标
适用场景
- 网站页脚的社交链接
- 博客文章的分享按钮
- 作者和团队主页链接
- 聊天社区的邀请按钮
- 使用社交或开发者账号登录
按交互方式
- 悬停动态图标 · 3
在 mouseenter 时正向播放，在 mouseleave 时反向播放。Instagram, YouTube, YouTube V2.
- 悬停播放动态图标 · 9
在 mouseenter 时播放一次，除非用户偏好减少动态效果。移出不会中断播放，播放期间再次移入也不会重新开始。Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X.
- 悬停循环动态图标 · 10
悬停期间循环播放，在 mouseleave 后播完当前一轮；当用户偏好减少动态效果时保持静止。Behance, Codepen, Discord, Dribbble, Facebook, Github, Linkedin, Pocket, Telegram, Twitter.
添加到您的应用
在 React 中，安装 react-useanimations 并导入图标即可，它会自动播放“悬停循环”交互。本类别的所有图标用法都一样：把 github 换成图标页面上的名称。
npm install react-useanimationsimport UseAnimations from 'react-useanimations';
import github from 'react-useanimations/lib/github';
<UseAnimations animation={github} size={32} />使用 shadcn/ui 时，CLI 会添加一个现成的组件：
npx shadcn@latest add https://useanimations.com/r/github.jsonimport { AnimatedGithub } from '@/components/animations/github';
<AnimatedGithub size={24} />没有使用 React？每个图标都是位于 /icons/<id>.json 的 Lottie JSON 文件；网页、iOS、Android 和 Flutter 的播放器用法请参阅 Lottie 图标。
常见问题
包含哪些社交媒体动态图标？
共 22 个图标：Behance、Chrome、Codepen、Codesandbox、Discord、Dribbble、Facebook、Figma、Framer、Github、GitLab、Instagram 等另外 10 个。全部可依据 MIT 许可证免费用于个人和商业项目，无需署名。
如何在 React 中使用这些社交媒体动态图标？
安装 react-useanimations，添加 import github from 'react-useanimations/lib/github'，然后渲染 <UseAnimations animation={github} size={32} />。图标会播放它的“悬停循环”交互，并跟随文字颜色。使用 shadcn/ui 时，改为运行 npx shadcn@latest add https://useanimations.com/r/github.json。
不用 React 也能使用这些社交媒体动态图标吗？
可以。每个图标都是一个 Lottie JSON 文件，地址为 https://useanimations.com/icons/<id>.json（例如 https://useanimations.com/icons/github.json），可以用 lottie-web、lottie-ios、lottie-android 或 Flutter 的 lottie 包播放；静态 SVG 可以在各个图标页面（英文）下载。Twitter 用到了 After Effects 表达式，因此在网页上需要使用 lottie-web 的完整版。