Material Symbols

About Material Symbols

Google Material Symbols is the official successor to Material Icons, introducing a variable font system where a single icon file is configured across Fill (solid/outline), Weight (100–700), Grade (visual emphasis), and Optical Size (display vs. compact UI) axes via CSS font-variation-settings. One icon system can cover your entire design token set — from dense 20px inline labels to 48px hero illustrations. The library contains 3,000+ icons across five themes and is hosted on Google Fonts for zero-install CDN delivery. Individual SVGs are available here for copy-paste, JSX export, and PNG download. Apache 2.0 licensed — free for commercial use. Compared with the older Material Icons (MDI), Material Symbols is the active development line — all new Google UI icons ship here first. The variable font approach reduces icon font payload significantly. Ideal for Android app interfaces, Google Workspace-style products, Flutter web apps, and enterprise dashboards where icon expression adapts to multiple visual states.

How to use Material Symbols icons

// Copy individual SVGs from AllSVGIcons, or use Iconify:
import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="material-symbols:search" width={24} />;
}

<!-- Google Fonts CDN (Outlined style) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

<!-- Control weight, fill, grade, size via CSS -->
<style>
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
</style>

<span class="material-symbols-outlined">search</span>

import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="material-symbols:icon-name" width={24} />;
}

Compare Material Symbols with similar icon packs