Uicons 超過 4000 個免費圖示下載!適合網頁、應用程式開發者使用

Uicons

很多年前介紹過「FlatIcon 超過 12000 個平面化圖示設計免費下載」設計資源,時至今日它已經是個非常龐大的素材庫,這家公司旗下還有包含 FreepikSlidesgo 等知名的網站,前陣子剛推薦過 Icons Pattern 以 Flaticon 提供的圖示製作無接縫背景圖片工具,對於要產生重複拼接效果的素材很有用,接下來還要再推薦一個也是 Flaticon 旗下的免費工具,如果需要開發網站、軟體或應用程式可以研究一下。

接下來要介紹Uicons」是 Flaticon 提供的一套最佳使用者介面免費圖示,一共超過 4,000 個 SVG、經過網頁字型最佳化處理的向量圖示,特別適合使用於網頁、iOS 和 Android 應用程式開發者。

Uicons 是以簡單線條構成的圖示圖案,依照邊線粗細分為 Regular、Bold 或是填滿效果(Solid),也有圓角或是直角差異,使用者透過 Uicons 頁面檢視、預覽不同的圖示樣式,或是以搜尋關鍵字查找特定的內容,每個圖示都能下載 PNG、SVG 或 iOS、Android 開發者適用的素材格式,更簡單的方法直接下載完整圖示集。

此外,Uicons 也有對應的內容傳遞網路(CDN)鏈結,只要在網頁就能以程式碼帶入特定圖示。

Uicons 使用的授權方式可在網站找到,簡單來說,使用到圖示時需要標示出處來源,並且加入一個鏈結連回 Uicons 網站(同時標示圖示由 Flaticon 提供),可點選網站右上角「How to attribute?」查看詳細說明,包括在社群網站、網頁、印刷品、影片、應用程式或遊戲使用 Unicons 的署名方式。

Uicons
https://www.flaticon.com/uicons

使用教學

STEP 1

開啟 Uicons 頁面後會看到許多介面圖示,從上方輸入關鍵字搜尋特定圖示圖案,或是選擇使用一般邊框粗細、較粗的粗體邊框或是填充顏色的圖示樣式。

Uicons

圖示的邊緣也能切換為圓角或是直角,選擇後會在預覽頁面自動重新整理預覽圖。

Uicons

STEP 2

點選任一圖示圖案後 Uicons 會顯示更大張的預覽圖,其中還會有圖示名稱、標記(Markup)、各種格式下載按鈕、標籤和其他樣式預覽功能。

Uicons

STEP 3

如果想預覽不同的顏色配色組合,圖示左下角「調色盤」可以切換為其他顏色。點選要下載的圖示格式時會有對應的選項,例如選擇 PNG 會有 16px 至 512px 不同大小尺寸選項。

Uicons

STEP 4

點選「Need help to start?」鏈結時會顯示下載按鈕或是 CDN 鏈結,簡單來說,使用者可以下載完整的 SVG 格式、字型檔案或是以 CSS 方式在網站特定位置帶入圖示,也就是自行託管圖示相關檔案;另一種作法是在網頁或透過 @import 載入 Uicons 提供的鏈結,一樣也能在網站載入特定內容,不過無論選擇的是那種方式都需要先免費註冊帳號。

Uicons

註冊後就會顯示「Download pack」下載鏈結或是 CDN 鏈結,依照使用者需求選擇使用的方式即可。

Uicons

STEP 5

當開發者在網頁載入 .css 格式時,就能透過網站提供的標記語法載入特定圖示,也可以自訂大小、顯示位置、顏色等各項參數,這部分就不在本文多做說明,開發者就花點時間找找資料自行研究一下。

Uicons

值得一試的三個理由:

  1. Uicons 是 Flaticon 提供的使用者介面免費圖示,收錄 4000 個圖示圖案
  2. 免費下載 PNG、SVG 或 iOS、Android 應用程式開發者適用的格式
  3. 三種不同粗細邊框、圓角和直角風格,使用時需標示出處來源
分享到...