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

日期

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

Heroicons Micro

我们一直想做一套这种尺寸的图标,但直到今年早些时候我们开始着手 一个新的 React UI 工具包项目,我们才真正需要它们,迫切到不得不咬咬牙设计出来。

在 Catalyst(我们的新 UI 工具包)中,我们试图在给事物足够的空间让它们呼吸的同时,也保持足够的密度,这样你用它构建的应用程序才能真正感觉高效。

我们使用了大量的 14px 文本,在 UI 中看起来很棒,但当我们尝试将现有的 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 库 将它们添加到你的项目中。