Repolode
提交项目
asorn

asorn/qingicon-open

免费开源的中性风格 UI 图标库，收录 3900 多个图标，面向 AI、云与 Web 产品，提供 React 和 Vue 组件。

在 GitHub 查看官网
Star
56
Fork
3
未关闭 Issue
0
最近提交
上个月

这是什么？

QingIcon 是一套面向 AI、云和互联网产品的 UI 图标库，提供 3900 多个图标，分为 34 个类别，目前为线性（Line）风格，填充（Fill）风格仍在绘制中。所有图标采用统一的网格和视觉重量，混合使用时风格一致。

网站支持浏览、搜索、复制和下载图标，可一键复制 SVG、React、Vue 或 DataURL 代码，也可下载 SVG、PNG 和 WebP 文件。搜索覆盖 13.7 万余个中英文关键词，支持中文分词和模糊匹配。导出前可调整线宽、尺寸和颜色。

开发者可以使用 qingicon-react 和 qingicon-vue 两个 npm 包，每个图标对应一个组件并支持 Tree-shaking。qingicon-mcp 服务器则让 Cursor、Claude Code 等 AI 编程工具直接搜索图标并生成组件代码。项目还提供 Figma 插件。

核心功能

  • 01共 3900 多个图标，分 34 个类别，目前提供线性风格
  • 02所有图标采用统一的网格和视觉重量
  • 03支持中英文关键词搜索和模糊匹配
  • 04提供支持 Tree-shaking 和 TypeScript 的 React 与 Vue 组件
  • 05通过 MCP 服务器在 AI 编程工具中生成图标代码
  • 06可导出 SVG、PNG、WebP，或复制 React、Vue、DataURL 代码

适用场景

  • 为 AI 产品界面寻找模型、智能体、提示词等相关图标
  • 用一致风格的服务器、网络类图标设计云控制台或 SaaS 仪表盘
  • 在 React 或 Vue 项目中通过 npm 组件直接引入图标
  • 让 AI 编程助手在生成前端代码时自动选用和插入图标

快速上手

  1. 1

    从 npm 安装 React 组件包

    npm install qingicon-react
  2. 2

    从 npm 安装 Vue 组件包

    npm install qingicon-vue

使用前须知

  • 手绘草图风格仅在网站和 Figma 插件中提供，npm 组件包和 MCP 中不包含。
  • 填充风格的图标仍在绘制中，尚不完整。
  • 该项目为非营利项目，由个人作者维护。

收录于专题

前端框架与界面组件

标签

#icons#ui-components#svg#react#vue#design-system#figma

常见问题

qingicon-open 是什么？
免费开源的中性风格 UI 图标库，收录 3900 多个图标，面向 AI、云与 Web 产品，提供 React 和 Vue 组件。 QingIcon 是一套面向 AI、云和互联网产品的 UI 图标库，提供 3900 多个图标，分为 34 个类别，目前为线性（Line）风格，填充（Fill）风格仍在绘制中。所有图标采用统一的网格和视觉重量，混合使用时风格一致。
qingicon-open 可以免费使用吗？用的什么许可证？
qingicon-open 以 Apache-2.0 许可证开源。用于商业产品前，请先确认许可证条款。
qingicon-open 还在维护吗？
半年内有更新。qingicon-open 最近一次提交是在 2026年10月8日。
qingicon-open 适合用来做什么？
为 AI 产品界面寻找模型、智能体、提示词等相关图标 用一致风格的服务器、网络类图标设计云控制台或 SaaS 仪表盘 在 React 或 Vue 项目中通过 npm 组件直接引入图标 让 AI 编程助手在生成前端代码时自动选用和插入图标
qingicon-open 怎么安装和运行？
从 npm 安装 React 组件包: npm install qingicon-react 从 npm 安装 Vue 组件包: npm install qingicon-vue
在哪里获取 qingicon-open？
源代码和安装说明在 GitHub 上：https://github.com/asorn/qingicon-open

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目