Transformations

This tutorial is part of Iconify SVG Framework tutorial.

An icon can be rotated and flipped horizontally and/or vertically. All transformations are done relative to the center of the icon.

There are two types of transformations:

• Horizontal and vertical flip.
• Rotation by 90, 180 and 270 degrees.

CSS vs Iconify transformations

These are not CSS transformations, transformations are applied inside SVG.

What's the difference from CSS transformations?

• If you rotate an icon by 90 degrees in CSS, icon's bounding box remains the same. 16x24 icon still takes space for 16x24, but might overlap elements around it.
• If you rotate an icon by 90 degrees in SVG Framework, icon's dimensions swap places. 16x24 icon becomes 24x16 icon, and it does not affect elements around it.

Example:

Test icon with text around it

Test icon with text around it

Using box-shadow to show icon dimensions

html<p>
   Test icon
   <span
       class="iconify-inline"
       data-icon="fa-regular:handshake"
       data-rotate="90deg"
   ></span>
   with text around it
</p>
<p>
   Test icon
   <span
       class="iconify-inline"
       data-icon="fa-regular:handshake"
       style="transform: rotate(90deg);"
   ></span>
   with text around it
</p>

In example above, first icon is rotated using data-rotate attribute, second icon is rotated using CSS. First icon kept its 1em height, second icon became taller than it should be.

Sometimes you do want behaviour that CSS transformations provide. Then you can still use CSS transformations by adding it to inline style.

Flip

You can flip icon horizontally and/or vertically.

To do that, add data-flip attribute with comma separated values. Possible values:

• "horizontal": flip icon horizontally.
• "vertical": flip icon vertically.

Example:

No flip:

Horizontal flip:

Vertical flip:

Both (or 180° rotation):

html<p>
   No flip: <span class="iconify-inline" data-icon="bi:check2-circle"></span>
</p>
<p>
   Horizontal flip:
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-flip="horizontal"
   ></span>
</p>
<p>
   Vertical flip:
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-flip="vertical"
   ></span>
</p>
<p>
   Both (or 180° rotation):
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-flip="horizontal,vertical"
   ></span>
</p>

Rotation

You can rotate icon by 90, 180 and 270 degrees.

To do that, add data-rotate attribute. Possible values:

• "90deg", "1": rotate by 90 degrees.
• "180deg", "2": rotate by 180 degrees.
• "270deg", "3": rotate by 270 degrees.

Example:

No rotation:

90° rotation:

180° rotation:

270° rotation:

html<p>
   No rotation: <span class="iconify-inline" data-icon="bi:check2-circle"></span>
</p>
<p>
   90° rotation:
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-rotate="90deg"
   ></span>
</p>
<p>
   180° rotation:
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-rotate="180deg"
   ></span>
</p>
<p>
   270° rotation:
   <span
       class="iconify-inline"
       data-icon="bi:check2-circle"
       data-rotate="270deg"
   ></span>
</p>

Rotate and flip

You can use both rotation and flip on an icon. The icon is flipped first, then rotated.