LineIcons - 超過 2000+ 個線形圖標庫，專為設計師與開發人員設計的圖標 Icons 免費下載

Facebook Line Messenger Telegram

LineIcons 是一款專為設計師與前端開發人員打造的免費線形圖標庫，收錄超過 2000 個精心繪製的 Icons，風格統一、線條俐落，非常適合應用在 Web 網頁、Android 與 iOS 應用程式的 UI 設計當中。不論是導航選單的小圖示、按鈕上的輔助圖案，還是資訊圖表中的視覺元素，LineIcons 都能提供品質穩定且視覺一致的圖標選擇。

LineIcons 提供三種主要的下載格式：SVG 向量檔、Web Font 字型檔，以及 Adobe Illustrator（AI）原始檔。設計師可以直接在向量編輯軟體中修改 AI 檔案，開發者則能透過 SVG 或 Web Font 快速整合到專案裡，幾乎涵蓋了所有常見的開發與設計流程。

官方網站：https://lineicons.com/

LineIcons 是什麼？免費線形圖標庫的核心特色

超過 2000+ 個精心設計的線形圖標

LineIcons 目前收錄超過 2000 個線形風格圖標，涵蓋了電子商務、社群媒體、檔案管理、天氣、地圖導航、使用者介面等常見分類。每個圖標都遵循一致的設計規範，包括統一的線條粗細、圓角比例與視覺重量，這讓整套圖標放在一起使用時能夠保持和諧的視覺效果。

跟很多圖標庫不同，LineIcons 從一開始就專注在「線形」這個單一風格上，不混雜填充版或其他變體。這種設計哲學讓它成為喜歡極簡風格的設計師首選，尤其是現代 SaaS 產品、科技類網站和WordPress 佈景主題的 UI 設計，線形圖標幾乎成了主流趨勢。

支援多種格式：SVG、Web Font、AI 原始檔

LineIcons 提供三種主要格式，滿足不同使用者的需求：

SVG 向量檔：適合直接嵌入 HTML 頁面或使用向量編輯軟體修改，縮放不失真，是目前網頁設計的主流選擇。
Web Font 字型檔：透過 CSS class 名稱呼叫圖標，類似 Font Awesome 的用法，對習慣字型圖標的開發者來說非常方便。
AI 原始檔：僅限 Pro 方案，提供 Adobe Illustrator 可編輯的原始向量檔案，方便設計師深度客製化。

適用平台：Web、Android、iOS 全覆蓋

LineIcons 的圖標設計兼顧了多平台需求。在網頁端，你可以使用 SVG 或 Web Font 格式；在 Android 和 iOS 應用程式中，SVG 格式同樣能夠完美呈現。對於需要跨平台一致視覺體驗的產品來說，一套圖標就能解決所有平台的圖示需求，省去分別為不同系統準備圖標資源的麻煩。

LineIcons 授權方案比較：Basic Free 與 Pro 的差異

Basic Free 免費方案內容

LineIcons 的 Basic Free 方案提供 514 個免費圖標，包含完整的 SVG 格式檔案與 Web Font 格式檔案。免費版的圖標可以合法使用於商業用途，唯一的條件是在使用時需要在專案底部附上署名（attribution），標註圖標來源為 LineIcons。這個要求對於大部分開源或免費圖標庫來說是相當常見的授權模式。

Pro 付費方案的額外價值

升級到 Pro 方案後，你可以取得全部 2000+ 個圖標的下載權限，並且不需要在任何地方附上署名。Pro 方案還額外提供 AI（Adobe Illustrator）原始檔案格式的下載，讓設計師能夠在向量編輯軟體中自由修改圖標的每個細節。Pro 方案還享有定期的圖標更新，新加入的圖標會直接加入你的下載範圍。

授權方案比較表格

比較項目	Basic Free	Pro
圖標數量	514 個	2000+ 全部圖標
SVG 格式	是	是
Web Font 格式	是	是
AI 原始檔	否	是
商業用途	是（需署名）	是（無需署名）
署名要求	需要	不需要
定期更新	有限	完整更新

如果你的專案只需要基本常用的圖標，Basic Free 方案已經相當夠用。但如果你需要大量且多樣化的圖標選擇，或者不希望在網站底部加上署名連結，Pro 方案會是更划算的投資。

如何下載 LineIcons 免費圖標：完整操作教學

批量下載全部免費圖標

進入 LineIcons 官方網站首頁後，點選畫面中央的「Download Now」按鈕，就能一次下載全部 514 個 Basic Free 授權的免費圖標。下載的內容是一個 ZIP 壓縮檔，解壓縮後會看到依照格式分類的資料夾結構，包含 SVG 檔案資料夾與 Web Font 相關檔案（CSS、WOFF、TTF 等格式）。

