Transformations
This article is for outdated Iconify SVG Framework version 1.0.
It has been deprecated, consider switching to modern web component.
You can transform icons by adding data-rotate and data-flip attributes.
Transformations are done by changing icon contents using SVG transformations, not by CSS transformations. This is done to assure that icon remains within its bounding box and you can apply additional CSS transformations on SVG element.
Possible transformations:
- Rotations: 90°, 180°, 270°
- Horizontal and vertical flip
Rotating icon
To rotate icon add data-rotate attribute. Value can be in degrees: data-rotate="90deg" or as numbers: data-rotate="1" (where 1 = 90deg, 2 = 180deg, 3 = 270deg).
<p>
No rotation:
<span class="iconify" data-icon="line-md:github-twotone"></span>
</p>
<p>
90° rotation:
<span
class="iconify"
data-icon="line-md:github-twotone"
data-rotate="90deg"
></span>
</p>
<p>
180° rotation:
<span
class="iconify"
data-icon="line-md:github-twotone"
data-rotate="180deg"
></span>
</p>
<p>
270° rotation:
<span
class="iconify"
data-icon="line-md:github-twotone"
data-rotate="270deg"
></span>
</p>
No rotation:
90° rotation:
180° rotation:
270° rotation:
Rotating icon at different angle, such as data-rotate="45deg" will not work. Only 90, 180 and 270 degrees rotations are supported. Unlike CSS transformation, Iconify rotations are done by rotating icon inside SVG element and adjusting viewBox. So for example 24x16 icon rotated by 90 degrees will change dimensions to 16x24.
You can use style on SVG element or container element to rotate icon at custom angle.
Flipping icon
To flip icon add data-flip attribute. Value is "horizontal" or "vertical". If you want both, use "horizontal,vertical" or rotate icon by 180 degrees.
<p>
No flip:
<span class="iconify" data-icon="line-md:github-twotone"></span>
</p>
<p>
Horizontal:
<span
class="iconify"
data-icon="line-md:github-twotone"
data-flip="horizontal"
></span>
</p>
<p>
Vertical:
<span
class="iconify"
data-icon="line-md:github-twotone"
data-flip="vertical"
></span>
</p>
<p>
Horizontal and vertical:
<span
class="iconify"
data-icon="line-md:github-twotone"
data-flip="horizontal, vertical"
></span>
(same as 180° rotation)
</p>
No flip:
Horizontal:
Vertical:
Horizontal and vertical:
You can use both rotation and flip on icon. Icon is flipped first, then rotated.