IcoMoon App - 5500+ 免費線上圖標資源網站，提供 SVG 與 PNG 格式，並可自定義上傳圖標產生 Font 字體樣式

Facebook Line Messenger Telegram

IcoMoon App 是一個免費的線上 icon font 產生器，內建 5500+ 個免費圖標，支援匯入自己的 SVG 圖標，一鍵產生 icon font、SVG sprite、PNG 等多種格式。跟一般圖標下載網站不同，IcoMoon 的核心功能是「把圖標變成字體」，讓你可以像使用文字一樣在網站中顯示圖標。所有匯入與產生作業都在瀏覽器本地完成，你的 SVG 不會被上傳到任何伺服器。

在 TechMoon 之前也介紹過許多實用的免費圖標資源，像是 Flaticon 圖標庫、Feather Icons、Emblemicons、LineIcons、Radix Icons、SVG Favicon Maker 等，每一個的定位和適用情境都不同。如果你正在找的是「能建立自訂圖標字體的工具」，IcoMoon App 會是目前功能最完整的免費選擇。

網站名稱：IcoMoon App — Icon Font, SVG, PDF & PNG Generator
網站網址：https://icomoon.io/app/#/select

IcoMoon App 是什麼？跟其他圖標網站有什麼不同

IcoMoon App 不只是一個圖標下載網站。它是一個「icon font 產生器」，讓你從零開始建立一套自訂的圖標字體。這個定位跟 Flaticon、Icons8、Findicons 或 Iconmonstr 這類以「下載單張圖標」為主的網站有本質上的差異。

在 IcoMoon App 裡，你不是只下載一張 PNG 或 SVG 圖片就走。你會先挑選需要的圖標（從內建圖標庫或自己上傳的 SVG），然後讓 IcoMoon 把這些圖標打包成一套字體檔。這套字體包含了 SVG、EOT、WOFF、TTF 四種格式，以及對應的 CSS 樣式表，你只要在網頁中載入這個 CSS，就能用 class 名稱來顯示每一個圖標，操作方式就跟使用 Icons8 免費圖標素材庫或 Font Awesome 差不多，但圖標內容完全由你自己決定。

Icon Font 是什麼？為什麼要用

Icon font 是一種把圖標當作「字元」嵌入字體檔的技術。跟直接使用 PNG 圖片相比，icon font 有幾個好處：檔案體積小（只包含你選的圖標，不會載入整包數千個圖標）、向量縮放不失真、可以用 CSS 改變顏色和大小、跟網站效能優化的方向一致。缺點是 icon font 只支援單色圖標，如果你的圖標需要多色或複雜漸層，用 inline SVG 會比較適合。

IcoMoon App 的五個核心特色

5500+ 免費圖標庫：IcoMoon 內建多個高品質圖標集，所有圖標都經過格線最佳化，適合用於 icon font 產生。
自訂匯入 SVG：可以上傳自己的 SVG 圖標，轉成字體後用在專案中，支援基本的編輯操作（移動、鏡像、旋轉）。
隱私本地處理：所有匯入、編輯與字體產生的動作都在瀏覽器本地完成，你的 SVG 不會被上傳到 IcoMoon 的伺服器。
離線可用：頁面載入完成後，即使斷開網路連線，仍可匯入圖標並產生字體。
MIT 授權：IcoMoon 產生的 HTML、CSS、JS 程式碼檔案都是 MIT 授權，可以自由使用於個人或商業專案。

IcoMoon App 授權方式與隱私保護

IcoMoon 的授權分成兩個層次：工具本身產生的程式碼檔案，以及圖標素材的授權。這兩者不同，需要分開看。

程式碼檔案：MIT 授權

IcoMoon App 產生的所有 HTML、CSS、JavaScript 檔案都採用 MIT 授權。MIT 是最寬鬆的開源授權之一，意思是你可以自由使用、修改、分發這些檔案，用於個人或商業專案都沒有問題，唯一的要求是保留授權聲明。這對於要在 WordPress 網站或商業專案中使用的開發者來說，是一個很明確且安心的授權條件。

