SVG Icon System in React

SVG as Image

import React from 'react'
import logo from './logo.svg' // Tell Webpack this JS file uses this svg

console.log(logo) // /logo.84287d09.svg

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />

export default Header

SVG as a React component

You can import an SVG as a React Component. This has been supported since Create React App 2.0 (react-scripts@2.0.0 and react@16.3.0)

import { ReactComponent as MyIcon } from './icon.svg'
export { MyIcon }
import { ReactComponent as Logo } from './logo.svg'
const App = () => (
    {/* Logo is an actual React component */}
    <Logo className="App-logo" alt="logo" />

Don’t forget the curly braces in the import! The ReactComponent import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename.

A ReactComponent SVG will show as inline <svg> when rendered. You can now use all the CSS magic.

.App-logo g {
  fill: red;

.App-logo path {
  stroke: palegoldenrod;
  stroke-width: 10px;
  fill: none;
  stroke-dasharray: 35px 15px;
  animation: orbit 1s infinite linear;

@keyframes orbit {
  to {
    sroke-dashoffset: 50px;

SVG with Props

To be continued.. Will probably have to leave the .svg files and add the paths in a .jsx file so we could use props

Case for converting SVGs into React components

  • Theming. You can change the color of all icons when you change the theme. But i’d argue you can do that with CSS as well
// wrapping SVGs in theme-able components
import styled from 'styled-components';
import theme from 'styled-theming';

export const backgroundColor = theme('mode', {
   light: '#fafafa',
   dark: '#0e0f11'
const LogoWrapper = styled.div`
   svg {
      fill: ${backgroundColor};