Stacking
Layer two icons on top of each other to create composite icon effects.
Stack Classes
| Class | Description |
|---|---|
.trker-stack |
Wrapper element — sets relative positioning and inline-block sizing |
.trker-stack-1x |
Regular-sized icon layer (1em) — typically the foreground icon |
.trker-stack-2x |
Double-sized icon layer (2em) — typically the background shape |
Live Preview
Wrap both icons in a .trker-stack span. The 2x layer sits behind the 1x layer in DOM order:
icon on circle
icon on square
banned / crossed
<!-- Icon on a circle background -->
<span class="trker-stack trker-2x">
<i class="trker trker-circle trker-stack-2x text-primary"></i>
<i class="trker trker-flag trker-stack-1x text-white"></i>
</span>
<!-- Banned / crossed-out icon -->
<span class="trker-stack trker-2x">
<i class="trker trker-camera trker-stack-1x"></i>
<i class="trker trker-ban trker-stack-2x text-red-500"></i>
</span>Sizing the Stack
Apply a size class to the .trker-stack wrapper to scale the entire composition:
<span class="trker-stack trker-3x">
<i class="trker trker-square trker-stack-2x text-slate-800"></i>
<i class="trker trker-home trker-stack-1x text-white"></i>
</span>