Every Icon you need in reactJS project. ft. react-icons

shareef

Mohammed Nadeem Shareef

Posted on June 1, 2021

Every Icon you need in reactJS project. ft. react-icons

Hello Developers 👋👋👋

I just wanna share an awesome library(or whatever it is called) for Icons in ReactJS.

React-Icons

React-Icons enables you to use famous icon provider's icons in React component format.

React Icons have Icons from

  • Font Awesome
  • Heroicons
  • Typicons
  • VS Code Icons
  • css.gg
  • And a lot.

Show me the code 🤓🤓🤓

    npm install react-icons --save
Enter fullscreen mode Exit fullscreen mode
    import { IconName } from 'react-icons/Icon-Provider';
Enter fullscreen mode Exit fullscreen mode

For example

    import { HiAcademicCap } from "react-icons/hi";
Enter fullscreen mode Exit fullscreen mode

And it will give you something like this

    <HiAcademicCap />
Enter fullscreen mode Exit fullscreen mode

And Kabooom! You have your Icon.

Customizing Icons

We have few options to play around also

  • size
  • color
  • style
  • className
  • And some-others

let's see the code in action


    <HiAcademicCap
        color="blue"
        size="3rem"
        style={{
          color: "red"
        }}
        className="black-color"
    />

Enter fullscreen mode Exit fullscreen mode
  • Here, first preference will be given to style color (red)
  • Then to color property(blue), then to the color in our className (black)
  • To increase the side we have size

Thanks for reading.

EnjoyLearning.

Closing here 👋👋👋

This is Shareef.
GitHub
My Portfolio
Twitter ShareefBhai99
Linkedin
React-Icons

💖 💪 🙅 🚩
shareef
Mohammed Nadeem Shareef

Posted on June 1, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related