icon風格統一是什麼？
icon風格統一不是把所有圖示做得一模一樣，而是用一致的尺寸、線寬、重量、圓角、透視與語意規則，讓整套介面或品牌素材看起來像同一個系統。
一套好的 icon 規範，會回答三件事：圖示看起來屬不屬於同一家品牌、功能辨識是否清楚、設計與前端交付時是否能重複使用。只要求顏色相同，通常不夠。兩顆 icon 都是黑色，也可能因為線寬、留白、端點、填滿比例不同，看起來像從不同素材包臨時拼上去。
icon 風格統一不是每顆都長一樣，而是遵守同一套視覺規則。
真正該統一的是規則，不是造型本身。例如搜尋、下載、帳號、購物車可以長得不同，因為它們代表不同功能；但它們應該共享同一套 grid、viewBox、stroke、radius、安全區與色彩使用方式。這樣使用者在官網、產品介面、簡報或社群圖卡裡看到圖示時，會覺得它們來自同一個品牌語言。
功能 icon、品牌 icon、裝飾 icon 要分開判斷。
功能 icon 需要穩定、可預期，例如新增、刪除、返回、下載。品牌 icon 可以保留較明顯的品牌性，例如活動主視覺裡的特殊符號。裝飾 icon 則常用在簡報、行銷頁或社群圖卡，彈性比較大。我的判斷是，很多團隊的混亂不是沒有美感，而是把這三種用途放進同一個標準裡審，結果該嚴格的地方太鬆，該保留識別的地方又被磨平。
| 屬性 | 應有標準 | 對應用途 |
|---|---|---|
| 設計系統規範 | 尺寸、grid、線寬、顏色、命名、例外規則可文件化 | Figma library、產品介面、官網元件 |
| 視覺重量 | stroke、fill、面積感與空白比例要平衡 | UI icon、服務頁圖示、功能入口 |
| 來源一致性 | 優先使用同一套 icon pack，混用時需校正或重畫 | 品牌簡報、外包交付、行銷素材 |
| 功能語意 | 同一功能只使用一個 icon，避免同義不同圖 | 產品導覽、表單、後台介面 |
為什麼 icon 看起來不一致？
icon 看起來不一致，通常不是單一顏色問題，而是線寬、填滿形式、圓角、視覺大小、透視、陰影和來源混用一起失衡。
最常見的情況是團隊一開始沒有 icon 設計系統規範，設計師、行銷、PM、前端各自從 Figma 社群、素材站、舊簡報或前一版產品拿圖示。短期看起來只是快，累積到官網、dashboard、提案簡報同時上線時，就會變成一種很難明說但很明顯的不整齊。
線條粗細、填滿形式、圓角與端點不一致。
線性 icon 若有的用 1.5px，有的用 2px，有的端點是圓頭，有的是方頭，放在同一排按鈕裡會很快露餡。filled icon 也一樣，填滿面積太重的圖示，會把旁邊細線 icon 壓下去。圓角也不能只靠感覺，外框、內角、轉折處的 radius 需要有共同邏輯。
同樣 24px，不代表視覺大小一致。
24px 只是畫布尺寸，不等於視覺大小。圓形 icon、方形 icon、箭頭 icon、人物 icon 即使都放在 24px viewBox 裡，實際看起來仍可能一大一小。原因是每種形狀的實心面積、留白和邊界接觸位置不同。設計時要看 optical size，而不是只看數字。
透視、陰影、3D 空間感混用會比顏色不同更突兀。
平面線性 icon 與帶漸層、陰影、斜視角的 3D icon 放在一起，通常會比顏色差異更刺眼。因為它們不只風格不同，連空間規則都不同。若一顆圖示像 UI 元件，另一顆像插畫物件，使用者會感覺這套介面沒有同一個設計判斷。
icon 風格統一檢查表
icon 風格統一檢查表應該同時檢查基礎規格、視覺規格與語意規格，避免只把尺寸或顏色當成一致性標準。
這份檢查表可以放進設計系統，也可以給外包設計師、前端或行銷協作者使用。若團隊已經有品牌規範手冊，icon 規範最好獨立成一節，避免散落在各個簡報範本或 Figma 頁面裡。
基礎規格：grid、viewBox、尺寸、安全區。
先決定主要尺寸，例如介面常見的 16px、20px、24px，品牌素材可另訂較大的展示尺寸。viewBox 要固定，安全區要明確，避免圖示貼邊。grid 不需要把設計變僵，但可以讓重畫、對齊、匯出時有共同基準。
視覺規格：stroke、fill、radius、端點、陰影、透明度。
線性 icon 要訂 line width、端點、轉角、斜線角度與最小細節。實心 icon 要訂填滿比例、挖空規則與負空間。若允許陰影或透明度，也要說清楚方向、強度與使用場合。設計規範裡最容易被忽略的是端點，實際放進按鈕或選單後，端點差異非常明顯。
語意規格：同一功能只用一個 icon。
同一功能不要今天用齒輪代表設定，明天又用滑桿代表設定，除非兩者在產品裡真的代表不同層級。語意一致會降低使用者學習成本，也能讓前端元件維護更穩定。這也是品牌形象一致性在產品介面裡容易被低估的一層。
| 檢查項目 | 建議標準 | 常見問題 |
|---|---|---|
| viewBox | 同尺寸 icon 使用固定 viewBox，例如 24x24 | 匯出後圖示偏移或點擊區域不一致 |
| 安全區 | 主要形體不要貼齊畫布邊界 | 放進按鈕後顯得太滿或太擠 |
| stroke | 線寬、端點、轉角規則一致 | 同排 icon 有的輕、有的重 |
| fill | 填滿比例與挖空邏輯一致 | filled icon 比 outline icon 更搶畫面 |
| radius | 外角與內角使用同一套圓角邏輯 | 圖示有的尖銳、有的偏可愛 |
| 透視與陰影 | 同一區塊內維持平面或同一光源規則 | 平面 icon 混 3D icon |
| 功能語意 | 一個功能綁定一個主要 icon | 同義功能在不同頁面換圖示 |
常見錯誤案例與修正方式
修正 icon 不一致時，應先判斷是哪一種錯誤，再選擇校正、替換、重畫或列為例外，避免一律全部重做。
我會先看這顆 icon 是功能用、品牌用，還是裝飾用。功能 icon 優先修一致性，品牌 icon 優先保識別，裝飾 icon 則看它是否影響整體版面。這個順序比「好不好看」更可靠。
線性 icon 混實心 icon。
outline icon 和 filled icon 可以出現在同一套設計系統，但不應該在同一個狀態裡任意混用。常見做法是用 outline 表示預設狀態，用 filled 表示已選取或強調狀態。若沒有狀態意義，只是素材剛好不同，最好統一成同一種形式。
來自不同 icon pack，線寬與圓角不同。
不同 icon pack 常有自己的比例和筆觸個性。把它們混在一起時，就算都改成同色，也不會真的一致。修正時先選一套主風格，再把高頻 icon 的線寬、端點、圓角、留白校到同一個基準。低頻 icon 若品質差，替換通常比硬修更快。
平面 icon 混立體或漸層 icon。
平面 icon 適合產品介面、後台、SaaS dashboard。立體或漸層 icon 比較適合活動頁、提案封面或品牌視覺延伸。兩者可以共存，但要分場景。最糟的做法是在同一排功能入口裡放平面、3D、漸層、陰影各一顆，讀者會先感覺亂，才有機會理解功能。
| 問題 | 為什麼不一致 | 修正方式 |
|---|---|---|
| outline 混 filled | 視覺重量和狀態語意不同 | 設定 outline 為預設，filled 只用於選取或強調 |
| 線寬不同 | 同尺寸下有的圖示顯得更重 | 統一 stroke，必要時重畫主要線條 |
| 圓角不同 | 品牌感從俐落變成可愛或反過來 | 訂 radius 範圍，調整外角與端點 |
| 24px 仍大小不一 | 形狀面積和留白不同 | 用 optical size 校正，不只看畫布尺寸 |
| 平面混 3D | 空間規則不同 | 同一區塊維持平面，3D 改放品牌或活動場景 |
不同來源 icon 混用時怎麼統一？
不同來源 icon 混用時，先盤點來源與使用頻率，再選主風格，最後決定哪些重畫、哪些替換、哪些列入例外清單。
很多台灣中小型團隊不可能一開始就有完整 icon library，素材混用很正常。問題不在混用本身，而是沒有整理優先順序。若每顆都重畫，成本太高；若全部不管，官網、簡報和產品介面會越長越不像同一個品牌。
先盤點來源，再選主風格。
先把目前使用中的 icon 分成幾類：產品介面、官網服務頁、品牌簡報、社群圖卡、活動 landing page。每類再標記來源，例如自繪、icon pack、舊版素材、外包交付、平台官方圖示。接著選出最符合品牌個性的主風格，其他圖示都往這個方向校正。
高頻 icon 優先重畫，低頻 icon 可替換。
高頻 icon 包含導覽、表單、主要功能、CTA 周邊、服務分類。這些會反覆出現，值得重畫或精修。低頻 icon 若只在一張活動圖卡或少數頁面出現，替換成同套 icon pack 通常比較划算。設計規範要服務維護，不是把團隊拖進無止境修圖。
無法修改的品牌或平台 icon 放入例外清單。
社群平台、付款方式、合作品牌、App Store 或 Google Play 相關圖示，常有官方使用規範，不適合自行改線寬或重畫。這些應放入例外清單，記錄使用尺寸、安全區、最小留白和不得修改的項目。例外有文件，就不是破壞規範。
- 盤點所有正在使用的 icon 與來源。
- 標記使用頻率與出現場景。
- 選定主風格，例如線性、實心或雙色。
- 優先處理高頻功能 icon。
- 替換低品質或低頻素材。
- 把不能修改的品牌、平台、付款 icon 放進例外清單。
如何寫進設計系統規範？
icon 設計系統規範要寫清楚 Figma component、SVG 匯出、命名、狀態、顏色 token 與前端使用規則，才不會停在設計稿裡。
設計師看的是形狀一致，前端看的是能不能穩定引用，PM 看的是功能語意會不會混亂。規範若只寫「請使用一致風格」，等於沒有規範。好的交付文件要能讓新設計師加入、外包接案、前端改版時都做出同一套結果。
Figma component 命名與分類。
Figma 裡建議用功能分類，不只用造型分類。例如 icon/search、icon/download、icon/user、icon/payment，而不是只分 outline 或 filled。狀態可以另用 variant 管理，例如 default、active、disabled。若團隊已有品牌識別設計指南，icon 命名也要跟品牌語言和元件命名邏輯對齊。
SVG 匯出規則：viewBox、stroke、fill、清除多餘樣式。
SVG icon 交給前端前，要確認 viewBox 正確、路徑乾淨、沒有多餘 group、mask、inline style 或奇怪的小數位。線性 icon 若需要跟文字顏色連動，stroke 或 fill 要能被系統控制。我的經驗是，很多 icon 交付問題不是設計不好，是匯出後的 SVG 太髒，前端只能逐顆修。
CSS currentColor、狀態色、深淺色模式。
使用 currentColor 可以讓 SVG icon 繼承文字顏色，減少同一顆圖示因不同狀態被複製成多份。狀態色應接 design token，例如 default、hover、active、disabled、danger。深淺色模式也要測，不能只在白底上看 icon 是否漂亮。
| 規格項目 | 設計端要定義 | 前端端要確認 |
|---|---|---|
| 命名 | 依功能與狀態分類 | 檔名、元件名稱、引用名稱一致 |
| viewBox | 同尺寸 icon 使用固定畫布 | 匯入後不偏移、不裁切 |
| stroke / fill | 線寬、填滿、端點規則一致 | 可用 CSS 或 token 控制 |
| currentColor | 確認哪些 icon 可跟文字色連動 | 避免硬寫不可控顏色 |
| 狀態 | default、active、disabled 視覺差異 | 按鈕、選單、表單狀態對應正確 |
| 深淺色模式 | 確認對比與辨識度 | token 切換後不需替換整包 icon |
什麼情況可以例外？
icon 風格可以例外，但例外必須有辨識、法規、平台規範或使用情境理由，不能只是因為某顆比較好看。
一致性不是把所有差異消掉。設計系統真正要管理的是「可預期的差異」。只要差異有理由、有使用邊界、有文件記錄，就能保留。沒有理由的差異，才會讓品牌視覺慢慢鬆掉。
品牌 Logo、社群平台、付款 icon。
Logo、社群平台 icon、付款 icon 通常有官方規範，不能為了配合自家線寬任意重畫。這類圖示可以保留原始比例與品牌色，但要規定最小尺寸、留白、安全區和背景使用方式。若放在產品介面裡，旁邊的自家 icon 反而要更克制，避免整排都在搶注意力。
播放、警示、狀態提示可為辨識度保留差異。
播放、警示、錯誤、成功、付款安全等狀態 icon，有時需要比一般功能 icon 更明顯。警示可以用填滿或色彩提高辨識，成功提示可以用更清楚的狀態色。差異要為了任務服務，不是為了裝飾。這點在 SaaS 後台和交易流程裡尤其重要。
台灣常見商務場景怎麼套用？
台灣常見商務場景可以用同一套 icon 核心規範，再依官網、簡報、SaaS、社群圖卡與活動頁調整嚴格度。
同一家公司不一定每個場景都要一模一樣。產品介面需要穩定，簡報需要清楚，社群圖卡需要吸睛，活動頁需要主題性。核心規範管尺寸、線寬、圓角、語意和品牌感；場景規則管彈性到哪裡為止。
品牌簡報與提案簡報。
簡報裡的 icon 主要任務是幫讀者快速掃過重點。建議固定一套簡報 icon pack，再搭配品牌色和簡報版型。不要在同一份提案裡混用商務線性 icon、可愛插畫 icon 和 3D icon，除非它們分屬不同章節且有明確用途。
企業官網與服務頁。
官網服務頁常用 icon 表示服務分類、流程、優勢、適用對象。這些 icon 會直接影響品牌專業感，規範應比社群素材更嚴格。若官網同時有品牌視覺、SEO 內容與銷售頁，可以把 icon 規則寫進網站設計系統，並與8pt grid spacing一起管理間距和對齊。
SaaS dashboard 與後台介面。
SaaS dashboard 的 icon 要優先考慮功能辨識和可維護性。導覽、表格操作、狀態提示、篩選、匯出、設定都要有固定語意。這裡不適合大量裝飾性 icon，因為使用者每天重複操作，圖示越穩定，學習成本越低。
社群圖卡與活動 landing page。
社群圖卡和活動頁可以比產品介面更有表情，但仍要保留品牌骨架。若活動主題需要 3D 或漸層 icon，可以建立活動專用組，不要回頭污染產品介面 icon library。這種分層管理，比每次活動結束後再清素材有效。
| 場景 | 一致性嚴格度 | 建議做法 |
|---|---|---|
| 品牌簡報 | 中 | 固定簡報 icon pack，保留少量品牌裝飾彈性 |
| 企業官網 | 高 | 服務分類、流程、優勢 icon 使用同一套規格 |
| SaaS dashboard | 最高 | 功能語意、狀態、SVG 與 token 必須穩定 |
| 社群圖卡 | 中低 | 可有活動風格，但不要改動核心品牌 icon library |
| 活動 landing page | 中 | 可建立活動專用 icon 組，明確標記使用期限與範圍 |
不建議在本文展開的內容
討論 icon風格統一時，不適合大篇幅延伸到素材網站清單、設計趨勢、Logo 教學、AI 工具比較或純插畫風格指南。
這些主題各自有價值，但會稀釋「icon 設計系統規範」這個任務。讀者真正需要的是能拿去盤點、修正、交付和維護的規則，而不是再多一份素材清單。
- 免費 icon 網站推薦清單。
- icon 設計歷史或完整風格百科。
- Logo 設計完整教學。
- AI icon 生成工具比較。
- 與 icon 規範無關的色彩心理學。
- 大型品牌識別全案流程。
- 只談視覺流行、不談交付與維護的趨勢文。
Icon 風格統一是什麼？和單純「看起來好看」有什麼不同？
Icon 風格統一是用一致的尺寸、線寬、圓角、視覺重量、透視與語意規則管理圖示。看起來好看偏主觀，風格統一則能被設計、品牌、產品和前端共同遵守。
Icon 風格有哪些？哪些風格最容易混用出問題？
常見風格包含 outline、filled、duotone、flat、3D、漸層與插畫式 icon。最容易出問題的是 outline 混 filled、平面混 3D，以及不同 icon pack 的線寬和圓角混在一起。
Outline icon、filled icon、duotone icon 可以放在同一套設計系統嗎？
可以，但要有狀態或層級規則。例如 outline 作為預設狀態，filled 作為 active 狀態，duotone 用於品牌展示或較高層級入口。沒有規則地混用，會讓使用者誤判重要性。
同樣都是 24px，為什麼 icon 看起來還是不一樣大？
24px 是畫布尺寸，不是視覺大小。不同形狀的實心面積、留白、邊界接觸點不同，所以要用 optical size 校準，不能只看 px 數字。
Icon 的線寬、圓角、端點應該怎麼訂規範？
先依主要尺寸設定 line width，再決定端點是 round 或 square，轉角是否使用固定 radius。規範要用範例圖示和反例說明，避免只寫抽象形容詞。
透視、陰影、3D icon 和平面 icon 混用時要怎麼修？
先分場景。產品介面和後台優先維持平面 icon，3D、陰影或漸層 icon 可放在活動頁、提案封面或品牌視覺延伸。若同一區塊必須並排，應統一光源、角度和陰影強度。
已經從很多素材站抓 icon，應該從哪裡開始整理？
先盤點來源、場景和使用頻率，再選出主風格。高頻功能 icon 優先重畫或校正，低頻素材可替換，不能修改的品牌或平台 icon 放進例外清單。
品牌 Logo、社群平台 icon、付款 icon 可以例外嗎？
可以。這些 icon 常有官方規範或品牌辨識需求，不適合自行改線寬或重畫。例外要寫清楚使用尺寸、安全區、背景限制和不得修改的項目。
Figma 裡 icon component 應該怎麼命名和分類？
建議以功能命名，例如 icon/search、icon/download、icon/user，再用 variant 管理 default、active、disabled 等狀態。只用風格命名，後期會很難對應產品功能。
SVG 交給前端前需要注意哪些設定？
要確認 viewBox 正確、路徑乾淨、沒有多餘樣式，stroke 或 fill 能被系統控制。若 icon 要跟文字顏色連動，應確認可使用 currentColor。
CSS currentColor 對 icon 風格統一有什麼幫助？
currentColor 讓 SVG icon 可以繼承文字顏色，減少不同狀態複製多份圖示的需求。它也能讓 icon 更容易接上 design token、狀態色和深淺色模式。
台灣企業官網、簡報、產品介面需要同一套 icon 規範嗎？
需要同一套核心規範，但嚴格度可以不同。產品介面最嚴格，企業官網次之，簡報和社群圖卡可保留較多彈性。關鍵是核心線寬、圓角、品牌感和語意不要互相衝突。