HTML Entity for Up White Arrow Bar (⇪)
What You'll Learn
How to display the Up White Arrow Bar (⇪) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+21EA (UPWARDS WHITE ARROW FROM BAR) in the Arrows block (U+2190–U+21FF)—an upward white arrow rising from a horizontal bar, used for navigation, UI design, infographics, and symbolic direction indicators.
Render it with ⇪, ⇪, or CSS escape \21EA. There is no named HTML entity. Compare ⇧ (Up White Arrow, without bar) and ↥ (Up Arrow From Bar, filled style via ↥).
⚡ Quick Reference — Up White Arrow Bar
U+21EAArrows block
⇪Hexadecimal reference
⇪Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+21EA
Hex code ⇪
HTML code ⇪
Named entity (none)
CSS code \21EA
Official name UPWARDS WHITE ARROW FROM BAR
Also known as Caps Lock indicator (⇪)
Related U+21E7 = Up white arrow; U+21A5 = Up arrow from bar (↥)
Block Arrows (U+2190–U+21FF)Complete HTML Example
A simple example showing ⇪ with hex, decimal, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point::after{
content: "\21EA";
}
</style>
</head>
<body>
<p>Up White Arrow Bar (hex): ⇪</p>
<p>Up White Arrow Bar (decimal): ⇪</p>
<p id="point">Up White Arrow Bar (CSS): </p>
</body>
</html>🌐 Browser Support
U+21EA is supported in modern browsers when rendered with a font that includes Arrows:
👀 Live Preview
See the Up White Arrow Bar (⇪) in navigation and UI contexts:
🧠 How It Works
Hexadecimal Code
⇪ uses the Unicode hexadecimal value 21EA to display the Up White Arrow Bar. The x prefix indicates hexadecimal format.
Decimal HTML Code
⇪ uses the decimal Unicode value 8682 to display the same character.
CSS Entity
\21EA is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Same visual result
All three methods produce: ⇪. Unicode U+21EA. No named HTML entity—use numeric codes in markup. Serve HTML as UTF-8.
Use Cases
The Up White Arrow Bar (⇪) is commonly used in:
Caps Lock indicator in shortcut and keyboard layout guides.
Navigation icons and upward movement from a baseline bar.
Directional flow and upward progression in charts and diagrams.
Menus, toolbars, and symbolic wayfinding with bar-style arrows.
Explain arrow variants and Unicode symbol references.
Design systems with white arrow glyphs and bar indicators.
💡 Best Practices
Do
- Use
⇪or⇪consistently in markup - Add
aria-labelwhen the symbol means Caps Lock or scroll up from bar - Pair ⇪ with a visible label in UI controls
- Use
\21EAin CSS::before/::afterfor bar-arrow icons - Serve pages with UTF-8 (
<meta charset="utf-8">)
Don’t
- Expect a named entity—none exists for U+21EA
- Confuse ⇪ (white from bar) with ⇧ (white, no bar) or ↥ (
↥, filled) - Put CSS escape
\21EAin HTML text nodes - Rely on the symbol alone in accessibility-critical UIs
- Assume decorative fonts include all Arrows glyphs
Key Takeaways
Two HTML numeric references render ⇪
⇪ ⇪For CSS stylesheets, use the escape in the content property
\21EAUnicode U+21EA — UPWARDS WHITE ARROW FROM BAR
Arrows block (U+2190–U+21FF)
Distinct from ⇧ (Up White Arrow without bar)
❓ Frequently Asked Questions
⇪ (hex), ⇪ (decimal), or \21EA in CSS content. There is no named entity. All produce ⇪.U+21EA (UPWARDS WHITE ARROW FROM BAR). Arrows block (U+2190–U+21FF). Hex 21EA, decimal 8682. Often used for navigation and Caps Lock notation.⇪ or ⇪) go in markup. The CSS escape \21EA is used in stylesheets, typically in the content property of pseudo-elements. Same visual result, different layers of the stack.⇪ or ⇪ in HTML.Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, symbols, math operators, and more.
About the author
8 people found this page helpful