商用無料！UIデザインに最適なSVGアイコンが1,130個、小さいスペースにも配置できる極小サイズ対応の優れもの
Post on:2020年7月29日
sponsors
個人でも商用プロジェクトでも無料で利用できる、小さいスペースにも配置できる極小サイズ対応のSVGアイコンを紹介します。SVGアイコンなので、もちろん通常のサイズ、大きいサイズでも美しく表示されます。
UIデザイン用のアイコンはアウトライン・ソリッドの2種類計1,130アイテムが揃っています。しかもオープンソースなのは、嬉しいですね。
Teenyiconsの特徴
Teenyiconsは非常に小さいスペースにも配置できるようデザインされたSVGアイコンで、極小サイズ（15x15）でも鮮明に見えるよう設計されています。
MITライセンスで、商用プロジェクトでも無料で利用できます。
アイコンは極小サイズはもちろん、通常のサイズでも使用できます。どんなアイコンがあるのか見てみましょう。
SVGアイコンの表示は、SVG Icon managerを使用しています。
アイコンの管理が簡単に！たくさんのSVGアイコンを一元管理でき、編集もできる無料ツール -SVG Icon manager
アウトラインのSVGアイコン
アイコンはアウトライン・ソリッドの2種類、それぞれ565アイテム、計1,130アイテムが揃っています。
ソリッドのSVGアイコン
SVGアイコンなので、どんなサイズで使用しても美しく表示されます。
アウトラインのSVGアイコン
Teenyiconsのダウンロード
SVGアイコンの一括ダウンロードは、下記ページから。
「Code」をクリックして、「Download ZIP」をクリックすると、一括でダウンロードできます。
または、下記ページからSVGアイコンを個別にダウンロード、Figmaに複製することもできます。
Teenyiconsの使い方
インストール
アイコンはnpm, yarn経由でインストールできます。
|
1 2 |
npm i teenyicons yarn add teenyicons |
アイコンの使い方
アイコンをインラインで使用する場合は、アウトラインまたはソリッドのアイコンをコピーし、HTMLにインラインで記述します。カラーは、CSSで簡単に変更できます。
|
1 2 3 |
<svg class="w-4 h-4 text-white" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 1.5h1.5a6 6 0 110 12H0m7-12h4.5a3 3 0 110 6m0 0H9m2.5 0h-2m2 0a3 3 0 110 6H7" stroke="currentColor"/> </svg> |
Teenyiconsは、SVGスプライトもサポートしています。
上記3つのいずれかを使用し、HTMLにスプライトをインライン化します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<svg class="tiny-cyan-icon"> <!-- Inlined sprite. Possible variants are outline or solid. --> <use xlink:href="#variant--icon-id"/> </svg> <svg width="15" height="15" style="color: slateblue"> <!-- Outline sprite --> <use xlink:href="teenyicons-outline-sprite.svg#outline--360"/> </svg> <svg class="h-5 w-5 text-gray-800"> <!-- Solid sprite --> <use xlink:href="teenyicons-outline-sprite.svg#outline--globe-africa"/> </svg> |
sponsors
