HTML Entity for Left Arrow Over Right Arrow (⇆)
What You'll Learn
How to display the Left Arrow Over Right Arrow (⇆) in HTML using the named entity, hexadecimal, decimal, and CSS escape methods. This symbol is U+21C6 (LEFTWARDS ARROW OVER RIGHTWARDS ARROW) in the Arrows block (U+2190–U+21FF)—a left arrow stacked over a right arrow, commonly used for bidirectional navigation, swap/resize controls, and UI elements.
Render it with ⇆ (named), ⇆, ⇆, or CSS \21C6. Related: U+21C4 (⇄, right arrow over left / ⇄), U+2194 (↔, left right arrow / ↔).
⚡ Quick Reference — Left Arrow Over Right Arrow
U+21C6Arrows block
⇆Hexadecimal reference
⇆Decimal reference
⇆Most readable option
Name Value
──────────── ──────────
Unicode U+21C6
Hex code ⇆
HTML code ⇆
Named entity ⇆
CSS code \21C6
Meaning Leftwards arrow over rightwards arrow
Related U+21C4 = right arrow over left (⇄)
U+2194 = left right arrow (↔)Complete HTML Example
A simple example showing the Left Arrow Over Right Arrow (⇆) using the named entity, hexadecimal code, decimal HTML code, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\21C6";
}
</style>
</head>
<body>
<p>Symbol using Hexadecimal: ⇆</p>
<p>Symbol using HTML Code: ⇆</p>
<p>Symbol using HTML Entity: ⇆</p>
<p id="point">Symbol using CSS Entity: </p>
</body>
</html>🌐 Browser Support
The Left Arrow Over Right Arrow (⇆) renders in modern browsers when the font includes Arrows block glyphs:
👀 Live Preview
See the Left Arrow Over Right Arrow (⇆) in bidirectional and swap contexts:
🧠 How It Works
Named HTML Entity
⇆ is the named entity for the Left Arrow Over Right Arrow (leftwards arrow over rightwards arrow). It is easy to read in bidirectional and swap markup.
Hexadecimal Code
⇆ uses the Unicode hexadecimal value 21C6. The x prefix indicates hexadecimal format.
Decimal HTML Code
⇆ uses the decimal Unicode value 8646 for the same symbol.
CSS Entity
\21C6 is used in CSS stylesheets in the content property of pseudo-elements like ::after.
Same visual result
All four methods produce ⇆. Unicode U+21C6 is in the Arrows block. Next: Left Arrow Plus Below.
Use Cases
The Left Arrow Over Right Arrow (⇆) is commonly used in:
Two-way or swap-style controls in app headers, toolbars, and navigation.
Indicate swap, resize, or toggle between left/right in UI and forms.
Document flow, bidirectional relations, or specification notation.
Indicate two-way or reversible relation in process and state diagrams.
Show shortcut hints for swap or bidirectional actions in help and UI.
Swap columns, toggle order, or bidirectional sort in data tables.
💡 Best Practices
Do
- Prefer
⇆in HTML for readability - Pair ⇆ with text (e.g., “Swap”) or
aria-labelfor accessibility - Use fonts that support the Arrows block (U+21C6)
- Set
<meta charset="utf-8"> - Keep one encoding style per project for consistency
- Distinguish ⇆ from ↔ when meaning matters
Don’t
- Confuse
⇆(U+21C6) with↔(U+2194) - Use CSS
\21C6inside HTML text nodes - Confuse ⇆ with ⇄ (right over left)
- Rely on the symbol alone without context in critical UI
- Mix named and numeric entities inconsistently in the same component
Key Takeaways
Four ways to render U+21C6 in web content
⇆ ⇆ ⇆For CSS, use \21C6 in the content property
Unicode U+21C6 — LEFTWARDS ARROW OVER RIGHTWARDS ARROW
Arrows block (U+2190–U+21FF)
Previous: Left Arrow Loop (↫) Next: Left Arrow Plus Below
❓ Frequently Asked Questions
⇆ (named), ⇆ (hex), ⇆ (decimal), or \21C6 in CSS content. All four methods render ⇆ correctly.U+21C6 (LEFTWARDS ARROW OVER RIGHTWARDS ARROW). Arrows block (U+2190–U+21FF). Hex 21C6, decimal 8646. Used for bidirectional or swap-style navigation.⇆, ⇆, ⇆) go in markup. The CSS escape \21C6 is used in stylesheets, typically on ::before or ::after. Both produce ⇆.⇆ is the named HTML entity for U+21C6. You can also use ⇆ (decimal), ⇆ (hex), or \21C6 in CSS. Do not confuse with ↔ (U+2194, left right arrow).Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, symbols, math operators, and more.
About the author
8 people found this page helpful