> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/react-icons/react-icons/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```bash theme={null}
npm install react-icons
```

## Import Path

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

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

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

<Note>
  Use `fa6` for the latest icons. Font Awesome 6 includes all Font Awesome 5 icons plus additional new icons.
</Note>

## Library Details

<CardGroup cols={2}>
  <Card title="Font Awesome 5" icon="5">
    **Icon Count:** 1,612

    **Version:** 5.15.4

    **Import:** `react-icons/fa`

    **License:** [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)
  </Card>

  <Card title="Font Awesome 6" icon="6">
    **Icon Count:** 2,045

    **Version:** 6.5.2

    **Import:** `react-icons/fa6`

    **License:** [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)
  </Card>
</CardGroup>

**Project URL:** [fontawesome.com](https://fontawesome.com/)

## Usage Examples

### Basic Usage

```jsx theme={null}
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:

<Tabs>
  <Tab title="Solid Icons">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Regular Icons">
    ```jsx theme={null}
    import { FaRegStar, FaRegHeart, FaRegCircle } from 'react-icons/fa6';

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

    <Note>
      Regular (outline) icons use the `FaReg` prefix.
    </Note>
  </Tab>
</Tabs>

### Brand Icons

Font Awesome includes hundreds of brand logos:

```jsx theme={null}
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

<Tabs>
  <Tab title="Navigation">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Actions">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Status">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>
</Tabs>

## Styling Font Awesome Icons

### Size and Color

```jsx theme={null}
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

```jsx theme={null}
import { FaSpinner, FaSync } from 'react-icons/fa6';

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

```css theme={null}
.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:

```jsx theme={null}
// 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

<CardGroup cols={2}>
  <Card title="Font Awesome Website" icon="link" href="https://fontawesome.com/">
    Browse the official Font Awesome icon gallery
  </Card>

  <Card title="Search All Icons" icon="search" href="https://react-icons.github.io/react-icons/">
    Search Font Awesome icons in React Icons preview
  </Card>

  <Card title="License Information" icon="file-contract" href="https://creativecommons.org/licenses/by/4.0/">
    View CC BY 4.0 License details
  </Card>

  <Card title="All Libraries" icon="layer-group" href="/icon-libraries/all-libraries">
    Explore other icon libraries
  </Card>
</CardGroup>