找我們做網站
↑
Resources · 插圖與圖示素材

Icons Pattern 教學:用 Flaticon 免費圖示製作無接縫背景圖

插圖與圖示素材發布 2022.07.19更新 2026.10.02閱讀約 4 分鐘
Icons Pattern 教學:用 Flaticon 免費圖示製作無接縫背景圖

重點整理
Icons Pattern 用 Flaticon 圖示庫的 icon 重複拼接成無接縫背景圖:搜尋主題圖示、手動加入或按 Random pattern 隨機生成,逐一調整方向、大小與顏色,最後選擇 PNG、JPG、SVG 或 Base64 下載。部分圖示需 Premium 會員才能使用。

關於背景製作工具先前向大家介紹過相當實用的Cool Backgrounds與VISIWIG,而今天要跟大家分享的 Icons Pattern 能運用免費圖示庫裡大量的icon素材,以各種主題的圖示製作出客製化的獨特背景!

Icons Pattern 是什麼

Icons Pattern 是一個免費的線上背景製作工具,特色是以無接縫圖案(seamless patterns)重複拼接的方式生成圖片,素材為免費圖示庫「Flaticon」裡所提供的超過750萬個向量圖示,使用者可以任意調整圖片的尺寸及圖示密度自由編輯製作出屬於你的獨特背景圖。要留意的是部分圖示需付費成為Premium才能夠使用,不過免費的就已經擁有相當豐富的選擇,這點使用者不必擔心!

Icons Pattern是什麼?|鵠學苑
Icons Pattern是什麼?|鵠學苑

Icons Pattern 使用教學

點擊上方的網址就可以進入 Icons Pattern 官方網站囉,接下來就跟著下方學習,了解 Free Icons 如何使用吧!

第一步:

首頁有簡易教學三步驟,尋找你喜歡的icons,接著調整大小跟顏色、背景,最後即可直接下載~

Icons Pattern|step1|鵠學苑
Icons Pattern|step1|鵠學苑

 

第二步:

以搜尋「animal」為例,找到喜歡的圖示包後,可以手動添加icons到畫面中,點擊下方「Random pattern」也可進行隨機生成。

Icons Pattern|step2|鵠學苑
Icons Pattern|step2|鵠學苑

 

第三步:

每個icon都可以各別調整方向、大小及顏色!

Icons Pattern|step3|鵠學苑
Icons Pattern|step3|鵠學苑

 

第四步:

點擊左側調色盤圖示(Background)後可以進行背景顏色調整。

Icons Pattern|step4|鵠學苑
Icons Pattern|step4|鵠學苑

 

第五步:

到左下角點擊Downlaod進到下載頁面,有四種格式可以選擇:PNG、JPG、SVG及Base64編碼,最後調整完尺寸點選「Download Pattern」就完成下載啦!

Icons Pattern|step5|鵠學苑
Icons Pattern|step5|鵠學苑

做成網站背景時要注意什麼?

  • 圖案要淡:背景上通常還會放文字,圖示顏色和底色對比太高會讓文字難讀,建議降低圖示透明度或選相近色。
  • 用重複拼貼而不是大圖:下載一個小尺寸的無接縫圖塊,用 CSS 的 background-repeat: repeat 鋪滿,比一張大圖省流量。
  • 檢查手機版:圖示密度在手機上會顯得更擠,必要時另外做一張手機用的版本。
  • 標註授權:使用免費圖示時,記得在網站適當位置註明出處。

常見問題

Flaticon 的 Pattern 產生器要付費嗎?

可以免費使用,但素材中部分圖示標示為 Premium,需要付費會員才能放進圖案或下載。只用免費圖示也能做出完整的背景圖,挑圖示時留意有沒有 Premium 標記即可。

用 Flaticon 圖示做的背景可以商用嗎?

可以,但免費會員使用 Flaticon 圖示要依授權標註出處(作者與 Flaticon),Premium 會員則不必標註。用在網站或商品前,先到 Flaticon 的授權說明確認最新條款。

下載格式要選 PNG、SVG 還是 Base64?

放在網頁當背景建議用 SVG,檔案小、放大不會糊;要給簡報或社群貼圖用就選 PNG 或 JPG。Base64 是把圖片轉成文字,可以直接寫進 CSS,但檔案會變大,只適合很小的圖案。

結語

以活潑的滿版icons作為背景圖片,不僅吸睛也能巧妙地以圖示傳達訊息,一眼便能迅速將瀏覽者帶入主題,若喜歡這種充滿icons的圖片風格,試試 Icons Pattern 或許能夠滿足你的需求哦!

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。