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

14 個免費 Icon 下載網站詳細介紹
以下依「免費程度與實用性」排序,完全免費商用的網站排在前面。每個網站都包含圖示數量、支援格式、商用條件和最適合對象。
1. Iconoir — 開源免費,SVG 格式,無需登入即可商用
Iconoir 是一款完全開源的 SVG 圖示庫,採用 MIT 授權,不需要登入帳號就能免費下載並用於商業用途。
- 圖示數量:超過 1,600 個,持續更新中
- 風格:統一的線條風格(Outline),粗細一致,視覺乾淨
- 支援格式:SVG(可一鍵複製 SVG 代碼)
- 商用條件:完全免費商用,無需標示來源(MIT License)
- Figma 外掛:有,可直接在 Figma 中搜尋插入
- 最適合:需要統一線條風格、重視開源授權的前端開發者和設計師
Iconoir 的特色是所有圖示風格高度一致——線條粗細、圓角弧度、視覺重量都經過統一規範,這在免費圖示庫中相當少見。你可以在網站上直接調整圖示的大小、粗細和顏色,調整完畢後一鍵複製 SVG 代碼,貼入 HTML 即可使用。

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 種變體,讓你根據介面風格選擇最適合的版本。

3. Iconmonstr — 極簡風格,免費商用,無需註冊
Iconmonstr 提供超過 4,500 個極簡風格的圖示,全部免費商用,不需要註冊帳號就能直接下載。
- 圖示數量:超過 4,500 個
- 風格:極簡黑白線條,統一的視覺風格
- 支援格式:SVG、PNG、PSD、EPS
- 商用條件:完全免費商用,無需標示來源(Iconmonstr License)
- Figma 外掛:無
- 最適合:預算有限的專案、需要極簡風格的簡報和網頁設計
Iconmonstr 的介面非常直觀——分類清晰,搜尋功能精準,下載前可以自行調整圖示的大小和顏色。支援 PSD 和 EPS 格式是它的獨特優勢,方便在 Photoshop 和 Illustrator 中進一步編輯。

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 佈景主題和前端框架都內建支援。

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

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 代碼。

7. Flaticon — 百萬圖示庫,免費版需標示來源,支援 Figma 外掛
Flaticon 是目前最大的免費圖示資料庫,擁有超過百萬個圖示,支援自訂顏色和大小。
- 圖示數量:百萬+
- 風格:扁平化、線條、填色、手繪等多種風格
- 支援格式:SVG、PNG、EPS、PSD、Icon Font(CSS)
- 商用條件:免費版可商用,但必須標示來源(Attribution Required);付費版無需標示
- Figma 外掛:有,支援即時搜尋和插入
- 最適合:需要大量風格選擇的設計師、需要 Icon Font 的前端開發者
Flaticon 的免費版每日有下載數量限制,且所有免費下載的圖示都必須在作品中標示來源。如果你的專案無法加入標示(例如 APP 介面),建議考慮付費方案或選擇 Iconoir、Material Icons 等無需標示的替代方案。
Flaticon 還提供 API 服務,方便開發者在應用程式中整合圖示搜尋和下載功能。

8. Freepik — 每日更新,免費版有下載限制,含 AI 生成工具
Freepik 不僅提供圖示,還有插圖、照片和向量圖等綜合素材,是一站式的設計資源平台。
- 圖示數量:數十萬個圖示(另有數百萬張插圖和照片)
- 風格:多樣化,從扁平到寫實風格都有
- 支援格式:SVG、PNG、EPS、AI
- 商用條件:免費版可商用,需標示來源;付費版無需標示
- Figma 外掛:無(但可下載後匯入)
- 最適合:需要圖示+插圖+照片一站式素材的簡報和平面設計師
Freepik 最近引入了 AI 圖片生成工具,可以根據文字描述自動生成設計元素。免費版每日有下載限制(截至撰文時約 10 個),如果需要大量下載建議升級付費方案。
如果你在尋找更多免費素材資源,包括照片和插圖,Freepik 是一個很好的起點。

9. The Noun Project — 全球設計師社群,免費版需標示作者姓名
The Noun Project 擁有來自全球設計師貢獻的超過 1,000 萬個圖示,是目前圖示數量最多的平台之一。
- 圖示數量:1,000 萬+
- 風格:極度多樣——由全球設計師個別上傳,風格從極簡到精緻都有
- 支援格式:SVG、PNG
- 商用條件:免費版可商用,但必須標示原作者姓名(Creative Commons Attribution);付費版無需標示
- Figma 外掛:有
- 最適合:需要獨特、非主流風格圖示的設計師
The Noun Project 的免費版下載會包含浮水印,且必須在作品中標示原作者姓名。由於圖示來自不同設計師,風格一致性較低——如果你需要整套風格統一的圖示,建議使用 Iconoir 或 Material Icons。

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

11. Streamline Icons — 數萬個矢量圖示,風格多樣
Streamline Icons 提供從極簡線條到精緻插畫風格的多種圖示,深受設計師和開發者青睞。
- 圖示數量:數萬個(免費版約 700+)
- 風格:超過 50 種風格系列,從極簡到插畫風格
- 支援格式:SVG、PNG
- 商用條件:免費版部分圖示可商用,需查看個別授權;付費版含完整商業授權
- Figma 外掛:有
- 最適合:需要多種風格系列的設計師、追求視覺一致性的品牌專案
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 可以大幅節省尋找素材和處理授權的時間。

免費 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 架設的,搭配網頁設計模板使用這些免費圖示,可以快速建立專業的品牌網站。

常見格式說明: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> 標籤後,就能在整個網站中使用數千個圖示,不需要逐一下載檔案。
想了解更多架站工具的比較,可以參考網頁設計軟體推薦,找到最適合你的架站方案。
WordPress.com|從部落格到企業官網的架站首選
- 🌐 全球逾 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 分鐘就能看到你的網站雛形——免費方案永久使用,不需要信用卡。
WordPress.com|從部落格到企業官網的架站首選
- 🌐 全球逾 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 屬性改變顏色、修改 width 和 height 改變大小。也可以使用 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 的免費方案就支援圖片上傳功能,適合完全沒有技術背景的使用者。


