Google 官方图标:Material Symbols 免费,还能调粗细和圆角

谷歌的 Material 图标经历了三代,现在的 Material Symbols 是可变的:粗细、字号、圆角、填充程度都能通过参数调,一个图标能演化出很多种长相。
它解决什么问题
图标风格与产品调性不匹配时,通常只能换库;换库意味着重新对齐所有尺寸与视觉重量。
有些图标库的「填充态」与「描边态」不是同一套设计,切换后图形结构会变。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 四轴可调 | Weight(粗细)、Grade(视觉灰度)、Optical Size(尺寸适配)、Fill(填充程度)都可调 |
| 填充连续变化 | Fill 轴可以从描边平滑过渡到实心,做动效与状态切换很方便 |
| 覆盖极广 | 数千个图标,覆盖 Google 生态与常见界面语义 |
| 多平台可用 | 可在 Android、Web、Flutter 等平台使用,也有 SVG 与 PNG 下载 |
| Google 维护 | 随 Material Design 规范一起维护,风格稳定 |
| Apache 2.0 | 商业使用免费,允许修改 |
可变图标的价值在哪
传统图标库是「一图一文件」,你只能在给定的几档里挑。可变图标是「一图多参数」,同一个图标文件通过参数长出很多变体。
这在做状态过渡时很有用:比如收藏按钮从描边变成实心,传统做法是两个图标切换,可变图标可以做连续动画。代价是可变字体文件略大,且部分旧环境支持有限。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| Tabler Icons | 开源免费 | 静态 SVG,数量大,风格简洁 |
| Phosphor Icons | 开源免费 | 以六种独立字重文件的方式提供类似弹性 |
| Lucide | 开源免费 | 线条统一,适合非 Material 风格的产品 |
谁适合用
- 做 Android / Flutter 应用的开发者
- 需要大量图标且希望风格与 Google 生态一致的人
- 要做图标状态过渡动效的设计与前端
怎么开始
- 打开 fonts.google.com/icons,搜索需要的语义。
- 在右侧面板调整四个轴的参数,实时预览。
- 需要静态图标就下载 SVG 或 PNG;网页使用可引入可变字体。
- Android 项目可直接使用官方 Material Symbols 依赖。
常见问题
和 Material Icons 是什么关系?
Material Symbols 是 Material Icons 的升级版,引入可变轴与更统一的造型。
商用需要署名吗?
Apache 2.0 不强制署名,但需保留许可说明。
旧浏览器支持吗?
可变字体的可变轴在较老的浏览器上可能不生效,会退化为默认字重;关键场景建议直接用静态 SVG。
授权与合规
Material Symbols 由 Google 以 Apache License 2.0 发布,可免费用于个人与商业项目。 官网:fonts.google.com/icons。
资源信息
界面语言
多语言
授权方式
官方免费资源
适用平台
Web
获取方式
直链下载
资源更新
2026-09-19
页面更新
2026-09-06
↓ 获取资源
点击下方按钮直接开始下载。
立即下载
直链
https://fonts.google.com/icons