下載來的圖標素材風格不一、線條粗細不均、圓角半徑混亂、填充/描邊混用——直接用會嚴重拉低設計質感。本文演示圖標二次處理標準化流程，從審查、重繪、系統化到輸出規範，讓雜亂素材變身品牌專屬圖標系統。

第一階段：素材審計與分類

1. 收集所有圖標：專案用到的每一個圖標（含現有/新增/預留）。
2. 建立審計表格：列出名稱、來源、風格（線性/填充/雙色/插畫）、線條粗細、圓角半徑、視覺重心、尺寸、格式（SVG/PNG/AI）。
3. 分類標記：✅ 可直接用 / 🔧 需微調 / ♻️ 需重繪 / ❌ 需替換。

第二階段：統一規範制定（設計系統核心）

規範項目	推薦標準	說明
網格基準	24×24px / 32×32px	主流圖標庫標準，兼容 16/20/24/28/32/48 等倍數
線條粗細	2px (24px網格) / 2.5px (32px網格)	全系統一，粗細變化僅用於語義層級（主/次/禁用）
圓角半徑	2px / 4px / 全圓	對應銳利/友好/極簡三種品牌調性，全系統一
端點/轉角	圓形端點/圓形連接	避免尖銳感，提升親和力
視覺重心	光學居中（非幾何居中）	通過光學修正確保不同形狀視覺大小一致
填充/描邊	雙模式並存：線性風/填充風	定義切換規則，禁用混用
命名規範	ic_[模塊]_[動作/名詞]_[狀態]_[尺寸]	如 ic_home_outline_default_24, ic_user_filled_active_32

第三階段：批量重繪與優化（Figma/Sketch/AI 實操）

1. 建立母版頁：放置網格參考線、關鍵形狀模版（圓/方/圓角矩形/三角形）、色彩/描邊樣式。
2. 逐個重繪：參考素材語義，用筆刷/鋼筆工具在網格內重構，而非修改原路徑。
3. 布爾運算優先：用聯合/減疊/交集/排除組合基礎形狀，保證路徑乾淨、易維護。
4. 光學修正：相同視覺重量的圖標，實際面積可能相差 20%+，必須肉眼逐個微調。
5. 狀態擴展：Default/Hover/Active/Disabled/Focus 各態設計，顏色/不透明度/描邊變化系統化。

第四階段：輸出與治理

• 導出格式：SVG（Web/代碼）、PDF（印刷/矢量編輯）、PNG@2x/@3x（舊專案兼容）、Icon Font（可選，注意語義化類名）。
• 文檔化：Notion/Figma Community/Zeroheight/Storybook 發布圖標庫文檔，含用法/禁忌/更新日誌/貢獻指南。
• 版本管理：SemVer（v1.2.0 = 新增圖標/修復缺陷/破壞性變更），Git 管理源文件。
• 自動化管道：SVGO 優化 → SVGR 生成 React 組件 → npm 發布 → 設計系統 CI 檢查。

實戰案例：某電商 App 圖標系統重構

• 前：120+ 圖標，5 種線寬、8 種圓角、混雜填充描邊、命名混亂、無狀態定義。
• 後：96 個核心圖標（精簡 20%）、統一 2px 線寬/4px 圓角/24px 網格、雙模式（線性/填充）完整狀態、Figma 組件庫+React 組件庫雙端同步、設計師/開發者滿意度 4.8/5.0。
• 耗時：2 週（1 設計師 + 1 開發協作），ROI：後續每月節省圖標相關溝通/修改 30+ 人時。


核心心法：圖標不是畫好的，是系統化設計出來的。投入 2 週建系統，換取長期每天省時、品質穩定、團隊同步的複利回報。