Font Awesome Icons

Use 2,000+ Font Awesome icons in your React application

Font Awesome is one of the most popular icon libraries, providing comprehensive coverage for common UI elements, brands, and more.

Installation

Font Awesome icons are included with React Icons:

npm install react-icons

Import Path

React Icons provides both Font Awesome 5 and Font Awesome 6:

// Font Awesome 6 (recommended)
import { FaBeer, FaHeart } from 'react-icons/fa6';

// Font Awesome 5 (legacy)
import { FaBeer, FaHeart } from 'react-icons/fa';

Use fa6 for the latest icons. Font Awesome 6 includes all Font Awesome 5 icons plus additional new icons.

Library Details

Font Awesome 5

Icon Count: 1,612

Version: 5.15.4

Import: react-icons/fa

License: CC BY 4.0 License

Font Awesome 6

Icon Count: 2,045

Version: 6.5.2

Import: react-icons/fa6

License: CC BY 4.0 License

Project URL: fontawesome.com

Usage Examples

Basic Usage

import { FaBeer, FaHeart, FaUser } from 'react-icons/fa6';

function App() {
  return (
    <div>
      <h3>
        Lets go for a <FaBeer />?
      </h3>
      <button>
        <FaHeart /> Like
      </button>
      <div>
        <FaUser /> Profile
      </div>
    </div>
  );
}

Icon Variants

Font Awesome provides solid and regular (outline) variants:

Solid Icons

import { FaHome, FaStar, FaEnvelope } from 'react-icons/fa6';

function SolidIcons() {
  return (
    <div>
      <FaHome />      {/* Solid home icon */}
      <FaStar />      {/* Solid star icon */}
      <FaEnvelope />  {/* Solid envelope icon */}
    </div>
  );
}

Regular Icons

import { FaRegStar, FaRegHeart, FaRegCircle } from 'react-icons/fa6';

function RegularIcons() {
  return (
    <div>
      <FaRegStar />    {/* Outline star */}
      <FaRegHeart />   {/* Outline heart */}
      <FaRegCircle />  {/* Outline circle */}
    </div>
  );
}

Regular (outline) icons use the FaReg prefix.

Brand Icons

Font Awesome includes hundreds of brand logos:

import {
  FaFacebook,
  FaTwitter,
  FaGithub,
  FaLinkedin,
  FaYoutube,
  FaGoogle
} from 'react-icons/fa6';

function SocialLinks() {
  return (
    <div className="social-links">
      <a href="https://facebook.com">
        <FaFacebook /> Facebook
      </a>
      <a href="https://twitter.com">
        <FaTwitter /> Twitter
      </a>
      <a href="https://github.com">
        <FaGithub /> GitHub
      </a>
      <a href="https://linkedin.com">
        <FaLinkedin /> LinkedIn
      </a>
    </div>
  );
}

Common Use Cases

Navigation

import {
  FaHome,
  FaUser,
  FaCog,
  FaBell,
  FaSearch
} from 'react-icons/fa6';

function Navigation() {
  return (
    <nav>
      <a href="/"><FaHome /> Home</a>
      <a href="/profile"><FaUser /> Profile</a>
      <a href="/settings"><FaCog /> Settings</a>
      <a href="/notifications"><FaBell /> Notifications</a>
      <a href="/search"><FaSearch /> Search</a>
    </nav>
  );
}

Actions

import {
  FaEdit,
  FaTrash,
  FaSave,
  FaDownload,
  FaShare,
  FaPrint
} from 'react-icons/fa6';

function Actions() {
  return (
    <div className="actions">
      <button><FaEdit /> Edit</button>
      <button><FaTrash /> Delete</button>
      <button><FaSave /> Save</button>
      <button><FaDownload /> Download</button>
      <button><FaShare /> Share</button>
      <button><FaPrint /> Print</button>
    </div>
  );
}

Status

import {
  FaCheckCircle,
  FaExclamationTriangle,
  FaInfoCircle,
  FaTimesCircle
} from 'react-icons/fa6';

function StatusMessages() {
  return (
    <div>
      <div className="success">
        <FaCheckCircle /> Success!
      </div>
      <div className="warning">
        <FaExclamationTriangle /> Warning!
      </div>
      <div className="info">
        <FaInfoCircle /> Information
      </div>
      <div className="error">
        <FaTimesCircle /> Error
      </div>
    </div>
  );
}

Styling Font Awesome Icons

Size and Color

import { FaHeart } from 'react-icons/fa6';

function StyledIcons() {
  return (
    <div>
      {/* Using inline styles */}
      <FaHeart style={{ color: 'red', fontSize: '24px' }} />
      
      {/* Using className */}
      <FaHeart className="text-red-500 text-2xl" />
      
      {/* Using IconContext */}
      <IconContext.Provider value={{ color: 'red', size: '2em' }}>
        <FaHeart />
      </IconContext.Provider>
    </div>
  );
}

Animation

import { FaSpinner, FaSync } from 'react-icons/fa6';

function AnimatedIcons() {
  return (
    <div>
      <FaSpinner className="animate-spin" />
      <FaSync className="animate-spin" />
    </div>
  );
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Icon Naming Convention

Font Awesome icons follow these naming patterns:

• Solid icons: Fa[IconName] (e.g., FaHeart, FaStar)
• Regular icons: FaReg[IconName] (e.g., FaRegHeart, FaRegStar)
• Brand icons: Fa[BrandName] (e.g., FaFacebook, FaTwitter)

Popular Font Awesome Icons

UI Elements

• FaHome - Home
• FaUser - User profile
• FaCog - Settings
• FaBars - Menu/hamburger
• FaTimes - Close/X
• FaChevronDown - Dropdown arrow
• FaSearch - Search
• FaBell - Notifications

Actions

• FaEdit - Edit/pencil
• FaTrash - Delete
• FaSave - Save/disk
• FaDownload - Download
• FaUpload - Upload
• FaShare - Share
• FaPrint - Print
• FaCopy - Copy

Status

• FaCheckCircle - Success
• FaExclamationTriangle - Warning
• FaInfoCircle - Info
• FaTimesCircle - Error

Migration from Font Awesome 5 to 6

Simply change the import path:

// Before (Font Awesome 5)
import { FaBeer } from 'react-icons/fa';

// After (Font Awesome 6)
import { FaBeer } from 'react-icons/fa6';

Most icon names remain the same, but Font Awesome 6 includes:

• Additional new icons
• Updated designs for some existing icons
• Better consistency across the icon set

Resources

Font Awesome Website

Browse the official Font Awesome icon gallery

Search All Icons

Search Font Awesome icons in React Icons preview

License Information

View CC BY 4.0 License details

All Libraries

Explore other icon libraries