Implementing SVG icons in React


import React from 'react'
import './Icon.scss'

function Icon({ name, size }) {
  return (
    <i className="Icon">
        width={size ? `${size}px` : '32px'}

export default Icon
import Icon from './Icon'

<Icon name="home" />


  • Simple, gets the job done


  • You can not style these like an SVG (e.g. fill, stroke etc.) because they are imported as a static image.
  • Every image you include is a seperate image file requested and loaded


import React from 'react'
import './Icon.scss'

// Import all the svg icons as React Components
import { ReactComponent as Bell } from '../../icons/bell.svg'
import { ReactComponent as Chatroom } from '../../icons/chatroom.svg'
import { ReactComponent as Couple } from '../../icons/couple.svg'

// map the passed icon names and the component (i.e. the SVG file) to load
const icons = {
  bell: Bell,
  chatroom: Chatroom,
  couple: Couple,

function Icon({ name }) {
  let SVGicon = icons[name]

  return <SVGicon className={`Icon Icon-${name}`} />

export default Icon
<Icon name="bell" />


  • You can use SVGs as inline SVGs, no more browser requests for images, just inline code
  • You can style the SVGs with CSS


  • No ability to edit SVG in JSX

NOTES: - if you have a responsive SVG, one that uses <symbol> and <use> and <style> to show different version of the SVG, it’ll only work as a ReactComponent and not as <img src={filename} />