HTML Entity for Up White Arrow (⇧)
What You'll Learn
How to display the Up White Arrow (⇧) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+21E7 (UPWARDS WHITE ARROW) in the Arrows block (U+2190–U+21FF)—a hollow-style upward arrow used for navigation icons, scroll-to-top controls, and UI design. It is also widely recognized as the Shift key symbol on keyboards.
Render it with ⇧, ⇧, or CSS escape \21E7. There is no named HTML entity for this symbol. Pair with Down White Arrow (⇩, U+21E9) for vertical UI pairs, or use ↑ (↑, single up arrow) for a filled-style alternative.
⚡ Quick Reference — Up White Arrow
U+21E7Arrows block
⇧Hexadecimal reference
⇧Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+21E7
Hex code ⇧
HTML code ⇧
Named entity (none)
CSS code \21E7
Official name UPWARDS WHITE ARROW
Also known as Shift key symbol (⇧)
Related U+21E9 = Down white arrow; U+2191 = Up arrow (↑)
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: "\21E7";
}
</style>
</head>
<body>
<p>Up White Arrow (hex): ⇧</p>
<p>Up White Arrow (decimal): ⇧</p>
<p id="point">Up White Arrow (CSS): </p>
</body>
</html>🌐 Browser Support
U+21E7 is supported in modern browsers when rendered with a font that includes Arrows:
👀 Live Preview
See the Up White Arrow (⇧) in navigation and UI contexts:
🧠 How It Works
Hexadecimal Code
⇧ uses the Unicode hexadecimal value 21E7 to display the Up White Arrow. The x prefix indicates hexadecimal format.
Decimal HTML Code
⇧ uses the decimal Unicode value 8679 to display the same character.
CSS Entity
\21E7 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+21E7. No named HTML entity—use numeric codes in markup. Serve HTML as UTF-8.
Use Cases
The Up White Arrow (⇧) is commonly used in:
Back-to-top buttons and upward navigation in long pages.
Shift key notation in help text and shortcut documentation.
Navigation icons, buttons, and upward directional indicators.
Menus, toolbars, and wayfinding with upward movement cues.
“Scroll up” or “see above” in docs and help content.
Directional cues in headers, design systems, and mobile UI.
💡 Best Practices
Do
- Use
⇧or⇧consistently in markup - Add
aria-labelwhen the symbol means scroll up, Shift, or move upward - Pair ⇧ with a visible label or tooltip in UI controls
- Use
\21E7in CSS::before/::afterfor up-arrow icons - Serve pages with UTF-8 (
<meta charset="utf-8">)
Don’t
- Expect a named entity—none exists for U+21E7
- Confuse ⇧ (white up) with ⇩ (white down) or ↑ (
↑, filled up) - Put CSS escape
\21E7in 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
\21E7Unicode U+21E7 — UPWARDS WHITE ARROW (Shift key symbol)
Arrows block (U+2190–U+21FF)
Paired with ⇩ (Down White Arrow) for vertical UI indicators
❓ Frequently Asked Questions
⇧ (hex), ⇧ (decimal), or \21E7 in CSS content. There is no named entity. All produce ⇧.U+21E7 (UPWARDS WHITE ARROW). Arrows block (U+2190–U+21FF). Hex 21E7, decimal 8679. Commonly used for navigation and as the Shift key symbol.⇧ or ⇧) go in markup. The CSS escape \21E7 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