纯 CSS 画的免费图标库：css.gg 零依赖，前端直接写样式
大多数图标以字体或 SVG 形态存在，但有些场景你只想用纯 CSS 把图形画出来，避免额外请求字体文件。css.gg 就是一套用纯 CSS（含少量内联 SVG 兜底）绘制的开源图标库，每个图标都是一组样式规则，复制即用、零运行时依赖。对追求极致轻量、不想引入图标字体的前端来说，它是一块很实用的积木。
它解决什么问题
不想为几个图标引入一整个字体文件，白白增加请求。
图标改色要做精灵图或重新导出，流程繁琐。
担心图标库体积与依赖拖累页面性能。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 纯 CSS 绘制 | 图标由样式规则生成，不强制依赖外部字体文件 |
| 零依赖 | 复制对应的 CSS 即可使用，没有运行时包袱 |
| 双形态 | 同时提供 CSS、SVG 与字体三种取用方式，按需要选 |
| MIT / CC0 | 双协议授权，商业用途免费，且部分归为公共领域无需署名 |
| 易改色 | 用 CSS 变量控制颜色，主题切换一行搞定 |
| 轻量可控 | 只取用需要的图标，产物几乎不带冗余 |
它把图标当成「样式」而非「资源」来交付
css.gg 的特别之处在于交付形态：相当一部分图标是用 CSS 的边框、阴影、渐变等属性拼出来的，浏览器直接渲染，不需要下载图片或字体。这对首屏性能敏感、又只用少量图标的页面很友好——你省掉了一次字体请求，也省掉了图标字体在加载前显示空白的闪烁。当然，复杂图形仍以内联 SVG 兜底，保证跨浏览器一致。
落地时建议只引入实际用到的图标规则，而不是整库粘贴，否则 CSS 体积会失控。改色方面，因为它大量使用 currentColor 或 CSS 变量，只要在外层设置 color 或覆盖变量即可整体调色，做深色模式几乎零成本。要注意的是，纯 CSS 图标对极复杂图形的表现力有限，遇到精细符号时还是用它的 SVG 形态更稳。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| Feather Icons | 开源免费 | 极简线性，SVG 优先，适合内容型网页。 |
| Bootstrap Icons | 开源免费 | 和 Bootstrap 配套顺手，分类完整。 |
| Remix Icon | 开源免费 | 中性现代风，场景覆盖广，双形态取用。 |
谁适合用
- 追求极致轻量的前端开发者
- 不想引入图标字体的性能敏感项目
- 喜欢用 CSS 变量做主题切换的团队
怎么开始
- 打开官网，搜索或浏览找到目标图标。
- 复制图标对应的 CSS 规则，粘贴进项目样式表。
- 需要更精细控制时，改用它提供的 SVG 形态。
- 用 CSS 变量或 currentColor 统一控制图标颜色。
- 只保留用到的图标规则，避免样式表膨胀。
常见问题
能商用吗？
能。MIT 与 CC0 双协议，商业用途免费，部分属公共领域无需署名。
一定要用 CSS 形态吗？
不。它也提供 SVG 与字体，按项目需要任选其一即可。
改颜色方便吗？
方便。多用 currentColor 或变量，外层改色即可整体生效。
适合复杂图标吗？
纯 CSS 适合简单图形；精细符号建议直接用它的 SVG 形态。
授权与合规
css.gg 以 MIT 与 CC0 双协议发布，可免费用于商业项目，无需署名。 官网：css.gg。
继续找同类资源
这条属于「设计素材」栏目，同栏目还有更多可直接使用的免费资源，可以在 设计素材全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
↓ 获取资源
点击按钮直接前往资源页面。
