Figmaへのアイコン挿入は、プラグイン・SVG・コミュニティの3つの方法で完結します。Figmaコミュニティには6,900種類を超える無料アイコンセットが公開されており、この記事では商用利用の可否確認を含めた実務手順を3ステップで解説します。
本記事の情報は2026年09月時点のものです。
▶ 3日で初案件PR
この記事でわかること
Iconifyプラグインを使えば起動からアイコン配置まで3分以内に完了します。商用利用の可否はCC0・MIT・Apache 2.0の3ライセンスで即判定できます。ライセンス記録を制作フローに組み込むことで納品後トラブルをゼロにできます。
今の仕事について、一番近いものは？
この記事の結論
Figmaアイコン挿入の最速ルートは「Iconifyプラグイン」です。起動からアイコン配置まで3分以内に完了し、商用利用可否の確認も検索画面内で行えます。フリーランスが納品後にライセンストラブルを防ぐには、素材選定の段階でライセンス種別を確認する習慣を持つことが、最も確実な対策です。
今日やるべき1つ
Figmaを開き、メニューの「Plugins」からIconifyを検索してインストールしてください（所要時間：3分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| すぐにアイコンを挿入したい | Figmaアイコン挿入は3つの方法で対応 | 5分 |
| 商用利用の可否が不安 | Figmaアイコンは3条件でライセンス確認 | 3分 |
| 自分の状況に合う方法を選びたい | Figmaアイコン挿入は状況別で方法を診断 | 2分 |
| ライセンス失敗パターンを知りたい | Figmaアイコンは2パターンで失敗を予防 | 3分 |
| 実務効率を上げる使い方を知りたい | Figmaアイコン管理は5つの仕組みで効率化 | 5分 |
Figmaアイコン挿入は3つの方法で対応
Figmaには挿入経路が3つあり、それぞれ用途が異なります。方法を選ぶ基準は「スピード重視か」「素材の自由度重視か」の2軸で決まります。
Iconifyプラグインで3分以内に挿入
IconifyはMaterial Design・Font Awesome・Phosphorなど100以上のアイコンライブラリを1つのプラグインから横断検索できるツールです。Figmaの「Plugins」メニューから「Iconify」と検索してインストールし、右クリックメニューまたはプラグイン一覧から起動します。検索欄に「menu」「cart」「star」などのキーワードを入力すると、対応ライブラリのアイコン一覧が表示され、クリック1回でキャンバスに配置されます。
Figma Community Iconsでは6,900種類を超えるアイコンセットを確認できます。アイコンはベクターデータとして挿入されるため、色変更やサイズ調整はFigmaの通常操作で対応できます。Iconifyは「素材探し・挿入・編集」の3工程を1ツール内で完結させられるため、作業時間の削減幅が最も大きい方法です。なお、画像フリーアイコン選びは3条件で即決|商用利用安全サイト8選では、SVGフォーマットでのダウンロードが編集のしやすさに直結する理由も詳しく解説しています。
SVGダウンロードからFigmaへ配置
外部サイト（Flaticon・iconfinder等）からSVGファイルをダウンロードし、Figmaへ取り込む方法です。FigmaメニューのFile > Place Imageを選択し、ダウンロードしたSVGファイルを選ぶと、キャンバス上に配置されます。ドラッグ＆ドロップでの配置も可能で、SVGはベクター形式のためFigma上で色・線幅・パスを自由に編集できます。
この方法の実務的な注意点は、ライセンスをダウンロード前に外部サイト側で確認する必要があることです。Iconifyとは異なり、Figma内でライセンスが表示されないため、素材サイトのライセンスページを別タブで開いてから作業する手順を習慣化してください。SVG方式はプラグインが使えない環境（社内ネットワーク制限など）での代替手段として有効です。
Figmaコミュニティのアイコンセットを複製
Figmaコミュニティには、デザイナーが公開した無料アイコンセットが多数あります。「Heroicons」「Lucide Icons」「Phosphor Icons」などが有名で、Figma Community Iconsから検索・複製できます。「Duplicate」ボタンで自分のFigmaドラフトに複製後、コンポーネントとして参照しながら使う形式です。
1つのアイコンセットに統一できるため、デザイン全体の見た目の一貫性を保ちやすい点が最大のメリットです。セット外のアイコンが必要になった際に別セットを追加すると、スタイルの混在が起きるリスクがあります。複数のプロジェクトで同じアイコンセットを使い回す場合は、Figmaのライブラリ機能を使ってチーム全体で共有する設定も検討してください。
CHECK
▶ 今すぐやること: FigmaでPluginsメニューを開き「Iconify」と入力してインストールボタンを押す（3分）
Q: Iconifyのインストールに費用はかかりますか？
A： いいえ、無料です。FigmaのPluginsメニューから検索してインストールするだけで、追加費用は発生しません。
Q： SVGとプラグインはどちらが編集しやすいですか？
A： どちらもベクターデータとして扱えるため編集自体は同等ですが、Iconifyプラグインの方がFigma内で完結する分、作業の切り替えが少なく実務では効率的です。
Figmaアイコンは3条件でライセンス確認
「無料アイコンだから使っていい」という認識は、商用案件でのライセンストラブルの最大の原因です。無料と商用利用可は別の概念であり、この2つを混同すると納品後にクライアントが法的リスクを負う事態になります。フリーランスとして案件を受ける際には、ライセンス確認を制作フローの一部として組み込んでください。
確認すべき3つのライセンス条件
商用利用の可否を判断する際に確認すべき条件は3点です。第一に「商用利用（Commercial Use）が明示的に許可されているか」です。ライセンス名が「CC0」「MIT」「Apache 2.0」であれば商用利用可と判断できます。「CC BY-NC」のようにNCが付く場合は非商用（Non-Commercial）のみ許可であり、商用案件での使用は不可です。
第二に「帰属表示（Attribution）が必要か」です。CC BYのようにBYが付く場合、制作物内または納品物のクレジット欄に作者名の表記が必要になります。クライアントへの説明と表記対応を忘れると、ライセンス違反になります。
第三に「改変・派生の可否」です。アイコンの色変更やリサイズは多くのライセンスで許可されていますが、アイコンを大幅に改変して別の素材として再配布することを禁じているケースがあります。Figma公式ブランドリソースについては、Figmaブランドガイドラインに商用利用・改変に関する条件が明記されており、Figmaのロゴアイコンを制作物に使用する際は必ず同ページを確認してください。なお、著作権侵害のリスクと対策については著作権侵害の損害賠償相場｜3つの算定基準と5つの対策も参考になります。
IconifyとFigmaコミュニティのライセンス実態
Iconifyで使えるライブラリは、ライブラリごとにライセンスが異なります。Material Design Icons（Apache 2.0）、Font Awesome Free（CC BY 4.0またはMIT）、Phosphor Icons（MIT）などは商用利用可ですが、一部ライブラリはライセンス確認が必要です。Iconifyの検索画面では、アイコン選択時に右パネルにライセンス情報が表示されます。「License: MIT」「License: Apache 2.0」と表示されていれば商用利用可と判断できます。
Figmaコミュニティのアイコンセットは、各セットのページに記載された利用規約を確認してください。多くの公開アイコンセットはCC0またはMITライセンスで配布されていますが、全セットが商用利用可というわけではありません。コミュニティページで「商用利用可」の記載がないセットは、作者に直接確認するか、別のセットを選択するのが安全です。
フリーランスが使うべきライセンス確認テンプレート
制作開始前に以下の4項目を確認する習慣を持つことで、ライセンストラブルを防止できます。「このアイコンのライセンスは何か（CC0・MIT・Apache等）」「商用利用が明示的に許可されているか」「帰属表示が必要か」「改変（色変更含む）が許可されているか」の4点をチェックリストとして制作メモに残しておくと、後から確認できる状態になります。特に複数素材を組み合わせる案件では、素材ごとにライセンスをメモしておくことで、納品後のトラブル対応コストをゼロに近づけられます。素材アイコン無料サイト5選|商用利用OKの選び方と活用術では、サイト別のライセンス条件の違いをまとめているので併せて参照してください。
CHECK
▶ 今すぐやること: 使用予定のアイコンのライセンス名を確認し、「CC0・MIT・Apache 2.0」のいずれかであることをメモに残す（2分）
Q: Iconifyのアイコンはすべて商用利用できますか？
A： ライブラリによって異なります。Material Design Icons（Apache 2.0）やPhosphor Icons（MIT）は商用利用可ですが、使用前にIconifyの右パネルでライセンス表記を確認する習慣を持ってください。
Q： Figmaのロゴマークをデザインに入れてもいいですか？
A： Figmaブランドガイドラインで使用条件が定められています。クライアント制作物へのFigmaアイコン使用前に必ず同ページを確認してください。
Figmaアイコン挿入は状況別で方法を診断
自分の状況を3つの質問で診断できます。以下の設問に順番に答えてください。
Q1: インターネット接続環境で作業していますか？
Yesの場合はQ2へ進んでください。Noの場合はResult C（SVGをオフライン前にダウンロードしておく方法）を選択してください。
Q2: 使用するアイコンは商用案件向けですか？
Yesの場合はQ3へ進んでください。Noの場合（個人・学習用）はResult Dを選択してください。方法はどれでも問題なく、手軽さという点でIconifyが最初の選択肢です。
Q3: アイコンデザインをプロジェクト全体で統一する必要がありますか？
Yesの場合はResult A（Figmaコミュニティのアイコンセット複製＋ライブラリ化）を選択してください。Noの場合（1案件ごとに個別対応）はResult B（Iconifyプラグインで都度挿入）を選択してください。
Result A: コミュニティアイコンセットを複製してライブラリ登録
Heroicons・Lucide Icons等のコミュニティアイコンセットを複製し、Figmaのライブラリ機能でチーム共有設定を行ってください。初期設定に30分かかりますが、以後の案件でアイコンをコンポーネントとして呼び出せるため、案件ごとの素材探し時間をほぼゼロにできます。
Result B: Iconifyで都度検索・挿入
Iconifyをインストールし、案件ごとにキーワードで検索して挿入してください。ライセンスを毎回確認しながら選定する手間はありますが、セット縛りなく最適なアイコンを選べます。単発案件や小規模制作に向いています。
Result C: 事前SVGダウンロード
接続制限のある環境では、作業前にSVGをダウンロードして保存しておき、FigmaのPlace Image機能で読み込んでください。ライセンス確認は必ずダウンロード前に行ってください。
Result D: 制限なし、Iconifyが最も手軽
学習・個人用途であれば、どの方法でも問題ありません。Iconifyは手順が最もシンプルなため、最初の選択肢として適しています。
CHECK
▶ 今すぐやること: 上記診断でResultを確認し、対応する方法のインストールまたはダウンロードを今日中に完了させる（2〜5分）
Q: 商用案件でも無料アイコンを使えますか？
A： 使えます。ただし「無料」と「商用利用可」は別の条件です。CC0・MIT・Apache 2.0ライセンスの素材であれば商用案件での使用が可能です。
Q： チームで共同作業する場合はどの方法が向いていますか？
A： Figmaコミュニティのアイコンセットをライブラリ登録する方法が最適です。チーム全員が同一コンポーネントを参照できるため、デザインの一貫性が保たれます。
PR提供: 日本デザインスクール（デザスク）
Figmaアイコンは2パターンで失敗を予防
実際の制作現場での判断と結果を2パターンで見ていきます。
ケース1（成功パターン）: ライセンス確認を工程化して納品後トラブルゼロ
ECサイトリニューアル案件を受注したフリーランスWebデザイナーは、アイコンをIconifyのMaterial Design Icons（Apache 2.0）から選定し、制作前に「ライセンス種別・商用利用可否・帰属表示要否」の3項目をスプレッドシートに記録しました。納品時にクライアントへライセンスメモを添付したことで、後からの問い合わせがゼロで完了しました。
Iconifyを使い始めてからアイコン探しの時間が半分以下になったと報告するデザイナーもいます（Iconifyの使い方体験ベース解説）。
事前確認なしに「無料だから大丈夫」という判断で進めた場合、納品後にライセンス種別の確認作業が発生し、最悪の場合は素材の差し替えと再納品が必要になります。
ケース2（失敗パターン）: 複数素材を混在させてライセンス追跡不能に
Figmaコミュニティ・外部SVGサイト・Iconifyの3か所から異なるアイコンを混在させて制作を進めたフリーランスデザイナーは、納品後にクライアントから「このアイコンのライセンスを教えてください」と問い合わせがあった際、どの素材がどこから来たか追跡できず、再調査に半日以上かかりました。どのアイコンをどこからダウンロードしたか記録していなかったことが原因です（アイコン素材プラグインおすすめ記事）。
素材を追加するたびに出所とライセンスを1行メモしておけば、30分以内に回答できていたはずです。素材の種類が増えるほど、記録の手間よりも記録しない場合のリスクが上回ります。ライセンス管理の重要性は著作権とはわかりやすく｜侵害を避ける5つの実務ルールでも詳しく解説されています。
CHECK
▶ 今すぐやること: 制作メモまたはスプレッドシートに「素材名・取得元URL・ライセンス名」の列を作り、今日使うアイコンの情報を1行入力する（5分）
Q: 素材管理のために特別なツールは必要ですか？
A： いいえ、スプレッドシートやNotionのシンプルな一覧表で十分です。「素材名・URL・ライセンス名・帰属表示要否」の4列があれば、後から追跡できます。
Figmaアイコン管理は5つの仕組みで効率化
【対象】: Iconifyで日本語検索しても思うアイコンが見つからないと感じているデザイナー
【手順】: Iconifyプラグインを起動し、検索欄に英語のキーワードを入力します（例：「メニュー」ではなく「menu」、「カート」ではなく「cart」）。次にライブラリフィルターで「Material Design Icons」または「Phosphor Icons」を選択して候補を絞り込み、サイズを「24px」に統一して選定してキャンバスに配置します。一連の操作は2分で完了します。
【コツと理由】: Iconifyのライブラリはメタデータ（タグ・説明）が英語で登録されているため、英語で検索すると同一概念でより多くの候補が表示されます。日本語検索では候補が少なくなるケースがあり、英語で検索するだけでデザインに最適なアイコンを選べる確率が上がります。
【注意点】: 検索語は「shopping-cart-outline-rounded」のような複合語ではなく、まず「cart」のようなシンプルな1単語から始めて候補を見てから絞り込む方が効率的です。
ハック2: 使用アイコンセットを1案件1ライブラリに固定してスタイル統一
【対象】: 複数のアイコン素材を使い、デザイン完成後に見た目がバラついて修正が発生したことがあるデザイナー
【手順】: 案件開始時にFigmaコミュニティから1つのアイコンセット（例：Lucide Icons）を選んで複製します（3分）。複製したファイルを「Assets」として設定し、案件ファイルからリンクします（2分）。アイコンが必要になるたびにAssetsパネルの検索から選ぶルールを自分のワークフローに組み込みます（初回のみ）。
【コツと理由】: 1案件につき1ライブラリに絞るとデザインの一貫性が保たれます。アイコンの線幅・角丸・スタイルはライブラリごとに設計原則が異なるため、混在させると視覚的なノイズが生まれ、クライアントからの印象評価に影響します。
【注意点】: 選んだセットにないアイコンが必要になった場合、別セットを追加するのではなく、近い形状のアイコンを選ぶか、Figmaの図形ツールで簡易自作する選択を先に検討してください。
ハック3: SVG配置後に「アウトライン化」して編集ロックを防止
【対象】: SVGをFigmaに取り込んだ後に色変更や編集ができなくなって困ったことがあるデザイナー
【手順】: SVGをFigmaのPlace Imageまたはドラッグでキャンバスに配置します（1分）。配置したSVGを選択し、右クリックメニューから「Flatten」（アウトライン化）を実行します（30秒）。Flattenされたオブジェクトを選択し、右パネルのFillで色を変更できることを確認します（30秒）。
【コツと理由】: SVGの構造によってはFigmaがグループ化されたパスとして認識し、Fillの変更が個別パスに限定されるケースがあります。Flattenを実行すると複数パスを1つのシェイプに統合できるため、Fillを全体に一括適用できる状態になります。元データの作り方に依存しない編集環境を作るための実務的な手法です。
【注意点】: Flattenを実行すると元の構造（レイヤー分け）に戻せなくなります。複製を作ってから実行するか、Undo（Ctrl+Z）が可能な状態であることを確認してから行ってください。
ハック4: ライセンス確認をFigmaのページコメントに記録して追跡コストをゼロに
【対象】: 納品後にクライアントからアイコンのライセンスを問われて対応に時間がかかった経験があるフリーランス
【手順】: Figmaファイル内に「素材管理」という名前のページを1ページ作成します（1分）。アイコンを追加するたびに「素材名・取得元URL・ライセンス名（MIT等）・帰属表示要否」を1行テキストで記録します（1素材あたり1分）。納品時にこのページのリンクをクライアントへ共有するか、内容をコピーして添付資料に貼り付けます（2分）。
【コツと理由】: 使用素材が10点を超えると記録の再調査に30分以上かかります。1素材追加のたびに1行メモする方法を取ると、記録コストは1回1分以下に収まり、案件全体で見た追跡コストを実質ゼロにできます。記録をFigmaファイル内に置くことで「制作物と記録が同じ場所にある」状態を作れるため、ファイルを開けば即座に確認できます。
【注意点】: スプレッドシートやNotionに別管理する必要はありません。Figmaファイル内に記録することで、ファイルを渡したクライアントも直接確認できる状態になり、問い合わせ対応のコストが減ります。
ハック5: 24pxグリッドを基準にアイコンサイズを統一してレイアウト崩れを防止
【対象】: ページ内でアイコンのサイズがバラついて、レイアウト調整に時間をかけているデザイナー
【手順】: Figmaのデザインパネルで、アイコンを配置する際にW・Hの値を「24」に固定します（30秒）。アイコンより大きい表示が必要な場合は24の倍数（48・96）に統一してサイズを変更します（30秒）。Auto Layoutを使用するフレームでは、アイコンのサイズを「Fixed」に設定して親フレームのサイズ変動に引きずられないようにします（1分）。
【コツと理由】: 24pxをベースサイズとして使い始めた方が最も混乱が少なく運用できます。Figma Blog「製品アイコンの作成」でもアイコン設計の考え方が紹介されており、Material Design・Phosphor・Heroiconsはいずれも24pxを基本グリッドとして設計されています。この仕様に揃えることで、ライブラリを変更した際のサイズ再調整が不要になります。
【注意点】: モバイルデザインでは44pxのタップターゲットサイズが推奨されることがあります。アイコン自体は24pxのままで、タッチ領域を確保するためにアイコンを囲むフレームを44px×44pxに設定してください。アイコン自体を44pxに拡大する必要はありません。
CHECK
▶ 今すぐやること: Iconifyをインストール後、英語キーワードで検索してアイコンを1つキャンバスに配置してみる（3分）
Q: アイコンの色をFigmaで変更できますか？
A： はい、変更できます。ベクター形式（SVGまたはIconifyプラグイン経由）で挿入したアイコンは、FigmaのFillパネルから色変更できます。PNG形式の場合は色変更が難しいため、SVG形式での取得を推奨します。
Q： 複数のアイコンセットを混在させることの問題点は何ですか？
A： ライブラリごとに線幅・角丸・スタイルの設計が異なるため、混在させるとデザイン全体の統一感が失われます。1案件1ライブラリを基本ルールとして運用してください。
Figmaアイコンは3手順で完結：ライセンス記録が長期安定の鍵
Figmaへのアイコン挿入は、Iconifyプラグイン・SVG・コミュニティの3手順で完結します。フリーランスが商用案件で最も注意すべきは「無料」と「商用利用可」を別の条件として扱うことであり、ライセンス種別（CC0・MIT・Apache 2.0）の確認を制作フローの最初の工程として固定することが、納品後トラブルをゼロにする確実な方法です。
どの方法を選ぶかよりも、使った素材のライセンスを記録する習慣を持つことの方が、長期的な制作活動を安定させます。最初の1案件で記録の仕組みを作ると、2案件目以降の確認コストが大幅に減ります。無料のアイコン素材は商用利用可の6サイトで完結も参考に、信頼性の高いアイコン素材源をあらかじめ把握しておくことで、素材探しにかかる時間をさらに短縮できます。
| 状況 | 次の一歩 | 所要時間 |
| まだIconifyを入れていない | FigmaのPluginsからIconifyをインストール | 3分 |
| ライセンス記録がない | Figmaに「素材管理」ページを作成して記録を開始 | 5分 |
| アイコンセットが混在している | 使用ライブラリを1つに決めて他を削除 | 10分 |
| SVGの色変更ができない | 対象SVGを選択してFlattenを実行 | 2分 |
Figmaアイコン入れ方に関するよくある質問
Q: プラグインなしでFigmaにアイコンを入れる方法はありますか？
A： あります。外部サイトからSVGをダウンロードし、FigmaメニューのFile > Place ImageまたはドラッグでキャンバスへSVGを配置する方法が使えます。プラグインを使わなくてもベクター形式で編集可能なアイコンを挿入できます。
Q： Figmaコミュニティのアイコンはすべて無料ですか？
A： 多くは無料で公開されていますが、商用利用の可否は各アイコンセットの利用規約によって異なります。Figma Community Iconsで各セットのページを開き、ライセンス表記を確認してから使用してください。
Q： アイコンを自作する場合のFigmaでの手順は？
A： Figmaの図形ツール（矩形・楕円・ペンツール）を組み合わせてパスを作成します。Figma Blog「製品アイコンの作成」ではアイコン設計のガイドラインが紹介されており、自作アイコン設計の参考になります。
【出典・参照元】
Figma Community Icons – Figmaコミュニティの公式アイコン一覧
Figmaブランドガイドライン – Figmaブランドリソースの使用条件
Figma Blog「製品アイコンの作成」 – Figma公式のアイコン設計ガイドライン
Iconifyの使い方体験ベース解説 – Iconifyの操作手順と体験談
アイコン素材プラグインおすすめ記事 – アイコン素材管理の体験談