Create Custom Icons with

Getting Started with Icons

To get started you’ll need to first add Icons to your project:

# Yarn
yarn add grommet-icons

# or with NPM
npm install --save grommet-icons

Using the icons is very simple too:

import { Schedule } from 'grommet-icons';
<Schedule color='plain' size='xlarge' /> 
<Schedule size='large' /> 
<Schedule color='brand' /> 
<Schedule /> 

For a list of all of the available icons go to

Getting Started with React SVG Components

This article assumes you’re using create-react-app which uses SVGR under the hood. If you’re not using create-react-app then you will need to include it in your project yourself. See the SVGR documentation.

Once you have SVGR set up you can use it this way:

import { ReactComponent as Star } from './star.svg';

const App = () => (
    <Star />

Note, you have to import the SVG as ReactComponent which is a special convention of SVGR.

Combining Icons and SVGR

Once you have both Icons and SVGR in your project you can now make your own custom icons by doing this:

import { Blank } from 'grommet-icons';
import { ReactComponent as Star} from "./star.svg";

const StarIcon = props => (
  <Blank {...props}>
    <Star />

No account yet? Register

Published by Chris London

A serial entrepreneur, Chris is currently co-founder and CTO of tech start-up Cinch. Cinch is an automated marketing platform designed to share the right message at the right time with your customers.

Leave a comment

Your email address will not be published. Required fields are marked *