SVG Icon 是什麼？為什麼網站常用 SVG 圖示？
SVG icon 是以 SVG 格式製作的向量圖示，適合用在按鈕、導覽、表單與狀態提示，因為它可縮放、可樣式化，也容易放進前端元件流程。
網站介面使用 icon 的重點不只在於看起來漂亮，還要能在不同螢幕尺寸、深色模式、互動狀態與品牌規範中保持一致。我的判斷是，SVG 圖示最適合處理這種高頻、可重複、需要精準控制的介面元素。
| 格式 | 主要特性 | 適合情境 | 限制 |
|---|---|---|---|
| SVG icon | 向量、可縮放、可用 CSS 控制部分樣式 | 網站 UI、按鈕、導覽列、設計系統 | 過度複雜的 path 仍可能變大，嵌入方式要選對 |
| PNG icon | 點陣圖片，顯示結果固定 | 照片質感、細節複雜的小圖 | 放大容易失真，常需準備多種尺寸 |
| Icon font | 用字型方式載入圖示 | 舊專案維護、既有字型圖示系統 | 語意、載入失敗、對齊與可近用性較難控管 |
SVG icon 與一般圖片 icon 差在哪裡？
SVG 是向量格式，圖示由路徑、形狀與座標描述；PNG 則是點陣圖片，由像素組成。放大 SVG icon 時，邊緣通常仍然清楚，PNG 放大後則可能出現模糊或鋸齒。
另一個差異是樣式控制。inline SVG 可以搭配 fill、stroke、currentColor 讓圖示跟著文字顏色、按鈕狀態或主題色變化，這對前端介面很實用。
SVG icon 適合哪些網站介面？
- 導覽列：首頁、搜尋、會員、購物車、選單等常用入口。
- 按鈕：下載、分享、刪除、關閉、返回、送出等操作提示。
- 表單：錯誤、成功、提示、密碼顯示、欄位狀態。
- 後台與 SaaS 介面：資料表、篩選、排序、通知、權限狀態。
- 品牌網站：服務分類、流程節點、功能亮點與視覺系統中的輔助圖示。
去哪裡找免費 SVG icon？常見 icon library 怎麼選？
找免費 SVG icon 時，先選來源類型，再看風格、授權、格式與前端支援；不要只看圖示數量，因為正式網站更怕風格混亂與授權不清。
常見來源包含 open source icons、框架官方 icon library、素材資料庫、聚合搜尋平台與公共素材庫。實務上，能不能商用比能不能下載更重要；如果來源頁沒有清楚寫授權與使用限制，我不會把它放進正式專案。
| 來源類型 | 常見例子 | 適合誰 | 選擇重點 |
|---|---|---|---|
| 框架或設計系統型 | Bootstrap Icons、Material Symbols、Fluent Icons | 前端工程師、產品團隊 | 文件完整、套件整合、風格穩定 |
| 開源 icon pack | Heroicons、其他 open source icons | 需要元件化導入的專案 | 授權、npm 支援、按需載入能力 |
| 大型素材資料庫 | Flaticon 類平台 | 設計師、行銷頁製作者 | 可商用條件、SVG 是否需付費、署名規則 |
| 聚合搜尋平台 | Iconbuddy、All SVG Icons 類網站 | 需要快速比較多套 library 的使用者 | 來源追溯、授權標示、套件名稱 |
| 公共素材庫 | Wikimedia Commons | 特殊圖示、歷史符號、公共標誌需求 | 授權頁、作者署名、修改限制 |
常見 SVG icon library 類型
SVG icon library 大致可分成套件型、資料庫型、框架型與聚合型。套件型適合前端導入，資料庫型適合找素材，框架型適合既有設計系統，聚合型適合快速比較不同 icon pack。
| 類型 | 特色 | 適合情境 |
|---|---|---|
| 套件型 | 提供 npm package、React icon 或 Vue 元件 | 產品網站、Next.js、Svelte、Vue 專案 |
| 資料庫型 | 可搜尋、預覽、下載多種格式 | 需要大量找圖示與比對風格 |
| 框架型 | 和既有 UI 框架或品牌語言接近 | Bootstrap、Microsoft、Google 風格的介面 |
| 聚合型 | 集中列出多個 open source icons | 先找方向，再回原始來源確認授權 |
選 icon library 時先看這 5 件事
- 授權：是否允許 commercial use？是否需要 attribution？能不能修改與再發布？
- 風格一致：線條粗細、圓角、填色、視角是否能和網站介面搭配？
- 格式完整：是否提供 SVG、icon font、PNG 或 framework component？
- 前端支援：是否有 npm package、React、Next.js、Vue 或 Svelte 的導入方式？
- 維護狀態：文件是否清楚？套件是否仍有人維護？重大版本是否有變更紀錄？
除了 icon library，也可以從公共素材庫找 SVG icon
Wikimedia Commons 類公共素材庫適合找特殊符號、公共標誌、歷史圖示或特定領域的 SVG 圖示。不過，公共素材不代表可以任意商用，下載前仍要查看授權、作者、署名方式與修改限制。
這類來源適合補缺口，不適合作為整站主要 icon system。品牌介面需要一致性，公共素材的風格通常較分散，放進網站前最好先整理筆畫、尺寸與顏色規則。
SVG icon 有哪些網頁開發優勢？
SVG icon 的優勢在於縮放清楚、樣式可控、適合元件化與設計系統；真正的價值來自可維護的前端流程，而不只是檔案格式本身。
| 優勢 | 對網站的幫助 | 實作提醒 |
|---|---|---|
| 可縮放 | RWD、Retina 螢幕與不同尺寸按鈕都能保持清楚 | 仍需控制 viewBox 與尺寸比例 |
| 可樣式化 | 能跟著文字顏色、hover、active、disabled 狀態變化 | 建議用 currentColor 配合 CSS |
| 可元件化 | 適合 React、Next.js、Vue、Svelte 專案管理 | 避免整包載入大型 library |
| 可最佳化 | 移除 metadata 與多餘 path 後可降低檔案大小 | 複雜圖示仍可能比 PNG 更重 |
不同尺寸仍清楚，不需要準備多張圖
SVG icon 是向量圖示，通常不需要為 16px、24px、32px 或高解析度螢幕各自準備一張圖。對 RWD 網站來說，這能減少素材管理成本，也能讓導覽列、按鈕與表單圖示維持一致。
但 SVG 不會自動讓檔案變小。若圖示含有大量 path、陰影、漸層或從設計工具直接匯出的大量 metadata，仍然需要用 SVG optimizer 壓縮後再上線。
可以用 CSS 控制顏色、尺寸與狀態
inline SVG 搭配 currentColor 時，圖示會跟著父層文字顏色變化，很適合按鈕、連結與狀態提示。這比替每個狀態輸出一張不同顏色的 PNG 更好維護。
<button class="icon-button">
<svg aria-hidden="true" viewBox="0 0 24 24" class="icon">
<path fill="currentColor" d="M5 12h14" />
</svg>
<span>查看更多</span>
</button>.icon-button {
color: #1f2937;
}
.icon-button:hover {
color: #0f766e;
}
.icon {
width: 1.25rem;
height: 1.25rem;
}對設計系統與品牌一致性更友善
在產品介面中，icon 常常出現在很多細節裡：搜尋框、篩選器、錯誤提示、表格操作、通知中心。大量圖示專案最怕每位工程師各自複製 SVG，幾個版本後顏色、尺寸與線條粗細就很難統一。
把 SVG 圖示整理成元件、sprite 或固定 icon library，可以讓品牌色、hover 狀態、disabled 狀態與尺寸規則集中管理。對網站負責人來說，SVG icon 的價值在於降低介面混亂與後續維護成本。
SVG icon 要怎麼放進網站？5 種常見做法比較
SVG icon 放進網站常見有 inline SVG、img 標籤、CSS background、SVG sprite 與 icon font；選法取決於是否需要改色、是否具語意、數量多寡與前端維護方式。
| 做法 | 適合情境 | 優點 | 限制 |
|---|---|---|---|
| inline SVG | 按鈕、狀態、需要 CSS 控制的 icon | 控制力高，可直接設定 ARIA 與樣式 | 大量重複可能讓 HTML 或 DOM 變肥 |
| img 標籤 | 單純展示、外部 SVG 檔 | 寫法簡單，可瀏覽器快取 | 不能直接用 CSS 改內部 path 顏色 |
| CSS background | 裝飾性 icon、背景符號 | 不干擾內容語意 | 不適合承載重要資訊 |
| SVG sprite | 大量 icon、後台、設計系統 | 集中管理、減少重複碼 | 建置流程與命名規範要先設計 |
| Icon font | 舊專案延續 | 早期相容性與字型方式管理 | 可近用性、載入失敗與對齊問題較常見 |
方法一：直接使用 inline SVG
inline SVG 適合需要控制顏色、尺寸、hover 狀態與可近用性的圖示。按鈕旁的小箭頭、表單錯誤圖示、狀態標籤 icon 都很適合這種方式。
<svg viewBox="0 0 24 24" aria-hidden="true" class="icon">
<path fill="currentColor" d="M12 4l8 8-8 8-1.4-1.4 5.6-5.6H4v-2h12.2l-5.6-5.6L12 4z" />
</svg>缺點是重複使用很多次時，HTML 會變長。若整個後台有上百個圖示，建議改用元件化或 sprite 管理。
方法二：用 img 標籤載入 SVG 檔
用 img 載入 SVG 檔最直覺，適合不需要動態改色的圖示，例如合作品牌的小符號、固定樣式的介面圖示或內容區輔助圖。
<img src="/icons/search.svg" alt="搜尋" width="24" height="24">限制是 CSS 只能控制圖片盒子的尺寸、位置與透明度，無法直接改 SVG 裡面的 path 顏色。若需要跟著主題色或狀態改變，inline SVG 或元件會更合適。
方法三：用 CSS background-image
background-image 適合裝飾性 icon，例如卡片角落的小符號、分隔線旁的裝飾圖形、無需螢幕閱讀器讀出的背景元素。
.notice {
background-image: url("/icons/info.svg");
background-repeat: no-repeat;
background-position: 1rem center;
padding-left: 3rem;
}如果 icon 本身傳達重要資訊，例如錯誤、成功、下載、關閉，就不要只放在 CSS background 裡。使用者需要能從文字、ARIA 或按鈕標籤理解操作。
方法四：用 SVG sprite 管理大量 icon
SVG sprite 會把多個圖示整理成 symbol，頁面上再用 use 引用。這適合後台、SaaS、電商管理介面或有設計系統的網站。
<svg style="display: none;">
<symbol id="icon-download" viewBox="0 0 24 24">
<path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" />
</symbol>
</svg>
<svg aria-hidden="true" class="icon">
<use href="#icon-download"></use>
</svg>sprite 的關鍵不是技術本身，而是命名、分類與更新流程。若沒有規範，sprite 很快會變成另一個難維護的素材資料夾。
方法五：icon font 還適合用嗎？
新專案通常優先選 SVG icon，因為 SVG 在語意、樣式控制、元件化與可近用性上比較直觀。icon font 仍可用於舊系統維護，但不建議為了新網站特地建立一套字型圖示。
icon font 常見問題包含字型載入失敗時顯示錯字、對齊不穩、螢幕閱讀器語意不明，以及只靠字型碼位管理圖示。若專案已經使用 icon font，至少要補上可讀標籤與載入失敗的備案。
開發者如何用 npm 安裝 SVG icon 套件？
npm icon package 適合元件化前端專案，尤其是 React、Next.js、Vue、Svelte；重點是按需載入需要的 icon，不要把整包 library 都放進 bundle。
| 專案型態 | 建議做法 | 檢查重點 |
|---|---|---|
| 小型形象網站 | 少量 inline SVG 或獨立 SVG 檔 | 檔案大小、授權、樣式一致 |
| React／Next.js | 使用可按需 import 的 component icon | tree shaking、server component 相容性、bundle size |
| Vue／Svelte | 選擇有對應元件或能轉成 component 的套件 | 建置流程、型別支援、圖示命名 |
| 大型後台 | 建立內部 icon component 或 sprite | 版本控管、設計審核、替換流程 |
什麼情況適合用 npm icon package？
- 專案已經使用 React、Next.js、Vue 或 Svelte 等前端框架。
- icon 需要變成可重複使用的元件，例如
<IconSearch />。 - 團隊需要透過版本控管追蹤 icon library 的更新。
- 圖示數量多，手動複製 SVG 容易造成重複與不一致。
- 建置流程能檢查 bundle size，避免整包載入。
React／Next.js 專案常見用法
React 或 Next.js 專案通常會從套件中 import 單一 icon component，再用 className 或 props 控制尺寸與顏色。以下是概念範例，實際名稱要以套件文件為準。
import { SearchIcon } from "@example/icons";
export function SearchButton() {
return (
<button aria-label="搜尋">
<SearchIcon aria-hidden="true" className="h-5 w-5" />
</button>
);
}若 icon button 只有 SVG，按鈕本身要有 aria-label。若旁邊已經有可讀文字，SVG 多半可以設為 aria-hidden="true"，避免螢幕閱讀器重複讀取。
不要整包載入整個 icon library
警告：不要為了使用一兩個 SVG icon，就把整個 icon library 加進前端 bundle。這會增加不必要的 JavaScript 或資源載入，對行動裝置與慢速網路特別不友善。
比較好的做法是只 import 用到的圖示、確認套件支援 tree shaking，並用建置工具檢查 bundle size。若專案只需要幾個固定 icon，手動整理成小型元件反而更乾淨。
SVG icon 的 accessibility 要怎麼做？
SVG icon 的 accessibility 要先分成裝飾性、資訊性與 icon button；裝飾性圖示隱藏，資訊性圖示提供可讀名稱，只有圖示的按鈕必須有明確標籤。
可近用性最常見的錯誤，是把所有 icon 都加上 title，結果螢幕閱讀器讀出一堆沒有幫助的圖示名稱。判斷方式應該從使用者是否需要它理解內容或操作開始。
裝飾性 icon：用 aria-hidden 隱藏
如果 SVG icon 只是視覺輔助，旁邊已有文字說明，就可以加上 aria-hidden="true"。例如「下載」按鈕旁邊的箭頭圖示，文字已經說明操作，圖示不需要再被讀出。
<button>
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M12 3v12" />
</svg>
<span>下載檔案</span>
</button>有資訊意義的 icon：提供 title 或可讀文字
如果 SVG icon 本身傳達狀態，例如警告、成功、錯誤或會員等級，就要提供可讀名稱。可以用可見文字、aria-label，或在合適情境使用 role="img" 搭配 title。
<svg role="img" aria-labelledby="warning-title" viewBox="0 0 24 24">
<title id="warning-title">付款資料缺漏</title>
<path d="M12 2l10 18H2L12 2z" />
</svg>若畫面上已經有「付款資料缺漏」文字，SVG 可以隱藏，避免重複。可近用性不是把所有 ARIA 都加上去，而是讓使用者得到剛好的資訊。
icon button 不能只放 SVG，必須有可讀標籤
- 搜尋按鈕：使用
aria-label="搜尋"，或放入螢幕閱讀器可讀文字。 - 關閉按鈕：使用
aria-label="關閉視窗"，避免只顯示 X 圖示。 - 下載按鈕：若沒有可見文字，要標明下載的動作或檔案類型。
- 切換選單：標籤要反映操作，例如「開啟主選單」或「關閉主選單」。
SVG icon 會影響 SEO 或網站速度嗎？
SVG icon 不會直接提升 SEO 排名，但正確的檔案大小、載入方式與可近用性，會影響速度、互動體驗與使用者能不能順利操作網站。
對 SEO 來說，SVG icon 的重點是間接品質：頁面不要被過大的檔案拖慢、操作元素要有語意、版面不要因圖示載入造成位移。把 SVG 當排名捷徑，是錯誤期待。
SVG icon 本身不是 SEO 排名魔法
Google 不會因為網站使用 SVG icon 就直接給更高排名。SVG 圖示真正可能影響的是使用體驗，例如導覽是否清楚、按鈕是否可理解、行動版載入是否順暢，以及螢幕閱讀器是否能辨識操作。
若 icon button 沒有可讀標籤，搜尋引擎與輔助科技都更難理解它的功能。這類問題不一定是排名因素的單一路徑，但會影響網站品質。
太大的 SVG path 仍然會拖慢頁面
- 移除設計工具匯出的 metadata、註解與多餘群組。
- 檢查 path 是否過度複雜，尤其是從插畫轉成 icon 的檔案。
- 統一 viewBox 與尺寸，避免用 CSS 硬拉造成顯示問題。
- 使用 SVG optimizer 壓縮，但壓縮後要檢查外觀是否變形。
- 避免把大型裝飾 SVG 誤當成小型 icon 放進每個元件。
大量 icon 何時該用 sprite 或按需載入？
| 情境 | 建議策略 | 原因 |
|---|---|---|
| 單頁只有少量 icon | inline SVG 或 img | 簡單、好維護，不需要複雜建置 |
| 大量重複 icon | SVG sprite | 集中管理，減少重複 SVG 片段 |
| 框架型產品 | component icon 加按需載入 | 符合元件流程，也較容易控管 bundle size |
| 行銷頁裝飾圖示 | 壓縮 SVG 檔或 CSS background | 避免干擾內容語意，並控制檔案大小 |
免費 SVG icon 可以商用嗎？授權要怎麼看？
免費 SVG icon 不一定可以商用；下載前要逐項檢查 commercial use、attribution、修改、再發布與格式限制，不能只看「free」或「open source」。
授權是 SVG icon 最容易被忽略的風險。特別是素材平台常出現 PNG 可免費下載，但 SVG、可編輯檔或商用用途需要付費方案的情況；這時候免費取得檔案不代表使用權完整。
| 授權項目 | 要問的問題 | 風險 |
|---|---|---|
| Commercial use | 能否用在公司網站、商品頁、App 或廣告素材？ | 未授權商用可能造成下架或法務風險 |
| Attribution | 是否必須標示作者或來源？標示位置有沒有要求？ | 漏署名可能違反授權條款 |
| Modify | 能不能改顏色、線條、比例或合併進設計系統？ | 有些授權允許使用，但限制改作 |
| Redistribute | 能不能放進模板、套件、客戶交付檔或公開 repo？ | 再發布限制常比一般使用更嚴格 |
| License type | 是 MIT、Apache-2.0、Creative Commons，還是平台自訂授權？ | 同樣寫 free，實際義務可能完全不同 |
Free 不等於可以無條件商用
Free 只代表取得成本，open source 代表授權模式，commercial use 才是商用判斷的核心。把這三件事混在一起，是網站 icon 授權出問題的常見原因。
這裡不提供法律保證；正式商業專案應保存授權頁、版本、下載日期與來源連結。若授權文字不清楚，改用官方文件完整的 icon library 會比較穩。
常見授權欄位：商用、署名、修改、再發布
| 欄位 | 可接受狀態 | 需要小心的狀態 |
|---|---|---|
| 商用 | 明確允許 commercial use | 只寫 personal use 或未說明商用 |
| 署名 | 知道要不要 attribution，以及如何標示 | 網站頁面無法合理放置署名卻硬使用 |
| 修改 | 允許改色、改線條或整合進 UI system | 禁止改作，卻拿去重畫品牌圖示 |
| 再發布 | 允許放進交付檔、模板或公開套件 | 只能在單一專案使用，不能轉交或再散布 |
為什麼有些網站 PNG 免費，但 SVG 要付費？
SVG 是可編輯的向量檔，對設計師與前端工程師價值更高，因此有些平台會把 PNG 當作免費預覽或基本下載，把 SVG、AI、Figma、icon font 或完整 icon pack 放在付費方案中。
這不是技術問題，而是授權與商業模式問題。若網站要長期使用一套 SVG icon，應先確認付費後取得的是單次使用、訂閱期間使用，還是可永久用於既有專案。
找不到合適的 SVG icon 時，可以怎麼處理？
找不到合適的 SVG icon 時，先調整現有圖示的顏色、線條與尺寸，再評估 AI 生成或請設計師重畫；品牌核心圖示不宜隨便拼素材。
我會先檢查是不是「找不到圖示」，還是「找得到但風格不合」。前者可以擴大 library 或公共素材來源，後者通常需要 icon editor、設計規範或重新繪製。
下載前先編輯顏色與樣式，避免整站 icon 不一致
許多 SVG icon 在下載前可以調整 color、stroke、fill、圓角或線條粗細。若網站已有品牌色與介面規範，應先把 icon 調成同一組尺寸與筆畫邏輯，再放進前端專案。
不要把 outline、solid、雙色、漸層圖示混在同一組導覽或表單裡。使用者不一定說得出哪裡不一致，但會感覺介面比較亂。
AI 生成 icon 適合什麼情況？
AI icon generator 適合用在找不到特定概念圖示、需要快速探索方向，或做內部草稿時。正式上線前仍要檢查 SVG 結構、可編輯性、風格一致性與商用授權。
AI 生成結果常見問題是細節過多、線條不穩、同一批圖示風格不一致。若要用在網站介面，建議把它當成草圖來源，再由設計師或前端整理成乾淨的 SVG 圖示。
什麼情況應該找設計師重畫？
品牌核心 icon、產品功能主圖示、付費功能標誌、會員等級圖示、App 主介面圖示，通常應該找設計師重畫。這些圖示承載品牌識別與使用者理解，素材庫很難完全貼合。
若一個 icon 會反覆出現在首頁、導覽、產品頁與後台，重畫的成本常常低於後續修補風格不一致的成本。這是設計系統裡很現實的維護判斷。
SVG icon 使用前的檢查清單
SVG icon 上線前要檢查來源授權、風格一致、導入方式、檔案大小、可近用性與效能；下載前控風險，上線前控品質。
下載前檢查
- 來源是否可信，能否回到原始 icon library 或作者頁面。
- 授權是否允許商用、修改、署名與再發布。
- 是否提供 SVG 檔，或 SVG 是否需要付費方案。
- 圖示風格是否符合網站介面：線條粗細、圓角、填色、視角一致。
- 是否有 npm package、component、sprite 或可維護的前端導入方式。
上線前檢查
- 是否已移除多餘 metadata、註解與不必要的 path。
- 裝飾性 icon 是否使用
aria-hidden="true"。 - 有資訊意義的 icon 是否有可讀文字、
aria-label或合適的title。 - icon button 是否有明確可讀標籤。
- 大量 icon 是否使用 sprite、元件化或按需載入，避免整包載入。
SVG icon 是什麼？和 PNG icon 有什麼差別？
SVG icon 是向量圖示，放大後通常仍能保持清楚，並且可用 CSS 控制顏色與尺寸。PNG icon 是點陣圖片，顯示結果固定，放大時可能失真，但適合處理細節複雜或照片質感的圖像。
SVG icon 適合用在網站哪些地方？
SVG icon 適合用在導覽列、按鈕、表單狀態、錯誤提示、後台操作、會員功能與設計系統元件中。只要圖示需要在不同尺寸、顏色或狀態下保持一致，SVG 通常是合適選擇。
免費 SVG icon 可以商用嗎？
不一定。免費下載不代表允許商用，仍要檢查授權是否允許 commercial use、是否需要 attribution、能不能修改，以及能不能放進客戶交付檔、模板或公開套件中。
為什麼有些網站 PNG 免費，但 SVG 檔或可編輯版本要付費？
SVG 檔可編輯、可縮放，也更容易整合進前端與設計系統，因此有些素材平台會把 SVG、AI、Figma 或完整 icon pack 放在付費方案中。使用前要確認付費授權範圍與期限。
SVG icon 要用 inline SVG 還是 img 標籤？
需要用 CSS 控制顏色、狀態或可近用性時，選 inline SVG 較合適。只是單純展示固定圖示時，可以用 img 載入 SVG 檔。大量圖示則可評估 sprite 或元件化管理。
React 或 Next.js 專案適合用 npm icon package 嗎？
適合，前提是套件支援按需載入與 tree shaking。React 或 Next.js 專案可把 icon 當成 component 使用，但要避免為了少數圖示載入整包 icon library。
SVG sprite 適合什麼網站？
SVG sprite 適合圖示數量多、重複使用頻率高的網站，例如後台系統、SaaS 介面、電商管理工具與成熟設計系統。它能集中管理圖示，但需要命名與更新流程。
SVG icon 會影響網站速度嗎？
會，但影響取決於檔案大小與載入方式。乾淨的小型 SVG 通常很適合介面圖示；含有大量 path、metadata 或重複 inline 的 SVG，仍可能拖慢頁面。
SVG icon 對 SEO 有幫助嗎？
SVG icon 不會直接提升 Google 排名。它的 SEO 價值主要來自間接影響，例如改善使用體驗、降低不必要資源、讓按鈕與導覽具備清楚語意。
裝飾性 icon 和有資訊意義的 icon，在 accessibility 上要怎麼處理？
裝飾性 icon 可用 aria-hidden="true" 隱藏，避免螢幕閱讀器讀出無意義內容。有資訊意義的 icon 則要提供可讀文字、aria-label，或在合適情境使用 role="img" 與 title。
找不到風格一致的 SVG icon，可以用 AI 生成嗎？
可以作為草稿或探索方向，但正式上線前要檢查授權、SVG 結構、線條一致性與可編輯性。品牌核心圖示或高頻 UI icon，通常仍需要設計師整理或重畫。
icon font 還值得使用嗎？
新專案多半優先使用 SVG icon。icon font 可用於舊系統維護，但在語意、載入失敗、對齊與可近用性上較容易出問題，除非既有架構已深度依賴，否則不建議新建一套。