Transformations

This tutorial is part of Iconify Icon web component 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
   <iconify-icon
       inline
       icon="fa-regular:handshake"
       rotate="90deg"
   ></iconify-icon>
   with text around it
</p>
<p>
   Test icon
   <iconify-icon
       inline
       icon="fa-regular:handshake"
       style="transform: rotate(90deg)"
   ></iconify-icon>
   with text around it
</p>

In example above, first icon is rotated using rotate attribute, second icon is rotated using CSS. The 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 style.

Flip

You can flip an icon horizontally and/or vertically.

One way to do that is to add flip attribute with comma-separated values. Possible values:

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

You can also do that by setting hFlip and / or vFlip attributes to true.

Example:

No flip:

Horizontal flip:

Vertical flip:

Both (or 180° rotation):

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

Using "flip" attribute

Rotation

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

To do that, add 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: <iconify-icon inline icon="bi:check2-circle"></iconify-icon></p>
<p>
   90° rotation:
   <iconify-icon inline icon="bi:check2-circle" rotate="90deg"></iconify-icon>
</p>
<p>
   180° rotation:
   <iconify-icon inline icon="bi:check2-circle" rotate="180deg"></iconify-icon>
</p>
<p>
   270° rotation:
   <iconify-icon inline icon="bi:check2-circle" rotate="270deg"></iconify-icon>
</p>

Rotate and flip

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