圖示系統

一句話定義

圖示系統是產品把功能、狀態、物件與專屬概念壓縮成可掃視、可辨識、可維護圖形語彙的設計系統子系統；它不只包含圖示長相，也包含尺寸、樣式、一致性規則、命名、工程映射、文件與發布流程。

核心要點

圖示是產品語彙，不只是裝飾

2026-08-17-Cursor圖示系統 顯示，當產品開始有自己的概念時，通用 icon library 會逐漸不夠用。Cursor 需要表達 AI agents、parallel / sequential execution、threads、thinking effort、cost、compute、Bugbot 等概念；這些不是「找一個看起來差不多的圖」就能穩定處理。

因此圖示系統要回答：

• 這個產品有哪些穩定概念需要被視覺化？
• 哪些概念可以共用通用符號，哪些需要專屬圖示？
• 圖示和文字、狀態、tooltip、文件如何共同讓使用者理解？
• 同一概念在不同畫面是否永遠使用同一圖示？

小尺寸圖示需要 optical design

圖示常在 12px、14px、16px 或 20px 被使用，不能只把一張大圖縮小。成熟圖示系統會為不同尺寸設計不同版本，並處理：

• stroke weight 與字體重量是否協調
• outline / filled style 的視覺重量是否一致
• square / circle / horizontal / vertical 等 optical shapes 是否看起來同尺寸
• junction、dot、gap、slash、badge、notch 等細節是否在小尺寸下糊成一團
• 物件比例是否因硬塞方形框而失真

這使 圖示系統 和 排版 有相似紀律：好的細節常常不被注意，但錯誤會讓整個介面看起來不穩。

一致性不能靠記憶，要靠稽核結構

圖示集一旦有數百個圖示，視覺一致性就不能靠設計師記憶。Cursor 案例使用 Figma 的 Explorations、Overviews、Icons 三種核心檔案，把探索、總覽稽核與最終元件拆開。

可維護的圖示系統通常需要追蹤：

• recurring elements：folders、files、arrows、dots、badges、eyes、flasks、flags 等
• construction rules：線條方向、端點、圓角、閉合形狀、斜線方向、物件比例
• variant rules：尺寸、outline / filled、狀態、badge、modifier
• QA surfaces：總覽 grid、實際尺寸預覽、產品內截圖、手機或目標設備檢查

工程相容是圖示系統的一部分

圖示在產品中不是孤立圖片，常被程式碼以 name、codepoint、component、font glyph、SVG path 或 token 引用。若重畫圖示時破壞引用，就會讓設計更新變成工程風險。

Cursor 案例的 icon font replacement 保留舊 codepoint，並用 migration dashboard 追蹤每個舊圖示是否已處理、移除或對應到新 replacement。這提醒 設計系統：設計資產的「漂亮」與「可替換」是兩個不同品質，後者需要命名、映射與自動化支撐。

交付不是檔案，而是可採納系統

成熟圖示系統的交付應讓團隊能找到、理解、使用與新增圖示，而不是把 Figma 或 SVG 丟出去就結束。Cursor 案例把 companion site、search tags、concept-to-icon table、detail view、download / copy action、file type mapping、documentation 與 ship it pipeline 放進交付物。

這與 建構為被採納 對位：一套圖示系統完成的標準不是「設計師畫完」，而是產品團隊能持續採納，且新增圖示不會靠個人記憶與手動步驟維持。

與其他概念的關係

• 設計系統 — 圖示系統是設計系統的子系統；從 atom 級圖形往上接到語彙、規則、文件與維護流程。
• 使用者介面設計 — 圖示是 UI 的可掃視語意線索，和文字、狀態、回饋、tooltip 共同塑造使用者理解。
• Figma — 常作為圖示探索、總覽稽核、元件管理與 handoff 的主要操作環境。
• 無障礙設計 — 圖示不應成為唯一通道；重要意義需搭配文字、label、aria-label 或其他可讀替代。
• Logo設計原則 / 品牌識別 — Logo 強調品牌識別與延伸性，圖示系統則強調產品內大量功能語彙的一致性與可操作性；兩者共享簡潔、比例與辨識度問題。
• 建構為被採納 — 圖示系統需要 companion site、文件、search tags、命名與 pipeline，才能從交付變成團隊日常可採納的基礎設施。

相關來源

• 2026-08-17-Cursor圖示系統 — Marek Minor / Minor Adventures：Cursor 新圖示系統製作記；補入兩尺寸兩樣式、optical adjustments、Figma 稽核結構、icon font codepoint migration、companion site 與 ship it pipeline。

備註

本頁目前以 Cursor icon system 作為第一個深度來源，尚未整理圖示設計史、Apple SF Symbols、Google Material Symbols、VS Code Codicons、Iconify / Icons8 / Streamline 等圖示庫，或 design tokens / component library 中的 icon governance。未來來源可補入「平台圖示規範」與「產品內專屬圖示系統」兩條軸。