Transformations

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

svelte<script>
   import Icon from '@iconify/svelte';
</script>

<style>
   /*
       Align icon to bottom of text, like in icon fonts.

       Cannot target component in CSS, target SVG
       instead using Svelte's :global() function

       This is the same as adding inline={true} to each <Icon />
   */
   p :global(svg) {
       vertical-align: -0.125em;
   }
</style>

<p>
   Test icon
   <Icon icon="fa-regular:handshake" rotate="90deg" />
   with text around it
</p>
<p>
   Test icon
   <Icon icon="fa-regular:handshake" style="transform: rotate(90deg);" />
   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):

svelte<script>
   import Icon from '@iconify/svelte';
</script>

<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>


Using "flip" attribute

svelte<script>
   import Icon from '@iconify/svelte';
</script>

<p>
   No flip:
   <Icon icon="bi:check2-circle" inline={true} />
</p>
<p>
   Horizontal flip:
   <Icon icon="bi:check2-circle" inline={true}hFlip={true} />
</p>
<p>
   Vertical flip:
   <Icon icon="bi:check2-circle" inline={true}vFlip={true} />
</p>
<p>
   Both (or 180° rotation):
   <Icon icon="bi:check2-circle" inline={true}hFlip={true}vFlip={true} />
</p>


Using "hFlip" and "vFlip" 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:

svelte<script>
   import Icon from '@iconify/svelte';
</script>

<style>
   /*
       Align icon to bottom of text, like in icon fonts.

       Cannot target component in CSS, target SVG
       instead using Svelte's :global() function

       This is the same as adding inline={true} to each <Icon />
   */
   p :global(svg) {
       vertical-align: -0.125em;
   }
</style>

<p>
   No rotation:
   <Icon icon="bi:check2-circle" />
</p>
<p>
   90° rotation:
   <Icon icon="bi:check2-circle" rotate="90deg" />
</p>
<p>
   180° rotation:
   <Icon icon="bi:check2-circle" rotate="180deg" />
</p>
<p>
   270° rotation:
   <Icon icon="bi:check2-circle" rotate={3} />
</p>


Rotate and flip

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