HTML Entity for Clockwise Arrow (↷)
What You'll Learn
How to display the Clockwise Arrow (↷) in HTML using numeric references, named entities, and CSS escapes. This character is U+21B7 (CLOCKWISE ARROW WITH TIP DOWN TO LEFT) in the Arrows block (U+2190–U+21FF). It indicates clockwise rotation or directional flow in UI and documentation.
You can use the named entity ↷, hex ↷, decimal ↷, or CSS \21B7. Do not confuse ↷ with Clockwise Open Circle Arrow U+21BB (↻), Anticlockwise Open Circle Arrow U+21BA (↺), or plain Rightwards Arrow U+2192 (→).
⚡ Quick Reference — Clockwise Arrow
U+21B7Arrows block
↷Hexadecimal reference
↷Decimal reference
↷Standard HTML entity
Name Value
──────────── ──────────
Unicode U+21B7
Hex code ↷
HTML code ↷
Named entity ↷
CSS code \21B7Complete HTML Example
This example demonstrates the Clockwise Arrow (↷) using hexadecimal code, decimal HTML code, the named entity, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\21B7";
}
</style>
</head>
<body>
<p>Clockwise Arrow using Hexa Decimal: ↷</p>
<p>Clockwise Arrow using HTML Code: ↷</p>
<p>Clockwise Arrow using HTML Entity: ↷</p>
<p id="point">Clockwise Arrow using CSS Entity: </p>
</body>
</html>🌐 Browser Support
The Clockwise Arrow entity is universally supported in all modern browsers:
👀 Live Preview
See the Clockwise Arrow in UI and navigation contexts:
🧠 How It Works
Hexadecimal Code
↷ uses the Unicode hexadecimal value 21B7 to display the Clockwise Arrow.
Decimal HTML Code
↷ uses the decimal Unicode value 8631 to display the same character.
Named HTML Entity
↷ is the standard named entity for U+21B7—short for “curved arrow.”
CSS Entity
\21B7 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Same visual result
All four methods produce the Clockwise Arrow glyph: ↷. Unicode U+21B7 sits in Arrows (U+2190–U+21FF).
Use Cases
The Clockwise Arrow (↷) commonly appears in:
Reload buttons, rotate controls, and UI elements indicating clockwise motion.
Directional cues, turn instructions, and wayfinding indicators in apps.
Process flows, cycle diagrams, and schematics showing clockwise direction.
Manuals and guides describing “turn clockwise” or rotation steps.
Settings panels, rotation toggles, and directional control labels.
Unicode tables and arrow character glossaries.
Pair with visible text or aria-label="clockwise arrow" for screen readers.
💡 Best Practices
Do
- Prefer
↷for readable HTML source on refresh/rotate controls - Provide visible text labels alongside icon-only arrow buttons
- Use
aria-hidden="true"on decorative arrows with text alternatives nearby - Keep entity style consistent within a document
- Choose fonts that render Arrows block glyphs clearly
Don’t
- Confuse U+21B7 (↷) with U+21BB open circle arrow (↻)
- Put CSS escape
\21B7inside HTML text nodes - Rely on the glyph alone without accessible labels on interactive controls
- Use ↷ when a plain right arrow (→) is intended
- Mix entity styles randomly in one file
Key Takeaways
Named entity is the easiest option
↷Numeric references also render ↷
↷ ↷For CSS stylesheets, use the escape in the content property
\21B7U+21B7 CLOCKWISE ARROW WITH TIP DOWN TO LEFT
Four methods, one glyph — all widely supported
❓ Frequently Asked Questions
↷ (named entity), ↷ (hex), ↷ (decimal), or \21B7 in CSS content. All produce ↷.U+21B7 (CLOCKWISE ARROW WITH TIP DOWN TO LEFT). Arrows block (U+2190–U+21FF). Hex 21B7, decimal 8631.↷, ↷, or ↷) go directly in markup. The CSS escape \21B7 is used in stylesheets, typically in the content property of pseudo-elements.↷ is the named entity for U+21B7. Clockwise Open Circle Arrow is a different character: U+21BB (↻).Explore More HTML Entities!
Discover 1500+ HTML character references — math operators, symbols, arrows, and more.
About the author
8 people found this page helpful