figmaでアイコンを使う方法と追加の手順完全ガイド｜無料素材・カスタマイズ・エクスポート手順も徹底解説

Figmaで「理想のアイコン」を探すのに、時間ばかりかかっていませんか？
「無料で商用利用できるアイコンが見つからない」「SVGファイルをFigmaに追加したら、線が二重になってしまった」など、細かな悩みを抱えるデザイナーは少なくありません。

実際、Figmaでは数千種類のアイコンが活用でき、プラグイン導入によって作業工数を最大67％短縮できたという事例もあります。
さらに、Figma独自のVariantsやコンポーネント機能を活用すれば、複数の状態・サイズ・配色もワンクリックで一括管理が可能です。

「アイコン探しや微調整に費やす時間」を削減し、デザイン品質も効率も大幅アップ。
このガイドでは、Figmaアイコンの基礎から最新プラグインの使い方、著作権の注意点まで、現場で役立つ情報を体系的にまとめました。

「失敗しないFigmaアイコン活用法」を知りたい方は、ぜひ最後までご覧ください。

Figmaアイコンの完全ガイド：基礎から最新活用法まで徹底解説

Figmaアイコンの定義とUIデザインでの役割

Figmaアイコンは、FigmaでのWebやアプリのUIデザインに使う視覚的なベクターグラフィックです。主な役割は、情報や操作を直感的に伝え、ユーザー体験を向上させることにあります。ナビゲーションやアクションボタン、ステータス表示など幅広い用途で活用されます。SVG形式であるため、拡大・縮小しても画質が劣化しない点が特徴です。アイコンを統一することで、デザイン全体の一貫性とプロフェッショナルな印象を実現できます。近年は、Figmaのプラグインやフリー素材を活用し、デザイナーの作業効率が大幅に高まっています。

Figmaインターフェース内のアイコン位置と見つけ方

Figmaでアイコンを見つける方法は複数あります。まず、左側のAssetsパネルから既存のアイコンコンポーネントを検索・選択できます。さらに、プラグイン機能を活用することで、数百万点に及ぶアイコン素材へ即アクセス可能です。代表的なプラグインには、IconifyやIcons8などがあります。プラグインの導入手順は、Figmaの「Plugins」メニューから「Browse plugins in Community」を選び、気になるアイコンプラグインを検索・インストールするだけです。インストール後は、プラグインを起動し、キーワード検索やカテゴリー選択で目的のアイコンを素早く見つけて挿入できます。

方法	手順	特徴
Assetsパネル	左側のパネルで検索・選択	標準コンポーネント利用
プラグイン	Pluginsで導入→検索・挿入	数百万素材・SVG対応
SVGインポート	外部サイトでDL→ドラッグ&ドロップ	独自アイコンも利用可能

Figmaアイコン活用のメリットとデメリット比較

Figmaアイコンを活用するメリットは多岐にわたります。特に、無料・商用利用可能なアイコンセットが充実しており、作業効率や品質が大幅に向上します。プラグイン機能でアイコンの一括挿入や色のカスタマイズも簡単に行えます。SVG形式のため、どんなサイズでも鮮明な表示が可能で、デザインシステムへの組み込みやチーム共有もスムーズです。また、AIによるアイコン生成や自動化も進んでいます。

一方で、注意したいデメリットも存在します。素材によってはライセンスや商標の制約があり、商用利用時は事前確認が不可欠です。また、あまりに多くのアイコンを使いすぎると、UIが複雑化したり、一貫性を損なうリスクもあります。外部サイトからのSVGインポート時には、データの最適化やレイヤー整理も重要です。

メリット	デメリット
無料・商用利用可能な素材が豊富	素材によっては利用規約やライセンス制限あり
プラグインで一括挿入や色変更が容易	アイコンの使いすぎでUIが複雑化する恐れ
SVGで高解像度・どんなサイズでも劣化なし	インポート時にデータ整理が必要になる
デザインシステムやチーム共有に最適	商標アイコン利用時は注意が必要

