全部、商用利用無料！ UIデザイン用のSVGアイコンが1900種類以上、デザインに合わせてカスタマイズも簡単な優れもの
Post on:2022年4月25日
sponsors
企業サイトやプロダクトページをはじめ、オンラインショップ、ポートフォリオ、ブログなど、WebサイトやアプリのUIデザインに適したSVGアイコンが無料で利用できるTabler Iconsを紹介します。
アイコンの種類はなんと1,900種類超え！
豊富なアイテムに加え、カラーやサイズやストロークなどのカスタマイズも簡単で、自分のデザインに合ったSVGアイコンを利用できます。さらに、PNGやWebフォントも揃っています。
Tabler Icons
Tabler Icons -GitHub
Tabler Iconsの特徴
Tabler Iconsは1,900種類を超える高品質なSVGアイコンが揃っており、MITライセンスで商用プロジェクトでも無料で利用できます。
アイコンは24x24のグリッドと2pxのストロークでデザインされており、SVGなのでサイズやストロークを変更するのも簡単です。
1px, 1.5px, 2pxにストロークを変更
右上のプルダウンからサイズやストロークを変更できます。
アイコンのサイズを変更
1,900種類を超えるSVGアイコンは、さまざまなプロジェクトで利用できます。
アイコンの一覧
SVGアイコンのダウンロード
SVGアイコンのダウンロードは、簡単です。
アイコンすべてを一括でダウンロードするには、ページの上部「Download」から。
ダウンロードしたファイルの構成は、下記の通り。
Tabler Iconsのファイル構成
アイコンを個別に選びたい時は、各アイコンをクリックします。
SVGのコード、SVGファイル、PNGファイルをダウンロードできます。
「more」をクリックすると、さらにさまざまなバリエーションが用意されています。
ライブデモも用意されており、アイコンの使用例を確認できます。
Figma用も用意されているのは、便利ですね。
SVGアイコンの使い方
インストール
Tabler Iconsはnpm経由でインストールできます。
|
1 |
npm install @tabler/icons --save |
SVGアイコンの実装
SVGアイコンをWebページに実装する際は、<img>やbackground-imageで配置します。
|
1 |
<img src="icon.svg" alt="icon title" /> |
コピペしたコードを使用する際は、下記の通りです。
|
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でアイコンのカラー、サイズ、ストローク幅を変更できます。
|
1 2 3 4 5 6 |
.icon-tabler { color: red; width: 32px; height: 32px; stroke-width: 1.25; } |
SVGアイコンはstroke-width値を変更すると、サイトやアプリのデザインに適したさまざまなストロークを使用できます。
SVGアイコンは、さまざまなストロークを使用できる
SVGスプライト
SVGスプライトにも対応しており、ページに表示するアイコンを追加します。
|
1 2 3 |
<svg width="24" height="24"> <use xlink:href="path/to/tabler-sprite.svg#tabler-activity" /> </svg> |
sponsors
