Heroicons Micro:这些是什么,蚂蚁用的图标吗?

Adam Wathan

我们刚刚发布了 Heroicons v2.1,其中包括一个全新的微型样式——一套完整的、几乎三百个 16×16 图标,专为更紧凑、更高密度的 UI 设计。

Heroicons Micro

我们一直想做一套这种尺寸的图标很久了,但直到今年早些时候我们开始着手 一个新的 React UI 工具包项目,我们才终于迫切需要它们,从而下定决心设计了它们。

在 Catalyst(我们新的 UI 工具包)中,我们尝试在既给予事物足够的空间,又保持足够的密度之间找到平衡点,以便您使用它构建的应用程序实际上感觉高效。

我们在 UI 中使用了大量的 14px 文本,效果很好,但是当我们尝试加入我们现有的 20×20 图标时,它们感觉有点太大且不平衡。

Heroicons Mini compared to Heroicons Micro used in a dropdown

大多数人可能只会缩小图标尺寸然后继续前进,但我们不是大多数人,无论好坏。

当您为图标的实际使用尺寸进行设计时,图标总是会变得更加清晰,因此我们开始了从头开始重新绘制每个图标的过程,在逐个图标的基础上仔细减少细节量,以确保它们在其预期尺寸下呈现良好且清晰的效果。

Examples of details adjusted for Heroicons Micro

大约一个月后,我们有了一套全新的 288 个图标,这些图标经过精心制作,专为更高密度的界面而设计,就像我们一直在 Catalyst 上做的那样。

您可以在 Heroicons 网站上查看所有新图标,使用我们的官方 Heroicons Figma 图库 开始使用它们进行设计,并通过我们的 React 和 Vue 图库 将它们添加到您的项目中。

将我们所有的更新直接发送到您的 收件箱。
订阅我们的新闻通讯。

版权所有 © 2025 Tailwind Labs Inc.·商标政策