How to Use SVG Icons in React with React Icons and Font Awesome

Icons are an essential part of modern web design. They help convey meaning and actions visually without relying solely on text labels. When designing user interfaces in React, developers have many options for adding icons to their apps. Two popular techniques are using the React Icons library and embedding inline SVG code. In this guide, we‘ll explore both approaches to help you effectively use SVG icons in your React projects.

Why Use SVG Icons?

SVG (Scalable Vector Graphics) is a web-friendly vector image format. Unlike raster image formats like PNG or JPEGs, SVGs are defined by XML code that describes the shapes, paths, and fills to render the graphic. This has several advantages:

1. Resolution independence – SVGs retain crisp edges at any size without becoming pixelated. They look sharp on high resolution screens and scale smoothly when resized.

2. Small file size – For simple graphics like icons, the SVG code is usually much more compact than an equivalent PNG.

3. Styling with CSS – Because SVGs are code, their appearance can be customized with CSS. Properties like color, stroke width, and opacity can be changed on hover states or with media queries.

4. Animatable – SVG elements can be animated with CSS keyframe animations or JavaScript libraries for more advanced effects.

5. Accessible – Inline SVG can include tags to be identified by screen readers, unlike icon fonts which are not semantic.

For user interface icons, these features make SVG an ideal choice. Let‘s look at how to easily add them to a React app.

Using React Icons Library

The quickest way to start using SVG icons in a React project is with the React Icons library. This package includes over 20 popular open source icon sets with thousands of icons as ready-to-use components.

Some of the icon sets included are:

• Font Awesome
• Material Design
• GitHub‘s Octicons
• Feather Icons
• Game Icons
• Weather Icons
• And many more…

The icons are pre-built as React components so they can be easily imported and rendered in your JSX code. Here‘s how to get started:

Step 1: Install React Icons Package

First, add the react-icons npm package to your project:

npm install react-icons

Or with yarn:

yarn add react-icons

This will install all of the icon libraries into your node_modules folder. Don‘t worry about the package size, only the icons you import will be included in your app build.

Step 2: Import Icons

React Icons exports each icon as a named component. The name combines the icon set prefix with the specific icon name. For example, to use the rocket icon from Font Awesome:

import { FaRocket } from ‘react-icons/fa‘;

The fa refers to the Font Awesome icon set. For other sets, use the appropriate prefix, like md for Material Design, gi for Game Icons, etc.

You can browse and search all the available icons on the React Icons website. Clicking an icon will copy the import code to the clipboard.

Step 3: Render the Icon

With the icon imported, you can render it in your component‘s JSX like any other React component:

function MyComponent() {
  return (
    <div>
      <h1>
        <FaRocket /> To the Moon!
      </h1>
      <p>Ready for liftoff...</p>  
    </div>
  )
}

The icon will inherit its size and color from the parent element‘s font styles. In this example, the rocket icon will appear next to the heading text.

Customizing Icons

React Icons components accept props to modify their appearance. Some useful ones are:

• size – Sets the icon size, e.g. size="24px" or size="1.5em"
• color – Overrides the inherited color, e.g. color="red"
• title – Sets the icon title for accessibility

You can also target the icon with CSS to apply hover states and other styling:

.icon-rocket {
  color: inherit;
  vertical-align: -0.2em;
}

.icon-rocket:hover {
  color: #ff0000;
}

Tips for Using React Icons

• Stick to a consistent icon set in your app for visual harmony
• Avoid mixing too many different icon styles
• Use semantic HTML around icons for accessibility
• Apply ARIA labels if the icon is not accompanied by visible text
• Override font sizes on parent elements if you want bigger/smaller icons

Embedding Custom SVG Icons

Sometimes you may need to use custom icons not found in open source sets. Or maybe you want to modify an SVG and embed it directly for more control. React makes this straightforward by allowing inline SVG in JSX.

Step 1: Export Icon SVG Code

First, you‘ll need the raw SVG code for your icon. Usually, the designer provides an SVG file exported from a program like Adobe Illustrator or Sketch.

Open the SVG file in a code editor to see the XML code. It should look something like this:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
  <circle cx="12" cy="7" r="4"></circle>
</svg>

SVGs contain <path> elements that define the shape and other elements like <circle>, <rect>, and <polygon>. The viewBox attribute defines the coordinate system.

Copy the SVG code to use in the next step.

Step 2: Wrap SVG in React Component

Inline SVGs can be pasted directly into a React component‘s JSX. But it‘s better to wrap the SVG in its own component for reusability.

Create a new file in your components folder with a name that describes the icon. For example, UserIcon.js.

Paste the SVG code inside a functional component, replacing the XML-style fill and stroke attributes with JSX style props if needed:

import React from ‘react‘;

function UserIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
      <circle cx="12" cy="7" r="4"></circle>
    </svg>
  );
}

export default UserIcon;

Now you have a reusable <UserIcon> component you can import in other components.

Step 3: Import and Render Icon

In the component where you want to display the icon, import your new icon component:

import UserIcon from ‘./UserIcon‘;

Then render it in your JSX:

function Profile() {
  return (
    <div>
      <UserIcon />
      <h2>John Doe</h2>
    </div>  
  );
}

The icon will be displayed with the default width and height from the SVG.

Customizing Embedded SVG

One advantage of embedding SVGs in components is the ability to customize them with props and CSS.

To make the icon resizable, remove the width and height attributes and add a className to the <svg>:

function UserIcon({ size = 24, color = ‘#333‘ }) {
  return (
    <svg 
      className="user-icon" 
      width={size} 
      height={size} 
      viewBox="0 0 24 24" 
      fill="none" 
      xmlns="http://www.w3.org/2000/svg"
    >
      <path fill={color} d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
      <circle fill={color} cx="12" cy="7" r="4"></circle>
    </svg>
  );
}

Now the size and color can be changed with props when rendering:

<UserIcon size={36} color="orange" />

And the user-icon class can be targeted with CSS for further styling:

.user-icon {
  margin-right: 0.5rem;
  vertical-align: middle; 
}

.user-icon:hover {
  transform: scale(1.2);
}

Tips for Custom SVG Icons

• Keep SVGs simple – fewer nodes means smaller file size
• Inline SVGs can be made accessible with <title> and aria-label attributes
• Sanitize third-party SVGs to avoid malformed or malicious code
• You can still use an icon library like React Icons alongside custom SVG components

Conclusion

Both React Icons and inline SVGs are excellent ways to enhance your React UI with beautiful, flexible icons. React Icons is convenient for dropping in many well-designed open source icons. Inline SVG is best for full control over custom icons and effects. Try both techniques in your next project to see which you prefer.

The important thing is to use icons judiciously to clarify meaning and add visual interest without overwhelming your app design. When in doubt, keep icons simple, recognizable, and consistent. Have fun experimenting with SVG icons in React!