Found the perfect Unicode symbol — but it’s stubbornly facing the wrong way? Trying to mirror an arrow, emoji or any character — and Unicode has nothing on offer? The answer is not in the code points; it‘s all in the CSS. Find out here how to flip and mirror Unicode symbols using CSS ⤓ step by step, complete with examples and a handy playground to flip any character as you please.
On This Page
How to Flip and Mirror Unicode Symbols Using CSS
Time needed: 5 minutes
To flip a Unicode symbol or emoji vertically using HTML and CSS:
- Surround the character with
<span>to apply inline CSS to it alone. - Apply the
transform: scaleX(-1);property to the span.Here’s why: Scaling along the x axis with a value of
-1(equivalent to-100%) effectively maps every points to the corresponding point mirrored using a y axis that goes through the center of the element.
Resizing and flipping horizontally: You can also flip characters horizontally, of course, and resize them at the same time; see below. - Make the span display as an inline block using
display: inline-block;.Here’s why: The transform() CSS function works only to blocks, not inline elements such as regular characters; using
inline-blockturns the character into a block, so transform can apply to them while they still display inline with surrounding text.
Mirrored Unicode Example
<span style="display: inline-block; transform: scaleX(-1);">?</span>will display as ?.
How to Mirror Unicode Symbols Using CSS: Playground
|
Worked out right? →
Tips help fuel these email and tech how-tos.
How to Mirror Unicode Symbols Using CSS: FAQ
Can I flip a character across the horizontal axis as well?
Yes.
To turn a Unicode character on its head:
- Use
transform: scaleY(-1)instead oftransform: scaleX(-1).
To flip both horizontally and vertically, you can use transform: scale(-1,-1).
Example: <span style="display: inline-block; transform: scale(-1, -1);">🤌</span> displays as 🤌.
Can I resize and flip at the same time?
Yes.
Using the scale() function, you can use multiples of -1 to resize in addition to flipping a character.
Example: <span style="display: inline-block; transform: scale(-1.5, 1.5)"> will horizontally flip a character and scale it up to 1.5 times its normal size.
Something else to tweak: How to Suggest Hyphenation in HTML and CSS
(Tested in desktop and mobile browsers; first published June 2025, last updated April 2026)