How to add icons in React
In this article, we will show you how to add icons in React using react-icons.
React-icons is a library that provides a wide range of popular icon libraries (such as Font Awesome, Material-UI, and Octicons) in a single package, allowing developers to easily add icons to their React projects. The icons are rendered as React components, which can be easily styled and customized using CSS. Additionally, the library provides a way to import individual icons instead of the whole library, which can help to reduce the size of the final bundle.
Demo Application
How to add icons in React
1. Project structure
- react-icons-example
- node_modules
- public
- index.html
- src
- App.js
- index.css
- index.js
- package-lock.json
- package.json
- README.md
2. Package dependencies
Run the following command to install react-icons npm package.
1 | npm i react-icons |
You will find the version of the following packages in React application.
3. Implementation
Refer to the following files for implementation.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import React from 'react'; import { FaHeart, FaRegHeart } from 'react-icons/fa'; import { BsFillHandThumbsUpFill, BsHeart } from 'react-icons/bs'; import { TiCamera } from 'react-icons/ti'; import { SlHeart } from 'react-icons/sl'; function App() { // style for icons const fontStyle = { fontSize: 30, color: '#ff3063' } return ( <div className="App"> <h4>How to add icons in React - <a href="https://www.cluemediator.com">Clue Mediator</a></h4> <div className='icons'> <FaHeart style={fontStyle} /> <FaRegHeart style={fontStyle} /> <BsFillHandThumbsUpFill style={fontStyle} /> <BsHeart style={fontStyle} /> <TiCamera style={fontStyle}/> <SlHeart style={fontStyle} /> </div> </div> ); } export default App; |
1 2 3 4 5 6 7 8 9 10 | body { margin: 20px; font-family: Arial, Helvetica, sans-serif; } .icons { width: 320px; display: flex; justify-content: space-between; } |
1 2 3 4 5 6 7 8 9 10 11 12 | import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); |
4. Output
Run your application and check the output in the browser.
Live Demo
That’s it for today.
Thank you for reading. Happy Coding..!!
![[Solved] Uncaught Invariant Violation: Rendered more hooks than during the previous render - Clue Mediator](https://www.cluemediator.com/wp-content/uploads/2022/06/solved-uncaught-invariant-violation-rendered-more-hooks-than-during-the-previous-render-clue-mediator.jpg)
