How to Use SVG Icons in React App?

We don't need special treatment for SVG. We can have SVG tag in JSX the same way we have div or anchor tag.

export const CoffeeIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="feather feather-coffee"
    >
      <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
      <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
      <line x1="6" y1="1" x2="6" y2="4"></line>
      <line x1="10" y1="1" x2="10" y2="4"></line>
      <line x1="14" y1="1" x2="14" y2="4"></line>
    </svg>
  )
}

I store all the icons for my app in the ui/icons folder. If we open any of those files, we'll find a regular React component that I render as any other React component.

To find an SVG icon for my project, I usually go to websites like Google Fonts or Feather.

To get a bell icon, I would search for it, download the icon, then open it in the code editor.

Then I would create a component, copy-paste SVG content into the icon component, then fix all format errors with VS Code's auto-fix. We don't want a hardcoded size. Let's set it to 1em width and height to make it the same size as the parent. To inherit the parent's color, we'll set the stroke to currentColor.