Power Transforms
Resize and reposition icons using utility classes. Power transforms are especially useful inside stacked icons to fine-tune size and placement without inline styles.
Shrink & Grow #
Use icf-transform-shrink-{1-10} to make an icon smaller or icf-transform-grow-{1-6} to make it larger. Each step scales by 6.25%. Shrink and grow classes use CSS scale() so they can be freely combined with sizing classes like icf-2x:
<i class="icf-solid icf-star icf-transform-shrink-4"></i>
<i class="icf-solid icf-star icf-transform-shrink-2"></i>
<i class="icf-solid icf-star"></i>
<i class="icf-solid icf-star icf-transform-grow-2"></i>
<i class="icf-solid icf-star icf-transform-grow-4"></i>Positioning #
Shift icons in any direction using icf-transform-up-{1-16}, icf-transform-down-{1-16}, icf-transform-left-{1-16}, and icf-transform-right-{1-16}. Each step moves the icon by 0.0625em (1px at 16px base):
<i class="icf-solid icf-arrow-up icf-transform-up-16"></i>
<i class="icf-solid icf-arrow-down icf-transform-down-16"></i>
<i class="icf-solid icf-arrow-left icf-transform-left-16"></i>
<i class="icf-solid icf-arrow-right icf-transform-right-16"></i>Using with Stacked Icons #
Power transforms shine when combined with icon stacking. Shrink the foreground icon and shift it to create badges, indicators, and composite icons:
<!-- Shield with shrunk lock icon -->
<span class="icf-stack icf-2x">
<i class="icf-solid icf-shield icf-stack-2x"></i>
<i class="icf-solid icf-lock icf-stack-1x icf-inverse icf-transform-shrink-7 icf-transform-down-4"></i>
</span>
<!-- Notification badge in top-right corner -->
<span class="icf-stack icf-2x">
<i class="icf-solid icf-envelope 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>Class Reference #
Shrink
| Class | Scale |
|---|---|
icf-transform-shrink-1 | 93.75% |
icf-transform-shrink-2 | 87.5% |
icf-transform-shrink-3 | 81.25% |
icf-transform-shrink-4 | 75% |
icf-transform-shrink-5 | 68.75% |
icf-transform-shrink-6 | 62.5% |
icf-transform-shrink-7 | 56.25% |
icf-transform-shrink-8 | 50% |
icf-transform-shrink-9 | 43.75% |
icf-transform-shrink-10 | 37.5% |
Grow
| Class | Scale |
|---|---|
icf-transform-grow-1 | 106.25% |
icf-transform-grow-2 | 112.5% |
icf-transform-grow-3 | 118.75% |
icf-transform-grow-4 | 125% |
icf-transform-grow-5 | 131.25% |
icf-transform-grow-6 | 137.5% |
Positioning
| Class Pattern | Range | Step | Description |
|---|---|---|---|
icf-transform-up-{n} |
1–16 | 0.0625em | Move icon up |
icf-transform-down-{n} |
1–16 | 0.0625em | Move icon down |
icf-transform-left-{n} |
1–16 | 0.0625em | Move icon left |
icf-transform-right-{n} |
1–16 | 0.0625em | Move icon right |
You can freely combine shrink/grow with positioning and sizing classes (e.g. icf-2x icf-transform-shrink-4 icf-transform-up-3). Combine one horizontal (icf-transform-left/right) with one vertical (icf-transform-up/down) class on the same element. However, power transform classes use the CSS transform property, so they cannot be combined with icf-rotate-* or icf-flip-* classes. Use inline style if you need to combine transforms with rotation or flipping.