Efficiently integrate FontAwesome in React projects, from installation to advanced usage
Install the core SVG library and React component package
npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-coreyarn add @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core# Regular style (outline icons)
npm install @fortawesome/free-regular-svg-icons
# Brand Icons
npm install @fortawesome/free-brands-svg-iconsPro tip: Import individual icons for better tree-shaking
Basic usage of FontAwesome icons in React components
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStar, faHome, faUser, faGear } from '@fortawesome/free-solid-svg-icons'
function MyComponent() {
return (
<div>
<FontAwesomeIcon icon={faStar} />
<FontAwesomeIcon icon={faHome} size="2x" />
<FontAwesomeIcon icon={faUser} spin />
<FontAwesomeIcon icon={faGear} className="custom-icon" />
</div>
)
}Common props for customizing icon appearance and behavior
Import icons from individual icon files for optimal tree-shaking
Only import the icons you use for optimal bundle size
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome'
import { faUser } from '@fortawesome/free-solid-svg-icons/faUser'
import { faGear } from '@fortawesome/free-solid-svg-icons/faGear'
Or batch import from main entry (not recommended for production)
// import { faHome, faUser, faGear } from '@fortawesome/free-solid-svg-icons'
Add icons globally using library
import { library } from '@fortawesome/fontawesome-svg-core'
library.add(faHome, faUser, faGear)
Reference by string in any component
// <FontAwesomeIcon icon="fa-solid fa-home" />Tree-shaking reduces bundle size by including only used icons
| Prop | Type | Description | Example |
|---|---|---|---|
icon | IconDefinition | Icon object, required | {faHome} |
size | string | Icon size, xs to 10x | "2x" |
spin | boolean | Continuous rotation | {true} |
pulse | boolean | 8-step pulse rotation | {true} |
beat | boolean | Beat animation | {true} |
fade | boolean | Fade effect | {true} |
flip | string | Flip direction | "horizontal" |
rotation | number | Rotation angle | {90} |
className | string | Additional CSS class | "my-icon" |
style | object | Inline style object | {{ color: 'red' }} |
title | string | SVG title (accessibility) | "Home" |
FontAwesome provides full TypeScript type definitions
import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome'
Type-safe component
interface IconButtonProps {
icon: IconDefinition
label: string
onClick: () => void
}
function IconButton({ icon, label, onClick }: IconButtonProps) {
return (
<button onClick={onClick} className="btn btn-outline-primary">
<FontAwesomeIcon icon={icon} className="me-2" />
{label}
</button>
)
}
Complete example of using FontAwesome icons in ReactTypeScript support works out of the box with no additional setup
Adding icons to buttons improves visual recognition and interaction feedback.
import { faDownload, faTrashCan, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
function ActionButtons() {
return (
<div className="d-flex gap-2">
<button className="btn btn-success">
<FontAwesomeIcon icon={faDownload} className="me-1" /> Download
</button>
<button className="btn btn-outline-primary">
<FontAwesomeIcon icon={faPenToSquare} className="me-1" /> Edit
</button>
<button className="btn btn-outline-danger">
<FontAwesomeIcon icon={faTrashCan} /> Delete
</button>
</div>
)
}Use FontAwesome icons in navigation menus for visual hierarchy
import { faHouse, faGear, faBell, faUser } from '@fortawesome/free-solid-svg-icons'
const navItems = [
{ icon: faHouse, label: 'Home', path: '/' },
{ icon: faUser, label: 'Profile', path: '/profile' },
{ icon: faBell, label: 'Notifications', path: '/notifications' },
{ icon: faGear, label: 'Settings', path: '/settings' },
]
function Sidebar() {
return (
<nav className="sidebar">
{navItems.map(item => (
<a key={item.path} href={item.path} className="nav-item">
<FontAwesomeIcon icon={item.icon} fixedWidth className="me-2" />
{item.label}
</a>
))}
</nav>
)
}Dynamically switching icons based on state is a common pattern for interaction feedback.
import { useState } from 'react'
import { faStar as faStarSolid } from '@fortawesome/free-solid-svg-icons'
import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons'
function StarToggle() {
const [liked, setLiked] = useState(false)
return (
<button onClick={() => setLiked(!liked)} className="btn btn-link">
<FontAwesomeIcon
icon={liked ? faStarSolid : faStarRegular}
style={{ color: liked ? 'gold' : '#adb5bd' }}
size="2x"
/>
<span className="ms-2">{liked ? 'Click to favorite' : 'Favorited'}</span>
</button>
)
}Create a reusable icon component for consistent style and size management.
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
interface IconProps {
icon: IconDefinition
size?: 'sm' | 'lg' | '2x' | '3x'
color?: string
spin?: boolean
}
function AppIcon({ icon, size = 'lg', color, spin }: IconProps) {
return (
<FontAwesomeIcon
icon={icon}
size={size}
spin={spin}
style={color ? { color } : undefined}
className="app-icon"
/>
)
}
First install the core SVG library and React component package. Free users install free-solid-svg-icons for all free icons. FontAwesome's React component is built on the SVG Core engine, rendering each icon as an inline SVG element for precise control over icon styles, sizes, and animation effects.
// <AppIcon icon={faHome} color="#528dd7" />
// <AppIcon icon={faSpinner} spin size="3x" />After encapsulation, you can add animations, color themes, click events, etc., reducing duplicate code. Recommended for early project setup.