asorn/qingicon-open

これは何？

主な機能

• 0134カテゴリに3900個以上のアイコンを収録。現在はLineスタイルを提供
• 02すべてのアイコンでグリッドと線の太さを統一
• 03中国語と英語のキーワード検索に対応し、あいまい検索も利用可能
• 04tree-shakingとTypeScriptに対応したReact・Vueコンポーネント
• 05AIコーディングツール内でアイコンコードを生成できるMCPサーバー
• 06SVG、PNG、WebP形式でのエクスポートや、React、Vue、DataURL形式でのコピーに対応

ユースケース

• モデル、エージェント、プロンプト用のアイコンが必要なAIプロダクトのUI構築
• サーバーやネットワークのアイコンを統一して使うクラウドコンソールやSaaSダッシュボードのデザイン
• npmコンポーネントを使ったReact・Vueプロジェクトへのアイコン追加
• AIコーディングアシスタントに、フロントエンドコードの生成中にアイコンを選んで挿入させる

クイックスタート

1. 1

   npmからReactコンポーネントパッケージをインストールする

   npm install qingicon-react
2. 2

   npmからVueコンポーネントパッケージをインストールする

   npm install qingicon-vue

使う前に知っておきたいこと

• !SketchスタイルはウェブサイトとFigmaプラグインでのみ利用でき、npmパッケージやMCPでは利用できません。
• !塗りつぶしスタイルのバリエーションは現在作成中のため、まだ未完成です。
• !非営利プロジェクトとして、個人の作者が運営しています。

収録されている特集

トピック

よくある質問

qingicon-open とは？

AI・クラウド・Webプロダクト向けの、ReactとVueコンポーネントを備えた3900個以上の無料オープンソースUIアイコンセット。 QingIconは、AI、クラウド、インターネット関連のプロダクト向けUIアイコンライブラリです。Lineスタイルのアイコンを34カテゴリにわたって3900個以上収録しており、Fillバリエーションは現在追加作業中です。すべてのアイコンでグリッドと線の太さが統一されているため、組み合わせても見た目に違和感がありません。

qingicon-open は無料で使えますか？ライセンスは？

qingicon-open は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

qingicon-open は今もメンテナンスされていますか？

半年以内に更新あり。qingicon-open の最終コミットは 2026年10月8日 です。

qingicon-open は何に使えますか？

モデル、エージェント、プロンプト用のアイコンが必要なAIプロダクトのUI構築 サーバーやネットワークのアイコンを統一して使うクラウドコンソールやSaaSダッシュボードのデザイン npmコンポーネントを使ったReact・Vueプロジェクトへのアイコン追加 AIコーディングアシスタントに、フロントエンドコードの生成中にアイコンを選んで挿入させる

qingicon-open のインストール方法は？

npmからReactコンポーネントパッケージをインストールする: npm install qingicon-react npmからVueコンポーネントパッケージをインストールする: npm install qingicon-vue

qingicon-open はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/asorn/qingicon-open