Skip to content

Customizing Icons

Font Awesome icons can be customized even further using your own CSS. We’ve even added CSS Custom Properties to our style toolkit options.

Customize with CSS Custom Properties

Our styling toolkit provides a lot of utility, including size, rotate, stack, and animate icons. Using the CSS custom properties below, we’ve added easy ways to customize aspects of our styling toolkit’s features.

CSS Custom PropertyDetailsAccepted Values
--fa-style-familySet Font Awesome icon family"Font Awesome 6 Free"
"Font Awesome 6 Pro"
"Font Awesome 6 Duotone"
"Font Awesome 6 Brands"
"Font Awesome 6 Sharp"
--fa-styleSet Font Awesome icon styleAny valid Font Awesome style weight
--fa-displaySet display of an iconAny valid CSS display value
--fa-inverseSet color of an inverted iconAny valid CSS color value


Icons in a List
--fa-li-marginSet margin around iconAny valid CSS margin value
--fa-li-widthSet width of iconAny valid CSS width value


Rotating Icons
--fa-rotate-angleSet rotation angle of.fa-rotate-byAny valid CSS transform rotate value


Animating Icons
--fa-animation-delaySet an initial delay for animationAny valid CSS animation-direction value
--fa-animation-directionSet direction for animationAny valid CSS animation-direction value
--fa-animation-durationSet duration for animationAny valid CSS animation-duration value
--fa-animation-iteration-countSet number of iterations for animationAny valid CSS animation-iteration-count value
--fa-animation-timingSet how the animation progresses through framesAny valid CSS animation-timing-function value
--fa-beat-scaleSet the max value an fa-beat icon will scaleAny valid CSS number value
--fa-fade-opacitySet lowest opacity value an fa-fade icon will fade to0 1.0
--fa-beat-fade-opacitySet lowest opacity value an fa-beat-fade icon will fade to and from0 1.0
--fa-beat-fade-scaleSet max value that an icon will scaleSet the max value an fa-beat-fade icon will scale
--fa-flip-xSet an fa-flip icon’s x-coordinate of the vector denoting the axis of rotationAny valid CSS number value between 0 and 1
--fa-flip-ySet an fa-flip icon’sy-coordinate of the vector denoting the axis of rotationAny valid CSS number value between 0 and 1
--fa-flip-zSet an fa-flip icon’s z-coordinate of the vector denoting the axis of rotationAny valid CSS number value between 0 and 1
--fa-flip-angleSet an fa-flip icon’s rotation angle. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.Any valid CSS angle value


Bordered Icons
--fa-border-colorSet border colorAny valid CSS border-color value
--fa-border-paddingSet padding around iconAny valid CSS padding value
--fa-border-radiusSet border radiusAny valid CSS border-radius value
--fa-border-styleSet border styleAny valid CSS border-style value
--fa-border-widthSet border widthAny valid CSS border-width value


Bounce Icons
--fa-bounce-reboundSet the amount of rebound an icon has when landing after the jumpAny valid CSS number value
--fa-bounce-heightSet the max height an icon will jump to when bouncingAny valid CSS number value
--fa-bounce-start-scale-xSet the icon’s horizontal distortion (“squish”) when starting to bounceAny valid CSS number value
--fa-bounce-start-scale-ySet the icon’s vertical distortion (“squish”) when starting to bounceAny valid CSS number value
--fa-bounce-jump-scale-xSet the icon’s horizontal distortion (“squish”) at the top of the jumpAny valid CSS number value
--fa-bounce-jump-scale-ySet the icon’s vertical distortion (“squish”) at the top of the jumpAny valid CSS number value
--fa-bounce-land-scale-xSet the icon’s horizontal distortion (“squish”) when landing after the jumpAny valid CSS number value
--fa-bounce-land-scale-ySet the icon’s vertical distortion (“squish”) when landing after the jumpAny valid CSS number value


Pulled Icons
--fa-pull-marginSet margin around iconAny valid CSS margin value


Stacking Icons
--fa-stack-z-indexSet z-index of a stacked iconAny valid CSS z-index value
--fa-inverseSet color of an inverted stacked iconAny valid CSS color value


Duotone Icons
--fa-primary-colorSet primary layer colorAny valid CSS color value
--fa-primary-opacitySet primary layer opacity0 1.0
--fa-secondary-colorSet secondary layer colorAny valid CSS color value
--fa-secondary-opacitySet secondary layer opacity0 1.0


Layering Text and Counters
--fa-counter-background-colorSet fa-layers-counter’s background colorAny valid CSS color value
--fa-counter-border-radiusSet fa-layers-counter’s border radiusAny valid CSS border-radius value
--fa-counter-line-heightSet fa-layers-counter’s line-heightAny valid CSS line-height value
--fa-counter-max-widthSet fa-layers-counter’s max-widthAny valid CSS width value
--fa-counter-min-widthSet fa-layers-counter’s min-widthAny valid CSS width value
--fa-counter-paddingSet fa-layers-counter’s paddingAny valid CSS padding value
--fa-counter-scaleSet how much fa-layers-counter is scaled up/downAny valid CSS transform scale value
--fa-topSet top offset of .fa-layers-top-left or layers-top-rightAny valid CSS top value
--fa-rightSet right offset of .fa-layers-top-right or layers-bottom-rightAny valid CSS right value
--fa-bottomSet bottom offset of .fa-layers-bottom-left or layers-bottom-rightAny valid CSS bottom value
--fa-leftSet left offset of .fa-layers-top-left or layers-bottom-leftAny valid CSS left value
--fa-inverseSet color of an inverted stacked iconAny valid CSS color value


