はじめに

先に結論をお伝えします。Figmaにアイコンを入れる方法は、大きく分けて「SVGファイルを読み込む」「プラグインで検索して挿入する」「ライブラリのコンポーネントから挿入する」の3つです。1点だけ使うならSVGの読み込み、たくさんのアイコンを探しながら配置するならプラグイン、チームで同じアイコンを使い回すならコンポーネント化してライブラリから挿入する方法が向いています。

読み込んだアイコンは色やサイズをあとから変えられますが、商用利用の可否やクレジット表記の要否は配布元ごとに異なります。

本記事ではFigma公式ヘルプの内容をもとに、入れ方、色とサイズの変え方、コンポーネント化、アイコンサイトの選び方を解説します。2026年10月時点の情報で、メニューやボタンの表示名はバージョンによって異なる場合があります。

Figmaでアイコンを使うメリット

ベクター形式なので拡大しても劣化しない

Figmaに読み込んだSVGのアイコンは、画像ではなく編集できるベクターレイヤーとして扱われます。拡大や縮小をしても輪郭がぼやけず、塗りの色や線の太さもブランドカラーに合わせて変更できます。

コンポーネントにすれば使い回しと一括修正ができる

アイコンをコンポーネントにしておくと、配置したアイコンはすべてメインコンポーネントのコピー（インスタンス）になります。メインコンポーネントを修正すれば、インスタンスにも変更が反映されるため、デザイン全体のアイコンを1か所の修正でそろえられます。

チームで同じアイコンを共有できる

Figmaは同じファイルを複数人で編集できるクラウド型のツールです。アイコンをまとめたファイルを共有すれば、メンバーごとのばらつきを防げます。

Figmaにアイコンを入れる3つの方法の比較

SVGやプラグインで入れたアイコンをコンポーネント化し、以降はアセットから挿入する組み合わせも便利です。

SVGファイルを読み込んでアイコンを入れる方法

アイコンをSVG形式でダウンロードする

配布サイトからアイコンをSVG形式でダウンロードします。公式ヘルプでも、SVGは劣化のない形式としてツール間のやり取りにすすめられています。ダウンロード前に、配布ページでライセンスも確認してください。

ドラッグ＆ドロップで読み込む

もっとも手軽なのは、パソコンに保存したSVGファイルをFigmaのキャンバスへドラッグ＆ドロップする方法です。読み込まれたSVGは、画像ではなく編集できるベクターレイヤーに変換されます。

画像/動画ツールで読み込む

ツールバーのシェイプツールのメニューから「画像/動画（Image/video）」を選ぶ方法もあります。ショートカットは、Macが「Shift + Command + K」、Windowsが「Shift + Ctrl + K」です。

1. シェイプツールのメニューから「画像/動画」を選ぶか、ショートカットを押す
2. 読み込みたいファイルを選んで「開く」をクリックする
3. キャンバスをクリックすると、元のサイズのまま新しいレイヤーとして配置される
4. 複数のファイルを選んだ場合は「すべて配置（Place all）」で一度に配置することもできる

コピー＆ペーストで読み込む（読み込めない要素に注意）

ほかのデザインツールで作ったアイコンは、SVGとしてコピーし、Figmaのキャンバスで右クリックして「ここに貼り付け（Paste here）」を選ぶと取り込めます。

注意したいのは、SVGのmarker要素とpattern要素は読み込みに含まれないことです。矢印の先端や模様をこれらで描いたアイコンは見た目が変わる場合があるため、読み込み後に表示を確認しましょう。

プラグインでアイコンを入れる方法

プラグインを探して実行する

アイコン用のプラグインを使うと、Figmaから離れずにアイコンを検索して配置できます。公式ヘルプによる実行手順は次のとおりです。

1. デザインファイルを開き、左側のナビゲーションバーにある「ツール（Tools）」タブをクリックする
2. 「価格とタイプで絞り込む（Filter by price and type）」のアイコンをクリックし、「プラグイン（Plugin）」で絞り込む
3. 最近使ったプラグインやおすすめから選ぶか、上部の検索バーで「icon」などと検索する
4. プラグインをクリックして詳細を開き、「実行（Run）」をクリックする

よく使うプラグインは保存しておくと便利です。最後に使ったプラグインは、Macなら「Command + Option + P」、Windowsなら「Alt + Control + P」で再実行できます。

Iconifyで複数のアイコンセットを横断して探す

Iconifyは、オープンソースのアイコンセットをまとめて検索できる無料のプラグインです。公式ドキュメントによると、30万点を超えるベクターアイコンをSVGとしてFigmaに読み込めます。

クイックインポートのボタンかドラッグで読み込め、色を変えられるアイコンはプラグイン内のカラーピッカーで色を指定できます。

ただし、ライセンスはアイコンセットごとに異なるため、プラグインに表示される作者とライセンスの情報を確認してください。

Lucide Iconsで線のアイコンを入れる

Lucideは線のシンプルなアイコンをそろえたオープンソースのライブラリで、公式サイトでFigma Communityの「Lucide Icons」プラグインが案内されています。ライセンスはISC（一部はFeather由来でMIT）で、配布物には著作権表示と許諾表示を含めることが求められます。

プラグインを使うときの注意点

公式ヘルプでは、プラグインは手動で実行する必要があること、一度に実行できるプラグインは1つだけであること、バックグラウンドでは動作しないことが説明されています。

外部の開発者が作ったものも多いため、詳細画面で提供元を確認してから使いましょう。

アイコンの色とサイズを変える方法

塗りの色を変える

読み込んだアイコンを選択すると、右サイドバーに塗り（Fill）や線（Stroke）の項目が表示されます。色の見本をクリックするとカラーピッカーが開き、塗りの種類、色、不透明度などを変更できます。

