Skip to content
Switch branches/tags

Slack Build Status Test Coverage Dependency Status PRs Welcome


Iconography for Grommet and React.js


npm install grommet-icons grommet-styles --save


yarn add grommet-icons grommet-styles


import { Facebook } from 'grommet-icons';

<Facebook />
<Facebook color='plain' />
<Facebook size='large' />
<Facebook size='xlarge' />

Visit our site for more icons.

Create Your Own Grommet Icon

Any 24x24px SVG may be converted to an icon using the <Blank> icon. For example:

import React from 'react';
import { Blank } from 'grommet-icons';

export const MyIcon = props => (
  <Blank {...props}>
    {/* your 24x24 svg goes here - e.g. here's a 24x24px circle */}
    <svg viewBox="0 0 24 24" aria-hidden="true" xmlns="">
      <circle cx="12" cy="12" r="5" />


Check out this codesandbox


The theme for the icon supports different colors and sizes. The default definition is:

theme = {
  global: {
    colors: {
      icon: '#666666',
  icon: {
    size: {
      small: '12px',
      medium: '24px',
      large: '48px',
      xlarge: '96px',
    extend: undefined,

You can customize sizing and/or colors by specifying your own theme. The colors property allows you to use color names. For instance: colors: { brand: '#ff0000' } would allow you to use <ZoomOut color='brand' />.

  import { ThemeProvider } from 'styled-components';
  import { base, deepMerge } from 'grommet-icons';
  const theme = deepMerge(base, {
    global: {
      colors: {
        brand: '#ff0000',
  return (
    <ThemeContext.Provider theme={theme}>
      <ZoomOut color='brand' />


To build this library, execute the following commands:

  1. Install NPM modules
$ npm install (or yarn install)
  1. Run pack
$ npm run build
  1. Test and run linters:
$ npm run lint
  1. Generate React icons:
$ npm run generate-icons