Figmaアイコンの正しい活用で、デザインのクオリティと作業効率を同時に高めることができます。

Figmaでアイコンを追加・挿入する全手順：初心者必須の入れ方マニュアル

Figmaは直感的な操作でアイコンを簡単に追加・挿入できるデザインツールです。用途に合わせて、アセットパネル、SVGファイルのドラッグ&ドロップ、ショートカット操作など、複数の方法でアイコンを効率的に取り扱うことが可能です。ここでは、Figmaでのアイコン追加手順やおすすめの活用法を分かりやすく紹介します。初心者でもすぐに実践できる内容なので、デザイン作業の効率化に役立ててください。

アセットパネルからFigmaアイコンを検索・挿入する方法

アセットパネルを活用すれば、Figmaに用意されたアイコンセットやコンポーネントをすぐに利用できます。特にUIデザインの現場では、作業スピードが求められるため、アセットパネルからのアイコン挿入は非常に便利です。

手順一覧

左側のアセットパネルを開く
検索ボックスに「アイコン」や目的のキーワードを入力
表示されたアイコン一覧から目的のアイコンを選択し、キャンバスにドラッグ&ドロップ

ポイント

アイコンの種類やカテゴリー別に整理されているため、探しやすい
アイコンはベクター形式で、拡大・縮小時も画質が劣化しない
複数のアイコンをまとめて挿入し、統一感のあるUI作成が可能

外部SVGファイルをFigmaにドラッグ&ドロップで追加

外部のSVG素材やフリーアイコンを活用したい場合は、ドラッグ&ドロップでFigmaに直接追加できます。SVGファイルは編集やカスタマイズが容易なため、オリジナルのアイコン作成にも重宝します。

追加方法

ダウンロードしたSVGファイルをデスクトップに準備
FigmaのキャンバスにSVGファイルをドラッグ&ドロップ
挿入後、パーツの色変更やサイズ調整などベクター編集が可能

テーブル：SVG追加と編集のメリット

利点	内容
柔軟な編集	色・線幅・形状の細かな調整が可能
再利用性	作成したアイコンをコンポーネント化して使い回せる
商用利用対応	ライセンスを確認すれば業務案件でも安心

注意点

商用利用時はライセンスを必ず確認
レイヤー構造が複雑な場合は、グループ化やパスの統合で管理しやすくする

プラグインなしで素早くアイコンを配置するショートカット

Figmaにはショートカットを活用したアイコン配置の裏技もあります。特に既存のコンポーネントやフレームを複製して使うことで、無駄な操作を省き、作業効率を高めることができます。

おすすめショートカット・テクニック

Ctrl（Cmd）＋Dで選択したアイコンを複製
Alt（Option）＋ドラッグで素早くコピーし、位置を調整
矢印キーで微調整を行いながらレイアウトを最適化

リスト：ショートカット活用のメリット

操作回数を減らし、時間短縮につなげる
一貫したデザイン制作が可能
プラグインを使わなくても標準機能で完結できる

Figmaの標準機能を使いこなすことで、誰でも手間なく高品質なアイコンをデザインに取り入れられます。これらの方法を習得し、日々のデザイン業務にぜひ取り入れてみてください。

Figmaアイコンのカスタマイズ完全攻略：色変更・サイズ調整・Variants活用

Figmaアイコンの色・ストローク・フィルを自由に変更する手順

Figmaでは、アイコンの色やストローク、フィルを自在に調整できます。多くのSVGやベクターアイコンは、そのまま編集可能な状態で挿入されるため、デザインに合わせて素早くカスタマイズできます。

アイコンを選択し、右側プロパティパネルの「Fill」または「Stroke」をクリック
カラーピッカーで任意の色を選ぶ、もしくはブランドカラーの数値を直接入力
複数アイコンを同時に変更する場合は、Shiftキーで複数選択し一括編集

