【免費 Icon 下載】14 個免費圖示網站推薦|含商用授權與格式比較表

精選 14 個免費 Icon 下載網站,涵蓋 SVG、PNG、ICO、Icon Font 格式,附商用授權比較表與 4 大使用情境推薦,幫你快速找到最適合的圖示素材。
free icon 精選推薦精選圖片

本文包含合作推廣連結,若您透過連結購買,我們可能獲得佣金,不會影響您的價格。

架站工具推薦
⭐ 編輯首選
全球 43% 網站的架站首選平台
  • 拖拉式編輯器——不需寫程式,直覺式建立專業網站
  • 數千款佈景主題——商業、作品集、部落格一鍵套用
  • 內建 SEO 工具——網站地圖、社群分享、搜尋優化
  • WooCommerce 電商——免費外掛即可開店收款
9.3 / 10 本站評分
全球 4.7 億網站使用 · 免費方案
免費建立網站 免費方案永久使用,隨時升級
月付 NT$80 起的 WordPress 主機
查看方案
視覺化設計 × 內建 CMS × 設計師首選
免費試用

免費 Icon 下載網站推薦首選是 Iconoir 和 Material Icons,因為兩者皆為完全開源、免費商用且無需註冊。 本文精選 14 個免費圖示素材網站,依商用條件、支援格式(SVG、PNG、ICO、Icon Font)與使用情境完整比較,幫你在 3 分鐘內找到最適合的 Icon 資源。

內容目錄

快速比較:14 個免費 Icon 網站一覽表

在逐一介紹之前,先透過比較表快速掌握每個網站的核心差異。以下依「免費程度」排序——完全免費商用的排在最前面:

網站名稱 圖示規模 支援格式 商用條件 免費版限制 最適合對象
Iconoir 1,600+ SVG 免費商用,無需標示 無限制 需要開源 SVG 的開發者
Material Icons 2,500+ SVG、PNG 免費商用,無需標示 無限制 Google 風格的網頁/APP 設計
Iconmonstr 4,500+ SVG、PNG、PSD 免費商用,無需標示 無限制 預算有限的極簡風格專案
Font Awesome(免費版) 2,000+ SVG、Icon Font 免費商用,需保留授權聲明 僅免費圖示可用 前端開發者(CDN 引入)
Boxicons 1,600+ SVG、Icon Font、CSS SVG 需標示來源(CC-BY-4.0) 無限制 網頁開發,需要 CSS 整合
3D ICONS 1,400+ PNG、SVG、Figma 免費商用,無需標示 無限制 需要 3D 風格的設計師
Icons8(免費版) 近百萬 PNG、SVG、ICO 免費版需標示來源 PNG 限 96px,需連結 Icons8 UI/UX 設計師、APP 開發
Flaticon(免費版) 百萬+ SVG、PNG、Icon Font 免費版需標示來源 每日下載限制 需要大量風格選擇的設計師
Freepik(免費版) 數十萬 SVG、PNG 免費版需標示來源 每日下載限制 簡報設計、平面設計
The Noun Project(免費版) 1,000 萬+ SVG、PNG 免費版需標示作者姓名 含浮水印,需標示 全球設計師社群愛好者
Iconfinder(免費版) 數萬免費 SVG、PNG、ICO、ICNS 依個別圖示授權 免費圖示數量有限 Windows 桌面圖示開發
Streamline Icons(免費版) 數萬 SVG、PNG 部分免費,需查看授權 免費版僅部分圖示 風格多樣的矢量圖示需求
IconScout(免費版) 數百萬 SVG、PNG、Lottie 免費版需標示來源 每日下載限制 需要 Lottie 動態圖示
Envato Elements 數百萬 SVG、PNG、AI 付費訂閱,含完整商業授權 需付費才可使用 專業設計師、大量素材需求

價格僅供參考,以各官網為準。

如何使用這張表?

  • 如果你是前端開發者,需要 CDN 引入的 Icon Font → 直接跳到 Font Awesome 或 Boxicons
  • 如果你是 UI/UX 設計師,需要 Figma 外掛整合 → 看 Flaticon、Icons8、3D ICONS
  • 如果你需要 Windows 桌面圖示(.ICO 格式)→ 看 Iconfinder 或 Icons8
