常見的ICON類型有哪些？網頁設計師不藏私公開N個素材網站

一、Icon 是什麼？它是設計裡的「無聲導遊」

1. Icon 是什麼？它是設計裡的「無聲導遊」

• 把複雜變直覺：如果要寫「點擊這裡回到主畫面」，字太多了；畫一個「小房子」，大腦處理圖片的速度比文字快得多，這就是為什麼好的設計能讓人「不用思考」。
• 打破語言隔閡：不管你講中文、英文還是日文，看到一個「垃圾桶」的圖案，大家都知道那是「丟掉」的意思。這就是數位世界的通用語言。

2. 為什麼我們需要 Icon？它的四個大任務

• 當你的路標 | 導航
  • 就像馬路上的路牌，告訴你現在在哪裡、或是該往哪走。
  • 手機螢幕很小，寫字太佔位子。用一個「放大鏡」代表搜尋，既省空間又好找。

• 幫你畫重點 | 吸引注意
  • 人類的眼睛很喜歡看圖案，不喜歡看一大堆字。
  • 在一堆文字介紹裡放上圖案，就像是用螢光筆畫重點，讓你一眼就看到哪裡最重要。

• 告訴你現在的狀況 | 回報狀態
  • 它是系統用來跟你對話的工具。
  • 看到「綠色打勾」你會覺得安心（成功了）；看到「紅色驚嘆號」你會知道要注意（出錯了）；看到「轉圈圈」你就知道要等一下（讀取中）。

• 決定這家店的風格 | 品牌氣質
  • 圖案長怎樣，給人的感覺就怎樣。
  • 圓圓胖胖的線條：感覺親切、可愛（適合給小朋友或生活用品用）。
  • 尖尖細細的線條：感覺專業、高級（適合銀行或科技產品用）。

3. Icon 最常出現在哪裡？

• 工具型 | 開關按鈕
  • 出現在哪：手機最上面或最下面那一排。
  • 例子：三條線的選單、上一頁的箭頭、關閉的 X。
  • 重點：一定要長得很標準，不能太奇怪，不然大家會不知道怎麼用。

• 解說型 | 老師教學
  • 出現在哪：當畫面沒東西，或是剛開始教你怎麼用 App 的時候。
  • 例子：購物車沒東西時，放一個有問號的籃子圖案。
  • 重點：圖案通常比較大，畫得比較仔細。

 

• 裝飾型 | 海報插畫
  • 出現在哪：網站在介紹產品有多厲害的時候。
  • 例子：介紹這台電腦「跑很快」，旁邊就配一個衝刺的圖案。
  • 重點：要漂亮、要吸睛，通常會有顏色或立體感。

二、推薦n個免費可商用的icon素材網站

適合類型	名稱	特色說明	格式支援	授權	是否需標註來源
App／網站介面 （UI 系統圖示）	Lucide Icons	目前最紅的開源圖示庫，線條簡單乾淨、非常現代	SVG、React、Vue、PNG	MIT / ISC	不需標註
	Heroicons	Tailwind CSS 團隊製作，提供空心與實心兩種風格	SVG、React	MIT	不需標註
	Material Symbols（Google）	Google 官方圖示庫，可調整線條粗細	SVG、Web Font、Variable Font	Apache 2.0	不需標註
	Remix Icon	風格整齊、標準化，適合一致性高的專案	SVG、Web Font	Apache 2.0	不需標註
	Tabler Icons	非常適合儀表板、後台系統使用	SVG、Web Font、React、Vue	MIT	不需標註
簡報／行銷圖 ／可愛插畫風	Flaticon	全球最大圖示搜尋平台，彩色具體圖示很多	SVG、PNG、EPS（依圖示而異）	自家授權	免費需標註（付費免）
	The Noun Project	以「概念型」圖示聞名（如人權、制度）	SVG、PNG	自家授權	免費需標註（付費免）
	Icons8	官方團隊統一繪製，整體風格一致	PNG、SVG（付費可下載更大尺寸）	自家授權	免費需附上回鏈
	3dicons.co	流行的 3D 黏土風格小圖示	PNG、GLB、FBX	CC0（公眾領域）	不需標註

