CSS ICON

cssicon.space又名 CSSIcon

用纯 CSS 代码绘制图标的开源项目,收录 512 个图标,每段代码复制进样式表即可使用,颜色和大小随样式调整,适合不想为几个小图标引入图标库或图片资源的前端开发者。

工具网页英文

CSS ICON 首页截图

CSS ICON 是设计师 wentin(Wenting Zhang)的副业项目,把常见图标用纯 CSS 代码画出来,而不是用图片或字体文件。对前端开发者来说,这意味着图标可以随 CSS 一起加载,不用额外请求图片,颜色、大小也能通过改样式直接调整。

主要功能

站点提供一整套 CSS ICON 图标集,页面提到目前收录了 512 个图标,并说明还会继续增加。每个图标对应一段 CSS 代码,复制到自己的样式表里就能用。项目代码托管在 GitHub 上,可以查看实现方式,也可以参与贡献。

适合谁

适合不想为几个小图标引入图标库或图片资源的前端开发者,也适合想学习纯 CSS 绘制技巧的人。如果项目里图标数量多、样式要求复杂,用现成图标库可能更省事。

费用与限制

页面没有说明收费方式,从项目性质看应是免费使用,具体授权条款需要到 GitHub 仓库确认。站点本身是项目介绍页,作者同时在推广自己的另一个产品 Typogram(一个 logo 设计工具),页面上有相关入口。

常见问题

CSS ICON 有哪些平台 / App?
支持 网页。
CSS ICON 的替代品有哪些?
本站整理了 6 个替代品,例如 iconfont、Iconify、Heroicons、Feather Icons。

替代品 全部 6 个 →

iconfont有免费版可选登录 阿里妈妈推出的矢量图标平台,收录上千万图标,支持关键词搜索、多格式下载和转字体调用,也能用 AI 生成或统一图标风格,适合给项目找一套风格统一的图标或把图标做成字体嵌进页面的设计师和前端工程师。替代找图标这一块:国内可直接访问、图标量极大,但下载的是 SVG/字体而非 CSS 代码 Iconify免费 开源矢量图标聚合站,把 Material、UI 24px、编程、Logo 等类别的图标集收在一处,支持关键词搜索并按分类、标签、网格样式和许可证过滤,每套都标出来源与协议,适合 Web 前端在给界面配图标前先核对授权。替代图标素材这一块:聚合多套图标集可搜索,但输出 SVG,不提供纯 CSS 绘制代码 Heroicons免费不用登录 Tailwind CSS 团队出品的免费 SVG 图标库,316 枚图标分 Outline、Solid、Mini、Micro 四种尺寸样式,可复制 SVG 或引入 React、Vue 组件,适合前端开发者给导航栏和按钮配图标。替代图标素材这一块:开源 SVG 图标,可内联进页面,但不是纯 CSS 绘制 Feather Icons免费不用登录国内可直接访问 开源线性图标库,图标画在 24x24 网格上、线条粗细统一,可在网页上调整尺寸、描边与颜色并整套下载 SVG,适合做网页或应用界面的设计师和前端开发者快速搭原型、写界面。替代图标素材这一块:同为开源线性图标,但提供 SVG 而非纯 CSS,需引入文件或组件

收录于 2024 年 3 月 · 更新于 11 月 8 日 · 浏览 214 · 报告问题

替代品 6 个打开官网cssicon.space