300 个图标 · 20 个类别
动态图标分类
每个 useAnimations 图标都属于一个类别,从导航箭头、媒体控件到加载动画和社交媒体图标。打开某个类别,可以看到其中全部图标、适用场景以及添加图标的代码;也可以改为按交互方式浏览。
- 警告提示5 个图标警告三角、警示圆圈和停止标志,脉动幅度恰到好处,足以引起注意又不会闪烁刺眼。适合放在校验失败的表单字段旁、错误横幅开头或状态列中,这些位置的静态图标很容易被一眼略过。
- 通知铃铛4 个图标有新动态时会摇动的铃铛,以及在铃铛和静音铃铛之间切换的图标。铃铛轻轻一摆,就能把视线引向未读数;可切换的版本还能直接用作频道或会话的静音开关。
- 导航与箭头34 个图标可以变成关闭按钮的汉堡菜单,以及悬停时朝所指方向轻推的箭头、V 形箭头和角箭头。它们让控件的去向一目了然:打开抽屉、返回、展开这一行、离开本站。
- 操作按钮64 个图标界面里的“动词”:保存、删除、下载、刷新、点赞、收藏、搜索和设置。每个图标都会对相应的点击或悬停作出回应:点赞时爱心被填满,删除前垃圾桶的盖子先掀起来。
- 文件、文件夹与用户22 个图标文件、文件夹、书本、邮件、附件和人物。它们用来标示用户日常处理的对象;添加、移除和勾选等变体让列表管理和团队管理的反馈更加及时。
- 表单控件3 个图标复选框、单选按钮和开关,在选中与未选中之间带动画切换。适合普通输入控件显得单调的地方,例如新手引导清单和设置页面,同时状态依然一眼可辨。
- 媒体播放28 个图标用于音频和视频播放器的播放与暂停、音量、麦克风、摄像头、跳过和随机播放图标。可切换的图标在两种状态之间转换,比如从播放到暂停、从麦克风到静音,按钮始终显示点击后会发生什么。
- 文本编辑10 个图标用于富文本工具栏的加粗、斜体、下划线、对齐和列表图标。点击时的简短动画确认格式已经生效,在文字本身变化不明显的编辑器里尤其有用。
- 通讯13 个图标电话、聊天气泡、发送按钮、语音信箱和 RSS。通话图标涵盖通话记录所需的来电、去电、未接和转接状态;发送图标会在点击时给消息一个小小的“送行”动画。
- 设备12 个图标手机、平板、显示器、手表和打印机,以及与之相关的连接状态指示:Wi-Fi、蓝牙和电池。适用于设备选择器、响应式预览切换和连接状态显示。
- 天气16 个图标太阳、月亮、云、雨、雪、闪电和风,适用于天气预报以及一切随时间变化的内容。太阳和月亮也很适合用作浅色/深色模式切换。
- 地图与位置9 个图标地图标记、导航箭头、地球、靶心和锚。悬停时落下的定位标记能让门店查询或收货地址更醒目,地球图标则适合用作语言或地区切换。
- 电子商务11 个图标购物车、购物袋、价格标签、礼物、信用卡和送货卡车,适用于网店。加入购物车的动画本身就能确认点击,无需再弹出提示;卡车和包裹图标则让订单状态更生动。
- 图表5 个图标柱状图、饼图和趋势箭头,适用于数据分析和报表。上升和下降趋势图标能让人一眼看出指标是涨是跌,很适合 KPI 卡片和数字变化记录。
- 开发者9 个图标代码括号、终端、Git 分支、提交、合并和拉取请求,以及服务器和数据库。专为开发者工具、文档站点和状态页设计,这些界面本来就离不开 Git 和基础设施的术语。
- 设计与布局10 个图标网格、分栏、图层、裁剪、钢笔工具和光标图标,适用于编辑器和搭建工具。放在用户排列内容、在网格和表格视图间切换或选择绘图工具的工具栏里正合适。
- 形状与数学8 个图标圆形、正方形、三角形、六边形、八边形和除号。可以用作绘图应用中的形状工具、计算器的运算符,或者图表和新手引导步骤中的中性标记。
- 加载动画5 个图标只要任务还在进行,加载指示器和转圈动画就会一直循环。可以放在请求进行中的提交按钮里、尚未加载完的内容位置上,或者全屏启动页上;当用户偏好减少动态效果时,它们会保持静止。
- 社交媒体22 个图标社交网络以及开发者和设计师分享作品的平台的品牌图标:X、Instagram、YouTube、Discord、Telegram、Figma 等。它们在悬停时播放动画,让页脚和个人主页链接看起来更明显可点。
- 其他10 个图标不属于较大分组的图标:用于反馈的表情、咖啡杯、时钟、脉搏线和向下滚动提示。向下滚动图标常放在首屏区域底部,提示下面还有更多内容。