三、ICON有哪些常見的風格

1. 基礎功能派（實用型）

• 輪廓圖示（Outline / Line Icons）
  • 長什麼樣：只有線條、空心的圖示。
  • 感覺：乾淨、輕輕的、很現代。
  • 什麼時候用：畫面資訊很多時，不想讓圖示太顯眼。
  • 小缺點：太細的線在小螢幕上會不清楚。

• 實心圖示（Solid / Filled Icons）
  • 長什麼樣：整個塗滿顏色，看起來像影子剪影。
  • 感覺：強烈、醒目、有重點。
  • 什麼時候用：想讓人「點這裡！」的地方（像購物車、愛心）。
  • 常見用途：未選取是空心，選取後變成實心。

• 雙色調圖示（Duotone Icons）
  • 長什麼樣：同一個顏色，用深一點和淺一點的兩層組合。
  • 感覺：比純黑單色好看，有層次但不浮誇。
  • 什麼時候用：想讓設計更有味道，但不希望太花俏時。

2. 裝飾潮流派（吸睛型）

• 3D / 黏土風（Claymorphism）
  • 長什麼樣：圓圓胖胖、像黏土玩具。
  • 感覺：可愛、年輕、友善。
  • 什麼時候用：新創公司的網站、希望使用者不害怕的金融 App、遊戲風介面。
• 毛玻璃風（Glassmorphism）
  • 長什麼樣：像一塊霧面玻璃飄在畫面上，可以看到後面模糊的背景。
  • 感覺：科技、未來、高級。
  • 什麼時候用：科技產品首頁、想走未來科技風的設計。
• 手繪風（Hand-Drawn）
  • 長什麼樣：線條歪歪、有一點像直接用筆畫的。
  • 感覺：溫暖、有生命力、很像真人畫的。
  • 什麼時候用：教育、環保、文創品牌、強調「人味」的設計。
• 像素風（Pixel Art）
  • 長什麼樣：像早期電玩，一格一格的小方塊組起來。
  • 感覺：懷舊、復古、潮流 Y2K。
  • 什麼時會用：遊戲網站、Web3 項目、想吸引年輕族群的潮流品牌。

四、挑選icon時的3個小技巧：風格、尺寸、格式

1. 風格一致性

• 線條粗細要一致
  像畫畫，不能一支筆很粗、一支筆很細混著用，不然畫面會怪。
  縮小圖示時，線會變細，所以不能亂縮，要選「為那個尺寸設計好的圖示」。
• 圓角要統一
  如果你的按鈕都是圓角，但圖示卻是尖的，看起來就像兩個世界。
  界面是柔的 → 圖示也要柔。界面是硬的 → 圖示也要硬。
• 透視角度不能混
  平面的圖示不能跟立體或斜的圖示混在一起。畫面就像用同一台相機拍的，要「同一個角度」。

2. 尺寸與網格

• 標準尺寸是 24px
  大部分 UI 都用 24x24 的格子，因為這個數字很容易做成 2 倍、3 倍、4 倍大小，不會糊掉。
• 不同情境用不同尺寸
  16px → 小小的（通常桌面）
  20px → 次要
  24px → 手機最常用
  32px → 更大、要展示的地方用
• 光學對齊：圓形跟方形看起來要一樣大
  數學上圓形跟方形一樣大，但肉眼看起來圓形會「比較小」。
  所以圓形通常要畫得「比方形大一點點」才會視覺平衡。
• 手機上要注意「可以點到」
  就算圖示本身只有 24px，讓人點的「隱形按鈕範圍」至少要 44px（iPhone）或 48px（Android）。
  不然就會變成：「按半天按不到」。

3. 格式與效能

• SVG（向量）：縮放永遠不會糊掉、檔案小、支援多色、可以用 CSS 改顏色。手機和網頁都很愛它。
• Icon Font（圖示字體）：以前很紅，但現在問題多，字體載入前會「整排圖示消失一下」，而且無障礙性差。
• PNG（點陣圖）：放大會糊。現在只在「3D 圖示」或「 App icon 那種很複雜的圖」才會用。

