Using, sizing and animating icons
The class syntax, the three free styles, the sizing scale, fixed width and stacking, and the rotation and animation utilities.
The class syntax
<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-envelope"></i>
<i class="fa-brands fa-github"></i>
<!-- any inline element works; the classes carry the meaning -->
<span class="fa-solid fa-magnifying-glass"></span>
<!-- icon plus text, with a fixed gap -->
<button class="btn">
<i class="fa-solid fa-floppy-disk" aria-hidden="true"></i>
Save
</button>| Style | Prefix class | Availability |
|---|---|---|
| Solid | fa-solid (alias fas) | Largest free set — the default choice |
| Regular | fa-regular (alias far) | A smaller free subset; the rest require Pro |
| Brands | fa-brands (alias fab) | Logos of companies, languages and platforms |
| Light, duotone, thin, sharp | Pro only | Ignore unless you have a Pro licence |
Every icon needs two classes: the style prefix and the icon name. The older fas fa-home spelling still works through aliases, but new code should use the verbose names, which are the ones the documentation lists.
Sizing, colour and layout
<!-- sizes relative to the current font size -->
<span style="font-size: 20px;">
<i class="fa-solid fa-star fa-xs"></i>
<i class="fa-solid fa-star fa-sm"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star fa-lg"></i>
<i class="fa-solid fa-star fa-xl"></i>
<i class="fa-solid fa-star fa-2xl"></i>
</span>
<!-- absolute multipliers -->
<i class="fa-solid fa-star fa-2x"></i>
<i class="fa-solid fa-star fa-5x"></i>
<style>
.star-red { color: #dc2626; } /* colour comes from CSS */
.icon-slot { width: 1.25em; text-align: center; } /* or use the fa-fw utility */
.icon-btn:hover .fa-solid { transform: scale(1.1); }
</style>
<h3><i class="fa-solid fa-bolt fa-fw" aria-hidden="true"></i> Fast</h3>
<h3><i class="fa-solid fa-shield fa-fw" aria-hidden="true"></i> Safe</h3>| Utility | Effect |
|---|---|
fa-fw | Fixed width so a column of icons lines up in lists and menus |
fa-ul + fa-li | Replaces the browser list marker with an icon |
fa-border | Draws a border and padding around the icon |
fa-pull-left / fa-pull-right | Floats the icon with a margin for text wrapping |
color in CSS | The icon font inherits colour like any text; SVG icons use currentColor |
Rotation, stacking and animation
<i class="fa-solid fa-rotate fa-spin"></i> <!-- continuous, stepped -->
<i class="fa-solid fa-spinner fa-pulse"></i> <!-- eight discrete steps -->
<i class="fa-regular fa-heart fa-beat"></i> <!-- scale pulse -->
<i class="fa-solid fa-bell fa-shake"></i>
<i class="fa-solid fa-arrow-right fa-rotate-90"></i>
<i class="fa-solid fa-arrows-rotate fa-flip-horizontal"></i>
<!-- layered stack: one icon behind another -->
<span class="fa-stack fa-lg">
<i class="fa-solid fa-circle fa-stack-2x" style="color: #4f46e5;"></i>
<i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>
<style>
/* custom angle (v6.2 and later) */
.tilted { --fa-rotate-angle: 30deg; }
/* plain CSS transforms work on the icon element too */
.nudged { display: inline-block; transform: translateY(-1px) rotate(-8deg); }
</style>- Animated icons should be reserved for state — a spinner, a loading refresh — not applied decoratively.
- A CSS transform on the icon needs
display: inline-block, because transforms do not apply to non-replaced inline elements. fa-stack-1xandfa-stack-2xsize the layers relative to the stack, which keeps the composition stable when the font size changes.
💡
Icons can also be injected from CSS with a pseudo-element, for example
content: "\f015" with font-family: "Font Awesome 6 Free" and font-weight: 900. It is convenient for list markers, but the glyph code is undocumented and fragile — the named classes are always safer.FAQ
Why does my icon show as a square box?
Either the icon name does not exist in the style you requested, or the webfont failed to load — check the network tab for the
webfonts files. Free icons that only exist in the Solid style will not render with fa-regular.How do I change the icon colour?
Set the CSS
color of the icon or its parent. The webfont inherits colour as text, and the SVG renderer sets fill: currentColor, so both approaches behave identically.Related
Installing Font Awesome Accessibility and performance trade-offs
Last refreshed 2026-09-18.