Figma アイコンの入れ方についてまとめてみた！

WEB制作

はじめに

UI/UXデザインにおいてアイコンは、視覚的な伝達力を高める重要な要素です。
しかし、「Figmaでどうやってアイコンを追加するの？」「商用利用は大丈夫？」といった疑問を持つ方も少なくありません。

本記事では、Figmaで商用利用可能なアイコンを追加する方法と、利用する際のポイントについてわかりやすく解説します。

Figmaでアイコンを使用するメリット

■ ベクター形式で自由に編集可能

FigmaではSVGやその他ベクター形式のアイコンを使用できるため、拡大縮小しても画質が劣化しません。
また、色・線の太さ・サイズなども自由にカスタマイズできるのが魅力です。

■ 商用利用可能なアイコンが豊富

Googleの「Material Icons」や「Font Awesome」など、無料かつ商用利用OKなアイコンライブラリと連携が可能です。
Figma Communityには、公式・非公式を問わず豊富なアイコンセットが多数公開されており、プロジェクトに応じて使い分けられます。

■ チームでの共同作業がスムーズ

Figmaはクラウドベースのデザインツール。アイコンの変更・追加をチーム全体にリアルタイムで共有できるため、制作スピードが格段にアップします。

Figmaでアイコンを追加する方法

─ プラグインを活用して手軽に挿入！

Figmaでは、プラグインを使うことで、商用利用可能なアイコンを手軽に検索・追加できます。ここでは、プラグインを使った基本的な操作手順をご紹介します。

Step 1｜プラグインをインストールする

  1. Figmaを開き、左側サイドバーの最下部「Plugins」タブをクリック

  2. 検索バーに「Icons」または「アイコン」と入力

  3. 以下のような人気プラグインの中から使いたいものを選びましょう：

    • Material Design Icons

    • Font Awesome Icons

    • Iconify（複数ライブラリを横断的に利用可能）

  4. 「Install（インストール）」をクリックして追加

Step 2｜プラグインを使ってアイコンを挿入する

    1. デザイン中のFigmaファイルを開く

    2. 画面上部メニューの「Plugins（プラグイン）＞ インストール済みのプラグインを選択」

    3. 表示された検索バーに、使いたいアイコンのキーワードを入力（例：「search」「menu」「cart」など）

    4. 気に入ったアイコンをクリックすると、Figmaのキャンバスに自動で挿入されます

 

SVGファイルを直接インポートする方法

─ 独自性の高いデザインが必要な場合に有効

SVGファイルを手動でFigmaにインポートする方法は、最も基本的かつ柔軟性の高い手段ですが、工数がかかるため、効率性重視のワークフローにはあまりおすすめされません。
特に、Figmaのプラグインを使えば検索〜配置まで一括で行えるため、多くのプロジェクトではそちらの方法が推奨されます。

ただし、特定のブランドスタイルに合わせたカスタムアイコンが必要な場合や、独自性のあるアイコンを使いたい場合には、この方法が適しています。

  1. 商用利用可能OKなアイコンをダウンロード

  2. Figmaを開き、上部メニューから「File ＞ Place Image」を選択し、ダウンロードしたSVG形式のファイルをアップロード

まずは、商用利用可能なアイコンサイトから、使いたいアイコンをSVG形式でダウンロードしましょう。

おすすめのアイコンサイト：

  • Flaticon（商用利用OK、クレジット表記付き）

  • Iconfinder（有料・無料あり）

  • Heroicons（Tailwind公式・MITライセンス）

  • SVGRepo（フリー素材多数）

 

Figmaのデフォルトコンポーネントを使用する

─ アセットパネルからそのまま使えるアイコン活用術

Figmaには、初期状態でも使える「デフォルトコンポーネント（アセット）」が用意されており、簡単にアイコンやUIパーツを追加することができます。

特に、デザインシステムやUIテンプレートをベースにしたプロジェクトファイルを使用している場合、アイコンもあらかじめコンポーネント化されていることが多く、検索＆追加の操作だけですぐに使えるのが特徴です。

Step 1｜アセットパネルを開く

  1. Figmaファイルを開く

  2. 左側のサイドバーから「Assets（アセット）」タブを選択

Step 2｜アイコンを検索

  • アセット内にある検索バーに、使いたいアイコンの名前（例：「search」「menu」「home」など）を入力

  • 表示されたアイコンセットやコンポーネントの中から、目的に合ったものを探します。

商用利用可能なアイコンサイト一覧

Figmaで安心して使える、無料＆有料アイコン素材サイトまとめ

Figmaでデザインに使用するアイコンは、商用利用可能であることが必須条件です。ライセンスを確認せずに使用すると、著作権トラブルの原因になる可能性があります。

ここでは、商用利用が許可されている信頼性の高いアイコンサイトを、無料・有料に分けてご紹介します。

🔓 無料で使えるアイコンサイト（商用利用OK）

サイト名 特徴 URL
Google Material Icons Google公式の無料アイコンセット。軽量で使いやすく、Figmaプラグインでも利用可能。 fonts.google.com/icons
Font Awesome（Free） Web・UIデザイン定番のアイコン。無料版でも基本的なアイコンが豊富に揃う。 fontawesome.com
Flaticon 世界最大級のアイコンライブラリ。無料でも多数使えるが、クレジット表記が必要（Proプランで非表示可）。 flaticon.com

💼 有料アイコンサイト（高品質・プロ向け）

サイト名 特徴 URL
Noun Project 幅広いカテゴリのシンプルで高品質なアイコンを提供。単品購入・サブスク両方対応。 thenounproject.com
Icons8 デザインツール連携に強く、MacアプリやFigmaプラグインも提供。無料版あり。 icons8.com
Shutterstock Icons 写真素材で有名なShutterstockのアイコン版。商用利用前提のプロ品質。 shutterstock.com

著作権とライセンスには十分な注意を

商用プロジェクトでアイコンを使用する際は、著作権とライセンス条件の確認が必須です。たとえ無料のアイコンであっても、使用方法によっては法的なリスクが生じることがあります。

✅ チェックしておきたいポイント：

  • クレジット表記の必要性
    　例：「Designed by Flaticon」などの表記が求められるケースがあります。

  • アイコンの加工・再配布の可否
    　カスタマイズやプロジェクトでの再利用時に制限がある場合があります。

  • 用途制限の有無（商用OKかどうか）
    　個人利用はOKでも、営利目的での使用が禁止されている場合があります。

🔒 ライセンスに関する情報は、必ず各サイト・各アイコンの配布ページで確認しましょう。

まとめ｜Figmaでのアイコン活用をマスターしよう！

Figmaで商用利用可能なアイコンを追加する方法には、以下のような選択肢があります：

  • ✅ プラグインを活用して簡単に挿入

  • ✅ SVGファイルを直接インポートしてカスタマイズ

  • ✅ デフォルトコンポーネント（アセット）から素早く利用

さらに、商用利用可能なアイコンサイト（Google Material Icons、Font Awesome、Flaticon など）を活用し、ライセンス条件を守ることが、安全でプロフェッショナルなデザインには欠かせません。