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

企業サイトはもちろん、プロダクト、コマース、ショップ、アプリ、ブログなど、さまざまなUIデザインのSVGアイコンが無料で利用できるTabler Iconsを紹介します。

SVGアイコンの数はなんと558種類で、オープンソース!
豊富なアイテムに加え、カラーやサイズやストロークなどのカスタマイズも簡単で、自分のデザインに合ったSVGアイコンを利用できます。

商用利用無料、UIデザイン用のSVGアイコンが558種類

Tabler Icons
Tabler Icons -GitHub

Tabler Iconsの特徴

Tabler Iconsは550種類を超える高品質なSVGアイコンのセット、MITライセンスで商用プロジェクトでも無料で利用できます。

サイトのキャプチャ

Tabler Icons

アイコンはカスタマイズにも対応しており、カラーやストロークも簡単に変更できます。上部のカラーボックスをクリックすると、そのカラーに変更されます。

サイトのキャプチャ

カラーを変更

カラーは数値で変更することもできます。

サイトのキャプチャ

カラーを数値で変更

サイズは、12px-100pxまで4px単位で変更できます。

サイトのキャプチャ

サイズを変更

ストロークも変更でき、極細から極太まで揃っています。

サイトのキャプチャ

ストロークを変更

Tabler Iconsのダウンロード

SVGアイコンのダウンロードは、簡単です。
アイコンをクリックすると、SVGのコードがコピーできます。

サイトのキャプチャ

Tabler Icons

SVGアイコンを全部ダウンロードしたい時は、上部の「Download Icons」から。

サイトのキャプチャ

Tabler Icons

v1.10になり、558種類のアイコンが揃っています。

Tabler Icons 全558種類の一部

Tabler Icons 全558種類の一部

サイトには検索機能もあるので、目的のアイコンをすぐに探せます。

サイトのキャプチャ

「arrow」でアイコンを検索

Tabler Iconsの使い方

インストール

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

SVGアイコンの実装

SVGアイコンを画像として読み込む場合、CSSでサイズを指定できます。

SVGのコードをコピーした場合は、コンテンツをHTMLコードに貼り付けて、ページに表示できます。

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

SVGスプライト

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

複数のストローク

すべてのSVGアイコンは、stroke-widthプロパティの値を使用して作成されているため、値を変更すると、デザインに適合するさまざまなストロークを使用できます。

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

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

sponsors

top of page

©2020 coliss