在進行 UIUX 介面設計 時,常常會需要用到 Icons 來作為介面功能圖示,像是首頁、購物車、電話等..Icons 圖示按鈕都很常見。更多 免費商用 Icons。
而許多設計師都在使用 Figma 製作設計,除了操作容易上手外,還有豐富的外掛資源可以使用。更多 Figma 是什麼。
今天我們整理了 13 個超實用的 Figma Icons 外掛,可直接在設計檔內瀏覽精美 Icons 圖標並插入設計中。
部分外掛是完全免費的,也可用於商業用途!趕快將這些好料存下來吧:)
Material Symbols
Material Symbols 是一款由 Google 推出的 Icons,和 Google Fonts 一樣,可以下載檔案或是直接複製程式碼放到網站中。
Material Symbols 目前有超過三千多種 Icons,每種圖示也有 3 ~ 4 種不同的樣式,你也能自行調整線條的粗細、大小等..。
Material Symbols 還有推出 Figma 外掛,若你是習慣使用 Figma 設計的朋友,可以搭配使用唷!更多 Figma 中文教學。
3dicons
Feather Icons
Iconify
Iconify 是一款免費的 Figma Icons 外掛,整合了 Material Design Icons、FontAwesome、Jam Icons、EmojiOne、Twitter Emoji 等..超過一百個 Icons 資源平台。
只需開啟 Iconify 一個外掛,就能同時瀏覽不同平台提供的 Icons,目前共超過十萬種 Icons 可使用,非常豐富。
多數 Icons 都可以用於商業用途,部分則有限制,Iconify 目前也正在開發篩選功能,未來能輕鬆篩選顯示可免費商用的 Icons,大家可持續關注囉!
Lucide Icons
Lucide Icons 是一款免費開源的 Figma Icons 外掛,Icons 是從 Feather Icons 改作而成。
Lucide Icons 可用於個人和商業用途,完全免費!由於是開源資源,所以也能自行改作,修改 Icons 樣式。
Lucide Icons 目前已有上百種 Icons,若你想提供更多 Icons,也能聯繫團隊分享唷!
SVG Repo
SVG Repo 是一個免費開源的 SVG Icons 資源,網站上有超過五十萬個 Icons 和圖案可下載。
網站上的 Icons 不僅可免費下載,還能用於商業用途,對設計師來說是個優質的素材寶庫!
SVG Repo 也提供了免費的 Figma 外掛,可在設計檔內瀏覽上萬種 Icons,一鍵快速插入,或直接用拖曳方式,拖曳到設計的任何位置上,快來試試吧!
Flaticon
Flaticon 是 Freepik 旗下,專門提供免費 Icon 圖示(圖標)的線上網站。
網站中有眾多 Icon 圖示包可供站長選擇,除了能單一款下載,也能直接下載同類型的一整包 Icon,讓站長不用再尋尋覓覓。
除此之外,你還能自由編輯 Icon 顏色&調整下載尺寸,是個很貼心的功能。
不過須特別注意,Flaticon 有自己的 版權規則,會需要「 標註圖源出處 」才可免費使用,或者也可付費購買會員,即可享有免標記出處的權限。
如果你有大量的 Icon 圖標、圖示的需求,使用 Flaticon 相信會有所收穫!
Freepik 也有在 Figma 推出 Flaticon 外掛,可自由改變 Icons 元素的顏色、大小用於設計中。免費版一天可插入 10 個 Icons,大家可多多利用唷:)
Open Iconic Icon Set
Open Iconic Icon Set 是一款由素材網 Iconduck 推出的 Figma 外掛,提供超過兩百多個開源 Icons。
外掛包含搜尋功能,可快速搜尋關鍵字,找到需要的 Icons 圖示。點擊 Icons 即可插入到設計中,或是直接拖曳到設計內也沒問題!
Open Iconic Icon Set 可免費用於個人或是商業用途,Iconduck 也持續在開發新功能,可持續關注:)
IconScout
IconScout 是國外知名的素材網站,網站上提供超過百萬種素材資源,包含插圖、動畫、3D Icons 等..。
IconScout 上的 3D Icons 就多達二十幾萬種,有免費及需要付費的樣式,下載前需注意。
IconScout 提供人物角色、電商插畫、Emoji、幾何圖形等..多種樣式的 3D 素材,同類型的素材還會整理在一個素材包內,讓你一次下載整套的 3D Icons 超方便!
IconScout 還有一個很方便的功能,就是可以直接複製 3D 素材,然後貼在你的設計上,不需下載到電腦上佔用空間,對設計者來說是個很方便的功能,也是免費就能使用,大家可以試試看唷:)
IconScout 也有 Figma 外掛,免費版有使用數量的限制,稍微可惜了一點。
但 IconScout Figma 外掛可選擇插入 PNG 或 SVG 圖示,還能搭配 Lottie 動畫呈現,滿實用的!有興趣的朋友可參考看看囉!更多 Lottie 是什麼。
Simple Icons
Simple Icons 是一款品牌 Logo Icons 資源,網站上面提供了 3100 多個熱門品牌的 Logo Icons SVG 圖示。
像是 Line、Facebook、Instagram、PayPal、VISA 等..,網站需要加上社群軟體連結或支付方式時,就可以利用這些 Icons 圖示清楚呈現。
Simple Icons 也有推出 Figma 外掛,會和 Simple Icons 官網同步每週更新,若你有其他品牌需求,也可以聯絡團隊申請唷!
Phosphor Icons
Phosphor Icons 是 Figma 上的一款 Icons 外掛,由知名 Icons 網站 Iconduck 推出,網站本身有高達三十萬種 Icons 插圖可免費下載。
適用於個人或是商業設計,在 Figma 外掛上則有四千多種 Icons,可以一鍵選取,置入設計專案內。
我們假設今天要在設計內新增聯絡電話的 Icons,只要在搜尋欄位輸入「 phone 」,馬上就跑出超過 40 種手機圖標樣式!可以先選擇喜歡、適合的樣式,點選圖標後,就能加入 Figma 設計內。
Phosphor Icons 除了有多種不同情境的 Icons 樣式外,還能自行選擇要細線條、粗線條、實心填滿或是雙色的 Icons,並在 Figma 介面上輕鬆更改樣式顏色!
小小可惜,Iconduck 推出精美的 Icons 並沒有全部都在 Figma Phosphor Icons 外掛上,但種類還是滿多元夠用的。
有這麼多種可變化的 Icons 元件,不管你今天要在 Figma 設計什麼介面,相信 Phosphor Icons 都會成為你很好的幫助!
EOS Icons
EOS Icons 是一款科技 Icons Figma 外掛,提供超過千種與科技相關的 Icons 圖示,支援純線條或是填滿圖樣兩種樣式。
一般 Icons 資源比較少有科技類型的圖樣,EOS Icons 幫大家補齊了!不論是程式碼、bug 等圖樣,都能在外掛上找到。
EOS Icons 是開源資源,可免費用於個人或是商業用途,也能自由改作,推薦給 UIUX 設計師們!
Icons8
常見問題
Figma 外掛是免費的嗎?
Figma 上的外掛部分為免費的,可在搜尋時利用篩選器篩選「 Free 」免費外掛。有些免費外掛也會有使用限制(如:次數或須標注來源的限制),使用前可先參考外掛的資訊欄說明唷!
免費 Icons 可以用在商業用途嗎?
外掛通常會在下方資訊欄部分說明可否免費用於個人或商業用途,或是有標註為開源資源的話,也能免費商用,甚至改作,使用前務必詳閱外掛說明唷!
PNG 和 SVG Icons 格式哪個好?
PNG 或是 SVG 檔,都可以放大縮小 Icons 不失真,但由於 PNG 是圖片檔,若想對 Icons 樣式做調整會比較難一點,因此若有 SVG 格式的話會更好唷!
今天介紹的 Figma 外掛,如:Iconify、Lucide Icons、SVG Repo、IconScout、Simple Icons 都有 SVG 的 Icons,可多加利用:)
WordPress 學習資源
學習網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 3 項實用資源,可有效幫助大家做學習。
資源一:WP 高手架站課(線上課程)
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
點擊下面了解課程,立馬擁有自己的品牌網站,並增加網路曝光度!
資源二:SEO 排名飆升課(線上課程)
網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?
這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。
點擊下面了解課程,帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!
資源三:犬哥數位(專業 WordPress 網頁設計公司)
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!
資源四:更多犬哥教學資源
如果你在操作過程中遇到問題,可以加入 犬哥研討社(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。
如果你想學更多網頁設計、數位行銷知識,可關注 YouTube 頻道,或是歡迎追蹤 犬哥網站 IG。