圖標素材：依各圖標集而定

IcoMoon 內建圖標庫中的圖標，授權方式由各個圖標集的作者決定。大部分免費圖標集採用 CC0（公眾領域貢獻）授權，表示可以自由使用於任何用途，不需署名。但也有部分圖標集有特定的授權條件，你可以在 IcoMoon App 的 Library 頁面中查看每個圖標集的授權說明。如果你使用的是付費圖標集，授權會依購買的方案而定。

隱私保護：一切在本機處理

根據 IcoMoon 官方說明，IcoMoon App 中的大部分操作都在瀏覽器本地完成。當你匯入 SVG 圖片或字體檔、編輯圖標、產生字體時，這些動作都不會把你的檔案上傳到 IcoMoon 的伺服器。唯一例外是如果你選擇使用 IcoMoon 的付費託管服務或帳號自動儲存功能，資料才會傳送到伺服器。對於重視設計檔案隱私的開發者與設計師來說，這個機制讓 IcoMoon 成為一個相對安全的選擇，跟 Freepik 免費向量圖庫這類需要上傳素材的雲端服務形成對比。

離線使用能力

IcoMoon App 在頁面完全載入後，就可以在離線狀態下使用。你可以先在有網路的環境開啟 IcoMoon App，等到 Generate Font 和 Generate SVG 頁面都載入完成後，關閉網路連線，就能繼續匯入圖標並產生字體檔。這個特性在網路不穩定或需要離線工作的場景下非常實用，也再次證明了所有關鍵操作都是在瀏覽器端完成的。

IcoMoon App 支援哪些格式

IcoMoon App 支援的輸出格式涵蓋了網頁開發與設計工具的主要需求。以下表格整理每種格式的用途與適用場景。

格式	輸出類型	主要用途
SVG	向量圖	網頁 inline SVG、設計工具
EOT	字體	舊版 IE 瀏覽器相容
WOFF	字體	現代瀏覽器網頁字體
TTF	字體	系統安裝、廣泛相容
PNG	點陣圖	簡報、社群媒體、文件
PDF	文件	印刷、文件嵌入
CSH	Photoshop	Adobe Photoshop 自訂形狀
XAML	程式碼	Windows 應用程式
Polymer	元件	Web Components
CSS Sprite	圖片 + CSS	網頁精靈圖

Icon Font 還是 Inline SVG？怎麼選

IcoMoon 同時支援 icon font 和 inline SVG 兩種輸出方式，選擇取決於你的使用情境。如果你只需要單色圖標，而且希望用 CSS 來控制顏色和大小，icon font 是最簡單的方式。如果你需要多色圖標、漸層效果，或者需要更精細的 CSS 動畫控制，inline SVG 會更適合。

從效能角度來看，icon font 透過 @font-face 載入後會被瀏覽器快取，後續頁面載入不需要重新下載，對網站速度測試很友善。而 inline SVG 雖然每個圖標都直接寫在 HTML 裡，但可以避免額外的 HTTP 請求。如果你使用 AnyWebP 格式轉換工具處理網站圖片，icon font 的體積通常比點陣圖還小。搭配 SVGO（SVG 壓縮工具 SVGOMG）可以進一步壓縮 inline SVG 的檔案大小。如果你的主機有開啟 Gzip 壓縮，字體檔和 SVG 的傳輸體積還能再縮小。對於線上圖片壓縮需求，icon font 通常不需要額外處理，因為它本身就是向量格式。

如何使用 IcoMoon App 產生 Icon Font（操作教學）

以下步驟帶你從零開始，在 IcoMoon App 中選取圖標並產生可用的 icon font 檔案。

步驟 1：進入 IcoMoon App 並瀏覽圖標庫

開啟 IcoMoon App 後，你會看到預設載入的免費圖標集。頁面上方有 Library 按鈕，點進去可以瀏覽並新增更多圖標集。IcoMoon 提供的圖標集都經過官方篩選，品質有一定水準，多數採用 CC0 授權。你也可以在這裡找到付費圖標集，但免費圖標集的數量已經很充足。

