HTML Entity for North West Arrow (↖)
What You'll Learn
How to display the north west arrow (↖) in HTML using named, hexadecimal, decimal, and CSS escape methods. This directional arrow points up and to the left and is widely used in navigation UI, maps, labels, and keyboard shortcut hints.
This character is U+2196 (NORTH WEST ARROW) in the Arrows block (U+2190–U+21FF). Render it with ↖, ↖, ↖, or CSS escape \2196.
⚡ Quick Reference — North West Arrow Entity
U+2196Arrows block
↖Hexadecimal reference
↖Decimal reference
↖Most readable option
Name Value
──────────── ──────────
Unicode U+2196
Hex code ↖
HTML code ↖
Named entity ↖
CSS code \2196
Meaning North west (up-left) arrow
Related U+2197 = North east (↗, ↗)
U+2198 = South east (↘, ↘)
U+2199 = South west (↙, ↙)Complete HTML Example
A simple example showing ↖ using hexadecimal code, decimal HTML code, the named entity, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point::after{
content: "\2196";
}
</style>
</head>
<body>
<p>Symbol (hex): ↖</p>
<p>Symbol (decimal): ↖</p>
<p>Symbol (named): ↖</p>
<p id="point">Symbol (CSS): </p>
</body>
</html>🌐 Browser Support
The north west arrow (↖) is universally supported in all modern browsers:
👀 Live Preview
See the north west arrow (↖) in navigation and directional contexts:
🧠 How It Works
Named Entity
↖ is the HTML named entity for U+2196—the most readable choice when writing directional markup.
Hexadecimal Code
↖ uses the Unicode hexadecimal value 2196. The x prefix indicates hexadecimal format.
Decimal HTML Code
↖ uses the decimal Unicode value 8598 to display the same character.
CSS Entity
\2196 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+2196 in the Arrows block (U+2190–U+21FF).
Use Cases
The north west arrow (↖) is commonly used in:
Show up-left direction on maps, signs, and route instructions.
Back, previous, and upward-left navigation indicators.
Document diagonal movement keys alongside ← → ↑ ↓.
Indicate wind direction blowing toward the north west.
Technical writing, diagrams, and flow charts with directional flow.
Unicode charts and HTML entity documentation for arrow symbols.
💡 Best Practices
Do
- Use
↖for readable directional markup - Pair ↖ with accessible text (e.g. “north west” or
aria-label) - Distinguish ↖ from heavy variants and other diagonal arrows
- Use consistent arrow styling across your UI
- Serve pages with UTF-8 (
<meta charset="utf-8">)
Don’t
- Confuse ↖ (
↖) with ↗ (↗) or other diagonal arrows - Use padded Unicode notation like U+02196—the correct value is
U+2196 - Put CSS escape
\2196in HTML text nodes - Use
\02196in CSS—the correct escape is\2196 - Rely on the glyph alone for screen-reader users without a text alternative
Key Takeaways
Three HTML references plus CSS all render ↖
↖ ↖ ↖For CSS stylesheets, use the escape in the content property
\2196Unicode U+2196 — NORTH WEST ARROW
Arrows block (U+2190–U+21FF)
↖ is the preferred named entity for readable source markup
❓ Frequently Asked Questions
↖ (named), ↖ (hex), ↖ (decimal), or \2196 in CSS content. All produce ↖.U+2196 (NORTH WEST ARROW). Arrows block (U+2190–U+21FF). Hex 2196, decimal 8598. Named entity: ↖.↖, ↖, or ↖) go directly in markup. The CSS escape \2196 is used in stylesheets, typically in the content property of pseudo-elements. Same visual result, different layers of the stack.↖ is the named HTML entity for U+2196 and is the most readable option in source markup.Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, math symbols, and more.
About the author
8 people found this page helpful