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.

Advertisement

Before You Get Started

Make sure you're:

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)

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!