IcoMoon App 添加多個不同的圖標庫來源 — 在 Library 頁面中添加不同的圖標庫來源

步驟 2：選取需要的圖標

回到 Select 頁面後，逐一點擊你需要的圖標。被選取的圖標會變成高亮狀態，頁面右下角會顯示目前已選取的數量。你可以從不同的圖標集中混合選取，IcoMoon 會把所有選取的圖標打包成一套字體。

步驟 3：產生 Font 或 SVG

選取完成後，頁面右下角會出現兩個按鈕：「Generate SVG & More」和「Generate Font」。前者會產生 inline SVG、PNG、PDF 等格式，後者會產生 icon font 字體檔（包含 SVG、EOT、WOFF、TTF 四種格式）。根據你的需求選擇其中一個。

IcoMoon App 產生 SVG 與 Font 字體 — 點選 Generate SVG & More 或 Generate Font 產生檔案

步驟 4：下載字體檔案與程式碼

進入 Generate Font 頁面後，你可以點選每個圖標下方的「Get Code」來查看對應的 HTML 與 CSS 程式碼。程式碼包含 class 名稱和 Unicode 碼位，你可以直接複製貼到專案中使用。點選頁面右下角的「Download」按鈕，就會下載一個 ZIP 壓縮檔，裡面包含完整的字體檔（SVG、EOT、WOFF、TTF）、CSS 樣式表和一個示範用的 HTML 檔案。

IcoMoon App 下載 SVG 與 HTML 程式碼 — 複製 SVG HTML 程式碼或下載完整字體檔案

如果你使用「Generate SVG & More」路線，也可以在該頁面取得 inline SVG 的 HTML 程式碼。IcoMoon 產生的 inline SVG 使用 <use> 標籤，方便你用 CSS.gg 圖標庫的方式進行樣式控制。左下角的「Download」按鈕則會下載選取圖標的 SVG 與 PNG 格式檔案。

IcoMoon App Quick Usage CSS 樣式表 — Quick Usage 功能可產生臨時 CSS 樣式表連結

Quick Usage 功能可以產生一個臨時的 CSS 樣式表連結，用於快速測試。但要注意，這個臨時連結的有效期限只有 24 小時，超過時間就會自動失效。如果需要長期使用，建議下載檔案後自行託管到自己的主機或 Cloudflare CDN。

上傳自訂 SVG 產生專屬圖標字體

IcoMoon App 最大的特色之一就是可以匯入你自己的 SVG 圖標。這是大部分純圖標下載網站做不到的功能，也是 IcoMoon 作為「icon font 產生器」而非「圖標庫」的核心價值所在。

匯入自訂圖標的步驟

在 IcoMoon App 的 Select 頁面中，點選左上角的「Import Icons」按鈕，就可以上傳 SVG 或 JSON 格式的檔案。上傳後，你的自訂圖標會跟內建圖標一起顯示在選取列表中。你也可以從 SVG Repo 向量圖庫、SVG Waves 波浪產生器或其他免費向量插畫資源 PixelTrue 網站下載 SVG 檔案後匯入。

IcoMoon App 上傳自訂圖標 — 可上傳自訂 SVG 圖標並產生字體檔案

匯入後，IcoMoon 提供基本的編輯功能：移動、鏡像、旋轉。這些操作同樣在瀏覽器本地完成，你的原始 SVG 不會被傳送到外部伺服器。編輯完成後，按照前面介紹的步驟產生 Font 或 SVG 檔案即可。

Ligatures（連字）功能

IcoMoon 支援 Ligatures 功能，讓你為每個圖標指定一個或多個文字名稱。產生字體後，只要在 HTML 中寫入這個文字名稱，瀏覽器就會自動將它渲染成對應的圖標。這對於需要語意化 HTML 的專案來說很方便，因為搜尋引擎和螢幕閱讀器可以讀到文字內容，但使用者看到的是圖標。IcoMoon 也支援 Unicode Supplementary Private Use Area，讓你可以安全地分配碼位而不會跟正常文字衝突。

