HeroiconsはTailwind CSSクリエイターが作ったフリーSVG iconサイト

ハウツー
コロのicon
コロ

Heroiconsは、Tailwind CSSのクリエイターによって作られたSVG形式のアイコン集サイトです。
heroiconsサイトのスクリーンショット

ここがすごい

solid, outlineの二種類、226個のアイコンが用意されている
MITライセンスのフリーSVGアイコンなので、サイトやアプリなどで使える
アイコンのスタイルをTailwind classで変更可能

使い方

クリックでCopy

Heroiconsのcopy方法

コピーしたSVG icon

JSX記法でコピーできるので、Reactでそのまま使えます。
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /> </svg>

Tailwind classが使える

💡
Tailwind classを使用してサイズ、色の変更等が可能
Reactで書かれているこのブログでは、heroiconsのSVGをコンポーネントとして用意して、propsでclassを渡して使い回しています。
サイトでよく使うiconが一通り用意されているので、様々な場面で活躍してくれます。
Tailwind CSS
SVG
アイコン
CSS
コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい