SVG.LA

AI SVGアイコン生成ツールで、伝わる記号を形に

ボタンやメニューに使う記号を文章で指定。線画か塗りかを決め、余白と比率を確認しながら、Studioで編集可能なSVGへ仕上げましょう。

文章から生成線画・塗りを指定Studioで調整
AI の参考画像は 7.5 MB 以下、各辺 8000 ピクセル以下にしてください。

参考画像は任意です。テキストだけで SVG を生成することも、画像を参考に生成することもできます。

AI SVGアイコン生成ツールで、伝わる記号を形に
参考画像は任意です。テキストだけで SVG を生成することも、画像を参考に生成することもできます。
アイデアを試す

生成にはログインとクレジットが必要です。説明の引き継ぎだけでは自動生成されません。

AI SVGアイコン生成ツール:同じアイコン群の二つのスタイル

これらのベクター作例は、同じ六つの UI モチーフをアウトラインと塗りつぶしで表現しています。24 px グリッド向けに統一した指示を考える参考になります。

アウトライン · 24 px
統一された六つのアウトラインアイコン:ベル、ブックマーク、アップロードクラウド、家、ハート、フォルダー

軽やかなアウトラインのセット

ベル、ブックマーク、アップロードクラウド、家、ハート、フォルダーの見た目の重さを揃えています。セットを設計するときは、線幅、角、余白を一緒に確認してください。

統一された六つのアウトライン UI アイコン:ベル、ブックマーク、アップロードクラウド、家、ハート、フォルダー。24 px グリッド、一定の線幅、丸い角、文字なし。

概要

AI SVGアイコン生成ツールの役割

文章から記号の案を作り、パスで調整できる状態へ進めます。操作、状態、分類など、一つの意味を小さな面積で伝えるための出発点です。

意味を一つに絞る

保存、予約確認、分類など、何を認識してほしいかを明確にします。

線画か塗りかを選ぶ

線画は線の太さと隙間、塗りは外形と内側の抜きが読みやすさを左右します。

周囲のUIと比べる

既存アイコンとの比率、余白、見た目の重さを確認して仕上げます。

説明と確認でアイコンを整える

生成した案を、利用する場所に合わせて判断します。

形の条件を文章で指定

丸い角、少ない色、幾何学的な形など、矛盾しない条件を組み合わせます。

パスと色を調整

余分な要素を減らしたり、比率を直したりして、伝えたい記号に近づけます。

小さい表示で点検

大きなプレビューだけで判断せず、ボタンや一覧の実寸でも確認します。

どんなUIに使える?

一つずつ意味を確認し、必要なら文字のラベルも添えましょう。

操作のボタン

検索、送信、保存などの記号を検討。慣れない操作には分かりやすい説明も付けます。

カテゴリの目印

機能やサービスを表す形を探索。細かい絵より、すぐ認識できる特徴を優先します。

状態を伝える補助

完了や空の状態に記号を添え、色だけに依存せず意味が伝わるかを確認します。

文章からアイコンを作る手順

主役と形の条件を決め、試した結果を見比べます。

題材とスタイルを入力

対象、線画か塗りか、色数を決めます。入れない細部も具体的に伝えましょう。

Studioで生成

説明を引き継ぎ、ログインして消費クレジットを確認。準備ができたら生成を開始します。

実寸で仕上げ

拡大表示と実寸を比較。隙間や比率を調整し、完成したSVGを保存します。

AI SVGアイコン生成ツールへの伝え方

題材、描き方、小さな表示への配慮をまとめます。

描ける言葉で具体的に説明

「開いた封筒の右下に、小さなチェックを一つ」と、物と配置を書きます。次に「均一な線、丸い角、一色、文字なし」と作り方を追加。新しい、上品といった抽象的な形容だけより、比較できる条件になります。二つの要素を入れるなら主役を明確にし、小さな物を多数並べる構図は避けましょう。場面全体や補助イラストが目的なら、AIでSVGを生成するページで背景と主役の関係まで含めて構図を説明できます。

線画と塗りの違いを意識

線画では線端と線同士の距離、塗りでは外形と抜きの形を確認します。UIに合う方式を決め、試行中も同じ条件を保つと比較しやすくなります。複数の記号を揃える場合は、共通の説明を使って一つずつ確認してください。余白と視覚的な重さの共通基準を決め、それぞれの記号を近づけるよう調整します。

塗りつぶし · 24 px
統一された六つの塗りつぶしアイコン:ベル、ブックマーク、アップロードクラウド、家、ハート、フォルダー

同じモチーフを塗りのシルエットにする

塗りつぶした形は小さな表示で存在感を出しやすくなります。六つの記号の分かりやすさと、セット全体の見た目の重さを比較してください。

統一された六つの塗りつぶし UI アイコン:ベル、ブックマーク、アップロードクラウド、家、ハート、フォルダー。24 px グリッド、バランスの取れたシルエット、統一した丸い角、文字なし。

24ピクセルでも読み取れる?

AI SVGアイコン生成ツールの結果は、実際の表示サイズで判断します。例えば24ピクセルの枠に置き、細い隙間が消えないか、二本の線が重なって見えないかを点検。明暗の背景でもコントラストを確認しましょう。パスを拡大縮小できても、細かすぎる構図まで自然に読みやすくなるわけではありません。

一度に変える条件を絞る

雲の穴を広げる、チェックを大きくするなど、変更を一つに絞ると効果が分かります。上向き矢印が送信に見えるか保存に見えるかなど、意味も使用場面で確認。情報を担うアイコンには適切な代替テキストやラベルを用意し、飾りなら利用先でその扱いを設定します。アクセシビリティは絵の形だけでは決まりません。既存のラスター記号も組に加えるなら、先にPNGをSVGに変換し、できたパスをほかのアイコンに合わせて調整できます。

よくある質問

AI SVGアイコン生成ツールのよくある質問

描き方、統一感、Studioでの生成について。

線画と塗りを選べますか?

説明で指定できます。線の見た目の太さ、角の形、色数も伝え、結果が条件に合うか確認してください。

小さくても分かる形にするには?

題材を絞り、細部を減らし、隙間を広く取ります。SVGでも実寸での確認は必要です。

参考画像から作れますか?

画像がある場合はImage to SVGでPNG、JPEG、WebP、GIFを1枚、10 MiB以下で引き継げます。

アイコン一式をまとめて揃えられますか?

統一されたセットの自動作成は保証しません。共通条件で一つずつ準備し、太さや比率を見比べて整えます。

生成後に編集できますか?

Studioで形や色の調整を続けられます。利用するUIやソフトでも開いて確認してください。

クレジットはいつ必要ですか?

ログイン後、Studioで生成するときに必要です。消費量を確認してから開始でき、画面移動だけでは生成されません。