Transformations

This tutorial is part of Iconify for Vue 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

vue<template>
   <div>
       <p>
           Test icon
           <Icon icon="fa-regular:handshake" :inline="true" rotate="90deg" /> with
           text around it
       </p>
       <p>
           Test icon
           <Icon
               icon="fa-regular:handshake"
               :inline="true"
               :style="{ transform: 'rotate(90deg)' }"
           />
           with text around it
       </p>
   </div>
</template>

<script>
import { Icon } from '@iconify/vue';

export default {
   components: {
       Icon,
   },
};
</script>


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 horizontalFlip and / or verticalFlip attributes to true.

Example:

No flip:

Horizontal flip:

Vertical flip:

Both (or 180° rotation):

vue<template>
   <div>
       <p>No flip: <Icon icon="bi:check2-circle" :inline="true" /></p>
       <p>
           Horizontal flip:
           <Icon icon="bi:check2-circle" :inline="true" flip="horizontal" />
       </p>
       <p>
           Vertical flip:
           <Icon icon="bi:check2-circle" :inline="true" flip="vertical" />
       </p>
       <p>
           Both (or 180° rotation):
           <Icon icon="bi:check2-circle" :inline="true" flip="horizontal,vertical" />
       </p>
   </div>
</template>

<script>
import { Icon } from '@iconify/vue';

export default {
   components: {
       Icon,
   },
};
</script>


Using "flip" attribute

vue<template>
   <div>
       <p>
           No flip:
           <Icon icon="bi:check2-circle" :inline="true" />
       </p>
       <p>
           Horizontal flip:
           <Icon icon="bi:check2-circle" :inline="true" :horizontalFlip="true" />
       </p>
       <p>
           Vertical flip:
           <Icon icon="bi:check2-circle" :inline="true" :verticalFlip="true" />
       </p>
       <p>
           Both (or 180° rotation):
           <Icon
               icon="bi:check2-circle"
               :inline="true"
               :horizontalFlip="true"
               :verticalFlip="true"
           />
       </p>
   </div>
</template>

<script>
import { Icon } from '@iconify/vue';

export default {
   components: {
       Icon,
   },
};
</script>


Using "horizontalFlip" and "verticalFlip" attributes

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:

vue<template>
   <div>
       <p>No rotation: <Icon icon="bi:check2-circle" :inline="true" /></p>
       <p>
           90° rotation:
           <Icon icon="bi:check2-circle" :inline="true" rotate="90deg" />
       </p>
       <p>
           180° rotation:
           <Icon icon="bi:check2-circle" :inline="true" rotate="180deg" />
       </p>
       <p>
           270° rotation: <Icon icon="bi:check2-circle" :inline="true" :rotate="3" />
       </p>
   </div>
</template>

<script>
import { Icon } from '@iconify/vue';

export default {
   components: {
       Icon,
   },
};
</script>


Rotate and flip

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

Property names

In other components, properties for flip are hFlip and vFlip. Vue has special treatment for properties that start with v-, so vFlip (same applies to vAlign attribute) attribute is not available without using tricky syntax.

Because of that, Vue component uses longer property names: verticalFlip instead of vFlip and horizontalFlip instead of hFlip for consistency.