tabler/tabler-icons

これは何？

主な機能

• 0124×24グリッドでデザインされた、アウトラインと塗りつぶしスタイルのアイコンを6,200種類以上収録。
• 02SVG、スプライト、Webフォント、PNG／PDF／EPS形式向けの公式パッケージを提供。
• 03React、Vue、Svelte、SolidJS、Astro、Angular、React Native向けのコンポーネントを用意。
• 04色、サイズ、線幅をCSSまたはpropsで調整可能。
• 05npmおよびjsDelivr CDNから利用可能。

ユースケース

• ReactまたはVueのWebアプリケーションに、統一感のあるアイコンセットを追加する。
• 静的サイトで、アイコンをインラインSVGまたはCSSの背景画像として使う。
• Webフォントを使って、ツールバーやナビゲーションメニューを構築する。
• PNG、PDF、EPS形式のベクターアイコンを、デザインや印刷物に利用する。

クイックスタート

1. 1

   npmでSVGアイコンパッケージをインストールします

   npm install @tabler/icons
2. 2

   代わりにReactコンポーネントパッケージをインストールします（任意、Reactプロジェクト向け）

   npm install @tabler/icons-react
3. 3

   コードでアイコンをインポートして使用します（例：ReactではIconAward）

使う前に知っておきたいこと

• !アイコンセットのみです。アイコンを提供しますが、UIコンポーネントライブラリ全体を提供するものではありません。

トピック

よくある質問

tabler-icons とは？

24×24グリッドでデザインされた、MITライセンスの6,200種類以上のSVGアイコン。React、Vue、Svelte、Angularなどのパッケージを提供。 Tabler Iconsは、24×24グリッド、2pxの線幅でデザインされた、6,200種類以上のオープンソースSVGアイコンセットです。アウトラインと塗りつぶしのスタイルがあり、独自にアイコンを描かなくても、Webインターフェース全体で統一感のあるビジュアルスタイルを選べます。

tabler-icons は無料で使えますか？ライセンスは？

tabler-icons は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

tabler-icons は今もメンテナンスされていますか？

活発にメンテナンス中。tabler-icons の最終コミットは 2026年10月21日 です。

tabler-icons は何に使えますか？

ReactまたはVueのWebアプリケーションに、統一感のあるアイコンセットを追加する。 静的サイトで、アイコンをインラインSVGまたはCSSの背景画像として使う。 Webフォントを使って、ツールバーやナビゲーションメニューを構築する。 PNG、PDF、EPS形式のベクターアイコンを、デザインや印刷物に利用する。

tabler-icons のインストール方法は？

npmでSVGアイコンパッケージをインストールします: npm install @tabler/icons 代わりにReactコンポーネントパッケージをインストールします（任意、Reactプロジェクト向け）: npm install @tabler/icons-react コードでアイコンをインポートして使用します（例：ReactではIconAward）

tabler-icons はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/tabler/tabler-icons