DEV Community

Discussion on: Easiest Way To Add Icons To Your React Apps 😎

Collapse
coderduck profile image
duccanhole

thanks for your post, but i prefer font-awesome

Collapse
hyggedev profile image
Chris Hansen Author

I do too! Lol. It's my preferred icons library hands down. 💯

But, do you go to fontawesome.com, login to access your kit, get the styles link and or use a CDN? Then go into your public/index.html to add your styles?

In my example, Its literally 3 steps:

  1. yarn add react-icons
  2. import { FaHeart} from react-icons/fa
  3. <button><FaHeart/></button>

It's legit quicker for me to do that than typing for the Icon in the search box at fontawesome.com lol. Give it a shot.

Collapse
arjenpostma profile image
Arjen Postma

You can also install fontawesome with yarn or npm.

Thread Thread
hyggedev profile image
Chris Hansen Author

You're absolutely right. But I can never remember the syntax of even my favorite Icons. Especially different types of the same Icon.
I have not used the fontawesome package in a while, but I feel like I remember the syntax being a little difficult too. And I prefer not to repeat class or className numerous times, use i tags, and I can never remember if an Icon is 'fas' , 'far', 'fab'..

And if you're using the website directly, I dislike having to refactor all the class into className.

I like the consistency with react-icons. And my usual Icons, are always so easy to remember. No classes, No Tags. Just FaHeart, FaAngleDown, FaBars. And you can even pass them into styled-components like an [arg] which is a big plus for me if you style your react apps with CS in JS.