Skip to content

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.

Get Set Up

You’ll find everything you need in the fontawesome6 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.

FilesWhat They Do
fontawesome.scssMain Font Awesome compile
brands.scssBrand icon style
solid.scssSolid icon style
regular.scssRegular icon style
light.scssLight icon styles
thin.scssThin icon styles
sharp-solid.scssSharp Solid icon styles
sharp-regular.scssSharp Regular icon style
sharp-light.scssSharp Light icon style
sharp-thin.scssSharp Thin icon style
duotone.scssDuotone icon style
_duotone-icons.scssDuotone icon classes
_variables.scssWhere variables are defined that are used throughout styling
_mixins.scssUtilities used throughout styling/icon definitions
_core.scssBase icon reference class syntax and definition
_sizing.scssicon sizing support styling
_fixed-width.scssfixed-width icon support styling
_list.scssicons in a list support styling
_bordered-pulled.scssbordered + pulled icon support styling
_animated.scssanimated icon support styling
_rotated-flipped.scssrotating icons support styling
_stacked.scssstacking icons support styling
_icons.scssAll icon definitions
_screen-reader.scssscreen-reader specific and accessibility support styling
_custom-icons.scssincludes custom icons in a Kit Download (if you’re using one)

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, and Sharp Solid
@import './fontawesome/scss/solid.scss';
@import './fontawesome/scss/brands.scss';
@import './fontawesome/scss/sharp-solid.scss';

Using Duotone Icons

If a project uses Duotone icons, you’ll need to @import two separate files.

// importing core styling file
@import './fontawesome/scss/fontawesome.scss';
// our project needs Duotone - which requires both of the following files
@import './fontawesome/scss/duotone.scss';
@import './fontawesome/scss/\_duotone-icons.scss';

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 filesWhat the files do
/webfonts/custom-icons.woff
/webfonts/custom-icons.ttf
Custom icon font in WOFF2 and TTF formats
/scss/custom-icons.scssSass (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 a kit's custom icons
@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>

Custom SCSS-based CSS Rules

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 to do. This method is also useful when changing the HTML on your project is not an option.

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.

// Solid style of user
.user {
@include fa-icon-solid($fa-var-user);
}
// Regular style of triangle-exclamation
.triangle-exclamation {
@include fa-icon-regular($fa-var-triangle-exclamation);
}
// Light style of newspaper
.newspaper {
@include fa-icon-light($fa-var-newspaper);
}
// Thin style of paintbrush-fine
.paintbrush-fine {
@include fa-icon-thin($fa-var-paintbrush-fine);
}
// Duotone style of camera-retro
.camera-retro {
@include fa-icon-duotone($fa-var-camera-retro);
}
// Twitter brand icon
.twitter {
@include fa-icon-brands($fa-var-twitter);
}
// Sharp Solid style of trash
.trash {
@include fa-icon-solid($fa-var-trash);
@include fa-family-sharp(); // define Sharp family
}
// Sharp Regular style of trash
.trash {
@include fa-icon-regular($fa-var-trash);
@include fa-family-sharp(); // define Sharp family
}
// Classic Solid style of trash
.trash {
@include fa-icon-solid($fa-var-trash);
@include fa-family-classic(
); // explicity setting Classic family (optional since this is Font Awesome's default)
}

Style Mixins

To use the style mixins, you’ll want to:

  1. Choose the right mixin for your desired style.
  2. Pass in the SCSS variable for the icon you want to display.
Style MixinAvailabilityWhat Style Renders
fa-icon-brands()Free PlanBrands
fa-icon-solid()Free PlanSolid
fa-icon-regular()Pro onlyRegular
fa-icon-light()Pro onlyLight
fa-icon-thin()Pro onlyThin
fa-icon-duotone()Pro onlyDuotone

Family Mixins

If you’re using our mixins to render an icon in a specific family, like our Sharp family of styles, you’ll need to reference the right family mixin (e.g. @include fa-family-sharp). Classic is our default family of styles, so there’s no need to set it with a family mixin unless you’re trying to explicitly set to override a previous family.

Family MixinAvailabilityWhat Style Renders
fa-family-classic()Free PlanClassic when used with other style mixins
fa-family-sharp()Pro onlySharp when used with other style mixins

A More Manual Custom CSS Approach

If you’d rather a more customizable approach when right 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. Use @extend .fa-solid; to include the styling to render the icon in the Solid style (similar syntax for other styles)
  3. Use @extend .fa-classic; or @extend .fa-sharp; to include the styling to render the icon in a specific family (Classic is set by default)
  4. Use fa-content and variable names to make including an icon’s Unicode values a little easier. This is similar in syntax to adding icons via pseudo-elements
// Solid style of user
.user {
@extend %fa-icon;
@extend .fa-solid;
&:before {
content: fa-content($fa-var-user);
}
}
// Regular style of triangle-exclamation
.triangle-exclamation {
@extend %fa-icon;
@extend .fa-regular;
&:before {
content: fa-content($fa-var-triangle-exclamation);
}
}
// Light style of newspaper
.newspaper {
@extend %fa-icon;
@extend .fa-light;
&:before {
content: fa-content($fa-var-newspaper);
}
}
// Thin style of paintbrush-fine
.paintbrush-fine {
@extend %fa-icon;
@extend .fa-thin;
&:before {
content: fa-content($fa-var-paintbrush-fine);
}
}
// Duotone style of camera-retro
.camera-retro {
@extend %fa-icon;
@extend .fa-duotone;
&:before {
content: fa-content($fa-var-camera-retro);
}
}
// Twitter brand icon
.twitter {
@extend %fa-icon;
@extend .fa-brands;
&:before {
content: fa-content($fa-var-twitter);
}
}
// Sharp Solid style of trash
.trash {
@extend %fa-icon;
@extend .fa-solid;
@extend .fa-sharp; // define Sharp family
&:before {
content: fa-content($fa-var-trash);
}
}
// Classic Solid style of trash
.trash {
@extend %fa-icon;
@extend .fa-solid;
@extend .fa-classic; // explicity setting Classic family (optional since this is Font Awesome's default)
&:before {
content: fa-content($fa-var-trash);
}
}

Included Mixins

UtilitiesWhat 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-duotone()
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-sharp()
fa-family-classic()
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);).