特に、ストロークの太さや種類も「Stroke」から調整可能です。フィルとストロークの両方を活用することで、Webやアプリのテーマカラーにぴったり合わせることができます。

項目	機能	操作方法
色変更	アイコンの色を変える	Fill/Strokeをクリックして色選択
ストローク	線の太さ・形状	Strokeで数値やスタイル変更
フィル	塗りつぶし	Fillで単色／グラデーション選択

Variantsを使った状態別色変更テクニック

Variantsを活用すれば、同じアイコンで通常時・ホバー時・選択時など状態ごとの色違いを簡単に管理できます。これはUIの一貫性や効率的なデザイン更新に不可欠です。

ベースとなるアイコンを選択し、右クリックから「Create Component」
プロパティパネルの「Add Variant」から新しい状態（例：hover, active, disabled）を追加
各バリアントごとに「Fill」や「Stroke」の色を変更し、プロパティ名に状態を設定

例えば、ボタンのアイコンで通常時はグレー、ホバー時はブルー、選択時はグリーンといった切り替えが瞬時に行えます。Variantsで管理しておくことで、デザインシステム全体の効率が大幅にアップします。

アイコンサイズ・スケーリング・Constraintsの最適設定

アイコンのサイズ調整やレスポンシブ対応には、Constraintsの設定が欠かせません。Figmaではベクターアイコンが主流のため、サイズ拡大・縮小でも画質が劣化しません。

アイコンを選択し、角のハンドルをドラッグしてサイズを調整
プロパティパネルで数値入力も可能
Constraints（制約）を「Scale」「Left & Right」「Top & Bottom」などに設定することで、オートレイアウトや異なるデバイスサイズでもバランスよく表示されます

ポイント一覧

複数のアイコンを一括でリサイズしたい場合は、グループ化やコンポーネント化が便利
サイズ違いのバリアントを用意しておくと、複数の用途で再利用しやすい

Component化で再利用可能なアイコンバリアント作成

FigmaでアイコンをComponent化することで、全プロジェクトで統一されたデザインを維持しながら効率よく再利用できます。さらにVariantsと組み合わせることで、状態別・サイズ別のバリエーション管理も一元化できます。

アイコンを選択し、「Create Component」でコンポーネント化
「Add Variant」で状態やサイズ違いのバリアントを追加
プロパティパネルの「Properties」で用途や状態名を明確に設定

これにより、UIキットやデザインシステムとして全チームで共通利用が可能になり、修正やアップデートも一括反映されます。Figmaのアイコン管理は、効率化だけでなくブランドガイドライン遵守にも大きく貢献します。

メリット	説明
一括修正	すべてのインスタンスに即時反映
バリエーション管理	状態・サイズ・色違いを1つのセットで管理
コラボレーション	チーム全体で統一デザインをシェア

この仕組みを活用することで、Figmaでのアイコンデザイン、管理、実装が飛躍的に効率化されます。

Figmaでオリジナルアイコンを作成・編集するプロ級手法

Penツール・Shapeツールを使ったアイコン描画基礎

FigmaではPenツールやShapeツールを使うことで、思い通りのオリジナルアイコンを簡単に描画できます。Penツールはパスを自由に引けるため、曲線や複雑な形状も高精度で作成でき、Shapeツールは四角形や円、三角形などの基本形を素早く配置できます。
描画時はグリッドやスナップ機能を活用し、整ったシェイプをベースにデザインを始めるとバランスの良い仕上がりになります。さらに、複数のシェイプを組み合わせた後、UnionやSubtractなどのブール演算を使って一体化や切り抜きを行うことで、表現の幅が広がります。

ベクターパス編集で精密なアイコン形状調整

