無料SVGアイコンライブラリ比較

おすすめ無料アイコンライブラリ：Lucide、Heroicons、Phosphor、Tablerを比較 | We.Inc

13種類の無料SVGアイコンライブラリを並べて比較します。各ライブラリの同じアイコン、各パッケージで確認した実際のライセンス、アイコン数、スタイル、ReactとVue用のパッケージ、そしてアクセシブルな使い方を紹介します。

無料SVGアイコンライブラリ比較

Webサイトで最も実用的な無料アイコンセットは、Lucide、Heroicons、Phosphor、Tablerです。いずれも寛容なライセンス（ISCまたはMIT）で提供され、importしたアイコンだけをバンドルするReact用パッケージがあります。アイコン数が最も多いのはTabler、太さのバリエーションが最も多いのはPhosphor、最も小さくまとまったセットはHeroiconsです。

すぐに選ぶなら

求めるもの
おすすめ

大規模で統一感のあるアウトラインのセット
LucideまたはTabler

同じアイコンの複数の太さ
Phosphor

Tailwind UIに合う小さなセット
Heroicons

ブランドのロゴ
Simple Icons（商標のルールを確認）

Googleの見た目で太さを可変にしたい
Material Symbols

日常的に使う8つのアイコンを6つのライブラリで描き比べ、スタイルを直接比較できるようにしました。続いて13のライブラリを一覧にした表を載せています。ライセンスは各パッケージ自身のLICENSEファイルから、アイコン数は公開されたファイルから確認し、インストールするパッケージも記載しています。

グリッドを比較します。各行は1つのライブラリで、ホーム、検索、ユーザー、設定、ハート、削除、メール、通知という同じ8つの概念を描いています。
選ぶ前にライセンスの列を確認しましょう。ほとんどはMITかISCですが、Remix Iconは現在独自のライセンスで、Font Awesome Freeはクレジット表記が必要です。
ReactまたはVueの列から自分のフレームワーク用のパッケージをインストールするか、個別のSVGファイルをプロジェクトにコピーします。
下のアクセシビリティの注記に従い、装飾的なアイコンはスクリーンリーダーで読み上げられないようにし、意味のあるアイコンにはラベルを付けます。

ライブラリは1つに決めて使い続けましょう。線の太さや角の形が異なるセットを混ぜると、インターフェースが未完成に見えます。
ライブラリ全体ではなく、アイコンを1つずつimportしましょう（import { Search } from 'lucide-react'）。そうすれば、バンドルには使うものだけが含まれます。
アイコンの色はcurrentColorで指定し、ホバーやダークモードを含め、ボタンやリンクの文字色に従うようにしましょう。
アイコンだけのボタンには、ボタンにaria-labelを付けてアクセシブルな名前を与え、svg自体はaria-hidden="true"で隠しましょう。
アップグレードするときはライセンスを再確認しましょう。Remix Iconは、2026年1月にリリースされたバージョン4.9.0で、Apache 2.0から独自のライセンスに変わりました。

よくある質問

これらのアイコンは商用プロジェクトで使えますか？

掲載した13のライブラリはすべて、それぞれのライセンスの範囲内で使えます。MIT、ISC、Apache 2.0は、複製物にライセンス表示を残せば商用利用が可能です。Font Awesome Freeはクレジット表記が必要ですが、そのファイルにはすでに表記が含まれています。Remix Iconは製品での使用を認めていますが、アイコンをパックとして販売することやロゴとして使うことは禁止しています。

LucideはFeatherと同じものですか？

Lucideは、Featherの更新が滞ったときに、コミュニティによるFeatherのフォークとして始まりました。Featherの見た目を受け継ぎつつ、アイコン数ははるかに多く、活発にメンテナンスされています。Featherから引き継いだアイコンはFeatherのMITライセンスのままで、Lucideのそれ以外の部分はISCです。

HeroiconsとLucide、どちらがよいですか？

