Masking

Combine two icons create one single-color shape, thanks to the power of SVG+JS! Use it with Power Transforms for some really awesome effects.

Before You Get Started

Make sure you're:

Set up with Font Awesome in your project.
Using the SVG+JS method of Font Awesome.
Familiar with the basics of adding Font Awesome icons.

Masks are great when you do want your background color to show through. For clarity in the example, we’ve added a background color on the icon so you can see the effect.

  <div class="fa-4x">
    <i class="fa-solid fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fa-solid fa-comment" style="background:MistyRose"></i>
    <i class="fa-brands  fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fa-solid fa-circle" style="background:MistyRose"></i>
    <i class="fa-solid fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fa-solid fa-square" style="background:MistyRose"></i>
    <i class="fa-solid fa-mask" data-fa-transform="shrink-3 up-1" data-fa-mask="fa-solid fa-circle" style="background:MistyRose"></i>
  </div>

To accomplish the masking some SVG definitions are generated. You can control the ID's used by specifying data-fa-mask-id. (Available in 5.12.2 or later.)

  <div class="fa-4x">
    <i class="fa-solid fa-pen-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fa-solid fa-comment" data-fa-mask-id="comment" style="background:MistyRose"></i>
  </div>

Masking components	How it works
Inner Icon (cut out)	Set using typical `class` attribute. Transform using any `data-fa-transform` properties.
Outer Icon	Set using `data-fa-mask` attribute on the Inner Icon.
ID used in defs	Set using `data-fa-mask-id` (Available in 5.12.2 or later)

Masking

Remove ads with a Pro plan!

And of course Pro-level plans come with…

Before You Get Started