Need to look up a specific CSS class or Custom Property? Forgot what a specific style utility class does? Here's a quick reference for everything included in Font Awesome's styling toolkit.

General

Class	Details
fa-inverse	Inverts the color of an icon to white

CSS Custom Property	Details	Accepted Values
--fa-style-family	Set Font Awesome icon family	"Font Awesome 6 Free" "Font Awesome 6 Pro" "Font Awesome 6 Duotone" "Font Awesome 6 Brands"
--fa-style	Set Font Awesome icon style	Any valid Font Awesome style weight
--fa-color	Set color of an icon	Any valid CSS color value
--fa-display	Set display of an icon	Any valid CSS display value
--fa-inverse	Set color of an inverted icon	Any valid CSS color value

Sizing Icons

Class	Details
fa-xs	Changes an icon's font-size to .75em
fa-sm	Changes an icon's font-size to .875em
fa-lg	Changes an icon's font-size to 1.33em and also vertically aligns icon
fa-2x	Changes an icon's font-size to 2em
fa-3x	Changes an icon's font-size to 3em
fa-4x	Changes an icon's font-size to 4em
fa-5x	Changes an icon's font-size to 5em
fa-6x	Changes an icon's font-size to 6em
fa-7x	Changes an icon's font-size to 7em
fa-8x	Changes an icon's font-size to 8em
fa-9x	Changes an icon's font-size to 9em
fa-10x	Changes an icon's font-size to 10em

Fixed-Width Icons

Class	Details
fa-fw	Changes an icon's font-size to .75em

Icons in a List

Class	Details
fa-ul	Used on a <ul> or <ol> elements to style icons as list bullets
fa-li	Used on individual <li> elements to style icons as list bullets

CSS Custom Property	Details	Accepted Values
--fa-li-margin	Set margin around icon	Any valid CSS margin value
--fa-li-width	Set width of icon	Any valid CSS width value

Rotating Icons

Class	Details
fa-rotate-90	Rotates an icon 90°
fa-rotate-180	Rotates an icon 180°
fa-rotate-270	Rotates an icon 270°
fa-flip-horizontal	Mirrors an icon horizontally
fa-flip-vertical	Mirrors an icon vertically
fa-flip-both	Mirrors an icon both vertically and horizontally
fa-rotate-by	Rotates an icon by a specific degree - setting an accompanying valid inline value for --fa-rotate-angle is required

CSS Custom Property	Details	Accepted Values
--fa-rotate-angle	Set rotation angle of.fa-rotate-by	Any valid CSS transform rotate value

Animating Icons

Class	Details
fa-spin	Makes an icon spin 360° clock-wise
fa-spin-pulse	Makes an icon spin 360° clock-wise in 8 incremental steps
fa-spin-reverse	When used in conjunction with fa-spin or fa-spin-pulse, makes an icon spin counter-clockwise

CSS Custom Property	Details	Accepted Values
--fa-spin-direction	Set direction for animation	Any valid CSS animation-direction value
--fa-spin-duration	Set duration for animation	Any valid CSS animation-duration value
--fa-spin-iteration-count	Set number of iterations for animation	Any valid CSS animation-iteration-count value
--fa-spin-timing	Set how the animation progresses through frames	Any valid CSS animation-timing-function value

Bordered Icons

Class	Details
fa-border	Creates a border with border-radius and padding applied around an icons

CSS Custom Property	Details	Accepted Values
--fa-border-color	Set border color	Any valid CSS border-color value
--fa-border-padding	Set padding around icon	Any valid CSS padding value
--fa-border-radius	Set border radius	Any valid CSS border-radius value
--fa-border-style	Set border style	Any valid CSS border-style value
--fa-border-width	Set border width	Any valid CSS border-width value

Pulled Icons

Class	Details
fa-pull-left	Pulls an icon by floating it left and applying a margin-right
fa-pull-right	Pulls an icon by floating it right and applying a margin-left

CSS Custom Property	Details	Accepted Values
--fa-pull-margin	Set margin around icon	Any valid CSS margin value

Stacking Icons

Class	Details
fa-stack	Used on a parent HTML element of the two icons to be stacked
fa-stack-1x	Used on the icon which should be displayed at base size when stacked
fa-stack-2x	Used on the icon which should be displayed larger when stacked
fa-inverse	Inverts the color of the icon displayed at base size when stacked

CSS Custom Property	Details	Accepted Values
--fa-stack-z-index	Set z-index of a stacked icon	Any valid CSS z-index value
--fa-inverse	Set color of an inverted stacked icon	Any valid CSS color value

Duotone Icons

Class	Details
fa-swap-opacity	Swap the default opacity of each layer in a duotone icon (making an icon's primary layer have the default opacity of 40% rather than its secondary layer)

CSS Custom Property	Details	Accepted Values
--fa-primary-color	Set primary layer color	Any valid CSS color value
--fa-primary-opacity	Set primary layer opacity	0 1.0
--fa-secondary-color	Set secondary layer color	Any valid CSS color value
--fa-secondary-opacity	Set secondary layer opacity	0 1.0

Accessibility

Class	Details
fa-sr-only	Visually hides an element containing a text-equivalent for an icon while keeping it accessible to assisitive technologies
fa-sr-only-focusable	Used alongside fa-sr-only to show the element again when it’s focused (e.g. by a keyboard-only user)

Power Transforms

Power Transforms are available only when using the SVG+JS framework. All grow, shrink, and positioning utilities accept arbitrary values (including decimals). Their units are 1/16em each.

HTML data- Attribute	Details
data-fa-transform="shrink-[value]"	Shrinks an icon
data-fa-transform="grow-[value]"	Grows an icon
data-fa-transform="up-[value]"	Moves an icon up
data-fa-transform="right-[value]"	Moves an icon right
data-fa-transform="down-[value]"	Moves an icon down
data-fa-transform="left-[value]"	Moves an icon left
data-fa-transform="rotate-[angle]"	rotates an icon by a specific degree (with negative numbers allowed)
data-fa-transform="flip-h"	mirrors an icon horizontally
data-fa-transform="flip-v"	mirrors icon vertically