ابتدا باید کتابخانهreact-icons را در اپلیکیشن خود نصب کنیم با دستور زیر:

npm install react-icons --save

سپس با استفاده از دستور زیر آیکون مورد نظر خود را انتخاب می کنیم:

import { iconnName} from 'react-icons

سپس  به جای تگ <img> تگ زیر را قرار می دهیم:

<iconName/>

با دستور زیر می توانیم بگوییم که آیکون مورد نظر ما چرخش داشته باشد.یعنی بچرخد:

<icconName className="App-logo" />

همچنین در فایل css مربوط به آیکونها (src/App.css) می توانیم سایز آیکون را تغییر دهیم.

اگر نخواهیم که تمام کjتابخانه را در پروژه خود قرار دiهیم،  مثلا هنگامیکه فقط یک آیکون نیاز داشته باشیم می توانیم آیکون مورد نظر خود را دانلود کرده و  در پروژه خود قرار دهیم.

برای اینکار به سایت  heroicons.com  بروید و آیکون مورد نظر خود را سرچ کنید و سپس با پسوند js مثلا Icon.js در مسیر پروژه خود ذخیره کنید.

سپس درون این فایل یک کامپوننت جدید ایجاد می کنیم و  مشخصات آیکون خود را در تگ <svg> قرار می دهیم.

import React from 'react';

const NewIconn = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  )
}

export default NewIconn ;

سپس در فایل src/App.js کامپوننت خود را ایمپورت می کنیم.

import NewIcon from './Icon';

سپس  می توانیم بصورت زیر در پروژه خود قرار دهیم.

<NewIcon/>