几个月前,我们悄然发布了 Heroicons,这是一套我们最初设计用于支持 Tailwind UI 组件的免费 SVG 图标。今天,我们推出了官方的 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 仓库 并提交一个问题或建议。
想讨论这篇文章? 在 GitHub 上讨论 →