Heroicons 手工打造 SVG 免费图示集，收录两种样式 230 个常见图案

Heroicons 是一套漂亮的手工製作 SVG 免费向量图示集，也是 Tailwind CSS 框架开发者製作释出的图示图案，收录超过 230 个常见图示，依照样式分为仅有外框（Outline）和填满实色效果（Solid）。前者主要使用于主要导览列和营销区块，设计为 24×24 大小，后者适合按钮或表单元件使用，设计为 20×20 尺寸。

这套图示集风格细腻，而且图形易于识别，收录的图示数量恰到好处，开启网站后可直接预览或输入关键字搜寻，将游标移动到图示上方会显示快速复制 SVG、JSX 原始码按钮，除了有基本 SVG 格式外也能透过 React 和 Vue 框架载入。

Heroicons 使用 MIT 授权方式释出，除了在 GitHub 开放原始码亦有 Figma 文件可下载。

Heroicons
https://heroicons.com/

使用教程

STEP 1

开启 Heroicons 网站就会看到两种样式的图示：Outline、Solid，前者大小为 24×24，后者尺寸就稍小一些，仅有 20×20，不过两者推荐的使用情境略有不同，使用者还是可以依照自己需求选择合适的样式。

STEP 2

透过上方的搜寻栏位、输入关键字后会显示所有相关的图示图案。

STEP 3

将游标移动到图示上方就可以复制 SVG 或复制 JSX 程序码，如果要预览 SVG 图案，可以试试之前推荐的「SVG Viewer 在线检视、最佳化 SVG 图形，亦可转档 PNG 或 React 格式」在线工具，除了具有检视 SVG 图案的功能，也能快速转为 PNG 图片格式。

值得一试的三个理由：

1. Heroicons 是 Tailwind CSS 框架开发者製作释出的图示集
2. 收录超过 230 个图案，有 Solid 和 Outline 两种不同的样式风格
3. 快速复制 SVG 或 JSX 原始码，亦有 Figma 文件可供下载