如果你需要設計自訂的圖標或標誌，可以搭配 DesignEvo 線上標誌設計工具或 DesignCap 線上設計工具先產生圖標素材，再匯出 SVG 後上傳到 IcoMoon 進行字體轉換。也可以用 Formito 免費字體標誌產生器產生文字型標誌後再轉成 SVG 匯入。若需要色彩相關的靈感，Colorion 配色產生器和 Coolors 配色工具都是不錯的參考。

IcoMoon App 在 WordPress 網站中的整合方式

很多 WordPress 站長會想在網站中使用自訂圖標，但又不想安裝額外的圖標外掛。透過 IcoMoon 產生的 icon font，你可以直接用 CSS 載入，不需要依賴任何 WordPress 外掛。以下是整合的幾個關鍵步驟。

上傳字體檔到主機

從 IcoMoon 下載的 ZIP 檔案解壓縮後，會看到一個 fonts 資料夾，裡面包含 SVG、EOT、WOFF、TTF 四種格式的字體檔。把整個 fonts 資料夾上傳到你的 WordPress 主機，通常放在佈景主題目錄下即可（例如 /wp-content/themes/你的主題/fonts/）。如果你使用的是 Bluehost 主機，可以透過 FTP 或檔案管理器上傳。

載入 CSS 樣式表

IcoMoon 產生的 ZIP 檔案中也包含一個 style.css 檔案，裡面有 @font-face 宣告和每個圖標的 class 名稱。你需要把這個 CSS 檔案引入到 WordPress 中。做法有兩種：直接在佈景主題的 functions.php 中用 wp_enqueue_style 載入，或者把 @font-face 和圖標 class 複製到佈景主題的 style.css 中。載入後，你就可以在文章或頁面中用 HTML 編輯器插入類似 <i class="icon-home"></i> 的標籤來顯示圖標。

效能與 SEO 注意事項

icon font 的載入方式跟一般網頁字體相同，瀏覽器會快取字體檔，後續頁面瀏覽不需要重複下載。如果你的網站有開啟 Gzip 壓縮，字體檔的傳輸體積會更小。IcoMoon 的優勢在於你只包含需要的圖標，所以字體檔通常比 Font Awesome 等整包圖標字體小很多，這對 WordPress 網站速度優化是個正面因素。搭配 WordPress 圖片 WebP 轉換和 WordPress SEO 外掛的設定，整體網站效能可以有更好的表現。

在選擇 WordPress 佈景主題時，有些主題已經內建圖標字體的功能。如果你使用的是支援自訂 CSS 的佈景主題，整合 IcoMoon 字體會很順暢。但要注意，更換佈景主題後需要重新上傳字體檔和 CSS 設定。

IcoMoon App 適合誰？不適合誰？

適合 IcoMoon App 的三種人

前端開發者：需要把多個圖標打包成 icon font，用 @font-face 載入網頁專案。IcoMoon 產生的字體檔乾淨、輕量，CSS class 命名清楚，整合進任何前端框架都很方便。
WordPress 站長與接案者：想幫客戶網站加上自訂圖標，但不想依賴 WordPress 外掛。IcoMoon 可以只選取需要的圖標，產生極小的字體檔，對網站效能友善。
UI/UX 設計師：需要管理一組專案專用的圖標集，並匯出多種格式（SVG、PNG、PDF、CSH）供不同設計工具使用。IcoMoon 支援匯出給 Photoshop 使用的 CSH 格式，也可以產生 PDF 用於文件或列印。

不適合 IcoMoon App 的兩種情境

只需要幾張 PNG 圖標的輕度使用者：如果你只是想找幾個箭頭或社群媒體圖標來放在簡報裡，用 Flaticon、IconPark、Findicons 或 Iconmonstr 直接下載 PNG 會更快。IcoMoon 的操作流程相對多步驟，對只需要一兩張圖的人來說有點殺雞用牛刀。
需要大量多色圖標的設計專案：icon font 只支援單色圖標。如果你的設計需要多色、漸層或複雜的圖標效果，用 Freepik 向量圖庫或 FreeImages 免費圖庫找現成的多色 SVG 圖標會更實際。

