Heroicons.dev – 線上開源 176+ 個免費圖示，一鍵複製 SVG 格式程式碼直接貼上顯示圖標！

Heroicons.dev 是一個免費開源圖示的網站，裡面目前已經新增了 176+ 個以上的圖示，裡面的圖示都採用 MIT-license，因此可以放心的用於任何的專案當中，也可以作為商業用途使用。

Heroicons.dev 是由 Steve Schoger、Adam Wathan 與 Zaydek 製作而成，裡面的所有圖示都是由 Steve Schoger 與 Adam Wathan 製作而成，每一種圖示都提供了兩種樣式，分別為外框與填滿，你可以藉由搜尋框旁邊的「+」號來進行圖標樣式的切換。

如果有興趣可以前往 GitHub 的專案，裡面會提供作者與該專案的更詳細的細節。

網站名稱：Heroicons — Free, open source icons
網站網址：https://heroicons.dev/

Heroicons 簡介教學

步驟一

搜尋圖標

進入頁面之後，可以透過搜尋框直接搜尋圖標，或是滑鼠滾輪下拉進行尋找：

Pin

步驟二

一鍵複製圖示

所有的圖標都是採用 HTML 格式提供複製與貼上。挑選好你想要的圖示後，只需要點選一下圖示即可複製該圖示的 SVG 程式碼：

Pin

步驟三

貼上 SVG 程式碼顯示圖示

與其他免費圖示網站不同之處在於，Heroicons 僅提供 SVG 的 HTML 程式碼，因此只能複製後直接貼至 HTML 格式當中，即可顯示，複製後的程式碼格式如下：

只需要將這個 HTML 格式的語法貼至專案中，即可顯示該圖示。

如果你還想尋找其他免費圖標網站，你可以參考：

• Ionicons – 1200+ 免費精美圖標 Icons 開源下載，專為 Web、iOS、Android、桌面應用程式所開發
• iconmonstr – 4496+ 可商用 CC0 大量圖標 Icons 免費下載，另提供 Iconic Font 字體線上使用
• Simple Icons – 大量知名品牌圖標 Icons，CC0 可商用免費下載 SVG 向量檔與提供線上 CDN 資源
• Remix Icon – 免費開源圖標庫，多達 2 千以上的線性圖標免版權可商用下載
• Iconshock – 提供超過 200 萬免費圖標，附上來源可作為個人使用，$99 美元即可終身可商業使用

Pin

Heroicons 推薦評價優點

• 免費開源且免版權
• 一鍵複製圖標 SVG 格式
• 提供兩種圖標樣式