How to Use SVG Icons in React

Integrating SVGs into Your React Application

React makes building user interfaces a breeze, and integrating scalable SVG icons is no exception. Here are the best methods to add SVGs to your React projects.

Method 1: Importing as a Component

If you are using Create React App or a modern bundler like Vite with SVGR, you can import an SVG file directly as a React component.

import { ReactComponent as HeartIcon } from "./heart.svg";

function App() {
  return <HeartIcon className="icon-red" />;
}

Method 2: Inline SVG

You can also paste the raw SVG code directly into your JSX. This allows for ultimate control over styling using CSS classes or inline styles.

Method 3: Icon Libraries

The easiest approach is often using an established library like `react-icons` or `lucide-react`, which package thousands of SVGs as ready-to-use components.