Emblemicons - 免費開源圖標 Icons，高達 1000+ 個產品開發、設計與業務展示的圖標樣式免費下載

Facebook Line Messenger Telegram

Emblemicons 是一個免費開源的圖標資源庫，收錄超過 1,000 個常用圖標，涵蓋產品開發、UI 設計、業務簡報與學術專案等場景。每個圖標提供 6 種尺寸與 PNG、JPG、PDF、SVG 等 4 種格式，採用 MIT 授權可免費商用且無需署名。

如果你正在尋找一款能直接拿來做產品介面、商業簡報或開源專案的圖標集，Emblemicons 的 MIT 授權與多尺寸多格式設計能省下不少授權費與改圖時間。不過官方網站 emblemicons.in 已經下線，目前需要透過 Figma Community 或第三方平台取得圖標。

在進一步了解之前，先說明 Emblemicons 與其他免費圖標庫的定位差異。像是 CSS.GG 提供純 CSS 技術實作的圖標、Tabler Icons 收錄超過 5,500 個高品質 SVG 圖標、Icons8 的動態圖標資源，而 Emblemicons 的特色在於每個圖標都有 6 種固定尺寸輸出，方便直接用於不同解析度的設計稿與開發環境。

官方網站：https://emblemicons.in/（目前已下線）
Figma Community：Emblemicons Figma 檔案
授權方式：MIT License

Emblemicons 是什麼？1000+ 免費開源 MIT 授權圖標庫

Emblemicons 是一個以產品設計為核心的免費開源圖標庫，收錄超過 1,000 個在日常產品開發、UI 設計與業務展示中最常使用的圖標。它的設計目標很明確：提供一套通用、高品質且無版權疑慮的圖標，讓設計師與開發者不需要花時間處理授權問題就能直接使用。

從圖標涵蓋範圍來看，Emblemicons 的圖標類別涵蓋了介面操作（箭頭、選單、關閉按鈕）、商務展示（圖表、文件、團隊）、開發工具（程式碼、終端機、分支）以及學術專案（書本、實驗、畢業帽）等場景。對於需要快速建立產品原型或簡報素材的團隊來說，這套圖標庫提供了一個開箱即用的選擇。

Emblemicons 的核心優勢在於它的授權彈性。所有圖標採用 MIT License 釋出，這意味著你可以將圖標用於個人專案、商業產品、客戶交付甚至再製修改，完全不需要付費或署名來源。這在免費圖標資源中屬於相當寬鬆的授權條款。

要特別說明的是，Emblemicons 的原始官方網站 emblemicons.in 已經下線（域名停放出售），但圖標資源本身仍然可以透過多個管道取得。最直接的方式是前往 Figma Community 上的 Emblemicons 檔案，一鍵複製完整的圖標庫到你的 Figma 帳號中使用。你也可以透過第三方 SVG 資源網站（例如 SVG Repo）搜尋到部分圖標的獨立下載連結。

Emblemicons 搜尋與瀏覽所有圖標 Icons — Emblemicons 圖標搜尋與瀏覽介面

Emblemicons 核心特色與技術規格

Emblemicons 的圖標設計規格相當完整，每個圖標都提供了固定的輸出組合，讓使用者在不同場景下能直接取用合適的尺寸和格式，不需要額外透過圖片格式轉換工具或向量圖轉換服務處理。

6 種圖標尺寸

12px：適合極小尺寸的介面元素，例如狀態列或麵包屑導航
18px：常用於表格內的操作按鈕或清單項目
24px：標準介面圖標尺寸，適合工具列與導覽列
36px：中等尺寸，適合卡片元件或功能介紹區塊
48px：較大展示尺寸，適合功能列表或圖標按鈕
72px：最大輸出尺寸，適合簡報投影片或大型展示區域

4 種下載格式

PNG：點陣格式，支援透明背景，適合簡報與文件使用
JPG：點陣格式，檔案較小但不支援透明，適合背景圖使用
PDF：文件格式，可嵌入印刷品或文件中保持向量品質
SVG：向量格式，可無限縮放不失真，適合網頁與設計稿使用

