Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124

Icons8 網站原本是專門提供免費圖標的免費資源網站,目前在 Icons8 網站當中,除了原本所提供的圖標之外,還多了許多免費的資源,像是高清圖片、向量圖、音樂,而本篇我們就先來介紹 Icons8 網站當中所提供的 Icons 圖標的免費資源。後續再慢慢來介紹 Icons8 所提供的其他有關圖片、向量圖、音樂...等等免費資源。
Icons8 是一個從免費圖標起家的設計資源平台,如今已擴展成為涵蓋圖標、高解析度圖片、向量插圖、音效素材甚至 AI 工具的全方位設計素材網站。對於從事網站架設或 UI 設計的工作者來說,Icons8 提供了超過 13 萬個高品質圖標,支援多達 10 種以上的風格,還內建了強大的線上編輯器,讓你在下載前就能完成顏色、背景、尺寸等各種客製化調整。
這篇文章會從 Icons8 的平台功能、圖標搜尋與下載、線上編輯器操作、嵌入 HTML 方式、授權方案比較、到 WordPress 整合應用,做一次完整而深入的介紹。如果你正在尋找好用的免費圖標平台,或者在比較 Icons8 與Flaticon的差異,這篇應該能幫你做出判斷。
網站名稱:Free Icons – Icons8
網站網址:https://icons8.com/icons
目錄
Icons8 最早成立的時候,定位很單純,就是提供高品質的免費圖標讓設計師和開發者下載使用。但隨著團隊規模擴大、使用者需求越來越多樣化,他們陸續加入了高清圖片(Photos)、向量插圖(Illustrations)、音效素材(Music),以及近幾年很熱門的 AI 生成工具。到現在,Icons8 已經是一個可以滿足「從圖標到完整視覺素材」需求的單一平台了。
我自己在做網站的時候,幾乎每次都會打開 Icons8 找一兩組圖標來用,不管是放在導覽列旁邊當裝飾,還是直接嵌入文章裡頭當示意圖標,都非常方便。比起單純的圖標下載網站,Icons8 的優勢在於資源的廣度,你不需要在十個不同的網站之間跳來跳去找素材。特別是對於經常需要各類設計素材的創作者來說,這種一站式的整合真的能省下不少時間。和Freepik或SVG Repo這類專注於單一素材類型的平台相比,Icons8 的資源涵蓋面更廣。
Icons8 的圖標庫目前收錄超過 13 萬個圖標,主題涵蓋了商務、社交媒體、教育、醫療、交通、美食等幾十個大類別。不管是想做一個企業官網的導覽圖標,還是給手機 App 畫一組功能按鈕,在這裡幾乎都找得到適合的素材。接下來就一步一步帶大家深入了解 Icons8 的各項功能。
打開 Icons8 的圖標頁面,第一個印象就是「多」。超過 13 萬個圖標分成好幾十種風格主題,光是把所有風格都瀏覽一遍就要花不少時間。但 Icons8 在搜尋和篩選方面的設計做得相當到位,即使圖標數量龐大,找起來也不會太痛苦。
Icons8 提供的圖標風格是同類平台中最多的之一。常見的 Flat(扁平)、Filled(填滿)、Line(線條)、Glyph(輪廓)這些基本款都有,但比較特別的是還提供了 Hand-drawn(手繪風)、3D(立體)、Gradient(漸層)、Duotone(雙色)等風格。如果你喜歡簡潔俐落的路線,可以選 Flat 或 Line 風格;如果是做比較活潑、有趣的專案,Hand-drawn 或 3D 風格就很合適。
這點和iconmonstr主要提供單一風格的做法很不一樣。Icons8 更像是一個IconPark的進階版,風格選擇更加豐富,每種風格下都有完整的圖標集合。同一個「首頁」圖標,你可以一次找到 Flat、Filled、Line、3D 等好幾種版本,方便在不同設計場景中切換使用。如果你偏好極簡風格的圖標,Feather Icons和Heroicons也是不錯的選擇,但在風格多樣性上還是 Icons8 最佔優勢。
Icons8 的搜尋功能支援中英文關鍵字,輸入「home」或「首頁」都能找到相關的圖標。搜尋結果會依照風格分組顯示,你也可以透過左側的分類欄位來篩選特定主題,像是「Arts」、「Business」、「Communication」、「Design」等大類別。每一個大類別底下還有更細的子分類,層層遞進,瀏覽起來邏輯很清楚。這一點和FindIcons那種搜尋引擎式的介面設計不太一樣,Icons8 走的是分類樹狀結構。
如果你正在做一個整體風格需要一致的專案,Icons8 的 Icon Packs 功能就很實用。圖標包是依照風格和主題事先組好的套裝,一個包裡面可能包含幾十到幾百個同風格的圖標。好比說你選了一組「Office」主題的 Flat 風格圖標包,裡面就會有文件、信封、行事曆、資料夾等一整套辦公室相關的圖標,保證風格統一。這和Iconhub或Iconstore那種走單一風格路線的圖標庫不同,Icons8 的圖標包選擇更多元。
這是我個人最喜歡 Icons8 的一個小功能。在每個圖標分類頁面的上方,有一個「Color」下拉選單,你可以選擇「All Colors」、「Black」、「White」、「Blue」、「Red」、「Green」等顏色來篩選圖標。這對於需要把圖標融入到特定品牌色系的設計師來說超好用,不用再一個一個開來看顏色對不對。比起Iconshock需要先選完圖標才能改顏色的流程,Icons8 的前置篩選確實更有效率。
Icons8 不只是一個下載圖標的平台,它還內建了一個功能相當強大的線上編輯器。這個編輯器讓你在下載圖標之前,就能先做各種自訂調整,像是改顏色、加背景、調整尺寸、甚至把文字疊加上去。比起單純用Adobe Photoshop Express來改圖,Icons8 的編輯器針對圖標做了最佳化,操作起來更快速。
點擊任何一個圖標後,會進入圖標的詳細頁面。在這個頁面上方你可以看到「Download」和「Embed HTML」兩個大按鈕,而在按鈕下方就是編輯區域。編輯器的介面佈局很直覺,中央是圖標的即時預覽畫布,右側是屬性調整面板。你可以直接在畫布上看到每一次調整的結果,不需要額外預覽。
在右側面板中,最常用的就是顏色調整功能。Icons8 允許你自由更改圖標的前景色(Icon Color),支援直接輸入 HEX 色碼。如果你需要一個特定品牌色的圖標,只要輸入色碼就能即時預覽效果。
背景部分也提供了多種選擇:透明(Transparent)、純色(Solid)、圓形(Circle)、圓角方形(Rounded Square)。透明的背景適合直接放在網頁或簡報中使用,而圓形或圓角方形的背景則很適合做成社群媒體的頭像或 App 的功能按鈕。這些背景設定可以搭配Adobe Creative Cloud Express一起使用,先在 Icons8 調好圖標再匯入進一步編輯。
除了基本的顏色和背景調整,Icons8 編輯器還能在圖標上疊加文字和其他圖案。這對於需要製作帶有數字的按鈕(例如「3 則新訊息」)或是需要在圖標上加上品牌名稱的場景非常方便。你也可以搭配SVG Waves產生波浪背景,或用SVG Favicon Maker將 Icons8 的圖標轉換成網站專用的 Favicon。
編輯完成後,點擊「Download」按鈕,就可以選擇下載格式和尺寸。Icons8 支援 PNG、SVG、PDF 三種格式,尺寸預設有 16px、32px、48px、64px、128px、256px、512px 等選項,你也可以直接輸入自訂尺寸。如果你需要高解析度的圖標用在 Retina 螢幕上,建議直接選 SVG 格式,向量圖怎麼放大都不會失真。
Icons8 的圖標下載和嵌入方式算是我用過最方便的平台之一。不管你是設計師想下載檔案到本機,還是開發者想在程式碼裡直接嵌入,Icons8 都有對應的方案。這一段就來詳細說明每種下載格式和使用方式的差異。
Icons8 圖標支援四種主要格式:
尺寸方面,預設提供從 16px 到 512px 的多種規格。如果你的 WordPress 網站需要特定尺寸的圖標,Icons8 也允許你直接輸入自訂的像素值,不必再用圖片處理工具額外縮放。對於使用Bluehost或其他主機服務架站的站長來說,直接從 Icons8 下載正確尺寸的圖標,可以省掉不少後製的時間。
Icons8 最方便的功能之一,就是可以直接把圖標嵌入到網頁的 HTML 程式碼中。點擊圖標頁面上的「Embed HTML」按鈕後,Icons8 會提供三種嵌入方式:
方式一:img 標籤。這是最簡單的做法,Icons8 會給你一個 img 標籤,裡面的 src 指向 Icons8 的 CDN。你只要把這行 HTML 複製貼上到網頁中就可以了,圖標會直接從 Icons8 的伺服器載入。好處是完全不需要下載檔案,但缺點是依賴 Icons8 的 CDN 可用性。
方式二:SVG inline。這種方式會把完整的 SVG 程式碼直接嵌入到 HTML 中。好處是你可以在本機端完全控制圖標的顏色和樣式,透過 CSS 就能調整。這對於需要精細控制圖標外觀的開發者來說是最靈活的選項。
方式三:CSS background-image。如果你想把圖標當成按鈕或區塊的背景圖案,Icons8 也提供了對應的 CSS 程式碼片段。這在搭配頁面編輯器使用時特別方便,可以把圖標設定為特定元素的背景。
對於需要在應用程式中大量使用 Icons8 圖標的開發者,Icons8 也提供了 RESTful API。透過 API 你可以用程式化的方式搜尋和取得圖標,不需要手動一個一個下載。API 支援的參數包含搜尋關鍵字、風格篩選、顏色設定、尺寸指定等。免費帳號有一定的呼叫額度,如果需要大量使用可以升級付費方案。對於注重網站 SEO 優化的站長來說,使用 API 自動化圖標管理也是一個值得考慮的進階方案。
雖然 Icons8 最初是以圖標起家,但現在平台上的資源種類已經遠遠超出了圖標的範圍。如果你還沒探索過 Icons8 的其他資源分類,真的建議花點時間看看,可能會發現不少好用的免費素材。
Icons8 Photos 提供了超過 10 萬張高解析度的免費圖片,這些圖片都是由專業攝影師拍攝的,品質相當不錯。和一般的免費圖庫一樣,Icons8 的圖片也有授權上的區分:免費版需要標註來源,付費版則可以不署名使用。如果你對 Icons8 的免費圖片有興趣,可以參考之前寫過的 Icons8 免費圖庫完整介紹,裡面有更詳細的使用教學。
向量插圖(Illustrations)是 Icons8 近年來大力推廣的資源類別。和 Freepik 的插圖素材類似,Icons8 的插圖也是向量格式,可以任意縮放不會失真。風格涵蓋了扁平風、等距風(Isometric)、手繪風等,很適合用在部落格文章的插圖、社群貼文的視覺元素或是 App 的引導頁面中。
Icons8 Music 是一個比較容易被忽略的功能。它提供了免費的音效(Sound Effects)和背景音樂(Background Music),適合用在 YouTube 影片、簡報動畫、App 通知音效等場景。音效素材的品質還不錯,而且分類清楚,你可以依照情緒(如開心、悲傷、緊張)或場景(如辦公室、大自然、科技)來搜尋適合的音效。
Icons8 近年也加入了 AI 相關的工具。目前提供的功能包含 AI 背景移除、AI 圖片放大(Upscale)、以及 AI 生成圖標等。AI 背景移除的功能和AirMore 免費去背工具類似,但 Icons8 的版本在處理圖標和插圖時特別有優勢,因為它的模型是針對這類素材做過最佳化的。
如果你經常需要處理圖片品質問題,也可以搭配AI Image Enhancer來增強圖片畫質,或是用AI Image Upscaler來放大小圖,甚至用AI Image Denoiser處理圖片噪點。這些工具搭配 Icons8 的素材使用,效果會更好。如果下載的圖標檔案偏大,也可以透過Compressor.io壓縮後再上傳到網站。
Icons8 的免費版和付費版在授權上有很明確的區別,這一點在使用前一定要搞清楚,尤其是如果你的圖標會用在商業專案上的話。很多人以為「免費」就代表可以隨便用,但 Icons8 的免費其實是有附帶條件的。
Icons8 的免費版採用的是「署名授權」(Creative Commons Attribution)。也就是說你可以免費下載和使用圖標,但必須在使用的同時標註來源,連結回 Icons8 網站。具體的做法是在圖標附近放上一個連回 Icons8 的超連結,或者在網站的說明頁面中列出 Icons8 作為圖標來源。這個要求對於個人部落格或小型專案來說不算太麻煩,但如果你是幫客戶做設計案,可能就需要考慮升級到付費版。
Icons8 的付費方案主要分為三個等級。Starter 方案適合個人使用者,提供基本的免署名授權和一定的月度下載額度。Pro 方案則開放了更多進階功能,像是完整的圖標編輯功能和更高的下載額度。Unlimited 方案則如其名,提供無限制的下載量,適合需要大量素材的專業設計團隊。
除了個人方案之外,Icons8 也提供團隊方案(Team Plan),允許多名成員共享同一個帳號下的素材庫和使用額度。這對於小型設計工作室或企業內部的設計團隊來說很實用。如果你正在選擇適合的設計工具方案,概念上和挑選WordPress 主機類似,都要根據自己的實際需求來決定方案等級。
如果你只是偶爾需要幾個圖標來裝飾自己的 WordPress 網站,免費版的署名要求其實不會造成太大負擔,直接用免費版就好。但如果你是接案的設計師,經常需要把圖標用在客戶的商業專案中,付費版的免署名權限就是必要的投資了。對於使用Kinsta這種高品質主機服務的站長,如果網站商業性質明確,也建議直接使用付費版本,避免授權上的灰色地帶。其他像是A2 Hosting或SiteGround的使用者也一樣,有商業需求的話付費版會比較安心。
除了網頁版之外,Icons8 也提供了桌面應用程式和多種設計工具的插件整合。如果你是專業設計師或前端開發者,這些整合方案能讓你在工作流程中更順暢地使用 Icons8 的素材。
Icons8 的桌面應用程式同時支援 macOS 和 Windows 系統。安裝後你可以直接在桌面環境中瀏覽、搜尋和下載圖標,不需要每次都開瀏覽器。桌面版還支援拖放功能,你可以直接把圖標拖到 Figma、Sketch 或 Photoshop 的畫布上,操作非常流暢。
Icons8 有官方的 Figma 插件,安裝後你可以在 Figma 設計檔案中直接搜尋 Icons8 圖標並插入到畫布上。這大大簡化了設計流程,不需要先下載圖標檔案再手動匯入。插件支援篩選風格、顏色和尺寸,和網頁版的功能基本一致。
Icons8 也為 Adobe 系列軟體提供了插件支援,包含 Photoshop、Illustrator 和 After Effects。在這些工具中你可以直接從 Icons8 的圖標庫中拖放圖標到你的設計檔案裡。同時也有 Google Docs 和 Google Slides 的擴充功能,讓你在製作文件或簡報時也能方便地插入 Icons8 的圖標。如果你剛好在用000Webhost 免費主機練習架站,搭配 Icons8 的桌面版工具可以讓開發效率更高。
Icons8 也為WordPress 區塊編輯器的使用者提供了方便的嵌入方式,前面提到的 Embed HTML 功能就是最直接的整合方案,只要複製貼上就能在編輯器中使用 Icons8 圖標。
市面上提供免費圖標的平台其實不少,每個平台都有自己的強項和適用場景。這一段就把 Icons8 和幾個主流的免費圖標平台做一個橫向比較,幫助你判斷哪個平台最適合你的需求。
| 平台 | 圖標數量 | 風格種類 | 免費版授權 | 線上編輯器 | 下載格式 |
|---|---|---|---|---|---|
| Icons8 | 13 萬+ | 10+ 種 | 需署名 | 有(強大) | PNG/SVG/PDF/ICO |
| Flaticon | 15 萬+ | 5+ 種 | 需署名 | 有(基本) | PNG/SVG/EPS/PSD |
| IconPark | 2400+ | 單一風格可調 | 開源免費 | 有(線上調整) | SVG/PNG/React |
| iconmonstr | 4400+ | 單一風格 | CC0 免署名 | 無 | PNG/SVG/SRC |
| Feather Icons | 280+ | 單一風格 | MIT 開源 | 有(線上調整) | SVG |
| Heroicons | 300+ | 2 種 | MIT 開源 | 無 | SVG |
從上面的比較表可以看出,Icons8 在「風格種類」和「線上編輯器功能」這兩個維度上明顯領先其他平台。如果你需要的是多種風格的圖標,Icons8 幾乎是唯一一個能在同一個平台上提供 10 種以上風格選擇的服務。而它的線上編輯器功能也是最完整的,可以在下載前就完成大部分的客製化調整。
Icons8 最主要的缺點是免費版需要署名。相比之下,iconmonstr 採用 CC0 授權完全不需要署名,Feather Icons 和 Heroicons 採用 MIT 開源授權也沒有署名要求。如果你的專案對署名有顧慮,這些平台可能更適合。相對地,如果你只需要某一種特定風格的大量圖標,Flaticon 的圖標總量更多一些。
除了上面列出的幾個主流平台之外,還有一些特色平台也值得了解。FindIcons 是一個圖標搜尋引擎,可以一次搜尋多個圖標來源的結果。Iconstore 提供高畫質的圖標集合包,CC0 授權可免費商用。Iconshock 號稱有超過 200 萬個圖標,不過免費版的功能比較受限。Iconhub 提供了 6 種不同樣式的線上自訂圖標,Emblemicons則專注於產品開發和業務展示的圖標,數量超過 1000 個。如果你需要的是快速產生網站需要的各種尺寸 Favicon,Iconpie可以幫你一次搞定。
綜合來說,如果你是剛入門的設計師或部落格站長,Icons8 會是一個很好的起點,因為它的功能最全面、風格選擇最多。如果你是開發者需要大量使用同一種風格的圖標,Feather Icons 或 Heroicons 的開源授權會更方便。如果你需要大量的商用圖標又不想付費,iconmonstr 的 CC0 授權是最佳選擇。
Icons8 的圖標在 WordPress 網站中的使用方式其實很彈性,不管是傳統的佈景主題編輯方式還是現代的頁面編輯器都能整合。以下就介紹幾種最實用的方法。
這是最直覺的做法。先在 Icons8 找到你要的圖標,選擇 SVG 格式下載,然後上傳到 WordPress 的媒體庫。上傳後就可以像一般圖片一樣在文章或頁面中插入使用。SVG 格式的好處是檔案小、載入快,而且不論在什麼解析度的螢幕上顯示都不會模糊,對於網站快取效能也比較友善。如果你使用的是 Bluehost 等優質主機服務,網站載入速度本來就不差,搭配 SVG 圖標更能保持輕快的瀏覽體驗。
如果你不想把圖標檔案存到自己的主機上,可以使用 Icons8 的「Embed HTML」功能。在圖標頁面點擊 Embed HTML 按鈕,選擇 img 標籤的方式,複製產生的 HTML 碼。然後在 WordPress 的區塊編輯器中,新增一個「自訂 HTML」區塊,把程式碼貼進去就可以了。這種方式的圖標會從 Icons8 的 CDN 載入,不佔用你自己主機的儲存空間。
對於使用 Elementor 頁面編輯器的使用者來說,在 Elementor 的圖標選擇器中,你可以直接上傳 Icons8 下載的 SVG 檔案。或者也可以使用 Elementor 的「HTML」小工具,把 Icons8 的嵌入碼貼進去。如果你的網站是用 Elementor 搭建的,這兩種方式都能讓你在頁面上靈活地使用 Icons8 的圖標。
我在自己的 WordPress 網站上,最常使用 Icons8 圖標的地方有幾個:導覽列的選項圖標(首頁、關於我們、聯絡我們)、文章列表中的分類圖標、以及頁尾的社群媒體連結圖標。這些地方如果只用文字會顯得比較單調,加上圖標之後整體視覺效果好很多。特別是社群媒體圖標,Icons8 提供了完整的 Facebook、Instagram、Twitter、YouTube 等圖標,而且風格統一,放在頁尾看起來非常專業。
如果你需要將 Icons8 的圖標搭配小圖示放大處理,可以試試AI PNG Enlarger或AI Image Enlarger這類工具,將小尺寸的 PNG 圖標放大到需要的解析度。如果你有去背需求,Slazzer或Unscreen也是不錯的輔助工具。搭配 Upscale Pics也能幫你把小圖示無損放大,維持清晰度。
可以的,Icons8 的免費版允許商業用途,但有一個前提:你必須在使用圖標的地方標註來源,連結回 Icons8 網站。這個署名要求是免費版唯一的限制。如果你不想署名,或者你的客戶不希望在作品中看到第三方連結,那就需要升級到付費方案。付費方案完全免除了署名要求,可以更自由地使用在各種商業場景中。
免費版的使用者需要標註來源。具體做法是在使用圖標的頁面上放置一個連回 Icons8 的超連結,或者在網站的版權聲明頁面中列出 Icons8 作為圖標提供者。Icons8 官方建議的署名格式是在圖標附近放置類似「Icons by Icons8」的文字連結。付費版的使用者則完全不需要署名。
Icons8 目前支援四種下載格式:PNG(點陣圖)、SVG(向量圖)、PDF(文件格式)、ICO(網站 Favicon 格式)。其中 PNG 和 SVG 是最常用的兩種格式。PNG 適合用在簡報、社群貼文等不需要縮放的場景,SVG 則適合用於網頁和需要在不同尺寸下保持清晰的場景。建議優先選擇 SVG 格式,因為檔案更小、載入更快,對網站效能的影響也最小。
這個問題要看你的需求。如果你需要多種風格的圖標和強大的線上編輯器,Icons8 比較佔優勢。如果你需要大量的單一風格圖標,Flaticon 的圖標數量更多一些(超過 15 萬個)。兩個平台的免費版都需要署名,付費方案的價格也差不多。Icons8 的額外優勢是它還提供圖片、插圖、音效等其他資源,如果你經常需要各類設計素材,Icons8 的一站式體驗會更方便。
在 WordPress 中使用 Icons8 圖標有三種主要方式:第一,下載 SVG 格式的圖標後上傳到 WordPress 媒體庫,像一般圖片一樣插入使用;第二,使用 Icons8 的 Embed HTML 功能,複製嵌入碼後在 WordPress 的自訂 HTML 區塊中貼上;第三,搭配 Elementor 等頁面編輯器,透過 HTML 小工具或直接上傳 SVG 來使用。不管你使用的是哪一種 WordPress 主機服務,這些方法都適用。
Icons8 的圖標品質在業界是名列前茅的。所有圖標都是由專業設計師繪製的,線條精準、比例統一。如果你下載的是 SVG 格式,不論在什麼解析度的螢幕上(包含 Retina 螢幕)都不會出現模糊的問題。即使是 PNG 格式,只要你選擇了足夠大的尺寸(建議至少 128px 以上),在一般螢幕上也能保持清晰。
Icons8 API 的免費額度會根據平台政策不定期調整,建議直接到 Icons8 官方網站查看最新的 API 定價頁面。一般來說,免費帳號可以進行一定數量的 API 呼叫,足夠小型專案使用。如果你需要在商業應用中大量呼叫 API,就需要考慮升級到付費方案。Icons8 的 API 文件寫得蠻清楚的,支援多種程式語言的呼叫方式。
回顧一下,Icons8 從一個單純的免費圖標網站,成長到現在涵蓋圖標、圖片、插圖、音效和 AI 工具的一站式設計資源平台,的確是目前市面上功能最全面的免費設計素材服務之一。不管你是剛入門的部落格站長,還是專業的 UI 設計師,Icons8 都能滿足不同程度的圖標需求。如果你正在架設自己的 WordPress 網站,不妨試試看用 Icons8 的圖標來提升網站的視覺質感吧。