みなさんは、Webアイコンフォントを知っていますか？SVG形式のアイコンを取り扱うライブラリで、わざわざイチからアイコンを作らなくても便利なサービスです。CSSにより、色とサイズを高度にカスタマイズできます。
このようなサービスとして、Font Awesome, Line Awesome, Google Material Icons, Ionicons, Bootstrap Icons, Heroiconsなど、そのようなライブラリはたくさんあります。あまたある中でも、私が最も好きなWebアイコンフォントが「Lucide」（ルシード、リュシード）です。
ちなみに、「Lucide」とはフランス語で「明快、明晰」という意味だそうです。
Lucideの魅力と欠点について
まずいい点としては、そのクールなデザインですよね。このデザインが個人的にしたから記事にしたまであります。ミニマルでクリーン、そして一貫性のある線を基調とした美学を重視しています。そのモダンさと、とりわけJSフレームワークにおける利便性によって、じわじわファンを増やしつつあるようです。線の太さや、色などもCSSで自由に調節可能です。
次に、Lucideの魅力として、OSSであることが挙げられます。OSSとは、Open Source Software（オープンソースソフトウェア）の略称です。Webアイコンフォントのプロジェクトについてソフトウェアという意味の頭文字がついたOSSと呼ぶのは変な気分ですが、便宜上この言葉を使います。このようなプロジェクトでは、世界各地のデザイナーやプログラマーが、GitHubなどのプラットフォームにおいて、SVGデータやコードなどを提供して、コミュニティに貢献しています。
そして、これはOSSの大半に見られる傾向ですが、ソースコードは全世界に公開されていて、MITライセンスのような他の人が使いやすいライセンスで配布されています。Lucideも、ISCライセンスという、MITライセンスとよく似ていてより文面が簡潔な、みんなが使いやすいライセンスを採用しています。利用に際して課金などをする必要はありませんし、アイコンを魔改造したり、先ほどの例のようにそれらを有償または著作権で厳しく保護されたWebサイトに組み込むことだってできます。
Lucide自身も、別のOSSのWebアイコンフォントであるFeather Iconsから分化し（技術的に言うと、フォークされて）発展したものです。Feather Iconsは歴史的経緯からあまりOSSコミュニティが活発ではなくなり、Feather IconsよりもLucideが好まれるようになりました（一応どちらもまだ利用可能な状態です）。現在のLucideはFeather Iconsよりもアイコン数は5倍以上多く、2025年7月現在、1600種類以上のユニークなアイコンが取り扱われております。
ただし、現在、特に日本のブログ界隈なんかではLucideの知名度はあまりないように思います。
日本のブログ界隈では、WordPressや無料ブログなどでサイトを構築することが多いです。WordPressではWordPressテーマから簡単にアイコンを参照できますが、そういったテーマについているのはたいていFont Awesomeです。Font Awesomeは2012年から存在しており、デザイン違いも含めるとその圧倒的なアイコン数でWebアイコンフォント業界を席巻してきました。
しかも、React, VueなどのJavaScriptフレームワークと相性が良く、フロントエンドやSPA（シングルページアプリケーション）開発者からは好まれる一方で、生HTML/JS勢・WordPress勢などからしてみればLucideは比較的新しく、導入に障壁があります。
実行環境も、ほとんどの場合、Node.jsの環境が求められて、「npm install lucide」して使ってくださいという風になっていて、公式サイトのGuideもそれを前提とした表記となっています。そのため、このようなライブラリはフロントエンド技術者には便利に使えるものの、生JS環境へのサポート・特に日本語の解説記事などは手薄く感じるものです。
それに、後述の導入手順を見たらわかりますが、Lucideの導入は万人におすすめできるものではありません。
LucideをHTML, CSS, JavaScript、もしくはWordPressで使う
Lucideは、Node.jsの環境が求められるモダンなJSフレームワークのもとで使われることが多いのですが、その環境が使えない、一部のレンタルサーバーなどのような環境の場合はこれらの方法は使用できません。
こうしたJavaScriptのライブラリをHTML・生JSのサイトから利用する方法としては、CDNという方法があります。Lucideを含む多くのライブラリが、コンテンツ配信ネットワーク（Content Delivery Network）によっています。と言っても難しく考える必要はなく、HTMLファイルで特定のいくつかの文を書くだけです。こうすれば、アイコンを簡単にWebサイト内に導入できます。
また、最終手段としては、SVGファイルをダウンロードして画像ファイルをWebサイトのソース中に含めるという方法がありますが、それはあまりWebアイコンフォントとしての意味がないでしょう。
アイコンの使用方法
生のJavaScript（Vanilla JS）のWebサイトでLucideを導入するには、まず、HTMLの<head>タグ内に次の一行を記述します。
<script src="https://unpkg.com/lucide@latest"></script>基本的に最新の内容が反映されますが、バージョンを固定したい場合は上の「@latest」の部分を「@0.525.0」（2025年6月リリース）などとするとよいでしょう。
WordPressでは、この内容をテーマのheader.phpに書きます。これから紹介するPHPファイルは、たいてい「外観 > テーマファイルエディタ」にあります。記述位置によっては、テーマを変えると、アイコンの表示が効かなくなることがありますので、ご注意ください。
次に、bodyタグ内で、アイコンを挿入する位置には、次のコードを使います。WordPressでは、ビジュアルエディターではなくコードエディタで編集する必要があることに留意してください。
<i data-lucide="heart"></i>タグ名は何でもいいですが、たいていi（もともとはItalicを表現するのに使われるものだが、本来の意味とは無関係に「装飾的なアイコン表示用」タグとして再利用されている）が使われます。Lucideではタグ名はたいして重要ではないので、気になるようでしたらspanやdivにするとよいでしょう。
このコードでは、次のようなアイコンが表示されます（後述のlucide.createIcons()を適切に書いた場合）。
アイコンは、Lucideの公式サイトから検索することができるので、いいアイコンを見つけたら、太字下線の部分にアイコン名をコピペするなどして当てはめてください。「Include external libs – Lab」のチェックボックスをつけると、アイコンがちょっとだけ増えます。
そして、忘れてはいけないのが、HTMLのbodyタグの末尾に次のコードを挿入します。
<script>
lucide.createIcons();
</script>このコードによって、先ほど書いたdata-lucide 付きの要素を適切なSVG要素に置き換えるんですね。なのでせっかくiタグなどを使って表現したつもりでも、このコードを書かないと変更が反映されません。
WordPressの場合は、この内容をテーマのfooter.phpまたはwp_footerフックに挿入します。
ちなみに、先ほど示したハートの画像は、Copy SVGから取得したもので、<svg>タグと<path>タグで構成されています。圧縮されたiタグが、長いsvg, pathタグに変換されるわけです。
WordPressは、では表示できるけど、エディタでアイコンを表示するように設定するのはうまくいかない…
先ほどの３つのコードを、外観 > テーマファイルエディタ > Cocoon Child > header.php, footer.php（Cocoonの場合はCocoon Childのhead_insert.php, foot_insert.php）に先ほど解説したコードを適切に入れることで、本文中にアイコンを入れることができました。このファイルでは大抵アクセス解析のコードなんかがここに張り付けられるようですが、ここと並列で挿入できるようです。
ところが、WordPressのヘッダーやフッター（外観 > カスタマイズ > メニュー > ヘッダーなどで編集するエリア）では変更が全くうまくいきません。入力欄にそのままiタグを挿入しましたから、おそらくどこかでXSS対策が万全になされているような模様のエラーです。それに、WordPress管理者の編集画面でしようとすると、アイコンが全く表示されません。配置した場所が悪かったんでしょうか。
一応ChatGPTからも方法はあると言われ、対象のコードをfunctions.phpに貼り付け、テーマやサーバーのキャッシュなども消して導入を試みましたが、うまくいきませんでした。
調べたところ、WordPressそのものの仕様（またはバグ？）として、WordPressの投稿コンテンツ（post_content）にはXSSなどのセキュリティ対策として、「危険なHTMLタグ（スクリプト・SVGパスなど）」をフィルタリングする処理が入っています。ここで、svg, pathが弾かれ、編集画面ではLucide画像がなかったことにされているのです。
それに、私には強力なCocoon, Xserverというセキュアなテーマ・サーバーもついていますし、セキュリティに守られた私の環境とは相性が悪いみたいです。私の環境では当ブログにおいて、Lucide自体の導入を見送りました。おとなしくFont Awesomeのプラグインを入れるか、Bootstrap Iconsなどを使いましょう。
Lucideアイコンの書式の設定
SVG画像の書式設定は、CSS属性によって指定できます。width, heightなど一部の設定はHTML属性からも設定できますが、基本的にCSSを使う方が安牌でしょう。例えばこんな属性が使えます。
- 画像の幅と高さ：width, height（デフォルトは24px四方）
- 画像の線の太さ：stroke-width（デフォルトは2px）
- 画像の色：strokeまたはcolor
- 画像の背景色：background-color
- 余白：margin, padding
- ホバー時の変化：「:hover」 セレクタでCSS操作 色変更、拡大、回転など
この辺はCSSの話ですので、本筋とはあまり関係ないでしょう。CSSの適用が難しいWordPressのような環境では、インライン表記でstyleを書くといいんじゃないんでしょうか。
おまけ：ESModulesでのLucideアイコンの導入
ES Modulesに対応している高級なブラウザは、例えばHTML上で
<span "sample-span"></span>という要素があるとき、フッターのlucide.createIcons()を書いていた代わりに
<script type="module">
import { Camera } from "https://cdn.skypack.dev/lucide";
const icon = Camera({ class: 'icon' });
document.getElementById('sample-span').appendChild(icon);
</script>と書けるように、Reactに寄せた高級な書き方もできるみたいです。やっていることとしては、手動で一つ一つCDNからアイコンを読み込んで、SVGを生成し、span要素に追加する機能を果たします。この書き方では、書式の設定も、JavaScript中で書いて再利用できます。
ただ、jQueryオンリーなど一部の環境においては旧来のlucide.createIcons()の方を採用すべきで、そちらの方が記述量も少ないです。そして、ReactなどのモダンなJSフレームワークを用いて構築されたサイトでは、もっと便利な書き方がありますが、ここでは紹介しません。
Lucideを実際にサイト・WordPressで使ってみた
さて、「うちのサイトにLucideを導入できませんでした」じゃ極まりが悪いですよね。
最近、私は自分の静的サイトにLucideを採用しました。最後にそれを紹介して終わりたいと思います。
BPM秒数チェッカー
このアプリは、簡単なBPMから拍ごとの秒数を計算する計算機アプリですが、ここではアプリ下部の小見出し（h2タグ）の装飾に使っています。
このアプリ内でのアイコンのチョイスとしては、一般的なアイコンは使わず、使い方欄に計算機、製作者欄はBPMつながりでドラムのアイコン、バージョン履歴にファイル＋Gitブランチマージアイコンというチョイスとしました。特に3つ目のアイコンはこのアプリを使いそうな層であるアマチュア音楽家やDTMや動画の編集者に理解してくれるのかは謎ですが…ユニークさが出ていいんじゃないでしょうか。
他のWebアプリだと、何十枚にもわたって書かれたデザインガイドラインを遵守する必要があるかもしれませんが、個人開発だと、そのあたりは柔軟に差別化できることでしょう。例えば、ChatGPTもヘルプマークに、一般的な「はてなマーク」とは異なり、Lucideっぽい（しかしLucideそのものではない）救命浮き輪のようなデザインを採用しています。
画面を右クリックまたはF12から遷移できる、ブラウザの開発者ツールからJavaScriptコードが読めると思いますので、技術力がある方はぜひコードを読んでみてください。
まとめ
上のBPM秒数チェッカーは2025年7月現在JavaScript + jQueryで書かれており、一応現デプロイ環境であるXserverとの支障はない状況です。このように、LucideのようなWebアイコンは、動的にSVGを挿入・変換するという特性上、モダンなJSフレームワークの環境に近くなるほど相性がよくなり、そこから遠ざかる環境、例えばWordPressやはてなブログともなると相性が悪くなっていくと思います。
その傾向はFont Awesomeなどでも本質的に変わりませんが、Font Awesomeの方はWordPressのような「静的な運用」にもより対応していて、Lucideはモダンな環境での柔軟性・軽量性・オープン性を売りにしています。そのため、Lucideは、WordPressでは相性がよくなく、ブログ界隈では全く流行っていないという残念な結果になりました。
今やSVG形式のアイコンはこの世界にあまたあふれていますが、結局は使いたい素材があって使いやすいライブラリを選んだらいいと思います。たとえばBootstrap IconsもCDNに対応していて、数で言うとLucideよりも多いアイコンがありますしね。ただし、それも最終的には「使いづらい」「生画像ファイル鹿加担」という結末になる可能性があります。ただ私は、普通のブロガーと同じようにFont Awesomeを使いたくなかっただけで、その抵抗の一部始終をお届けしました。
参考：
Lucideホームページ：
コメント