I built Material Symbols SVG, an icon library for using Material Symbols as SVG components

Source: Dev.to

Supported Frameworks

Links

• Docs –
• Icon catalog –
• GitHub –

Why I Built It

There is already an “official‑ish” way to consume Material Symbols as raw SVG files (e.g. @material-symbols/svg-400).
When using those icons in React as components I always had to add an extra conversion layer such as @svgr/webpack or write a custom build step.

That workflow is fine for one‑off scripts, but it’s cumbersome for day‑to‑day UI work.
What I wanted instead:

• No extra SVG conversion step
• No framework‑specific webpack setup just to render icons
• Direct imports that already behave like components
• A consistent mental model across frameworks

So I built a library that ships Material Symbols as framework components from the start.

What the Library Provides

• 3 800+ icons
• 3 style variants – outlined, rounded, sharp
• 7 weight variants – 100 – 700
• Filled variants
• Framework packages with similar import patterns

Because the icons are distributed as SVG components (not icon fonts), they fit naturally into component‑based UI code. You can control them with standard SVG props such as size, color, className/class, style, and any other SVG attribute.

React Example

import { Home, Search } from "@material-symbols-svg/react";
import { Home as HomeRounded } from "@material-symbols-svg/react/rounded";
import { Home as HomeW500 } from "@material-symbols-svg/react/w500";

export function Example() {
  return (
    <>
      {/* Your JSX here */}
    </>
  );
}

The default import is outlined / w400.

import { Home } from "@material-symbols-svg/react";          // outlined / w400
import { Home as HomeW600 } from "@material-symbols-svg/react/w600";
import { Home as HomeRounded } from "@material-symbols-svg/react/rounded";
import { Home as HomeSharpW700 } from "@material-symbols-svg/react/sharp/w700";

The same import‑path pattern is used for Vue, Svelte, Astro, and React Native.

Design Choice: Import‑Path‑Based Variants

One of the core design decisions is that style and weight are selected via the import path, not via runtime props.

Why?

• Material Symbols are not simple line icons where you can change stroke width at runtime.
• Each style (outlined, rounded, sharp) and each weight (w100 … w700) has its own SVG path data.

If we exposed a prop‑based API like:

the component would need to bundle 21 path variants (3 styles × 7 weights) in a single module. That hurts tree‑shaking and increases bundle size.

By splitting variants into distinct import paths:

@material-symbols-svg/react/w600
@material-symbols-svg/react/rounded/w400
@material-symbols-svg/react/sharp/w700

the bundler sees a clear module graph, making unused variants easy to eliminate.

Deep Imports (icons/*)

You can also import a specific icon directly from the icons sub‑folder:

import { HomeW400, HomeFillW600 } from "@material-symbols-svg/react/icons/home";
import { SettingsW400 } from "@material-symbols-svg/react/rounded/icons/settings";

Benefits

• The exact icon is explicit in the import path.
• Filled variants are easy to target.
• In some setups (e.g., Astro 5) deep imports avoid dev‑server timeouts that can happen with root imports.

Component Props & Attributes

All components accept standard SVG‑oriented props:

Example

import { Home } from "@material-symbols-svg/react";

export function Example() {
  return (
    <Home size={24} color="currentColor" />
  );
}

Adding a “ for Accessibility

  Home

Renders as:

  
  Home

Styling with Tailwind CSS

Because the icons are regular components, Tailwind utilities work out of the box:

import { Search } from "@material-symbols-svg/react";

export function SearchButton() {
  return (
    <button className="flex items-center gap-2">
      <Search className="w-5 h-5" />
      Search
    </button>
  );
}

Next.js Optimization

For Next.js projects you can improve dev‑time behavior with optimizePackageImports:

// next.config.js
const nextConfig = {
  experimental: {
    optimizePackageImports: [
      "@material-symbols-svg/react",
      "@material-symbols-svg/react/rounded",
      "@material-symbols-svg/react/sharp",
    ],
  },
};

module.exports = nextConfig;

Official docs:

Next.js already optimizes some libraries (e.g., lucide-react, react-icons/*), but @material-symbols-svg/react is not included by default—so the above configuration is recommended.

Summary

• 3 800+ icons across 3 styles and 7 weights (plus filled).
• Zero build‑step conversion – import ready‑to‑use components.
• Consistent API across React, Vue, Svelte, Astro, and React Native.
• Tree‑shakable import‑path design for minimal bundle size.
• Full SVG prop support, Tailwind‑compatible, and accessible out of the box.

Give it a try and replace your icon‑font or SVG‑loader workflow with a clean, component‑first experience!

Material Symbols SVG – Browse, Inspect, and Use Icons Easily

When working with a massive icon set, having a dedicated browsing tool makes a huge difference. I built a site that lets you explore the Material Symbols collection and quickly grab the assets you need.

What the site offers

• Search by icon name
• Compare style, fill, weight, size, and color
• View framework‑specific import snippets
• Copy the SVG directly

Why it matters

Dealing with thousands of icons can be overwhelming. This tool helps you find exactly what you need—whether it’s a common UI icon or a niche one (think vacuum‑related symbols!). The sheer breadth of the set means you’ll keep discovering icons you didn’t even know existed. My personal favorite? The owl icon.

Goal

I wanted Material Symbols to feel like first‑class components rather than raw SVG assets that require an extra toolchain step.

Get started

• Documentation & usage guide –
• Full icon catalog –
• GitHub repository –

If you try it out, I’d love to hear your feedback!