Up and Down Triangle Characters in HTML: Unicode Symbols and Entities

By the end of this page, you will understand how HTML displays triangle symbols using Unicode characters, which up and down triangle characters are commonly used, how to include them in HTML with entities or numeric codes, and when to use text symbols versus CSS for toggle indicators.

HTML itself does not define a special “triangle” drawing system. When you place a symbol on a page, you are usually using a Unicode character that the browser renders with the current font.

That means when people ask for an “HTML character” such as an up or down triangle, the real answer is usually a Unicode symbol that can be inserted into HTML in one of these ways:

• directly as a character
• as a numeric character reference like ▲
• sometimes as a named HTML entity, if one exists

For triangle toggle indicators, the most common characters are:

• ▲ up-pointing filled triangle
• ▼ down-pointing filled triangle
• △ up-pointing hollow triangle
• ▽ down-pointing hollow triangle

These are often better than ↑ and ↓ when you want a compact visual indicator without a stem.

This matters in real programming because small UI indicators appear everywhere:

• expandable sections
• sort direction in tables
• dropdown toggles
• accordion headers
• navigation menus

A key detail: ASCII does not include triangle symbols. ASCII is a small older character set with basic Latin letters, digits, and punctuation. Triangles come from Unicode, not ASCII.

Think of HTML text like choosing characters from a giant symbol library.

• ASCII is a tiny drawer with simple characters like A, 1, ?, and >.
• Unicode is the full warehouse, containing arrows, triangles, currency symbols, emoji, and many writing systems.

So if you want a triangle-only arrowhead, you are not “drawing” one with HTML. You are picking the right symbol from the Unicode warehouse and placing it into your page.

Common triangle characters

Here are some useful Unicode triangle symbols for HTML:

Using the character directly

<button>Show more ▲</button>
<button>Hide ▼</button>

If your file is saved as UTF-8, this is usually the easiest option.

Using numeric character references

<button>Show more &#9650;</button>
<button>Hide &#9660;</button>

This is useful if you prefer explicit numeric codes.

Simple toggle example

<p>Collapsed ▼</p>
<p>Expanded ▲</p>

Example with JavaScript toggle

<button id="toggleBtn">Details ▼</button>

<script>
  const button = document.getElementById("toggleBtn");
  let expanded = false;

  button.addEventListener("click", () => {
    expanded = !expanded;
    button.textContent = expanded ? "Details ▲" : "Details ▼";
  });
</script>

This updates the displayed triangle based on the button state.

Consider this example:

<button id="toggleBtn">Menu ▼</button>

<script>
  const button = document.getElementById("toggleBtn");
  let open = false;

  button.addEventListener("click", () => {
    open = !open;

    if (open) {
      button.textContent = "Menu ▲";
    } else {
      button.textContent = "Menu ▼";
    }
  });
</script>

Step by step:

1. The page first shows the button text as Menu ▼.
2. JavaScript finds the button using getElementById("toggleBtn").
3. The variable open starts as false, meaning the menu is closed.
4. When the user clicks the button, the event listener runs.
5. open = !open flips the value:
   • false becomes true
   • true becomes false
6. If open is now true, the button text becomes Menu ▲.
7. Otherwise, it becomes Menu ▼.

This is a common pattern: store a state value, then show a different Unicode symbol depending on that state.

Triangle characters are commonly used as lightweight UI indicators.

Common examples

• Accordion sections: FAQ ▼ becomes FAQ ▲ when opened
• Dropdown menus: a button shows a down triangle before the menu opens
• Sortable table columns: Price ▲ for ascending, Price ▼ for descending
• Tree views: folders or nested items use triangles to show collapsed or expanded state
• Filter panels: sidebars often use a triangle to indicate whether a section is expanded

Why developers use text symbols

• quick to implement
• no image files needed
• works well in simple interfaces
• easy to update with JavaScript
• often good enough for internal tools and dashboards

For very polished UI, teams may instead use SVG icons or CSS-based shapes for more styling control.

In real projects, developers often use triangle characters in small reusable UI components.

Common patterns

1. State-based rendering

A component shows one symbol for closed and another for open:

