Icônes - 20万種類のアイコンを一瞬で探せるIconify製エクスプローラー

はじめに

「このデザインに合うアイコンがどこにあるか分からない」「Font AwesomeにはあるけどMaterial Iconsにはない、逆もまた然り」——アイコン探しでこんな経験、ありませんか。

アイコンライブラリは世の中にたくさんありますが、それぞれ別のサイトで検索して、ライセンスを確認して、フォーマットを変換して……と地味に手間がかかります。

そこで便利なのがIcônesです。Iconifyが持つ膨大なアイコンセットを横断的に、しかも爆速で検索できるWebツールになっています。

Icônesとは

Icônesは、Iconifyのアイコンデータを瞬時に検索・閲覧・ダウンロードできるアイコンエクスプローラーです。Vue 3のクリエイターとして知られるAnthony Fu氏が立ち上げ、現在はantfu-collectiveによって開発が続けられています。

公式サイト: https://icones.js.org GitHub: https://github.com/antfu-collective/icones（2026年7月時点で7,000以上のスターを獲得）

Iconifyには100を超えるアイコンセット・合計20万点以上のアイコンが登録されていますが、Icônesはそれをすべて横断してインスタント検索できるのが最大の魅力です。

主な特徴

インスタント・ファジー検索 - 入力するそばから結果が絞り込まれ、検索処理はすべてブラウザ内で完結（サーバーへの問い合わせが不要）
The Bag（お気に入りかご） - 気になったアイコンをまとめてカスタムアイコンフォントとして書き出せる機能
多様なコピー方法 - SVGの直接ダウンロードだけでなく、React・Vue・SVGなど用途に応じたコードのコピーにも対応
カテゴリー・コレクション絞り込み - Material Symbols、Tabler Icons、Carbonなど、使いたいアイコンセットだけを表示できる
ダークモード対応 - 目に優しいUIで長時間の作業も快適

インストール方法

Icônesは基本的にブラウザからアクセスするだけで使えるWebアプリです。インストールは不要です。

https://icones.js.org

プロジェクトへの導入（unplugin-icons）

Icônesで見つけたアイコンをそのままプロジェクトに組み込みたい場合は、同じantfuチームが開発しているunplugin-iconsと組み合わせるのが定番です。

# npm
npm install -D unplugin-icons @iconify/json

# pnpm
pnpm add -D unplugin-icons @iconify/json

# yarn
yarn add -D unplugin-icons @iconify/json

ローカルで動かしたい場合

自分でホストしたい、あるいはコントリビュートしたい場合はリポジトリをクローンして起動できます。

git clone https://github.com/antfu-collective/icones.git
cd icones
pnpm install
pnpm dev

基本的な使い方

1. アイコンを検索する

サイトを開いて検索ボックスにキーワードを打ち込むだけです。日本語ではなく英単語（例: home, user, arrow）で検索するのがコツです。

検索例:
- "search" と入力 → 各アイコンセットの検索アイコンが一覧表示
- "carbon:home" のように "コレクション名:キーワード" で絞り込みも可能

2. アイコンをコピーする

見つけたアイコンをクリックすると、詳細パネルが開きます。ここから用途別にコードをコピーできます。

<!-- SVGとして直接埋め込む場合 -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor" />
</svg>

// Reactコンポーネントとして使う場合（unplugin-icons導入済みの前提）
import IconHome from '~icons/carbon/home'

function App() {
  return <IconHome className="w-6 h-6 text-blue-500" />
}

<!-- Vueコンポーネントとして使う場合 -->
<script setup>
import IconHome from '~icons/carbon/home'
</script>

<template>
  <IconHome class="w-6 h-6 text-blue-500" />
</template>

3. 複数アイコンをまとめてダウンロード

「The Bag」に必要なアイコンを追加していくと、まとめてSVGスプライトやアイコンフォントとして書き出せます。デザインカンプ用にアイコンをまとめて用意したいときに便利です。

実践的なユースケース

ケース1: デザインとコーディングの橋渡し

デザイナーが「このアイコンっぽい雰囲気で」と指定してきたとき、Icônesで似た系統のアイコンセットを横断検索すれば、近いテイストのアイコンをすぐに見つけられます。

ケース2: アイコンセットの統一

プロジェクトの途中で「Material IconsとFont Awesomeが混在していて統一感がない」と気づいたとき、Icônesで一つのコレクションに絞って探し直せば、デザインの一貫性を保てます。

ケース3: Viteプロジェクトでのオンデマンド利用

unplugin-iconsと組み合わせれば、使用したアイコンだけが自動でバンドルされます。アイコンフォント丸ごと読み込むよりバンドルサイズを大幅に削減できます。

// vite.config.ts
import { defineConfig } from 'vite'
import Icons from 'unplugin-icons/vite'

export default defineConfig({
  plugins: [
    Icons({
      compiler: 'vue3', // または 'jsx' など
    }),
  ],
})