574個のアイコンセット — Regular と Solid バリアント、24×24グリッド設計、MIT ライセンス無料
中辛 の解説
Disarto Icons は React（完全な tree-shaking 対応）・Vanilla JS ESM・生 SVG の3パッケージで提供されます。React コンポーネント版では size・color・標準 SVG 属性をサポートし、TypeScript 型も完備されています。Vite・webpack 5+・Rollup・esbuild と連携し、使わないアイコンは自動削除されるため、本番バンドルサイズを最小化できます。デモは公式リポジトリの packages/ 内で完全なインストール・使用方法を確認でき、すぐに実装可能です。
こんなリポジトリです
こんなときに便利です
- React アプリケーションで統一されたアイコンセットを導入し、バンドルサイズを最適化したい場合
- Web デザインシステムで複数プロジェクトと共有する汎用アイコン資産が必要な場合
- SVG スプライトで複数アイコンを1リクエストで配信し、ページ読み込み性能を向上させたい場合
主な機能
ほかとの違い
複数の配布形式（React コンポーネント・ESM オブジェクト・生 SVG）を同一リポジトリで管理し、各々が完全に独立しているため、フレームワークや利用シーン（スタティック vs 動的）に応じて最適な実装方法を自由に選べます。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- Node.js 12+（React・ESM パッケージの場合）
- npm または yarn
すぐに始める
- React プロジェクトの場合、npm でインストールします。
npm install disarto-icons-react
- コンポーネントをインポートして使用します。
import { Play, ArrowUpLeft } from 'disarto-icons-react';
<Play />
<Play size={32} color="#f5721e" />
<ArrowUpLeft size={20} className="icon" />
- Vanilla JS ESM の場合はこちらをインストールします。
npm install disarto-icons
- ESM インポートで使用します。
import { Play, ArrowUpLeft } from 'disarto-icons';
const svgString = Play.toSvg({ width: '32', height: '32', class: 'icon' });
document.querySelector('.icon').innerHTML = svgString;
- 生 SVG ファイルの場合、リポジトリをクローンします。
git clone https://github.com/Disarto/disarto-icons.git
- SVG ファイルを packages/static/icons/ からプロジェクトにコピーして使用します。
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try Disarto/disarto-icons
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2026 年に作成
「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/Disarto/disarto-icons)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る