Simplify and Customize with Variables

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

VariableWhat It Does
$fa-css-prefixSets 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-styleSets the default icon style (using @font-face weight)
$fa-style-familySets the default font-family used
$fa-displaySets the display property (default set to inline-block) for rendered icons
$fa-font-displaySets the font-display property for Font Awesome’s icon fonts
$fa-fw-widthSets the width property for all fixed-width icons
$fa-inverseSets the color property of .fa-inverse
$fa-border-colorSets the border-color property used in bordered icons
$fa-border-paddingSets the padding property used in bordered icons
$fa-border-radiusSets the border-radius property used in bordered icons
$fa-border-styleSets the border-style property used in bordered icons
$fa-border-widthSets the border-width property used in bordered icons
$fa-li-widthSets the width property for fa-li elements when styling icons in a list icons
$fa-li-marginSets the margin-right property for fa-li elements when styling icons in a list icons
$fa-pull-marginSets the margin-left/margin-right property for pulled icons icons
$fa-primary-opacitySets the opacity of a duotone icon’s primary layer
$fa-secondary-opacitySets the opacity of a duotone icon’s secondary layer
$fa-size-scale-baseSets the base step size that all other relative sizing steps are based on
$fa-size-scale-2xsSets the size of step used when relatively sizing icons with .fa-2xs
$fa-size-scale-xsSets the size of step used when relatively sizing icons with .fa-xs
$fa-size-scale-smSets the size of step used when relatively sizing icons with .fa-sm
$fa-size-scale-lgSets the size of step used when relatively sizing icons with .fa-lg
$fa-size-scale-xlSets the size of step used when relatively sizing icons with .fa-xl
$fa-size-scale-2xlSets the size of step used when relatively sizing icons with .fa-2xl
$fa-stack-vertical-alignSets the vertical-align property of stacked icons
$fa-stack-widthSets the width property of stacked icons
$fa-stack-z-indexSets the z-index property of stacked icons
$fa-font-pathSets the location of Font Awesome’s webfonts folder and assets.