When should I use the anticlockwise open circle arrow?

For refresh or reload controls, undo or history actions, rotate-left affordances, media rewind, and diagrams that need a standard counterclockwise open-ring arrow.

Is there a named HTML entity for U+21BA?

Yes. &olarr; is the standard named entity for the anticlockwise open circle arrow and is often the most readable choice in hand-authored HTML.

HTML Entity for Anticlockwise Open Circle Arrow (↺)

Q: How do I display the anticlockwise open circle arrow (U+21BA) in HTML?

Use &olarr; (named entity), ↺ (hex), ↺ (decimal), or \21BA in CSS content. All produce U+21BA.

Q: What is the Unicode value and official name?

U+21BA (hex 21BA, decimal 8634). Official name: ANTICLOCKWISE OPEN CIRCLE ARROW. Block: Arrows.

Q: What’s the difference between HTML references and a CSS escape for U+21BA?

Markup uses &olarr;, ↺, or ↺ in text. CSS uses \21BA in stylesheets, typically in the content property of ::before/::after. Same glyph, different layers.

Beginner

⏱️ 5 min read

📚 Updated: May 2026

🎯 1 Code Example

Unicode U+21BA

HTML Entity for anticlockwise open circle arrow (U+21BA) tutorial illustration

What You'll Learn

How to display the anticlockwise open circle arrow (↺, U+21BA) in HTML. Unicode’s official name is ANTICLOCKWISE OPEN CIRCLE ARROW; it is the familiar open-ring counterclockwise arrow used for refresh, reload, undo, rotate-left, and similar controls.

The character lives in the Arrows block. You can write it as the named entity &olarr;, as ↺ or ↺, or via \21BA in CSS content on pseudo-elements.

⚡ Quick Reference — Anticlockwise Open Circle Arrow

Unicode U+21BA

Arrows block

Hex Code ↺

Hexadecimal reference

HTML Code ↺

Decimal reference

Named Entity &olarr;

Readable in source

CSS Code \21BA

Use in CSS content

Reference Table

Name           Value
────────────   ──────────
Unicode        U+21BA
Hex code       &#x21BA;
HTML code      &#8634;
Named entity   &olarr;
CSS code       \21BA

Complete HTML Example

This example shows U+21BA using hexadecimal code, decimal code, the olarr named reference, and a CSS content escape on a pseudo-element:

html

<!DOCTYPE html>
<html>
<head>
 <style>
  #point:after{
   content: "\21BA";
  }
 </style>
</head>
<body>

<p>Anticlockwise Open Circle Arrow using Hexa Decimal: &#x21BA;</p>
<p>Anticlockwise Open Circle Arrow using HTML Code: &#8634;</p>
<p>Anticlockwise Open Circle Arrow using HTML Entity: &olarr;</p>
<p id="point">Anticlockwise Open Circle Arrow using CSS Entity: </p>

</body>
</html>

In the sample above, a zero-width space () sits between & and olarr; so the named reference stays visible as literal text in this tutorial listing; in your own HTML, write &olarr; (ampersand + olarr + semicolon) normally.

Try It Yourself

🌐 Browser Support

The olarr named reference and numeric forms for U+21BA are supported in all modern browsers. Rendering depends on fonts that include the Arrows block:

Chrome 1+

Firefox 1+

Safari 1+

Edge 12+

Opera 4+

Android 4.4+

iOS Safari 1+

👀 Live Preview

See U+21BA in short UI-style snippets:

Isolated glyph ↺

With label ↺ Refresh

Named ref Same arrow as &olarr; in UTF-8 HTML.

Monospace U+21BA ANTICLOCKWISE OPEN CIRCLE ARROW

Pairing Pair with U+21BB (clockwise open circle arrow) when both directions appear, and add visible text or aria-label for accessibility.

🧠 How It Works

Named entity

&olarr; (ampersand + olarr + semicolon) resolves to U+21BA. It is easy to read in hand-authored UI HTML.

HTML markup

Hexadecimal code

↺ uses the Unicode hexadecimal value 21BA. The x prefix marks hexadecimal format.