Icon 網站選擇指南:需要 CDN/Icon Font→Font Awesome 或 Boxicons;需要 Figma 整合→Flaticon 或 Icons8;需要 ICO 格式→Iconfinder 或 Icons8;需要完全免費商用→Ico
▲ Icon 網站選擇指南:需要 CDN/Icon Font→Font Awesome 或 Boxicons;需要 Figma 整合→Flaticon 或 Icons8;需要 ICO 格式→Iconfinder 或 Icons8;需要完全免費商用→Iconoir 或 Material Icons;需要 3D 風格→3D ICONS;需要大量多風格→Flaticon 或 Freepik

如何選擇適合的免費 Icon 網站?4 個使用情境

不同的工作場景對 Icon 的格式、風格和授權要求截然不同。以下依 4 個常見情境,各推薦 2-3 個最適合的網站。

網頁設計與前端開發(推薦:Font Awesome、Material Icons、Iconoir)

前端開發者最在意的是載入效能與 CSS 框架的相容性。Icon Font 和 SVG 是兩種主流方案——Icon Font 透過 CDN 引入一行程式碼就能使用,SVG 則可以直接嵌入 HTML,支援 CSS 控制顏色和大小。

Font Awesome 是目前最多網站使用的 Icon Font 方案,免費版提供超過 2,000 個圖示。只需要在 HTML 的 <head> 中加入 CDN 連結,就能透過 CSS class 名稱插入圖示:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<i class="fa-solid fa-house"></i>

Material Icons 則是 Google 官方維護的圖示庫,與 Material Design 設計規範完全一致,特別適合 Android APP 和 Google 風格的網頁。Iconoir 提供純 SVG 格式,檔案極小,適合對效能要求嚴格的專案。

如果你正在用 WordPress 架設網站,大多數網頁設計軟體和佈景主題都已內建 Font Awesome 支援,不需要額外設定。

UI/UX 設計與 Figma 工作流程(推薦:Flaticon、Icons8、3D ICONS)

UI 設計工作流程中,圖示需要能直接在設計工具中編輯顏色、大小和樣式。Flaticon、Icons8 和 3D ICONS 都提供 Figma 外掛,讓你在設計稿中直接搜尋、插入和調整圖示,不需要離開 Figma 介面。

Flaticon 的 Figma 外掛支援即時搜尋百萬圖示庫,插入後自動轉為可編輯的 SVG 向量圖層。Icons8 的外掛則額外支援即時修改顏色和尺寸,並可直接生成 CSS 代碼。3D ICONS 的外掛專注於高品質 3D 圖示,適合需要立體視覺效果的介面設計。

想深入學習 Figma 操作,可以參考Figma 教學完整指南。

簡報與平面設計(推薦:Freepik、The Noun Project、Iconmonstr)

簡報和平面設計通常需要 PNG 格式(方便直接拖入 PowerPoint 或 Canva),且風格多樣性比技術整合更重要。

Freepik 每日更新素材,除了圖示還有插圖和照片,適合需要一站式免費素材的使用者。The Noun Project 擁有全球最大的設計師社群貢獻圖示,風格從極簡線條到精緻填色都有。Iconmonstr 則以極簡黑白風格著稱,所有圖示免費商用且無需註冊,非常適合預算有限的專案。

Windows 桌面圖示與應用程式開發(推薦:Iconfinder、Icons8)

如果你需要的是 Windows 桌面圖示或應用程式的 .ICO 格式檔案,選擇就相對有限。ICO 格式是 Windows 系統專用的圖示格式,包含多種尺寸(16×16 到 256×256)在同一個檔案中,讓系統在不同顯示情境下自動選擇最適合的尺寸。

Iconfinder 是少數同時支援 SVG、PNG、ICO 和 ICNS(macOS 專用)格式下載的平台,特別適合需要跨平台圖示的應用程式開發者。Icons8 同樣支援 ICO 格式,且免費版圖示數量更多。

對於 macOS 開發者,ICNS 格式是必需的——Iconfinder 是目前少數直接提供 ICNS 下載的免費圖示網站。

