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

はじめに

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

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

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

クラス名を1つ変えるだけでアイコンのサイズや色、アニメーションまで変わるので、実際に触って確かめた方が早いと思います。先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

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対応もされているので、型安全に使えます。

FontAwesomeのサンプルを動かす

FontAwesomeのアイコンは、<i>タグに fa-solid（スタイル）と fa-heart（アイコン名）のようなクラスを並べるだけで表示できます。サイズは fa-lg や fa-2x のようなクラスを、色は通常のCSSのcolorプロパティを追加するだけで変更できます。下のサンプルでは、セレクトボックスでスタイル（Solid/Regular/Brands）とサイズを切り替えられるようにしています。

要点だけを抜き出すと、こんな感じです。

<!-- スタイルはクラス名で切り替える -->
<i class="fa-solid fa-heart"></i>   <!-- 塗りつぶし -->
<i class="fa-regular fa-heart"></i> <!-- 線画 -->
<i class="fa-brands fa-github"></i> <!-- ブランドロゴ -->

<!-- サイズは fa-{xs|sm|lg|xl|2xl} か fa-{2x〜10x} -->
<i class="fa-solid fa-heart fa-2x"></i>

<!-- 色はCSSのcolorプロパティで直接指定 -->
<i class="fa-solid fa-heart" style="color: #e74c3c;"></i>

実際に動かせるのが下のサンプルです。セレクトボックスでスタイルを切り替えたり、カラーピッカーで色を変えたりすると、その場でアイコンの見た目が変わります。

fa-solidをfa-regularに切り替えると同じハートでも線画になり、ブランドアイコン（fa-brands）はheartやstarのような汎用名を持たないため、汎用アイコンとは別枠で管理されている点も体感できるはずです。サイズのスライダーはfa-{n}xクラスの数値を、カラーピッカーはstyle.colorをそれぞれ直接書き換えています。

基本的な使い方

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>

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

FontAwesomeのアニメーションクラス（fa-spin、fa-spin-pulse、fa-bounce、fa-shake、fa-beat）は、CSSのアニメーションを内部で切り替えているだけなので、JavaScriptなしでもボタン1つで種類を切り替えられます。下のサンプルでは、ボタンを押すたびにアニメーションクラスを付け替えています。

<!-- スピン: 回転し続ける -->
<i class="fa-solid fa-spinner fa-spin"></i>

<!-- ビート: 拍動するように拡大縮小 -->
<i class="fa-solid fa-heart fa-beat"></i>

<!-- シェイク: 左右に小刻みに揺れる -->
<i class="fa-solid fa-bell fa-shake"></i>

<!-- バウンス: 上下に跳ねる -->
<i class="fa-solid fa-arrow-down fa-bounce"></i>

実際に動かして確認できるのが以下のサンプルです。ボタンでfa-spin・fa-spin-pulse・fa-bounce・fa-shake・fa-beatを切り替えられます。

fa-spin-pulseはfa-spinと違ってコマ送りのような動きになるので、ローディング表示のニュアンスを変えたいときに使い分けると効果的です。アイコン名をfa-bellからfa-spinnerやfa-heartに変えると、アニメーションの見え方の違いもより分かりやすくなります。

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>

フォームの入力欄でFontAwesomeがよく使われる場面のひとつが、パスワード表示切り替えボタンです。fa-eyeとfa-eye-slashをクリックのたびに入れ替えるだけで実装できます。要点は次のとおりです。

const toggle = document.getElementById('toggle');
const input = document.getElementById('pw');

toggle.addEventListener('click', () => {
  const show = input.type === 'password';
  input.type = show ? 'text' : 'password';
  // アイコンをfa-eyeとfa-eye-slashで入れ替える
  toggle.querySelector('i').className = show
    ? 'fa-solid fa-eye-slash'
    : 'fa-solid fa-eye';
});

下のサンプルでは、目のアイコン（fa-eye / fa-eye-slash）をクリックすると入力中のパスワードの表示・非表示が切り替わります。実際にパスワード欄に文字を入力してから、アイコンをクリックしてみてください。

input.typeをtextとpasswordで切り替えると同時に、アイコンのクラス名をfa-eyeとfa-eye-slashで入れ替えているのがポイントです。アイコンだけ変えてtypeの切り替えを忘れると、見た目と挙動がずれるので注意してください。

ステータス表示

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>

fa-layersはFontAwesomeのアイコン重ね合わせ機能で、内側に複数の<i>タグやfa-layers-counter（バッジ用のカウンター）を並べるだけで、通知バッジのようなUIを組み立てられます。ボタンでカウンターの数値を増減できるサンプルが以下です。

fa-layers-counterの中身（textContent）を書き換えるだけで通知件数の表示が更新でき、0件になったらdisplay: noneでバッジごと隠す、という実装パターンが確認できます。ベースのアイコンをfa-bellからfa-envelopeに変えれば、そのままメール通知バッジにも転用できます。