数ヶ月前、私たちはひっそりとHeroiconsをリリースしました。これは、当初Tailwind UIのコンポーネントをサポートするために設計した無料のSVGアイコンセットです。本日、公式のHeroicons Webエクスペリエンスを公開しました。これにより、アイコンの検索や、Tailwind対応のHTMLまたはJSXとしてクリップボードにすばやくコピーすることがこれまで以上に簡単になります。
現在、220種類以上のアイコンが、用途に合わせて設計されたmediumとsmallの2つのサイズでご利用いただけます。
- Mediumアイコンは24x24でレンダリングされるように設計されており、主要なナビゲーションやマーケティングセクションなどに適しています。
- Smallアイコンは20x20でレンダリングされるように設計されており、ボタンやフォーム要素、テキストの補助などに適しています。
すべてのアイコンはTailwindに対応しており、Tailwindの組み込みのサイズやカラーユーティリティで簡単にスタイルを設定できます。
<svg class="h-6 w-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>最適な結果を得るには、mediumアイコンにはh-6 w-6、smallアイコンにはh-5 w-5をご使用ください。
まだ始まったばかり
今後数ヶ月の間に、新しいアイコンや新しいアイコンスタイル（デュオトーンはいかがですか？）のデザインとリリースに向けて、多くのアイデアがあります。
このサイトのデザインもきっかけとなり、Hero Patternsサイトをリフレッシュしたい気持ちになりました。heropatterns.com に近いうちに何か表示されるでしょう。
他にもたくさんの「Hero」ドメインが活用されるのを待っており、それらのドメインで取り組んでいることを近いうちに発表するのが楽しみです。
ご提案はありますか？
新しいアイコンに関するアイデアがありましたら、ぜひお聞かせください！ Heroicons GitHubリポジトリにアクセスして、Issueを開いてご提案ください。
この投稿について話し合いたいですか？ GitHubでディスカッション →