この記事の目次 開く・閉じる
一つの画面を、同じ絵柄で揃えられる
Tabler Iconsは、Paweł Kuna様を中心に多くの貢献者が制作・保守しているオープンソースのアイコン集です。個人の作り手から始まった活動を紹介しますが、現在すべてを一人で制作している、と扱うものではありません。公式のAboutページには制作・維持に関わる人たちが紹介されています。
今回便利だと感じたのは、アイコンを眺めるだけでなく、その場で名前を検索し、SVGコードを確認する画面へ進めるところです。小さな線画が揃っているため、画面の機能ごとに別々の素材サイトを回らずに試せます。ただし、絵だけで意味が必ず伝わるわけではありません。文字との組み合わせも考えたい素材です。
スクショで追う、検索アイコンの選び方
検索欄に英語の機能名を入れる
公式のIconsページを開き、上部の検索欄へsearchと入力します。今回、検索に関係する候補が一覧に絞られることを確認しました。日本語検索の網羅性は未検証なので、最初は英語の短い語で試すのが分かりやすいでしょう。
表示中の案内やプロモーションが画面を覆う場合は閉じてから操作します。有料商品の購入やニュースレター登録は、この手順に必要ありません。
使いたい形を押して、詳細を開く
今回は名前がsearchの虫眼鏡を選択。詳細画面にアイコンのプレビュー、SVGコード、線の太さの調整、Outline／Filledの表示が出ました。線の太さを実際に変更した比較は未実施です。
コードまたはファイルを選ぶ
Copy SVG codeはコードを使う入口、Download SVGはSVGファイル、Download PNGは画像ファイルの入口です。今回はCopy SVG codeを押しましたが、クリップボードへのコピー完了を確認できませんでした。ダウンロードボタン経由の保存完了も未確認です。
下の使用例には、代わりに公式GitHubのsearch.svgから取得したファイルを使いました。公式リポジトリも確実な入手先の一つです。素材をまとめて使う場合は、公式READMEの導入方法と同梱ライセンスを確認してください。
今回の仕上がり：文字付きの検索ボタン
以下はみっけメディアで作った動く使用例です。虫眼鏡の横に文字を添え、押した結果も説明する形にしました。実際の検索や外部サービスへの送信は行いません。
アイコンは24pxで配置。文字が操作を説明しているので、この画像自体は装飾として扱い、読み上げで同じ意味を二重に伝えない実装にしています。絵だけを置くボタンの場合は、ボタンの操作内容が分かる名前を別途付ける必要があります。
実際の使用例は、単にアイコンを並べるよりも「小さい画面で見えるか」「文字と揃うか」「押した反応が分かるか」を確認するためのものです。SVGを軽量化するならSVGOMGの操作ガイド、実装全体の確認は公開前チェックの記事へ。
無料のMIT版と、有料セットを混同しない
今回紹介しているオープンソースのTabler IconsはMITライセンスです。利用・改変・商用利用を含む許諾がありますが、著作権表示と許諾文をコピーまたは重要な部分に含める条件があります。「無料だから条件もない」とは扱いません。
使用例には公式のLICENSE全文を保持し、素材名と作り手も掲載しました。配布物に組み込む場合も、配布物を受け取った人がライセンスを確認できる形で残してください。SVG内のコメントを最適化で消しても、ライセンス保持の条件が消えるわけではありません。
公式サイトには、有料の素材セットや他の商品も案内されています。Tablerの全商品が無料・MIT、という意味ではありません。購入する商品の条件は別途確認が必要です。ブランドを表すアイコンなどについても、素材のライセンスだけでブランドの使用可否を決めないようにします。
出典・確認範囲
確認日：2026年9月29日。PCでsearch検索、候補の選択、詳細画面の表示を実施。公式SVGとLICENSEを取得して使用例に掲載しました。コピー・ダウンロードボタン経由の保存完了、スマホでの素材検索、有料商品の中身は未確認です。スクショは実画面で、AI生成画像ではありません。現在Xでバズっているという根拠は確認していません。