特性	SVG (Inline / 內嵌)	Icon Fonts (圖示字體)	PNG / Raster (點陣圖)
可縮放性	無限（向量）	無限（向量）	縮放時會失真/像素化
效能表現	優異（代碼基礎）	良好（可快取），但在 HTTP/2 下優勢減弱，且有 FOIT* 問題	檔案體積較重
無障礙性	最佳（支援 role="img", title）	差（螢幕閱讀器可能將其讀為亂碼文字）	普通（需依賴 alt 文字）
多色支援	是（可透過 CSS/JS 控制）	否（僅限單色）	是（顏色已固化，無法動態更改）

五、常見問題FAQ：下載icon前你一定想問的事

Q1：可以在商業網站或 App 裡使用 Facebook、Instagram 這些 Logo 嗎？

A：可以用，但要小心。品牌的 Logo 是別人註冊的商標，不能亂改。
你可以拿來當「連到官方網站」的按鈕，但：

• 不能改形狀（不能把 IG 相機改成方的或圓的）
• 不能亂拉比例
• 不能把顏色改到看不出是那個品牌
• 到各品牌的「官方品牌資源頁」下載他們提供的 Logo
• 或使用 FontAwesome、SimpleIcons 這種不會亂改 Logo 的圖示庫

Q2：要怎麼讓圖示對視障使用者是「無障礙」的？

• 裝飾用圖示（只是好看）
  • 像標題旁的一顆星星，它沒有功能。
    這種圖示要「藏起來」，不然螢幕閱讀器會唸出奇怪的東西。
  • 程式碼要加： aria-hidden="true"
• 功能性圖示（按鈕本體）
  • 像搜尋按鈕只有一個放大鏡，沒有文字。
  • 這時候要給按鈕一個「說明」，讓螢幕閱讀器知道這是搜尋按鈕。
  • 例子：
    
      
    
  • 重點： 標籤加在按鈕外層，不加在 SVG 裡。
• A：螢幕閱讀器（給視障者用的）看不到圖示，除非你告訴它「這是什麼」。
  有兩種情況：

Q3：「免費授權」跟「開源」哪裡不一樣？

A：聽起來差不多，但差很多。
開源（MIT、Apache）你可以： 免費但要署名（CC BY）：你不用付錢，但你 一定要標註來源。
例如： 「Icon by Freepik from Flaticon」
對商業網站來說，這種字眼通常會讓畫面不太專業。
免版稅（付一次錢）：你買了，就能：

• 商用
• 修改
• 不一定要署名（寫作者名字）
• 不用署名
• 想怎麼用就怎麼用
• Q4：為什麼我的圖示在瀏覽器裡變模糊？
  A：大多數是 位置沒有對齊像素。
  舉例：
  如果你的圖示被放在「X:10.5, Y:10.5」這種半格位置，瀏覽器會試著畫半個像素 → 就會糊。
  修復方法：
  這樣圖示就會重新變清楚。
  • 位置改成整數：X:10, Y:10
  • 在 Figma 打開「Snap to Pixel Grid」（對齊像素網格）
  • 匯出 SVG 時的 viewBox 要設定正確

六、結論

• 系統類圖示庫（Lucide、Heroicons）
  這種像是「UI 專用工具箱」。技術很成熟、長得一致、授權又大多是開源（MIT），用在 APP 或網站的按鈕、導覽超級適合。
• 市場類圖示庫（Flaticon）
  這比較像「視覺素材百貨公司」。插畫很多、風格多，但不是專門做 UI 的，也常需要標註來源。

• 想做「整套介面」：就用開源、風格一致、有多種粗細的 SVG 圖示（像 Phosphor、Material Symbols）。
• 要做「比較醒目的狀態按鈕」：用實心的，因為一眼看得出來。
• 要做「數據面板、儀表板」那種資訊多的畫面：用細線條的輪廓圖示，會比較清楚。