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&deg; rotation:

    <span

        class="iconify"

        data-icon="line-md:github-twotone"

        data-rotate="90deg"

    ></span>

</p>

<p>

    180&deg; rotation:

    <span

        class="iconify"

        data-icon="line-md:github-twotone"

        data-rotate="180deg"

    ></span>

</p>

<p>

    270&deg; rotation:

    <span

        class="iconify"

        data-icon="line-md:github-twotone"

        data-rotate="270deg"

    ></span>

</p>

Demo:

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&deg; rotation)

</p>

Demo:

No flip:

Horizontal:

Vertical:

Horizontal and vertical: (same as 180° rotation)

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