在進行網頁設計或是 Logo 設計 時,建議可以搭配 Icons 來輔助文字,整體呈現就會變得更豐富!
現在有許多 Icon 圖示網站,可以免費下載 PNG、JPG、SVG 等格式的 Icon 圖標,還能免費商用。更多 圖檔格式介紹。
今天我們精選了 15 個免費 Icon 圖示網站,圖示都設計得非常精緻,數量也很多,讓你挑不完!那麼就開始吧:)
Flaticon
Flaticon 是 Freepik 旗下,專門提供免費 Icon 圖示(圖標)的線上網站。
網站中有眾多 Icon 圖示包可供站長選擇,除了能單一款下載,也能直接下載同類型的一整包 Icon,讓站長不用再尋尋覓覓。
除此之外,你還能自由編輯 Icon 顏色&調整下載尺寸,是個很貼心的功能。
不過須特別注意,Flaticon 有自己的 版權規則,會需要「 標註圖源出處 」才可免費使用,或者也可付費購買會員,即可享有免標記出處的權限。
如果你有大量的 Icon 圖標、圖示的需求,使用 Flaticon 相信會有所收穫!
Freepik 也有在 Figma 推出 Flaticon 外掛,可自由改變 Icons 元素的顏色、大小用於設計中。免費版一天可插入 10 個 Icons,大家可多多利用唷:)
Iconoir
Iconoir 是一款高品質開源 Icons 素材網站,不需登入帳號就能免費下載 Icon 圖示,並可用於商業用途。
網站有超過千種 Icons 選擇,你可以自行調整圖示的大小、粗細、顏色等..,調整完畢後就可以一鍵複製 SVG 代碼,或是下載 SVG 檔案。
在 Iconoir 上可以找到多種特別的圖標樣式,不論是表情符號、風景 Icons、社群媒體 Icons,各種主題都有,還可以直接透過關鍵字搜尋,非常方便。
Iconoir 上的 Icons 都是 SVG 格式,讓你不管怎麼縮放,圖標都不失真!
Icons8
IconScout
IconScout 是國外知名的素材網站,網站上提供超過百萬種素材資源,包含插圖、動畫、3D Icons 等..。
IconScout 上的 3D Icons 就多達二十幾萬種,有免費及需要付費的樣式,下載前需注意。
IconScout 提供人物角色、電商插畫、Emoji、幾何圖形等..多種樣式的 3D 素材,同類型的素材還會整理在一個素材包內,讓你一次下載整套的 3D Icons 超方便!
IconScout 還有一個很方便的功能,就是可以直接複製 3D 素材,然後貼在你的設計上,不需下載到電腦上佔用空間,對設計者來說是個很方便的功能,也是免費就能使用,大家可以試試看唷:)
IconScout 也有 Figma 外掛,免費版有使用數量的限制,稍微可惜了一點。
但 IconScout Figma 外掛可選擇插入 PNG 或 SVG 圖示,還能搭配 Lottie 動畫呈現,滿實用的!有興趣的朋友可參考看看囉!更多 Lottie 是什麼。
TW Icon Fonts
TW Icon Fonts 是一款以台灣旅遊景點做發想的開源 Icons 網站,由兩位住在台灣的日本人和英國人開發,創作目的是為了將台灣的魅力,分享給世界所有人。
網站上可以找到各種台灣旅遊相關 Icons,像是 101 大樓、天燈、珍珠奶茶等..,各種可以代表台灣的可愛圖示。
由於創作目的是為了推廣台灣,所以網站上的所有 Icons 都不需付費,可以免費使用於個人、商業創作,甚至還能重製。
網站開發者也持續在更新、推出更多服務,若你正在製作台灣相關的設計,非常推薦使用唷:)
IconStore
Boxicons
Boxicons 是一款專為網頁設計的 Icons,網站上除了提供 PNG 檔案下載,還能直接複製 HTML 程式碼,貼到你的網站程式碼中。
Boxicons 的 Icons 都可以自由變更顏色,還可以旋轉圖示、加入動態效果,調整完後就能輕鬆複製 HTML 程式碼。
Boxicons 目前有超過一千多種 Icons 選擇,包含網站常用功能(首頁、搜尋、購物車等)、知名企業 Logo、表情、食物等..,應有盡有,大家可以自行前往查看:)
Noun Project
Noun Project 是一款強大的 Icons 網站,有超過百萬個 Icons,由來自世界各地的設計師所創作。
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 還有推出 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
好啦,以上就是今天的分享,希望你有收穫滿滿唷:)
常見問題
什麼是開源素材?
開源素材代表該作品可免費商業使用,且不用標記圖源,但還是需會有相關規定需要注意,建議下載前要先仔細閱讀網站規定唷!
下載免費 Icons 需要注意什麼?
建議下載前要先仔細閱讀相關規定,部分免費素材雖然可以免費下載,但可能會需要標註圖源出處或是有使用限制等..,需要注意。
建議使用什麼格式作為 Icons 檔案格式呢?
因為 Icons 有時會需要配合設計主體去放大或縮小,建議可下載 PNG 或是 SVG 檔,這樣放大縮小 Icons 就不會有失真的問題囉!
WordPress 學習資源
學習網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 3 項實用資源,可有效幫助大家做學習。
資源一:WP 高手架站課(線上課程)
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
點擊下面了解課程,立馬擁有自己的品牌網站,並增加網路曝光度!
資源二:SEO 排名飆升課(線上課程)
網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?
這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。
點擊下面了解課程,帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!
資源三:犬哥數位(專業 WordPress 網頁設計公司)
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!
資源四:更多犬哥教學資源
如果你在操作過程中遇到問題,可以加入 犬哥研討社(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。
如果你想學更多網頁設計、數位行銷知識,可關注 YouTube 頻道,或是歡迎追蹤 犬哥網站 IG。