HeroiconsはTailwind CSSの開発元による小さめのセットで、塗りつぶし版や小サイズ版がそろっているため、Tailwindで作るインターフェースに向いています。Lucideはアイコン数が数倍多いので、必要なアイコンが見つからない心配が少なくなります。どちらも寛容なライセンスで、React用パッケージがあります。

アイコンフォントとSVG、どちらを使うべきですか？

ほとんどの場合はSVGです。インラインSVGやコンポーネントのパッケージは鮮明に描画され、パスごとにスタイルを付けられ、使うアイコンだけを配信し、スクリーンリーダーにも対応します。アイコンフォントは数個のアイコンのためにフォント全体を読み込むことがあり、フォントがブロックされると何も表示されないまま失敗します。

アイコンをアクセシブルにするには？

まず、そのアイコンが意味を持つかどうかを判断します。テキストの横にある装飾的なアイコンにはaria-hidden="true"を付けます。ボタンやリンクの唯一の中身がアイコンである場合は、代わりのテキストが必要です。通常は、ボタンにaria-labelを付けるか、ボタンの中に視覚的に隠したテキストを入れます。

ページにアイコンを置く3つの方法

ReactやVueのプロジェクトでは、lucide-reactや@heroicons/reactのようなコンポーネントのパッケージが最も手軽です。各アイコンがコンポーネントになっていて、使うものだけをimportでき、propsでサイズ、色、線の太さを指定できます。
インラインSVGは、svgのマークアップをHTMLに直接貼り付ける方法です。パッケージもリクエストも不要で、CSSであらゆる部分にスタイルを付けられますが、アイコンを表示する場所ごとにマークアップが重複します。
SVGスプライトは、すべてのアイコンをsymbol要素として1つのファイルにまとめ、使う場所では<use href="/icons.svg#search">のように参照する方法です。ブラウザーはファイルを1回だけキャッシュするので、普通のHTMLページでアイコンを多く使うサイトに向いています。

ライセンスの確認方法

表の各ライセンスは、パッケージのメタデータではなく、記載したバージョンのパッケージ内にあるLICENSEファイルから確認したものです。これは重要な違いです。Remix Iconのnpmの掲載情報はいまもApache 2.0となっていますが、バージョン4.9.1のLICENSEファイルは新しいRemix Icon License v1.0です。アイコン数は、記載したフォルダーにパッケージが収録しているSVGファイルの数です。
ライセンスはバージョンによって変わることがあります。公開する前に、インストールするバージョンのLICENSEファイルを開いて確認しましょう。

無料アイコンライブラリの比較（バージョンと数はnpmでの公開時点のもの、2026年10月13日に確認）

ライブラリ
ライセンス
アイコン数
スタイル
React
Vue

Lucide 1.55.0
ISC
アウトライン（線の太さを調整可能）

Heroicons 2.2.0
MIT
324（各4スタイル）
アウトライン24、ソリッド24、ミニ20、マイクロ16
@heroicons/react
@heroicons/vue

Phosphor 2.1.1（コア）
MIT
1,512（各6種類の太さ）
Thin、Light、Regular、Bold、Fill、Duotone
@phosphor-icons/react
@phosphor-icons/vue

Tabler Icons 3.49.0
MIT
アウトライン5,184、塗りつぶし1,054
アウトライン（線を調整可能）、塗りつぶし
@tabler/icons-react
@tabler/icons-vue

Bootstrap Icons 1.13.2
MIT
2,078ファイル（多くに-fill版あり）
アウトラインと塗りつぶしのバリエーション
react-bootstrap-icons（コミュニティ製）
公式なし。SVGかアイコンフォントを使用

Material Symbols 0.48.0 (@material-symbols/svg-400)
Apache 2.0
3,929シンボル
Outlined、Rounded、Sharp。塗り、太さ、グレードの可変軸
Google Fontsのフォントか、SVGパッケージを使用
Google Fontsのフォントか、SVGパッケージを使用

Remix Icon 4.9.1
Remix Icon License v1.0
1,539（線と塗りつぶし）
線、塗りつぶし
@remixicon/react
@remixicon/vue

