Clockwise Gapped Circle Arrow (⟳) is the Unicode character at U+27F3 in the Supplemental Arrows-A block (official name: CLOCKWISE GAPPED CIRCLE ARROW). It is a circular clockwise arrow with a gap, often used for refresh, sync, and loading cues.
Remember
Character ⟳
Unicode U+27F3
Hex entity ⟳
Decimal ⟳
Named entity (none)
CSS escape \27F3
All of these produce the same glyph: ⟳. Prefer a typed ⟳ or hex ⟳ in hand-written HTML; use decimal when generating numeric-only markup.
Clockwise gapped circle arrow rendered in common writing contexts.
Inline text⟳ Sync now
Large glyph⟳
Compared⟳ ↻ ⥁
Monospacestatus: ⟳ refreshing
With entitiesHex: ⟳ | Decimal: ⟳
Code
Complete HTML Example
One page that shows Clockwise Gapped Circle Arrow with the hex entity, decimal entity, CSS escape, and a typed character. Use View Output or open the live editor.
Hex + Decimal + CSS + Typed
Four ways to produce ⟳ in a single document.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clockwise Gapped Circle Arrow (⟳) in HTML</title>
<style>
#point::after {
content: "\27F3";
}
</style>
</head>
<body>
<p>Clockwise Gapped Circle Arrow using Hex Code: ⟳</p>
<p>Clockwise Gapped Circle Arrow using HTML Code: ⟳</p>
<p id="point">Clockwise Gapped Circle Arrow using CSS Entity: </p>
<p>Typed directly: ⟳</p>
</body>
</html>
Clockwise Gapped Circle Arrow using Hex Code: ⟳
Clockwise Gapped Circle Arrow using HTML Code: ⟳
Clockwise Gapped Circle Arrow using CSS Entity: ⟳
Typed directly: ⟳
How It Works
1. Hex:U+27F3 → ⟳ in HTML. The browser turns it into ⟳.
2. Decimal: same code point as 10227 → ⟳. Same result as hex.
3. CSS: use \27F3 in content (not an HTML entity). #point::after appends that ⟳ after the paragraph text.
4. Typed ⟳: fine in UTF-8 pages. All four lines show the same glyph.
Pitfalls & Tips
Common mistakes when working with Clockwise Gapped Circle Arrow entities.
Named?
No named entity
HTML5 does not define a named reference for U+27F3. Use ⟳ or ⟳.
CSS vs HTML
Do not mix escapes
\27F3 belongs in CSS. ⟳ / ⟳ belong in HTML.
⟳ vs ↻
Different characters
⟳ is U+27F3 (gapped). Open circle ↻ is U+21BB (↻).
A11y
Do not rely on the glyph alone
Pair ⟳ with text (or an accessible name) so screen-reader users get the same meaning — e.g. “Refresh”.
Semicolon
End references
Always finish with ; — write ⟳, not ⟳.
Icons
Glyph vs SVG
For spinning loaders and polished buttons, an SVG icon is often clearer than a Unicode arrow alone.
Compatibility
Browser Support
Clockwise Gapped Circle Arrow (U+27F3) and its entity forms (⟳, ⟳, CSS \\27F3) are supported in all mainstream browsers that handle Unicode. Glyph availability depends on fonts.
✓ Universal support
Clockwise Gapped Circle Arrow (⟳)
Type ⟳, or encode with hex, decimal, or CSS escape — same glyph everywhere encoding and fonts support it.
100%Browser coverage
Google ChromeSupported
Yes
Microsoft EdgeSupported
Yes
Mozilla FirefoxSupported
Yes
Apple SafariSupported
Yes
OperaSupported
Yes
Internet ExplorerAll versions
Yes
U+27F3 / entitiesFull support
Bottom line: Prefer ⟳ or a typed ⟳ for gapped-circle refresh cues. Use decimal when generating markup, and \\27F3 only inside CSS content.
Remember
Key Takeaways
Unicode: clockwise gapped circle arrow is U+27F3 (decimal 10227).
HTML: use ⟳ or ⟳ (no named entity).
CSS: use \27F3 inside content for generated text.
Watch out: ⟳ ≠ ↻ ≠ ⥁ (gapped ≠ open ≠ closed).
One line:U+27F3 → ⟳ / ⟳ / CSS \27F3.
Frequently Asked Questions
Use ⟳ (hex), ⟳ (decimal), or the CSS escape \27F3 in the content property. All render ⟳. You can also paste ⟳ directly when your file is UTF-8. There is no named HTML entity.
U+27F3 (hex 27F3, decimal 10227). Unicode names it CLOCKWISE GAPPED CIRCLE ARROW. It belongs to the Supplemental Arrows-A block.
No. HTML5 does not define a named entity for ⟳. Use numeric references like ⟳ or ⟳.
Use it for refresh, sync, or loading cues in diagrams and simple UI labels. Prefer SVG icons when you need precise size, color, or animation control.
HTML entities (⟳ or ⟳) go in markup. The CSS escape \27F3 goes in stylesheet strings (usually content on ::before/::after).
⟳ (U+27F3) is a gapped circle clockwise arrow. ↻ (U+21BB / ↻) is an open circle clockwise arrow. ⥁ (U+2941) is a closed circle clockwise arrow. They look related but are different characters.
🤔
Did you know?
Clockwise gapped circle arrow is Unicode U+27F3 (decimal 10227) — official name CLOCKWISE GAPPED CIRCLE ARROW in the Supplemental Arrows-A block. HTML5 has no named entity. It is not the open circle arrow ↻ (U+21BB / ↻) or the closed circle arrow ⥁ (U+2941).
