Flip and rotate

Help » On the web » Flip and rotate

CSS transforms can be used to adjust icon orientation. For example, you can flip a search icon to point the other way or rotate a plus icon into a delete icon on hover.

In these demos I’m transforming both a :before pseudo element and a keyword replacement.

Inline elements can’t be transformed. Because pseudo elements and spans are inline by default I made them both inline-block (alternatively you can use block). If your icon is in a block element, like a paragraph, you shouldn’t need to do this.


To flip an icon over, use rotateY().


To rotate an icon on a 2D plane, use rotate().

Further reading: Vertical alignment of icons.

Powered by Siteleaf