核心功能
使用指南
- 1
打开 css.gg 首页，在顶部搜索框输入关键词快速定位所需图标。
- 2
点击图标卡片进入详情，预览不同尺寸下的显示效果与代码片段。
- 3
复制 Pure CSS 代码，粘贴到项目样式文件中，用 class 名调用图标。
- 4
若使用构建工具，执行 npm i css.gg 安装后在入口文件引入样式。
- 5
需要矢量源文件时点击 SVG 按钮下载，导入 Figma 或 Sketch 编辑。
- 6
设计阶段可在 Figma 社区安装 css.gg 插件，把图标直接拖拽到画布。
- 7
React 或 Vue 项目安装对应组件包，按需引入组件并传入颜色与尺寸。
- 8
需要精简请求时下载 SVG Sprite，用 symbol 方式在页面中统一引用。
优势亮点
采用 MIT 协议发布，商用无授权限制，可自由修改、分发与二次开发。
纯 CSS 实现单个图标仅数 KB，无需加载整套图标字体，首屏压力小。
同一套图标提供 CSS、SVG、Figma、React、Vue、Sprite 六种交付形态。
七百余枚图标遵循同一套描边粗细与圆角规范，混排时视觉一致。
使用须知
定价: css.gg 全部内容免费开放，采用 MIT 开源协议，无会员、无付费层、无功能阉割，个人项目与商业产品均可直接使用且无需署名付费。项目维护依赖社区赞助与贡献者投入。若未来出现企业级支持服务，以官网定价为准。适用人群为预算敏感的独立开发者、初创团队与需要规避授权风险的企业项目。
价格和授权政策可能变化，请以官网最新信息为准
资料由中文导航编辑部整理并经健康检测核验，定期复查更新。
收录信息以收录当日官网状态为准，如发现内容过期请通过下方反馈告知。
访问第三方网站时，请注意以下事项:
- 谨慎提供个人账号、密码和支付信息
- 下载文件前确认来源安全，警惕诱导性广告
- 涉及版权素材使用时，请核实授权范围
- 如遇网站无法访问或内容异常，可反馈给我们
常见问题
深度了解
css.gg 是一个以开源方式运作的图标资源站，核心资产是七百余枚线性描边风格图标，采用 MIT 协议发布，个人与商业项目均可免费调用，无需申请授权。它把同一套图形拆成多种交付格式，让设计和开发在同一个素材源上协作，这是它区别于传统图标字体的关键。
功能层面，站点提供 Pure CSS、SVG 文件、Figma 插件、React 组件、Vue 组件与 SVG Sprite 六种用法。开发者可以在 HTML 头部引入 unpkg 上的样式链接，也可以执行 npm i css.gg 在构建流程中按需打包；设计人员则直接在 Figma 社区安装插件，把图标拖进画布后统一调整描边与颜色。每个图标都自带详情页，展示不同尺寸的渲染效果与可复制的代码片段，搜索框支持英文关键词实时过滤。
使用场景集中在三类。后台管理系统与数据看板需要大量功能型小图标，线性风格在密集界面中不抢占视觉重心；营销落地页与官网首屏对加载速度敏感，纯 CSS 实现省去字体文件请求；移动端 H5 与小程序受包体限制，按需引入单个图标通常只需几 KB。教学场景同样适用，复制 class 名就能在浏览器看到图形，便于讲解 CSS 绘制原理。
与同类产品对比，Font Awesome 图标数量更多但部分内容需要订阅，Heroicons 与 Tailwind 绑定较紧，Iconify 聚合两百多个图标集适合海量检索但对单一风格有要求的项目反而增加筛选成本。css.gg 的取舍是牺牲数量换取格式覆盖与风格统一，七百枚图标在同一套描边规范下生成，混排时不会出现粗细不一的问题。
人群建议方面，前端工程师、UI 设计师、独立开发者与编程讲师是它的主要使用者。若项目中需要彩色、拟物或填充风格图标，或界面涉及金融、医疗等需要大量专业符号的领域，建议把它作为基础套件并搭配第二套图标补充；若追求轻量、风格统一、授权无忧，可直接引入使用。
用过css.gg？说说你的真实体验
你的点评会帮助上千万人避坑选型——匿名发表，无需注册，30 秒即可完成
用户评价
还没有评分
成为第一个评价 css.gg 的人
我的评分
随下方评论一并提交