详情页图标怎么弄？Heroicons 免费 SVG 图标集

Heroicons 这个免费 SVG 图标库，对做网店的人来说，最实在的用处就是：详情页、主图、活动海报里那些小图标，不用再满网找素材或者花钱买了。它是 Tailwind CSS 官方团队做的，2.3 万多个 star，MIT 协议，拿来就能用，连版权声明都不用留。

适合谁

开网店的小团队：详情页要画卖点、售后流程要画步骤图、活动页要画促销标签，这些地方都需要干净统一的小图标。Heroicons 一套图标能覆盖大部分场景，不用东拼西凑。

自己做详情页的店主：用 Canva 或者稿定设计做图时，经常要配小图标。直接从 Heroicons 网站复制 SVG 代码，粘贴到设计工具的代码框里就能用，比截图找素材清晰得多。

外包设计但想省钱的：把 Heroicons 的图标链接发给设计师，让他们用这套图标做页面，风格统一，而且不用额外付图标版权费。

能解决什么问题

详情页卖点图标不统一：以前可能从不同素材站下载图标，风格粗细都不一样。Heroicons 有 outline（描边）和 solid（实心）两种风格，各选一种用，整页就统一了。

活动海报缺小元素：做促销海报时，加个购物车、加个闹钟、加个箭头，这些基础图标 Heroicons 都有。直接复制 SVG 代码，改颜色就能用，不用重新找素材。

页面加载慢：SVG 是代码格式，不占图片体积。直接内联到 HTML 里，比加载一张 PNG 图片快得多，对店铺页面打开速度有好处。

怎么开始用

最直接的方式是去 heroicons.com 网站，找到想要的图标，点复制代码，直接粘贴到 HTML 里：

<svg
  class="size-6 text-gray-500"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  stroke-width="2"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>

如果你用 React 开发店铺前端，可以装官方组件库：

npm install @heroicons/react

import { BeakerIcon } from '@heroicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="size-6 text-blue-500" />
      <p>...</p>
    </div>
  )
}

用 Vue 的话：

npm install @heroicons/vue

<template>
  <div>
    <BeakerIcon class="size-6 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>

优点和坑

优点：

• 免费且开源：MIT 协议，商用无限制，不用署名。这是最省心的一点。
• 风格统一：同一套图标里描边和实心两种风格，粗细一致，放在一起不违和。
• 颜色随意改：SVG 用 currentColor 控制颜色，写个 text-red-500 就变红了，不用重新下载。

坑：

• 图标数量有限：只有基础图标，大概几百个。如果你需要很垂直的行业图标（比如"生鲜冷链"、"美妆蛋"这种），它没有，得自己找别的库补。
• 不接收新图标贡献：官方明确说了不接受新增图标的 PR，所以缺的图标只能等官方更新，或者自己另找。
• 需要会一点代码：复制 SVG 代码粘贴到 HTML 里，这个操作对完全不懂代码的店主有点门槛。不过照着教程做一遍就会了。
• 没有 PNG 格式：它只提供 SVG 代码，不提供 PNG 图片下载。如果你用的工具不支持 SVG，就得自己转换格式。

适合你吗

适合：你平时做详情页、活动页会用到基础图标；你愿意花 10 分钟学一下怎么复制粘贴 SVG 代码；你希望图标风格统一又不想花钱买素材。

不适合：你需要非常垂直的行业图标；你完全不想碰代码、只想下载现成 PNG；你的设计工具不支持 SVG 代码。

一句话总结：基础图标用它免费解决，特殊图标再另想办法。省下的素材站会员费，够你喝好几杯奶茶了。

---

常见问题

Heroicons 图标是免费商用的吗？

是的，Heroicons 完全免费且开源，采用 MIT 协议。这意味着你可以将其用于商业项目，比如网店详情页、活动海报，无需支付费用，也无需保留版权声明，可以放心使用。

Heroicons 图标库适合做电商详情页吗？

非常适合。Heroicons 由 Tailwind CSS 官方团队制作，提供描边和实心两种统一风格，能轻松解决详情页卖点图标风格不统一的问题。你可以直接复制 SVG 代码使用，不占图片体积，还能提升页面加载速度。

怎么在 Canva 或稿定设计里使用 Heroicons 图标？

操作很简单：首先访问 heroicons.com 网站，找到你想要的图标；然后点击复制该图标的 SVG 代码；最后，将代码粘贴到设计工具（如 Canva）支持 SVG 的代码框或元素中即可，这样获得的图标比截图更清晰。

Heroicons 和别的免费图标库比有什么优势？

Heroicons 最大的优势是风格高度统一，拥有描边和实心两种配套风格，且颜色可通过代码（如 text-red-500）轻松修改。作为 Tailwind CSS 官方出品，其质量与设计一致性有保障，特别适合追求页面视觉统一的场景。

Heroicons 图标数量多不多？有没有行业专用图标？

Heroicons 主要提供几百个基础通用图标，如购物车、闹钟、箭头等，能满足电商详情页和海报的常见需求。但它没有非常垂直的行业图标（如“生鲜冷链”），且官方不接受新增贡献，特殊图标需要另寻其他库补充。

相关工具推荐

• Tabler Icons 免费 SVG 图标库，提供超过 6200 个图标
• Lucide 免费商用图标库，包含 1600+ 个适合电商的矢量图标
• 使用 MDB UI Kit 套件快速打包制作网页界面