As written in font awesome documentation, you can easily use it like this: First, install the package by: npm install @fortawesome/fontawesome-svg-core npm install @fortawesome/free-solid-svg-icons npm install @fortawesome/react-fontawesome Then you can use it like this: Then you can use it like this: // Light: <FontAwesomeIcon icon={["fal", "coffee"]} /> // Regular: <FontAwesomeIcon icon={["far", "coffee"]} /> // Solid <FontAwesomeIcon icon={["fas", "coffee"]} /> // ...or, omit as FontAwesome defaults to solid, so no need to prefix: <FontAwesomeIcon icon="coffee" /> // Brand: <FontAwesomeIcon icon={["fab", "github"]} /> You can also use it like this: import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCoffee } from '@fortawesome/free-solid-svg-icons' const element = <FontAwesomeIcon icon={faCoffee} /> Sizing: <FontAwesomeIcon icon="coffee" size="xs" /> <FontAwesomeIcon icon="coffee" size="lg" /> <FontAwesomeIcon icon="coffee" size="6x" />
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter