Sass (SCSS)

Are you using SCSS as a CSS preprocessor in your project? No problemo, Font Awesome has an SCSS version if you’d prefer to import our styling into your workflow.

We’ll cover the basics of picking the SCSS files you’ll need for your project, adding Font Awesome to your compile, inject code into a class with Mixins, and more.

Before You Get Started

Make sure you…

• Downloaded the Font Awesome v6 files and have them handy.
• Have a project set up with Sass.
• Need the power (variables, mixins, etc.) that SCSS brings. Plain CSS is far less <pun>sass-y</pun>.

Get Set Up

You’ll find everything you need in the scss directory of the Font Awesome download. Below is the list of files made specifically for SCSS. You can add them all to your project or pick just the ones you need.

Files	What They Do
fontawesome.scss	Main Font Awesome compile
brands.scss	Brand icon style
solid.scss	Solid icon style
regular.scss	Regular icon style
light.scss	Light icon styles
thin.scss	Thin icon styles
sharp-solid.scss	Sharp Solid icon styles
sharp-regular.scss	Sharp Regular icon style
sharp-light.scss	Sharp Light icon style
sharp-thin.scss	Sharp Thin icon style
duotone.scss	Duotone Solid icon styles
duotone-regular.scss	Duotone Regular icon styles
duotone-light.scss	Duotone Light icon styles
duotone-thin.scss	Duotone Thin icon styles
sharp-duotone-solid.scss	Sharp Duotone Solid icon styles
sharp-duotone-regular.scss	Sharp Duotone Regular icon styles
sharp-duotone-light.scss	Sharp Duotone Light icon styles
sharp-duotone-thin.scss	Sharp Duotone Thin icon styles
_animated.scss	animated icon support styling
_bordered-pulled.scss	bordered + pulled icon support styling
_core.scss	Base icon reference class syntax and definition
_custom-icons.scss	includes custom icons in a Kit Download (if you’re using one)
_fixed-width.scss	fixed-width icon support styling
_icons.scss	All icon definitions
_list.scss	icons in a list support styling
_mixins.scss	Utilities used throughout styling/icon definitions
_rotated-flipped.scss	rotating icons support styling
_screen-reader.scss	screen-reader specific and accessibility support styling
_sizing.scss	icon sizing support styling
_stacked.scss	stacking icons support styling
_variables.scss	Where variables are defined that are used throughout styling

Compatibility

Font Awesome’s SCSS can be compiled with Sass and Dart Sass. We tend to stick to the latest versions of both compilers when possible. While you may also compile using node-sass and libsass, be aware that those implementations are officially deprecated and are not actively supported.

Adding Font Awesome to Your Compile

Copy the scss folder into your project. Then copy the entire webfonts folder into your project, where your static files get served.

Open your project’s scss/variables.scss and edit the $fa-font-path variable to point to where you placed the webfonts folder.

$fa-font-path: '../webfonts';

In your main SCSS compile file, import Font Awesome by adding the core styles file, @import "scss/fontawesome.scss". Then import one or more styles.

Here’s a simple example:

// importing core styling file
@import './fontawesome/scss/fontawesome.scss';

// our project needs Solid + Brands
@import './fontawesome/scss/solid.scss';
@import './fontawesome/scss/brands.scss';

If you wanted to use more styles, add more style imports:

// importing core styling file
@import './fontawesome/scss/fontawesome.scss';

// our project needs Classic Solid, Brands, Sharp Solid, and Sharp Duotone Solid icons
@import './fontawesome/scss/solid.scss';
@import './fontawesome/scss/brands.scss';
@import './fontawesome/scss/sharp-solid.scss';
@import './fontawesome/scss/sharp-duotone-solid.scss';

Ch-chigity Check Your Paths!

Make sure the font path and your webfonts directory are relative to where your compiled CSS will be located.

Autoprefixer is not included in v6!

For the sake of not being too prescriptive, we’ve removed Autoprefixer from our compile and build steps. If your project needs it, you’ll need to add it yourself.

---

Using a Downloaded Kit

Starting with version 6.4, you can now download a Kit to compile and host yourself just like you do with Font Awesome! To download your Kit, make sure the Kit’s version in Settings is set to “Latest 6.x” or if you selected a specific version, it needs to be at least 6.4. Then from the Set Up tab in your Kit, you’ll see the options for downloading. Your kit download will contain all of the SCSS files noted above.

Custom Icons in Downloaded Kits

If you have custom icons in your Kit, they will be included as an additional files in your Kit download.

Path to the files	What the files do
/webfonts/custom-icons.woff2 /webfonts/custom-icons.ttf	Custom icon font in WOFF2 and TTF formats
/scss/custom-icons.scss	Sass (SCSS) Preprocessor partial that handles the display of custom icons using Web Fonts

Here’s a simple example that follows the compile steps above along with custom icons:

// importing core styling file
@import './fontawesome/scss/fontawesome.scss';

//  importing Font Awesome styles
@import './fontawesome/scss/solid.scss';
@import './fontawesome/scss/brands.scss';

