Phosphor Icons - 6種類のウェイトで表現力抜群のアイコンライブラリ

はじめに

アイコンライブラリって、どれも似たようなものだと思っていませんか。個人的にもそう思っていた時期があったんですが、Phosphor Iconsを使い始めてから考えが変わりました。

Phosphor Iconsは、1,248個のアイコンを6種類のウェイトで提供するオープンソースのアイコンライブラリです。GitHubで約6,000スター、月間220万以上のダウンロードという実績があります。特に注目なのが「Duotone」スタイルで、これが他のライブラリにはない表現力を持っているんですよね。

特徴・メリット

6種類のウェイトで表現の幅が広がる

ここがPhosphor Iconsの一番の推しポイントです。同じアイコンでも6種類のウェイトから選べます。

• Thin: 極細の繊細なライン
• Light: 軽やかな印象
• Regular: 標準的な太さ
• Bold: 強調したい箇所に
• Fill: 塗りつぶしスタイル
• Duotone: 2色使いで立体感を演出

正直、Duotoneスタイルはかなり使えます。ダッシュボードやカード系のUIで使うと、一気に洗練された印象になるんですよね。

1,248個のアイコンを網羅

執筆時点で1,248個のアイコンが利用可能です。一般的なUIパーツから、SNS、デバイス、天気、矢印、ファイル操作まで、実務で必要になるものは大体揃っています。これ、意外と重要で「このアイコンだけ別のライブラリから...」みたいな事態を避けられます。

幅広いフレームワーク対応

公式でサポートされているフレームワークがかなり充実しています。

公式対応:

• React / React Native
• Vue
• Angular
• Elm
• Flutter
• SwiftUI
• Web Components
• Vanilla JavaScript

コミュニティ対応:

• Svelte
• Astro
• SolidJS
• Laravel
• Ruby
• Rust

30以上のフレームワーク・言語に対応しているので、技術スタックを選ばずに使えるのが強みですね。

16×16pxベースで視認性を確保

Phosphor Iconsは16×16pxをベースに設計されています。小さなサイズでもきれいに表示されるよう最適化されていて、ナビゲーションやボタンなど、実際のUIで使う場面を想定した設計になっています。

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

ライセンスはMITなので、個人プロジェクトはもちろん商用利用も問題なし。クレジット表記も不要なので、気軽に導入できます。

インストール方法

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

React

npm install @phosphor-icons/react
# または
yarn add @phosphor-icons/react
# または
pnpm add @phosphor-icons/react

Vue

npm install @phosphor-icons/vue

コアパッケージ（SVGアセット）

npm install @phosphor-icons/core

Webフォント

npm install @phosphor-icons/web

基本的な使い方

Reactでの使用例

import { Heart, House, Gear, MagnifyingGlass } from "@phosphor-icons/react";

function App() {
  return (
    <div className="flex gap-4">
      <House size={24} />
      <Heart size={24} color="#e74c3c" weight="fill" />
      <Gear size={24} weight="duotone" />
      <MagnifyingGlass size={24} weight="bold" />
    </div>
  );
}

コンポーネントとしてインポートして、propsでサイズ・色・ウェイトを指定できます。シンプルですね。

ウェイトの違いを活かす

import { Heart } from "@phosphor-icons/react";

function WeightShowcase() {
  return (
    <div className="flex gap-4 items-center">
      <Heart size={32} weight="thin" />
      <Heart size={32} weight="light" />
      <Heart size={32} weight="regular" />
      <Heart size={32} weight="bold" />
      <Heart size={32} weight="fill" />
      <Heart size={32} weight="duotone" />
    </div>
  );
}

同じアイコンでもウェイトを変えるだけで印象がガラッと変わります。UIの重要度や状態に応じて使い分けられるのが便利です。

IconContextでまとめて設定

import { IconContext, House, Heart, Gear } from "@phosphor-icons/react";

function App() {
  return (
    <IconContext.Provider
      value={{
        color: "#3498db",
        size: 32,
        weight: "duotone",
      }}
    >
      <div className="flex gap-4">
        <House />
        <Heart />
        <Gear />
      </div>
    </IconContext.Provider>
  );
}

