アイコン画像ジェネレーター

約15,000種以上のフリーアイコンを、色もサイズも自由自在に画像化。
Webデザインやアプリ開発に必要な画像素材をブラウザ上で瞬時に生成します。

設定パネル
Material | Bootstrap | Remix | Phosphor | Tabler
回転
プレビュー
512x512

フリーアイコン画像ジェネレーターの特徴と使い方

5大ライブラリを横断検索

Google Material Symbols、Bootstrap Iconsに加え、Remix Icon、Phosphor、Tablerといった世界標準の5大アイコンセット（計15,000種類以上）からお好みの形を瞬時に検索できます。

ピクセルパーフェクトな余白調整

独自のオートクロップ機能により、フォント特有の見えない余白を完全に排除。「パディング 0%」に設定すれば、キャンバスの端から端まで隙間なくアイコンを最大化できます。

アプリアイコンの一括ZIP生成

iOSのApple Touch Iconや、AndroidのPWAスプラッシュ画面に必要な16pxから1024pxまでの主要21サイズを、ワンクリックですべて生成しZIPファイルにまとめてダウンロード可能です。

PNG・SVG・faviconの使い分け

同じアイコンでも、使う場所によって向いている形式が違います。迷ったら、画像として置くなら PNG、Webページに軽く載せるなら WebP、サイトのタブに出すなら ICO を選んでください。

ボタン できるもの 向いている使い道
PNG 背景を透過できる画像（16〜4096px） 資料・SNS・アプリのアイコンなど、画像を置ける場所全般
WebP PNG と同じ見た目で、ファイルが軽い画像 Webページに載せる画像
ICO 16・32・48px の3サイズを1つにまとめた favicon.ico ブラウザのタブやブックマークに出るファビコン
HTML用 (SVG) アイコンフォントを読み込み、文字として描く SVG のコード HTML に直接貼り、コードの色や大きさを書き換えて使うとき（表示にはインターネット接続が要る）
CSS用 (Base64) WebP 画像を埋め込んだ background-image の CSS 画像ファイルを置かずに CSS だけでアイコンを出したいとき
ZIP 16〜1024px の21サイズの PNG 一式 iOS・Android アプリや PWA のアイコン

サイトのファビコン一式をそろえるなら、ICO に加えて 180px（Apple Touch Icon）と 192px・512px（Android・PWA）の PNG も書き出しておくと、スマホのホーム画面に追加したときもきれいに表示されます。

商用利用とクレジット表記

アイコンセット ライセンス
Material Symbols（Google）Apache License 2.0
Bootstrap IconsMIT License
Remix Icon（4.2.0）Apache License 2.0
Phosphor IconsMIT License
Tabler IconsMIT License

5つとも、商用利用が認められたオープンソースのライセンスです。これらのライセンスが著作権表示とライセンス文の同梱を求めているのは、主にアイコンのデータ（フォントや SVG のファイル）そのものを配布する場合です。Google も Material Symbols について、アプリの「このアプリについて」画面での表記は歓迎するが必須ではない、と説明しています。 Webサイトやアプリ、資料の中で画像として使うぶんには表記なしで使われるのが一般的ですが、アイコンを素材集として配布・販売するような使い方をするときは、各ライセンスの本文を確認してください。

よくある質問 (FAQ)

商用利用できます。Webサイトやアプリ、資料の中で画像として使うぶんには、クレジット表記は一般に必要ありません。
当ツールは「Google Material Symbols」「Remix Icon」（Apache License 2.0）と「Bootstrap Icons」「Phosphor Icons」「Tabler Icons」（MIT License）を使っていて、いずれも商用利用が認められています。 アイコンを素材集として配布・販売するなど、アイコンのデータそのものを配る場合は、各ライセンスの本文に従って著作権表示を添えてください。

「ICO保存」ボタンをクリックして生成される favicon.ico には、Webブラウザで標準的に使用される 16x16px, 32x32px, 48x48px の3つのサイズが自動的にパッキング（同梱）されています。これにより、どんなデバイスのタブやブックマークバーでも鮮明に表示されます。

影が画像の枠外にはみ出してしまう場合は、設定パネルの「パディング (余白率 %)」のスライダーを右に動かして数値を大きくしてください。アイコンの周囲に十分な余白が確保され、影がきれいにキャンバス内に収まるようになります。

SVGファイルをCSSの背景画像として読み込むと、ブラウザのセキュリティ制限により外部フォントの読み込みがブロックされ、文字化けしてしまいます。
CSSで利用する場合は、「CSS用 (Base64)」ボタンをご活用ください。生成された高品質な画像を、超軽量なWebP形式のBase64（Data URI）に変換してコピーするため、文字化けすることなく一瞬で実装でき、表示速度にも悪影響を与えません。
※HTMLファイル内に直接SVGタグを書き込む場合は「HTML用 (SVG)」ボタンをご利用ください。

このコードは、アイコンフォントをインターネットから読み込んで文字として描く形式だからです。ブラウザで HTML に貼って表示する用途向けで、線の形（パス）は含まれていません。 Illustrator や Figma などで編集したり、オフラインで使ったりする場合は、PNG で書き出すか、各アイコンセットの公式サイトから SVG ファイルをダウンロードしてください。
広告