圖示是品牌性格的細節
你的官網裡的圖示，可能是用戶在無意識之間看到次數最多的設計元素——在服務列表旁、在特色說明旁、在聯絡方式旁、在選單旁……
當每個角落的圖示風格不一致（一些是圓角粗線條、一些是尖角細線條、一些是填色的）時，整個頁面會產生隱約的不協調感——用戶說不清楚哪裡怪，但會感覺「這個網站不夠專業」。
圖示系統的 3 種主要風格
1. 線條型（Outline / Line）
只有輪廓，內部透明。傳遞輕盈、現代、乾淨的感覺。
適合品牌： 科技、設計工作室、諮詢服務、精緻服務業
使用原則： 線條粗細要全套一致（例如全部 1.5px 或全部 2px），角落弧度要一致（全圓角或全尖角）。
2. 填色型（Solid / Filled）
完全填色的形狀。傳遞穩重、清晰、易讀的感覺。在小尺寸下比線條型更清晰。
適合品牌： 傳統行業、強調信任的服務（金融、法律、醫療）、需要在行動版清晰顯示的情境
3. 雙色 / 混合型（Duotone / Mixed）
主要形狀用主色，細節用強調色。傳遞現代感和品牌個性。
適合品牌： 希望在細節中展現品牌色的現代品牌
選擇圖示庫還是客製設計？
使用圖示庫的情境
對大多數品牌，使用高品質的圖示庫（配合篩選確保風格一致）是最有效率的選擇。
推薦圖示庫（2026 年）：
- Lucide（開源，React 支援，線條型，風格極乾淨）
- Heroicons（Tailwind 官方推薦，兩種粗細選擇）
- Phosphor Icons（最多樣，同一圖示有 6 種風格可選）
- Tabler Icons（4000+ 圖示，高度一致的線條風格）
選擇原則： 在整個網站只用一個圖示庫——不要混用多個庫的圖示，即使它們看起來「差不多」。
客製設計圖示的情境
- 你的品牌服務非常特殊，找不到合適的現成圖示
- 你的品牌定位非常高端，客製圖示是品牌差異化的一部分
- 你有足夠的預算讓設計師建立完整的品牌圖示系統（通常 20–50 個核心圖示）
在 Tailwind + React 中使用圖示
最高效的實作方式是使用 React 組件形式的圖示庫，例如 Lucide React：
安裝後，直接在組件中導入並使用，可以自由控制尺寸（size 屬性）和顏色（className 的 text-color 工具類）。
配合 Tailwind 的 text-accent-400 等工具類，讓圖示顏色自動跟隨品牌色系，不需要手動指定顏色值，維護性更高。
圖示的尺寸規範
建立一套尺寸系統，在整個網站保持一致：
- 導覽圖示： 20px
- 行內圖示（文字旁）： 16–18px
- 特色卡片圖示： 32–40px
- 英雄區塊圖示： 48–64px
不要在不同地方任意使用不同尺寸——一眼看過去的「大小不均一感」破壞了視覺和諧。
圖示顏色的使用原則
一般狀態： 使用中性色（品牌主色的較淡變體），讓圖示存在但不搶視覺焦點
強調狀態： 使用品牌強調色（accent color），讓特別重要的圖示跳出來
禁用狀態： 灰色、透明度降低
避免： 把圖示設計成比文字更醒目——除非圖示本身是信息的主體，否則圖示應該輔助文字，而不是搶視覺中心。
稽核你現有的圖示使用
花 10 分鐘看一遍你的官網，回答這幾個問題：
- 所有圖示是否來自同一個風格系統？
- 線條粗細是否一致？
- 圖示尺寸在相似情境下是否一致？
- 圖示顏色是否符合品牌色彩系統？
- 圖示和旁邊的文字是否對齊（垂直置中）？
這些細節看似微小，但它們的總和決定了你的官網是否有「設計感」。