Webサイトにアイコンを入れる方法として、Font AwesomeやLucideのHTMLタグをテンプレートへ記述する方法は定番です。
しかし、納品後もクライアント自身が更新するWordPressサイトでは、次のような運用はあまり現実的ではありません。
<i class="fa-solid fa-phone"></i>アイコン名やHTMLの書き方を覚えてもらう必要があり、記述ミスによる表示崩れも起こりやすいためです。
そこで今回は、単にアイコンライブラリを読み込めるものではなく、WordPressの管理画面上でアイコンを検索・選択できる「Icon Picker」を備えたプラグインに絞って比較します。
結論：迷ったらFont Awesome公式、制作案件ならSubtle Iconsが有力
先に結論をまとめると、選び方は次のとおりです。
| プラグイン | クライアントの操作性 | 主なアイコン | 向いているケース |
|---|---|---|---|
| Subtle Icons | ◎ 検索・選択 | Lucide、Font Awesome、Heroicons、Phosphorなど | ACFや独自ブロックを使う制作案件 |
| Font Awesome公式 | ◎ 検索・選択 | Font Awesome Free／Pro | 実績と互換性を重視したいサイト |
| The Icon Block | ◎ シンプル | WordPress標準系 | アイコン数より安定感を重視するサイト |
| RIACO Icon Block | ◎ 検索・選択 | Lucide、WordPress Social Icons | デザインをLucideに統一したいサイト |
最も無難なのは、知名度と導入実績のあるFont Awesome公式プラグインです。一方、ACFを使った構造的なサイト制作や、複数のアイコンライブラリから選びたい場合は、Subtle Iconsがかなり魅力的です。
1. Font Awesome公式プラグイン｜迷ったときの第一候補
Font Awesomeというと、制作者がクラス名を調べてHTMLを書くイメージが強いかもしれません。しかし現在の公式WordPressプラグインには、ブロックエディター上で使えるIcon Chooserが用意されています。
操作の流れはシンプルです。
- 「Font Awesome Icon」ブロックを追加する
- 「Choose Icon」をクリックする
- キーワードで検索する
- 表示された候補からアイコンを選ぶ
アイコン名だけでなく、カテゴリやキーワードでも検索できます。ブロックとしての配置に加え、WordPress 6.3以降では文章中へインラインで挿入することも可能です。ピッカーから挿入した新しいアイコンはインラインSVGとして保存されます。
制作者側は、従来どおりショートコードや次のようなHTMLも利用できます。
<i class="fa-solid fa-phone"></i>既存サイトですでにFont Awesomeを使っている場合も、従来の実装と管理画面のピッカーを共存させやすいのが利点です。
なお、ProアイコンをIcon Chooserから検索・追加するにはPro Kitの設定が必要です。また、テーマや別のプラグインが異なるバージョンのFont Awesomeを読み込んでいると競合する可能性があるため、導入時には確認しておきましょう。
2. Subtle Icons｜制作会社目線で特に注目したい選択肢
制作案件で柔軟に使いたいなら、Subtle Iconsが有力です。
Iconifyの仕組みを利用し、管理画面から次のような複数のアイコンライブラリを横断して検索できます。
- Lucide Icons
- Material Design Icons
- Heroicons
- Font Awesome
- Bootstrap Icons
- Phosphor Icons
- その他のオープンソースライブラリ
たとえばピッカーで「phone」と検索し、候補の中から好みのアイコンをクリックするだけで挿入できます。独自SVGのアップロードにも対応しています。
さらに、アイコン単体だけでなく、アイコンボタン、アイコンリスト、アイコンとテキストの組み合わせなど、複数のGutenbergブロックが用意されています。
選んだアイコンだけをインラインSVGで出力
Subtle Iconsは、巨大なアイコンフォントのCSSや外部スクリプトを公開画面で読み込む方式ではありません。選択したアイコンをインラインSVGとして出力するため、必要なアイコンを扱いやすく、表示も調整しやすい設計です。
ただし、アイコン検索時にはWordPress管理画面からIconify APIへ接続します。公開画面では呼び出されませんが、厳格なネットワーク要件や外部通信ポリシーがある案件では事前確認が必要です。
ACFのIcon Pickerとして使える
制作案件で特に魅力的なのが、Advanced Custom Fields（ACF）との連携です。たとえば次のようなフィールド構成を作れます。
特徴01
タイトル：地域密着
アイコン：[アイコンを選択]
本文：下諏訪町を中心に〜制作者が出力用のPHPテンプレートや独自ブロックを用意し、クライアントにはアイコン部分だけを選んでもらう設計が可能です。自由入力を減らせるため、レイアウトやHTMLを壊されにくくなります。
また、フィルターを使って選択可能なアイコンコレクションを制限できます。Lucideだけに絞るなど、サイト全体のデザインルールを保ちやすい点もメリットです！
3. RIACO Icon Block｜Lucideに統一したい場合に
線が細く、シンプルなLucideアイコンでデザインを統一したい場合は、RIACO Icon Blockも候補になります。
ブロック設定のIcon PickerからLucideまたはWordPress Social Iconsを検索・選択でき、次の項目も管理画面から調整できます。
- サイズ
- 色
- 背景色・グラデーション
- 配置
- 余白
- リンク
選択肢をLucide中心に限定できるため、クライアントが異なるテイストのアイコンを混在させてしまうリスクを抑えられます。
一方、2026年9月確認時点では有効インストール数が80件以上とまだ少なく、Font Awesome公式やThe Icon Blockほど導入実績は多くありません。標準採用する場合は、ステージング環境で編集・保存・アップデート時の動作まで確認すると安心です。
4. The Icon Block｜シンプルさと導入実績を重視
豊富なライブラリよりも、WordPressらしいシンプルな操作性と導入実績を重視するなら、The Icon Blockがあります。
WordPressのアイコンライブラリを利用でき、色、背景、サイズ、余白、ボーダー、リンクなどをブロックエディターから設定できます。独自SVGの貼り付けや、テーマ・プラグイン側でのカスタムアイコンライブラリ登録にも対応しています。
WordPress.orgでは、2026年9月確認時点で有効インストール数が40,000件以上となっています。
ただし、標準状態でLucideやFont Awesomeの膨大なアイコンを横断検索できるわけではありません。また、SVGを保存する仕組み上、投稿者以下のユーザー権限やマルチサイトでは正常に利用できない場合があります。クライアントへ付与する権限を含めて検証しましょう。
制作案件では「自由に書かせない」設計が大切
クライアント自身がアイコンを更新するサイトでは、アイコンの種類以上にどこまで操作を許可するかが重要です。
本文へ自由にHTMLを書いてもらう運用では、クラス名の間違いやタグの削除、デザインの不統一が起こりやすくなります。おすすめは、制作者側でブロックやACFのフィールドを設計し、クライアントにはピッカーからアイコンだけを選んでもらう形です。
さらに、次のようなルールを決めておくと運用が安定します。
- 利用できるアイコンライブラリを1種類に絞る
- 色やサイズはテーマ側で固定する
- 装飾ではなく、意味を補助する場所にだけ使う
- アイコンだけで意味を伝えず、テキストや代替ラベルを併用する
特にSubtle Iconsのように複数ライブラリを扱えるプラグインでは、選択肢が多いことがデザインのばらつきにつながる場合もあります。必要に応じて利用可能なコレクションを制限しましょう。
まとめ
WordPressでクライアントにもアイコンを選んでもらうなら、HTMLを直接入力させるのではなく、Icon Pickerを備えたプラグインを使うのが安全です。
- 無難さと既存資産との共存を重視するなら、Font Awesome公式
- 複数ライブラリやACF連携を活用するなら、Subtle Icons
- Lucideでデザインを統一するなら、RIACO Icon Block
- シンプルさと導入実績を重視するなら、The Icon Block
制作案件で特に使い道が広いのはSubtle Iconsです。ACFや独自ブロックと組み合わせれば、クライアントに必要な自由度を残しながら、表示崩れやデザインの不統一を防げます。
プラグインは更新状況や対応WordPressバージョンが変わるため、本番採用前には公式ページとステージング環境で最新の動作を確認してください。
