A library of React components for Material Design Icons created by Google. This library is a fork of tabler-icons-react with some modifications. Special thanks to @konradkalemba for his work.
- Zero dependencies.
- TypeScript friendly.
- 3000+ icons with variants: Filled, Outlined, Round, Sharp, TwoTone. You can explore and choose your icons at Material Design Icons.
- SVGs optimized with SVGO.
- Easy to import using named exports.
- Tree-shakeable verified by agadoo.
The package is available via npm and can be installed using npm or yarn:
# npm
npm install react-icons-material-design
# yarn
yarn add react-icons-material-designAfter installing the package, you can import React Material Icons as React components:
import {
IconLocationCityFilled,
IconLocationCityOutlined,
IconLocationCityRound,
IconLocationCitySharp,
IconLocationCityTwoTone,
} from 'react-icons-material-design';- Basic usage:
import React from 'react';
import { IconLocationCityFilled } from 'react-icons-material-design';
export default function Example() {
return (
<div>
<IconLocationCityFilled color='red' size={24} />
</div>
);
}- Usage with a custom component:
import React from 'react';
import { IconLocationCityFilled } from 'react-icons-material-design';
export default function Example() {
return (
<div>
<YourIconComponent icon={IconLocationCityFilled} />
<YourIconComponent icon={<IconLocationCityFilled />} />
<YourIconComponent icon={<IconLocationCityFilled size={24} color='red' />} />
</div>
);
}| name | type | default |
|---|---|---|
size |
Number,String | '1em' |
color |
String | currentColor |
import React from 'react';
import { IconLocationCityFilled } from 'react-icons-material-design';
export default function Example() {
return (
<div>
<IconLocationCityFilled color='red' size={24} />
</div>
);
}- Icons are already set with
width="1em" height="1em"allowing you to change the size viafont-size. - Icons are already set with
fill=currentColorallowing you to change the color viacolor.
CSS
import React from 'react';
import { IconLocationCityFilled } from 'react-icons-material-design';
export default function Example() {
return (
<div>
<IconLocationCityFilled style={{ fontSize: '2em', color: 'green' }} />
</div>
);
}TailwindCSS
import React from 'react';
import { IconLocationCityFilled } from 'react-icons-material-design';
export default function Example() {
return (
<div>
<IconLocationCityFilled className="text-3xl text-green-700" />
</div>
);
}This project is licensed under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent