Icon 是一種具象或抽象的圖樣，用來代表某個物件或概念，讓人一眼就能理解。
在 網站架設 或 Logo 設計中，Icon 常常扮演輔助文字的角色。比起純文字，圖示更容易讓大腦留下印象，有時候一個好的小圖示，就能讓整個版面的質感提升不少。
這篇整理了幾個我自己常用的 Icon 網站，幾乎都支援 PNG、SVG 等格式下載，大部分也能免費商用，不管是網站設計還是廣告圖都很實用喔。
如果你對各種圖片格式還不太熟悉，可以先參考。
還不太了解圖片格式的話，可以先參考我之前寫的相關文章。 連結在這邊： 《 WebP、JPG、PNG 等圖檔格式介紹 》
｜貼心提醒～部分網站需要註明出處或升級付費才能使用，建議下載前先確認授權規則。
接下來就看看精選的 14 個免費 Icon 圖示網站，各有哪些特色、挑選最適合你的風格吧：）
Icon 可以用在哪？活用 Icon 的幾種方法！
你知道找到喜歡的 Icon 後，該怎麼使用他，才能發揮最大價值嗎？
我列了幾個實際容易使用到的情境：
- 網站設計：應用在網頁上，像是網站首頁、會員登入/註冊、購物車、服務清單、商品特性等。
- 平面設計和簡報：企業簡報（前導數據 / 步驟流程）、社群貼文（標題美化 / 內容分類）等。
- APP / UIUX 介面設計：功能按鈕（分享 / 通知）、導航元素、品牌識別等。
情境一：網站設計
Icon 圖示是提升網頁設計豐富度的重要因素，特別是可以用在一些適合列點呈現的位置上，提高視覺層次＆加強可讀性，讓使用者瀏覽頁面時感覺更活潑有節奏。
像是電商網站的導航列就很適合用 Icon 去取代掉生硬的文字，ex：會員登入 / 註冊、購物車等。
又或是公司優勢、服務特色、產品功能等，如果你覺得放素材圖太亂或刻意，這時後用 Icon 反而會簡單俐落，閱讀性會好非常多！
當然網頁設計用的 Icon 圖示的情境很頻繁，比如說網站按鈕、社群追蹤、聯絡方式等，都可以看到 Icon 的蹤影！
相關學習：
- 如果你還沒有自己的網站，或是網站做的不夠好想重新製作，可以參考《 如何架設網站？完整網站設計＋製作流程教學 》。這篇文章，從網域申請、主機租用，還會帶你透過最熱門的 WordPress 架設網站，靠自己就能架出專業級網站。
- 搭配文章內的專屬連結，官方均免費贈送一年網域。
- 這是一篇免費公開課程，我們已經幫助上千位讀者，順利擁有自已的形象網站，希望也對你有幫助！
情境二：平面設計和簡報
Icon 的圖樣容易凸顯重點，讓平面或簡報更有專業度。你可以在平面設計、社群媒體貼文、企業簡報、大圖 Banner 等地方，看到 Icon 的實際應用。
甚至我們每天都會使用到的 emoji 表情符號，其實也是 Icon 的一種呈現形式，你可以把它用在標題中能有效增加吸睛度，像是這樣：
- 🔥 最新優惠來了！
- 💡 為什麼選擇我們？✔️ 10 年經驗 ✔️ 客製化設計 ✔️ 全方位服務
情境三：APP / UIUX 介面設計
在 APP / UIUX 介面設計中，Icon 扮演視覺引導、功能標示的重要角色，能清楚把複雜資訊簡單化，像是：手機漢堡鈕選單、服務項目、分享收藏功能等。
除了 Icon，設計網站時通常還會需要真人圖片、向量素材等各種資源，如果你同時在找其他類型的素材，可以參考《 30 個商用免費圖庫網站 》。
我之前也整理了一篇 《【 Figma 中文教學 】自學 UI / UX 設計必學軟體 》，需要自學資源的話，也可以到點連結前往看看喔。
接下來就直接來看這 14 個 Icon 網站各有什麼特色吧！
Flaticon
Flaticon 是 Freepik 旗下，專門提供免費 Icon 圖示（圖標）的線上網站。
網站中有眾多 Icon 圖示包可供站長選擇，除了能單一款下載，也能直接下載同類型的一整包 Icon，讓站長不用再尋尋覓覓。
除此之外，你還能自由編輯 Icon 顏色＆調整下載尺寸，是個很貼心的功能。
不過須特別注意，Flaticon 有自己的 版權規則，使用時需要「 標註圖源出處 」，或者也可以付費購買會員，才有免標記出處的權限。
Freepik 也有在 Figma 推出 Flaticon 外掛，可自由改變 Icons 元素的顏色、大小用於設計中。免費版一天可插入 10 個 Icons，大家可多多利用唷：）
Iconoir
Iconoir 是一款開源 Icons 素材網站，不需登入帳號就能免費下載高品質的 Icon 圖示，並且用於商業用途。
網站有超過千種 Icons 選擇，你可以自行調整圖示的大小、粗細、顏色等，調整完畢後就可以一鍵複製 SVG 代碼，或是下載 SVG 檔案。
在 Iconoir 上可以找到很多特別的圖標樣式，像是表情符號、風景 Icons、社群媒體 Icons，涵蓋的主題非常廣，還能直接透過關鍵字搜尋，非常方便。
Iconoir 上的 Icons 都是使用 SVG 格式，也就是說，你不管怎麼縮放，圖標都不會失真！
Icons8
Icons8 是一款國外知名的 Icons 素材網站，網站上有高達百萬種免費 Icons 、圖片可以下載，也包含了免費 3D Icons。
Icons8 的 3D 素材風格很多元，除了一般的 3D 樣式外，還有黏土材質的 3D 素材，非常有趣又可愛。
Icons8 提供 PNG、SVG 兩種檔案下載格式，或是你也能直接使用複製貼上，將素材加入設計檔內。
若你是想將 3D 素材加到網頁中，只要把 HTML code 貼到網站程式碼中，不需要下載就能使用超方便！
Icons8 也有推出 Figma 外掛，讓你可以直接在 Figma 專案內使用素材，很推薦給習慣使用 Figma 設計的朋友～
IconScout
IconScout 是國外知名的素材網站，網站上提供超過百萬種素材資源，包含插圖、動畫、3D Icons 等，光是 3D Icons 就多達七十幾萬種。
其中有人物角色、電商插畫、Emoji、幾何圖形等多種樣式，同類型的素材還會整理在一個素材包內，讓你一次下載整套的 Icons 超方便！
不過下載前要注意有些樣式會需要付費，這點可以再自行評估看看。
IconScout 還有一個很方便的功能，就是可以直接複製 3D 素材，然後貼在你的設計上，不需下載到電腦上佔用空間，對設計者來說是個很方便的功能，也是免費就能使用唷：）
IconScout 也有 Figma 外掛，可選擇插入 PNG 或 SVG 圖示，還能搭配 Lottie 動畫呈現，滿實用的！
但免費版有使用數量的限制，稍微可惜了一點，有興趣的朋友可參考看看！更多 Lottie 是什麼。
IconStore
Boxicons
Boxicons 上提供非常多專為網頁設計的單色 Icons，網站上除了可以下載 PNG 檔案，還能直接複製 HTML 程式碼，貼到你的網站中。
在 2026 年初，Boxicons 還推出了 Figma 的外掛軟體，使用 Figma 的用戶們都多了一個 Icon 新選擇啦！
Boxicons 的 Icons 都可以自由變更顏色，還可以旋轉圖示、加入動態效果，調整完後就能輕鬆複製 HTML 程式碼。
Boxicons 目前有超過一千多種 Icons 選擇，包含網站常用功能（首頁、搜尋、購物車等）、知名企業 Logo、表情、食物等，應有盡有。
每個 Icon 上都有貼上幾個類別標籤，在查找同類型圖識的時候會更有效率，大家可以點下方連結試試看唷：）
Noun Project
Noun Project 是一款強大的 Icons 網站，有超過百萬個 Icons，由來自世界各地的設計師所創作。
近期更新的 Hero Section 標語很有趣，網站強調「 Made by Humans 」，在這個充斥 AI 生成的年代感覺特別難得，想必設計風格比起其他網站會更加有獨創性！
Noun Project 提供 PNG 及 SVG 兩種檔案下載。除了 Icons 外，Noun Project 也提供高品質的照片素材，方便你一站就將素材找齊。
你可以在 Noun Project 免費下載圖片素材，不過免費版會需要標註圖源出處！或是付費升級，就不用特別標註、還能調整編輯 Icons 樣式，有需要的朋友再做升級就可以囉。
UXWing
UXWing 是由專業設計師團隊推出的 Icons 素材網站，裡面圖示都是由藝術家精心製作，雖然素材量不算多，但 PNG、SVG 檔案品質高，而且不需要特別註明出處就能免費商用。
網站上的 Icons 偏圓滑可愛，還有社群媒體 Icons 可下載，同一款 Icons 還有多種配色設計可選擇。
需要注意一點，UXWing 的素材可以免費商用，但不能使用於公司 Logo 設計，使用前可以先查看 相關規定 ，了解更詳細的使用範圍唷。
Pngtree
Pngtree 是一款國外素材網站，在這裡可以找到非常豐富的高品質的照片、插圖、Icons 等素材，還有社群貼文模板。
Pngtree 上的素材風格多元，有色彩多樣的 Icons，也有 3D 圖標可以下載，和 Freepik 一樣，都是由不同的設計師上傳分享。
Pngtree 有提供免費版但限制較多，除了需要標註圖源出處外，免費版一天限定只能下載一次素材，升級付費版則不限下載次數。
使用時也會常常跳出廣告相對較不便，優點是素材類型和數量真的很多，大家可以再自行評估看看囉！
Material Symbols
Material Symbols 是一款由 Google 推出的 Icons，和 Google Fonts 一樣，可以下載檔案或是直接複製程式碼放到網站中。
Material Symbols 目前有超過三千多種 Icons，每種圖示也有 3 ~ 4 種不同的樣式，可以直接在網站上調整線條的粗細、大小很方便。
不光是在網站設計上使用，Material Symbols 還特別針對 Android 和 iOS 系統，提供對應的程式碼，對於 APP 開發者來說可以省下不少時間。
另外 Material Symbols 也有推出 Figma 外掛，若你是習慣使用 Figma 設計的朋友，可以搭配使用唷！更多 Figma 中文教學。
Feather
Freepik
Freepik 是一款國外知名且優質的素材圖庫，提供向量圖、照片、PSD 文件、Icons、背景圖等大量素材。
它有提供每日一定數量的免費下載，但需要標記作者以及網站名稱，才能夠合理使用。
Freepik 以向量圖為最主要的特色，以英文關鍵字下去搜尋，幾乎都會有豐富的資源，可供站長在設計時發揮使用。
如果你有大量的向量素材使用需求，Freepik 也有提供會員制，可享有不限數量的全網站素材下載，而且不用標記作者名稱。可前往 Freepik 方案 了解更多。
Freepik 近期也搭上 AI 熱潮，推出 AI 生成圖片功能，可免費使用，大家可以試試看囉：）
此外，強大的圖庫網站 Freepik 還有推出免費的 Figma 外掛，可輕鬆搜尋並插入圖片於設計中，也可透過顏色分類篩選照片，或隨機插入高品質照片，推薦給大家！
Font Awesome
Font Awesome 是一款專業設計師推出的網頁 Icons 素材網，有上萬個 Icons 圖標，多種樣式可選擇。
Font Awesome 提供免費版本，免費版可使用兩千多種 Icons，你可以在網站上客製 Icons 顏色，還能加上動態效果。
調整完畢後，可以選擇複製 HTML、SVG 代碼，或是下載 SVG 檔到電腦上，不論是網頁或是平面設計都適合，推薦給大家！
3D ICONS
3D ICONS 是一個提供多種開源 3D 素材的網站，不用付費就能將 3D 素材，使用在個人或是商業專案內。
網站內有多種樣式的 3D Icons 素材，質感都非常不錯，且都是 CC0 開源素材，代表下載素材後，你可以再自行改作、調整素材樣式。
3D ICONS 上的素材提供四種固定的配色風格，有繽紛配色、漸層配色、全白配色或是質感的黑金配色，你可以依照擺放位置自由選擇。
3D ICONS 也推出了 Figma 外掛，同樣是免費就能使用，你可以輕鬆在 Figma 上加入各種配色的 3D Icons，還能選擇不同角度樣式！推薦給大家！
好啦，以上就是今天的分享，希望你有收穫滿滿唷：）
常見問題
什麼是開源素材？
開源素材代表該作品可免費商業使用，且不用標記圖源，但還是需要注意每個網站上的資源規定可能有差異，建議下載前要先仔細閱讀網站規定唷！
下載免費 Icons 需要注意什麼？
建議下載前要先仔細閱讀網站上的相關規定，部分素材平台雖然提供免費下載，但可能會需要標註圖源出處或是有使用限制等，需要多多留意。
建議使用什麼格式作為 Icons 檔案格式呢？
因為 Icons 有時會需要配合設計主體去放大或縮小，建議可下載 PNG 或是 SVG 檔，這樣放大縮小 Icons 就不會有失真的問題囉！
聯絡犬哥網站
在網頁設計＋AI SEO 行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。
資源一：犬哥網站（專業 WordPress 網頁設計＆ AI SEO 行銷公司）
如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想，或是沒有被 AI 提及你的品牌。歡迎洽詢 犬哥網站（WordPress 網頁設計＆ AI SEO 行銷公司），請專家協助你會更容易！
我們有多年網頁設計、AI SEO 行銷經驗，加上上百個實戰案例，絕對能滿足您的需求！
資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）
如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？
可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！
- WordPress 高手架站課：
從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等豐富內容，一次教會你。
課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！ - SEO 排名飆升課：
教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等，大幅提升行銷能力。
帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！
