34 个图标 · MIT 许可

导航与箭头动态图标

可以变成关闭按钮的汉堡菜单，以及悬停时朝所指方向轻推的箭头、V 形箭头和角箭头。它们让控件的去向一目了然：打开抽屉、返回、展开这一行、离开本站。

这 34 个图标中，2 个持续循环播放，4 个点击时在两种状态之间切换，6 个每次点击都会重播，22 个悬停时播放一次。每个图标都提供 React 组件、shadcn/ui 组件和 Lottie JSON 动画，并附带静态 SVG，可依据 MIT 许可证免费用于商业项目。

适用场景

移动端变成关闭按钮的汉堡菜单
轮播图和分页中的上一页、下一页按钮
手风琴和下拉菜单的展开箭头
返回顶部和向下滚动提示
登录和退出链接
外部链接标记和侧边栏开关

按交互方式

循环动态图标 · 2
持续播放；当用户偏好减少动态效果时，停留在静态的第一帧。More Horizontal, More Vertical.
点击切换动态图标 · 4
点击时在两种状态之间切换；当用户偏好减少动态效果时，直接切换到新状态。Burger Menu, Menu V2, Menu V3, Menu V4.
点击重播动态图标 · 6
每次点击都从头播放一次，除非用户偏好减少动态效果。Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.
悬停播放动态图标 · 22
在 mouseenter 时播放一次，除非用户偏好减少动态效果。移出不会中断播放，播放期间再次移入也不会重新开始。Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar.

添加到您的应用

在 React 中，安装 react-useanimations 并导入图标即可，它会自动播放“点击切换”交互。本类别的所有图标用法都一样：把 menu 换成图标页面上的名称。

npm install react-useanimations

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

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

使用 shadcn/ui 时，CLI 会添加一个现成的组件：

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

import { AnimatedMenu } from '@/components/animations/menu';

<AnimatedMenu size={24} />

没有使用 React？每个图标都是位于 /icons/<id>.json 的 Lottie JSON 文件；网页、iOS、Android 和 Flutter 的播放器用法请参阅 Lottie 图标。

常见问题

包含哪些导航与箭头动态图标？

共 34 个图标：Arrow down circle、Arrow Down Left、Arrow Down Right、Arrow Left、Arrow left circle、Arrow Right、Arrow right circle、Arrow up circle、Arrow Up Left、Arrow Up Right、Burger Menu、Chevron Down 等另外 22 个。全部可依据 MIT 许可证免费用于个人和商业项目，无需署名。

如何在 React 中使用这些导航与箭头动态图标？

安装 react-useanimations，添加 import menu from 'react-useanimations/lib/menu'，然后渲染 <UseAnimations animation={menu} size={32} />。图标会播放它的“点击切换”交互，并跟随文字颜色。使用 shadcn/ui 时，改为运行 npx shadcn@latest add https://useanimations.com/r/menu.json。

不用 React 也能使用这些导航与箭头动态图标吗？

可以。每个图标都是一个 Lottie JSON 文件，地址为 https://useanimations.com/icons/<id>.json（例如 https://useanimations.com/icons/menu.json），可以用 lottie-web、lottie-ios、lottie-android 或 Flutter 的 lottie 包播放；静态 SVG 可以在各个图标页面（英文）下载。这些图标都没有用到表达式，因此 lottie-web 的轻量版（light build）就够用了。

全部导航与箭头图标

适用场景

按交互方式

添加到您的应用

常见问题