material-symbols-react-native

An icon placer component for Google's Material Symbols to use with React Native.

Icons definitions are distributed as individual packages for reducing download size. Also, each icon can be imported separately to reduce build size.

It also works with ExpoGo.

Installation

1. Make sure that you have installed the react-native-svg library.

   See https://github.com/react-native-community/react-native-svg#installation

2. Install this library.

npm install material-symbols-react-native

3. Install an icon definition package.

npm install @material-symbols-react-native/variant-000

Current available definitions

• variant: outlined / weight: 100
• variant: outlined / weight: 200
• variant: outlined / weight: 300
• variant: outlined / weight: 400
• variant: outlined / weight: 500
• variant: outlined / weight: 600
• variant: outlined / weight: 700
• variant: rounded / weight: 100
• variant: rounded / weight: 200
• variant: rounded / weight: 300
• variant: rounded / weight: 400
• variant: rounded / weight: 500
• variant: rounded / weight: 600
• variant: rounded / weight: 700
• variant: sharp / weight: 100
• variant: sharp / weight: 200
• variant: sharp / weight: 300
• variant: sharp / weight: 400
• variant: sharp / weight: 600
• variant: sharp / weight: 500
• variant: sharp / weight: 700

Usage

import { MsIcon } from 'material-symbols-react-native';
import { msIconDefinition } from '@material-symbols-react-native/outlined-400';

<MsIcon icon={msIconDefinition} color="red" size={48} />;

In the above example, msIconDefinition is one of the icons provided by the definitions packages. The names of the icons are the same that can be found in Material Symbols website but camel-cased and starting with ms. Filled option is made by adding Fill to the end of the name.

Icon name examples:

• ms1KPlus
• msArrowBack
• msCheckBoxFill
• msRadioButtonUncheckedFill

Acknowledgements

This library uses the scripts of material-design-icons for downloading Material Symbols SVG's. Outstanding job!

This library is inspired in the mechanics of react-native-fontawesome. By far, the most beautiful icons ever made!