React component to render inline svg icons

Usage no npm install needed!

<script type="module">
  import reactInlineSvgIcon from '';



react-inline-svg-icon is a simple react component that renders inline svg.

View demo


  • Inline SVG


npm i react-inline-svg-icon --save  # or yarn add react-inline-svg-icon --save


import { Icon } from 'react-inline-svg-icon';


render () {
  return (
      <Icon name="menu" color="#1abc9c" />



name default description
className - This specifies a css class for an icon
color #000 This specifies the fill color of the shape
name This specifies the name of the icon to render
size 25 This specifies the size of the icon i.e width (the height is set to auto
title 'icon' This specifies the <title/> tag for the svg

Demo using react-storybook

git clone
cd react-inline-svg-icon
npm install # or yarn
npm run storybook

Goto localhost:6060

How to add new icons

  1. Visit
  2. Import svg icon of choice. (For Angry Artichoke Project, visit ... request access if you can't get in)
  3. Customize svg as needed. Refer to this article if you need to understand svgs better ->
  4. Copy path code from 'Code' tab after you're done customizing (from above)
  5. Add new case (in lowercase i.e 'clock' ) within the switch statement below Sort cases in alphabetical order
  6. Paste svg path code in case return statement like so return ( <g>[PASTE YOUR SVG PATH CODE HERE]</g>)
  7. You can now use your svg icon like so <Icon name='clock' size={25} /> anywhere after you import this file
  8. Add a test case in the 'Icons.test.js'

To Do

  • Convert svg files to inline and auto add to react component with single command
  • Gulp tooling with gulp-svgo


Icon Credits