Best Feather-inspired animated icon libraries for React
Tags: react, webdev
Published: 2023-08-16 14:24:52

**Written by [Kevin Tomas](https://blog.logrocket.com/author/kevintomas/)✏️**

In this article, we’ll walk you through using [Feather-inspired animated icon libraries](https://feathericons.com/) in React applications and guide you through setting up a React project, adding and customizing icons using various libraries, and handling common issues like double rendering. 

By the end of the article, you'll have a firm grasp on integrating and manipulating animated icon libraries in React. The detailed steps and accompanying GIFs provide a practical, hands-on guide for readers. The article's sections are as follows: 

_Jump ahead:_

*   [Setting up a React project](#setting-up-react-project)
*   [Installing and using Font Awesome](#installing-using-font-awesome)
*   [Working with react-icons-animated](#react-icons-animated)
*   [Implementing React UseAnimations](#implementing-react-useanimations)
*   [Using LottiePlayer icons](#using-lottieplayer-icons)
*   [Incorporating Lordicon icons](#incorporating-lordicon-icons)

## Setting up a React project <a name="setting-up-react-project">

React is particularly effective at creating single-page applications and handling the view layer for web and mobile apps. It enables developers to create reusable UI components, simplifying the coding process and making it more efficient. 

To create a new project with React, open your terminal and run the following command for an automatic setup:

```bash
npx create-react-app my-app

# or

yarn create react-app my-app
```

Replace `my-app` with the name of your project, then navigate to your project’s directory and start your developer server with the following command:

```bash
cd <project-name>
npm start
```

To confirm that everything has been set up properly, navigate to `[http://localhost:3000]` in your browser. If the setup was successful, you'll be greeted by your brand-new React application, alive and running smoothly! 

We are now prepared to enhance our project by incorporating some animated icon libraries.

## Installing and using Font Awesome <a name="installing-using-font-awesome">

[Font Awesome animated icon library](https://fontawesome.com/docs/web/style/animate) is an impressive resource that significantly boosts the visual appeal of any web project. Its extensive, customizable icon collection, combined with high-quality, vector-based designs, ensures consistency and clarity across various resolutions. 

You can choose from a variety of animations, including spin, bounce, fade, shake, beat and more. Moreover, the library's seamless integration process is as simple as including classes in your HTML, amplifying its appeal and practicality. 

Let’s begin by installing the necessary Node module packages. Open your command line interface, navigate to the root level of your project, and execute the following commands: 

For the `core package`:

```bash
npm i --save @fortawesome/fontawesome-svg-core
```

For the Free icons styles:

```bash
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
```

If you want to access their Pro icons, you need to [configure access for Pro](https://fontawesome.com/docs/web/setup/packages#configure-access). 

Next, proceed to incorporate the [Font Awesome React component](https://fontawesome.com/docs/web/use-with/react/add-icons) into your project by running the following command:

```bash
npm i --save @fortawesome/react-fontawesome@latest
```

There are three flexible ways of incorporating these icons into your project:

1.  **The Dynamic import**: Allows you to add icons individually as you need them, ensuring that your bundle includes only those in use
2.  **The Individual method**: Follows a similar approach, again ensuring your bundle remains lean by only including icons you've directly imported
3.  **The Global method**: Allows you to import icons once into an initialization module, removing the need to import them into each component once they've been added to the library. This method offers the convenience of having all icons readily available throughout your project

We've chosen to integrate icons into our project by using the Individual method. 

To incorporate the desired icons into your project, import `FontAwesomeIcon` alongside the specific icons you wish to use, such as `faHandshake` and `faEnvelope`:

```javascript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHandshake } from "@fortawesome/free-regular-svg-icons";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
```

When it's time to position your icons, just place them in the desired location like this:

```javascript
export default function FontAwesome() {
 return (
   <>
     <FontAwesomeIcon icon={faHandshake} shake size="3x"
/>
     <FontAwesomeIcon icon={faEnvelope}  spin size="3x" />
   </>
 );
}
```

The appearance of the icons will vary based on whether you import your icons from `"@fortawesome/free-regular-svg-icons"` or `"@fortawesome/free-solid-svg-icons"`. Icons from the former will appear as outlines (regular), while those from the latter will be fully filled (solid): ![Font Awesome icons](http://blog.logrocket.com/wp-content/uploads/2023/08/font-awesome-icons.gif) You can modify the styling and customize these animations according to your preferences. With the `size` property, you can easily adjust the size of the icons, offering a range of options from `xs` to `10x`. If you want to alter the color, simply add the `style` prop and specify your desired color, as demonstrated in the following example:

```javascript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from "@fortawesome/free-solid-svg-icons";

export default function FontAwesome() {
return (
<FontAwesomeIcon icon={faHeart} size="3x" beat fade
 style={{ color: "red" }}
       />
);
}
```

You can [explore a comprehensive list of available icons here](https://fontawesome.com/search).

## Working with react-icons-animated <a name="react-icons-animated">

[React Icons Animated](https://github.com/frontend-joe/react-icons-animated) is a remarkable collection of animated icons designed specifically for React applications. Developed by the talented [frontend-joe](https://github.com/frontend-joe), this package is built with TypeScript to ensure reliability and maintainability. These icons are optimized for dark contrast environments, so the stroke style cannot be modified, but they excel particularly when you require a burger menu icon. 

To get started, install the npm package with the following command:

```bash
npm i react-icons-animated
```

Next, you'll need to import your desired icon using the following code. Remember, it's essential to wrap the icon within a button element as the `onClick` function does not work directly on the icon itself:

```javascript
import { BurgerClose} from "react-icons-animated";
import { useState } from "react";

export const App = () => {
  const [isClosed, setIsClosed] = useState(false);

  return (
    <button
      onClick={() => setIsClosed(!isClosed)}
      style={{
        width: "50px",
        height: "50px",
        display: "grid",
        placeItems: "center",
      }}
    >
      <BurgerClose isClosed={isClosed} />
    </button>
  );
};
```

![react-icons-animated icons](http://blog.logrocket.com/wp-content/uploads/2023/08/react-icons-animated.gif) A [wide range of icons with various styles](https://icons.frontendjoe.com/) is available for you on the react-icons-animated website. 

If you want to have multiple icons on the same page, it's important to initialize the state for each icon individually. This ensures proper management and control over each icon's behavior and properties:

```javascript
import { BurgerRotate, BurgerSwipe } from "react-icons-animated";
import { useState } from "react";

export default function ReactIcons() {
 const [isClosed, setIsClosed] = useState(false);
 const [isClosed2, setIsClosed2] = useState(false);
 return (
   <>
     <a href="https://www.npmjs.com/package/react-icons-animated?activeTab=readme" target="_blank >
       <code>react-icons-animated</code>
     </a>
     <button
       onClick={() => setIsClosed(!isClosed)}
       style={{
         width: "50px",
         height: "50px",
         display: "grid",
         placeItems: "center",
         backgroundColor: "black",
         borderStyle:"none"    
       }}
     >
       <BurgerRotate isClosed={isClosed} />
     </button>

     <button
       onClick={() => setIsClosed2(!isClosed2)}
       style={{
         width: "50px",
         height: "50px",
         display: "grid",
         placeItems: "center",
         backgroundColor: "black",
         borderStyle:"none
       }}
     >
       <BurgerSwipe isClosed={isClosed2} />
     </button>
   </>
 );
}
```

You can customize the style according to your preferences by modifying the properties inside the `style` attribute. Feel free to adjust the style to your liking and achieve the desired visual appearance.

## Implementing React UseAnimations <a name="implementing-react-useanimations">

[React UseAnimations](https://react.useanimations.com/) is a micro icon library designed specifically for React applications. With a focus on providing dynamic animated icons, this lightweight library is an excellent choice for enhancing your projects’ visual appeal. 

To begin, you'll need to install the npm package in your project with the following command:

```bash
npm install -S react-useanimations
```

There are a couple of prerequisites to fulfill before we incorporate the desired icons into your project. Before implementation, make sure to import both `React` and `UseAnimations`:

```javascript
import React from "react";
import UseAnimations from "react-useanimations";
```

Following that, you'll need to import the specific icon or icons you wish to use. As an example, consider the following import statement:

```javascript
import activity from "react-useanimations/lib/activity";
```

```javascript
export default function UseAnimation() {
 return (
  <>
         <UseAnimations animation={activity} size={56} />
  </>
 );
}
```

The resulting output will resemble the following: ![React UseAnimation static icons](http://blog.logrocket.com/wp-content/uploads/2023/08/react-useanimation-icons-static.png) ![React UseAnimation dynamic icons](http://blog.logrocket.com/wp-content/uploads/2023/08/react-useanimations-icons-dynamic.gif) The issue above arises when the icon is rendered twice, but only one is animated. One approach to resolving this is to disable `<StrictMode>`, as outlined in the [documentation](https://github.com/useAnimations/react-useanimations/issues/68). React's `<StrictMode>` renders each component twice in order to detect and report any potential issues within your application. However, it's generally not recommended to disable `<StrictMode>`, as it may result in undetected bugs and errors. 

Alternatively, you can implement the icons using a controlled checkbox or by wrapping the animation within an element using `render props`, as explained in the [documentation](https://github.com/useAnimations/react-useanimations). 

You can [explore the available properties for custom styling here](https://github.com/useAnimations/react-useanimations). For instance, to change the color of the icon, you can use the `strokeColor` property within the `UseAnimations` icon or the `fillColor` property for filling an icon:

```javascript
<UseAnimations animation={lock} size={56} strokeColor="blue" />

<UseAnimations
         animation={star}
         size={56}
         fillColor="yellow"
         strokeColor="red"
       />
```

The visual outcome will resemble the following: ![React UseAnimation color icons](http://blog.logrocket.com/wp-content/uploads/2023/08/react-useanimation-color-icons.png)

## Using LottiePlayer icons <a name="using-lottieplayer-icons">

This comprehensive library offers a wide selection of captivating and dynamic animated icons powered by Lottie. Whether you need icons for your website, mobile app, or any digital project, LottieFiles has got you covered. 

LottieFiles offers multiple approaches to implement their icons, and for our purposes, we have chosen the [LottiePlayer React component](https://github.com/LottieFiles/lottie-react). This approach provides a seamless integration of LottieFiles icons into your React projects. 

Please note that in order to use Lottie icons, you’ll need to download their corresponding Lottie JSON files. To do this, you will need to create an account first. However, to simplify the process, we have opted to use the free Lottie files available from [LottieFlow](https://finsweet.com/lottieflow), which gives you the flexibility to choose an option that best suits your needs. 

To explore more implementation options and detailed instructions, I recommend referring to the comprehensive [LottieFiles documentation](https://github.com/LottieFiles). 

To begin, you'll need to install the necessary [npm package](https://www.npmjs.com/package/@lottiefiles/lottie-player) with the following command:

```bash
npm install --save @lottiefiles/react-lottie-player
```

After successfully installing the npm package, you'll also need to import the `LottiePlayer` package into the component where you intend to implement the icon. Ensure you include the following import statement:

```javascript
import "@lottiefiles/lottie-player";
```

Next, add the `Player` element and set the `src` property to a URL that points to a valid Lottie JSON file. 

Select the icon you wish to use, download its corresponding JSON file, and add it to your project. Remember to place the JSON file within your project's `src` folder so that you can easily import it into your component:

```javascript
import navigation from "../navigation-icon.json";

export default function LottieFiles () {
<>

</>
```

Here's an example of how the output will appear: ![LottieFiles output](http://blog.logrocket.com/wp-content/uploads/2023/08/lottiefiles-output.gif) You have the flexibility to customize the icon using the available properties, which can be found [here](https://github.com/LottieFiles/lottie-react). For instance, by setting the property `hover= {true}`, the animation will only run when you hover over the icon. Additionally, you can configure the icon to listen to various events such as load, play, pause, and more. Explore the available properties to enhance the behavior and interactivity of your icon.

## Incorporating Lordicon icons <a name="incorporating-lordicon-icons">

The [Lordicon library](https://lordicon.com/icons) offers a wide range of icons with captivating visuals and interactive animations in multiple styles. 

Implementing these icons into your project is easy, and you’re able to customize icon styles and control animations with simple HTML tags to render the icons. You can also adjust the stroke width, colors, and other properties to achieve your desired look. 

Another good thing about this library is that you can manually interact with the icons and respond to different motion types and states within the animation. The library also provides various built-in interaction options such as:

*   Click
*   Hover
*   Morph
*   Loop
*   Loop-on-hover
*   Boomerang

You will need to create an account to use Lordicon icons, but the good news is that creating an account is free — if you opt for the free version and free icons. It's important to note that when using the free icons in a public project, you are required to include a link to Lordicon in your website footer: ![Lordicon requires that you put an attribution link in your page footer](http://blog.logrocket.com/wp-content/uploads/2023/08/lordicon-attribution.png) 

First, let’s install the necessary npm packages. The main Lordicon package should be used in combination with the [`lottie-web`package](https://www.npmjs.com/package/lottie-web). To install these dependencies, execute the following code in your command line:

```bash
npm install lord-icon-element lottie-web
```

```javascript
import lottie from 'lottie-web';
import { defineElement } from 'lord-icon-element';

// define "lord-icon" custom element with default properties
defineElement(lottie.loadAnimation);
```

Now that you are all set, it's time to implement the icon into your project. Select your desired icon from the [Lordicon library](https://lordicon.com/icons). You have the freedom to choose from options like `system outline`, `system solid` (Feather-inspired), or any other icon that suits your needs. 

Once you have made your selection, copy the HTML code below and paste it into your component, as illustrated below:

```javascript
export default function Lordicon() {
 return (
    <>  
       <lord-icon
         src="https://cdn.lordicon.com/tyvtvbcy.json"
         trigger="hover"
       ></lord-icon>
    </>
  ); 
}
```

Here is an example of the outcome: ![Lordicon Icons](http://blog.logrocket.com/wp-content/uploads/2023/08/lordicon-icons.gif) If you wish, you have the flexibility to customize the styling of the icon using the `styling` property. Feel free to adjust the icon's appearance according to your preferences. The below example shows you how to modify attributes such as size or color:

```javascript
export default function Lordicon() {
 return (
  <>
        <lord-icon
         src="https://cdn.lordicon.com/tyvtvbcy.json"
         trigger="hover"
         colors="primary:#9ce5f4"
         style={{
           width: "50px",
           height: "50px",
         }}
       ></lord-icon>
 </>
 );
}
```

While the documentation suggests using the `style` property with a string, we encountered an error that prompted us to explore alternative options: ![Uncaught runtime errors](http://blog.logrocket.com/wp-content/uploads/2023/08/uncaught-runtime-errors.png) In addition, you have the ability to modify the triggers using the `trigger` property, enabling you to associate specific events such as click or loop with the icon. For further optimization option, you can [clone this repository](https://github.com/tomwilusz/lord-icon-element) and sort through the code. 

Another alternative for customizing your icon is to use the interface provided by the [Lordicon library](https://lordicon.com/icons/system/outline?group=all&categoryId=141) before implementing your code. This allows for greater flexibility and fine-tuning of your icon's behavior and appearance: ![Adjusting your icon's flexibility and appearance](http://blog.logrocket.com/wp-content/uploads/2023/08/icon-flexibility-appearance.png)

## Conclusion

In this article, we delved into a selection of Feather-inspired animated icon libraries for React, including FontAwesome, react-icons-animated, React UseAnimations, Lottie Icons, and Lordicon. Each library offers unique features and capabilities, allowing developers to enhance their React applications with visually appealing and interactive icons. 

Among these libraries, Lordicon stands out as an excellent choice. One key factor that makes Lordicon appealing is its effortless customization options for icon styling and animation control. So, if you're in search of a comprehensive Feather-inspired and user-friendly animated icon library for React, look no further than Lordicon.

---

## Get set up with LogRocket's modern React error tracking in minutes:

1. Visit https://logrocket.com/signup/ to get an app ID.
2. Install LogRocket via NPM or script tag. `LogRocket.init()` must be called client-side, not server-side.

NPM:
```bash
$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');
```
Script Tag:
```javascript
Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
```

3.(Optional) Install plugins for deeper integrations with your stack:
*   Redux middleware
*   ngrx middleware
*   Vuex plugin

[Get started now](https://lp.logrocket.com/blg/signup)