DEV Community

Vuong Dang
Vuong Dang

Posted on • Updated on

How to use Fontawesome in Next.js

Overview

This article discusses how to use Fontawesome 5 - free version in a Next.js project. The code example is written in TypeScript.

1. Install dependencies

npm i --save @fortawesome/fontawesome-svg-core \
             @fortawesome/free-solid-svg-icons \
             @fortawesome/free-brands-svg-icons \
             @fortawesome/react-fontawesome
Enter fullscreen mode Exit fullscreen mode

2. Use it like a pro

This is the easiest way to get started, you import individual icons and use it directly in your component.

import { ReactElement } from 'react'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function MyComponent(): ReactElement {
  return <FontAwesomeIcon icon={faCoffee} />
}
Enter fullscreen mode Exit fullscreen mode

3. A little more complex way

Imagine you use the same icon in multiple components but you don't want to import it in every component.

This can be done by defining a library in your pages/_app.tsx.

In the code below, You add all brand icons fab, and a single coffee icon faCoffee into the library.

import { AppProps } from 'next/app'
import '../styles/index.css'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { ReactElement } from 'react'

library.add(fab, faCoffee)

export default function MyApp({ Component, pageProps }: AppProps): ReactElement {
  return <Component {...pageProps} />
}

Enter fullscreen mode Exit fullscreen mode

In your component, you can refer to the icon in the library.

In your library, you added all brand icons fab. Therefore you will refer to a particular icon (e.g twitter) in the set by specifying ['fab', 'twitter']. On the other hand, you imported a single faCoffee so you refer to the icon name coffee directly.

import { ReactElement } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function IconFromLibrary(): ReactElement {
  return (
    <>
      <FontAwesomeIcon icon={['fab', 'twitter']} />
      <FontAwesomeIcon icon="coffee" />
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

This article covered the configuration and two ways you can use Fontawesome in your next.js project.

More information can be found in the
react-fontawesome documentation.

I hope that you like this post!
Thanks for reading!

Discussion (6)

Collapse
alanxtreme profile image
Alan Daniel

What about the pro icons?

Collapse
jessycormier profile image
Jessy Cormier

There wouldn't be a difference with the pro icon set. When you register for pro icons the fontawesome website guides you how to gain access to the set and how to npm install for your project. The rest would work exactly the same.

Collapse
vuongddang profile image
Vuong Dang Author

I didn't have a chance to work with the pro icons. Would love to know how it works.

Collapse
marcofranssen profile image
Marco Franssen

Your entire article has a persistent typo fort-awesome => font-awesome

Collapse
vuongddang profile image
Vuong Dang Author

@fortawesome/* is the correct prefix of the npm packages although it looks similar to fontawesome

Collapse
dev_emmy profile image
nshimiye_emmy

thanks mn this was helpful