Tabler Icons - 5900種類以上のSVGアイコンを無料で使えるライブラリ

はじめに

フロントエンド開発をしていると、必ずぶつかるのがアイコン選びの問題です。Font Awesomeは定番だけど有料プランじゃないと使えないアイコンも多いし、Material Iconsはちょっとクセが強い。個人的には「シンプルで統一感があって、でも種類が豊富」なアイコンセットを探し続けていました。

そんな中で見つけたのがTabler Icons。これ、意外と知らない人も多いんですが、かなり優秀なアイコンライブラリなんですよ。

5900種類以上のSVGアイコンがMITライセンスで使い放題。しかもReact、Vue、Angular、Svelteと主要フレームワークに全対応。正直なところ、今のプロジェクトではこれ一択ですね。

Tabler Iconsの特徴・メリット

圧倒的なアイコン数

アウトライン版: 4,985個
フィル版: 999個
合計: 5,984個

全てのアイコンが24×24のグリッド上で、2pxのストロークで統一されています。この「統一感」が地味に重要で、複数のアイコンを並べても違和感がない。デザインの一貫性を保つのに助かります。

MITライセンスで商用利用OK

個人プロジェクトはもちろん、商用サービスでも無料で使えます。クライアントワークで「このアイコン、ライセンス大丈夫？」と心配する必要がない。これ、意外と精神的に楽なんですよね。

主要フレームワーク全対応

React（@tabler/icons-react）
Vue（@tabler/icons-vue）
Angular（angular-tabler-icons）
Svelte（@tabler/icons-svelte）
Jetpack Compose（compose-icons）

フレームワーク専用のパッケージが用意されているので、Tree Shakingも効きます。使っているアイコンだけがバンドルに含まれるから、ファイルサイズの心配もありません。

アクティブにメンテナンスされている

GitHubスターは20,000超え、コントリビューターは86人。最終更新も頻繁に行われていて、放置プロジェクトではありません。長期運用するサービスで使っても安心できます。

インストール方法

基本パッケージ（SVGファイル）

npm install @tabler/icons --save

React向け

npm install @tabler/icons-react

Vue向け

npm install @tabler/icons-vue

CDN経由で使う場合

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

プロトタイプやちょっとした検証なら、CDNが手軽でおすすめです。

基本的な使い方

Reactでの使い方

import { IconHome, IconSettings, IconUser } from '@tabler/icons-react';

function Header() {
  return (
    <nav>
      <IconHome size={24} stroke={2} />
      <IconSettings size={24} stroke={2} />
      <IconUser size={24} stroke={2} />
    </nav>
  );
}

propsでsize、stroke、colorを指定できます。Tailwind CSSと組み合わせるなら、classNameも渡せます。

<IconHeart className="text-red-500 hover:scale-110 transition-transform" />

Vueでの使い方

<script setup>
import { IconHome, IconSettings, IconUser } from '@tabler/icons-vue';
</script>

<template>
  <nav>
    <IconHome :size="24" :stroke="2" />
    <IconSettings :size="24" :stroke="2" />
    <IconUser :size="24" :stroke="2" />
  </nav>
</template>

Reactとほぼ同じ感覚で使えます。

HTMLでインラインSVGとして使う

<svg xmlns="http://www.w3.org/2000/svg"
     width="24" height="24"
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round">
  <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
  <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
  <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>

stroke="currentColor"になっているので、親要素のcolorを継承します。CSSだけで色を変えられるのが便利。

実践的なユースケース

ナビゲーションメニュー

import {
  IconHome,
  IconFolder,
  IconMessage,
  IconBell,
  IconSettings
} from '@tabler/icons-react';

const menuItems = [
  { icon: IconHome, label: 'ホーム', path: '/' },
  { icon: IconFolder, label: 'プロジェクト', path: '/projects' },
  { icon: IconMessage, label: 'メッセージ', path: '/messages' },
  { icon: IconBell, label: '通知', path: '/notifications' },
  { icon: IconSettings, label: '設定', path: '/settings' },
];

function Sidebar() {
  return (
    <aside className="w-64 bg-gray-900 text-white">
      {menuItems.map(({ icon: Icon, label, path }) => (
        <a key={path} href={path} className="flex items-center gap-3 p-4 hover:bg-gray-800">
          <Icon size={20} />
          <span>{label}</span>
        </a>
      ))}
    </aside>
  );
}

ボタンにアイコンを添える

import { IconDownload, IconShare, IconTrash } from '@tabler/icons-react';

function ActionButtons() {
  return (
    <div className="flex gap-2">
      <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded">
        <IconDownload size={18} />
        ダウンロード
      </button>
      <button className="flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded">
        <IconShare size={18} />
        共有
      </button>
      <button className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded">
        <IconTrash size={18} />
        削除
      </button>
    </div>
  );
}

ステータス表示

import { IconCheck, IconX, IconLoader } from '@tabler/icons-react';

function StatusBadge({ status }: { status: 'success' | 'error' | 'loading' }) {
  const config = {
    success: { icon: IconCheck, color: 'text-green-500', label: '完了' },
    error: { icon: IconX, color: 'text-red-500', label: 'エラー' },
    loading: { icon: IconLoader, color: 'text-blue-500 animate-spin', label: '処理中' },
  };

  const { icon: Icon, color, label } = config[status];

  return (
    <span className={`flex items-center gap-1 ${color}`}>
      <Icon size={16} />
      {label}
    </span>
  );
}