商用利用無料、UIデザイン用のSVGアイコンが558種類！デザインに合わせたカスタマイズも簡単な優れもの
Post on:2020年7月14日
sponsors
企業サイトはもちろん、プロダクト、コマース、ショップ、アプリ、ブログなど、さまざまなUIデザインのSVGアイコンが無料で利用できるTabler Iconsを紹介します。
SVGアイコンの数はなんと558種類で、オープンソース！
豊富なアイテムに加え、カラーやサイズやストロークなどのカスタマイズも簡単で、自分のデザインに合ったSVGアイコンを利用できます。
Tabler Icons
Tabler Icons -GitHub
Tabler Iconsの特徴
Tabler Iconsは550種類を超える高品質なSVGアイコンのセット、MITライセンスで商用プロジェクトでも無料で利用できます。
アイコンはカスタマイズにも対応しており、カラーやストロークも簡単に変更できます。上部のカラーボックスをクリックすると、そのカラーに変更されます。
カラーを変更
カラーは数値で変更することもできます。
カラーを数値で変更
サイズは、12px-100pxまで4px単位で変更できます。
サイズを変更
ストロークも変更でき、極細から極太まで揃っています。
ストロークを変更
Tabler Iconsのダウンロード
SVGアイコンのダウンロードは、簡単です。
アイコンをクリックすると、SVGのコードがコピーできます。
SVGアイコンを全部ダウンロードしたい時は、上部の「Download Icons」から。
v1.10になり、558種類のアイコンが揃っています。
Tabler Icons 全558種類の一部
サイトには検索機能もあるので、目的のアイコンをすぐに探せます。
「arrow」でアイコンを検索
Tabler Iconsの使い方
インストール
npm経由でインストールできます。
|
1 |
npm install tabler-icons --save |
SVGアイコンの実装
SVGアイコンを画像として読み込む場合、CSSでサイズを指定できます。
|
1 |
<img src="path/to/icon.svg" alt="代替テキスト"> |
SVGのコードをコピーした場合は、コンテンツをHTMLコードに貼り付けて、ページに表示できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<a href=""> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-disabled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > ... </svg> Click me </a> |
CSSで、SVGアイコンのサイズ、カラー、ストロークを変更できます。
|
1 2 3 4 5 6 |
.icon-tabler { color: red; width: 32px; height: 32px; stroke-width: 1.25; } |
SVGスプライト
SVGスプライトにも対応しており、ページに表示するアイコンを追加します
|
1 2 3 |
<svg width="24" height="24"> <use xlink:href="path/to/tabler-sprite.svg#tabler-activity" /> </svg> |
複数のストローク
すべてのSVGアイコンは、stroke-widthプロパティの値を使用して作成されているため、値を変更すると、デザインに適合するさまざまなストロークを使用できます。
すべてのSVGアイコンはさまざまなストロークを使用できる
sponsors
