How to use SVG icons in React

Use an icon component

Install lucide-react with npm install lucide-react, then import only the icons you need.

import { Search } from 'lucide-react';

export function SearchButton() {
  return <button aria-label="Search"><Search aria-hidden="true" /></button>;
}

Make icons accessible

For an icon-only button, give the button an accessible name and hide a decorative icon from assistive technology. If an icon conveys information on its own, provide an appropriate text alternative.

Choose a consistent style

Use a consistent grid, stroke weight, and visual style. Check the source library license before shipping assets.