Transformations

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="emojione-v1:tear-off-calendar"></span></p>
<p>90&deg; rotation: <span class="iconify" data-icon="emojione-v1:tear-off-calendar" data-rotate="90deg"></span></p>
<p>180&deg; rotation: <span class="iconify" data-icon="emojione-v1:tear-off-calendar" data-rotate="180deg"></span></p>
<p>270&deg; rotation: <span class="iconify" data-icon="emojione-v1:tear-off-calendar" data-rotate="270deg"></span></p>

Result:

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 90degrees 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="emojione-v1:tear-off-calendar"></span></p>
<p>Horizontal: <span class="iconify" data-icon="emojione-v1:tear-off-calendar" data-flip="horizontal"></span></p>
<p>Vertical: <span class="iconify" data-icon="emojione-v1:tear-off-calendar" data-flip="vertical"></span></p>
<p>Horizontal and vertical: <span class="iconify" data-icon="emojione-v1:tear-off-calendar" data-flip="horizontal, vertical"></span> (same as 180&deg; rotation)</p>

Result:

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.