瀏覽與搜尋單一圖標

如果你只需要其中幾個圖標，不需要下載整套檔案，可以點選首頁的「View All Icons」進入完整的圖標瀏覽頁面。這個頁面提供了搜尋功能和分類篩選功能。左側邊欄列出所有圖標分類，包括 Arrows、Business、Communication、Design、Development、Media、Weather 等等，點選特定分類就能快速篩選出你需要的圖標類型。

注意看圖標的右上角：如果標示了「PRO」字樣，代表這個圖標需要購買 Pro 方案才能下載；沒有 PRO 標記的則屬於 Basic Free 方案，可以直接免費使用（但需要署名）。

單獨下載 SVG 或複製 Web Font 代碼

在圖標瀏覽頁面中，每個圖標下方都提供了三種操作方式：下載 SVG 檔案、複製 Web Font 的 CSS class 名稱，以及複製 Unicode 字元碼。點選 SVG 下載按鈕就能取得單一圖標的向量檔案；點選複製按鈕則可以取得 CSS class 名稱（例如 lni lni-home），直接貼到你的 HTML 中使用。

Web Font 圖標使用教學：在 HTML 專案中嵌入 LineIcons

方法一：使用 CDN 載入（推薦）

最簡單快速的方式是直接使用 LineIcons 官方提供的 CSS CDN 連結。你只需要在 HTML 的 <head> 區段加入以下一行程式碼：

<link rel="stylesheet" href="https://cdn.lineicons.com/4.0/lineicons.css">

使用 CDN 的好處是圖標字型檔案由全球分散式伺服器提供，載入速度通常比放在你自己的主機上更快。如果你的網站搭配了 Cloudflare CDN 或其他快取服務，整體效能還能進一步提升。這對於追求網站速度最佳化的開發者來說，是最省事的方案。

方法二：本機上傳 CSS 檔案

如果你希望完全掌控所有資源的載入，不依賴外部 CDN 服務，也可以選擇將 Web Font 檔案上傳到自己的網站主機。做法是從 LineIcons 下載的 ZIP 壓縮檔中找到 Web Font 資料夾，將其中的 CSS 檔案和字型檔案（WOFF、TTF 等）一起上傳到你網站的目錄中，然後在 HTML 的 <head> 區段加入引用路徑：

<link href="your-project-dir/font-css/LineIcons.css" rel="stylesheet">

這種方式的好處是完全自主，不會因為 CDN 服務中斷而影響圖標顯示。但你需要自己處理快取設定和版本更新的問題。如果你使用的是 Bluehost 或 A2 Hosting 等虛擬主機，確認主機有啟用 GZIP 壓縮可以減少字型檔案的傳輸量。

在 HTML 中使用圖標的語法

引入 CSS 之後，要在 HTML 中顯示圖標非常簡單。LineIcons 的 Web Font 使用  標籤加上對應的 CSS class 名稱。所有 class 名稱都以 lni lni- 開頭，後面接圖標的名稱。例如要顯示一個首頁圖標，語法是：

你也可以透過 CSS 來調整圖標的大小、顏色和其他樣式屬性：

