25万種類のアイコンを1行で扱える、Iconifyという統一フレームワーク

はじめに

「Material Design Iconsを使いたいけど、次のプロジェクトではFont Awesomeも欲しい」——アイコンライブラリを選ぶたびに、こんな悩みを抱えたことはないでしょうか。ライブラリごとに異なるインストール方法、異なるコンポーネントAPI、異なるビルドサイズ。プロジェクトが大きくなるほど、アイコン管理は地味にストレスの溜まる作業になりがちです。

Iconifyは、この悩みを根本から解決してくれるアイコンフレームワークです。200を超えるアイコンセット・約25万個ものアイコンを、たった1つの統一されたインターフェースで扱えるようにしてくれます。この記事では、Iconifyの特徴からインストール方法、実践的な使い方までを解説します。

とはいえ、読むより触った方が早いと思います。アイコン名・サイズ・色をその場で書き換えて表示を確認できるサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

Iconifyとは

Iconifyは、Material Design Icons、Font Awesome、Feather Icons、Tabler Iconsなど、数百に及ぶオープンソースのアイコンセットを、単一のフレームワークで横断的に利用できるようにするツールです。React・Vue・Svelte・Web Componentsなど主要なフレームワークに対応しており、必要なアイコンだけをオンデマンドで読み込む仕組みを備えています。

主な特徴

圧倒的なアイコン数 - 200以上のアイコンセット、約25万個のアイコンを1つのAPIで横断利用できます
フレームワーク横断対応 - React、Vue、Svelte向けのネイティブコンポーネントに加え、どこでも使えるWeb Component版（iconify-icon）も提供されています
オンデマンド読み込み - 使用するアイコンだけを必要なタイミングで取得するため、バンドルサイズを最小限に抑えられます
統一されたアイコン名記法 - セット名:アイコン名（例: mdi:home）という共通ルールで、どのアイコンセットでも同じ書き方で指定できます
デザインツール連携 - Figma・Sketch・Adobe XD向けのプラグインも用意されており、デザインと実装のギャップを埋められます

インストール

用途に応じて、いくつかのパッケージから選択できます。

Reactで使う場合

npm install @iconify/react

Vueで使う場合

npm install @iconify/vue

フレームワークを問わず使う場合（Web Component）

npm install iconify-icon

Iconifyのサンプルを動かす

まずはWeb Component版のiconify-icon要素を使って、アイコンを実際に切り替えてみましょう。icon属性にセット名:アイコン名を指定するだけでアイコンが描画され、width・height・colorを変えれば見た目もその場で変わります。下のフォームでicon名の欄をmdi:homeからph:heart-fillやtabler:brand-githubに書き換えたり、サイズのスライダーや色のカラーピッカーを動かしたりして、iconify-iconの反応を確かめてみてください。

<iconify-icon
  icon="mdi:home"
  width="48"
  height="48"
  style="color: #3b82f6"
></iconify-icon>

<script type="module">
  import 'iconify-icon';

  const el = document.querySelector('iconify-icon');
  // icon属性を書き換えるだけでアイコンが切り替わる
  el.setAttribute('icon', 'mdi:heart');
  el.setAttribute('width', '64');
</script>

実際に動かせるものが下です。icon名の入力欄・サイズのスライダー・色のカラーピッカーを操作すると、iconify-icon要素の属性がその場で書き換わり、表示が即座に反映されます。

icon名の欄に存在しないアイコン名を入れると何も描画されなくなるので、iconify-iconが指定したセット名:アイコン名をそのまま解決してレンダリングしていることが分かります。逆にph:star-fillやlucide:sunのように別のアイコンセットの名前を入れれば、インストール作業なしに別セットのアイコンへ瞬時に切り替わります。

React環境であれば、@iconify/reactが提供するIconコンポーネントで同じことができます。以下はセレクトボックスでアイコンを選び直せるサンプルです。iconpropに渡す文字列を状態として持ち、useStateで切り替えています。

import { useState } from 'react';
import { Icon } from '@iconify/react';

const ICONS = ['mdi:home', 'mdi:heart', 'ph:star-fill', 'tabler:brand-github'];

function IconSwitcher() {
  const [icon, setIcon] = useState(ICONS[0]);

  return (
    <>
      <Icon icon={icon} width={64} />
      <select value={icon} onChange={(e) => setIcon(e.target.value)}>
        {ICONS.map((name) => (
          <option key={name}>{name}</option>
        ))}
      </select>
    </>
  );
}

実際に動かせるサンプルが下です。セレクトでアイコンを選び直すとIconコンポーネントの表示がすぐに切り替わり、スライダーでwidth/heightを、カラーピッカーでcolorpropを変えられます。

セレクトの選択肢を増やしたいときはICONS配列にセット名:アイコン名の文字列を追加するだけです。Iconコンポーネントはiconpropの値が変わるたびに自動で該当アイコンを取得・再描画するため、アイコン名を状態として持てば、こうした切り替えUIを最小限のコードで作れます。

基本的な使い方

React

import { Icon } from '@iconify/react';

function App() {
  return (
    <div>
      <Icon icon="mdi:home" width="24" height="24" />
      <Icon icon="mdi:account-circle" color="#3b82f6" width="32" />
    </div>
  );
}

export default App;

icon プロパティに セット名:アイコン名 の形式で指定するだけで、必要なアイコンデータが自動的に取得・表示されます。

Vue

<script setup lang="ts">
import { Icon } from '@iconify/vue';
</script>

<template>
  <Icon icon="mdi:heart" width="28" height="28" color="#ef4444" />
</template>

Web Component（フレームワーク非依存）

<script type="module">
  import 'iconify-icon';
</script>

<iconify-icon icon="mdi:star" width="24" height="24"></iconify-icon>

iconify-icon はカスタム要素として動作するため、素のHTMLはもちろん、Astroなど任意のテンプレートエンジンからでも同じ書き方で利用できます。

実践的なユースケース

ナビゲーションメニューのアイコンを一括管理する

異なるアイコンセットを組み合わせて、統一感のあるUIを構築する例です。

import { Icon } from '@iconify/react';

type NavItem = {
  label: string;
  icon: string;
};

const navItems: NavItem[] = [
  { label: 'ホーム', icon: 'mdi:home-outline' },
  { label: '検索', icon: 'mdi:magnify' },
  { label: '通知', icon: 'mdi:bell-outline' },
  { label: '設定', icon: 'mdi:cog-outline' },
];

function Sidebar() {
  return (
    <nav>
      {navItems.map((item) => (
        <a key={item.icon} href="#" className="nav-link">
          <Icon icon={item.icon} width="20" />
          <span>{item.label}</span>
        </a>
      ))}
    </nav>
  );
}

アイコン名を文字列として管理できるため、CMSやAPIから取得した設定データに応じて動的にアイコンを切り替える、といった実装も容易です。

オフライン環境向けにアイコンをバンドルする

CDNへの依存を避けたい場合は、使用するアイコンセットをローカルにインストールし、オフラインでも動作させられます。

npm install @iconify-json/mdi

import { Icon, addCollection } from '@iconify/react';
import mdiIcons from '@iconify-json/mdi/icons.json';

addCollection(mdiIcons);

function OfflineIcon() {
  // ネットワークアクセスなしで描画される
  return <Icon icon="mdi:check-circle" width="24" color="#10b981" />;
}