Quick reference class name, size, animation, prefix, and usage examples for FontAwesome icons
Adjust icon size relative to parent element font-size
| Class | Scale | Example |
|---|---|---|
fa-xs | 0.75em | |
fa-sm | 0.875em | |
fa-lg | 1.33em | |
fa-2x | 2em | |
fa-3x | 3em | |
fa-4x | 4em | |
fa-5x | 5em | |
fa-6x | 6em | |
fa-7x | 7em | |
fa-8x | 8em | |
fa-9x | 9em | |
fa-10x | 10em |
Add animation effects:
| Class | Effect | Example |
|---|---|---|
fa-spin | Spin | |
fa-pulse | Pulse | |
fa-beat | Beat | |
fa-fade | Fade | |
fa-beat-fade | Beat Fade | |
fa-flip | Flip | |
fa-shake | Shake |
Rotate icons by fixed angles:
| Class | Effect | Example |
|---|---|---|
fa-rotate-90 | Rotate 90 | |
fa-rotate-180 | Rotate 180 | |
fa-rotate-270 | Rotate 270 | |
fa-flip-horizontal | Horizontal | |
fa-flip-vertical | Vertical | |
fa-flip-both | Both |
Different versions use different CSS prefixes:
| Style | v7 | v6 | v5 | v4 |
|---|---|---|---|---|
| Solid | fa-solid | fa-solid | fas | fa |
| Regular | fa-regular | fa-regular | far | — |
| Brands | fa-brands | fa-brands | fab | — |
| Light | Pro | Pro | — | |
| Thin | Pro | — | — | |
| Duotone | Pro | Pro | — | |
| Sharp | Pro | — | — | |
Feature comparison across versions:
| Feature | v4 | v5 | v6 | v7 |
|---|---|---|---|---|
| Release Date | 2014 | 2018 | 2022 | 2025 |
| Free Icons | ~600 | ~1,500 | ~2,000 | ~2,500 |
| Free Styles | 1 (Solid) | 3 (Solid/Regular/Brands) | 3 (Solid/Regular/Brands) | 3 (Solid/Regular/Brands) |
| SVG Framework | No | Yes | Enhanced | 30% Faster |
| SVG Sprites | No | Yes | Yes | Yes |
| ESM | No | No | Basic | Full |
| React/Vue | No | Yes | Yes | Yes |
| CSS Prefix | fa | fas/far/fab | fa-solid/regular/brands | fa-solid/regular/brands |
| npm Package | font-awesome | @fortawesome/fontawesome-free | @fortawesome/fontawesome-free | @fortawesome/fontawesome-free |
| Maintenance | Stopped | Security Updates | Active | Latest |