.icon-large { font-size: 48px; color: #333; }

SVG 格式圖標的優勢與使用方式

為什麼選擇 SVG 而非 PNG

SVG（Scalable Vector Graphics）是一種基於 XML 的向量圖形格式，跟傳統的 PNG 或 JPG 點陣圖相比，SVG 有幾個關鍵優勢：放大縮小永遠不會失真模糊、檔案體積通常更小、可以透過 CSS 控制顏色和動畫、在 Retina 高解析度螢幕上依然銳利。這些特性讓 SVG 成為網頁圖標的首選格式。

如果你還在猶豫圖片格式的選擇，可以參考免費線上圖片格式轉換工具，在不同格式之間快速轉換和比較效果。若想進一步壓縮 SVG 檔案大小，Compressor.io 這類圖片壓縮工具也很好用。

SVG 圖標在網頁中的三種使用方式

img 標籤引入：最簡單的方式，像普通圖片一樣使用 <img src="icon.svg" alt="描述">。適合不需要動態改變樣式的場景。
inline SVG 直接嵌入：將 SVG 程式碼直接貼到 HTML 中，可以用 CSS 控制 fill 顏色、stroke 粗細等屬性。這種方式最靈活，但會增加 HTML 檔案的大小。
CSS background-image：將 SVG 設為元素的背景圖片，搭配 background-size 控制顯示尺寸。適合用於裝飾性圖標。

使用 SVGOMG 等工具可以在嵌入之前先壓縮和最佳化 SVG 程式碼，移除不必要的 metadata，減少檔案體積。對於需要大量使用 SVG 圖標的專案，這個步驟能夠明顯提升網站載入速度。

LineIcons 在 WordPress 網站中的應用

透過 CDN 在 WordPress 佈景主題中載入

在 WordPress 網站中使用 LineIcons 的 Web Font 格式，最推薦的做法是透過佈景主題的 functions.php 檔案引入 CDN 資源。使用 wp_enqueue_style 函式來註冊和載入外部 CSS，這樣做符合 WordPress 的最佳實踐，也能搭配各種快取外掛正確處理資源載入順序。

在 functions.php 中加入以下程式碼片段：

function enqueue_lineicons() { wp_enqueue_style('lineicons', 'https://cdn.lineicons.com/4.0/lineicons.css'); } add_action('wp_enqueue_scripts', 'enqueue_lineicons');

在頁面編輯器中使用 LineIcons

載入 CSS 之後，你就可以在 WordPress 的各種編輯環境中使用 LineIcons。在 Gutenberg 編輯器中，加入一個「自訂 HTML」區塊，輸入  就能顯示圖標。如果你使用的是頁面編輯器如 Elementor，可以在 HTML 元件中直接插入相同的程式碼。

對於更進階的使用情境，你也能在佈景主題的範本檔案中直接加入圖標，用來取代導航選單的文字按鈕，或是當作文章列表的分類標記，讓整體介面更加精緻。如果你使用的是高品質的 WordPress 佈景主題，很多已經內建了圖標字型的支援，只需要切換 class 名稱就能替換成 LineIcons 的風格。

網站效能最佳化建議

使用 Web Font 圖標時，效能是一個需要留意的面向。幾個建議：第一，優先使用 CDN 載入，善用 HTTP/2 的多工載入特性。第二，設定適當的快取標頭，讓瀏覽器快取字型檔案。第三，搭配 GZIP 壓縮來減少 CSS 和字型檔案的傳輸量。如果你的網站使用 Cloudflare 這類 CDN 服務，可以啟用自動最佳化功能來進一步提升效能。

另一個常見做法是只載入你實際使用的圖標子集，而非整個字型檔案。透過 IcoMoon App 這類工具，你可以從 LineIcons 的 SVG 檔案中挑選需要的圖標，產生一個精簡版的自訂字型檔，大幅減少檔案大小。

LineIcons 與其他免費圖標庫的比較

主流免費圖標庫功能比較表格

圖標庫	免費圖標數	授權方式	格式	風格
LineIcons	514（Pro 2000+）	MIT（需署名）	SVG、Web Font、AI	線形
Feather Icons	287+	MIT	SVG	線形極簡
Heroicons	300+	MIT	SVG	線形/實心
Flaticon	數萬+	需署名	PNG、SVG、EPS	多元風格
Icons8	數千+	需署名	PNG、SVG、Font	多種風格
Remix Icon	2000+	Apache 2.0	SVG、Web Font	線形/實心
Ionicons	1300+	MIT	SVG、Web Font	線形/實心/銳利
Tabler Icons	558+	MIT	SVG	線形

各圖標庫的適用場景分析

選擇圖標庫時，最重要的考量不是哪個庫的圖標數量最多，而是哪個庫的風格最符合你的專案需求。

Feather Icons 和 Heroicons.dev 適合追求極簡美學的專案，圖標數量雖然不多但每個都經過精心設計。Flaticon 和 Icons8 則提供了大量且多元風格的選擇，適合需要豐富圖標變化的設計師。LineIcons 的定位在於提供一套風格統一且數量充足的線形圖標，對於 SaaS 產品、科技部落格或現代風格的網站來說，是非常理想的選擇。

如果你需要中文相關的設計資源，IconPark 由位元組跳動開發，提供 1287+ 個高品質圖標，支援線上客製化外觀。而 CSS.GG 則提供了 700+ 個開源圖標，支援多種格式下載。對於需要大量品牌圖標的使用者，Simple Icons 收錄了大量知名品牌的 SVG 圖標，可以免費商用。

開發者角度來看，Octicons（GitHub 官方出品）和 Radix Icons 都是非常優秀的開源選擇。iconmonstr 則提供了 4496+ 個 CC0 授權的圖標，完全免費且無需署名。如果你還想找更多選擇，可以參考 FindIcons 這個全球最大的圖示搜尋引擎，一次搜尋多個圖標庫的資源。

設計師與開發者的圖標使用最佳實踐

保持圖標風格一致性

一個常見的設計錯誤是在同一個專案中混用來自不同圖標庫的圖標。每個圖標庫都有自己獨特的設計語言，包括不同的線條粗細、圓角大小和視覺比例。混用會讓介面看起來不協調。建議在專案初期就選定一個主要的圖標庫，盡量不要混搭。如果確實需要補充特定圖標，也要挑選風格相近的替代方案。

這個原則也適用於 Iconhub、Iconstore、Emblemicons 這類提供多種圖標風格的平台，在同一個專案中使用時也應該保持一致的視覺語言。

尺寸、間距與色彩規範

圖標的尺寸設定應該遵循 4px 或 8px 的倍數原則，常見的標準尺寸為 16px、20px、24px、32px 和 48px。圖標周圍要保留適當的留白空間，通常建議圖標本身佔據 80% 的空間，周圍保留 10% 的留白。色彩方面，圖標預設使用單色即可，需要強調時可以搭配品牌主色或語意色彩（成功綠、警告黃、錯誤紅）。

如果你的專案需要調色盤靈感，Color Palette Generator 是一個好用的免費調色盤產生器。Alwane 則可以幫你分析任何網站的色碼使用情況，快速取得色彩搭配參考。

無障礙設計考量

圖標在網頁中的無障礙性經常被忽略。當圖標具有功能含義時（例如一個垃圾桶圖標代表刪除），必須加上 aria-label 屬性來提供替代文字，讓使用螢幕閱讀器的使用者能理解圖標的用途。純裝飾性的圖標則應該加上 role="presentation" 或 aria-hidden="true"，讓輔助工具跳過它們。

圖標與文字的對比度也要注意，特別是淺色圖標放在淺色背景上的情況。WCAG 2.1 建議圖標與背景的對比度至少達到 3:1。這些細節看似不起眼，但對於提升網站的整體使用者體驗和 SEO 表現都有正面影響。

LineIcons 常見問題 FAQ

LineIcons 免費版可以用於商業用途嗎？

可以。LineIcons 的 Basic Free 方案允許將圖標使用於商業用途，唯一的條件是在你的專案或網站中附上署名，標註圖標來源為 LineIcons。如果你不希望署名，則需要升級到 Pro 方案。

LineIcons Basic Free 需要署名嗎？如何署名？

需要。Basic Free 方案要求在使用圖標的地方附上署名。最常見的署名方式是在網站的頁尾或關於頁面加入一行文字，例如「Icons by LineIcons」，並連結到 LineIcons 官方網站。Pro 方案的使用者則無此要求。

LineIcons 支援哪些圖標格式？

LineIcons 支援三種主要格式：SVG 向量檔（Basic Free 和 Pro 都提供）、Web Font 字型檔（CSS + WOFF/TTF，Basic Free 和 Pro 都提供），以及 AI 原始檔（僅 Pro 方案提供）。SVG 適合大多數網頁使用場景，Web Font 適合需要用 CSS class 呼叫圖標的開發流程，AI 檔則是設計師深度客製化的首選。

LineIcons 和 Font Awesome 哪個比較好？

兩者各有優勢。Font Awesome 提供更多的圖標數量和更成熟的生態系統，適合需要大量圖標且重視社群支援的專案。LineIcons 則專注於線形風格，圖標設計更統一、更現代，適合追求極簡美學的 SaaS 產品和科技網站。如果你只需要線形圖標，LineIcons 的學習曲線更平緩，使用體驗也更輕量。

如何在 WordPress 中使用 LineIcons？

在 WordPress 中使用 LineIcons 有兩個步驟：第一步是載入 CSS，透過佈景主題的 functions.php 使用 wp_enqueue_style 引入 CDN 連結；第二步是在編輯器中使用「自訂 HTML」區塊，插入  的語法即可顯示圖標。詳細教學可以參考本文前面的 WordPress 應用章節。

LineIcons Pro 的價格是多少？

LineIcons Pro 的定價可能隨時間調整，建議直接前往官方網站查看最新的價格資訊。Pro 方案通常採一次買斷的模式，取得後即可永久使用所有圖標，包含未來的更新。

LineIcons 圖標可以在 React 或 Vue 專案中使用嗎？

可以。LineIcons 的 SVG 格式可以直接匯入到 React 或 Vue 專案中，作為 SVG 元件使用。Web Font 格式也可以透過引入 CSS 的方式在這些前端框架中使用。對於 React 專案，你可以將 SVG 檔案轉成 React 元件；對於 Vue 專案，則可以直接在 template 中使用 inline SVG 或 Web Font class。

如果你正在尋找更多設計資源和開發工具，TechMoon 上有大量相關的免費資源介紹，從圖標庫、免費圖庫到線上設計工具都有完整收錄。