Use React with...

You can use the Font Awesome React component with Next.js or TypeScript.

Next.js

The react-fontawesome component integrates well with Next.js but there is one caveat you need to solve.

Since Next.js manages CSS differently than most web projects if you just follow the plain vanilla documentation to integrate react-fontawesome into your project you'll see huge icons because they are missing the accompanying CSS that makes them behave.

Getting Font Awesome CSS to Work

Let's assume that you have a standard install using TypeScript.

Modify src/app/layout.tsx, adding the import for Font Awesome's supporting stylesheet.

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app'
}

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Next.js allows you to import CSS directly in .js files. It handles optimization and all the necessary Webpack configuration to make this work.

import '@fortawesome/fontawesome-svg-core/styles.css'

You change this configuration value to false so that the Font Awesome core SVG library will not try and insert <style> elements into the <head> of the page. Next.js blocks this from happening anyway so you might as well not even try.

config.autoAddCss = false

Using the Icons in Pages

Now you can use an icon in a page like src/app/pages.tsx:

import Image from "next/image";
import styles from "./page.module.css";

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

export default function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <p>
          Get started by editing&nbsp;
          <code className={styles.code}>src/app/page.tsx</code>
        </p>
        <FontAwesomeIcon icon={faThumbsUp} />
        <div>
          <a
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{" "}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className={styles.vercelLogo}
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>

      ...

Troubleshooting with Next.js

Failed to Import ./styles.css

Module not found: Package path ./styles.css is not exported from package`

Newer versions of Next.js may give you this error. A workaround is to change the way the styles are imported.

import '../node_modules/@fortawesome/fontawesome-svg-core/styles.css'

Fixed in newer versions

We've fixed this issue in newer version of @fortawesome/fontawesome-svg-core. You might be able to simply upgrade to fix this instead of modifying your import.

Duotone Icons Aren't Working

If you attempt to use our duotone icons and they look more like our solid icons, it probably means that the CSS for Font Awesome has not been installed.

Along with properly sizing icons, the CSS for Font Awesome is also responsible for setting the opacity for the secondary layer which is how these icons work.

TypeScript + Kit Packages

Using a new Kit package can result in some import errors in either your code editor (Like VSCode) or at build time using some of the TypeScript aware build tools.

Import errors with Kit Packages

"Module '@awesome.me/kit-KIT_CODE/icons/classic/solid/' or its corresponding type declarations cannot be found.

If you see this, or if your code editor is complaining about an import even if you know your are importing it correctly check out troubleshooting section of our Kit Package API.

TypeScript

Typings are included in this package. However, most types are defined in the underlying API library, @fortawesome/fontawesome-svg-core.

Suppose that in one module, you add all fas icons to the library:

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)

// ...

Then suppose that in another module, you have some code that looks up one of the icons in the library. The import statement below imports two types and one function:

import { IconLookup, IconDefinition, findIconDefinition } from '@fortawesome/fontawesome-svg-core'

const coffeeLookup: IconLookup = { prefix: 'fa-solid', iconName: 'fa-coffee' }
const coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)

// ...

export class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={coffeeIconDefinition} />
        </h1>
      </div>
    )
  }
}

For Demo Purposes Only

You wouldn't normally declare intermediate objects like coffeeLookup just to look up an icon. So this is cumbersome and needlessly verbose for such a simple example. The purpose here is just to show how you might import type definitions and use them in declarations when it does make sense to do so.

Several types, including IconLookup and IconDefinition, appearing above, actually originate from the @fortawesome/fontawesome-common-types package. They are re-exported from both @fortawesome/fontawesome-svg-core and @fortawesome/free-solid-svg-icons (and other icon packs). This is just to make importing more convenient in some cases. Refer to the index.d.ts in any module to see which types it exports.

I need to use Font Awesome and React with...

Is there another tool or framework you want to use with React and Font Awesome? Give us a shout and we'll look into adding it.

    No results