重點整理
Icônes（icones.js.org）是免費、開源的圖示搜尋網站，2026 年 10 月共收錄 187 套圖示集，一個搜尋框就能同時找 Material Symbols、Tabler、Lucide、Bootstrap Icons 等。點開任一圖示可以複製 SVG、PNG、Data URL，或 Vue、React、Svelte 等元件程式碼；也能把多個圖示加入「Bag」，一次打包成 SVG 壓縮檔下載。每套圖示的授權不同，商用前要看清楚。
做網頁時常用圖示來引導按鈕、取代冗長文字，但每套圖示各有自己的網站，要找一個合適的「首頁」圖示，往往得開好幾個分頁比較。Icônes 把上百套開源圖示集中在同一個介面，搜尋一次就能比較不同風格，還能直接複製成程式碼。這篇說明怎麼用 Icônes 找圖示、複製與批次下載，以及最容易忽略的授權問題。
Icônes 是什麼？
Icônes 是由前端開發者 Anthony Fu 發起、目前由 GitHub 上的 antfu-collective 維護的開源專案（MIT 授權），圖示資料來自 Iconify。它本身不製作圖示，而是一個集中搜尋與匯出的介面。首頁會依類別列出每套圖示集的名稱、作者、授權與圖示數量，例如 Material Symbols（Apache 2.0）、Tabler Icons（MIT）、Solar（CC BY 4.0）等。
步驟一：搜尋或選擇圖示集
進入網站後有兩種找法：
- 直接搜尋：在上方「Search for all icons…」輸入英文關鍵字（例如 home、cart、mail），會同時搜尋所有圖示集。
- 從圖示集瀏覽：點選首頁任一套圖示集，就能瀏覽這一套的全部圖示，適合想讓整個網站維持同一種風格時使用。
步驟二：點選圖示，複製 SVG 或元件程式碼
點選任一圖示，畫面會出現它的詳細面板，可以：
- 複製：SVG、SVG Symbol、PNG、Data URL，以及 Vue、React、Svelte、React Native、UnoCSS 等框架的寫法。
- 下載：SVG、PNG，或 Vue、React、Svelte、Qwik、Solid、Astro 元件檔。
- copy with color：連同目前設定的顏色一起複製。
官方說明複製下來的 SVG 可以直接貼進 Figma、Sketch、Illustrator 等設計軟體。在 WordPress 裡，可以把 SVG 程式碼貼到區塊編輯器的「自訂 HTML」區塊使用。
步驟三：加入 Bag，一次下載多個圖示
需要一整組圖示時，在圖示面板按「add to bag」把它加入清單，逛完後點右下角的「Bag」，就能把清單裡的圖示一次打包成 SVG 壓縮檔（SVGs Zip）下載，不用一個一個存。
Icônes 的圖示可以商用嗎？
要看圖示屬於哪一套。Icônes 只是搜尋介面，授權由各圖示集自己決定，首頁每套圖示集名稱下都會標出授權：
| 常見授權 | 商用 | 要注意的事 |
|---|---|---|
| MIT、ISC、Apache 2.0 | 可以 | 依授權條款保留授權聲明（多半放在專案原始碼或授權說明頁） |
| CC BY 4.0 | 可以 | 必須標示作者與出處 |
| CC BY-SA 4.0、GPL | 可以，但條件較多 | 修改後的作品可能要用相同授權釋出，商業專案使用前最好先確認 |
品牌 Logo 類的圖示集（例如各家社群平台標誌）另外還受商標規範，使用時要遵守各品牌的使用規定。想找其他可商用圖示，也可以參考 Free Icons 與 Health icons。
常見問題
Icônes 需要註冊嗎？
不需要，打開網站就能搜尋、複製和下載，所有功能都免費。
Icônes 可以下載 PNG 嗎？
可以，在圖示面板的下載選項裡選 PNG 即可；不過網頁使用建議優先用 SVG，放大不會模糊、檔案也小。
為什麼有些圖示要標示作者？
因為該圖示集採用 CC BY 等要求署名的授權；Icônes 首頁每套圖示集都有標出授權，下載前看一下就知道。
結語
Icônes 最大的好處是「一個地方搜遍上百套圖示」，還能直接複製成 SVG 或元件程式碼、批次打包下載，對做網站的人很省時間。唯一要養成的習慣是：下載前看一眼圖示集的授權，商用專案就不會踩雷。