Repolode
Submit
asorn

asorn/qingicon-open

Free, open-source neutral-style UI icon set of 3900+ icons for AI, cloud and web products, with React and Vue components.

View on GitHubWebsite
Stars
56
Forks
3
Open issues
0
Last commit
last month

What is it?

QingIcon is a UI icon library aimed at AI, cloud, and internet products. It offers more than 3900 icons across 34 categories in a Line style, with Fill variants still in progress. All icons share the same grid and visual weight so they can be mixed without visual mismatch.

Icons can be browsed, searched, copied, and downloaded on the website, which supports SVG, PNG, and WebP downloads and one-click copy of SVG, React, Vue, or DataURL output. Search covers 137,235 bilingual Chinese and English keywords, with Chinese segmentation and fuzzy matching. Stroke, size, and color can be adjusted before export.

For developers, the project provides the qingicon-react and qingicon-vue npm packages with one component per icon and tree-shaking support, plus a qingicon-mcp server that lets AI coding tools such as Cursor and Claude Code search icons and generate component code. A Figma plugin is also available.

Key features

  • 013900+ icons in 34 categories, with a Line style available now
  • 02Uniform grid and visual weight across all icons
  • 03Bilingual Chinese and English keyword search with fuzzy matching
  • 04React and Vue components with tree-shaking and TypeScript support
  • 05MCP server for generating icon code inside AI coding tools
  • 06Export to SVG, PNG, WebP, or copy as React, Vue, or DataURL

Use cases

  • Building UI for AI products that need icons for models, agents, and prompts
  • Designing cloud consoles or SaaS dashboards with consistent server and network icons
  • Adding icons to React or Vue projects through npm components
  • Letting AI coding assistants pick and insert icons while generating front-end code

Quick start

  1. 1

    Install the React component package from npm

    npm install qingicon-react
  2. 2

    Install the Vue component package from npm

    npm install qingicon-vue

Things to know

  • Sketch style is only available on the website and Figma plugin, not in the npm packages or MCP.
  • Fill style variants are still being drawn and are incomplete.
  • Maintained as a non-profit project by a single author.

In collections

Frontend frameworks & UI components

Topics

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

FAQ

What is qingicon-open?
Free, open-source neutral-style UI icon set of 3900+ icons for AI, cloud and web products, with React and Vue components. QingIcon is a UI icon library aimed at AI, cloud, and internet products. It offers more than 3900 icons across 34 categories in a Line style, with Fill variants still in progress. All icons share the same grid and visual weight so they can be mixed without visual mismatch.
Is qingicon-open free to use? What license does it have?
qingicon-open is open source under the Apache-2.0 license. Check the license terms before using it in commercial products.
Is qingicon-open still maintained?
Updated within 6 months. The last commit to qingicon-open was on Oct 8, 2026.
What can I use qingicon-open for?
Building UI for AI products that need icons for models, agents, and prompts Designing cloud consoles or SaaS dashboards with consistent server and network icons Adding icons to React or Vue projects through npm components Letting AI coding assistants pick and insert icons while generating front-end code
How do I install qingicon-open?
Install the React component package from npm: npm install qingicon-react Install the Vue component package from npm: npm install qingicon-vue
Where can I get qingicon-open?
The source code and installation instructions are on GitHub: https://github.com/asorn/qingicon-open

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects