Skip to main content

アイコン検索 サイズ、色、ストロークが調整可能なオープンソースのSVGアイコンを検索してカスタマイズします。

アイコン検索 illustration
🎨

アイコン検索

サイズ、色、ストロークが調整可能なオープンソースのSVGアイコンを検索してカスタマイズします。

1

アイコンを検索

キーワードを入力して、複数のカテゴリから名前でフィルタリングされたアイコンを見つけます。

2

外観をカスタマイズ

アイコンの色、サイズ、ストローク幅を調整してデザインに合わせます。

3

SVG をコピー

アイコンをクリックして、カスタマイズされた SVG コードをコピーします。

Loading tool...

What Is アイコン検索?

アイコン検索ツールを使用すると、オープンソースのSVGアイコンを閲覧、カスタマイズ、およびコピーできます。アイコンは、ナビゲーション、アクション、ステータスインジケーター、視覚的なコミュニケーションのために不可欠なUI要素です。このツールには、矢印、アクション、UI、メディア、コミュニケーション、およびファイルの6つのカテゴリにわたるアイコンが含まれています。各アイコンはストロークベースのSVGであり、好みの色、サイズ、ストローク幅でカスタマイズできます。キーワード検索を使用して必要なアイコンを見つけることができます。アイコンをクリックすると、カスタム設定が適用されたSVGコードがコピーされます。生成されるSVGはクリーンでアクセス可能であり、HTML内または独立したSVGファイルとして直接使用する準備ができています。

Why Use アイコン検索?

  • 組織化されたアイコンカテゴリ:矢印、アクション、UI、メディアなど
  • キーワード検索による迅速なアイコン発見
  • 色、サイズ、ストローク幅のカスタマイズ
  • クリーンでアクセス可能な SVG コードを 1 クリックでコピー

Common Use Cases

UI 開発

ボタン、ナビゲーション、インターフェイス要素用のアイコンを見つけ、カスタマイズします。

ラピッドプロトタイピング

モックアップやプロトタイプを作成する際に、ウェブを検索せずに迅速にアイコンを取得します。

デザインの一貫性

一貫したインターフェイス設計のために、一致するストロークベースのアイコンを使用します。

ドキュメント

ドキュメント、ガイド、README ファイルに視覚的なアイコンを追加します。

Technical Guide

SVGアイコンでは、<svg>要素とviewBoxを使用して表示サイズに依存しない拡大縮小を行います。ストロークベースのアイコンでは、stroke属性を色、stroke-width属性を線幅、stroke-linecapおよびstroke-linejoin属性を線端に使用します。fill="none"属性により、ストロークのみが表示されます。SVGアイコンは、直接CSSスタイリングを行うためにHTML内でインライン使用することができます。また、<img>ソースとして単純な使用や、データURI経由でのCSS背景画像としても使用できます。アクセシビリティのため、装飾用のアイコンにはrole="img"およびaria-label属性を追加し、可視性のあるテキストラベルを持つ純粋に装飾用のアイコンにはaria-hidden="true"属性を追加します。SVGアイコンは、高品質を失うことなく任意のサイズに拡大縮小できます。アイコンシステムの場合、SVGスプライトシートまたはSVG定義を参照するアイコンコンポーネントを使用することを検討してください。currentColorキーワードにより、アイコンが親要素のテキスト色を継承できるようになります。

Tips & Best Practices

  • 1
    一貫したスタイリングのためにストロークベースのアイコンを使用する
  • 2
    stroke color を currentColor に設定してテキスト色を自動的に継承する
  • 3
    アイコンサイズを一致させる - 24px は一般的な標準サイズです
  • 4
    アクセス可能なアイコンボタンに aria-label を追加します (可視性のあるテキストがない場合)

Related Tools

Frequently Asked Questions

Q これらのアイコンは無料で使用できますか?
はい、これらのツール内のすべてのアイコンはオープンソースであり、個人および商用での使用が自由です。
Q アイコンの色を変更できますか?
はい、カラーピッカーを調整してすべてのアイコンのストローク色を変更します。
Q SVG アイコンをプロジェクトで使用する方法は?
SVG コードを直接 HTML に貼り付けます。または <img> src として使用したり、React コンポーネントに変換します。
Q これらのアイコンを React に追加できますか?
はい、SVG コードを React コンポーネントに貼り付けます。または SVG-to-React 変換ツールを使用します。
Q アイコンをアクセス可能にする方法は?
スタンドアロン アイコン ボタンには aria-label を追加します。可視性のあるテキストに伴う場合は、aria-hidden="true" を使用します。

About This Tool

アイコン検索 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.