Heroicons Micro:これは何? アリ用のアイコンですか?

Adam Wathan

この度、Heroicons v2.1 をリリースしました。これには、よりタイトで高密度なUI向けに設計された、300個近くの16x16アイコンのフルセットである、全く新しいmicroスタイルが含まれています。

Heroicons Micro

私たちは長い間このサイズのセットを作りたいと思っていましたが、今年の初めに新しいReact UIキットプロジェクトに取り組み始めるまで、それらをどうしても必要とするほど切実に感じることがなく、デザインに踏み切ることができませんでした。

Catalyst(私たちの新しいUIキット)では、要素に十分な余白を持たせつつ、それを使って構築するアプリケーションが実際に生産的に使えるように、十分に密度を高く保つという、まさに針の穴を通すような試みをしました。

UIでは14pxのテキストを多用しており、見た目も素晴らしいのですが、既存の20x20アイコンを組み込もうとしたところ、少し大きすぎ、バランスが悪いように感じました。

Heroicons Mini compared to Heroicons Micro used in a dropdown

ほとんどの人はおそらくアイコンを縮小して済ませていたでしょうが、私たちは良くも悪くも、そういう大多数の人々とは違います。

アイコンは、使用される正確なサイズに合わせて設計することで、常に非常にシャープに仕上がります。そのため、私たちはすべてのアイコンを一から描き直し、意図したサイズで美しく鮮明にレンダリングされるように、アイコンごとに詳細の量を注意深く調整する作業を開始しました。

Examples of details adjusted for Heroicons Micro

約1ヶ月後、私たちは288個の全く新しいアイコンセットを手に入れました。これは、Catalystで取り組んできたような高密度インターフェースのために、細心の注意を払って作成されたものです。

新しいアイコンはすべてHeroiconsウェブサイトで確認でき、公式のHeroicons Figmaライブラリを使ってデザインを開始したり、ReactおよびVueライブラリを使ってプロジェクトに追加したりできます。

すべての最新情報を直接あなたの受信箱に届けます。
ニュースレターに登録してください。

Copyright © 2025 Tailwind Labs Inc.·商標ポリシー