Material Symbols
M
這是 Google 推出的圖示系統，將超過二千五百個字形整合於單一字型檔，提供三種樣式，以及填滿、筆畫粗細、視覺等級與光學尺寸四項可調軸。
關於 Material Symbols
這是 Google 推出的圖示系統，將超過二千五百個字形整合於單一字型檔，提供三種樣式，以及填滿、筆畫粗細、視覺等級與光學尺寸四項可調軸。開發者可依介面狀態與顯示尺寸調整外觀，設計師也能在模型或原型中使用一致的圖示資源。
使用時可從圖示庫下載個別 SVG 或 PNG，亦可經由 Google Fonts 載入網頁字型，或將字型部署在自行控制的位置。網頁可用文字名稱顯示圖示，並針對不支援連字的瀏覽器改採數字字元參照。
它的特色是能在同一字形上建立填滿切換、粗細與強調程度變化，並可只載入實際需要的圖示及軸值以減少傳輸量。資源涵蓋網頁、Android 與 iOS；Flutter 支援則仍在規劃中。
功能特色
主要功能
- 可變圖示軸：可調整填滿、筆畫粗細、視覺等級與光學尺寸，讓同一字形配合狀態、強調程度及顯示大小變化。
- 三種設計樣式：超過二千五百個字形整合於單一字型檔，並提供三種樣式選擇。
- 個別圖示下載：完整圖示庫提供 SVG 與 PNG，可用於網頁、Android、iOS 或設計工具。
- 網頁字型載入：可透過 Google Fonts 的 CSS 介面，以一行 HTML 將圖示字型加入網頁。
- 圖示子集載入：可使用 icon_names 參數，只請求應用程式實際需要的圖示以縮減字型傳輸量。
- 軸值最佳化：可指定需要的可變字型軸與數值組合，避免載入不會使用的完整變化範圍。
- 自行託管字型：可將圖示字型放在自行控制的位置，自行決定資源的更新時機與部署方式。
- 連字與字元碼：可用圖示的文字名稱顯示字形；需要相容不支援連字的瀏覽器時，可改用數字字元參照。
- 跨平台資源：Android 提供向量素材格式，iOS 另有 Apple 符號格式；Flutter 支援尚在規劃。
使用情境
- 網站開發者可透過 Google Fonts 載入導覽列或操作按鈕所需圖示，並限定圖示子集與軸值以控制下載量。
- 介面設計師可下載 SVG 或 PNG，將一致的圖示資源放入網頁與行動應用程式的模型或互動原型。
- 產品團隊可調整填滿、筆畫粗細與視覺等級，呈現選取狀態、互動轉換或不同的介面強調程度。
資料來源：資料來源 1、資料來源 2
分類：設計資源
標籤：圖庫素材、網頁設計、設計工具
價格：免費使用；採 Apache License 2.0 授權
價格查核：
最近更新時間：
前往 Material Symbols 官網或原始資源
Material Symbols 常見問題
Material Symbols 是什麼？
這是 Google 推出的圖示系統，將超過二千五百個字形整合於單一字型檔，提供三種樣式，以及填滿、筆畫粗細、視覺等級與光學尺寸四項可調軸。開發者可依介面狀態與顯示尺寸調整外觀，設計師也能在模型或原型中使用一致的圖示資源。
Material Symbols 適合誰、可以用來做什麼？
網站開發者可透過 Google Fonts 載入導覽列或操作按鈕所需圖示，並限定圖示子集與軸值以控制下載量。 介面設計師可下載 SVG 或 PNG，將一致的圖示資源放入網頁與行動應用程式的模型或互動原型。 產品團隊可調整填滿、筆畫粗細與視覺等級，呈現選取狀態、互動轉換或不同的介面強調程度。
Material Symbols 的價格怎麼查？
免費使用；採 Apache License 2.0 授權。本頁未列出獨立的官方價格頁；取得方式與目前費用請以官網或原始資源的說明為準。
想找 Material Symbols 的替代方案，可以從哪裡開始？
可先延伸查看 3dicons、Bootstrap Icons、21st.dev 的資源介紹，再依自己的用途到各官網比較功能、費用與使用條款。這些連結依目錄分類或標籤提供探索方向，是否能取代 Material Symbols 仍需逐項確認。
加入創作邦會員
收藏實用內容、下載免費模板，訂閱電子報。
免費加入會員精選工具
- HeroUI — HeroUI 是以 React Aria 與 Tailwind CSS 建立的 React 元件庫，提供具無障礙設計考量的介面元件。
- Mockplus — Mockplus 可在不寫程式的情況下製作互動網站與應用程式的線框圖及原型。
- One Page Love — One Page Love 是單頁網站設計圖庫，收錄單頁網站案例、模板與相關資源。
- React Bits — React Bits 提供免費開源 React 元件，涵蓋動態文字、背景、互動卡片與微互動，並可查看示範與複製原始碼。
新工具
- 3dicons — 開源 3D 圖示庫，同一組圖示有多種角度與材質（彩色、透明、金屬等），可線上調色後下載 PNG，也有 Figma 資源，適合網站主視覺、App 介面、簡報與社群圖。免費圖示採 CC0，可商用、不必署…
- Kenney — 上千套 2D、3D、UI 介面、像素風與音效素材包，風格統一、可直接拖進遊戲引擎或設計稿，適合遊戲原型、互動網頁、簡報插圖與教學示範。資產頁素材都是 CC0，可免費商用、不必署名。
- Freesound — 大學音樂科技研究團隊營運的音效資料庫，有大量環境聲、音效與樂器取樣，適合影片剪輯、Podcast 與動態設計配音效；免費註冊即可下載。授權依每個音效標示：CC0 可自由商用、CC BY 要署名、CC…
- Poly Haven — 高品質 3D 素材庫，提供 HDRI 環境光、PBR 材質貼圖與 3D 模型，Blender、C4D 等軟體都能直接用，適合產品渲染、3D 場景與動態設計。全部 CC0，可免費商用、修改、再散佈，不…
