Introduction

If you want an up or down arrow without a stem in HTML, the usual answer is to use triangle Unicode characters such as ▲, ▼, ▴, or ▾. Which one you choose depends on size, weight, font support, and whether you want a filled or outline-like appearance.

Common Unicode Triangle Characters

The most useful triangle symbols for UI indicators are these:

• '▲ up-pointing black triangle'
• '▼ down-pointing black triangle'
• '▴ up-pointing small triangle'
• '▾ down-pointing small triangle'
• '△ up-pointing white triangle'
• '▽ down-pointing white triangle'

You can place them directly in HTML if your file is UTF-8 encoded.

1<span>▲</span>
2<span>▼</span>
3<span>▴</span>
4<span>▾</span>

For many interfaces, the small variants ▴ and ▾ look closer to dropdown indicators than the larger filled triangles.

Use Numeric Character References When Needed

If you prefer entity-style insertion, use numeric references.

1<span>&#9650;</span>
2<span>&#9660;</span>
3<span>&#9652;</span>
4<span>&#9662;</span>

Numeric references are often safer than relying on named entities because they are explicit and widely supported.

Style the Symbols with CSS

These characters are still text, so font, line height, and vertical alignment affect how they look.

<span class="caret">▾</span>

1.caret {
2  font-size: 14px;
3  line-height: 1;
4  vertical-align: middle;
5}

That is usually enough for sort indicators, accordion controls, and menu toggles.

Know When CSS Shapes Are Better

If you need exact size, color, or responsive geometry independent of font rendering, a CSS triangle may be more reliable than a Unicode character.

<span class="triangle-down" aria-hidden="true"></span>

1.triangle-down {
2  display: inline-block;
3  width: 0;
4  height: 0;
5  border-left: 5px solid transparent;
6  border-right: 5px solid transparent;
7  border-top: 7px solid currentColor;
8}

This avoids font differences across platforms, but it is no longer a text character.

Choose the Symbol Based on the UI Job

For text-heavy controls such as sortable table headers, Unicode triangles are often ideal because they inherit font color and align naturally with text. For icon-like controls where exact geometry matters, CSS shapes or SVG may be the better choice.

There is no single best triangle character for every interface. The correct choice is the one that renders clearly in the font stack you are actually shipping.

Accessibility and Semantics

If the triangle is purely decorative, hide it from assistive technology and put the actual meaning in nearby text or ARIA state. If it indicates sort direction or collapse state, the semantic state should come from the control attributes, not from the symbol alone.

A triangle can reinforce state visually, but it should not be the only source of meaning.

Common Pitfalls

• Picking a Unicode symbol without checking how it renders in the real font stack.
• Relying on named entities when numeric references or direct UTF-8 characters would be clearer.
• Using a decorative triangle as the only indicator of UI state.
• Expecting text symbols to have pixel-perfect geometry across browsers and platforms.
• Reaching for Unicode when CSS or SVG would give more consistent icon control.

Summary

• Common HTML triangle characters include ▲, ▼, ▴, ▾, △, and ▽.
• Direct UTF-8 characters or numeric references both work well.
• CSS can style text triangles, but font rendering still affects appearance.
• Use CSS triangles or SVG when geometry needs tighter control.
• Treat the symbol as visual support, not as the only source of interface meaning.