HTML Entity for Down Arrow (↓)
What You'll Learn
How to display the Down Arrow (↓) in HTML using hexadecimal, decimal, the named entity ↓, and CSS escape methods. This character is U+2193 (DOWNWARDS ARROW) in the Arrows block (U+2190–U+21FF)—used in dropdowns, navigation, sort indicators, and UI direction cues.
Render it with ↓, ↓, ↓, or CSS escape \2193. For up arrow use ↑ (↑, U+2191). The down-pointing triangle (▾, U+25BE) is a different glyph often used for compact dropdowns.
⚡ Quick Reference — Down Arrow
U+2193Arrows block
↓Hexadecimal reference
↓Decimal reference
↓HTML5 named entity for U+2193
Name Value
──────────── ──────────
Unicode U+2193
Hex code ↓
HTML code ↓
Named entity ↓
CSS code \2193
Related U+2191 = Up arrow (↑); U+25BE = Down triangleComplete HTML Example
This example demonstrates the Down Arrow (↓) using hexadecimal code, decimal HTML code, the named entity ↓, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\2193";
}
</style>
</head>
<body>
<p>Down Arrow using Hexadecimal: ↓</p>
<p>Down Arrow using HTML Code: ↓</p>
<p>Down Arrow using HTML Entity: ↓</p>
<p id="point">Down Arrow using CSS Entity: </p>
</body>
</html>🌐 Browser Support
U+2193 is widely supported in modern browsers when rendered with a font that includes Arrows:
👀 Live Preview
See the Down Arrow (↓) in UI and navigation contexts:
🧠 How It Works
Hexadecimal Code
↓ uses the Unicode hexadecimal value 2193 to display the Down Arrow. The x prefix indicates hexadecimal format.
Decimal HTML Code
↓ uses the decimal Unicode value 8595 to display the same character.
Named HTML Entity
↓ is the HTML5 named entity for U+2193. It is easy to read in source and resolves to the same character (↓).
CSS Entity
\2193 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Same visual result
All four methods produce: ↓. Unicode U+2193. Up arrow: ↑ (↑). Not the same as ▾ (down-pointing triangle).
Use Cases
The Down Arrow (↓) is commonly used in:
Indicate expandable or dropdown controls in navigation and form selects.
Show scroll direction, “see more” cues, or next-section indicators.
Display sort descending in table headers and data grids.
Guide users through sequential steps or vertical flows.
Represent the down arrow key in shortcut documentation.
Indicate expand/collapse or “show more” in accordions and lists.
💡 Best Practices
Do
- Use
↓for readable markup, or↓/↓ - Add
aria-labelwhen the arrow conveys meaning (e.g. expand, sort descending) - Pair arrows with labels in forms and sortable table headers
- Use
\2193in CSS::before/::afterfor dropdown chevrons - Serve pages with UTF-8 (
<meta charset="utf-8">)
Don’t
- Confuse
↓(↓) with ▾ (down-pointing triangle) - Confuse ↓ with ↑ (
↑, up arrow) - Put CSS escape
\2193in HTML text nodes - Rely on the symbol alone without context in accessibility-critical UIs
- Assume decorative fonts include all Arrows glyphs
Key Takeaways
Named entity available: ↓
↓ ↓For CSS stylesheets, use the escape in the content property
\2193Unicode U+2193 DOWNWARDS ARROW
Up arrow: ↑ via ↑ (U+2191)
Four methods, one glyph — widely supported in modern browsers
❓ Frequently Asked Questions
↓ (hex), ↓ (decimal), ↓ (named entity), or \2193 in CSS content. All produce ↓.U+2193 (DOWNWARDS ARROW). Arrows block (U+2190–U+21FF). Hex 2193, decimal 8595.↓, ↓, or ↓) go in markup. The CSS escape \2193 is used in stylesheets, typically in the content property of pseudo-elements.↓ is easier to read in source than ↓ or ↓, but all produce ↓. The named entity is part of the HTML5 entity set for arrows.↓ is the Down Arrow (↓, U+2193). The down-pointing triangle (▾, U+25BE) is a different character often used for dropdowns. Use ↓ for a classic arrow; ▾ for a compact indicator.Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, symbols, math operators, and more.
About the author
8 people found this page helpful