@material-symbols-svg/metadata

Metadata and path data for Material Symbols icons across all styles (outlined, rounded, sharp).

Overview

This package provides consolidated metadata for all Material Symbols icons, including:

• Icon index with categorization information
• Removed icon index for icons kept as empty compatibility exports
• SVG path data for all icons across all styles and weights
• Component mappings between icon names and React component names

Installation

npm install @material-symbols-svg/metadata
# or
pnpm add @material-symbols-svg/metadata
# or
yarn add @material-symbols-svg/metadata

Usage

Icon Index

Get the main icon index with categories:

import iconIndex from '@material-symbols-svg/metadata';
// or
import iconIndex from '@material-symbols-svg/metadata/icon-index.json';

console.log(iconIndex.home);
// {
//   "name": "home",
//   "iconName": "Home", 
//   "categories": ["action"]
// }

Individual Icon Path Data

Access SVG path data for specific icons:

// Import path data for a specific icon
import homePathData from '@material-symbols-svg/metadata/paths/home.json';

console.log(homePathData);
// {
//   "outlined": {
//     "100": "M6 19h3v-6h6v6h3v-9l-6-4.5L6 10v9Zm-2 2V9l8-6 8 6v12H4Z",
//     "200": "...",
//     // ... all weights
//   },
//   "rounded": {
//     "100": "...",
//     // ... all weights  
//   },
//   "sharp": {
//     "100": "...",
//     // ... all weights
//   }
// }

Data Structure

Icon Index Structure

type IconIndex = {
  [iconName: string]: {
    name: string;        // Original icon name (snake_case)
    iconName: string;    // React component name (PascalCase)
    categories: string[]; // Categories (e.g., ["action", "navigation"])
  }
}

Removed Icons

Removed icons are kept out of icon-index.json so the main index reflects only icons that exist in the current upstream package. Use removed-icons.json to inspect compatibility exports that render as empty icons.

import removedIcons from '@material-symbols-svg/metadata/removed-icons.json';

console.log(removedIcons.bitbucket);
// {
//   "name": "bitbucket",
//   "iconName": "Bitbucket",
//   "categories": ["social"],
//   "removedVersion": "0.45.1"
// }

Path Data Structure

type IconPathData = {
  outlined: Record<string, string>; // weight -> SVG path
  rounded: Record<string, string>;  // weight -> SVG path  
  sharp: Record<string, string>;    // weight -> SVG path
}

Removed Icon Structure

type RemovedIconIndex = {
  [iconName: string]: {
    name: string;
    iconName: string;
    categories: string[];
    removedVersion: string;
  }
}

Companion Packages

• @material-symbols-svg/react - React components (Outlined / Rounded / Sharp)
• @material-symbols-svg/vue - Vue components (Outlined / Rounded / Sharp)
• @material-symbols-svg/astro - Astro components (Outlined / Rounded / Sharp)
• @material-symbols-svg/svelte - Svelte components (Outlined / Rounded / Sharp)

License

Apache-2.0

Repository

https://github.com/k-s-h-r/material-symbols-svg