描画したアイコンのクオリティを高めるには、ベクターパスを細かく編集することが不可欠です。アンカーポイントやハンドルを調整し、カーブの滑らかさや直線部分の長さを揃えることで、プロフェッショナルな印象に仕上がります。
特に小さなアイコンは、微細なズレが目立ちやすいため、拡大表示しながら調整しましょう。線幅や角丸の設定も統一することで、複数のアイコンを並べた際の一貫性が保たれます。
編集後はアウトライン化し、サイズ変更に強いベクターデータとして保存するのがポイントです。

アイコンを軽量化・最適化する編集テクニック

Webやアプリで使うアイコンは、データを軽量化し、読み込み速度を向上させることが重要です。Figmaでは不要なレイヤーや隠れたパスを削除し、グループ化や結合を適切に行うことでSVGファイルを最適化できます。
色数を絞り、単色やグラデーションを活用するとデータ量を抑えつつ見栄えも保てます。さらに、エクスポート時は「SVG」「PNG」など用途に合わせて適切なフォーマットを選択しましょう。
下記のテーブルは、主な最適化ポイントとおすすめの設定例です。

最適化ポイント	おすすめ設定例
不要レイヤー削除	使わないパスや隠れオブジェクトの削除
色数制限	単色・2色までに抑える
グループ・結合	パスや図形を一体化し複雑さを減らす
SVGエクスポートオプション	最適化SVG（minify）を選択
フォント変換	テキストはアウトライン化

既存アイコンをFigmaでリデザイン・カスタムする方法

Figmaにはフリー素材アイコンやSVGファイルを取り込んで編集できる機能があります。既存アイコンを活用する場合は、まずSVGデータをドラッグ＆ドロップでFigmaにインポートしましょう。
取り込んだアイコンはUngroupやDetach Instanceを使って分解し、色やサイズ、線の太さなどをブランドやプロジェクトに合わせて調整します。さらに、パーツごとに色変更や形状修正を加えることで、オリジナル性の高いデザインへと変化させることができます。
大量のアイコンをリデザインする際は、スタイルやコンポーネント機能を活用すると、一括で統一感のあるカスタマイズが可能です。
柔軟な編集を行いながら、再利用しやすいコンポーネント化を忘れずに行うことで、今後のデザイン作業が格段に効率化します。

Figmaアイコンおすすめプラグイン・フリー素材の厳選比較と導入ガイド

Figmaアイコンプラグインのトップ5選とインストール手順

Figmaで使える優秀なアイコンプラグインは、デザイン作業の効率とクオリティを格段に高めます。特に人気の高いプラグインは次の5つです。

プラグイン名	主な特徴	アイコン数	商用利用
Iconify	190万種以上・多彩なカテゴリー	非常に多い	可能（要確認）
Feather Icons	シンプル・ミニマルなデザイン	約280	可能
Lucide	Feather系拡張・カスタム性高い	約1,000	可能
Icons8	カラフル・AI生成対応	数百万	可能（要確認）
Heroicons	Tailwind CSS互換	250+	可能

インストール手順は非常に簡単です。

Figma上部メニューの「Plugins」から「Browse plugins in Community」を選択
検索欄で目的のプラグイン名を入力し「Install」をクリック
デザイン画面で「Plugins」からインストール済みプラグインを起動し、キーワード検索後にドラッグで挿入

ポイント

すべてのプラグインはSVG形式での挿入・色変更が可能
アイコンはコンポーネント化して再利用推奨

Iconify・Feather・Lucideプラグインの特徴比較

主要3プラグインの特徴を比較し、自分のプロジェクトに合ったものを選びましょう。

プラグイン名	強み	デメリット	代表的な用途
Iconify	圧倒的な収録数・検索性	一部素材で重複あり	多ジャンルのUI設計
Feather Icons	軽量・ミニマルで統一感	バリエーションが少なめ	シンプルなWeb・アプリ
Lucide	Feather系の進化版・柔軟なカスタマイズ性	新しめで知名度や素材数は中程度	カスタムUI・ブランド対応

選び方のコツ

