HTML Entity for Up White Arrow (⇧)

Beginner

5 min read

Updated: Sep 2026

1 example

Unicode U+21E7

HTML Entity for Up White Arrow (U+21E7) tutorial illustration

Definition

What Is the Up White Arrow Entity?

Up White Arrow (⇧) is the Unicode character at U+21E7 (UPWARDS WHITE ARROW) in the Arrows block. It is a hollow-style upward arrow used for navigation, scroll-to-top UI, and as the common Shift key symbol.

Remember

Character     ⇧
Unicode       U+21E7
Hex entity    &#x21E7;
Decimal       &#8679;
CSS escape    \21E7
Named entity  (none)
Also known as Shift key symbol

All of these produce the same glyph: ⇧. For a filled everyday up arrow, prefer ↑ (U+2191).

Reference

Quick Reference

One table for every form you will actually use.

Form	Code	Where it goes
Direct character	`⇧`	HTML text (UTF-8)
Hex entity	`⇧`	HTML markup
Decimal entity	`⇧`	HTML markup
CSS escape	`\21E7`	Stylesheet `content`
Named entity	—	Not defined in HTML5

When to Use Which

Situation	Use
Need the white / hollow up arrow	Type the character, or `⇧` / `⇧`
Shift key in shortcut docs	`⇧` (e.g. `⇧ + A`)
Generated text via `::before` / `::after`	`content: "\21E7"`
Filled everyday up arrow	Use `↑` (U+2191)
White down arrow	Use ⇩ (U+21E9)

See it

Live Preview

This white arrow in common UI and keyboard contexts.

Top Top ⇧

Large glyph ⇧

Shift key ⇧ + A

Compared ⇧ white ↑ filled ⇩ down

With entities Hex: ⇧ | Decimal: ⇧

Code

Complete HTML Example

One page that shows this symbol with hex, decimal, CSS, and a typed character. Use View Output or open the live editor.

Hex + Decimal + CSS + Typed

All four ways to produce ⇧ in a single document (plus Top and Shift examples).

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Up White Arrow</title>
  <style>
    #point::after {
      content: "\21E7";
    }
  </style>
</head>
<body>
  <p>Using Hex Code: &#x21E7;</p>
  <p>Using HTML Code: &#8679;</p>
  <p id="point">Using CSS Entity: </p>
  <p>Typed directly: &#x21E7;</p>
  <p>Top &#x21E7;</p>
  <p>Shift &#x21E7; + A</p>
</body>
</html>

Try It Yourself

How It Works

1. Hex: U+21E7 → ⇧ in HTML. The browser turns it into the glyph.

2. Decimal: same code point as 8679 → ⇧. Same result as hex.

3. CSS: use \21E7 in content (not an HTML entity). #point::after appends that glyph after the paragraph text.

4. Typed / labels: fine in UTF-8 pages. Top ⇧ and Shift ⇧ + A show common UI and keyboard patterns.

Pitfalls & Tips

Common mistakes when working with this arrow.

Named?

No named entity

HTML5 does not define a named entity for U+21E7. Use numeric forms. ↑ is the filled arrow, not this one.

Look-alikes

White ≠ filled ≠ down

U+21E7 is white/hollow up. U+2191 (↑) is filled. U+21E9 is white down.

Meaning

Context changes the reading

In UI it often means “up.” In shortcut docs it often means Shift. Label the meaning nearby for readers.

CSS vs HTML

Do not mix escapes

\21E7 belongs in CSS. ⇧ / ⇧ belong in HTML.

A11y

Do not rely on the icon alone

Screen readers may not name this arrow clearly. Keep labels like “Back to top” or “Shift” next to the glyph.

Semicolon

End references

Always finish with ; — write ⇧, not &#8679.

Compatibility

Browser Support

Up White Arrow (U+21E7) and its numeric entity forms (⇧, ⇧, CSS \\21E7) are supported in all mainstream browsers. Glyph shape depends on the font.

✓ Universal support

Up White Arrow

Encode with hex, decimal, or CSS escape — or paste the character in UTF-8 HTML.

100% Browser coverage

Google Chrome Supported

Yes

Microsoft Edge Supported

Yes

Mozilla Firefox Supported

Yes

Apple Safari Supported

Yes

Opera Supported

Yes

Internet Explorer All versions

Yes

U+21E7 / entities Full support

Bottom line: Use ⇧ or ⇧ for the Unicode glyph, and \\21E7 only inside CSS content. Prefer ↑ for a simple filled up arrow.

Remember

Key Takeaways

Unicode: this symbol is U+21E7 (decimal 8679).
HTML: use ⇧ or ⇧ when you need an entity.
CSS: use \21E7 inside content for generated text.
Watch out: white U+21E7 ≠ filled ↑ ≠ white down U+21E9.

One line: U+21E7 → ⇧ / ⇧ / CSS \21E7.

Frequently Asked Questions

How do I display Up White Arrow in HTML?

Use ⇧ (hex), ⇧ (decimal), or the CSS escape \21E7 in the content property. All render U+21E7. You can also paste the character directly when your file is UTF-8.

What is the Unicode value for Up White Arrow?

U+21E7 (hex 21E7, decimal 8679). Unicode names it UPWARDS WHITE ARROW. It belongs to the Arrows block (U+2190–U+21FF).

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

No. HTML5 does not define a named entity for this character. Use numeric references like ⇧ or ⇧. For a filled up arrow, use ↑ (U+2191).

Is this the Shift key symbol?

Yes. U+21E7 is commonly used in keyboard shortcut documentation to represent the Shift key (for example Shift + A).

What is the difference between HTML code and CSS entity for U+21E7?

HTML entities (⇧ or ⇧) go in markup. The CSS escape \21E7 is used in stylesheets (usually in the content property of ::before/::after). Both render the same glyph.

When should I use this symbol?

Use it for Shift-key docs, hollow-style up navigation, or scroll-to-top UI. Prefer ↑ for a simple filled up arrow. Always pair the glyph with clear labels for accessibility.

Did you know?

This arrow is Unicode U+21E7 (decimal 8679) — official name UPWARDS WHITE ARROW in the Arrows block. HTML5 has no named entity. It is widely recognized as the Shift key symbol and differs from filled ↑ (U+2191).

Next: Up White Arrow Bar

Learn the HTML entity for Up White Arrow Bar — next in this sequence.

Continue tutorial →

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

HTML Entity | Up Two Headed Arrow Small Circle HTML Entity | Up White Arrow Bar