Fontsource Logo

Fonts

Documentation

Tools

Material Symbols Outlined

icons
google
Download IconDownload

Getting Started

DocumentationExternal Icon

Installation

Install the variable version of this font by running the following command:

⬤⬤

npm install @fontsource-variable/material-symbols-outlined

sh

Import

Include the following line in the root layout of your project to import the font:

FILL
wght
GRAD
opsz

⬤⬤

// Supports weights 100-700
import '@fontsource-variable/material-symbols-outlined';

jsx

CSS

Include the CSS in your project by adding the following line to your project:

⬤⬤

body {
  font-family: 'Material Symbols Outlined Variable', sans-serif;
}

css

Note:Using Material Symbols on your website with Fontsource requires additional steps. Please refer to the Material Symbols documentation for more information.

Font Details

Download Icon

Downloads: 340.18K

Edit Icon

Last Modified: 2025-11-20

GitHub IconGithub
NPM IconNPM