素材数・汎用性重視ならIconify
ミニマルで統一感あるUIならFeather
オリジナリティやカスタマイズ性を求めるならLucide

商用利用OKのFigmaアイコンフリー素材サイト一覧

Figmaで安心して商用利用できるフリー素材サイトを活用すれば、プロジェクトの幅が広がります。

サイト名	主な特徴	ダウンロード形式	商用利用
Iconify	Figmaプラグインでそのまま挿入	SVG/PNG	可能（要確認）
Flaticon	アイコン種類が豊富	SVG/PNG	可能（要ライセンス確認）
Feather Icons	シンプルな線画	SVG	可能
Icons8	スタイルが多彩	SVG/PNG	可能（要確認）
Heroicons	Tailwind CSS対応	SVG	可能

注意点

ダウンロード時は各アイコンの利用規約やライセンスを必ず確認
商標アイコン（Apple等）は利用不可の場合があるため要注意

プラグイン活用で一括アイコンライブラリ構築

プラグインを使えば、膨大なアイコンを一括で取り込み、デザインシステムとして管理できます。効率的なライブラリ構築のポイントは以下の通りです。

コンポーネント化：挿入したアイコンを右クリックで「Create component」。全体で一元管理が可能
色やサイズの統一：変数やスタイルガイドを活用しブランディング
Auto Layout活用：アイコン＋テキストでレスポンシブなボタン作成
カテゴリ分け：Navigation、Action、Statusなど役割別に整理

これにより、デザイナー間の共有や複数プロジェクトでの再利用がスムーズになります。プロ品質のUIを短時間で実現するため、プラグインとフリー素材を組み合わせて最大限活用しましょう。

Figmaアイコンエクスポート・商用利用・著作権の鉄則とトラブル回避

SVG・PNGエクスポートの最適設定とファイル形式選び

Figmaでアイコンをエクスポートする際は、用途に応じてファイル形式を選ぶことが重要です。SVGはベクター形式のため、拡大縮小しても画質が劣化せず、WebやアプリUIでの利用に最適です。PNGはピクセルベースで、サイズ固定のアイコンや画像化が必要なシーンで有効です。

エクスポート時のポイントをまとめると以下の通りです。

ファイル形式	特徴	推奨利用シーン
SVG	ベクター、CSSで色変更可、軽量	Web・アプリ開発、レスポンシブ対応
PNG	ラスター形式、背景透過可	SNS用画像、固定サイズバナー

エクスポート時の設定例

SVG：不要なグループやレイヤーを統合し、最適化オプションを有効にする
PNG：2倍や3倍の解像度を指定し、@2x/@3x対応で高精細表示

Figmaのエクスポートパネルから、必要な解像度やファイル形式を選択しましょう。複数の形式を一括エクスポートできるため、デザイナーと開発者の両方にメリットがあります。

Figmaアイコンの商用利用ルールと著作権確認ポイント

Figmaで使用するアイコンは、多くが外部のフリー素材やプラグイン経由で追加されます。しかし、商用プロジェクトで利用する場合は必ずライセンスを確認しましょう。とくに以下の点が重要です。

商用利用可否の明記：MIT、CC0などの明記があるかチェック
改変・再配布の可否：素材をアレンジしても問題ないか
出典表示の要否：著作権表示義務の有無

Figmaコミュニティやプラグインからのアイコン素材は、基本的に商用利用可能なものが多いですが、各素材ごとに利用規約が異なります。プロジェクトごとに利用条件を再確認し、必要に応じて制作者に問い合わせることも大切です。

Figmaブランドアイコン・商標の使用制限事例

Figmaや大手サービスのブランドアイコンは、自由に利用できないケースがあります。たとえばAppleやGoogleなどの公式アイコンは、ガイドラインに従った使用範囲が厳しく制限されています。

ブランド	利用制限例	注意点
Figma	ロゴ・アイコンの改変禁止	商標利用不可
Apple	アイコン利用は申請必須	App Store以外での使用禁止
Google	ガイドライン遵守必須	色・形状の変更禁止

