Heroicons 是由 Tailwind CSS 的製作商所免費提供的線上 SVG 圖標素材資源，在網站當中提供了兩種不同的尺寸與樣式，並且所有 Icons 都已經經過預先優化，同時能讓使用者直接複製並貼至 HTML 中顯示。

網站當中所有的圖標 Icons 都是採用「MIT Licensed」授權方式，這是許多開源軟體當中最廣泛被使用的授權方式之一。簡單來說，被授權人有權利使用、複製、修改、合併、出版發行、散布、再授權或販售軟體及軟體的副本，及授予被供應人同等權利。

這意味著你可以任意使用 Heroicons 當中所提供的所有圖標 Icons，也能將其運用在商業用途之中，且不須署名或是附上來源，你甚至能修改後再授權甚至販賣都沒有問題。

如果你還想尋找其他可商用 Icons 圖標，可以參考：Unicons Solid、CSS.GG、Tabler Icons、SVG Repo、Heroicons.dev、Ionicons…等等相關免費素材，點擊了解更多詳細內容介紹。

網站名稱：Heroicons
網站網址：https://heroicons.com/

Heroicons 簡介教學

Step 1

進入網站後，透過 Search 搜尋框尋找圖標 Icons，目前網站已經提供了 226 個免費商用 Icons，未來還會陸續新增：

Pin

Step 2

找到你想要的圖標 Icons 之後，將滑鼠移入圖標上方，此時就會顯示「Copy SVG」與「Copy JSX」，點選複製選擇任何一種格式都能直接貼至 HTML 當中直接顯示圖標 Icons：

Pin

複製的程式碼就會長得像以下格式：

直接貼上 HTML 後就可以直接顯示 SVG 圖標，並可透過設置 Class 來自定義圖標的顏色與大小，非常方便。

如果你還想尋找其他與免費可商用 Icons 的免費資源，可以參考：

• iconmonstr – 4496+ 可商用 CC0 大量圖標 Icons 免費下載，另提供 Iconic Font 字體線上使用
• Simple Icons – 大量知名品牌圖標 Icons，CC0 可商用免費下載 SVG 向量檔與提供線上 CDN 資源
• Remix Icon – 免費開源圖標庫，多達 2 千以上的線性圖標免版權可商用下載
• Iconshock – 提供超過 200 萬免費圖標，附上來源可作為個人使用，$99 美元即可終身可商業使用
• Icons8 – 大量圖標免費下載、嵌入 HTML，更提供免費圖片、向量插圖、音樂下載使用

Pin

Heroicons 評價推薦心得

• 免費可商用 Icons 線上提供
• 提供 SVG 與 JSX 格式顯示圖標
• 提供兩種不同尺寸樣式圖標