Lucide - Feather Iconsの正統後継、モダンなアイコンライブラリの決定版

はじめに

フロントエンド開発でアイコンライブラリを選ぶとき、正直なところ選択肢が多すぎて迷いますよね。Font Awesome、Material Icons、Heroicons...どれも良いんですが、個人的にここ最近はLucide一択になってきました。

Lucideは、あの人気だったFeather Iconsのフォークから生まれたコミュニティ主導のアイコンライブラリです。現在はGitHubで20,000スター、月間6,200万ダウンロードという規模にまで成長しています。Feather Iconsが更新停滞気味だったところを、コミュニティが引き継いで発展させた形ですね。

特徴・メリット

1,600以上のアイコンを網羅

執筆時点で1,655個のアイコンが利用可能です。一般的なUIパーツから、SNS系、ファイル操作、天気、デバイスなど、だいたい必要なものは揃っています。これ、意外と重要で、途中で「このアイコンがない」ってなると別のライブラリを追加する羽目になるんですよね。

軽量でツリーシェーキング対応

ここが個人的に推しポイントです。使うアイコンだけをインポートできるので、バンドルサイズが無駄に膨らまない。Font Awesomeのように「とりあえず全部入り」ではないので、パフォーマンスを気にするプロジェクトでも安心して導入できます。

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

対応しているフレームワークがかなり幅広いです。

React / React Native
Vue 3
Svelte
Angular
Solid
Preact
Astro
Flutter

各フレームワーク専用のパッケージが用意されているので、それぞれの作法に沿った形で使えます。

柔軟なカスタマイズ

色、サイズ、ストローク幅などをpropsで簡単に変更できます。Tailwind CSSとの相性も良くて、className経由でスタイリングできるのが地味に便利ですね。

一貫したデザイン

厳密なデザインルールに基づいて作られているので、どのアイコンを使っても統一感があります。24×24pxベース、2pxストローク、丸みを帯びたエッジという共通ルールが守られています。

インストール方法

使用するフレームワークに応じたパッケージをインストールします。

React

npm install lucide-react
# または
yarn add lucide-react
# または
pnpm add lucide-react

Vue 3

npm install lucide-vue-next

Svelte

npm install lucide-svelte

バニラJavaScript

npm install lucide

基本的な使い方

Reactでの使用例

import { Home, Settings, User, Search } from 'lucide-react';

function App() {
  return (
    <div className="flex gap-4">
      <Home size={24} color="#333" />
      <Settings size={24} strokeWidth={1.5} />
      <User className="text-blue-500" />
      <Search className="w-6 h-6" />
    </div>
  );
}

コンポーネントとしてインポートして、そのまま使えます。propsでサイズや色を指定できますし、Tailwind CSSのクラスをそのまま渡すこともできます。

Vue 3での使用例

<script setup>
import { Home, Settings, User } from 'lucide-vue-next';
</script>

<template>
  <div class="flex gap-4">
    <Home :size="24" color="#333" />
    <Settings :size="24" :stroke-width="1.5" />
    <User class="text-blue-500" />
  </div>
</template>

Vue版も同じような感覚で使えます。propsの渡し方がVue流になるだけですね。

動的にアイコンを切り替える

import { icons } from 'lucide-react';

function DynamicIcon({ name, ...props }) {
  const Icon = icons[name];
  if (!Icon) return null;
  return <Icon {...props} />;
}

// 使用例
<DynamicIcon name="Home" size={24} />
<DynamicIcon name="Settings" size={24} />

アイコン名を文字列で指定したい場合は、iconsオブジェクトから動的に取得できます。CMSからアイコン名を取得するケースなんかで便利です。

実践的なユースケース

ナビゲーションメニュー

import { Home, FolderOpen, Users, Settings, LogOut } from 'lucide-react';

const menuItems = [
  { icon: Home, label: 'ホーム', href: '/' },
  { icon: FolderOpen, label: 'プロジェクト', href: '/projects' },
  { icon: Users, label: 'チーム', href: '/team' },
  { icon: Settings, label: '設定', href: '/settings' },
];

function Sidebar() {
  return (
    <nav className="w-64 bg-gray-800 text-white p-4">
      <ul className="space-y-2">
        {menuItems.map((item) => (
          <li key={item.href}>
            <a
              href={item.href}
              className="flex items-center gap-3 px-3 py-2 rounded hover:bg-gray-700"
            >
              <item.icon size={20} />
              <span>{item.label}</span>
            </a>
          </li>
        ))}
      </ul>
      <button className="flex items-center gap-3 px-3 py-2 mt-4 text-red-400 hover:bg-gray-700 rounded w-full">
        <LogOut size={20} />
        <span>ログアウト</span>
      </button>
    </nav>
  );
}

ボタンコンポーネント

import { Loader2 } from 'lucide-react';

function Button({ children, icon: Icon, loading, ...props }) {
  return (
    <button
      className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
      disabled={loading}
      {...props}
    >
      {loading ? (
        <Loader2 size={16} className="animate-spin" />
      ) : Icon ? (
        <Icon size={16} />
      ) : null}
      {children}
    </button>
  );
}

ローディング状態のスピナーにも使えます。animate-spinクラスと組み合わせるだけで回転するローディングアイコンの完成です。

入力フィールド

import { Search, X } from 'lucide-react';

function SearchInput({ value, onChange, onClear }) {
  return (
    <div className="relative">
      <Search
        size={18}
        className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
      />
      <input
        type="text"
        value={value}
        onChange={onChange}
        placeholder="検索..."
        className="w-full pl-10 pr-10 py-2 border rounded focus:ring-2 focus:ring-blue-500"
      />
      {value && (
        <button
          onClick={onClear}
          className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
        >
          <X size={18} />
        </button>
      )}
    </div>
  );
}