HTML Entity for Right Arrow Over Left Arrow (⇄)
What You'll Learn
How to display the Right Arrow Over Left Arrow (⇄) in HTML using the named entity, hexadecimal, decimal, and CSS escape methods. This symbol is U+21C4 (RIGHTWARDS ARROW OVER LEFTWARDS ARROW) in the Arrows block (U+2190–U+21FF)—a right arrow stacked over a left arrow, used for bidirectional relationships, logic notation, math, and swap-style UI controls.
Render it with ⇄ (named), ⇄, ⇄, or CSS \21C4. Related: U+21C6 (⇆, left arrow over right / ⇆), U+2194 (↔, left right arrow / ↔). Do not confuse ⇄ with single arrows ← or →.
⚡ Quick Reference — Right Arrow Over Left Arrow
U+21C4Arrows (U+2190–U+21FF)
⇄Hexadecimal reference
⇄Decimal reference
⇄Standard HTML entity
Name Value
──────────── ──────────
Unicode U+21C4
Hex code ⇄
HTML code ⇄
Named entity ⇄
CSS code \21C4
Meaning Rightwards arrow over leftwards arrow
Related U+21C6 = left arrow over right (⇆, ⇆)
U+2194 = left right arrow (↔, ↔)
Block Arrows (U+2190–U+21FF)Complete HTML Example
A simple example showing ⇄ using the named entity, hexadecimal code, decimal HTML code, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point::after{
content: "\21C4";
}
</style>
</head>
<body>
<p>Hex: ⇄</p>
<p>Decimal: ⇄</p>
<p>Named: ⇄</p>
<p id="point">CSS: </p>
</body>
</html>🌐 Browser Support
U+21C4 is widely supported in all modern browsers—it is part of the standard Arrows block:
👀 Live Preview
See the Right Arrow Over Left Arrow (⇄) in common contexts:
🧠 How It Works
Named HTML Entity
⇄ is the named entity for U+21C4 (rightwards arrow over leftwards arrow). It is the most readable option in HTML source.
Hexadecimal Code
⇄ uses the Unicode hexadecimal value 21C4.
Decimal HTML Code
⇄ uses the decimal Unicode value 8644 for the same character.
CSS Entity
\21C4 is used in CSS stylesheets in the content property of pseudo-elements.
Same visual result
All four methods produce ⇄. Unicode U+21C4 in the Arrows block. Previous: Right Arrow Loop (↬). Next: Right Arrow Plus Below (⥥).
Use Cases
The Right Arrow Over Left Arrow (⇄) is commonly used in:
Bidirectional relations, equivalence, and notation in proofs and formulas.
UI buttons that exchange or toggle between two values or panels.
Research papers and docs showing two-way mapping or correspondence.
Flowcharts and system diagrams with bidirectional data flow.
Resize handles, transfer lists, and sync indicators in interfaces.
Pair ⇄ with plain language (e.g. “swap” or “bidirectional”) for screen readers.
💡 Best Practices
Do
- Prefer
⇄in HTML for readable source markup - Use ⇄ when showing bidirectional or swap relationships
- Set
<meta charset="utf-8"> - Link to Left Arrow Over Right Arrow for the paired ⇆ symbol
- Keep one entity style consistent across your project
- Use CSS
\21C4for decorative bidirectional arrows in pseudo-elements
Don’t
- Confuse ⇄ (U+21C4) with ⇆ (U+21C6) or ↔ (U+2194)
- Use padded Unicode notation like U+021C4—the correct value is
U+21C4 - Use CSS escape
\21C4in HTML text nodes - Substitute
<->when the stacked arrow ⇄ is intended - Confuse ⇄ with loop arrow ↬ (
↬)
Key Takeaways
Four ways to render U+21C4 in HTML and CSS
⇄ ⇄ ⇄For CSS, use \21C4 in the content property
Unicode U+21C4 — RIGHTWARDS ARROW OVER LEFTWARDS ARROW (⇄)
Paired with left-over-right ⇆ (⇆); distinct from ↔ and single arrows
Previous: Right Arrow Loop (↬) Next: Right Arrow Plus Below (⥥)
❓ Frequently Asked Questions
⇄ (named), ⇄ (hex), ⇄ (decimal), or \21C4 in CSS content. All four render ⇄.U+21C4 (RIGHTWARDS ARROW OVER LEFTWARDS ARROW). Arrows block (U+2190–U+21FF). Hex 21C4, decimal 8644.⇄ is more readable in source markup; ⇄ and ⇄ are numeric alternatives. All render ⇄ in modern browsers.⇄, ⇄, ⇄) go in markup. The CSS escape \21C4 is used in stylesheets, typically on ::before or ::after. Both render ⇄.Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, symbols, math operators, and more.
About the author
8 people found this page helpful