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

基本的な使い方

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" />;
}