December 29, 2024

How to Use Icons in React: A Guide to Libraries and SVG Methods

Icons are an essential part of modern user interfaces, and integrating them into a React application is a common task for developers. However, choosing the right method can impact your project's performance, customizability, and maintainability.

This guide will walk you through the most popular ways to use icons in React, highlighting the pros and cons of each approach to help you make the best decision for your project.

Method 1: Using an Icon Library (The Easiest Way)

Icon libraries are packages that bundle thousands of pre-made icons as React components. This is by far the most popular and straightforward approach.

Popular Libraries:

  • react-icons: A massive library that includes popular icon sets (Font Awesome, Material Icons, etc.) in a single package.
  • lucide-react: A lighter, tree-shakable alternative with a focus on simplicity and consistency. This is the library used by BraveColors!

How It Works (with lucide-react)

  1. Installation:

    npm install lucide-react

  2. Usage: Import the icon you need directly from the library and render it as a component.

    import { CheckCircle, AlertTriangle } from 'lucide-react';

function MyComponent() {
  return (
    <div>
      <p>
        <CheckCircle color="green" size={24} />
        Saved successfully!
      </p>
      <p>
        <AlertTriangle color="orange" size={24} />
        Warning: Low disk space.
      </p>
    </div>
  );
}

  • Pros:

    • Simple and Fast: No need to manually handle SVG files.
    • Consistent Size and Style: All icons in a set are designed to work well together.
    • Customizable via Props: Easily change size, color, and strokeWidth with component props.
    • Tree-Shaking: Modern libraries like lucide-react ensure that only the icons you import are included in your final bundle, optimizing performance.

  • Cons:

    • Dependency: Adds another dependency to your project.
    • Limited Selection: You are limited to the icons available in the library.

Method 2: Importing SVGs as React Components

For setups created with Create React App or Next.js, you can import SVG files directly as React components. This offers more control than a library without the manual work.

How It Works

  1. Save Your SVG: Place your .svg file in your src directory (e.g., src/assets/my-icon.svg).

  2. Import and Use:

    import { ReactComponent as MyIcon } from '../assets/my-icon.svg';
// For Next.js, the syntax is slightly different:
// import MyIcon from '../assets/my-icon.svg';


function MyComponent() {
  return (
    <div>
      <p>Custom Icon: <MyIcon fill="blue" width="24" height="24" /></p>
    </div>
  );
}

  • Pros:

    • Full Control: You can use any SVG icon, including custom illustrations.
    • Performant: The SVG is bundled into your JavaScript during the build process.
    • Stylable: You can pass props like fill or className to style the icon.

  • Cons:

    • Setup: Requires your build tool to be configured correctly (though most modern frameworks support this out of the box).
    • Management: You have to manually manage the SVG files in your project.

Method 3: Inline SVGs

This method involves copying the SVG code directly into your JSX.

How It Works

  1. Open the SVG File: Open your SVG file in a code editor to see the XML code.

  2. Copy and Paste into JSX: Copy the <svg> code and paste it directly into your component. Note that you may need to rename attributes like class to className and stroke-width to strokeWidth.

    function MySVGIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2" // Note the camelCase
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M20 6 9 17l-5-5" />
    </svg>
  );
}

  • Pros:

    • Maximum Control: You have direct access to every element within the SVG and can animate it with CSS or JavaScript.
    • No Extra Requests: Because the icon is part of your HTML, there are no separate file requests.

  • Cons:

    • Clutter: Your JSX can become unreadable quickly if you inline many or complex icons.
    • Maintainability: Updating an icon in multiple places can be tedious. It's best to create a separate component for each inline icon.

Conclusion

  • For most projects, using a dedicated library like lucide-react is the best approach. It's simple, performant, and offers a great selection of consistent icons.
  • For custom icons or illustrations, importing SVGs as components is a clean and efficient method.
  • For icons that require complex animations or dynamic styling, inline SVGs are the most powerful option but should be encapsulated in reusable components.

To find the perfect icon component for your next React project, check out the BraveColors Icon Explorer. You can browse icons, customize them, and get the JSX code to copy directly!

Share this post