複数のアイコンに同じスタイルを適用したい場合は、IconContextを使うと便利です。個別に上書きもできるので、柔軟性も保たれています。

Vueでの使用例

<script setup>
import { PhHouse, PhHeart, PhGear } from "@phosphor-icons/vue";
</script>

<template>
  <div class="flex gap-4">
    <PhHouse :size="24" />
    <PhHeart :size="24" color="#e74c3c" weight="fill" />
    <PhGear :size="24" weight="duotone" />
  </div>
</template>

Vue版はPhプレフィックスが付きますが、使い方はほぼ同じです。

実践的なユースケース

サイドバーナビゲーション

import {
  House,
  FolderOpen,
  Users,
  Gear,
  SignOut,
} from "@phosphor-icons/react";

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

function Sidebar() {
  return (
    <nav className="w-64 bg-slate-800 text-white p-4 h-screen">
      <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-slate-700 transition-colors"
            >
              <item.icon size={20} weight="duotone" />
              <span>{item.label}</span>
            </a>
          </li>
        ))}
      </ul>
      <button className="flex items-center gap-3 px-3 py-2 mt-8 text-red-400 hover:bg-slate-700 rounded w-full transition-colors">
        <SignOut size={20} weight="duotone" />
        <span>ログアウト</span>
      </button>
    </nav>
  );
}

Duotoneスタイルをナビゲーションに使うと、適度な存在感が出ていい感じになります。

ステータスバッジ

import {
  CheckCircle,
  XCircle,
  Warning,
  Clock,
} from "@phosphor-icons/react";

function StatusBadge({ status }) {
  const config = {
    success: {
      icon: CheckCircle,
      color: "#22c55e",
      label: "完了",
    },
    error: {
      icon: XCircle,
      color: "#ef4444",
      label: "エラー",
    },
    warning: {
      icon: Warning,
      color: "#f59e0b",
      label: "警告",
    },
    pending: {
      icon: Clock,
      color: "#6b7280",
      label: "処理中",
    },
  };

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

  return (
    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-sm bg-gray-100">
      <Icon size={16} color={color} weight="fill" />
      <span style={{ color }}>{label}</span>
    </span>
  );
}

ステータス表示にはfillスタイルが視認性高くて使いやすいです。

アクションボタン

import { Plus, Trash, PencilSimple, Copy } from "@phosphor-icons/react";

function ActionButtons() {
  return (
    <div className="flex gap-2">
      <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
        <Plus size={18} weight="bold" />
        新規作成
      </button>
      <button className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 transition-colors">
        <PencilSimple size={18} />
        編集
      </button>
      <button className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 transition-colors">
        <Copy size={18} />
        複製
      </button>
      <button className="flex items-center gap-2 px-4 py-2 text-red-500 border border-red-300 rounded hover:bg-red-50 transition-colors">
        <Trash size={18} />
        削除
      </button>
    </div>
  );
}

プライマリボタンにはbold、セカンダリにはregularという使い分けも効果的です。

Next.js 13+での最適化

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ["@phosphor-icons/react"],
  },
};

Next.js 13以降を使っている場合は、この設定を追加するとバンドルサイズの最適化が効いて、ビルドも速くなります。

まとめ

Phosphor Iconsは、6種類のウェイトという独自の強みを持ったアイコンライブラリです。

• 1,248個のアイコンで実務に必要なものをカバー
• Thin〜Duotoneまで6種類のウェイトで表現力が高い
• React、Vue、Angularなど主要フレームワーク全対応
• 16×16pxベースで小さなサイズでも視認性良好
• MITライセンスで商用利用も安心

個人的には、Duotoneスタイルの存在が決め手になりました。ダッシュボードやカード系UIで使うと、フラットすぎずリッチすぎない、ちょうどいい塩梅になるんですよね。

アイコンライブラリを検討しているなら、一度Phosphor Iconsを試してみてください。6種類のウェイトがあるだけで、UIの表現の幅がかなり広がりますよ。