How to use icons in React

React treats SVGs as first-class components, which makes icons a joy: import one, drop it in your JSX, and pass size or color as props. Here are the three common approaches.

1. SVG as a component

Most React toolchains (Vite, Next.js, CRA) can import an SVG as a component so you can style it with props:

import Home from './home.svg?react'

<Home width={24} className="text-indigo-500" />

2. An icon library

Packages like lucide-react, react-icons, @phosphor-icons/react and Heroicons ship tree-shakeable components — you import only the icons you use, so your bundle stays small.

import { Rocket } from 'lucide-react'
<Rocket size={20} />

3. On-demand with Iconify

The @iconify/react component loads any icon from 200,000+ open-source icons on demand, so you're not tied to one set:

import { Icon } from '@iconify/react'
<Icon icon="mdi:rocket-launch" width={24} />

Frequently asked questions