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

Adam Wathan

我们刚刚发布了 Heroicons v2.1,其中包含一个全新的 micro 风格 — 一整套近三百个专为更紧凑、更高密度 UI 设计的 16×16 图标。

Heroicons Micro

我们一直想制作这样尺寸的图标集,但直到今年早些时候我们开始开发 一个新的 React UI 套件项目 时,我们才真正迫切需要它们,于是下定决心开始设计。

在 Catalyst(我们的新 UI 套件)中,我们试图在给元素足够呼吸空间的同时,保持足够的密度,让您用它构建的应用程序真正用起来感觉高效。

我们使用了很多 14px 的文本,这在 UI 中看起来很棒,但当我们尝试使用现有的 20×20 图标时,它们感觉稍微有点太大,显得不平衡。

Heroicons Mini 与 Heroicons Micro 在下拉菜单中的对比

大多数人可能会直接把图标缩小就完事了,但我们不是大多数人,无论这是好是坏。

当您为图标的实际使用尺寸进行设计时,图标总是会更清晰,所以我们开始从头重新绘制每个图标的过程,仔细调整每个图标的细节量,以确保它们在预期尺寸下呈现出清晰漂亮的效果。

为 Heroicons Micro 调整的细节示例

大约一个月后,我们完成了一套全新的 288 个图标,它们都是为更高密度的界面(比如我们正在开发的 Catalyst)精心打造的。

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

Get all of our updates directly to your inbox.
Sign up for our newsletter.