How to Use Popular Icon Sets in Your React Apps with React Icons

Icons are used in most React applications. A popular approach for that task is to add one of popular icon sets for that such as Font Awesome or Material Design. However, every icon set provides its own way to configure and use icons, which complicates the development process. You may find yourself implementing intermediate helpers and wrappers around icon sets to make it easier to work with CSS classes and HTML elements required by a specific icon set. React Icons is a small library that helps you to simplify using icons in your React applications.

React Icons is a library that provides popular icons for your React applications. You can select from 10 popular icon sets: Font Awesome, Ionicons, Material Design icons, Typicons, Github Octicons icons, Feather, Game Icons, Weather Icons, Devicons, and Ant Design Icons.

React Icons provides icons as React components, so you can import and add them in your applications with no additional setup. It also provides a unified way to style icons to match your application's style.

This library is using ES6 imports to add icons so only icons we use will be added to application. All icons are in SVG format which allows to style and scale icons without a quality loss. SVG icons take less space compared to other image formats as well.

Adding React Icons to Project#

We start by adding React Icons to a project:

Once done, we can add icons to our application. Each icon is available as a separate React component:

We import the star icon from the Material UI icon set as the MdStar component. Only this icon will be added to our application.

Using React Icons#

In the same way we can import icons from other icon sets:

Here we add star icons from Material Design, Font Awesome, and Typicons. Each icon set has got its own dedicated path in the react-icons package. For example, Material Design icons are available at react-icons/md.

Styling Icons#

To style a single icon, we can use properties available for each icon component:

In this example, we're using the color property to define a color of an icon, size to define the font size, style to provide a style object, and className to specify a CSS class name for an icon.

Using IconContext to Style All Icons#

To style a number of icons in a component, we can use the IconContext provided by the React Icons:

First, we import the IconContext. Next, we use IconContext.Provider to wrap our component to provide a context. We define the value property to specify a common style for all the icons in the component. Properties that we can specify for the value are the same as for a single icon: color, size, style, and className.

Conclusion#

In this post, we've seen how React Icons makes it easy to add icons to your React application. It abstracts all the specifics of icon sets and provides icons as React components. This makes it easy for you to add icons, style them, and even refactor to another icon set if needed.