HTML Entity for Right Arrow From Bar (↦)
What You'll Learn
How to display the Right Arrow From Bar (↦) in HTML using the named entity, hexadecimal, decimal, and CSS escape methods. This symbol is U+21A6 (RIGHTWARDS ARROW FROM BAR) in the Arrows block (U+2190–U+21FF)—the classic maps-to arrow used in mathematics, function mapping, navigation, and technical notation.
Render it with ↦ (named), ↦, ↦, or CSS \21A6. Related: U+2192 (→, simple right arrow), U+21A4 (↤, leftwards arrow from bar / ↤). Do not confuse ↦ with U+27FC (long right arrow from bar / ⟼).
⚡ Quick Reference — Right Arrow From Bar
U+21A6Arrows (U+2190–U+21FF)
↦Hexadecimal reference
↦Decimal reference
↦Standard HTML entity (maps-to)
Name Value
──────────── ──────────
Unicode U+21A6
Hex code ↦
HTML code ↦
Named entity ↦
CSS code \21A6
Meaning Rightwards arrow from bar (maps-to)
Related U+2192 = right arrow (→)
U+21A4 = left arrow from bar (↤, ↤)
U+27FC = long right arrow from bar (⟼, ⟼)
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: "\21A6";
}
</style>
</head>
<body>
<p>Hex: ↦</p>
<p>Decimal: ↦</p>
<p>Named: ↦</p>
<p id="point">CSS: </p>
</body>
</html>🌐 Browser Support
U+21A6 is widely supported in all modern browsers—it is part of the standard Arrows block:
👀 Live Preview
See the Right Arrow From Bar (↦) in common contexts:
🧠 How It Works
Named HTML Entity
↦ is the named entity for U+21A6 (rightwards arrow from bar). It is the standard maps-to notation in HTML source.
Hexadecimal Code
↦ uses the Unicode hexadecimal value 21A6.
Decimal HTML Code
↦ uses the decimal Unicode value 8614 for the same character.
CSS Entity
\21A6 is used in CSS stylesheets in the content property of pseudo-elements.
Same visual result
All four methods produce ↦. Unicode U+21A6 in the Arrows block. Next: Right Arrow From Bar To Black Diamond.
Use Cases
The Right Arrow From Bar (↦) is commonly used in:
Maps-to notation in mathematics, type theory, and formal specifications.
Function definitions, proofs, and mathematical documentation.
Direction from a starting bar in UI elements, breadcrumbs, and diagrams.
Flowcharts, process flows, and technical diagrams showing mapping or direction.
Algorithm descriptions, API semantics, and programming language notation.
Pair ↦ with plain language (e.g. “maps to”) for screen readers.
💡 Best Practices
Do
- Prefer
↦in HTML for readable maps-to markup - Use ↦ for mathematical function mapping notation
- Set
<meta charset="utf-8"> - Link to Left Arrow Bar for the paired ↤ symbol
- Keep one entity style consistent across your project
- Use CSS
\21A6for decorative arrows in pseudo-elements
Don’t
- Confuse ↦ (U+21A6) with → (plain right arrow) or ↤ (U+21A4)
- Use padded Unicode notation like U+021A6—the correct value is
U+21A6 - Use CSS escape
\21A6in HTML text nodes - Substitute ASCII
->when proper maps-to notation ↦ is intended - Confuse ↦ with long maps-to ⟼ (
⟼)
Key Takeaways
Four ways to render U+21A6 in HTML and CSS
↦ ↦ ↦For CSS, use \21A6 in the content property
Unicode U+21A6 — RIGHTWARDS ARROW FROM BAR (↦)
Distinct from →, ↤, and long maps-to ⟼
❓ Frequently Asked Questions
↦ (named), ↦ (hex), ↦ (decimal), or \21A6 in CSS content. All four render ↦.U+21A6 (RIGHTWARDS ARROW FROM BAR). Arrows block (U+2190–U+21FF). Hex 21A6, decimal 8614. Commonly read as maps-to in mathematics.↦, ↦, ↦) go in markup. The CSS escape \21A6 is used in stylesheets, typically on ::before or ::after. Both render ↦.↦ is the standard named HTML entity for U+21A6. You can also use ↦ (decimal) or ↦ (hex) and \21A6 in CSS—all equivalent in modern browsers.Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, symbols, math operators, and more.
About the author
8 people found this page helpful