Home Docs Stacking Icons

Stacking Icons

Layer multiple icons on top of each other to create composite icons. Use stacking to combine a background shape with a foreground icon.

Basic Usage #

Wrap icons in a <span class="icf-stack"> container. Use icf-stack-2x for the background (larger) icon and icf-stack-1x for the foreground (smaller) icon:

Flag on circle
Envelope on square
Colored 
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-circle icf-stack-2x"></i>
    <i class="icf-solid icf-flag icf-stack-1x icf-inverse"></i>
</span>

Ban / Prohibition Overlay #

A common pattern is overlaying the ban icon to show something is not allowed:

No camera
No phone 
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-camera icf-stack-1x"></i>
    <i class="icf-solid icf-ban icf-stack-2x"
       style="color: #ef4444; opacity: 0.8;"></i>
</span>

Outlined Background #

Use a regular (outlined) icon as the background for a lighter look:

Outlined circle
Check in square
Warning 
<span class="icf-stack icf-2x">
    <i class="icf-regular icf-circle icf-stack-2x"></i>
    <i class="icf-solid icf-flag icf-stack-1x"></i>
</span>

Status Badges #

Combine shapes with small indicators to create notification badges, verified markers, or status icons. Use power transform classes like icf-transform-shrink-* and icf-transform-up-* / icf-transform-down-* / icf-transform-right-* to position and resize the badge icon:

Notification
Verified user
Unread mail
Cart badge 
<!-- Notification bell with red dot -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-bell icf-stack-2x"></i>
    <i class="icf-solid icf-circle icf-stack-1x icf-transform-shrink-8 icf-transform-up-16 icf-transform-right-16"
       style="color: #ef4444;"></i>
</span>

<!-- Verified user avatar -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-user-circle icf-stack-2x"
       style="color: #6366f1;"></i>
    <i class="icf-solid icf-circle-check icf-stack-1x icf-transform-shrink-7 icf-transform-down-16 icf-transform-right-16"
       style="color: #10b981;"></i>
</span>

Contextual Indicators #

Add small action indicators to base icons — great for toolbars, dashboards, and settings panels:

Locked folder
Cloud download
Cloud upload
Secure 
<!-- Locked folder -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-folder icf-stack-2x"
       style="color: #f59e0b;"></i>
    <i class="icf-solid icf-lock icf-stack-1x icf-inverse icf-transform-shrink-6"></i>
</span>

<!-- Cloud download -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-cloud icf-stack-2x"
       style="color: #3b82f6;"></i>
    <i class="icf-solid icf-arrow-down icf-stack-1x icf-inverse icf-transform-shrink-7 icf-transform-down-8"></i>
</span>

<!-- Shield with check -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-shield icf-stack-2x"
       style="color: #6366f1;"></i>
    <i class="icf-solid icf-check icf-stack-1x icf-inverse icf-transform-shrink-7 icf-transform-down-4"></i>
</span>

Branded Badges #

Create app-style or branded icons using colored circle backgrounds with contrasting foreground icons:

Media player
Music
Browser
Terminal 
<!-- Media player button -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-circle icf-stack-2x"
       style="color: #ef4444;"></i>
    <i class="icf-solid icf-play icf-stack-1x icf-inverse icf-transform-shrink-5 icf-transform-right-4"></i>
</span>

<!-- Terminal app icon -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-square icf-stack-2x"
       style="color: #1e293b;"></i>
    <i class="icf-solid icf-terminal icf-stack-1x"
       style="color: #4ade80;"></i>
</span>

Combined Actions #

Pair a base icon with a small action symbol in the corner to indicate an operation — ideal for file managers, user management, and CRUD interfaces:

Add user
New file
DB error
Scheduled 
<!-- Add user -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-user icf-stack-2x"></i>
    <i class="icf-solid icf-plus icf-stack-1x icf-transform-shrink-8 icf-transform-down-16 icf-transform-right-16"
       style="color: #10b981;"></i>
</span>

<!-- Database error -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-database icf-stack-2x"></i>
    <i class="icf-solid icf-circle-xmark icf-stack-1x icf-transform-shrink-8 icf-transform-down-16 icf-transform-right-16"
       style="color: #ef4444;"></i>
</span>

<!-- Scheduled event -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-calendar icf-stack-2x"></i>
    <i class="icf-solid icf-clock icf-stack-1x icf-transform-shrink-9 icf-transform-down-16 icf-transform-right-16"
       style="color: #f59e0b;"></i>
</span>

Sizing Stacks #

Control the overall stack size by adding a sizing class to the icf-stack container:

1x
2x
3x 
<!-- Small stack -->
<span class="icf-stack icf-1x">...</span>

<!-- Medium stack (default) -->
<span class="icf-stack icf-2x">...</span>

<!-- Large stack -->
<span class="icf-stack icf-3x">...</span>

Customization #

Control the z-index of stacked layers and the inverse color with CSS variables:

CSS Variable Default Description
--icf-stack-z-index auto Z-index of the icf-stack-1x foreground icon
--icf-inverse #fff Color applied by the icf-inverse class 
<!-- Custom inverse color -->
<span class="icf-stack icf-2x">
    <i class="icf-solid icf-circle icf-stack-2x"
       style="color: #1da1f2;"></i>
    <i class="icf-solid icf-bell icf-stack-1x icf-inverse"></i>
</span>

Class Reference #

Class Applied To Description
icf-stack <span> container Parent container for stacked icons (2em tall, 2.5em wide)
icf-stack-1x <i> icon Regular-sized foreground icon
icf-stack-2x <i> icon Double-sized background icon
icf-inverse <i> icon Sets icon color to white (or --icf-inverse)