HTML Entity for Down White Arrow (⇩)
What You'll Learn
How to display the Down White Arrow (⇩) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+21E9 (DOWNWARDS WHITE ARROW) in the Arrows block (U+2190–U+21FF)—a hollow-style downward arrow often used for dropdown indicators, navigation icons, and UI design.
Render it with ⇩, ⇩, or CSS escape \21E9. There is no named HTML entity for this symbol. Pair with Up White Arrow (⇧, U+21E7) for vertical UI pairs, or use ↡ (↡) for a two-headed down arrow.
⚡ Quick Reference — Down White Arrow
U+21E9Arrows block
⇩Hexadecimal reference
⇩Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+21E9
Hex code ⇩
HTML code ⇩
Named entity (none)
CSS code \21E9
Related U+21E7 = Up white arrow; U+21A1 = Two-headed down (↡)Complete HTML Example
This example demonstrates the Down White Arrow (⇩) using hexadecimal code, decimal HTML code, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\21E9";
}
</style>
</head>
<body>
<p>Down White Arrow using Hexadecimal: ⇩</p>
<p>Down White Arrow using HTML Code: ⇩</p>
<p id="point">Down White Arrow using CSS Entity: </p>
</body>
</html>🌐 Browser Support
U+21E9 is supported in modern browsers when rendered with a font that includes Arrows:
👀 Live Preview
See the Down White Arrow (⇩) in navigation and UI contexts:
🧠 How It Works
Hexadecimal Code
⇩ uses the Unicode hexadecimal value 21E9 to display the Down White Arrow. The x prefix indicates hexadecimal format.
Decimal HTML Code
⇩ uses the decimal Unicode value 8681 to display the same character.
CSS Entity
\21E9 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+21E9. No named HTML entity—use numeric codes in markup. Serve HTML as UTF-8.
Use Cases
The Down White Arrow (⇩) is commonly used in:
Expand/collapse or “more below” in select menus and accordions.
Scroll down, next section, or downward navigation in interfaces.
Toolbars, sidebars, and expandable UI components.
Downward flow or hierarchy in process and logic diagrams.
“Scroll down” or “see below” in docs and help content.
Directional cues in headers, buttons, and design systems.
💡 Best Practices
Do
- Use
⇩or⇩consistently in markup - Add
aria-labelwhen the symbol means expand, dropdown, or scroll down - Pair ⇩ with a visible label or tooltip in UI controls
- Use
\21E9in CSS::before/::afterfor dropdown or down-arrow icons - Serve pages with UTF-8 (
<meta charset="utf-8">)
Don’t
- Expect a named entity—none exists for U+21E9
- Confuse ⇩ (white down) with ⇧ (up white) or ↡ (
↡, two-headed down) - Put CSS escape
\21E9in 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
\21E9Unicode U+21E9 — DOWNWARDS WHITE ARROW
Arrows block (U+2190–U+21FF)
Three methods, one glyph — widely supported in modern browsers
❓ Frequently Asked Questions
⇩ (hex), ⇩ (decimal), or \21E9 in CSS content. There is no named entity. All produce ⇩.U+21E9 (DOWNWARDS WHITE ARROW). Arrows block (U+2190–U+21FF). Hex 21E9, decimal 8681. A downwards white arrow, often used for dropdowns and navigation.⇩ or ⇩) go in markup. The CSS escape \21E9 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