Skip to content
Font Awesome Docs: Version 5

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.

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.

Layering

  <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 componentsHow it works
Inner Icon (cut out)Set using typical class attribute. Transform using any data-fa-transform properties.
Outer IconSet using data-fa-mask attribute on the Inner Icon.
ID used in defsSet using data-fa-mask-id (Available in 5.12.2 or later)