每個圖標提供 6 種尺寸與 4 種格式可供下載 — 每個圖標提供 6 種尺寸與 4 種格式

除了檔案下載之外，Emblemicons 也提供 SVG 的 HTML 程式碼，讓你可以直接複製貼到 HTML 原始碼中顯示圖標，不需要額外載入圖片檔案。這對於前端開發者來說非常實用，特別是需要快速在網頁中加入圖標的場合。如果需要對 SVG 檔案做進一步壓縮優化，可以使用 SVGOMG 工具來減少 SVG 檔案大小。

提供 SVG HTML Code 可直接複製貼上至網頁顯示圖標 — SVG HTML Code 直接複製貼上使用

如果你也需要快速產生網站或行動應用程式的 favicon 圖標，可以搭配 Iconpie 網站圖標產生器或 SVG Favicon Maker 將圖標轉換為對應的 favicon 格式。

MIT 授權條款詳解：商用、修改與再發布須知

Emblemicons 的所有圖標採用 MIT License 釋出。MIT 授權是目前最廣泛使用的開源授權條款之一，以簡潔和寬鬆著稱。以下是對實際使用者的重點說明。

MIT 授權允許的行為

免費下載與使用所有圖標
將圖標用於商業產品、付費服務或客戶專案
修改圖標的外觀、尺寸、顏色或樣式
將修改後的圖標重新發布或嵌入自己的作品中
將圖標包含在付費的設計模板或 UI 套件中銷售

MIT 授權的唯一要求

對於台灣的設計師與開發者來說，MIT 授權的好處是不需要擔心署名方式或使用次數限制。你可以放心地把 Emblemicons 圖標用在客戶的商業專案中，只要在專案的授權說明中保留 MIT 條款副本即可。如果對授權還有疑慮，建議直接參考 MIT License 原文。

官方網站下線後如何取得 Emblemicons 圖標

截至 2026 年 5 月，Emblemicons 的原始官方網站 emblemicons.in 已經下線，域名處於停放出售狀態。這代表你無法再透過官網的搜尋與瀏覽功能來下載圖標。不過，圖標資源本身仍然可以透過以下幾個管道取得。

透過 Figma Community 取得完整圖標庫

最推薦的方式是前往 Figma Community 上的 Emblemicons 頁面，點擊「Open in Figma」即可將完整圖標庫複製到你的 Figma 帳號中。這個管道目前仍然有效，且包含全部 1,000+ 個圖標，每個圖標都可以在 Figma 中直接調整尺寸、顏色與樣式後匯出使用。

透過第三方 SVG 資源平台取得個別圖標

部分第三方 SVG 圖標預覽網站（例如 svgviewer.dev）仍然收錄了 Emblemicons 的圖標資料。你可以搜尋「emblemicons」加上圖標名稱來找到特定圖標的 SVG 檔案並下載。這個方式適合只需要少量圖標的使用者。

透過 npm 套件安裝使用

如果你是前端開發者，可以透過 npm 安裝 @svg-icons/emblemicons 套件，將圖標以 SVG 格式匯入到你的 Node.js 專案中。這個套件收錄在 @svg-icons 組織下，提供了經過優化的 SVG 檔案與 JSON 中繼資料。對於 Laravel 使用者，也有社群維護的 blade-emblemicons 套件，可在 Blade 模板中直接使用 Emblemicons 圖標。

如果你需要更多開源圖標的替代選擇，可以參考 Optimizilla 圖片壓縮服務、Remix Icon 收錄 2,000+ 個開源圖標、PngPix 透明背景圖片素材庫，以及 IconPark 由字節跳動出品的 1,287+ 個客製化圖標。

Emblemicons 在 Figma 中的使用教學

Figma 是目前最多設計團隊使用的介面設計工具，Emblemicons 提供了完整的 Figma Community 檔案，讓你可以直接在 Figma 中使用全部圖標。以下是操作步驟。

步驟一：複製圖標庫到 Figma

前往 Figma Community 的 Emblemicons 頁面，點擊右上角的「Open in Figma」按鈕。系統會自動將完整圖標庫以新檔案的形式加入你的 Figma 工作區。如果搭配 Free Deca UI Kit 或 UI Design Daily 每日設計資源一起使用，可以快速建立完整的介面設計。

