React.js react-icons Example to Change Size and Color in Browser Using Javascript

Welcome folks today in this blog post we will be using the react-icons library to change the size and color of icons in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below command

npx create-react-app sampleapp

cd sampleapp

And now we need to install the below library using the below command as shown below

npm i react-icons

And after that you need to edit the App.js file and copy paste the following code

App.js

import React from 'react';
import './style.css';
import {
  FaAngleLeft,
  FaAngleRight,
  FaArrowLeft,
  FaArrowRight,
  FaClosedCaptioning,
  FaAmericanSignLanguageInterpreting,
  FaSearch,
  FaEnvelopeOpen,
  FaEnvelope,
  FaInfo,
  FaSitemap,
  FaBook,
  FaDonate,
  FaPaste,
  FaFolderOpen,
  FaFileInvoice,
  FaBullhorn,
  FaTable,
  FaComment,
  FaUniversalAccess,
  FaUserShield,
  FaWpforms,
  FaFacebookF,
  FaTwitter,
  FaYoutube,
  FaInstagram,
  FaChevronLeft,
  FaChevronRight,
  FaBars,
  FaRegEnvelope,
  FaUpload,
  FaHandPointRight,
  FaPlay,
  FaClock,
} from 'react-icons/fa';
import { GrCheckmark } from 'react-icons/gr';
import { MdSubtitles } from 'react-icons/md';

export default function App() {
  return (
    <>
      <div>
        <FaAngleLeft color="blue" size="50" />
        <FaAngleRight />
      </div>
      <div>
        <FaArrowLeft />
        <FaArrowRight />
      </div>
      <div>
        <FaClosedCaptioning />
        <FaAmericanSignLanguageInterpreting />
        <MdSubtitles />
      </div>
      <div>
        <FaSearch />
      </div>
      <div>
        <GrCheckmark />
      </div>

      {/* icons for the transparencia pages */}
      <div>
        <FaEnvelopeOpen />
        <FaInfo />
        <FaSitemap />
        <FaBook />
        <FaDonate />
        <FaPaste />
        <FaFolderOpen />
        <FaFileInvoice />
        <FaWpforms />
        <FaTable />
        <FaComment />
        <FaUniversalAccess />
        <FaUserShield />
        <FaBullhorn />
      </div>
      <div>
        <FaFacebookF />
        <FaTwitter />
        <FaYoutube color="red" />
        <FaInstagram color="" />
      </div>
      <div>
        <FaChevronLeft />
        <FaChevronRight />
      </div>
      <div>
        <FaBars />
      </div>
      <div>
        <FaRegEnvelope />
      </div>
      <div>
        <FaUpload />
      </div>
      <div>
        <FaHandPointRight />
      </div>
      <div>
        <FaPlay />
        <FaClock />
      </div>
      <div>
        <FaEnvelope />
      </div>
    </>
  );
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

import React from 'react';

import './style.css';

import {

FaAngleLeft,

FaAngleRight,

FaArrowLeft,

FaArrowRight,

FaClosedCaptioning,

FaAmericanSignLanguageInterpreting,

FaSearch,

FaEnvelopeOpen,

FaEnvelope,

FaInfo,

FaSitemap,

FaBook,

FaDonate,

FaPaste,

FaFolderOpen,

FaFileInvoice,

FaBullhorn,

FaTable,

FaComment,

FaUniversalAccess,

FaUserShield,

FaWpforms,

FaFacebookF,

FaTwitter,

FaYoutube,

FaInstagram,

FaChevronLeft,

FaChevronRight,

FaBars,

FaRegEnvelope,

FaUpload,

FaHandPointRight,

FaPlay,

FaClock,

} from 'react-icons/fa';

import { GrCheckmark } from 'react-icons/gr';

import { MdSubtitles } from 'react-icons/md';

export default function App() {

return (

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

{/* icons for the transparencia pages */}

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</>

);

}

As you can see we can provide the size and the color attribute to the react-icon as shown below

<FaAngleLeft color="blue" size="50" />

1	<FaAngleLeft color="blue" size="50" />