React SVG Icons
Icon SetsSearchGuide

Rendering and Size

You start by copying the icon to its own component file. As per the icon below


// file HeartIcon.tsx
  import React from "react";

  function HeartIcon(props) {
    return (
      <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
        <path d="M12.76 3.76a6 6 0 018.48 8.48l-8.53 8.54a1 1 0 01-1.42 0l-8.53-8.54a6 6 0 018.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 10-5.66-5.66l-1.46 1.47a1 1 0 01-1.42 0L9.83 5.17a4 4 0 10-5.66 5.66L12 18.66l7.83-7.83z" />
      </svg>
    );
  }
  export default HeartIcon;

Then you can render them directly


import React from 'react'
import HeartIcon from './HeartIcon'

export const MyComponent = () => {

  return (
    <div className='flex items-center'>
      <HeartIcon className="text-red-700" width='48px' height='16px' />
      <HeartIcon className="text-purple-700" width='48px' height='32px' />
      <HeartIcon className="text-pink-700" width='48px' height='48px' />
    </div>
  )
}

Color

By default, the svg icon uses currentColor so to change the color you can do 2 things, you can either pass the color directly via className or style or you can set the color from an outer component.


import React from 'react'
import HeartIcon from './HeartIcon'

export const MyComponent = () => {

  return (
    <div className='flex items-center'>
      <i style={{ color: 'pink'}}>
        <HeartIcon width='48px' height='48px' />
      </i>
      <i className='text-pink-600'>
        <HeartIcon width='48px' height='48px' />
      </i>
      <HeartIcon className="text-pink-500" width='48px' height='48px' />
    </div>
  )
}

Wrapper Icon

The above sometimes can be too verbose to use, you can rectify this by creating your own wrapper icon that can simplify the attributes. An example of this wrapper component is shown below.


import React, { DetailedHTMLProps, HTMLAttributes } from 'react'

interface IIconProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  size?: number
  color?: string
  icon: React.ReactType  
}

export const Icon: React.FC<IIconProps> = (props) => {
  const { size, color, icon, style: styleArg, ...svgProps } = props
  let svgExtraProps: any = {}
  
  if (size !== undefined) {
    svgExtraProps.width = `${size}px`
    svgExtraProps.height = `${size}px`
  } else {
    // default
    svgExtraProps.width = '24px'
    svgExtraProps.height = '24px'
  }

  if (color !== undefined) {
    svgExtraProps.style = { color, ...styleArg }
  }
  const IconComp: React.ReactType = icon
  return (    
    <IconComp {...svgProps } {...svgExtraProps} />    
  )
}

Then using it simply becomes a matter of doing something like:


import React from 'react'
import HeartIcon from './HeartIcon'

export const MyComponent = () => {

  return (
    <div className='flex items-center'>  
      <Icon color='deeppink' icon={HeartIcon} />        
      <Icon 
        onClick={() => alert('pink')} 
        color='deeppink' 
        size={48} 
        icon={HeartIcon} 
      />      
      <Icon 
        className='text-pink-800 hover:text-pink-600'          
        size={48} 
      icon={HeartIcon} />            
    </div>
  )
}

Animation

You can animate some svg icons by simply using css. For example, the given keyframe can be applied


@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg);
  }
}

You should now be able to apply it as a css or style


import React from 'react'
import HeartIcon from './HeartIcon'

export const MyComponent = () => {

  return (
    <div className='flex items-center'>      
      <Icon 
        style={{ animation: 'rotate 1s linear infinite' }}        
        color='deeppink' 
        size={32} 
        icon={Refresh} 
      />              
    </div>
  )
}