🎨
svg icon search,
フリーアイコン検索 SVG / 商用無料
商用利用可能な2,200種以上のオープンソースアイコン（Lucide・Heroicons）を横断検索。
サイズや色をカスタマイズして、SVG・React・Vueコードをワンクリックでコピー。
🔍
複数セット横断検索
2200種以上のフリーアイコン
📋
即コピー＆保存
SVG/React/Vue対応
🎨
カスタマイズ自由
サイズ・色・線の太さを変更
| ライセンス: Lucide (ISC) / Heroicons (MIT)
選択中のアイコン
🔒すべてのデータはブラウザ内で処理されます。サーバー通信はありません。
about,
概要
SVGアイコン検索ツールは、Lucideアイコンセットを横断検索し、SVGコードをワンクリックでコピーできるツールです。サイズ・カラー・ストローク幅のカスタマイズも可能で、React/Vue向けのインポートコードも生成します。すべての処理はブラウザ内で完結します。
how to,
使い方
STEP 1
キーワードで検索
入力欄にアイコン名（arrow, homeなど）を入力して絞り込みます。
STEP 2
選択してカスタマイズ
アイコンをクリックしてサイズ・カラー・ストローク幅を調整します。
STEP 3
コードをコピー
SVG・React・Vueのコードをコピーしてプロジェクトに貼り付け。
glossary,
用語集
- SVG（Scalable Vector Graphics）
- XMLベースのベクター画像形式。スケーラブルでWebに最適。
- アイコンセット
- 統一されたデザイン言語でまとめられたアイコン群。
- Lucide
- オープンソースのSVGアイコンセット（1500+）。ISCライセンス。Beautiful & consistent icons.
- Heroicons
- Tailwind CSSチームが作成したSVGアイコンセット。MITライセンス。
- viewBox
- SVGの座標系を定義する属性。スケール変更時に比率を維持する。
- stroke-width
- SVGのストローク（線）の太さを指定するプロパティ。
- React Component
- JavaScriptのReactフレームワーク向けにコンポーネント形式でアイコンを使用する方法。
- currentColor
- SVGのstroke/fill属性をCSSのcolor値に連動させるキーワード。
faq,
FAQ
- Q.アイコンのライセンスは？
- Lucideはまた収録アイコンはISCライセンス、HeroiconsはMITライセンスです。商用プロジェクトでも無料で利用できます。
- Q.何件のアイコンが収録されていますか？
- 本ツールはLucideアイコンの主要なものを収録しています。
- Q.データはサーバーに送信されますか？
- いいえ。すべてブラウザ内で処理されます。
use cases,
活用シーン
🎨
Webデザイン
Webサイト・UIのアイコン選定に。
💻
Reactプロジェクト
コンポーネントコードを即コピーして導入。
📐
デザインモックアップ
フィグマに貼る前にブラウザでプレビュー。
📚
ライブラリの比較
Lucide vs Heroiconsを横断比較。