SVG Icons vs Icon Fonts: 主な違いを解説
アイコンは、アクセシビリティ、レンダリング品質、bundle size、そしてデザインのワークフローに影響し始めるまでは、小さな実装の詳細に見えがちです。だからこそ、SVG と icon font のどちらを選ぶかは今でも重要です。どちらの方法も使えますが、解決する問題が違い、壊れ方も違います。
今の時点でモダンなインターフェースを作るなら、通常は SVG のほうが強い標準選択です。SVG は semantics、styling、fallback behavior をより細かく制御できます。一方で、icon fonts は今でも多くの本番コードベースに残っています。特に、古い design system や Font Awesome のようなライブラリを中心に育ってきたプロジェクトではよく見られます。大事なのは、どの形式が流行かではありません。ユーザーや保守するチームに余計な摩擦を生まずに、どちらが仕事に合っているかです。
icon font とは何か、そして SVG とどう違うか
icon font は、文字の代わりに記号を割り当てた font file です。ブラウザはアイコンを画像や SVG markup の一部として扱うのではなく、テキストとして扱います。ある glyph は Unicode 文字や private-use code point に対応付けられ、CSS や markup によって挿入されます。
このテキストに近い振る舞いが SVG との大きな違いです。SVG icon は、shape、path、viewBox、そしてブラウザが直接確認できる属性を持つ vector markup です。HTML に inline で埋め込むこともでき、sprite として読み込むこともでき、外部ファイルとして参照することもできます。markup なので、正しくラベルを付けやすく、装飾用であれば隠しやすく、細かくスタイル調整しやすいという利点があります。
icon fonts が普及したのは、1 つの font file に多くのアイコンを入れられ、開発者がすでにテキストのサイズや色の扱い方を知っていたからです。その代わり、font loading の問題、fallback の問題、アクセシビリティの境界ケースも一緒に持ち込みます。こうした問題は SVG には同じ形では当てはまりません。
font library を使わずに SVG icons を追加する方法
Web サイトで SVG icons を使うのに font library は必要ありません。最も簡単なのは inline SVG です。アイコンが必要な場所の HTML に SVG を直接貼り付けて、CSS でスタイルを当てます。これは logo、button、navigation、そして状態によって見た目を変えたいアイコンに向いています。
もう 1 つの一般的な方法は SVG sprite です。この構成では、複数のアイコンを 1 つの sprite file の中に symbols としてまとめ、必要な場所の markup から参照します。同じアイコンが製品全体で繰り返し使われる場合に重複を減らせます。小さなプロジェクトなら、個別の SVG files だけでも十分なことがあります。
デザイナーがアイコンを書き出し、開発者が最適化し、そのファイルをほかの asset と同じように component で使えます。出発点が必要なら、download free SVG icons して、font pipeline を組まずに inline や sprite 方式で使えます。
重要なのは考え方の違いです。SVG では graphic markup を扱います。icon font では、グラフィックをテキストとして扱う前提の周りで実装を進めます。この違いがその後の判断を大きく左右します。
性能とファイルサイズで見る SVG icons vs icon fonts
長い間、icon fonts の売り文句は単純でした。1 回の request で多くのアイコンを配れるという点です。HTTP overhead がもっと大きな課題だった時代や、SVG tooling がまだ十分に成熟していなかった時代には、それは確かに便利でした。今では、性能比較はそこまで一方的ではありません。
SVG は、実際に使うアイコンだけを配信できるので、より軽くなる可能性があります。inline SVG は page に markup を追加しますが、font loading をなくし、custom fonts に結び付いた rendering delay も避けられます。共有された icon set が多くの page に登場するなら、SVG sprite も効率的です。実際の file size の差は、icon の数、path の複雑さ、asset の最適化の度合いに左右されます。byte 数だけで常に勝つ形式はありません。
多くの場合、より重要なのは挙動です。icon font の読み込みが遅れたり失敗したりすると、ユーザーは欠けた glyph、fallback characters、layout shift を目にすることがあります。SVG はこの種の失敗を避けられます。さらに、font が時々持ち込む hinting の妥協なしに、どのサイズでも鮮明に描画されます。UI の作業では、1 つの asset file で数 kilobytes 節約することより、この信頼性のほうが重要な場面が多いです。
アクセシビリティ、screen reader、そして font override
ここが多くのチームで推奨を変えるポイントです。browser が SVG と icon fonts を違って認識するため、screen reader もそれぞれを違って処理します。
SVG では、そのアイコンが装飾用なのか意味を持つのかを決められます。装飾用アイコンは aria-hidden="true" で隠せます。情報を持つアイコンは、制御しやすい形でラベルを付けたり、見えるテキストと組み合わせたりできます。これによって accessible name をより予測しやすく保てます。
icon fonts はより注意が必要です。CSS generated content で挿入した glyph は、正しく隠していないと assistive technology に読み上げられる可能性があります。アイコンが private Unicode value に割り当てられている場合、screen reader が予期しない内容を読もうとすることもあります。これが、アクセシビリティを重視する多くのチームが interface icon に SVG を選ぶ理由の 1 つです。
font override も重要です。dyslexia のある人を含め、一部のユーザーは読みやすさのための font を入れたり、browser や extension の設定で typography を変えたりします。アイコンが custom font の存在と維持に依存していると、その override によって壊れたり、意味のない glyph に置き換わったりすることがあります。SVG は page の text font に依存しないため、この点でより堅牢です。
両方の方式を併用する方法と切り替えるべきタイミング
SVG icons と icon fonts は同じ project の中で共存できます。これは migration 中によくある状態です。成熟した product では、既存の icon font を legacy templates に残しつつ、新しい components では inline SVG や SVG sprite を使うことがあります。この hybrid phase は、インターフェース全体を一度に置き換える危険を避けられるので、たいてい最も安全な進め方です。
Font Awesome のような icon font から inline SVG へ切り替える適切なタイミングは、アクセシビリティの不具合が繰り返し発生する、デザイナーがより細かな視覚制御を必要としている、あるいはチームがすでに design system を刷新している場合です。SVG は modern design workflow にも自然になじみます。デザイナーは Figma で SVG assets を一級のオブジェクトとして使い、その同じ vector を engineering に渡して最適化と実装に使うことがよくあります。product がまだ web icon font を使っている場合、team は design files では SVG、古い screen では font classes という一時的な二重 workflow を維持することがあります。これはしばらくは回せますが、命名のずれや versioning の問題を生みやすくなります。
プロトタイプや実装のために広いカタログが必要なら、line-style icons for your project は inline SVG や sprite ベースの workflow に簡単に合わせられます。
最後に Font Awesome について 1 点。無料 tier は商用 project で広く使われていますが、正確な答えは使っている asset に紐づく package と license によって変わります。標準採用する前に、現在の stack にある version と icon set の最新ライセンス条件を確認してください。
短く言えばシンプルです。icon fonts は Web の配布上の実際の問題を解決しましたが、SVG は今日のチームが interface を設計し構築するやり方により合っています。よりきれいな semantics、より少ないアクセシビリティ上の罠、そして Figma から production までのより柔軟な workflow を提供します。