Diagonal arrows: north east, south east and neighbours
The four diagonal arrows point north west, north east, south east and south west, at U+2196 through U+2199. None of them has a named HTML entity.
At a glance
- Character
- ↖ ↗ ↘ ↙
- Named entity
- None. Use the numeric references.
- Decimal reference
- ↖ ↗ ↘ ↙
- Hex reference
- ↖ ↗ ↘ ↙
- Unicode code point
- U+2196, U+2197, U+2198, U+2199
- Unicode name
- NORTH WEST, NORTH EAST, SOUTH EAST and SOUTH WEST ARROW
- In the entity reference
- Arrows
In detail
The four diagonals were added for compass directions rather than for user interfaces, which is why their Unicode names use north and east instead of up and right, and why none of them received a named entity. The reference tool lists them with their hex references in the name column for exactly that reason: there is no name to show.
The north east arrow has become the standard mark for a link that opens in a new tab or leaves the site. It works well as a convention and badly as the only signal, because the glyph tells a sighted user that something unusual will happen and tells nobody else. The behaviour belongs in the link text or in a visually hidden note, with the arrow hidden from assistive technology.
The south east arrow appears in resize handles and in expand controls, and the north west arrow in collapse or restore controls. All three are small enough at body text size that their diagonal stroke can disappear into a low contrast background, so give them the same contrast treatment you would give an icon rather than treating them as text.
Font coverage is the weak point. These characters sit in the Arrows block and are missing from a fair number of display and brand fonts, and an arrow that falls back to a system family in the middle of a styled button is more noticeable than a missing punctuation mark. Test them in the actual font stack before committing to them.
Examples
<a href="https://example.com" target="_blank" rel="noopener">
Read the specification
<span aria-hidden="true">↗</span>
<span class="sr-only">(opens in a new tab)</span>
</a><p>north west ↖ north east ↗</p>
<p>south west ↙ south east ↘</p>Things that catch people out
- There are no named entities for these. Guesses like ↗ render as literal text.
- An external link marked only by the arrow gives no warning to anyone who cannot see it. Say it in text as well.
- Diagonal strokes are thinner on screen than horizontal ones at the same weight, so these arrows need slightly more contrast than the text beside them to read at the same distance.
Try it: HTML Entity Reference
Search 152 entities across 9 categories, switch the copy format between the character, the name, the decimal form and the hex form, and copy in one click.
HTML Entity Reference
LOCAL · Browser-OnlySearchable reference of 150+ HTML entities with one-click copy in any format
152 entities across 9 categories
Commonly Used
→Arrows(13)
±Math(35)
$Currency(8)
…Punctuation(21)
©Symbols(24)
πGreek(30)
½Fractions(6)
●Geometric(7)
æLatin Special(8)
Click any entity card to copy it in your chosen format. All data is embedded in the page and works offline.
Related HTML entities
All html entities →Right arrow (→) in HTML
The rightwards arrow at U+2192, its entity forms, using it in a call to action without confusing a screen reader, and how it behaves in right to left text.
Up and down arrows (↑ and ↓) in HTML
The upwards and downwards arrows at U+2191 and U+2193, their entity forms, their use as sort indicators, and why aria-sort does the real work.
Double arrows (⇐, ⇒, ⇔) in HTML
The double stroke arrows at U+21D0, U+21D2 and U+21D4, their case sensitive entity names, and what implication and equivalence actually assert.
Alpha (α) in HTML
The Greek letter alpha at U+0391 and U+03B1, its entity forms, its meanings in transparency and statistics, and the Latin A it is indistinguishable from.
Beta (β) in HTML
The Greek letter beta at U+0392 and U+03B2, its entity forms, its meanings in regression and finance, and the German eszett it is mistaken for.
Gamma (γ) in HTML
The Greek letter gamma at U+0393 and U+03B3, its entity forms, what gamma correction actually encodes, and the gamma function that shares the letter.
Tools for this
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview
- Unicode Character Finder Free online unicode character finder - search and copy special Unicode characters and symbols