アイコン集を選ぶとき、収録数だけを見ても実装時の使いやすさまでは分かりません。Tabler Iconsは、6,184点のSVGアイコンをMITライセンスで公開するライブラリです。すべて24×24のグリッドを基準に、アウトライン版は2pxのストロークで設計されています。数の多さより先に、異なる用途のアイコンを並べても線の調子が揃う。その一貫性が使いやすさの土台です。(公式サイト, GitHub)
アウトラインと塗りを同じ場所で探せる
公式リポジトリには、5,130点のアウトラインアイコンと1,054点の塗りアイコンが収録されています。公式サイトでは名前やカテゴリから検索し、サイズ、色、ストローク幅を変えながら見た目を確かめられます。輪郭だけでは状態を伝えにくい箇所に塗りを使うなど、画面全体の調子を見ながら選び分けやすい構成です。
SVGはGitHub Releasesから直接取得できるほか、@tabler/iconsとしてnpmから導入できます。<img>、CSSのbackground-image、インラインSVG、SVGスプライトに対応しており、既存の構成を大きく変えずに使い始められます。インラインで置けば、サイズ、色、stroke-widthをCSSから調整可能です。(README)
フレームワークでは一つずつコンポーネントとして読む
React向けには@tabler/icons-reactが用意されています。
import { IconArrowLeft } from '@tabler/icons-react';
export const BackButton = () => (
<IconArrowLeft color="currentColor" size={24} stroke={2} />
);パッケージはES Modulesで構成され、使うアイコンを個別のコンポーネントとしてimportできます。公式ドキュメントが示す既定値は、サイズが24、色がcurrentColor、ストローク幅が2です。色を親要素に合わせたい場面ではcurrentColorがそのまま働き、見た目を変えたいときは通常のpropsを渡せます。Vue、Angular、Svelteなどにも専用パッケージがあり、デザイン側ではFigmaプラグインも選べます。(React package, Packages)
Tabler Iconsを試すなら、まず一つの画面で必要なアイコンを置き換え、本文の文字やボタンと並べたときの線幅を確認するのがよさそうです。収録点数を追うより、24pxを基準にした形とcurrentColorの扱いが既存のデザインルールに馴染むかを見る。そこで揃えば、素材探しから実装までを同じライブラリでつなげられます。