コンテンツへ移動
バッジ 登録不要 | 100%ブラウザ完結処理

SVGアイコンマトリックス&バッジジェネレーター

カスタムのスクエア型/六角形フレーム、多段グラデーション、ステータスバッジ、即時のフレームワーク書き出しによるSVGアイコンのパラメトリック生成。

100%
図形を追加:

Direct canvas editing: select a part, then drag to move. Use the picker’s Replace selected or Add layer modes to build a composite SVG.

X: 12.0 | Y: 12.0 WCAG AAA | 17.4:1
Communication Import Export - Material Icons iconFree Communication Import Export vector icon from the Material Icons open-source icon library; outline style, Apache-2.0 licence, viewBox 0 0 24 24, 409 bytes.
ベクターのプロパティ: material-round-communication-communication-import-export | SVGエディターで編集 24x24 | 0.3 KB
サイズのリアルタイム確認:
16px
24px
32px
暗いUI
icon-generator

複数アイコンのスプライトトレイ

調整したアイコンを複数固定し、1つのシンボルシートにまとめます。

まだアイコンが固定されていません。固定すると1つのシートにまとめられます。

AIプロンプトとベクター改善

AIプロンプトを作るか、キャンバス上のアイコンを改善します

プリセットを選び、プロンプトをAIツールにコピーするか、キャンバス上のアイコンを改善してください。

技術ドキュメントと設計ガイド

SVGアイコンマトリックス&バッジジェネレーター

カスタムのスクエア型/六角形フレーム、多段グラデーション、ステータスバッジ、即時のフレームワーク書き出しによるSVGアイコンのパラメトリック生成。

対応する入力元

カタログのベクターアイコン、独自SVGパス、幾何学バッジプリセット

書き出しとコンパイルの対象

3D照明付きSVG、512/1024 px PNG・WebPバッジ、構造化AIプロンプト

技術的な効果と性能

重いラスター画像の代わりに2 KB未満の鮮明なベクターバッジを生成

SVGアイコンマトリックス&バッジジェネレーターの使い方

  1. 1

    ライブラリからベースアイコンを選ぶか、独自のSVGパスを読み込みます。

  2. 2

    バッジ形状(スクワークル、角丸四角形、円形)と枠線を選択します。

  3. 3

    グラデーションと3Dライティングを適用し、必要に応じてバッジ文字を追加します。

  4. 4

    完成したアイコンを目的のサイズでまとめて書き出します。

入力例

ランタンのアイコンパス+バッジ文字「NEW」

出力例

グラデーション照明付き512 px PNGと対応するSVGおよびCSS背景

制限事項

  • バッジ文字の配置は選択フォントに依存し、極小サイズでは見え方が変わる場合があります。
  • このジェネレーターのラスター書き出しは1辺最大1024 pxです。
  • 1回の実行で1つのバッジを生成します(複数アイコンの一覧化にはスプライト生成を使用)。
  • 読み込むSVGは1ファイル最大2 MBです。

このワークスペースで開く・貼り付けるファイルはブラウザ内で処理されます。サーバーへは何もアップロードされません。

このツールのガイド

76,166個のベクターアイコンを検索するには入力してください...

移動 | Enter で開く すべてのアイコンを見る

比較

ライセンス 商用利用 クレジット 変更と色替え
MIT許可パッケージに通知許可
ISC許可パッケージに通知許可
Apache-2.0許可通知ファイルとともに必須許可
CC BY 4.0許可クレジット必須許可
CC-BY-SA-4.0許可同一条件で配布同一条件で配布
Trademark / Brand参照目的のみ権利者の指針制限あり

アイコンプレビュー