複数のレイヤーの色をまとめて変える

複数のアイコンや、複数のパーツでできたアイコンを選択すると、右サイドバーに「選択範囲の色（Selection colors）」が表示されます。使われている色が一覧で並び、色をクリックするとその色の部分をまとめて変更できます。

なお、選択範囲の色には、パターンや画像・動画の塗り、非表示の塗り、マスクは含まれません。

線で描かれたアイコンは「アウトライン化」も検討する

Lucideのような線のアイコンは、塗りではなく線（Stroke）で形が作られています。線の太さは「線幅（Weight）」の欄でピクセル単位で指定できます。

線を図形として扱いたい場合は、右クリックメニューの「アウトライン化（Outline stroke）」で線をベクターオブジェクトに変換できます。なお、SVG形式は中央の線（Center）のみに対応しています。

スケールツールで比率を保ったまま拡大縮小する

アイコンを縦横比を保ったまま拡大・縮小するには、スケールツールを使います。キーボードの「K」を押すか、ツールバーから「スケール（Scale）」を選んで有効にします。

• バウンディングボックスの角をドラッグして拡大・縮小する
• スケールパネルで倍率を選ぶか、数値を入力する
• 幅か高さを変更すると、もう一方が自動で比率に合わせて変わる

スケールパネルのアンカーで、どの位置を基準に大きさを変えるかも選べます。スケールツールでは線の太さやぼかしも一緒に拡大・縮小されます。ロックされたレイヤーや、インスタンスの中のレイヤーはスケールできません。

線の太さを保ったままサイズを変える

線の太さは変えずに大きさだけ変えたい場合は、スケールツールではなく通常の選択状態でバウンディングボックスをドラッグします。

アイコンをコンポーネント化する方法

1つのアイコンをコンポーネントにする

アイコンを選択し、次のいずれかの方法でコンポーネントを作成します。

• 右サイドバーの「コンポーネントを作成（Create component）」をクリックする
• 右クリックして「コンポーネントを作成」を選ぶ
• ショートカット（Mac：Option + Command + K、Windows：Ctrl + Alt + K）を押す

作成したコンポーネントは、レイヤーパネルで紫色のコンポーネントアイコンが付いて表示されます。

複数のアイコンをまとめてコンポーネントにする

複数のフレームやグループ、パスを選択し、選択中の名前の横にあるメニューから「複数のコンポーネントを作成（Create multiple components）」を選ぶと、フレーム、グループ、ブーリアン演算、パスごとに1つずつコンポーネントが作られます。

アセットタブからアイコンを挿入する

コンポーネントにしたアイコンは、左側のナビゲーションバーにある「アセット（Assets）」タブから検索して使えます。ショートカットはMacが「Option + 2」、Windowsが「Alt + 2」です。

1. アセットタブを開く
2. 使いたいライブラリを選ぶ
3. 検索欄にアイコン名（例：search、menu、home）を入力して探す
4. アイコンをキャンバスへドラッグすると、インスタンスとして配置される

Shift + I でアクションメニューを開き、キーボード操作でコンポーネントを検索して挿入することもできます。アセットタブに表示されるのは、そのファイルや有効にしたライブラリのコンポーネントです。

インスタンススワップでアイコンを差し替える

メインコンポーネントを選び、右サイドバーのプロパティから「インスタンススワップ（Instance swap）」を追加すると、中に入れたアイコンを別のアイコンへ差し替えられるようになります。使ってよいアイコンを優先インスタンスとして登録すると候補を探しやすくなります。

商用利用できるアイコンサイトと素材

配布元の公式ページでライセンスを確認できた素材です。条件は変わることがあるため、使う前に最新情報を確認してください。

ライセンスで確認しておきたいポイント

• 商用利用ができるか：個人利用のみ許可されている素材もあります
• クレジット表記が必要か：Font Awesome FreeのアイコンのようにCC BY 4.0で配布されているものは、表記が必要です
• 著作権表示を残す必要があるか：MITやISCのライセンスでは、配布物に著作権表示と許諾表示を含めることが求められます
• 加工や再配布ができるか：色や形の変更、素材としての再配布に制限がある場合があります
• アイコンセットごとの条件：Iconifyのように複数のセットをまとめて扱うプラグインでは、セットごとにライセンスが異なります

よくある質問

Q. FigmaにPNGのアイコンを入れても色を変えられますか？

A. PNGは画像として読み込まれるため、ベクターのように塗りの色を変えることはできません。色を調整したい場合はSVG形式を読み込みましょう。

Q. 読み込んだSVGアイコンの形が一部崩れてしまいます。

A. Figmaでは、SVGのmarker要素とpattern要素は読み込まれません。別の素材を使うか、Figma上で形を整えてください。

Q. プラグインで入れたアイコンは、そのまま商用利用できますか？

A. プラグインで入れたかどうかではなく、アイコン自体のライセンスで決まります。プラグインの表示や配布元の公式ページで条件を確認しましょう。

まとめ

Figmaにアイコンを入れる方法は、次の3つです。

• SVGファイルをドラッグ＆ドロップ、画像/動画ツール、コピー＆ペーストで読み込む
• IconifyやLucide Iconsなどのプラグインで検索して挿入する
• コンポーネント化したアイコンを、アセットタブから挿入する

読み込んだアイコンは、右サイドバーの塗りや線、選択範囲の色で色を変えられます。サイズは、線の太さも一緒に変えるならスケールツール、線の太さを保つなら通常のリサイズ、と使い分けるときれいに仕上がります。よく使うアイコンはコンポーネントにしておくと修正や差し替えが楽になります。商用で使うときは、配布元の公式ページでライセンスを確認してから使いましょう。