步驟二：在設計稿中使用圖標

複製完成後，你可以在 Figma 的檔案列表中找到 Emblemicons 檔案。打開後會看到所有圖標按分類排列，直接將需要的圖標複製貼到你的設計稿中即可。由於圖標是向量格式，你可以自由調整大小、顏色與樣式而不會失真。如果需要調整圖標顏色來配合品牌色，可以搭配 Color Palette Generator 調色盤產生器或 PaletteMaker 配色工具來找到適合的配色方案。

步驟三：匯出圖標用於開發

在 Figma 中選取圖標後，可以在右側面板設定匯出格式（SVG、PNG 等）與尺寸，然後點擊匯出按鈕即可下載。匯出的 SVG 檔案可以直接交給前端開發者嵌入網頁使用。如果你需要將圖標套用在不同材質的展示場景中，Clay Mockups 提供了各種免費的 3D 樣機素材可以搭配使用。而 Adobe Creative Cloud Express 與 Pixelcut Image Recolor 則提供了額外的線上設計與調色工具。

SVG HTML Code 嵌入網頁實作教學

Emblemicons 的一個實用特色是提供 SVG 的 HTML 程式碼，讓你可以直接將圖標嵌入網頁中，不需要載入額外的圖片檔案或圖標字體。以下說明具體操作方式。

直接嵌入 SVG 程式碼

在 Emblemicons 圖標頁面下方找到「HTML Code」區塊，複製 SVG 標籤程式碼後貼到你的 HTML 檔案中。圖標會以行內 SVG 的方式直接顯示在網頁上。你可以透過 CSS 的 color 或 fill 屬性來改變圖標顏色，也可以用 width 和 height 調整顯示尺寸。

行內 SVG 的好處是不需要額外的 HTTP 請求，瀏覽器可以直接渲染。不過如果你的頁面使用了大量圖標，建議搭配 Compressor.io 圖片壓縮工具或 ShortPixel 壓縮服務來優化 SVG 檔案大小，也可以將 SVG 檔案做進一步壓縮優化。對於需要將圖片轉換為 WebP 格式以提升載入速度的網站，可以參考 WebP 在 WordPress 中的使用教學。

在 WordPress 中使用 SVG 圖標

在 WordPress 的 Gutenberg 編輯器中，你可以加入「自訂 HTML」區塊，然後將 SVG 程式碼貼入其中。圖標會在文章或頁面中直接顯示。如果你的佈景主題有額外的 CSS 樣式設定，可以用 CSS Gradient、CSS Background Patterns 或 CSS box-shadow 範例為圖標加上漸層、背景或陰影效果。若需要波浪造型的裝飾元素，SVG Waves 可以快速產生可客製化的波浪 SVG 圖片。

對於注重網站效能的 WordPress 網站管理員，建議搭配 WordPress 緩存快取外掛與 Cloudflare CDN 來確保頁面載入速度。同時可以使用 WordPress SEO 外掛來確保圖標的 alt 文字與結構化資料正確設定，提升搜尋引擎的可見度。

Emblemicons 與其他免費圖標庫比較

市面上有許多免費的開源圖標庫可供選擇，以下將 Emblemicons 與幾款主流圖標庫進行比較，幫助你根據專案需求做出選擇。

圖標庫	圖標數量	授權	格式	尺寸輸出	特色
Emblemicons	1,000+	MIT	PNG, JPG, PDF, SVG	6 種固定尺寸	多尺寸多格式直接下載
Tabler Icons	5,500+	MIT	SVG, PNG, React	可自訂	數量最多，線上客製化
Heroicons	300+	MIT	SVG	可自訂	Tailwind 官方出品
CSS.GG	700+	MIT	CSS, SVG, TSX, Figma, XD	可自訂	純 CSS 技術實作
Ionicons	1,200+	MIT	SVG, Web Component	可自訂	跨平台支援 iOS/Android
Feather Icons	200+	MIT	SVG	可自訂	極簡風格，輕量
Octicons	500+	MIT	SVG, Ruby, Rails	可自訂	GitHub 官方出品
Iconshock	200 萬+	免費/付費	PNG, SVG, ICO	可自訂	數量龐大，付費可商用

