全部、商用利用無料! UIデザイン用のSVGアイコンが1900種類以上、デザインに合わせてカスタマイズも簡単な優れもの

企業サイトやプロダクトページをはじめ、オンラインショップ、ポートフォリオ、ブログなど、WebサイトやアプリのUIデザインに適したSVGアイコンが無料で利用できるTabler Iconsを紹介します。

アイコンの種類はなんと1,900種類超え!
豊富なアイテムに加え、カラーやサイズやストロークなどのカスタマイズも簡単で、自分のデザインに合ったSVGアイコンを利用できます。さらに、PNGやWebフォントも揃っています。

 UIデザイン用のSVGアイコンが1900種類以上、デザインに合わせてカスタマイズも簡単な優れもの

Tabler Icons
Tabler Icons -GitHub

Tabler Iconsの特徴

Tabler Iconsは1,900種類を超える高品質なSVGアイコンが揃っており、MITライセンスで商用プロジェクトでも無料で利用できます。

サイトのキャプチャ

Tabler Icons

アイコンは24x24のグリッドと2pxのストロークでデザインされており、SVGなのでサイズやストロークを変更するのも簡単です。

サイトのキャプチャ

1px, 1.5px, 2pxにストロークを変更

右上のプルダウンからサイズやストロークを変更できます。

サイトのキャプチャ

アイコンのサイズを変更

1,900種類を超えるSVGアイコンは、さまざまなプロジェクトで利用できます。

アイコンの一覧

アイコンの一覧

Tabler Iconsのダウンロード

SVGアイコンのダウンロードは、簡単です。
アイコンすべてを一括でダウンロードするには、ページの上部「Download」から。

サイトのキャプチャ

Tabler Icons

ダウンロードしたファイルの構成は、下記の通り。

Tabler Iconsのファイル構成

Tabler Iconsのファイル構成

アイコンを個別に選びたい時は、各アイコンをクリックします。
SVGのコード、SVGファイル、PNGファイルをダウンロードできます。

サイトのキャプチャ

Tabler Icons

「more」をクリックすると、さらにさまざまなバリエーションが用意されています。

サイトのキャプチャ

alert-circle

ライブデモも用意されており、アイコンの使用例を確認できます。

サイトのキャプチャ

alert-circle

Figma用も用意されているのは、便利ですね。

サイトのキャプチャ

Tabler Icons -Figma

Tabler Iconsの使い方

インストール

npm経由でインストールできます。

SVGアイコンの実装

SVGアイコンをWebページに実装する際は、<img>background-imageで配置します。

コピペしたコードを使用する際は、下記の通りです。

CSSでアイコンのカラー、サイズ、ストローク幅を変更できます。

SVGアイコンはstroke-width値を変更すると、サイトやアプリのデザインに適したさまざまなストロークを使用できます。

ストロークを変更

SVGアイコンは、さまざまなストロークを使用できる

SVGスプライト

SVGスプライトにも対応しており、ページに表示するアイコンを追加します。

sponsors

top of page

©2022 coliss