2 分鐘閱讀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 簡介教學
步驟一
搜尋圖標
進入頁面之後，可以透過搜尋框直接搜尋圖標，或是滑鼠滾輪下拉進行尋找：
步驟二
一鍵複製圖示
所有的圖標都是採用 HTML 格式提供複製與貼上。挑選好你想要的圖示後，只需要點選一下圖示即可複製該圖示的 SVG 程式碼：
步驟三
貼上 SVG 程式碼顯示圖示
與其他免費圖示網站不同之處在於，Heroicons 僅提供 SVG 的 HTML 程式碼，因此只能複製後直接貼至 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 美元即可終身可商業使用
Heroicons 推薦評價優點
- 免費開源且免版權
- 一鍵複製圖標 SVG 格式
- 提供兩種圖標樣式
相關文章
- Radix Icons – 15×15 開源圖標 Icons 免費下載，支援 Sketch、Figma 與 SVG 檔案格式
- Animated icons by Icons8 – 900+ 免費線上動畫圖標，提供 GIF、JSON 與 AE 格式免費下載可商用動畫圖示
- Heroicons – 免費商用 Icons SVG 線上圖標，可直接在 HTML 中使用 CSS 類別元素顯示 Icons
- Tabler Icons – 超過 558+ 高品質圖標 SVG 格式免費下載，MIT 授權可線上客製化圖示樣式
- IcoMoon App – 5500+ 免費線上圖標資源網站，提供 SVG 與 PNG 格式，並可自定義上傳圖標產生 Font 字體樣式
- Flaticon – 全球最大線上免費圖標庫，提供各種格式的圖示 Icons 需署名即可免費用於商業或個人用途
- Octicons – GitHub 官方開源 Icons 免費圖示下載，支援 Ruby, Rails, Jekyll 適合開發者使用
- IconPark – 字節跳動官方出品超過 1287+ 高品質圖標免費下載，可線上客製化圖示外觀樣式
- LineIcons – 超過 2000+ 個線形圖標庫，專為設計師與開發人員設計的圖標 Icons 免費下載
- Emblemicons – 免費開源圖標 Icons，高達 1000+ 個產品開發、設計與業務展示的圖標樣式免費下載
發佈留言