はじめに
アイコンライブラリを選ぶとき、「フォントアイコンだとスタイルが崩れる」「SVGを1個ずつimportするのが面倒」「filled/outlineの両方を用意したいのに片方しかない」といった悩みに当たったことはないでしょうか。
Ioniconsは、Ionicチームが自社のUIフレームワーク向けに作ったアイコンセットを、Web Component（ion-icon）としてどんなプロジェクトからでも使えるようにしたライブラリです。1,300以上のアイコンが用意されており、しかも1つのアイコン名につきfilled・outline・sharpの3スタイルが揃っているのが大きな特徴です。React・Vue・素のHTMLを問わず、タグを1つ書くだけで導入できます。
とはいえ、読むより触った方が早いと思います。<ion-icon>タグを置くだけでアイコンが表示される様子を先に見たい方はこちらからどうぞ。
Ioniconsとは
Ioniconsは、Ionicフレームワークの開発元であるIonicチームが手がけるオープンソースのアイコンセットです。もともとはIonic Framework専用でしたが、現在はWeb Componentとして独立して配布されており、Ionicを使っていないプロジェクトでも単体で導入できます。StencilJSで作られており、内部的にはWeb Componentsの標準機能を使っているため、フレームワークを問わず動作します。
主な特徴
- 1,300以上のアイコン - UI構築で必要になりやすい定番アイコンが一通り揃っています
- filled・outline・sharpの3スタイル - 同じアイコン名でも塗りつぶし・輪郭線・角ばったデザインを切り替えられます
- MITライセンス - 個人利用・商用利用ともに無料で使えます
- フレームワーク非依存 - Web Componentとして提供されているため、React・Vue・Svelte・素のHTMLのどこでも同じタグで動きます
インストール
npmでインストールする場合は以下のコマンドを実行します。
npm install ionicons
ビルドツールを使わず、CDN経由でそのまま使うことも可能です。
<script type="module" src="https://esm.sh/ionicons@8.1.0/loader"></script>
Ioniconsのサンプルを動かす
Ioniconsは、ページにion-iconのローダースクリプトを1行読み込むだけで使えるion-iconタグを提供します。name属性にアイコン名を渡すだけでSVGアイコンが描画される、というのが最大のポイントです。
要点だけを抜き出すと、次のようにタグを書くだけでアイコンが表示されます。
<script type="module" src="https://esm.sh/ionicons@8.1.0/loader"></script>
<ion-icon name="heart"></ion-icon>
<ion-icon name="heart-outline"></ion-icon>
<ion-icon name="heart-sharp"></ion-icon>
下のサンプルでは、入力欄にアイコン名（例: star、settings、trashなど）を入力すると、ion-iconのname属性がリアルタイムで書き換わり、対応するアイコンが表示されます。存在しないアイコン名を入れると何も表示されなくなるので、正しい名前を入れたときとの違いも確認できます。
入力欄にstarやsettingsと入れると、name属性の値がそのままアイコンの見た目に反映されるのが分かります。左からfilled・outline・sharpの順に並べているので、同じアイコン名でも3つのバリエーションがあることが一目で確認できます。
基本的な使い方
もっとも基本的な使い方は、ion-iconタグにname属性を渡すだけです。
<script type="module" src="https://esm.sh/ionicons@8.1.0/loader"></script>
<ion-icon name="home"></ion-icon>
サイズはfont-size、色はcolorのCSSプロパティで調整できます。フォントと同じ感覚で扱えるのが、他のアイコンライブラリと比べても扱いやすいポイントです。
ion-icon {
font-size: 32px;
color: #3880ff;
}
実践的なユースケース
サイズと色をコントロールで変える
ボタンやナビゲーションでアイコンを使う場合、サイズと色をその場に応じて変えたい場面が多くあります。ion-iconはsize属性（small/large）と、CSSのfont-size・colorの両方に対応しているため、通常のテキストと同じ感覚でスタイリングできます。
以下のサンプルでは、スライダーでサイズを、カラーピッカーで色を変更すると、ion-iconの見た目がその場で切り替わります。
font-sizeをpx単位で直接指定できるので、8の倍数（16px、24px、32pxなど）に揃えるだけでUI全体のアイコンサイズを統一しやすくなります。色はcolorプロパティを継承する仕組みのため、親要素のcolorを変えるだけでも一括で切り替えられます。
filled・outline・sharpをボタンで切り替える
Ioniconsのもう1つの特徴は、同じアイコンでも「塗りつぶし」「輪郭線」「角ばったデザイン」の3スタイルが選べる点です。選択状態と非選択状態でアイコンのスタイルを変える、といったUIパターンによく使われます。
以下のサンプルでは、ボタンを押すとion-iconのname属性の末尾（-outlineや-sharp）が切り替わり、同じ「star」というアイコンの3つの表情を確認できます。
star → star-outline → star-sharpのように、アイコン名の末尾を付け替えるだけでスタイルが変わることが分かります。お気に入りボタンのON/OFF表現など、状態によってアイコンの見た目を変えたい場面でそのまま応用できます。
独自SVGをカスタムアイコンとして表示する
Ioniconsに用意されていないオリジナルのアイコンを使いたい場合は、name属性の代わりにsrc属性でSVGファイルのURLを指定します。ion-iconは標準アイコンと同じインターフェースのまま、任意のSVGを読み込んで表示できます。
以下のサンプルでは、入力欄に貼り付けたSVGコード（data URLに変換）をsrc属性に流し込み、独自SVGがそのままion-iconとして表示されることを確認できます。
テキストエリアのSVGコードを書き換えると、その内容がそのままion-iconの表示に反映されます。name属性のライブラリ内蔵アイコンと、src属性の独自SVGを同じタグで扱えるため、ブランド用のロゴアイコンとIoniconsの標準アイコンを混在させても実装を統一できます。
まとめ
Ioniconsは、ion-iconというWeb Componentタグ1つで、1,300以上のアイコンをfilled・outline・sharpの3スタイルで使い分けられるアイコンライブラリです。CDNのスクリプト1行から導入でき、フレームワークを問わずname属性かsrc属性を切り替えるだけでアイコンを表示できる手軽さが魅力です。
まずは今回のサンプルのアイコン名を書き換えて、どんなアイコンが用意されているか触ってみてください。気に入ったらnpm install ioniconsで手元のプロジェクトに組み込むのも簡単です。