Heroicons.com 介绍

几个月前，我们悄悄发布了 Heroicons，这是一组免费的 SVG 图标，最初设计用于支持 Tailwind UI 中的组件。今天，我们正式发布 Heroicons 网站体验，它使搜索图标和快速将其复制到剪贴板（作为 Tailwind 就绪的 HTML 或 JSX）变得比以往任何时候都更容易。

目前有超过 220 个图标，提供中号和小号两种尺寸，尺寸设计旨在服务于不同的用例

• 中号图标设计为以 24x24 渲染，非常适合用于主导航和营销部分等。
• 小号图标设计为以 20x20 渲染，非常适合用于按钮、表单元素和支持文本。

所有图标都已为 Tailwind 做好准备，并且可以使用 Tailwind 的内置尺寸和颜色实用程序轻松设置样式。

<svg
  class="h-6 w-6 text-indigo-500"
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
>
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>

为了获得最佳效果，中号图标请使用 h-6 w-6，小号图标请使用 h-5 w-5。

仅仅是开始

我们有很多关于新图标以及新图标样式（双色调有人要吗？）的想法，我们很高兴在未来几个月内设计和发布这些。

设计这个网站也让我很想刷新 Hero Patterns 网站，所以你可能很快就会在 heropatterns.com 上看到类似的东西

我们还有一堆其他的 “Hero” 域名等待使用，我很高兴很快揭晓我们正在为这些域名做些什么。

有建议吗？

如果您对新图标有任何想法，我们很乐意倾听！请前往 Heroicons GitHub 仓库并提出 issue 来提出建议。

想讨论这篇文章吗？在 GitHub 上讨论 →