QingIcon：3900余枚开源图标

10次阅读

获取下载链

微信关注「软件教程管家」公众号，回复 QingIcon （提取码 qjku）

QingIcon 是一套主打中性统一视觉的开源中性图标库，由设计师 Asorn 沉淀的公益项目，以 Apache 2.0 协议发布，可免费商用、可修改再分发，只需保留许可声明。目前收录 3900 余枚图标、分作 34 个分类，提供 Line 线性与 Fill 填充两种风格，并配套 13 万余条中英双语关键词用于检索，面向做界面的设计师与前端开发者。

中性图标库为什么省事

做界面时挑图标最怕风格打架：多数图标库尺寸基线不一、描边重量忽轻忽重，混排到同一排工具条里就显得突兀。QingIcon 整套图标共用一套尺寸网格与视觉重量基线，描边粗细、圆角、重心都经过统一调校，线性与填充、不同分类混排在同一行里不会忽大忽小；还做了光学修正，图标缩小或放大时描边视觉粗细自动补偿，不会小图变粗、大图发飘。库里还专门留了一类 Abstract 抽象图标，语义宽泛、形态中性，找不到完全贴语义的具象图标，或某个位置的功能还没定下来时，拿它顶上不会出错，也不至于让界面空一块。AI 与云原生两套新语义是这一版重点补齐的：模型、推理、训练、Agent、向量、提示词、对话，以及服务器、数据库、容器、网络、存储、CDN、监控，都共用同一套中性网格，做整套后台界面时不用在多个库之间来回拼。

搜索与导出怎么用

找图环节下了不少功夫：中文分词靠浏览器原生 Intl.Segmenter，支持多关键词 AND 命中与残片容错，输「早蛋」能召回「早餐」加「鸡蛋」；英文做了归一化，userpen 自动补成 user-pen，词序无关，拼错 pecil 也能兜底到 pencil。在线端可以实时调描边粗细、尺寸和颜色，调好一键复制 SVG、React、Vue 或 DataURL，也可下载 SVG、PNG、WebP。导出 SVG 时会写入一层隐形的方形边界，把图标固定在画布尺寸里，在不同工具间来回挪动不会跑偏、不会因切边而缩位。任意图标还能一键切到 Sketch 草图风格，变成手绘草稿质感，适合概念稿、线框图和教学提案这类未定稿场景；要注意的是，草图渲染只在官网和 Figma 插件提供，不随 npm 包和 MCP Server 下发，工程侧要复刻需自行引入 Rough.js。

进工程的周边怎么配

它不只是一个看图网页。React 与 Vue 组件包支持 Tree-shaking 和 TypeScript，可以直接进工程流；配套的 MCP Server 能在 Cursor、Claude Code 等环境用自然语言搜图标并出代码；另有 Figma 插件，打通设计稿到代码的最后一环。对前端团队来说，图标库的价值不只在数量，更在“找得到、风格齐、能直接用进项目”这一整条链路，而这套库三点都给了。

推广