HTML Entity for Clockwise Gapped Circle Arrow (⟳)
What You'll Learn
How to display the Clockwise Gapped Circle Arrow (⟳) in HTML and CSS. This character is U+27F3 (CLOCKWISE GAPPED CIRCLE ARROW) in the Supplemental Arrows-A block (U+27F0–U+27FF). It is widely recognized as a refresh or sync icon in user interfaces.
There is no named HTML entity for U+27F3. Use ⟳ or ⟳ in markup, or \27F3 in stylesheet content. Do not confuse ⟳ with Clockwise Open Circle Arrow U+21BB (↻), Clockwise Closed Circle Arrow U+2941 (⥁), or the emoji refresh symbol U+1F504.
⚡ Quick Reference — Clockwise Gapped Circle Arrow
U+27F3Supplemental Arrows-A (U+27F0–U+27FF)
⟳Hexadecimal reference
⟳Decimal reference
—None (use numeric refs)
Name Value
──────────── ──────────
Unicode U+27F3
Hex code ⟳
HTML code ⟳
Named entity —
CSS code \27F3Complete HTML Example
This example shows U+27F3 using hexadecimal and decimal character references, plus a CSS content escape. There is no named HTML entity:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\27F3";
}
</style>
</head>
<body>
<p>Clockwise Gapped Circle Arrow using Hexa Decimal: ⟳</p>
<p>Clockwise Gapped Circle Arrow using HTML Code: ⟳</p>
<p id="point">Clockwise Gapped Circle Arrow using CSS Entity: </p>
</body>
</html>🌐 Browser Support
U+27F3 is supported in modern browsers; glyph appearance may vary by font:
👀 Live Preview
See the Clockwise Gapped Circle Arrow in UI contexts:
🧠 How It Works
Hexadecimal Code
⟳ references code point U+27F3 using hex digits 27F3.
Decimal HTML Code
⟳ is the decimal equivalent (10227) for the same character.
CSS Entity
\27F3 is the CSS escape for U+27F3, used in the content property of ::before or ::after.
Same visual result
All three methods produce the Clockwise Gapped Circle Arrow glyph: ⟳. Unicode U+27F3 sits in Supplemental Arrows-A (U+27F0–U+27FF). No named HTML entity exists.
Use Cases
The Clockwise Gapped Circle Arrow (⟳) commonly appears in:
Browser-style reload buttons and page refresh controls.
Sync actions, data refresh, and update indicators in apps.
Loading spinners and progress hints suggesting rotation.
Circular process flows and iterative workflow charts.
Carousels, circular menus, and rotational navigation cues.
Unicode tables and Supplemental Arrows-A glossaries.
Pair with visible text or aria-label="refresh" on interactive controls.
💡 Best Practices
Do
- Use
⟳or⟳consistently in HTML - Provide visible “Reload” or “Sync” text on icon buttons
- Choose fonts that support Supplemental Arrows-A (Segoe UI Symbol, Noto Sans Symbols)
- Use
\27F3only inside CSScontent, not in HTML text nodes - Set
aria-labelon icon-only refresh controls
Don’t
- Confuse U+27F3 (⟳) with U+21BB open circle (↻) or U+2941 closed (⥁)
- Use U+027F3 notation—the correct code point is U+27F3
- Assume a named entity exists—U+27F3 has none
- Rely on the glyph alone without accessible labels on buttons
- Mix hex and decimal styles randomly in one file
Key Takeaways
No named entity—use numeric references
⟳ ⟳For CSS stylesheets, use the escape in the content property
\27F3U+27F3 CLOCKWISE GAPPED CIRCLE ARROW
Popular refresh/sync icon in UI design
Three methods, one glyph — widely supported in modern browsers
❓ Frequently Asked Questions
⟳ (hex), ⟳ (decimal), or \27F3 in CSS content. There is no named HTML entity for U+27F3.U+27F3 (CLOCKWISE GAPPED CIRCLE ARROW). Supplemental Arrows-A (U+27F0–U+27FF). Hex 27F3, decimal 10227.⟳ or ⟳) go directly in HTML markup. The CSS escape \27F3 is used in stylesheets, typically in the content property of pseudo-elements.⟳, ⟳, or \27F3 in CSS. Clockwise Open Circle Arrow is U+21BB (↻)—a different character.Explore More HTML Entities!
Discover 1500+ HTML character references — math operators, symbols, arrows, and more.
About the author
8 people found this page helpful