替代工具推薦

如果你覺得 IcoMoon 不完全符合需求，以下是一些定位相近的替代方案。需要純圖標下載可以看 Heroicons、Heroicons Dev、Feather Icons、Tabler Icons、Remix Icon、Octicons、Simple Icons、Ionicons、Unicons Solid，這些都是開源免費的圖標庫。如果需要 CSS 相關工具，CSS.gg 圖標庫和 MagicPattern CSS 背景圖案產生器也值得參考。想要動畫圖標則可以試試 Icons8 動畫圖標。需要更多免費設計素材，FreebiesBug 免費設計資源和 FreeIMG 免費圖片素材都是值得收藏的網站。

IcoMoon App 常見問題

IcoMoon App 免費嗎？

IcoMoon App 本身完全免費使用。內建 5500+ 個免費圖標，產生的 HTML、CSS、JS 程式碼都是 MIT 授權。IcoMoon 也提供付費圖標集和付費的雲端儲存功能，但這些是選購項目，不影響免費功能的使用。如果你需要更多圖標素材來源，可以從 Iconshock、IconStore、IconHub、IconPie 等網站找到更多免費圖標來匯入 IcoMoon。

需要註冊帳號嗎？

不需要。IcoMoon App 可以直接在瀏覽器中使用，不需要註冊或登入任何帳號。你的專案資料暫存在瀏覽器的本地儲存中。如果你需要跨裝置同步專案，才需要註冊付費帳號。對於一般開發者來說，下載字體檔後儲存在自己的專案版本控制中就足夠了。

離線可以使用嗎？

可以。IcoMoon App 是一個網頁應用程式，載入完成後可以在離線狀態下使用。建議先在有網路的環境開啟頁面，等到 Generate Font 和 Generate SVG 頁面都載入完成後再斷網操作。這點跟大部分需要在線才能運作的線上工具不同，IcoMoon 的離線能力是一個明確的優勢。

產生的字體檔可以商用嗎？

IcoMoon 產生的程式碼檔案（HTML、CSS、JS）採用 MIT 授權，可以自由用於商業專案。但圖標素材的授權取決於來源圖標集的授權條款。大部分 IcoMoon 內建的免費圖標集是 CC0 授權，商用完全沒有問題。如果你匯入了來自其他網站的 SVG，則需要確認該 SVG 的原始授權。從 CleanPNG 免費去背圖庫、FreeIMG、FreeImages 等網站下載的素材，授權條款可能不同，使用前建議確認。

IcoMoon 和 Font Awesome 有什麼不同？

Font Awesome 是一個封裝好的圖標字體包，提供數千個固定風格的圖標，你只能使用它預設提供的圖標集。IcoMoon 則是一個「產生器」，讓你從各種圖標集中挑選，或者上傳自己的 SVG，打包成一套客製化的字體。如果你需要 Font Awesome 的完整圖標集而不需要客製化，直接使用 Font Awesome 比較省事。如果你需要只包含必要圖標的輕量字體，或需要加入自訂圖標，IcoMoon 是更好的選擇。兩者在網站建置流程中都可以搭配使用。

使用 IcoMoon App 的三個立即下一步

前往 IcoMoon App 選取圖標：開啟 IcoMoon App，從內建圖標庫中選取你需要的圖標，或匯入自己的 SVG 檔案。不需要註冊帳號就能開始操作。
下載字體檔並在本機測試：產生字體後下載 ZIP 檔，解壓縮後打開裡面的 demo.html 確認每個圖標都正確顯示。如果圖標數量或樣式需要調整，回到 IcoMoon App 修改後重新產生即可。
整合進你的 WordPress 或前端專案：把字體檔上傳到主機，用 CSS @font-face 載入，就能在網頁中使用自訂圖標。如果你正在規劃完整的WordPress 架站流程，可以同時考慮購買網域名稱和確認主機的網站速度表現，把圖標字體的整合當作整體效能優化的一環。