Heroicons - 140種類のSVGアイコン集
アイコンセットはWebサイトの雰囲気やデザインによって最適なものを選ぶべきです。そのため、様々なアイコンセットを知っておけば、利用できる場面も増えるでしょう。 今回紹介するHeroiconsはシンプルなアイコンセットになります。特徴としてはすべてSVGであることでしょう。
Heroiconsの使い方
角丸で、柔らかい雰囲気のアイコンセットです。
チャットや通貨記号など。
ツールバーなどに使えそうなアイコンです。
汎用性の高そうなアイコンが多数あります。
HeroiconsはSVGなので、アイコンをコピーすると次のようになっています。
<svg fill="none" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
viewBox="0 0 24 24" stroke="currentColor">
<path d="M4 8V4m0 0h4M4 4l5
5m11-1V4m0 0h-4m4 0l-5 5M4
16v4m0 0h4m-4 0l5-5m11
5l-5-5m5 5v-4m0 4h-4">
</path>
</svg>
これを貼り付ければ、そのままHeroiconsが使えます。つまり欲しいアイコンだけ、一つから利用可能です。さらにアイコンがHTML中に埋め込まれるのでネットワークアクセスも不要になり、表示が高速になるでしょう。もちろんSVGなのでJavaScriptから操作することもできます。
HeroiconsはSVG製のオープンソース・ソフトウェア(MIT License)です。
Heroicons tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development.