# Masking

Guide to masking Font Awesome icons for creative styling effects.

> 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.

Make sure you're:

- [Set up with Font Awesome](/web.md#web-setup) in your project.
- Using [the SVG+JS method of Font Awesome](/web/dig-deeper/webfont-vs-svg.md).
- Familiar with the basics of [adding Font Awesome icons](/web/add-icons/how-to.md).

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.

  <img
    slot="media"
    src="/web/style/images/masks.png"
    alt="Masks"
  />
  <span class="wa-card-image-description">
    Masks
  </span>

```html
<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>
```

  <h4>
    Your Turn!
  </h4>

Play dress-up with these <a target="_blank" rel="noopener noreferrer" href="https://codepen.io/fontawesome/pen/wvbGRdB">Codepen masking examples</a>.

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.)

  <img
    slot="media"
    src="/web/style/images/data-mask.png"
    alt="Masks"
  />
  <span class="wa-card-image-description">
    Masks
  </span>

```html
<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)                               |