Pseudo-elements
--fa-font-solidSets the font property to use the solid style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-regularSets the font property to use the regular style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-lightSets the font property to use the solid style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-thinSets the font property to use the thin style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-duotoneSets the font property to use the duotone style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-brandsSets the font property to use the brands style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-sharp-solidSets the font property to use the sharp family and solid style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-sharp-regularSets the font property to use the sharp family and regular style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-sharp-lightSets the font property to use the sharp family and light style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-sharp-thinSets the font property to use the sharp family and thin style (font-family and font-weight) in pseudo-element custom CSS rules


Fast Style Switching
--fa-style-family-classicSets the font-family to "Font Awesome 6 Pro" in Pro projects)
Sets the font-family "Font Awesome 6 Free" in Free projects.
--fa-style-family-sharpSets the font-family to "Font Awesome 6 Sharp" in Pro projects)

Using Custom Properties in a Project

CSS custom properties are still a pretty new thing for most folks. Here are some ways you can define them within your project…

Setting Properties with CSS :root

You can define custom properties at CSS :root pseudo-class level. This will make any icons that use a styling toolkit’s feature inherit the properties by default.

<!-- by default, everything will be in v6's Classic regular style and in the holiday spirit -->
<style>
:root {
--fa-style-family: 'Font Awesome 6 Pro';
--fa-style: 400;
--fa-border-color: red;
--fa-primary-color: green;
--fa-secondary-color: red;
}
</style>

Setting Properties with Project-Based CSS Rules

You can also set custom properties inside of your project’s CSS, in the <head> of a page or in a separate stylesheet. These properties will be scoped to just elements that match the selector of the rule you’ve included them in.

<style>
/* setting a decorative icon dropcap before a block of text */
.ye-olde-icon-dropcap {
--fa-border-color: WhiteSmoke;
--fa-border-padding: 2em;
--fa-border-radius: 0.25em;
--fa-pull-margin: 2em;
font-size: 8em;
}
/* playing DJ with fa-record-vinyl */
.track-quick-spin {
--fa-spin-duration: 0.25s;
--fa-spin-iteration-count: 1;
--fa-spin-timing: ease-out;
}
.track-vocals {
--fa-spin-duration: 10s;
--fa-spin-timing: ease-in-out;
--fa-spin-iteration-count: 2;
}
.track-dope-hook {
--fa-spin-duration: 10s;
--fa-spin-iteration-count: 10;
}
/* Mo' Malfoy! Mo' Malfoy! Mo' Malfoy! */
.theme-slytherin {
--fa-primary-color: darkgreen;
--fa-secondary-color: silver;
}
/* extra sharp flavor */
.theme-sharp {
font: var(--fa-font-sharp-solid);
}
</style>

Setting Properties with Inline Styles

Many of the examples in these docs define CSS custom properties using inline styling by adding a style attribute to an element. This is best for one-offs or very custom colored/styled duotone icons that you won’t need to change at a system level.

<!-- rotating an icon -->
<i class="fa-solid fa-bomb fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>
<!-- using inline styles to define duotone icon custom properties -->
<i class="fa-duotone fa-crow" style="--fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>

Add Your Own Custom Styling with CSS

Everything you can typically control with CSS is up for grabs — from color to display to alignment. We recommend targeting icons in your CSS in a couple of different ways. You can also add your own custom styling to Font Awesome icons by adding your own CSS rules in your project’s code.

Styling CaseRecommended Selector
Custom styling all iconsAdd a consistent custom class to all icons (e.g. .icon, .[projectprefix]-icon, or .fa-icon)

You can also use style-classes for the in-use icon styles
.fa-solid { ... }
.fa-regular { ... }
.fa-light { ... }
.fa-thin { ... }
.fa-duotone { ... }
.fa-brands { ... }
.fa-sharp-solid { ... }
Custom styling a specific iconUse the individual icon name, prefixed with .fa-
.fa-user { ... }
.fa-font-awesome { ... }

Here’s a quick example of using those selectors to add custom color to Font Awesome icons:

<!-- reference your copy of Font Awesome in the head -->
<head>
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/sharp-solid.css" rel="stylesheet" />
</head>

<!-- Add some style -->
<style>
/* custom styling for all icons */
.fa-solid,
.fa-brands,
.fa-sharp-solid {
background-color: papayawhip;
border-radius: 0.2em;
padding: 0.3em;
}
/* custom styling for specific icons */
.fa-fish {
color: salmon;
}
.fa-frog {
color: green;
}
.fa-user-ninja.vanished {
opacity: 0.2;
}
.fa-facebook {
color: rgb(59, 91, 152);
}
</style>
<!-- Add some Icons -->
<body>
<i class="fa-solid fa-fish"></i>
<i class="fa-solid fa-frog"></i>
<i class="fa-solid fa-user-ninja vanished"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-sharp fa-solid fa-fish"></i>
</body>