4 大使用情境與推薦網站:網頁開發(Font Awesome、Material Icons、Iconoir)、UI/UX 設計(Flaticon、Icons8、3D ICONS)、簡報平面設計(Freepik、The Noun Project、Ico
▲ 4 大使用情境與推薦網站:網頁開發(Font Awesome、Material Icons、Iconoir)、UI/UX 設計(Flaticon、Icons8、3D ICONS)、簡報平面設計(Freepik、The Noun Project、Iconmonstr)、Windows 桌面圖示(Iconfinder、Icons8)

14 個免費 Icon 下載網站詳細介紹

以下依「免費程度與實用性」排序,完全免費商用的網站排在前面。每個網站都包含圖示數量、支援格式、商用條件和最適合對象。

1. Iconoir — 開源免費,SVG 格式,無需登入即可商用

Iconoir 是一款完全開源的 SVG 圖示庫,採用 MIT 授權,不需要登入帳號就能免費下載並用於商業用途。

  • 圖示數量:超過 1,600 個,持續更新中
  • 風格:統一的線條風格(Outline),粗細一致,視覺乾淨
  • 支援格式:SVG(可一鍵複製 SVG 代碼)
  • 商用條件:完全免費商用,無需標示來源(MIT License)
  • Figma 外掛:有,可直接在 Figma 中搜尋插入
  • 最適合:需要統一線條風格、重視開源授權的前端開發者和設計師

Iconoir 的特色是所有圖示風格高度一致——線條粗細、圓角弧度、視覺重量都經過統一規範,這在免費圖示庫中相當少見。你可以在網站上直接調整圖示的大小、粗細和顏色,調整完畢後一鍵複製 SVG 代碼,貼入 HTML 即可使用。

Iconoir 官網介面,展示免費 SVG 圖示搜尋與下載功能
使用Iconoir下載免費圖示。來源:Iconoir

2. Material Icons(Google Fonts)— Google 官方圖示,全部免費商用

Material Icons 是 Google 官方維護的圖示庫,所有圖示遵循 Material Design 設計規範,採用 Apache 2.0 授權,完全免費商用。

  • 圖示數量:Material Symbols 超過 2,500 個(傳統 Material Icons 約 2,000 個,5 種變體)
  • 風格:5 種變體——Outlined、Rounded、Sharp、Filled、Two-Tone
  • 支援格式:SVG、PNG(多種尺寸)
  • 商用條件:完全免費商用,無需標示來源(Apache 2.0 License)
  • Figma 外掛:有(Material Design Icons 外掛)
  • 最適合:Android APP 開發者、使用 Material Design 的網頁設計師

Material Icons 的最大優勢是與 Google 產品的設計語言完全一致。如果你的專案採用 Material Design 規範,使用這套圖示可以確保介面風格統一。每個圖示都提供 5 種變體,讓你根據介面風格選擇最適合的版本。

Material Icons 官網介面(Google Fonts),展示免費圖示搜尋功能
使用Material Icons下載免費圖示。來源:Material Symbols & Icons – Google Fonts

3. Iconmonstr — 極簡風格,免費商用,無需註冊

Iconmonstr 提供超過 4,500 個極簡風格的圖示,全部免費商用,不需要註冊帳號就能直接下載。

  • 圖示數量:超過 4,500 個
  • 風格:極簡黑白線條,統一的視覺風格
  • 支援格式:SVG、PNG、PSD、EPS
  • 商用條件:完全免費商用,無需標示來源(Iconmonstr License)
  • Figma 外掛:無
  • 最適合:預算有限的專案、需要極簡風格的簡報和網頁設計

Iconmonstr 的介面非常直觀——分類清晰,搜尋功能精準,下載前可以自行調整圖示的大小和顏色。支援 PSD 和 EPS 格式是它的獨特優勢,方便在 Photoshop 和 Illustrator 中進一步編輯。

Iconmonstr 官網介面,展示免費極簡風格圖示下載
使用Iconmonstr 下載免費圖示。來源:Iconmonstr

4. Font Awesome — 最受開發者歡迎的 Icon Font,免費版含 2,000+ 圖示

Font Awesome 是全球使用率最高的 Icon Font 方案,免費版提供超過 2,000 個圖示,透過 CDN 一行程式碼即可在網頁中使用。

  • 圖示數量:免費版 2,000+,Pro 版 26,000+
  • 風格:Solid、Regular、Brands 三種風格
  • 支援格式:SVG、Icon Font(CSS class 引入)
  • 商用條件:免費版可商用,需保留 Font Awesome 授權聲明
  • Figma 外掛:有
  • 最適合:前端開發者、需要 CDN 引入的網頁專案

Font Awesome 的核心優勢是開發者友善。不需要下載任何檔案,只要在 HTML 中引入 CDN 連結,就能透過 CSS class 名稱插入圖示。圖示的大小、顏色、旋轉、動畫效果都可以用 CSS 控制,與響應式設計完美相容。

如果你正在進行網站設計,Font Awesome 幾乎是標準配備——大多數 WordPress 佈景主題和前端框架都內建支援。

Font Awesome 官網介面,展示 Icon Font 圖示庫與 CDN 引入方式
使用Font Awesome 下載圖示素材。來源:Font Awesome

5. 3D ICONS — 高品質 3D 圖示,支援 Figma 外掛

3D ICONS 專注於提供高品質的 3D 立體圖示,所有圖示採用 CC0 授權,完全免費商用。

  • 圖示數量:超過 1,400 個
  • 風格:3D 立體渲染,色彩鮮豔,視覺衝擊力強
  • 支援格式:PNG(高解析度)、SVG、Figma 檔案
  • 商用條件:完全免費商用,無需標示來源(CC0 License)
  • Figma 外掛:有,可直接在 Figma 中搜尋插入 3D 圖示
  • 最適合:需要 3D 視覺效果的 Landing Page、簡報、社群媒體設計

3D ICONS 的圖示涵蓋日常物品、科技元素、社群媒體圖標等主題,每個圖示都有多種角度和配色可選。不需要註冊帳號,直接下載即可使用。

3D ICONS 官網介面,展示高品質 3D 立體圖示下載
使用3D Icons下載免費圖示。來源:3dicons

6. Icons8 — 近百萬圖示,支援 PNG/SVG/ICO,有 Figma 外掛

Icons8 擁有接近百萬個圖示,是目前規模最大的免費圖示庫之一,且支援 ICO 格式下載,適合 Windows 桌面圖示開發。

  • 圖示數量:近百萬
  • 風格:超過 40 種風格(扁平、線條、3D、手繪等)
  • 支援格式:PNG、SVG、ICO、PDF
  • 商用條件:免費版可商用,但需在作品中標示來源並連結至 Icons8;PNG 免費版限 96px
  • Figma 外掛:有,支援即時搜尋、修改顏色和尺寸
  • 最適合:需要大量多風格圖示的 UI/UX 設計師、Windows 桌面圖示開發者

Icons8 的免費版有一個重要限制:PNG 格式僅提供 96×96 像素。如果需要更高解析度的 PNG 或去除標示來源的要求,需要升級付費方案。不過,Icons8 提供的圖示編輯工具非常實用——可以即時修改顏色和尺寸,並直接生成 CSS 代碼。

Icons8 官網介面,展示近百萬免費圖示搜尋與下載功能
使用Icons8下載免費圖示。來源:Icons8

7. Flaticon — 百萬圖示庫,免費版需標示來源,支援 Figma 外掛

Flaticon 是目前最大的免費圖示資料庫,擁有超過百萬個圖示,支援自訂顏色和大小。

  • 圖示數量:百萬+
  • 風格:扁平化、線條、填色、手繪等多種風格
  • 支援格式:SVG、PNG、EPS、PSD、Icon Font(CSS)
  • 商用條件:免費版可商用,但必須標示來源(Attribution Required);付費版無需標示
  • Figma 外掛:有,支援即時搜尋和插入
  • 最適合:需要大量風格選擇的設計師、需要 Icon Font 的前端開發者

Flaticon 的免費版每日有下載數量限制,且所有免費下載的圖示都必須在作品中標示來源。如果你的專案無法加入標示(例如 APP 介面),建議考慮付費方案或選擇 Iconoir、Material Icons 等無需標示的替代方案。

Flaticon 還提供 API 服務,方便開發者在應用程式中整合圖示搜尋和下載功能。

Flaticon 官網介面,展示百萬免費圖示庫與自訂功能
使用Flaticon下載免費圖示。來源:Vector icons – SVG, PSD, PNG, EPS & Icon Font – Thousands of free icons

8. Freepik — 每日更新,免費版有下載限制,含 AI 生成工具

Freepik 不僅提供圖示,還有插圖、照片和向量圖等綜合素材,是一站式的設計資源平台。

  • 圖示數量:數十萬個圖示(另有數百萬張插圖和照片)
  • 風格:多樣化,從扁平到寫實風格都有
  • 支援格式:SVG、PNG、EPS、AI
  • 商用條件:免費版可商用,需標示來源;付費版無需標示
  • Figma 外掛:無(但可下載後匯入)
  • 最適合:需要圖示+插圖+照片一站式素材的簡報和平面設計師

Freepik 最近引入了 AI 圖片生成工具,可以根據文字描述自動生成設計元素。免費版每日有下載限制(截至撰文時約 10 個),如果需要大量下載建議升級付費方案。

如果你在尋找更多免費素材資源,包括照片和插圖,Freepik 是一個很好的起點。

Freepik 官網介面,展示免費圖示與插圖素材下載
使用Freepik下載icon 素材。來源:Icons for all kinds of designs | Freepik

9. The Noun Project — 全球設計師社群,免費版需標示作者姓名

The Noun Project 擁有來自全球設計師貢獻的超過 1,000 萬個圖示,是目前圖示數量最多的平台之一。

  • 圖示數量:1,000 萬+
  • 風格:極度多樣——由全球設計師個別上傳,風格從極簡到精緻都有
  • 支援格式:SVG、PNG
  • 商用條件:免費版可商用,但必須標示原作者姓名(Creative Commons Attribution);付費版無需標示
  • Figma 外掛:有
  • 最適合:需要獨特、非主流風格圖示的設計師

The Noun Project 的免費版下載會包含浮水印,且必須在作品中標示原作者姓名。由於圖示來自不同設計師,風格一致性較低——如果你需要整套風格統一的圖示,建議使用 Iconoir 或 Material Icons。

The Noun Project 官網介面,展示全球設計師社群圖示庫
使用The Noun Project下載免費圖示。來源:The Noun Project

10. Iconfinder — 支援 SVG/PNG/ICO/ICNS,適合 Windows 桌面圖示開發

Iconfinder 是少數同時支援 ICO 和 ICNS 格式的圖示平台,特別適合需要 Windows 桌面圖示和 macOS 應用程式圖示的開發者。

  • 圖示數量:數萬個免費圖示(另有大量付費圖示)
  • 風格:多樣化,可依風格篩選
  • 支援格式:SVG、PNG、ICO、ICNS
  • 商用條件:依個別圖示授權——免費圖示多為 CC Attribution 或 CC0,付費圖示含完整商業授權
  • Figma 外掛:無
  • 最適合:Windows 桌面圖示開發、macOS 應用程式開發、需要 ICO/ICNS 格式的專案

使用 Iconfinder 時需要特別注意:每個圖示的授權條件可能不同,下載前務必確認該圖示的具體授權類型。網站提供強大的篩選功能,可以依格式、風格、授權類型和價格進行過濾。

Iconfinder 官網介面,展示多格式圖示下載與篩選功能
使用下載免費圖示。來源:16,806+ high-quality icons – Iconfinder

11. Streamline Icons — 數萬個矢量圖示,風格多樣

Streamline Icons 提供從極簡線條到精緻插畫風格的多種圖示,深受設計師和開發者青睞。

  • 圖示數量:數萬個(免費版約 700+)
  • 風格:超過 50 種風格系列,從極簡到插畫風格
  • 支援格式:SVG、PNG
  • 商用條件:免費版部分圖示可商用,需查看個別授權;付費版含完整商業授權
  • Figma 外掛:有
  • 最適合:需要多種風格系列的設計師、追求視覺一致性的品牌專案

Streamline Icons 的特色是每個風格系列內的圖示都經過精心設計,確保視覺一致性。免費版可用的圖示數量有限,如果需要完整存取所有風格系列,需要升級付費方案。

Streamline Icons 官網介面,展示多風格矢量圖示庫
使用Streamline Icons 下載免費圖示。來源:Streamline Icons

12. Boxicons — 開源免費,適合網頁開發,支援 CSS/SVG/Font

Boxicons 是一款專為網頁開發設計的開源圖示庫,提供 Regular 和 Solid 兩種風格,以及品牌 Logo 圖示。

  • 圖示數量:超過 1,600 個
  • 風格:Regular(線條)、Solid(填色)、Logos(品牌)
  • 支援格式:SVG、Icon Font、CSS
  • 商用條件:SVG 採 CC-BY-4.0 授權(商用需標示來源),字體採 SIL OFL 1.1
  • Figma 外掛:無
  • 最適合:前端開發者、需要輕量級 Icon Font 替代 Font Awesome 的專案

Boxicons 的優勢是極度輕量——整個圖示庫的檔案大小遠小於 Font Awesome,適合對頁面載入速度有嚴格要求的專案。支援 npm 安裝和 CDN 引入,與 React、Vue 等前端框架都有良好的整合。

13. IconScout — 多格式支援,含 Lottie 動態圖示

IconScout 除了傳統的靜態圖示,還提供 Lottie 動態圖示和 3D 插圖,是目前格式最多元的圖示平台之一。

  • 圖示數量:數百萬(含靜態圖示、Lottie 動畫、3D 插圖)
  • 風格:多樣化,含動態和 3D 風格
  • 支援格式:SVG、PNG、Lottie(JSON)、GIF
  • 商用條件:免費版可商用,需標示來源;付費版無需標示
  • Figma 外掛:有
  • 最適合:需要動態圖示(Lottie)的網頁和 APP 設計師

Lottie 是 Airbnb 開發的動畫格式,檔案極小且支援無限縮放,越來越多的網頁和 APP 使用 Lottie 動畫取代 GIF。如果你的專案需要動態圖示效果,IconScout 是目前最好的免費選擇之一。

14. Envato Elements — 付費平台,數百萬高品質素材,含商業授權

Envato Elements 是一個綜合性的付費設計資源平台,除了圖示還提供插圖、模板、字體、音效、影片素材等。

  • 圖示數量:數百萬(含圖示包和個別圖示)
  • 風格:專業設計師製作,品質一致
  • 支援格式:SVG、PNG、AI、EPS
  • 商用條件:訂閱即含完整商業授權,無需額外標示
  • Figma 外掛:有
  • 最適合:專業設計師、需要大量高品質素材且不想逐一處理授權問題的團隊

Envato Elements 的核心價值是一次訂閱,無限下載,全部含商業授權。對於經常需要大量設計素材的專業設計師或設計團隊,訂閱 Envato Elements 可以大幅節省尋找素材和處理授權的時間。

Envato Elements 官網介面,展示付費圖示包與商業授權說明
使用Envato Elements下載免費圖示。來源:Icon Packs – Envato Elements

免費 Icon 使用前必讀:授權條款與商用注意事項

「免費下載」不等於「免費商用」。不同網站的授權條款差異很大,搞錯授權可能導致法律糾紛。以下是 4 種常見的授權類型:

CC0 / MIT / Apache 2.0(完全免費商用,無需標示):

  • Iconoir(MIT License)
  • Material Icons(Apache 2.0 License)
  • Iconmonstr(Iconmonstr License)
  • 3D ICONS(CC0 License)

CC-BY(免費商用但需標示來源):

  • Boxicons(SVG 採 CC-BY-4.0;Icon Font 採 SIL OFL 1.1)

這些網站的圖示可以直接用於任何商業專案,不需要標示來源、不需要付費、不需要通知原作者。

CC Attribution / 平台要求標示來源(免費商用但需標示):

  • The Noun Project 免費版(需標示原作者姓名)
  • Flaticon 免費版(需標示「Designed by [作者] from Flaticon」)
  • Icons8 免費版(需在作品中連結至 Icons8)
  • Freepik 免費版(需標示來源)
  • IconScout 免費版(需標示來源)

使用這些網站的免費圖示時,必須在作品的適當位置加入標示。網頁設計通常放在頁尾,簡報放在最後一頁,APP 放在「關於」頁面。

平台授權(需訂閱付費才可完整商用):

  • Envato Elements(訂閱即含商業授權)
  • Iconfinder 付費圖示(購買即含商業授權)
  • Font Awesome Pro(訂閱即含商業授權)

部分限制商用:

  • Streamline Icons 免費版(部分圖示禁止商用,需逐一查看授權)

如果你正在為商業網站選擇圖示,最安全的做法是使用 CC0 或 MIT 授權的圖示庫。如果你的網站是用 WordPress 架設的,搭配網頁設計模板使用這些免費圖示,可以快速建立專業的品牌網站。

Icon 授權類型分類:完全免費商用(CC0/MIT/Apache 2.0:Iconoir、Material Icons、Iconmonstr、3D ICONS、Boxicons)、需標示來源(CC Attribution:The Noun Proj
▲ Icon 授權類型分類:完全免費商用(CC0/MIT/Apache 2.0:Iconoir、Material Icons、Iconmonstr、3D ICONS、Boxicons)、需標示來源(CC Attribution:The Noun Project、Flaticon、Icons8、Freepik、IconScout)、需付費訂閱(Envato Elements、Iconfinder 付費版、Font Awesome Pro)、部分限制(Streamline Icons 免費版)

常見格式說明:SVG、PNG、ICO、Icon Font 怎麼選?

選擇圖示格式取決於你的使用場景:

格式 特性 最適合場景 優點 缺點
SVG 向量格式,無限縮放不失真 網頁設計、Figma、前端開發 檔案小、可用 CSS 控制樣式 舊版瀏覽器相容性較差
PNG 點陣格式,支援透明背景 簡報、平面設計、社群媒體 通用性最高、所有軟體都支援 放大會失真、檔案較大
ICO Windows 系統專用,含多尺寸 Windows 桌面圖示、Favicon 系統自動選擇最佳尺寸 僅限 Windows 環境
Icon Font 字型檔案,透過 CSS class 引入 前端開發、響應式網頁 CDN 引入方便、CSS 控制樣式 只支援單色、無法精細控制

簡單的選擇原則:

  • 做網頁 → 優先用 SVG 或 Icon Font
  • 做簡報 → 用 PNG
  • 做 Windows 桌面圖示 → 用 ICO
  • 在 Figma 中設計 → 用 SVG

如果你對網頁設計中的視覺元素搭配有興趣,配色網站的色票工具可以幫你找到與圖示搭配的最佳配色方案。

將免費 Icon 應用到你的網站

找到合適的免費圖示後,下一步是把它們實際應用到你的網站上。根據你的架站方式不同,整合圖示的方法也不一樣。

如果你使用 WordPress 架站:

大多數 WordPress 佈景主題已內建 Font Awesome 或 Dashicons 支援。你只需要在文章或頁面編輯器中插入對應的 CSS class,圖示就會自動顯示。如果需要使用其他圖示庫的 SVG 檔案,可以透過「自訂 HTML」區塊直接貼入 SVG 代碼。

WordPress.com 的拖放式編輯器讓這個過程更簡單——你可以直接上傳 SVG 檔案作為圖片插入,或使用內建的圖示區塊。免費方案即可開始建站,不需要信用卡。

如果你使用視覺化架站工具:

Webflow 和 Squarespace 等視覺化架站工具通常支援直接上傳 SVG 檔案。Webflow 的設計自由度最高,可以對 SVG 圖示進行精細的動畫和互動效果設定。

如果你需要自行編寫程式碼:

使用 Font Awesome CDN 或 Boxicons CDN 是最快的方式。引入一行 <link> 標籤後,就能在整個網站中使用數千個圖示,不需要逐一下載檔案。

想了解更多架站工具的比較,可以參考網頁設計軟體推薦,找到最適合你的架站方案。

⭐ 全球逾 42% 網站都用 WordPress ⭐ 4.6 / 5

WordPress.com|從部落格到企業官網的架站首選

🎁 免費方案永久使用、不會到期——50,000+ 外掛生態系,不論部落格、品牌官網或電商都能彈性擴充
  • 🌐 全球逾 42% 網站用 WordPress——最成熟穩定的架站生態系
  • 🎨 數百種佈景主題——免費 + 付費,各行業模板都有
  • 🔌 50,000+ 外掛——SEO、電商、表單、社群整合一鍵安裝
  • 📈 從免費到企業——隨業務成長彈性升級方案

免費方案永久使用 · 不需信用卡 · 自訂網域可升級

如果你的網站需要品牌 Logo 搭配圖示使用,AI Logo 設計工具可以幫你快速生成專業的品牌標誌。

結論

免費 Icon 資源豐富,但選對網站才能真正節省時間。以下是本文的核心重點:

  • 完全免費商用首選:Iconoir、Material Icons、Iconmonstr、3D ICONS、Boxicons——這 5 個網站的圖示都不需要標示來源,可以放心用於任何商業專案
  • 需要大量圖示和多風格選擇:Flaticon 和 Icons8 的圖示庫規模最大,但免費版需要標示來源
  • Windows 桌面圖示(ICO 格式):Iconfinder 和 Icons8 是少數支援 ICO 和 ICNS 格式的平台
  • 前端開發者:Font Awesome 和 Boxicons 的 CDN 引入方式最方便,一行程式碼就能使用
  • 需要動態圖示:IconScout 的 Lottie 格式是目前最好的免費選擇

下一步行動建議: 先從 Iconoir 或 Material Icons 開始——兩者都完全免費、無需註冊、無需標示來源。如果你正在架設網站,前往 WordPress.com 選擇一個佈景主題,搭配這些免費圖示,10 分鐘就能看到你的網站雛形——免費方案永久使用,不需要信用卡。

⭐ 全球逾 42% 網站都用 WordPress ⭐ 4.6 / 5

WordPress.com|從部落格到企業官網的架站首選

🎁 免費方案永久使用、不會到期——50,000+ 外掛生態系,不論部落格、品牌官網或電商都能彈性擴充
  • 🌐 全球逾 42% 網站用 WordPress——最成熟穩定的架站生態系
  • 🎨 數百種佈景主題——免費 + 付費,各行業模板都有
  • 🔌 50,000+ 外掛——SEO、電商、表單、社群整合一鍵安裝
  • 📈 從免費到企業——隨業務成長彈性升級方案

免費方案永久使用 · 不需信用卡 · 自訂網域可升級

常見問題(FAQ)

免費 Icon 可以商用嗎?

可以,但取決於授權條款。Iconoir、Material Icons、Iconmonstr、3D ICONS 採用 CC0 / MIT / Apache 2.0 授權,完全免費商用且無需標示來源;Boxicons 的 SVG 採 CC-BY-4.0,商用時需標示來源。Flaticon、Icons8、Freepik、The Noun Project 的免費版也允許商用,但必須在作品中標示來源。使用前務必確認每個網站的具體授權條款。

如何修改 Icon 的顏色和大小?

大多數圖示網站(如 Iconoir、Iconmonstr、Icons8)提供線上編輯工具,可以在下載前直接調整顏色和大小。如果下載的是 SVG 格式,可以用任何文字編輯器打開 SVG 檔案,修改 fill 屬性改變顏色、修改 widthheight 改變大小。也可以使用 Figma、Adobe Illustrator 或免費的 Inkscape 進行更精細的編輯。

如何將 Icon 加入網站?

最常見的 3 種方式:① 使用 Icon Font(如 Font Awesome),在 HTML 的 <head> 中引入 CDN 連結,再用 CSS class 插入圖示;② 直接將 SVG 代碼嵌入 HTML 中,可用 CSS 控制樣式;③ 將 PNG 或 SVG 檔案作為圖片上傳,用 <img> 標籤引入。WordPress 使用者可以直接在區塊編輯器中上傳 SVG 檔案或使用內建的圖示功能。

什麼是矢量 Icon?為什麼推薦 SVG 格式?

矢量 Icon 是用數學公式描述的圖形(而非像素點),無論放大多少倍都不會失真。SVG(Scalable Vector Graphics)是最常見的矢量圖示格式,具有 3 大優勢:① 檔案極小,載入速度快;② 可以用 CSS 直接控制顏色、大小和動畫;③ 在任何螢幕解析度下都保持清晰。對於網頁設計和 APP 開發,SVG 是目前最推薦的圖示格式。

不會寫程式可以在網站上使用免費 Icon 嗎?

完全可以。如果你使用 WordPress.com、Squarespace 或 Webflow 等拖放式架站工具,只需要下載 PNG 或 SVG 格式的圖示,然後像上傳照片一樣拖入編輯器即可。不需要寫任何程式碼。WordPress.com 的免費方案就支援圖片上傳功能,適合完全沒有技術背景的使用者。

更多精彩內容

WordPress.com
用 WordPress.com 免費建立你的網站
拖拉式編輯 · 數千款主題 · SEO 工具 · 免費方案