Heroiconsとは？React/Vueでも使えるTailwind LabsのSVGアイコン集

概要

Heroiconsは、Tailwind CSSの開発チームが提供するUI向けSVGアイコン集です。SVGをそのままHTMLへ貼り付ける方法に加え、ReactとVueでは公式パッケージから必要なアイコンだけを読み込めます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-21

SVGを直接コピーしてすぐ使える

公式サイトから必要なアイコンのSVGを取得し、CSSのcolorやTailwind CSSのユーティリティクラスで色やサイズを調整できます。

出典：[2][3]

ReactとVueではアイコン単位で読み込める

24pxのoutline/solid、20px・16pxのsolidなどを公式パッケージから個別に読み込み、コンポーネントとして配置できます。

出典：[2]

Webアプリの基本アイコンを統一したい場合に

管理画面、設定画面、ナビゲーションなどで、同じ線や塗りの設計に揃ったアイコンを手早く導入したい場面に向きます。

出典：[2][3]

公式対応の範囲を確認する

READMEでは、新規アイコン追加やSvelte、SolidJSなど他フレームワーク向け公式パッケージの追加は受け付けない方針です。必要な場合はSVGを直接利用するか、別のラッパーを検討します。

出典：[2]

参考にした公式資料

[1]tailwindlabs/heroicons repository(2026-09-21)
[2]Heroicons README(2026-09-21)
[3]Heroicons website(2026-09-21)
[4]Heroicons MIT license(2026-09-21)

編集部からの補足

公式サイトからSVGをコピーするだけでも使え、React/Vueでは必要なアイコンだけをコンポーネントとして読み込めます。READMEでは新しいアイコン追加やSvelte/SolidJSなど他フレームワーク対応の提案は受け付けない方針も明記されています。

3ステップで試す

1
React向けパッケージを導入
公式のReactパッケージをプロジェクトへ追加します。Vueの場合は@heroicons/vueを使います。
npm install @heroicons/react
2
必要なアイコンだけ読み込む
24px solidの例です。outlineや16px・20pxのsolidも別の読み込みパスから選べます。
import { BeakerIcon } from '@heroicons/react/24/solid'
3
サイズと色を指定して表示
SVGはcurrentColorを使うため、通常のCSSやTailwind CSSのクラスで色とサイズを調整できます。
<BeakerIcon className="size-6 text-blue-500" />

公式READMEで確認

成長

成長の推移 · 直近30日

23,811 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 0
Open PR: 3

開発アクティビティを蓄積中です。

Built with

JavaScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

Stars: 23,811
Forks: 1,312
Watchers: 166
Open Issues: 1
Contributors: 33
主要言語: JavaScript
ライセンス: MIT
リポジトリ最終更新: 2026/05/12

概要

特徴と向いている用途

SVGを直接コピーしてすぐ使える

ReactとVueではアイコン単位で読み込める

Webアプリの基本アイコンを統一したい場合に

公式対応の範囲を確認する

参考にした公式資料

3ステップで試す

React向けパッケージを導入

必要なアイコンだけ読み込む

サイズと色を指定して表示

成長

開発アクティビティ

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

関連情報

あわせて探訪