Home » React Native Examples » How to Add React icons using yarn

How to Add React icons using yarn

To add React Icons to your project using Yarn, you can follow these steps:


Create a React Project (if you haven’t already)

Make sure you have a React project set up using Create React App or any other method of your choice.


Install React Icons Package

Open your terminal and navigate to your project’s root directory. Then, run the following command to install the react-icons package using Yarn:

bash:
yarn add react-icons

This will add the react-icons package to your project’s node_modules directory and update your package.json file with the dependency.


Import and Use Icons in Your React Components

Now that you have react-icons installed, you can import and use icons in your React components. Here’s an example of how to do it:

jsx:
import React from 'react';
// Import icons from 'react-icons/fa' (Font Awesome icons in this case)
import { FaReact, FaGithub } from 'react-icons/fa'; 

function App() {
  return (
    <div>
      <h1>React Icons Example</h1>
      <FaReact size={50} color="blue" /> {/* Render a React icon */}
      <FaGithub size={50} color="black" /> {/* Render a GitHub icon */}
    </div>
  );
}

export default App;

In this example, we imported the FaReact and FaGithub icons from the react-icons/fa package (which contains Font Awesome icons). You can replace these with icons from other icon sets provided by react-icons. Make sure to check the documentation of react-icons for the full list of available icon sets and their icons.


Customize Icon Properties: You can customize the icons by providing props like size, color, and others as shown in the example. These properties allow you to control the appearance of the icons to match your project’s design.


Run Your React Application: Finally, start or build your React application as you normally would with Yarn. Use the following command to start your development server:

bash:
yarn start

That’s it! This will launch your React application with the added React Icons, and you should see the icons rendered as expected in your components. You can try different icon sets and customize the icons to fit your project’s needs.


popular readings: