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

Advertisement

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

• All 30,013 icons in Font Awesome
• 5 Classic styles of every icon
• 4 Sharp styles of every icon
• A Perpetual License to use Pro
• Services and tools to make easy work of using icons
• Fresh icons, features, and software updates
• Plus support from real humans

Already have a Pro Plan? Sign in

Before You Get Started

Make sure you're:

• Set up with Font Awesome in your project.
• Familiar with the basics of adding Font Awesome icons.

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 (opens new window) below, we've added easy ways to customize aspects of our styling toolkit's features.

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" "Font Awesome 6 Sharp"
--fa-style	Set Font Awesome icon style	Any valid Font Awesome style weight
--fa-display	Set display of an icon	Any valid CSS display value (opens new window)
--fa-inverse	Set color of an inverted icon	Any valid CSS color value (opens new window)
Icons in a List
--fa-li-margin	Set margin around icon	Any valid CSS margin value (opens new window)
--fa-li-width	Set width of icon	Any valid CSS width value (opens new window)
Rotating Icons
--fa-rotate-angle	Set rotation angle of.fa-rotate-by	Any valid CSS transform rotate value (opens new window)
Animating Icons
--fa-animation-delay	Set an initial delay for animation	Any valid CSS animation-direction value (opens new window)
--fa-animation-direction	Set direction for animation	Any valid CSS animation-direction value (opens new window)
--fa-animation-duration	Set duration for animation	Any valid CSS animation-duration value (opens new window)
--fa-animation-iteration-count	Set number of iterations for animation	Any valid CSS animation-iteration-count value (opens new window)
--fa-animation-timing	Set how the animation progresses through frames	Any valid CSS animation-timing-function value (opens new window)
--fa-beat-scale	Set the max value an fa-beat icon will scale	Any valid CSS number value (opens new window)
--fa-fade-opacity	Set lowest opacity value an fa-fade icon will fade to	0 1.0
--fa-beat-fade-opacity	Set lowest opacity value an fa-beat-fade icon will fade to and from	0 1.0
--fa-beat-fade-scale	Set max value that an icon will scale	Set the max value an fa-beat-fade icon will scale
--fa-flip-x	Set an fa-flip icon's x-coordinate of the vector denoting the axis of rotation	Any valid CSS number value (opens new window) between 0 and 1
--fa-flip-y	Set an fa-flip icon'sy-coordinate of the vector denoting the axis of rotation	Any valid CSS number value (opens new window) between 0 and 1
--fa-flip-z	Set an fa-flip icon's z-coordinate of the vector denoting the axis of rotation	Any valid CSS number value (opens new window) between 0 and 1
--fa-flip-angle	Set 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 (opens new window)
Bordered Icons
--fa-border-color	Set border color	Any valid CSS border-color value (opens new window)
--fa-border-padding	Set padding around icon	Any valid CSS padding value (opens new window)
--fa-border-radius	Set border radius	Any valid CSS border-radius value (opens new window)
--fa-border-style	Set border style	Any valid CSS border-style value (opens new window)
--fa-border-width	Set border width	Any valid CSS border-width value (opens new window)
Pulled Icons
--fa-pull-margin	Set margin around icon	Any valid CSS margin value (opens new window)
Stacking Icons
--fa-stack-z-index	Set z-index of a stacked icon	Any valid CSS z-index value (opens new window)
--fa-inverse	Set color of an inverted stacked icon	Any valid CSS color value (opens new window)
Duotone Icons
--fa-primary-color	Set primary layer color	Any valid CSS color value (opens new window)
--fa-primary-opacity	Set primary layer opacity	0 1.0
--fa-secondary-color	Set secondary layer color	Any valid CSS color value (opens new window)
--fa-secondary-opacity	Set secondary layer opacity	0 1.0
Layering Text and Counters
--fa-counter-background-color	Set fa-layers-counter's background color	Any valid CSS color value (opens new window)
--fa-counter-border-radius	Set fa-layers-counter's border radius	Any valid CSS border-radius value (opens new window)
--fa-counter-line-height	Set fa-layers-counter's line-height	Any valid CSS line-height value (opens new window)
--fa-counter-max-width	Set fa-layers-counter's max-width	Any valid CSS width value (opens new window)
--fa-counter-min-width	Set fa-layers-counter's min-width	Any valid CSS width value (opens new window)
--fa-counter-padding	Set fa-layers-counter's padding	Any valid CSS padding value (opens new window)
--fa-counter-scale	Set how much fa-layers-counter is scaled up/down	Any valid CSS transform scale value (opens new window)
--fa-top	Set top offset of .fa-layers-top-left or layers-top-right	Any valid CSS top value (opens new window)
--fa-right	Set right offset of .fa-layers-top-right or layers-bottom-right	Any valid CSS right value (opens new window)
--fa-bottom	Set bottom offset of .fa-layers-bottom-left or layers-bottom-right	Any valid CSS bottom value (opens new window)
--fa-left	Set left offset of .fa-layers-top-left or layers-bottom-left	Any valid CSS left value (opens new window)
--fa-inverse	Set color of an inverted stacked icon	Any valid CSS color value (opens new window)
Pseudo-elements
--fa-font-solid	Sets the font property to use the solid style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-regular	Sets the font property to use the regular style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-light	Sets the font property to use the solid style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-thin	Sets the font property to use the thin style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-duotone	Sets the font property to use the duotone style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-brands	Sets the font property to use the brands style (font-family and font-weight) in pseudo-element custom CSS rules
--fa-font-sharp-solid	Sets 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-regular	Sets 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-light	Sets 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-thin	Sets 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-classic	Sets 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-sharp	Sets the font-family to "Font Awesome 6 Sharp" in Pro projects)

Using Custom Properties in a Project

CSS custom properties (opens new window) 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 (opens new window) 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>

Be careful of specificity and cascade!

CSS Custom properties that are redefined will trump each other. Defining a property in :root {} and then defining the same property in a rule or inline will result in the :root style being overridden.

---

Add Your Own Custom Styling with CSS

Advertisement

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

• All 30,013 icons in Font Awesome
• 5 Classic styles of every icon
• 4 Sharp styles of every icon
• A Perpetual License to use Pro
• Services and tools to make easy work of using icons
• Fresh icons, features, and software updates
• Plus support from real humans

Already have a Pro Plan? Sign in

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 Case	Recommended Selector
Custom styling all icons	Add 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 icon	Use 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>

Writing Custom CSS with our SVG + JS framework

When using our SVG framework, remember that Font Awesome-based <i> DOM elements are replaced with new <svg> elements by default. Be sure that your CSS rules target the right elements.