FontAwesomeを使ったら、アイコン探しの時間が激減した話

はじめに

WebサイトやアプリのUI作成で、アイコンって結構悩むポイントなんですよね。自分でSVGを作るのは大変だし、かといって適当なアイコンを探し回ると時間がどんどん溶けていく。

FontAwesomeは、そんな悩みを解決してくれるアイコンライブラリです。GitHubで76,000スター、毎月350〜400万回のダウンロード。もはや「業界標準」と言っていいレベルの存在感があります。

正直なところ、最初は「アイコンライブラリなんてどれも同じでしょ」と思っていたんですよ。でも実際に使い込んでみると、なぜこれだけ支持されているのかが分かりました。30代のエンジニアとして、時短できるものは積極的に使いたい。FontAwesomeはまさにそういうツールです。

FontAwesomeとは

FontAwesomeは「The iconic SVG, font, and CSS toolkit」をキャッチコピーに掲げる、アイコンライブラリの定番です。2012年にリリースされて以来、数百万人のデザイナー、開発者、コンテンツクリエイターに利用されています。

現在の最新バージョンは7.x系。2025年10月には7.1.0がリリースされており、活発に開発が続いています。

ライセンスは複数形式を採用していて、アイコン自体はCC BY 4.0、フォントファイルはSIL OFL 1.1、コードはMIT。個人でも商用でも使いやすい構成になっています。

特徴・メリット

1. 圧倒的なアイコン数

これ、意外と重要なんですけど、FontAwesomeは無料版だけでも2,000以上のアイコンが使えます。Pro版だと30,000以上。「欲しいアイコンがない」という状況がほぼ発生しない。

コスパ的に、無料版でも十分すぎるアイコン数なんですよね。

2. 複数のスタイルが選べる

同じアイコンでも、スタイルを変えると印象が全然違います。FontAwesomeでは以下のスタイルが用意されています：

Solid（塗りつぶし）: ベーシックで視認性が高い
Regular（線画）: 軽やかでモダンな印象
Light: さらに細い線で繊細な表現
Thin: 極細、ミニマルデザイン向け
Duotone: 2色使いで立体感
Sharp: 角張ったシャープな印象

個人的には、SolidとRegularを使い分けるだけでUIの印象がかなり変わると思います。

3. ブランドアイコンが充実

GitHub、Twitter、Facebook、Instagram、各種サービスのロゴ。これがライブラリに含まれているのは地味に嬉しい。わざわざ各社のブランドガイドラインからSVGをダウンロードする必要がない。

4. 導入がとにかく簡単

後で詳しく書きますが、CDNを使えばHTMLに1行追加するだけ。これ、プロトタイプ作成の時に時短になる。

5. カスタマイズ性が高い

サイズ変更、色変更、回転、アニメーション。CSSクラスを追加するだけで様々な表現ができます。JavaScriptを書かなくていいのがQOL上がります。

インストール方法

方法1: Kit（最も簡単）

FontAwesomeのサイトでアカウントを作ると、専用のKitコードが発行されます。

<head>
  <!-- FontAwesome Kit -->
  <script src="https://kit.fontawesome.com/あなたのKitコード.js" crossorigin="anonymous"></script>
</head>

これだけ。アカウント作成が手間に感じるかもしれませんが、使用状況の分析とかができるので長期的には便利です。

方法2: CDN

アカウント不要でサクッと使いたい場合はCDN。

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

方法3: npm（Node.jsプロジェクト）

npm install @fortawesome/fontawesome-free

インストール後、CSSをインポート：

import '@fortawesome/fontawesome-free/css/all.min.css';

方法4: React用パッケージ

Reactで使う場合は専用パッケージを使うのがおすすめ。

npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

TypeScript対応もされているので、型安全に使えます。

基本的な使い方

HTMLでの使用

<i>タグにクラスを指定するだけ。シンプルですね。

<!-- Solidスタイル -->
<i class="fa-solid fa-user"></i>

<!-- Regularスタイル -->
<i class="fa-regular fa-user"></i>

<!-- ブランドアイコン -->
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-twitter"></i>

サイズ変更

<!-- 小さいサイズ -->
<i class="fa-solid fa-user fa-xs"></i>
<i class="fa-solid fa-user fa-sm"></i>

<!-- 標準 -->
<i class="fa-solid fa-user"></i>

<!-- 大きいサイズ -->
<i class="fa-solid fa-user fa-lg"></i>
<i class="fa-solid fa-user fa-xl"></i>
<i class="fa-solid fa-user fa-2xl"></i>

