
重點整理
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 官方網站囉,接下來就跟著下方學習,了解 Free Icons 如何使用吧!
第一步:
首頁有簡易教學三步驟,尋找你喜歡的icons,接著調整大小跟顏色、背景,最後即可直接下載~

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

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

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

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

做成網站背景時要注意什麼?
- 圖案要淡:背景上通常還會放文字,圖示顏色和底色對比太高會讓文字難讀,建議降低圖示透明度或選相近色。
- 用重複拼貼而不是大圖:下載一個小尺寸的無接縫圖塊,用 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 或許能夠滿足你的需求哦!