許可なく商標付きアイコンを配布・改変すると、法的な問題になる場合があります。必ず公式ガイドラインを確認し、必要なら許諾を取得しましょう。

よくある著作権トラブルと事前チェックリスト

Figmaアイコン利用時に発生しやすい著作権トラブルを未然に防ぐため、以下のチェックリストを活用してください。

利用するアイコンのライセンスを確認したか
改変や再配布が許されているか
出典や著作権者表示が必要か
ブランドアイコンや商標の利用ガイドラインを守っているか
プロジェクトメンバーにもルールを周知しているか

プロジェクトの初期段階でこれらの項目を確認すれば、後から配信停止やクレーム対応に追われるリスクを大幅に軽減できます。信頼できる素材サイトや公式プラグインを活用し、適切なエクスポートと著作権管理を徹底しましょう。

Figmaアイコン活用の高度Tips・トラブルシューティング・事例紹介

Figma最新機能でアイコンを強化するTips（オートレイアウト・Dev Mode対応）

Figmaの最新機能を活用すれば、アイコン管理やデザイン効率が大幅に向上します。特にオートレイアウトは、アイコンとテキストを組み合わせたボタンやナビゲーション作成時に役立ちます。自動的に余白や整列を調整し、レスポンシブなUIパーツを簡単に作成できます。Dev Modeでは、エンジニアとの連携がスムーズになり、SVGやPNG形式でのエクスポートやコードスニペットの自動生成が可能です。

以下は、効率的なアイコン活用のポイントです。

オートレイアウトでアイコン・テキスト配置を自動化
Dev ModeによるアイコンのSVGエクスポート
アイコンをコンポーネント化し、チーム全体で再利用
色やサイズを変数化してブランドカラーやテーマに即対応

これらを組み合わせることで、プロジェクトごとのデザイン品質と作業スピードを同時に高められます。

Figmaアイコンのよくあるトラブルと即解決法

Figmaでアイコンを使う際のよくあるトラブルには、色やサイズの統一ができない、SVGエクスポート時に画質が劣化するなどがあります。下記のような即解決法を取り入れることで、デザインのクオリティや作業効率が一段と向上します。

色が変わらない場合：アイコンをフラットなベクターに変換し、Fillパネルで直接カラーを編集
サイズが揃わない場合：フレームにまとめてオートレイアウトを適用し、Width/Heightを統一
エクスポート時に画質が落ちる場合：SVGでエクスポートし、「Outline Stroke」で線幅を固定
プラグインのアイコンが表示されない：プラグインの再インストールやFigmaの更新で解消

このような基本トラブルを押さえておくことで、プロジェクト進行時のストレスを最小限にできます。

アイコンがカクカク・ジャギーになる原因と修正

アイコンがカクカク・ジャギーになる主な原因は、SVGエクスポート時の設定ミスやアウトライン化の不足です。解決策は下記の通りです。

ベクターアイコンは必ず「Outline Stroke」でアウトライン化
エクスポート時は「SVG」形式を選択し、解像度設定を確認
マスクやエフェクトがかかったアイコンは、エクスポート前に統合処理
必要に応じて「Pixel Preview」で実際の表示状態を確認

これにより、どのデバイスでも美しいアイコン表示が実現します。

実プロジェクトでのFigmaアイコン活用事例集

実際のデザイン現場では、Figmaアイコンの高度な活用が成果に直結しています。例えば、UIデザインの初期段階でIconifyやFeatherなどのプラグインを使い、ブランドに合ったアイコンセットを一括導入。プロジェクトごとにコンポーネント化してチームで共有し、デザイン修正も一括で反映できます。

事例の一部を紹介します。

