Grassicons是什么
Grassicons 是个挺特别的图标库，因为它同时提供静态和动态两种图标。目前有 100+ 个线性图标和 10+ 个动态图标，目标是做到 1000+。所有图标都在 Figma 里做成组件，设计师可以直接在 Figma 里用，不用到处找。图标风格统一，都是圆形边框的线性设计，看起来干净利落。动态图标是 JSON 格式，适合做微交互。
主页
如何使用Grassicons
Figma 使用：
访问官网，点击「Figma Preview」就能在 Figma 里直接预览和使用。所有图标都是组件，拖到设计稿里就能用。
下载图标：
通过 Gumroad 下载，提供 SVG（静态）和 JSON（动态）两种格式。SVG 可以直接用在网页项目里，JSON 格式的动态图标需要配合 Lottie 这类动画库使用。
Grassicons 的特色
Figma 原生组件
所有图标都是 Figma 组件，直接在 Figma 里用，不用导出导入，设计师的工作流更顺畅。
静态+动态双模式
提供 SVG 静态图标和 JSON 动态图标，静态的做常规 UI，动态的做微交互，选择灵活。
统一圆形边框风格
所有图标都用圆形边框包裹，风格统一，适合现代扁平化设计。
持续更新中
目前 100+ 图标，目标是 1000+，作者会在社交媒体上发布更新。
Grassicons 的使用场景
Figma 设计稿
直接在 Figma 里拖拽使用，不用到处找图标，设计效率更高。
网页项目
SVG 格式直接用在 HTML、React、Vue 项目里，圆形边框风格很现代。
微交互效果
用 JSON 动态图标做按钮动画、加载状态、反馈提示，让界面更生动。
Grassicons 优缺点
优点
Figma 原生组件，设计师用起来方便
静态+动态双模式，选择灵活
风格统一，圆形边框设计现代
持续更新中
缺点
图标数量还不多（100+），需要等更新
动态图标需要 Lottie 等库支持
需要通过 Gumroad 下载
Grassicons 常见问题
Q1: 怎么在 Figma 里用？
访问官网，点「Figma Preview」就能在 Figma 里直接打开，所有图标都是组件，直接拖到设计稿里。
Q2: 动态图标怎么用？
下载 JSON 文件，用 Lottie 这类动画库渲染。适合做按钮动画、加载状态这些微交互。
Q3: 图标会更新吗？
会，作者说会持续更新，目标是做到 1000+ 图标。关注社交媒体能看到更新动态。
Q4: 怎么下载？
通过 Gumroad 下载，提供 SVG 和 JSON 两种格式。
阅读量: - 访客量: -
