Mask

Combine two icons create one single-color shape, thanks to the power of SVG in Font Awesome 5! Use it with our new 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">
    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-circle" style="color:Tomato"></i>
      <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-bookmark"></i>
      <i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
      <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
      <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
      <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-calendar"></i>
      <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-certificate"></i>
      <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-envelope"></i>
      <span class="fa-layers-counter" style="background:Tomato">1,419</span>
    </span>
  </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)

Remove ads with a Pro plan!

And of course Pro-level plans come with…

Before You Get Started