HTML Entity for Teardrop Barbed Right Arrow (➺)
What You'll Learn
How to display the Teardrop Barbed Right Arrow (➺) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+27BA (TEARDROP-BARBED RIGHTWARDS ARROW) in the Dingbats block (U+2700–U+27BF)—a decorative right-pointing arrow with a teardrop-shaped head and barbed tail for navigation and UI design.
Render it with ➺, ➺, or CSS escape \27BA. There is no named HTML entity. Do not confuse ➺ with ➻ (heavy teardrop shanked right arrow, U+27BB) or ➾ (open outlined right arrow, U+27BE).
⚡ Quick Reference — Teardrop Barbed Right Arrow
U+27BADingbats
➺Hexadecimal reference
➺Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+27BA
Hex code ➺
HTML code ➺
Named entity (none)
CSS code \27BA
Block Dingbats (U+2700–U+27BF)
Related U+27BB = Heavy Teardrop Shanked (➻), U+27BE = Open Outlined (➾)Complete HTML Example
This example demonstrates the Teardrop Barbed Right Arrow (➺) using hexadecimal code, decimal HTML code, and a CSS content escape (no named entity):
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\27BA";
}
</style>
</head>
<body>
<p>Using Hexadecimal: ➺</p>
<p>Using HTML Code: ➺</p>
<p id="point">Using CSS Entity: </p>
</body>
</html>🌐 Browser Support
The Teardrop Barbed Right Arrow is supported in all modern browsers when fonts include Dingbats glyphs:
👀 Live Preview
See the Teardrop Barbed Right Arrow (➺) in navigation context and compared with nearby Dingbats arrows:
🧠 How It Works
Hexadecimal Code
➺ uses the Unicode hexadecimal value 27BA to display the Teardrop Barbed Right Arrow. The x prefix indicates hexadecimal format.
Decimal HTML Code
➺ uses the decimal Unicode value 10170 to display the same character.
CSS Entity
\27BA is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Same visual result
All three methods produce the glyph: ➺. Unicode U+27BA in the Dingbats block (U+2700–U+27BF). No named entity.
Use Cases
The Teardrop Barbed Right Arrow (➺) commonly appears in:
Menus, breadcrumbs, and next-step indicators.
Buttons, tabs, and interactive controls.
Decorative directional elements in layouts.
Directional indicators and flow diagrams.
Forward links and call-to-action elements.
Swipe hints and carousel next controls.
Step-by-step guides and tutorial flows.
💡 Best Practices
Do
- Use
➺or➺for the arrow glyph - Add
aria-label="Next"or visible text for accessibility - Pick one style (hex or decimal) per project for consistency
- Use CSS to scale the symbol to match your UI design
- Test rendering across browsers and devices
Don’t
- Confuse ➺ with ➻ (heavy teardrop shanked) or ➾ (open outlined)
- Rely on the symbol alone without accessible labeling
- Put CSS escape
\27BAdirectly in HTML text nodes - Expect a named HTML entity for U+27BA—use numeric references
- Use HTML entities in JS (use
\u27BAinstead)
Key Takeaways
Two HTML references both render ➺
➺ ➺For CSS stylesheets, use the escape in the content property
\27BAUnicode U+27BA — TEARDROP-BARBED RIGHTWARDS ARROW
No named entity—use numeric references or CSS escape
Part of Dingbats (U+2700–U+27BF) alongside other decorative arrows
❓ Frequently Asked Questions
➺ (hex), ➺ (decimal), or \27BA in CSS content. There is no named HTML entity. All three produce ➺.U+27BA (TEARDROP-BARBED RIGHTWARDS ARROW). Dingbats block (U+2700–U+27BF). Hex 27BA, decimal 10170.➺ or ➺) go directly in markup. The CSS escape \27BA is used in stylesheets, typically in the content property of pseudo-elements. Same visual result, different layers of the stack.Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, Dingbats, math, and more.
About the author
8 people found this page helpful