HTML Entity for Up Arrow (↑)
What You'll Learn
How to display the Up Arrow (↑) in HTML using hexadecimal, decimal, the named entity ↑, and CSS escape methods. This character is U+2191 (UPWARDS ARROW) in the Arrows block (U+2190–U+21FF)—used in scroll-to-top buttons, navigation, sort indicators, and UI direction cues.
Render it with ↑, ↑, ↑, or CSS escape \2191. For down arrow use ↓ (↓, U+2193). The up-pointing triangle (▴, U+25B4) is a different glyph sometimes used for compact indicators.
⚡ Quick Reference — Up Arrow
U+2191Arrows block
↑Hexadecimal reference
↑Decimal reference
↑HTML5 named entity for U+2191
Name Value
──────────── ──────────
Unicode U+2191
Hex code ↑
HTML code ↑
Named entity ↑
CSS code \2191
Related U+2193 = Down arrow (↓); U+25B4 = Up triangleComplete HTML Example
A simple example showing the Up Arrow (↑) with hex, decimal, named entity, and CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\2191";
}
</style>
</head>
<body>
<p>Up Arrow using Hexadecimal: ↑</p>
<p>Up Arrow using HTML Code: ↑</p>
<p>Up Arrow using HTML Entity: ↑</p>
<p id="point">Up Arrow using CSS Entity: </p>
</body>
</html>🌐 Browser Support
U+2191 is widely supported in modern browsers when rendered with a font that includes Arrows:
👀 Live Preview
See the Up Arrow (↑) in UI and navigation contexts:
🧠 How It Works
Hexadecimal Code
↑ uses the Unicode hexadecimal value 2191 to display the Up Arrow. The x prefix indicates hexadecimal format.
Decimal HTML Code
↑ uses the decimal Unicode value 8593 to display the same character.
Named HTML Entity
↑ is the HTML5 named entity for U+2191. It is easy to read in source and resolves to the same character (↑).
CSS Entity
\2191 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+2191. Down arrow: ↓ (↓). Not the same as ▴ (up-pointing triangle).
Use Cases
The Up Arrow (↑) is commonly used in:
Back-to-top buttons and fixed navigation that returns users to the page header.
Indicate upward movement in menus, breadcrumbs, and site navigation.
Display sort ascending in table headers and data grids.
Guide users through sequential steps or vertical flows from bottom to top.
Represent the up arrow key in shortcut documentation.
Buttons, call-to-action elements, and design systems that need upward direction cues.
💡 Best Practices
Do
- Use
↑for readable markup, or↑/↑ - Add
aria-labelwhen the arrow conveys meaning (e.g. scroll to top, sort ascending) - Pair arrows with labels in forms and sortable table headers
- Use
\2191in CSS::before/::afterfor scroll-to-top icons - Serve pages with UTF-8 (
<meta charset="utf-8">)
Don’t
- Confuse
↑(↑) with ▴ (up-pointing triangle) - Confuse ↑ with ↓ (
↓, down arrow) - Put CSS escape
\2191in 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
\2191Unicode U+2191 UPWARDS ARROW
Down arrow: ↓ via ↓ (U+2193)
Four methods, one glyph — widely supported in modern browsers
❓ Frequently Asked Questions
↑ (hex), ↑ (decimal), ↑ (named entity), or \2191 in CSS content. All produce ↑.U+2191 (UPWARDS ARROW). Arrows block (U+2190–U+21FF). Hex 2191, decimal 8593.↑ is easier to read in source than ↑ or ↑, but all produce ↑. The named entity is part of the HTML5 entity set for arrows.↑, ↑, or ↑) go in markup. The CSS escape \2191 is used in stylesheets, typically in the content property of pseudo-elements.↑ are reserved for frequently used characters, making them more convenient than numeric-only arrow variants.Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, symbols, math operators, and more.
About the author
8 people found this page helpful