<!-- 倍率指定 -->
<i class="fa-solid fa-user fa-2x"></i>
<i class="fa-solid fa-user fa-3x"></i>
<i class="fa-solid fa-user fa-5x"></i>

色の変更

CSSで普通にcolorを指定するだけ。

<i class="fa-solid fa-heart" style="color: #e74c3c;"></i>

.icon-primary {
  color: #3498db;
}

回転・反転

<!-- 回転 -->
<i class="fa-solid fa-arrow-right fa-rotate-90"></i>
<i class="fa-solid fa-arrow-right fa-rotate-180"></i>

<!-- 反転 -->
<i class="fa-solid fa-arrow-right fa-flip-horizontal"></i>
<i class="fa-solid fa-arrow-right fa-flip-vertical"></i>

アニメーション

<!-- スピン（回転アニメーション） -->
<i class="fa-solid fa-spinner fa-spin"></i>

<!-- パルス -->
<i class="fa-solid fa-spinner fa-spin-pulse"></i>

<!-- バウンス -->
<i class="fa-solid fa-arrow-down fa-bounce"></i>

<!-- シェイク -->
<i class="fa-solid fa-bell fa-shake"></i>

ローディング表示とか、これだけで作れるのは便利。

Reactでの使用

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faHeart, faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons';

function App() {
  return (
    <div>
      {/* 基本的な使い方 */}
      <FontAwesomeIcon icon={faUser} />

      {/* サイズ指定 */}
      <FontAwesomeIcon icon={faHeart} size="2x" />

      {/* 色指定 */}
      <FontAwesomeIcon icon={faCoffee} color="#8B4513" />

      {/* 回転 */}
      <FontAwesomeIcon icon={faUser} rotation={90} />

      {/* アニメーション */}
      <FontAwesomeIcon icon={faHeart} beat />
      <FontAwesomeIcon icon={faGithub} spin />

      {/* ブランドアイコン */}
      <FontAwesomeIcon icon={faTwitter} />
    </div>
  );
}

propsで指定できるので、動的に変更するのも簡単です。

実践的なユースケース

ナビゲーションメニュー

<nav>
  <a href="/">
    <i class="fa-solid fa-house"></i> ホーム
  </a>
  <a href="/about">
    <i class="fa-solid fa-user"></i> プロフィール
  </a>
  <a href="/contact">
    <i class="fa-solid fa-envelope"></i> お問い合わせ
  </a>
</nav>

ボタンのアイコン

<button class="btn-primary">
  <i class="fa-solid fa-download"></i> ダウンロード
</button>

<button class="btn-danger">
  <i class="fa-solid fa-trash"></i> 削除
</button>

<button class="btn-success" disabled>
  <i class="fa-solid fa-spinner fa-spin"></i> 処理中...
</button>

SNSリンク

<div class="social-links">
  <a href="https://github.com/username" aria-label="GitHub">
    <i class="fa-brands fa-github fa-2x"></i>
  </a>
  <a href="https://twitter.com/username" aria-label="Twitter">
    <i class="fa-brands fa-twitter fa-2x"></i>
  </a>
  <a href="https://linkedin.com/in/username" aria-label="LinkedIn">
    <i class="fa-brands fa-linkedin fa-2x"></i>
  </a>
</div>

フォームの入力欄

<div class="input-group">
  <span class="input-icon">
    <i class="fa-solid fa-envelope"></i>
  </span>
  <input type="email" placeholder="メールアドレス">
</div>

<div class="input-group">
  <span class="input-icon">
    <i class="fa-solid fa-lock"></i>
  </span>
  <input type="password" placeholder="パスワード">
</div>

ステータス表示

function StatusBadge({ status }: { status: 'success' | 'warning' | 'error' }) {
  const config = {
    success: { icon: faCheck, color: '#27ae60', text: '完了' },
    warning: { icon: faExclamationTriangle, color: '#f39c12', text: '警告' },
    error: { icon: faTimes, color: '#e74c3c', text: 'エラー' },
  };

  const { icon, color, text } = config[status];

  return (
    <span style={{ color }}>
      <FontAwesomeIcon icon={icon} /> {text}
    </span>
  );
}

アイコンの重ね合わせ

<!-- 通知バッジ -->
<span class="fa-layers fa-fw fa-2x">
  <i class="fa-solid fa-envelope"></i>
  <span class="fa-layers-counter">5</span>
</span>

<!-- 禁止マーク -->
<span class="fa-layers fa-fw fa-2x">
  <i class="fa-solid fa-camera"></i>
  <i class="fa-solid fa-ban" style="color: red;"></i>
</span>