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。

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

STEP 2

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

STEP 3

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

STEP 4

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

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