UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
Post on:2024年1月23日
sponsors
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？
アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。
Heroicons Micro
Heroicons -GitHub
Heroicons Microの特徴
Microサイズのアイコンは、先日v2.1にアップデートされたHeroiconsに新しく加わったサイズです。
タイトで高密度のUI向けに設計されており、UIデザイン用に約300種類のアイコンが揃っています。MITライセンスで、商用プロジェクトでも無料で利用できます。
既存のアイコンを縮小して使用することがあるかもしれませんが、アイコンは使用する正確なサイズに合わせてデザインされているので、美しくより鮮明にレンダリングさせるためには意図されたサイズで使用することが望ましいです。
Microサイズのアイコンは16x16で設計されており、小さくてもはっきり分かるようさまざまな工夫がされています。
たとえば、
- スピーカーのアイコンは、穴が少なく設計されています。
- アイコンの表面積を増やすためにフラットなボタン。
- 明瞭度を高めためのストレートなスライダー。
- カレンダーのグリッドのドットを少なく。
Heroicons Microのダウンロード
アイコンのダウンロードは簡単、登録など面倒なことは一切不要です。
サイトにアクセスし、アイコンをホバーすると、SVG, JSXをコピーできます。
アイコンをまとめて全部ダウンロードしたいときは、GitHubからダウンロードできます。「Assets」から最新版の「Source code」をダウンロードします。
また、Figmaでもアイコンを使用できます。
Heroicons Microのアイコン
Heroicons Microのアイコンは、約300種類のアイテムが揃っています。
Heroicons Microのアイコン全300種類
アイコン一式がまとめてダウンロードできるGitHubのファイルを解凍すると、こんな感じです。Outline, Solide, Mini, Microのアイコンがすべて揃っています。
GitHubからダウンロードしたアイコンファイル
sponsors
