Css.gg – 纯代码绘制的开源 CSS 图标库

css.gg

css.gg 是一款由开发者 Astrit 独立打造的开源图标库，最大的特色是所有图标都由代码直接绘制而成，不依赖任何设计稿导出。库内收录 700 多个 24×24 的 UI 图标，外加 6000 多个字形、图案、配色与布局素材，覆盖界面设计的几乎全部常见场景。所有图标同时提供纯 CSS、SVG、Figma、PNG 与 TSX 五种格式，既能一行代码嵌入网页，也能直接拖进设计工具使用。项目自 2020 年 2.0 版发布后迅速走红，GitHub 星标一度冲到 8000 以上，如今在 Figma 社区的复制量已超过 5.2 万次，是复制量最高的图标库之一。如果你正在寻找一套轻量、零依赖、MIT 协议免费商用的图标方案，css.gg 几乎是前端与设计师绕不开的经典选择。

网站&在线应用

简介

css.gg 的名字听起来像一个玩笑，背后却是前端圈最硬核的图标库之一。它的每一个图标都是纯 CSS 代码配合伪元素画出来的，没有图片、没有字体文件、没有 JS 依赖，引入一段样式就能把七百多个 24×24 图标全部带回家。站点本身做成了一个相当精致的素材工作台：除了图标（Symbols），还内置了字形（Patterns）、配色（Colors）与布局（Layouts）四大板块，共计超过 6000 个素材，配合搜索框与键盘快捷键可以像阅读器一样飞快地检索。项目由 Astrit 于 2020 年推出 2.0 版后一炮走红，不仅拿下了 Feather 作者 Cole Bemis 等一众知名设计师的公开好评，还被大量开发工具与框架引入为默认图标方案。

✅ 优缺点

✅ 图标完全由 CSS 代码绘制，体积极轻零依赖，页面加载几乎无负担
✅ 一套图标同时覆盖纯 CSS、SVG、Figma、PNG、TSX 五种格式，设计与开发无缝衔接
✅ MIT 开源协议免费商用，个人与商业项目都可以放心使用
✅ 附带 6000+ 字形、图案、配色与布局素材，一个站点顶多个素材库
✅ Figma 社区复制量超 5.2 万次，Feather 作者等业内设计师一致好评
❌ 图标以克制线性风格为主，追求插画风或拟物风格的项目不太适用
❌ 收藏同步等云端效率功能需注册登录后才能使用

📖 使用方法

打开站点，在 Symbols、Patterns、Colors、Layouts 四大板块之间切换，或直接在搜索框输入关键词（如 arrow）检索图标。
点击任意图标进入详情页，可预览 24×24 效果并查看圆角、方角等变体。
复制详情页提供的 CSS 类名或 HTML 代码粘贴进自己的网页即可渲染，也可下载 SVG/PNG 文件直接使用。
设计师可以在 Figma 社区获取官方组件文件，或通过 npm 安装 css.gg 包在 React/Vue 等框架中按需引用。
注册账号后可以收藏常用图标并云同步，配合 Raycast 扩展还能在本地快速检索全部图标与字形。

💰 收费

css.gg 本体完全免费开源，采用 MIT 协议，所有图标、字形、图案与布局素材都可以自由下载并用于个人和商业项目，无任何授权费用。站点另设 PRO 会员与登录账户体系，主要用于云同步收藏、快捷键等效率功能；作者同时通过 GitHub Sponsors 与 Open Collective 接受社区捐赠维持开源维护，不付费也不影响核心素材的使用。