DEV Community

Mohammed Nadeem Shareef
Mohammed Nadeem Shareef

Posted on • Edited on

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

Top comments (5)

Collapse
 
sasicodes profile image
Sasidharan

I like to add few more to your collection

lagandlog.com/logs/free-icons-for-...

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

Short and to the point, I like it.

Collapse
 
sasicodes profile image
Sasidharan

🙌

Collapse
 
venelinn profile image
Venelin

Nothing is better than self generated icon font library which is very easy to build and re-use. SVG icons are even worst for the performance!

Collapse
 
shareef profile image
Mohammed Nadeem Shareef

If that is what work for you go for it. 👍