React Material Design Icons

React Material Design Icons – built with Pixo, Styled Components, and Styled System.

npm i rmdi
Sh
// import icons individually for better tree-shaking
import Accessibility from 'rmdi/lib/Accessibility'

const App = props => (
  <Accessibility
    size={32}
    color='tomato'
  />
)
React JSX
// import all icons as a single component
import { Icon } from 'rmdi'

const App = props => (
  <Icon
    name='accessibility'
    size={32}
    color='tomato'
  />
)
React JSX

List of Icons

See the icon list for a complete list of all icons available

Props

Prop Type Description
size number width and height in pixels
color string fill color, uses Styled System's color function

Spacing Props

Margin can be applied with the following props, which use Styled System's space function.
Margin props accept numbers for pixel values, strings with CSS units, or arrays for responsive margin

Prop Description
m margin
mt margin-top
mr margin-right
mb margin-bottom
ml margin-left
mx margin-left and margin-right
my margin-top and margin-bottom

Contributing

npm install
Sh

The build process will:

  1. Parse the material-design-icons package for SVG source code
  2. Copy the icons to the svg/ folder
  3. Create an examples/ folder for tests and development
  4. Run [Pixo][pixo] on the svg/ folder and output to src/
  5. Run Babel on the src/ folder and output to lib/

Tests:

npm test
Sh

To run the development server:

npm start
Sh

GitHub