ジェネレーター・ファミリー

アイコンギャラリー・ジェネレーター

厳選されたコンパクトなSVGアイコンライブラリを検索し、スタイリングをリアルタイムでプレビュー。アイコンを1つずつコピーしたり、デザインシステムやドキュメントサイト向けに再利用可能なスプライトシートをエクスポートしたりできます。

  • 検索タグ付きの組み込みラインアイコン24種
  • サイズ、線幅、色、背景のリアルタイム制御
  • 個別アイコンのコピーまたはダウンロード
  • 選択したアイコンを1つのSVGスプライトに一括出力

アイコンのルールを設定する

すべての設定はブラウザ上で即座に適用されます。サイズはピクセル単位、線幅は小数点第1位まで調整可能です。エクスポートされたシンボルはcurrentColorを保持するため、後でCSSで再配色できます。

名前のほか、コマース天気メディアなどのタグに一致します。

エクスポートするアイコンを選択する前に、ギャラリーをフィルタリングできます。

英数字とハイフンのみ。無効な文字は自動的に削除されます。

許可範囲: 16〜256ピクセル

許可範囲: 1.0〜4.0

小さいサイズでの視認性を保つため、角は丸いままになります。

#16202Bのような3桁または6桁の16進数を使用してください。

ギャラリーのプレビュー専用です。ダウンロードしたSVGは透明のままです。

エクスポートされるSVGは常に透明キャンバスを使用します。

エクスポート用に0個のアイコンが選択されています。

インラインSVGをコピーしてすぐに使用するか、複数のアイコンを選択して以下のスプライトファイルを生成します。

0 件表示
0 件選択済み

スプライト・エクスポート

バンドル出力には、選択した各アイコンにつき1つの<symbol>が含まれます。後で<use href="#icon-name">を使用して参照できます。何も選択されていない場合、エクスポート機能は無効になります。

1つ以上のアイコンを選択して、スプライトのプレビューを生成してください。


    

仕組み

このギャラリーはページ内に直接保持されたインラインSVGを使用しています。入力値はサニタイズされ、安全な範囲内に制限された上で即座に再描画されるため、プレビューとエクスポート内容が常に同期します。

1. ライブラリをフィルタリング

キーワード検索とカテゴリフィルタを使用してアイコンを絞り込みます。検索はアイコン名とタグの両方に一致するため、広範な用語でも機能します。

2. 見た目を調整

サイズ、線幅、端の形状、プレビュー色をすべてのアイコンに一括適用できます。背景色のプレビュー機能により、透明度を損なうことなくコントラストを確認できます。

3. 必要なものをエクスポート

個別のアイコンのコピーやダウンロードのほか、セットを選択してスプライトシートを生成できます。IDは選択した接頭辞を使用し、安全な小文字形式に調整されます。