const icon = isOpen ? "▲" : "▼";

2. Guarding against unclear meaning

A triangle alone may not be accessible or obvious, so developers often pair it with text:

<button>Show details ▼</button>

This is clearer than showing only ▼.

3. Conditional formatting in tables

Sorting UIs often switch symbols:

if (sortDirection === "asc") {
  label = "Price ▲";
} else {
  label = "Price ▼";
}

4. Fallback to CSS or SVG

If font rendering looks inconsistent, teams may replace Unicode triangles with:

• inline SVG icons
• icon libraries
• CSS borders that create triangles

5. Accessibility support

In production code, developers often add ARIA attributes:

<button aria-expanded="false">Sections ▼</button>

Then update both the text and the aria-expanded value when the section opens.

1. Expecting ASCII to contain triangle symbols

ASCII does not include ▲ or ▼.

Broken assumption:

ASCII has a triangle character for this

Correct idea:

• use Unicode symbols
• insert them directly or with numeric references

2. Using arrow entities when you really want triangles

Broken choice:

&uarr;  <!-- ↑ -->
&darr;  <!-- ↓ -->

These are arrows with stems, not triangle-only indicators.

Use triangles instead:

&#9650;  <!-- ▲ -->
&#9660;  <!-- ▼ -->

3. Assuming every symbol has a named entity

Not every Unicode character has a common named HTML entity.

Safer option:

▲
▼

Numeric references are broadly reliable.

4. Forgetting font differences

The same Unicode triangle can look slightly different across fonts and operating systems.

How to avoid problems:

• test in your target browsers
• use a consistent font
• switch to SVG if exact appearance matters

5. Using symbols without accessible labels

Broken example:

<button>▼</button>

This may be unclear to users.

Better:

<button aria-label="Expand section">▼</button>

Or better still:

<button>Expand section ▼</button>

Triangles vs arrows

Direct character vs numeric reference

Unicode symbol vs CSS triangle vs SVG

If you only need a simple text-based toggle, Unicode triangles are usually the best choice.

Quick reference

Filled triangles

• Up: ▲ → ▲ → U+25B2
• Down: ▼ → ▼ → U+25BC

Hollow triangles

• Up: △ → △ → U+25B3
• Down: ▽ → ▽ → U+25BD

Example

<span>▲</span>
<span>▼</span>
<span>&#9650;</span>
<span>&#9660;</span>

Rules to remember

• ASCII does not include triangle symbols
• These symbols come from Unicode
• Numeric references work well in HTML
• Font choice can affect appearance
• Use text labels or ARIA attributes for accessibility

Good default choices

For toggles and sort indicators:

▲ ▼

For outlined versions:

△ ▽

What is the HTML character for an up triangle?

Use the Unicode character ▲ or the numeric HTML reference ▲.

What is the HTML character for a down triangle?

Use the Unicode character ▼ or the numeric HTML reference ▼.

Are triangle symbols part of ASCII?

No. Triangle symbols are part of Unicode, not ASCII.

Can I use named entities for these triangles?

Sometimes named entities exist for some symbols, but numeric references like ▲ and ▼ are the safer choice.

Why do my triangle symbols look different on another device?

Browsers render Unicode using available fonts, so the shape can vary slightly between systems.

Should I use Unicode triangles or CSS icons for a toggle?

Use Unicode triangles for simple text-based UI. Use CSS or SVG if you need precise styling and consistency.

Is ▲ better than ↑ for expand/collapse?

Usually yes. ▲ is more compact and looks like a toggle indicator, while ↑ suggests direction or movement.

• Unicode characters — Triangle symbols come from Unicode, not from HTML itself.
• HTML entities — Numeric and named entities are how special characters are written in HTML.
• Character encoding — UTF-8 ensures direct Unicode characters display correctly.
• Accessibility (ARIA) — Toggle indicators should often include labels and attributes like aria-expanded.
• CSS shapes — CSS borders can create triangles when text symbols are not flexible enough.
• SVG icons — SVG is a common alternative when consistent icon appearance matters.
• JavaScript DOM manipulation — Toggle controls often update triangle symbols dynamically with JavaScript.