// importing the custom icons in your Kit
@import './fontawesome/scss/custom-icons.scss';

---

Adding Icons

Once you’ve added the imports above and have your compiled CSS that includes Font Awesome set up and referenced in your project, you can add icons to your project’s HTML.

Here’s an example of how to reference icons with your compiled and hosted CSS:

<head>
  <!--load your compiled CSS (including Font Awesome) -->
  <link
    href="/your-path-to-your-compiled-css-including-fontawesome/file.css"
    rel="stylesheet"
  />
</head>
<body>
  <!-- This example uses <i> element with:
  1. the `fa-solid` style class for solid style
  2. the `user` icon with the `fa-` prefix -->
  <i class="fa-solid fa-user"></i>

  <!-- Or you can use a <span> element, with classes applied in the same way -->

  <span class="fa-solid fa-user"></span>
</body>

SCSS Customizations at Your Command

Any changes to the Font Awesome SCSS variables (e.g. changing the fa- prefix or our sizing scales), will take effect in your project’s compiled CSS.

Custom CSS Using Mixins

Alternately, if you want to use any of our SCSS mixins or utilities, you can leverage our CSS pseudo-elements method of adding icons to your project. This method is also useful when you can’t change the HTML in your project.

Using our @include fa-icon- and @include fa-family- mixins, you can easily generate custom CSS pseudo-element rules with CSS selectors specific to your project.

Style Mixins

Below is the list of available icon style mixins. To use the style mixins, make sure you:

1. Choose the right mixin for your desired style.
2. Pass in the SCSS variable for the icon you want to display.

Style Mixin	Availability	What Style Renders
fa-icon-brands()	Free Plan	Brands
fa-icon-solid()	Free Plan	Solid
fa-icon-regular()	Pro only	Regular
fa-icon-light()	Pro only	Light
fa-icon-thin()	Pro only	Thin

These style mixins also handle the basic rendering styles that we bundle in our toolkit to make sure icons display perfectly in their context across browsers.

Family Mixins

Below is the list of available family mixins:

Family Mixin	Availability	What Style Renders
fa-family-classic()	Free Plan	Classic
fa-family-duotone()	Pro only	Duotone
fa-family-sharp()	Pro only	Sharp
fa-family-sharp-duotone()	Pro only	Sharp Duotone

If you’re using our mixins to render an icon in a specific family (Sharp, for example), you’ll need to add the family mixin (e.g. @include fa-family-sharp) to your CSS rule. Classic is our default family of styles, so there’s no need to add a family mixin unless you’re trying to override a previously set family.

Here’s an example of mixins in action:

// importing core styling file
@import './fontawesome/scss/fontawesome.scss';

// our project needs Classic Solid, Brands, Classic Regular, Duotone Solid, and Duotone Regular styles
@import './fontawesome/scss/solid.scss';
@import './fontawesome/scss/brands.scss';
@import './fontawesome/scss/regular.scss';
@import './fontawesome/scss/duotone.scss';
@import './fontawesome/scss/duotone-regular.scss';

// Solid style of fa-user icon where the Classic family is implied
.user {
  @include fa-icon-solid($fa-var-user);
}

// Classic Solid style of fa-trash icon with the Classic family explicitly added
.trash {
  @include fa-icon-solid($fa-var-trash);
  @include fa-family-classic();
}

// Regular style of fa-triangle-exclamation icon where the Classic family is implied
.triangle-exclamation {
  @include fa-icon-regular($fa-var-triangle-exclamation);
}

// Duotone Solid style of fa-camera-retro icon
.camera-retro {
  @include fa-icon-solid($fa-var-camera-retro);
  @include fa-family-duotone();
}

// Duotone Regular style of camera-retro
.camera-retro-regular {
  @include fa-icon-regular($fa-var-camera-retro);
  @include fa-family-duotone();
}

// Threads brand icon
.threads {
  @include fa-icon-brands($fa-var-threads);
}

---

Custom CSS Using Utilities

If you would like a more customizable approach when creating your styling rules, we’ve made the utilties used in the style mixins available to get the same rendering results.

To write manual rules, you’ll want to:

1. Get the core set up styling of icons by adding @extend %fa-icon;
2. Extend the icon style you would like so your rule will include the styling to render the icon in the Solid style (or use a similar syntax for other styles)
3. Extend the icon family you would like to your rule will include the styling to render the icon in a specific family (Classic is set by default if you don’t extend a family)
4. Use the CSS Custom Properties for --fa (and --fa--fa for Duotone icons) to the icon’s Unicode value. This is similar in syntax to adding icons via pseudo-elements

And make sure you’re importing the icon styles you use in your rules!

Here is an example of utilies in action:

// importing core styling file
@import './fontawesome/scss/fontawesome.scss';

// our project needs Classic Solid, Brands, Sharp Light, Duotone Light, and Sharp Duotone Light styles
@import './fontawesome/scss/solid.scss';
@import './fontawesome/scss/brands.scss';
@import './fontawesome/scss/sharp-light.scss';
@import './fontawesome/scss/duotone-light.scss';
@import './fontawesome/scss/sharp-duotone-light.scss';


