Skip to content

Layering Text & Counters

Layers are the new way to place icons and text visually on top of each other using the power of SVG+JS, replacing our classic icons stacks. With this new approach, you can use more than two icons.

We’ll cover the basics of how to use custom CSS to get layered effects.

Layers are awesome when you don’t want your page’s background to show through, or when you do want to use multiple colors, layer several icons, layer text, or layer counters onto an icon. For clarity in the example, we’ve added a background color on the layers so you can see the effect.


<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fa-solid fa-times" data-fa-transform="shrink-6"></i>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-bookmark"></i>
<i class="fa-inverse fa-solid fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-play" data-fa-transform="rotate--90 grow-4"></i>
<i class="fa-solid fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fa-solid fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fa-solid fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid 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 class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
Layering ElementHow It Works
fa-layersWraps your stack of icons or text. You’ll likely want to also include an fa-fw class so your layers align.
Inner iconsAdd as many icons as you like directly inside your fa-layers element. Icons stack with the last icon on the top.
fa-layers-textAdd inside your fa-layers element to put text on top of an icon. Combine with data-fa-transform for full control.
fa-layers-counterAdds a counter to the top right of your icons. Can be positioned with fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left and the default fa-layers-top-right. Overflow text is truncated with an ellipsis.


We’ve added CSS custom properties to make customizing easier and more efficient. Define your own values for the following properties to override and customize Font Awesome’s defaults.

CSS Custom PropertyDetailsAccepted Values
--fa-counter-background-colorSet fa-layers-counter’s background colorAny valid CSS color value
--fa-counter-border-radiusSet fa-layers-counter’s border radiusAny valid CSS border-radius value
--fa-counter-line-heightSet fa-layers-counter’s line-heightAny valid CSS line-height value
--fa-counter-max-widthSet fa-layers-counter’s max-widthAny valid CSS width value
--fa-counter-min-widthSet fa-layers-counter’s min-widthAny valid CSS width value
--fa-counter-paddingSet fa-layers-counter’s paddingAny valid CSS padding value
--fa-counter-scaleSet how much fa-layers-counter is scaled up/downAny valid CSS transform scale value
--fa-topSet top offset of .fa-layers-top-left or layers-top-rightAny valid CSS top value
--fa-rightSet right offset of .fa-layers-top-right or layers-bottom-rightAny valid CSS right value
--fa-bottomSet bottom offset of .fa-layers-bottom-left or layers-bottom-rightAny valid CSS bottom value
--fa-leftSet left offset of .fa-layers-top-left or layers-bottom-leftAny valid CSS left value
--fa-inverseSet color of an inverted stacked iconAny valid CSS color value