HTML Entity for Right Arrow With Circled Plus (⟴)
What You'll Learn
How to display the Right Arrow With Circled Plus (⟴) in HTML using hexadecimal, decimal, and CSS escape methods. This symbol is U+27F4 (RIGHTWARDS ARROW WITH CIRCLED PLUS) in the Supplemental Arrows-A block (U+27F0–U+27FF)—a rightward arrow with a circled plus, used for UI design, add buttons, expand functionality, and interactive navigation.
Render it with ⟴, ⟴, or CSS \27F4. There is no named HTML entity. Related: U+27F3 (⟳, left arrow with circled plus), U+2945 (⥅, right arrow plus below / ⥅). Do not confuse ⟴ with plain → or ⊕ alone.
⚡ Quick Reference — Right Arrow With Circled Plus
U+27F4Supplemental Arrows-A (U+27F0–U+27FF)
⟴Hexadecimal reference
⟴Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+27F4
Hex code ⟴
HTML code ⟴
Named entity (none)
CSS code \27F4
Meaning Rightwards arrow with circled plus
Related U+27F3 = left arrow with circled plus (⟳)
U+2945 = right arrow plus below (⥅, ⥅)
U+21B4 = right arrow with corner down (↴)
Block Supplemental Arrows-A (U+27F0–U+27FF)Complete HTML Example
A simple example showing ⟴ using hexadecimal code, decimal HTML code, and a CSS content escape. There is no named HTML entity:
<!DOCTYPE html>
<html>
<head>
<style>
#point::after{
content: "\27F4";
}
</style>
</head>
<body>
<p>Hex: ⟴</p>
<p>Decimal: ⟴</p>
<p id="point">CSS: </p>
</body>
</html>🌐 Browser Support
U+27F4 renders in modern browsers when the font includes Supplemental Arrows-A glyphs:
👀 Live Preview
See the Right Arrow With Circled Plus (⟴) in common UI contexts:
🧠 How It Works
Hexadecimal Code
⟴ uses the Unicode hexadecimal value 27F4. The x prefix indicates hexadecimal format.
Decimal HTML Code
⟴ uses the decimal Unicode value 10228 for the same character.
CSS Entity
\27F4 is used in CSS stylesheets in the content property of pseudo-elements.
Same visual result
All three methods produce ⟴. Unicode U+27F4 in the Supplemental Arrows-A block. No named entity—use numeric codes. Previous: Right Arrow Vertical Stroke (⇸). Next: Right Arrow With Corner Down (↴).
Use Cases
The Right Arrow With Circled Plus (⟴) is commonly used in:
Buttons and controls that combine direction with add or create actions.
Create, add, and new-item actions with a directional arrow accent.
Forms and UI that need expand or add functionality with direction.
Menus and action bars combining navigation with add/create cues.
Expandable sections and collapsible content indicators.
Pair ⟴ with plain language (e.g. “add” or “expand”) for screen readers.
💡 Best Practices
Do
- Use
⟴or⟴in HTML (no named entity exists) - Use ⟴ when add/expand needs a directional arrow context
- Set
<meta charset="utf-8"> - Keep hex or decimal style consistent across your project
- Use CSS
\27F4for decorative arrows in pseudo-elements - Add accessible labels for add and expand actions
Don’t
- Confuse ⟴ (U+27F4) with ⟳ (U+27F3), ⥅ (U+2945), or plain →
- Use padded Unicode notation like U+027F4—the correct value is
U+27F4 - Use CSS escape
\27F4in HTML text nodes - Use padded CSS like
\027F4—prefer\27F4 - Rely on the symbol alone without text for critical add actions
Key Takeaways
Three ways to render U+27F4 in HTML and CSS
⟴ ⟴For CSS, use \27F4 in the content property
Unicode U+27F4 — RIGHTWARDS ARROW WITH CIRCLED PLUS (⟴)
No named HTML entity—use numeric hex or decimal references
Previous: Right Arrow Vertical Stroke (⇸) Next: Right Arrow With Corner Down (↴)
❓ Frequently Asked Questions
⟴ (hex), ⟴ (decimal), or \27F4 in CSS content. There is no named HTML entity. All three render ⟴.U+27F4 (RIGHTWARDS ARROW WITH CIRCLED PLUS). Supplemental Arrows-A block (U+27F0–U+27FF). Hex 27F4, decimal 10228.⟴, ⟴) go in markup. The CSS escape \27F4 is used in stylesheets, typically on ::before or ::after. Both render ⟴.⟴) or decimal (⟴) references instead.Explore More HTML Entities!
Discover 1500+ HTML character references — arrows, symbols, math operators, and more.
About the author
8 people found this page helpful