Skip to Content
FontStylingRotating & Flipping

Rotation & Flipping

Boxicons provides utility classes to easily rotate or flip icons without writing any custom CSS. These transformations are applied using CSS and work consistently across all icon types.


Make sure you have included the transformations stylesheet before using these classes.

transformations.min.css
<link href="https://cdn.boxicons.com/transformations.min.css" rel="stylesheet">

Rotating Icons

You can rotate an icon by applying one of the following classes:

  • bx-rotate-45 — rotates the icon by 45°
  • bx-rotate-90 — rotates the icon by 90°
  • bx-rotate-135 — rotates the icon by 135°
  • bx-rotate-180 — rotates the icon by 180°
  • bx-rotate-225 — rotates the icon by 225°
  • bx-rotate-270 — rotates the icon by 270°
  • bx-rotate-315 — rotates the icon by 315°
<i class="bxf bx-wink-smile bx-rotate-45"></i>
<i class="bxf bx-wink-smile bx-rotate-90"></i>
<i class="bxf bx-wink-smile bx-rotate-135"></i>
<i class="bxf bx-wink-smile bx-rotate-180"></i>
<i class="bxf bx-wink-smile bx-rotate-225"></i>
<i class="bxf bx-wink-smile bx-rotate-270"></i>
<i class="bxf bx-wink-smile bx-rotate-315"></i>

Flipping Icons

You can also mirror icons horizontally or vertically using the following classes:

  • bx-flip-horizontal — flips the icon left to right

  • bx-flip-vertical — flips the icon top to bottom

<i class="bxf bx-wink-smile bx-flip-horizontal"></i>
<i class="bxf bx-wink-smile bx-flip-vertical"></i>

Combining Transformations

You can combine rotation and flip classes together to achieve more complex transformations.

<i class="bxf bx-wink-smile bx-rotate-90 bx-flip-horizontal"></i>
SizingList Icons