HTML markup

Decimal HTML code

↺ is the decimal equivalent (8634₁₀ = 21BA₁₆).

HTML markup

CSS escape

\21BA in content on ::before / ::after emits U+21BA from a stylesheet.

CSS stylesheet

Same visual result

All paths expose U+21BA (Arrows). Official name: ANTICLOCKWISE OPEN CIRCLE ARROW. Prefer &olarr; in markup when readability matters; use CSS escapes only in stylesheets.

✅

Use Cases

U+21BA is one of the most recognizable counterclockwise open-ring arrows in UI (always pair with text or an accessible name):

🔄 Refresh and reload

Reload page, retry request, or sync controls in apps and dashboards.

↩ Undo and history

Revert edits, step back in history, or “go back” in lightweight toolbars.

🔧 Rotate left

Image viewers, maps, and design tools that expose counterclockwise rotation.

🎤 Media controls

Rewind or skip-back affordances next to play and pause.

📈 Diagrams

Cyclic or counterclockwise flow in process figures and cycle charts.

📘 Technical writing

Rotation conventions in docs that stay in plain HTML without icon fonts.

♿ Accessibility

Add aria-label or visible text (“Refresh,” “Undo”); the arrow alone is ambiguous for assistive tech.

💡 Best Practices

Do

Prefer &olarr; for readable source when you want a named reference
Pair the symbol with visible text on icon buttons
Use a font stack with solid Arrows coverage for dense toolbars
Use \21BA only inside CSS content, not raw in HTML text
Offer U+21BB (clockwise open circle arrow) when users choose direction explicitly

Don’t

Rely on the glyph alone for destructive or irreversible actions
Assume every font matches the OS refresh icon users remember
Confuse U+21BA with other circular arrows (closed ring, gapped ring, semicircle)
Use HTML entities inside JavaScript strings (use \u21BA there instead)
Forget keyboard access and focus styles on icon-only controls

Key Takeaways

Named + numeric ways to write U+21BA

&olarr; ↺ ↺

CSS content escape

\21BA

Unicode U+21BA — ANTICLOCKWISE OPEN CIRCLE ARROW

Arrows — refresh, undo, rotate-left, rewind patterns

Label the action for assistive technology; the shape alone is not self-explanatory

❓ Frequently Asked Questions

How do I display the anticlockwise open circle arrow (U+21BA) in HTML?

Use &olarr; (named), ↺ (hex), ↺ (decimal), or \21BA in CSS content. All render ↺.

What is the Unicode value and official name?

U+21BA (decimal 8634, hex 21BA). Official name: ANTICLOCKWISE OPEN CIRCLE ARROW. Block: Arrows.

Is olarr the same character as the hex reference?

Yes. The named entity &olarr; is defined for U+21BA; numeric references are alternative spellings of the same code point.

What’s the difference between HTML references and a CSS escape?

Markup uses &olarr;, ↺, or ↺ in text nodes. CSS uses backslash hex escapes inside content rules. Same code point; different syntax layer.

Should I use this glyph for every “back” or “undo” action?

U+21BA reads strongly as refresh or circular motion. For linear “back” navigation, users often expect a left-pointing arrow (for example U+2190) or the browser back affordance. Match the symbol to the real action.

Explore More HTML Entities!

Discover 1500+ HTML character references — currency symbols, arrows, math operators, emojis, and more.

All HTML Entities →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Anticlockwise Contour Integral (∳) Z Notation Bag Membership (⋿)

HTML Entity for Anticlockwise Open Circle Arrow (↺)

What You'll Learn

⚡ Quick Reference — Anticlockwise Open Circle Arrow

Complete HTML Example

🌐 Browser Support

👀 Live Preview

🧠 How It Works

Named entity

Hexadecimal code

Decimal HTML code

CSS escape

Same visual result

Use Cases

💡 Best Practices

Do

Don’t

Key Takeaways

❓ Frequently Asked Questions

🧩 Related HTML Topics

Explore More HTML Entities!

About the author