Fluenticons 微軟 4000 個開放原始碼免費圖示下載,線上預覽風格配色

Fluenticons 微軟 4000 個開放原始碼免費圖示下載,線上預覽風格配色

微軟(Microsoft)釋出超過 4000 個開放原始碼免費圖示Fluent UI System Icons」,一系列大家都感到熟悉、友好和現代化的圖案設計,不過在 GitHub 取用這些圖案、瀏覽上並不是很方便,因此有國外開發者另外開發了一個「Fluenticons」網站做為 Microsofts fluent icons 檢視器,透過這個工具就能在線上預覽、搜尋特定的圖示圖案,也能切換淺色或深色背景,讓下載圖示變得更簡單。

Fluenticons 收錄的圖示有 4000 個,而這個檢視器也以開放原始碼方式釋出,任何人都能在 GitHub 找到原始碼,Fluenticons 網站就像是一般的免費圖示庫,直接顯示各個圖案的預覽圖、名稱,也有搜尋工具、切換不同的風格(Microsofts fluent icons 有兩種風格,一種是只有外框、另一種是填滿色的樣式)。

Fluenticons 讓使用者可下載圖示的 SVG、PNG、WebP、Vue Component 和 React Component,或是複製程式碼、線上調整 PNG 圖案尺寸和圖示顏色,有想找圖示集的朋友可以試試看。

Fluenticons
https://fluenticons.co/

使用教學

STEP 1

開啟 Fluenticons 網站後會看到各種圖示圖案預覽,點選右上角「Switch to Filled Icons」將網頁圖示切換為填滿的風格,再點選一次會回到只有外框的 Outlined Icons。

Fluenticons

右上角還能切換淺色或深色模式,瀏覽在不同背景顏色的圖示顯示樣式。

Fluenticons

STEP 2

點選圖示後在右側欄位會顯示更大的預覽圖,使用圖示右下角「調色盤」工具可設定不同顏色。

Fluenticons

STEP 3

透過搜尋框輸入關鍵字會顯示所有相關的圖示,在 4000 多個圖示中任何圖幾乎都能找到。

Fluenticons

STEP 4

點選圖示後 Fluenticons 右側會顯示更大張的預覽圖,預設有 SVG 和 PNG 兩種格式可以複製原始碼或是下載保存為 PNG 格式,點選下拉選項後還有 WebP、Vue Component 和 React Component 三種格式可用,無論是要直接取得原始碼或下載圖片檔案都很好用。

除此之外,點選「Advanced Editor」開啟進階編輯器,可以設定 PNG 圖片大小後即時下載。

Fluenticons

值得一試的三個理由:

  1. 微軟釋出超過 4000 個開放原始碼免費圖示 Fluent UI System Icons
  2. 國外開發者製作 Fluenticons 做為圖示的線上檢視器
  3. 可搜尋圖示、切換風格、背景和圖示顏色,下載多種檔案格式
分享本文