Home Docs Rotation & Flipping

Rotation & Flipping

Transform icons with built-in rotation and flipping classes. Rotate in fixed increments or mirror icons horizontally, vertically, or both.

Rotation #

Rotate icons in fixed increments:

Original
90°
180°
270° 
<i class="icf-solid icf-arrow-right icf-rotate-90"></i>  <!-- Points down -->
<i class="icf-solid icf-arrow-right icf-rotate-180"></i> <!-- Points left -->
<i class="icf-solid icf-arrow-right icf-rotate-270"></i> <!-- Points up -->
Class Rotation
icf-rotate-90 90 degrees clockwise
icf-rotate-180 180 degrees
icf-rotate-270 270 degrees clockwise (90 counter-clockwise)
icf-rotate-by Custom angle via --icf-rotate-angle

Custom Rotation

Use icf-rotate-by with the --icf-rotate-angle CSS variable to rotate by any angle:

45°
135°
-45° 
<!-- Custom rotation angle -->
<i class="icf-solid icf-arrow-right icf-rotate-by"
   style="--icf-rotate-angle: 45deg;"></i>

<i class="icf-solid icf-arrow-right icf-rotate-by"
   style="--icf-rotate-angle: 135deg;"></i>
CSS Variable Default Description
--icf-rotate-angle 0deg Rotation angle for icf-rotate-by (supports deg, turn, rad)

Flipping #

Mirror icons horizontally, vertically, or both:

Original
Horizontal
Vertical
Both 
<!-- Flip horizontally (mirror) -->
<i class="icf-solid icf-reply icf-flip-horizontal"></i>

<!-- Flip vertically -->
<i class="icf-solid icf-signal icf-flip-vertical"></i>

<!-- Flip both (horizontal + vertical) -->
<i class="icf-solid icf-share icf-flip-both"></i>
Class Effect
icf-flip-horizontal Mirrors the icon horizontally (scaleX(-1))
icf-flip-vertical Mirrors the icon vertically (scaleY(-1))
icf-flip-both Mirrors both horizontally and vertically (scale(-1))

Combining Transforms

You can combine rotation and flipping using inline CSS when you need multiple transforms:

Rotated + Flipped 
<!-- Combine rotation and flip with inline CSS -->
<i class="icf-solid icf-share"
   style="transform: rotate(90deg) scaleX(-1);"></i>

Built-in rotation and flip classes use the CSS transform property, so they cannot be combined on the same element via classes alone. To combine transforms, use inline style with multiple transform functions.