How to Use Font Awesome Icon in React ?

Hello Guys,

In this post, we will learn font awesome icon in react native. We will use add font awesome icon in react. This tutorial will give you simple example of font awesome icon react size. you will learn react fontawesome icon color. Let's get started with font awesome icons react example.

If You have to use Font Awesome icon first install following package. then you have to use general font awesome class but you don't use "-". this dash class convert in to camel case.

Font Awesome Icon Package Install Command

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

--OR--

$ npm i --save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

You can use Font Awesome icons in your React components as simply as this:

<FontAwesomeIcon icon="{faCoffee}" />

/src/App.js file

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
class App extends React.Component{
    render(){
        return(
            <div>
                <h4><FontAwesomeIcon icon={faCoffee} color="orange" /> This is Font Awesome Icon.</h4>
            </div>
        )
    }

    
}
export default App;