Question
I want to display a simple triangle pointing up or down in HTML, similar to a toggle indicator.
I found the arrow characters ↑ (↑) and ↓ (↓), but those include a stem. I only want the triangular arrowhead shape.
Which HTML or ASCII characters can be used for an upward-pointing or downward-pointing triangle in HTML?
Short Answer
By the end of this page, you will understand how HTML displays triangle symbols, why these characters come from Unicode rather than ASCII, and which symbols are commonly used for up/down toggle indicators. You will also see how to use them directly in HTML, as entities, and inside small interactive UI examples.
Concept
In HTML, visible symbols such as arrows, triangles, check marks, and currency signs are usually Unicode characters. HTML itself does not define most symbols; it simply displays text characters that come from a character set.
A common beginner misunderstanding is to ask for an “HTML character” or an “ASCII character” when the symbol is actually a Unicode symbol rendered in HTML.
For up/down triangle indicators, the most commonly used characters are:
▲for up▼for down▴for a smaller up triangle▾for a smaller down triangle△for an outlined up triangle▽for an outlined down triangle
These are useful for:
- collapsible menus
- sort direction indicators
- dropdown controls
- accordion UI labels
- status changes
Why this matters in real programming:
- You often need lightweight UI indicators without loading images or icons.
- Text-based symbols are fast, simple, and easy to style with CSS.
- They work well in buttons, links, tables, and dashboards.
One important detail: ASCII does not include triangle symbols. ASCII is a small older character set with only basic English letters, digits, punctuation, and control characters. Triangles come from Unicode.
Mental Model
Think of Unicode as a giant library of symbols, and HTML as a page that can display books from that library.
- ASCII is like a very small shelf with only basic characters.
- Unicode is the full library with arrows, triangles, emojis, and symbols from many languages.
- HTML is not the symbol itself; it is just the place where you show the symbol.
So if you want a triangle in HTML, you are really choosing a Unicode character that the browser can render.
Syntax and Examples
Common triangle characters
Here are some useful up/down triangle symbols:
| Symbol | Meaning | Numeric HTML form |
|---|---|---|
▲ | Black up-pointing triangle | ▲ |
▼ | Black down-pointing triangle | ▼ |
△ | White up-pointing triangle | △ |
▽ | White down-pointing triangle | ▽ |
▴ | Small up-pointing triangle |
Step by Step Execution
Consider this HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Triangle Example</title>
</head>
<body>
<button id="toggleBtn">More ▼</button>
</body>
</html>
Step by step:
- The browser reads the HTML document.
<meta charset="UTF-8">tells the browser to interpret the file as UTF-8 text.- The button text contains the Unicode character
▼. - The browser looks up that Unicode character in the current font.
- If the font supports it, the triangle is rendered on screen.
- The user sees
More ▼as the button label.
If you instead write this:
<button>More
Real World Use Cases
Triangle symbols are commonly used in real interfaces:
Dropdown menus
<button>Options ▼</button>
This suggests that clicking will open a menu.
Accordion sections
<h3>FAQ ▲</h3>
The triangle can indicate expanded or collapsed state.
Table sorting
<th>Price ▲</th>
An up triangle often means ascending sort, and a down triangle means descending sort.
Expand/collapse trees
File explorers and navigation trees often use small triangles to show whether a section is open.
Status dashboards
Triangles can indicate trend direction:
▲increasing▼decreasing
These symbols are lightweight alternatives to images or icon libraries.
Real Codebase Usage
In real projects, developers often use triangle characters in a few common ways.
1. Inline text indicators
Simple labels often include the triangle directly:
<button>Show more ▼</button>
This is common for small apps and prototypes.
2. Toggled by JavaScript
A script updates the symbol when state changes:
<button id="toggleBtn">Show details ▼</button>
<script>
const button = document.getElementById('toggleBtn');
let open = false;
button.addEventListener('click', () => {
open = !open;
button.textContent = open ? 'Hide details ▲' : 'Show details ▼';
});
</script>
3. Kept separate from the text
Developers sometimes separate the label from the icon for easier styling:
Common Mistakes
Mistake 1: Assuming ASCII includes triangles
ASCII does not contain triangle symbols.
Broken idea:
<!-- There is no ASCII triangle character -->
Use Unicode instead:
<button>Open ▼</button>
Mistake 2: Confusing arrows with triangles
These are not the same:
↑ ↓
These are arrows with stems.
If you want only the head shape, use:
▲ ▼
Mistake 3: Forgetting character encoding
Without proper encoding, symbols may render incorrectly.
Safer setup:
<meta charset="UTF-8">
Mistake 4: Using the wrong triangle variant
Some symbols are filled, some are outlined, and some are smaller.
Example:
▲ ▼ △ ▽ ▴ ▾
Comparisons
Triangles vs arrows
| Character type | Example | Best use |
|---|---|---|
| Arrow with stem | ↑, ↓ | Direction or movement |
| Filled triangle | ▲, ▼ | Toggle, expand/collapse, sort state |
| Outlined triangle | △, ▽ | Lighter visual style |
| Small triangle | ▴, ▾ | Compact UI elements |
Direct character vs numeric entity
| Approach |
|---|
Cheat Sheet
Quick reference
Common symbols
- Up triangle:
▲or▲ - Down triangle:
▼or▼ - Outlined up triangle:
△or△ - Outlined down triangle:
▽or▽ - Small up triangle:
▴ - Small down triangle:
▾
Important rule
- ASCII does not include triangle symbols
- These are Unicode characters displayed in HTML
Best practice
<meta charset="UTF-8">
Simple example
<button>Expand ▼</button>
<button>Collapse ▲
FAQ
What is the HTML character for an up triangle?
A common choice is ▲, which can also be written as ▲ in HTML.
What is the HTML character for a down triangle?
A common choice is ▼, which can also be written as ▼.
Are triangle symbols part of ASCII?
No. Triangle symbols are part of Unicode, not ASCII.
Should I use the symbol directly or as an entity?
If your page uses UTF-8, using the symbol directly is usually simplest. Numeric entities like ▲ also work well.
Why does my triangle not display correctly?
Check that your document uses UTF-8 and that the font supports the symbol:
<meta charset="UTF-8">
What is better for a toggle: arrow or triangle?
Triangles like ▲ and ▼ are usually better for expand/collapse or dropdown indicators. Arrows like ↑ and ↓ suggest movement or direction.
Can I use CSS instead of text characters?
Mini Project
Description
Build a small expandable section that uses triangle characters to show whether content is open or closed. This demonstrates how Unicode symbols can be used in real HTML and updated with JavaScript.
Goal
Create a toggle button that switches between ▼ and ▲ while showing and hiding a content section.
Requirements
- Create a button with a text label and a down triangle.
- Add a content section that is hidden by default.
- When the button is clicked, show or hide the content.
- Update the triangle to
▲when expanded and▼when collapsed. - Use UTF-8 encoding in the HTML document.
Keep learning
Related questions
CSS Font Scaling Relative to Container Size: %, em, rem, vw, and Responsive Text
Learn how CSS font scaling really works and how to make text responsive using %, em, rem, vw, clamp(), and media queries.
CSS Parent Selector Explained: Selecting a Parent <li> from an <a>
Learn whether CSS has a parent selector, how :has() works, and practical alternatives for styling a parent li from a child anchor.
CSS Previous Sibling Selector: What Exists and How to Work Around It
Learn whether CSS has a previous sibling selector, why it does not, and practical ways to style earlier elements using CSS alternatives.