豹宝动起来Baobao Icons · 动态版

111 个带海豹的图标都会醒来、睡着、眨眼、弹一下、脸红，其中 19 个还有自己的小动作。点任意图标就能重播，慢放可以看清每一帧。

静态图标使用说明单个下载motion.json授权：CC BY-NC 4.0
主页

放进 tab 栏试试

  1. 点一个没选中的 tab，它会醒过来，刚离开的那个慢慢睡着。
  2. 再点一下已经选中的 tab，它会弹一下。
  3. 主页睡着的时候头顶会冒出小 z，醒来时 z 飘走，屋顶帽子也跟着跳。

单个下载

选一个豹宝和动作，下载后就能使用。也可以点下方每个图标旁的“下载”。

SVG 自带动画，打开播放一次，待机会循环；GIF 循环播放。透明 GIF 的半透明边缘按白底处理，用于深色主题时建议选择深色背景或使用 SVG。

6 种动作

左边是放大看，右边是实际 24px。前 5 种所有带海豹的图标都能共用，最后一种每个图标各有各的。

全部 111 个带海豹的图标

前 5 种动作每一个带海豹的图标都有；选“专属”能看到 19 个各有各的小动作。选一个动作再点“一起播”，或者单独点某个图标。本来画成闭着眼的收藏、深色模式、睡眠、体温、吃药，醒着时会睁开眼。

动作

怎么用

  • 直接使用：在“单个下载”里导出自带动画的 SVG 或 GIF，不需要另外引入文件。
  • 需要跟随点击切换状态：把 motion/svg/ 里的源 SVG 贴进网页，再引入 baobao-motion.css 和播放助手。
  • 用 BaobaoMotion.play(svg, "wake") 播放，或者直接切换 svg 上的 class。
  • 完整写法和 tab 栏的例子在使用说明里。

授权

  • 豹宝图标 © 2026 唐幡，按 CC BY-NC 4.0 授权。
  • 可以免费用在个人和非商业项目里，使用时请署名“豹宝图标 by @唐幡”；商业用途请先联系作者。