# Stacking Icons

How to stack multiple Font Awesome icons for layered effects.

> You can stack our icons easily with the support styling bundled with Font Awesome.

We'll cover the basics of aligning stacked icons alongside single icons, changing default font size, changing the default font size with stacking, and simple CSS customizations.

Make sure you're:

- [Set up with Font Awesome](/web.md#web-setup) in your project.
- Familiar with the basics of [adding Font Awesome icons](/web/add-icons/how-to.md).

  <h4>
    Using SVG + JS? Try Layers!
  </h4>

If you're using
<a href="/web/dig-deeper/webfont-vs-svg.md">SVG+JS</a>
, you might want to
use the newer
<a href="/web/style/layer.md">layering</a>
method instead.

To stack multiple icons, use the `fa-stack` class on the parent HTML element of the 2 icons you want to stack. Then add the `fa-stack-1x` class for the regularly sized icon and add the `fa-stack-2x` class for the larger icon. `fa-inverse` can be added to the icon with the `fa-stack-1x` to help with a knock-out looking effect. You can even throw larger icon classes on the parent to get further control of sizing.

<span class="fa-stack fa-2x">
<i class="fa-solid fa-square fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fa-solid fa-circle fa-stack-2x"></i>
<i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fa-solid fa-camera fa-stack-1x"></i>
No
</span>
<span class="fa-stack fa-2x">
<i class="fa-solid fa-square fa-stack-2x"></i>
<i class="fa-solid fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
<i class="fa-solid fa-square fa-stack-2x"></i>
<i class="fa-solid fa-terminal fa-stack-1x fa-inverse"></i>
</span>

```html
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-camera fa-stack-1x"></i>
  No
</span>
<span class="fa-stack fa-2x">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fa-solid fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fa-solid fa-terminal fa-stack-1x fa-inverse"></i>
</span>
```

## Aligning Stacked and Regular Icons

You can use stacked icons right alongside single icons. Since stacked icons are styled by our framework's included CSS to be twice the size of single icons, you'll need to either size down the stacked icon or size up the single icons.

  <i class="fa-regular fa-circle fa-2x"></i>
  <span class="fa-stack" style="vertical-align: top;">
    <i class="fa-regular fa-circle fa-stack-2x"></i>
    <i class="fa-solid fa-flag fa-stack-1x"></i>
  </span>
  <span class="fa-stack" style="vertical-align: top;">
    <i class="fa-solid fa-circle fa-stack-2x"></i>
    <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
  </span>
  <i class="fa-regular fa-circle fa-2x"></i>

```html
<i class="fa-regular fa-circle fa-2x"></i>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fa-regular fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fa-solid fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>
<i class="fa-regular fa-circle fa-2x"></i>
```

## Changing the Default Font Size with Stacking

When you stack icons but change the font-size, you'll need to make some adjustments to your CSS to keep the icons aligned.

  <h4>
    Some Custom CSS Required
  </h4>

You'll need to write your own custom rules if you change the default `font-size` of stacked icons as well as depending
on your layout needs by default stacked icons are set to `display: inline-block;` and `vertical-align:middle;`.

<br />

  <i style="vertical-align: top;" class="icon-padding fa-regular fa-circle"></i>
  <span class="icon-padding fa-stack small" style="vertical-align: top;font-size: 0.5em;">
    <i style="vertical-align: middle;" class="fa-regular fa-circle fa-stack-2x"></i>
    <i style="vertical-align: middle;" class="fa-solid fa-flag fa-stack-1x"></i>
  </span>
  <span class="icon-padding fa-stack small" style="vertical-align: top;font-size: 0.5em;">
    <i class="fa-solid fa-circle fa-stack-2x"></i>
    <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
  </span>
  <i style="vertical-align: top;" class="icon-padding fa-regular fa-circle"></i>

```html
<style>
  .fa-stack.small {
    font-size: 0.5em;
  }
  i {
    vertical-align: middle;
  }
</style>
<i class="fa-regular fa-circle"></i>
<span class="fa-stack small">
  <i class="fa-regular fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack small">
  <i class="fa-solid fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
</span>
<i class="fa-regular fa-circle"></i>
```

## Stacking Classes

| Class         | Details                                                              |
| :------------ | :------------------------------------------------------------------- |
| `fa-stack`    | Used on a parent HTML element of the two icons to be stacked         |
| `fa-stack-1x` | Used on the icon which should be displayed at base size when stacked |
| `fa-stack-2x` | Used on the icon which should be displayed larger when stacked       |
| `fa-inverse`  | Inverts the color of the icon displayed at base size when stacked    |

## Customization

We've added [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to make customizing easier and more efficient. Define your own values for the following properties to [override and customize](/web/style/custom.md#using-custom-properties-in-a-project) Font Awesome's defaults.

| CSS Custom Property  | Details                               | Accepted Values                                                                             |
| :------------------- | :------------------------------------ | :------------------------------------------------------------------------------------------ |
| `--fa-stack-z-index` | Set z-index of a stacked icon         | Any valid CSS `z-index` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)   |
| `--fa-inverse`       | Set color of an inverted stacked icon | Any valid CSS `color` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) |

  <span class="fa-stack fa-2x">
    <i class="fab fa-font-awesome fa-stack-1x fa-inverse" style="--fa-stack-z-index: 2;"></i>
    <i class="fa-solid fa-square fa-stack-2x" style=" --fa-stack-z-index: 1;"></i>
  </span>
  <span class="fa-stack fa-2x" style="--fa-inverse: #1da1f2;">
    <i class="fa-solid fa-square fa-stack-2x"></i>
    <i class="fab fa-font-awesome fa-stack-1x fa-inverse"></i>
  </span>

```html
<span class="fa-stack fa-2x">
  <i class="fab fa-font-awesome fa-stack-1x fa-inverse" style="--fa-stack-z-index: 2;"></i>
  <i class="fa-solid fa-square fa-stack-2x" style="--fa-stack-z-index: 1;"></i>
</span>
<span class="fa-stack fa-2x" style="--fa-inverse: #1da1f2;">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fab fa-font-awesome fa-stack-1x fa-inverse"></i>
</span>
```

---

  <h4>
    Need more power while stacking?
  </h4>

Our SVG + JS method includes powerful ways to
<a href="/web/style/mask.md">mask</a>
and
<a href="/web/style/layer.md">layer</a>
that allows for rotating an icon on a more granular
scale, even by a single degree! If you're using Font Awesome that way, check
it out.