HTML Entity for Left Arrow Bar (↤)

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 1 Code Example
Unicode U+21A4
HTML entity for Left Arrow Bar (U+21A4) — named ↤, hex, decimal, and CSS tutorial

What You'll Learn

How to display the Left Arrow Bar (↤) in HTML using the named entity, hexadecimal, decimal, and CSS escape methods. This symbol is U+21A4 (LEFTWARDS ARROW FROM BAR) in the Arrows block (U+2190–U+21FF)—the leftwards arrow from bar, used in navigation, UI design, keyboard notation, and logic or assignment-style notation (maps to left).

Render it with ↤ (named), ↤, ↤, or CSS \21A4. Related: U+2190 (←, simple left arrow), U+21A6 (↦, rightwards arrow from bar / ↦).

⚡ Quick Reference — Left Arrow Bar

Unicode U+21A4

Arrows block

Hex Code ↤

Hexadecimal reference

HTML Code ↤

Decimal reference

Named Entity ↤

Most readable option

Reference Table
Name           Value
────────────   ──────────
Unicode        U+21A4
Hex code       ↤
HTML code      ↤
Named entity   ↤
CSS code       \21A4
Meaning        Leftwards arrow from bar
Related        U+2190 = left arrow (←)
               U+21A6 = right arrow from bar (↦)
1

Complete HTML Example

A simple example showing the Left Arrow Bar (↤) using the named entity, hexadecimal code, decimal HTML code, and a CSS content escape:

html
<!DOCTYPE html>
<html>
<head>
 <style>
  #point:after{
   content: "\21A4";
  }
 </style>
</head>
<body>
<p>Left Arrow Bar using Hexadecimal: &#x21A4;</p>
<p>Left Arrow Bar using HTML Code: &#8612;</p>
<p>Left Arrow Bar using HTML Entity: &mapstoleft;</p>
<p id="point">Left Arrow Bar using CSS Entity: </p>
</body>
</html>
Try it Yourself

🌐 Browser Support

The Left Arrow Bar (↤) is widely supported in all modern browsers—it is part of the standard Arrows block:

Chrome 1+
Firefox 1+
Safari 1+
Edge 12+
Opera 4+
Android 4.4+
iOS Safari 1+

👀 Live Preview

See the Left Arrow Bar (↤) rendered in common contexts:

Back / return ↤ Return
Maps to left x ↤ y
Large glyph ↤
Arrow comparison ↤ ← ↦
Entity refs &mapstoleft; &#x21A4; &#8612; \21A4

🧠 How It Works

1

Named HTML Entity

&mapstoleft; is the named entity for the Left Arrow Bar (leftwards arrow from bar). It is easy to read in navigation and logic markup.

HTML markup
2

Hexadecimal Code

&#x21A4; uses the Unicode hexadecimal value 21A4. The x prefix indicates hexadecimal format.

HTML markup
3

Decimal HTML Code

&#8612; uses the decimal Unicode value 8612 for the same leftwards arrow from bar character.

HTML markup
4

CSS Entity

\21A4 is used in CSS stylesheets in the content property of pseudo-elements like ::after.

CSS stylesheet
=

Same visual result

All four methods produce the Left Arrow Bar: ↤. Unicode U+21A4 sits in the Arrows block. Next: Left Arrow Bar Black Diamond.

✅

Use Cases

The Left Arrow Bar (↤) is commonly used in:

🧭 Navigation

Back, return, or left direction in app headers, breadcrumbs, and navigation controls.

⌨️ Keyboard

Key labels and shortcut hints in help text and documentation.

⊢ Logic

Maps-to-left or assignment-from notation in logic, type theory, or formal specs.

📄 Documentation

Keyboard layouts, API semantics, or specification language using this arrow.

📱 Wizards

Previous step or go-back in multi-step forms and onboarding flows.

🖥️ UI design

Toolbar buttons, list navigation, or controls indicating left or reverse direction.

💡 Best Practices

Do

  • Prefer &mapstoleft; in HTML for readable source markup
  • Pair the arrow with text (e.g. “↤ Return”) or use aria-label
  • Keep one entity style consistent across your project
  • Set <meta charset="utf-8">
  • Use CSS \21A4 for decorative arrows in pseudo-elements
  • Test arrow rendering across browsers and fonts

Don’t

  • Use the symbol alone without context for interactive controls
  • Confuse ↤ (from bar left) with ← (simple left) or ↦ (from bar right)
  • Mix entity styles randomly in one file
  • Use CSS \21A4 inside HTML text nodes
  • Rely on the arrow as the only accessibility cue

Key Takeaways

1

Four ways to render U+21A4 in HTML and CSS

&mapstoleft; &#x21A4; &#8612;
2

For CSS, use \21A4 in the content property

3

Unicode U+21A4 — LEFTWARDS ARROW FROM BAR

4

Arrows block (U+2190–U+21FF)

5

Previous: Left Arrow Above Tilde Operator (⥳)   Next: Left Arrow Bar Black Diamond

❓ Frequently Asked Questions

Use &mapstoleft; (named), &#x21A4; (hex), &#8612; (decimal), or \21A4 in CSS content. All four methods render ↤.
U+21A4 (LEFTWARDS ARROW FROM BAR). Arrows block (U+2190–U+21FF). Hex 21A4, decimal 8612. Used in navigation, UI, and logic (maps to left).
In navigation and back/return UI, keyboard and shortcut notation, logic and assignment-style notation (maps to left), technical documentation, form wizards, and any interface indicating left direction or from-bar semantics.
Named and numeric HTML references (&mapstoleft;, &#8612;, &#x21A4;) go in markup. The CSS escape \21A4 is used in stylesheets, typically on ::before or ::after. Both render ↤.
Yes. &mapstoleft; is the named HTML entity for U+21A4. You can also use &#8612; (decimal) or &#x21A4; (hex) and \21A4 in CSS—all equivalent in modern browsers.

Explore More HTML Entities!

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

All HTML Entities →

About the author

Mari Selvan M P
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

Left Arrow Above Tilde Operator (⥳) Left Arrow Bar Black Diamond