Emblemicons 與主流免費圖標庫比較

從比較表格可以看出，Emblemicons 的優勢在於每個圖標都提供 6 種固定尺寸的現成輸出，對於需要快速取得不同大小圖標的使用者來說很方便。但如果你的專案需要更大的圖標數量或更靈活的客製化能力，Tabler Icons 的 5,500+ 圖標量與線上客製化功能會是更好的選擇。而 CSS.GG 的純 CSS 技術實作則適合不需要載入額外字體或圖片的前端專案。

如果你需要的是大量圖標資源而不是單一圖標庫，Brusheezy Photoshop 筆刷設計資源、LineIcons 提供超過 2,000 個線形圖標、FindIcons 全球最大圖示搜尋引擎，都是值得搭配使用的資源。

Emblemicons 常見問題 FAQ

Emblemicons 官方網站還能用嗎？

截至 2026 年 5 月，Emblemicons 的官方網站 emblemicons.in 已經下線，域名處於停放出售狀態。你無法再透過官網瀏覽或下載圖標。但圖標資源本身仍可透過 Figma Community、第三方 SVG 資源網站以及 npm 套件等管道取得。

Emblemicons 圖標可以商用嗎？

可以。Emblemicons 的所有圖標採用 MIT License 釋出，允許免費商業使用、修改與再發布。你只需要在專案中保留 MIT 授權條款副本即可，無需付費或署名來源。這與 CC0 授權（例如 Iconstore）不同，MIT 授權要求保留聲明但提供了更明確的法律保護。

如何在 WordPress 網站中使用 Emblemicons 圖標？

有兩種方式。第一種是從 Figma Community 取得圖標後匯出 SVG 檔案，再上傳到 WordPress 媒體庫中使用。第二種是複製 SVG HTML Code，在 Gutenberg 編輯器中加入「自訂 HTML」區塊並貼上程式碼。如果你的網站使用大量圖標，建議搭配 WordPress 緩存快取外掛來維持頁面載入效能，並參考 WordPress 網站加速技巧進一步優化。選擇一個穩定快速的主機也很重要，可以參考 WordPress 虛擬主機推薦。

Emblemicons 與 Font Awesome 有什麼不同？

最大的差異在於授權與使用方式。Emblemicons 採用 MIT 授權，完全免費且可商用；Font Awesome 的免費版採用 CC BY 4.0 授權，需要署名才能商用，進階功能則需要付費訂閱 Pro 方案。在技術層面，Emblemicons 提供獨立的 SVG 檔案與 HTML Code，而 Font Awesome 主要透過字體檔案或 CDN 引入。如果你需要完全免費無限制的圖標資源，Emblemicons 與其他同樣採用 MIT 授權的圖標庫（如 Tabler Icons、CSS.GG）會是更適合的選擇。

如何在 Figma 中取得 Emblemicons 圖標？

前往 Figma Community 搜尋「Emblemicons」或直接開啟 Emblemicons Figma 檔案，點擊「Open in Figma」按鈕即可將完整圖標庫複製到你的 Figma 帳號。複製完成後可以在 Figma 檔案列表中找到，所有 1,000+ 個圖標都可以直接在設計稿中使用，支援調整尺寸、顏色與樣式後匯出為 SVG 或 PNG 格式。

Emblemicons 重點整理

1,000+ 個常用圖標，MIT 授權免費商用
6 種尺寸（12px-72px）× 4 種格式（PNG/JPG/PDF/SVG）
支援 Figma Community 一鍵複製使用
提供 SVG HTML Code 直接嵌入網頁
官方網站已下線，透過 Figma 或 npm 取得
無需署名，適合商業產品與客戶專案

Emblemicons – 免費開源圖標 Icons，高達 1000+ 個產品開發、設計與業務展示的圖標樣式免費下載

Emblemicons 是什麼？1000+ 免費開源 MIT 授權圖標庫