Heroicons Micro:这些是什么,蚂蚁的图标?
- 日期
- Adam Wathan
我们刚刚发布了 Heroicons v2.1,其中包含全新的微型风格——一套近 300 个 16×16 的图标,专为更紧凑、更高密度的 UI 设计。
我们一直想做一套这种尺寸的图标,但直到今年早些时候我们开始着手 一个新的 React UI 工具包项目,我们才真正需要它们,迫切到不得不咬咬牙设计出来。
在 Catalyst(我们的新 UI 工具包)中,我们试图在给事物足够的空间让它们呼吸的同时,也保持足够的密度,这样你用它构建的应用程序才能真正感觉高效。
我们使用了大量的 14px 文本,在 UI 中看起来很棒,但当我们尝试将现有的 20×20 图标整合进来时,它们感觉稍微有点太大,不平衡。
大多数人可能会直接缩小图标尺寸然后继续,但我们不是大多数人,无论好坏。
图标在为其将要使用的确切尺寸进行设计时,总是会变得更加清晰,因此我们开始从头开始重新绘制每个图标,仔细地减少每个图标的细节量,以确保它们在目标尺寸下渲染得清晰美观。
大约一个月后,我们拥有了一套全新的 288 个图标,精心设计用于像我们一直在 Catalyst 中进行的更高密度界面。
你可以在 Heroicons 网站 上查看所有新图标,使用我们的官方 Heroicons Figma 库 开始设计,并使用我们的 React 和 Vue 库 将它们添加到你的项目中。