プロジェクト名	活用ポイント	効果
ECサイトUI	アイコン付きボタンをオートレイアウトで設計	デザイン修正の手間60％削減
アプリ開発	複数プラットフォーム向けSVGエクスポート	コード連携のミス防止、開発効率向上
コーポレートサイト	ブランドカラーに即対応する変数アイコン	統一感のあるデザインでCV率向上

このようにFigmaアイコンを戦略的に活用することで、効率と品質を両立し、ユーザー体験の向上につなげることが可能です。

FigmaアイコンQ&A：検索上位疑問を一挙解決と次の一手

Figmaでアイコンを出すには？基本から応用まで

Figmaでアイコンを出す方法はとても簡単です。まず、画面左側のAssetsパネルで「検索バー」を使い、必要なアイコンを入力すると、登録済みのコンポーネントや素材がすぐに表示されます。さらに、IconifyやIcons8などのプラグインを利用すれば、数百万種類のSVGアイコンを直接ドラッグ＆ドロップで挿入できます。外部からSVGファイルをインポートしたい場合は、ファイルをそのままキャンバスにドラッグするだけで反映されます。これらの方法により、スピーディーかつ効率的に様々な用途に合ったアイコンを簡単に配置できます。

Figmaでアイコンを拡大するにはどうすればいいですか？

Figmaで挿入したアイコンを拡大したい場合、アイコン自体がベクター形式であれば画質を損なわずにサイズ変更できます。以下の手順で操作します。

アイコンを選択
角のハンドルをドラッグして拡大・縮小
プロパティパネルの幅・高さを数値で指定

また、オートレイアウトやコンポーネントを使えば複数サイズでの一括調整も可能です。ベクター形式のアイコンであれば、どれだけ拡大しても美しい表示が維持されます。

Figmaのアイコンの著作権は誰に属しますか？

Figmaで使用するアイコンの著作権は、主に以下の3パターンに分かれます。

アイコンの取得元	著作権の帰属	商用利用
Figma公式・Community素材	提供元やクリエイター	ライセンス要確認
外部フリー素材（Iconify等）	素材サイト・作家	多くは可（要確認）
自作アイコン	作成者本人	制限なし

必ずライセンス内容を確認し、商標やブランドアイコン（例：Apple、Googleロゴなど）は利用規約に従うことが重要です。自作や完全フリー（MIT、CC0など）の場合は安心して利用できます。

Figmaのトリミングアイコンはどこにありますか？

Figmaでアイコンのトリミング（切り抜きや部分表示）を行うには、MaskツールやFrame機能を活用します。トリミングしたいアイコンとマスク用のシェイプを重ね、両方を選択して右クリックし「Use as Mask」を選ぶと、指定範囲だけを表示できます。また、パス編集で不要な部分を直接削除することも可能です。これにより、アイコンの一部だけを表示したいときや独自の形状に整えたいときに役立ちます。

Figmaアイコン作成のコツとおすすめツールは？

オリジナルのFigmaアイコンを作成する場合は、ベクターツール（ペン・シェイプ・ブーリアン演算）を活用すると、自由度の高いデザインが可能です。アイコン作成のコツは以下の通りです。

線幅や角丸を統一して一貫性を持たせる
シンボルごとにレイヤー名を分かりやすく設定
コントラストや簡潔さを意識し、視認性を高める
必要に応じてアウトライン化し、拡大縮小で崩れないようにする

おすすめツールとしては、IconifyやFeather Icons、AI生成機能（Figma AIなど）があります。これらを組み合わせることで、効率的に高品質なアイコンを作成・活用できます。

Figmaアイコンのプラグインおすすめは何ですか？

Figmaでアイコンを活用したい方におすすめのプラグインは、以下の通りです。

プラグイン名	特徴	商用利用可否
Iconify	190万種類以上のアイコン/SVG挿入/色変更可	可能（要確認）
Icons8	豊富なスタイル/AI生成/編集機能搭載	可能（要確認）
Feather Icons	シンプルで軽量/無料	可能
Heroicons	Tailwind CSS向け/UIデザイン向き	可能