Font Awesome Free 7.3.1
CC BY 4.0（アイコン）、SIL OFL 1.1（フォント）、MIT（コード）
ソリッド2,001、レギュラー273、ブランド609
ソリッド、レギュラー（一部）、ブランド
@fortawesome/react-fontawesome
@fortawesome/vue-fontawesome

Ionicons 8.1.0
MIT
1,357ファイル
塗りつぶし、アウトライン、シャープ
Webコンポーネント（ion-icon）
Webコンポーネント（ion-icon）

Iconoir 7.12.1
MIT
レギュラー1,383、ソリッド288
レギュラー（線）、ソリッド
@iconoir/vue

Radix Icons 1.3.2
MIT
1スタイル、15 × 15のグリッドで描画
@radix-ui/react-icons
公式なし

Feather 4.29.2
MIT
アウトライン
react-feather（コミュニティ製）
vue-feather-icons（コミュニティ製）

Simple Icons 16.35.0
CC0 1.0（SVGファイル）
ブランドロゴ3,466点
単色のブランドマーク
@icons-pack/react-simple-icons（コミュニティ製）
SVGを使用

ISC

Featherから取り込んだアイコンはMITでもあります。複製物には著作権表示を残してください。

MIT

複製物には著作権表示を残してください。

MIT

複製物には著作権表示を残してください。

MIT

複製物には著作権表示を残してください。

MIT

複製物には著作権表示を残してください。

Apache 2.0

複製物にはライセンス文を含め、加えた変更があれば明記してください。

Remix Icon License v1.0

商用製品で無料で使えますが、アイコンをアイコンパックとして販売すること、それをもとに競合するアイコンセットを作ること、ロゴとして使うことはできません。4.8.0までのバージョンはApache 2.0で、新しいライセンスは4.9.0から適用されています。

CC BY 4.0（アイコン）、SIL OFL 1.1（フォント）、MIT（コード）

クレジット表記が必要です。ダウンロードしたファイルにすでに含まれているコメントがクレジット表記とみなされるので、削除しないでください。Proのアイコンは有料です。

MIT

複製物には著作権表示を残してください。

MIT

複製物には著作権表示を残してください。

MIT

複製物には著作権表示を残してください。

MIT

複製物には著作権表示を残してください。更新はまれで、Lucideはここから生まれました。

CC0 1.0（SVGファイル）

ファイルはパブリックドメインですが、ロゴは各ブランドの商標です。各ブランドのガイドラインに従ってください。

ホーム

検索

ユーザー

設定

お気に入り

削除

メール

通知

同じ8つのアイコンを6つのライブラリで

暗い背景

各ライブラリが描く8つの一般的なアイコン

ライブラリ

{library}の{concept}アイコン

アイコンは、下の表に記載したバージョンの各パッケージに含まれるSVGファイルを無加工で使用し（ファイル名のみ変更）、それぞれのライセンスのもとで表示しています。

ライセンス本文：

ライブラリの比較

ライセンスに関する注記

アイコンをアクセシブルに使う

3つの方法すべてで、svgはスクリーンリーダーから隠し、ボタンが名前を持つようにしています。アイコンが目に見えるテキストの横にある場合は、アイコンを隠してテキストに読み上げを任せましょう。

無料で始める · クレジットカード不要

製品

AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
ホワイトラベルプラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
エンタープライズ：SSO、個別の SLA、専任サポート
開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

制作会社・代理店向け：自社ブランドで再販
フリーランス向け：自分ブランドのビルダーを持つ
ホスティング事業者向け：サービスにビルダーを追加
SaaS プラットフォーム向け：API でサイト作成を組み込み
スタートアップ向け
金融サービス向け
医療・ヘルスケア向け

機能

リソース

会社情報

サイトマップを見る

無料SVGアイコンライブラリ比較

おすすめ無料アイコンライブラリ：Lucide、Heroicons、Phosphor、Tablerを比較 | We.Inc