アイコンセットは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.