// Utilities
// Classic Solid style of the user icon - The Classic family is the default when a family is not explicitly declared
.user {
  @extend %fa-icon;
  @extend .#{$fa-css-prefix}-solid;

  // Set the --fa custom property to the fa-user's unicode value to call the icon
  --fa: "\f007";
}

// Sharp Light style of the user icon
.user-sharp {
  @extend %fa-icon;
  @extend .#{$fa-css-prefix}-light;
  @extend .#{$fa-css-prefix}-sharp;

  --fa: "\f007";
}

// Duotone style of camera-retro icon
.camera-retro {
  @extend %fa-icon;
  @extend .#{$fa-css-prefix}-light;
  @extend .#{$fa-css-prefix}-duotone;

  // Set the --fa custom property to the fa-camera-retro's unicode value to call the primary layer of the icon
  --fa: "\f083";
  // When using Duotone icons, you'll also need to set the --fa--fa custom property to the fa-camera-retro's unicode value twice to call the secondary layer of the icon
  --fa--fa: "\f083\f083";
}


// Duotone style of camera-retro icon
.camera-retro-sharp {
  @extend %fa-icon;
  @extend .#{$fa-css-prefix}-light;
  @extend .#{$fa-css-prefix}-sharp-duotone;

  --fa: "\f083";
  --fa--fa: "\f083\f083";
}

// Threads brand icon
.threads {
  @extend %fa-icon;
  @extend .#{$fa-css-prefix}-brands;

  --fa: "\e618";
}

Note that the default value for #{$fa-css-prefix} is fa- so if you don’t set the prefix, the classes above - like .#{$fa-css-prefix}-solid or .#{$fa-css-prefix}-sharp - resolve to .fa-solid or .fa-sharp when compiled.

Available SCSS Mixins

Utilities	What It Does
fa-sr-only()	A mixin that visually hides an element containing a text-equivalent for an icon while keeping it accessible to assistive technologies
fa-sr-only-focusable()	A mixin that is used alongside fa-sr-only() to show the element again when it’s focused (e.g. by a keyboard-only user)
fa-icon()	A mixin that contains all of the base style set up for an icon (minus an icon’s style and specific name/unicode) compile
fa-icon-solid() fa-icon-regular() fa-icon-light() fa-icon-thin() fa-icon-brands()	Mixins that contain all of the base style set up for an icon along with a specific style to render the icon in
fa-family-classic() fa-family-sharp() fa-family-duotone() fa-family-sharp-duotone()	Mixins that, when combined with fa-icon- style mixins, define the family of styles to be used.
fa-content()	A mixin to make referencing icons via the CSS content property a bit easier. An icon’s variable must be passed in (e.g. fa-content($fa-var-user);).

Available SCSS Variables

Font Awesome’s SCSS also includes several SCSS variables that allow for easier set-up and customization of our styling toolkit.

Variable	What It Does
$fa-css-prefix	Sets the prefix (default set to fa) used on all styling toolkit CSS rules (e.g. fa-lg) + icon reference classes (e.g. fa-user)
$fa-style	Sets the default icon style (using @font-face weight)
$fa-style-family	Sets the default font-family used
$fa-display	Sets the display property (default set to inline-block) for rendered icons
$fa-font-display	Sets the font-display property for Font Awesome’s icon fonts
$fa-fw-width	Sets the width property for all fixed-width icons
$fa-inverse	Sets the color property of .fa-inverse
$fa-border-color	Sets the border-color property used in bordered icons
$fa-border-padding	Sets the padding property used in bordered icons
$fa-border-radius	Sets the border-radius property used in bordered icons
$fa-border-style	Sets the border-style property used in bordered icons
$fa-border-width	Sets the border-width property used in bordered icons
$fa-li-width	Sets the width property for fa-li elements when styling icons in a list icons
$fa-li-margin	Sets the margin-right property for fa-li elements when styling icons in a list icons
$fa-pull-margin	Sets the margin-left/margin-right property for pulled icons icons
$fa-primary-opacity	Sets the opacity of a duotone icon’s primary layer
$fa-secondary-opacity	Sets the opacity of a duotone icon’s secondary layer
$fa-size-scale-base	Sets the base step size that all other relative sizing steps are based on
$fa-size-scale-2xs	Sets the size of step used when relatively sizing icons with .fa-2xs
$fa-size-scale-xs	Sets the size of step used when relatively sizing icons with .fa-xs
$fa-size-scale-sm	Sets the size of step used when relatively sizing icons with .fa-sm
$fa-size-scale-lg	Sets the size of step used when relatively sizing icons with .fa-lg
$fa-size-scale-xl	Sets the size of step used when relatively sizing icons with .fa-xl
$fa-size-scale-2xl	Sets the size of step used when relatively sizing icons with .fa-2xl
$fa-stack-vertical-align	Sets the vertical-align property of stacked icons
$fa-stack-width	Sets the width property of stacked icons
$fa-stack-z-index	Sets the z-index property of stacked icons
$fa-font-path	Sets the location of Font Awesome’s webfonts folder and assets.