HTML Symbols and Emojis

HTML symbols like ©, →, € and ≤ can be added with named entities, numeric codes or by typing them directly. Learn how to use HTML symbols and emojis, and how to make emojis accessible.

How to add symbols in HTML

You met character entities like <, & and © in the lesson about comments and special characters. This lesson goes further: maths signs, arrows, currency, numeric codes and emojis.

There are three ways to put a symbol on a page:

1. Type it directly, like €. This works because your page uses <meta charset="utf-8">, which supports almost every character in the world.
2. Use a named entity, like €. It starts with & and ends with ;.
3. Use a numeric code, like €. Every character has a number in Unicode, the world's big list of characters.

All three show exactly the same €. Named entities are handy when a symbol is hard to type on your keyboard, and they are easy to read in the code.

Common HTML symbol entities

Here are useful symbols grouped by type.

Symbol	Named entity	Numeric code	Meaning
€	€	€	Euro
£	£	£	Pound
¥	¥	¥	Yen
¢	¢	¢	Cent
×	×	×	Multiply
÷	÷	÷	Divide
≤	≤	≤	Less than or equal
≥	≥	≥	Greater than or equal
≠	≠	≠	Not equal
±	±	±	Plus or minus
°	°	°	Degree
→	→	→	Right arrow
←	←	←	Left arrow
↑	↑	↑	Up arrow
↓	↓	↓	Down arrow
™	™	™	Trademark
®	®	®	Registered
—	—	—	Long dash

Here they are in a realistic product page:

<h2>Travel Mug &trade;</h2>
<p>Price: &euro;14.99 (about &pound;12.80)</p>
<p>Keeps drinks hot for 6 hours at 20&deg;C room temperature.</p>
<p>Size: 8 &times; 18 cm. Weight: 300 g &plusmn; 5 g.</p>
<p>Orders &ge; &euro;30 ship free.</p>
<p><a href="checkout.html">Go to checkout &rarr;</a></p>

The browser shows "Travel Mug ™", the euro and pound signs, "20°C", "8 × 18 cm", "300 g ± 5 g", "Orders ≥ €30" and a link with an arrow at the end.

Common mistake: Using the letter x for multiplication, like "8 x 18 cm". It looks almost right, but × gives the real multiply sign, and screen readers read it as "times".

Numeric codes: decimal and hexadecimal

Not every symbol has a name, but every symbol has a number. You can write the number in two ways:

• Decimal: &# + number + ;, like ★ for ★.
• Hexadecimal: &#x + hex number + ;, like ★ for the same ★.

Unicode charts list characters with codes like "U+2605". The part after "U+" is the hex number, so you write ★.

<p>Rating: &#9733;&#9733;&#9733;&#9733;&#9734; (4 out of 5)</p>
<p>Done &#x2713; &nbsp; Not done &#x2717;</p>
<p>Card suits: &#9824; &#9829; &#9830; &#9827;</p>

You will see four filled stars and one empty star, a tick and a cross, and the four playing card symbols.

How to use emojis in HTML

Emojis are just Unicode characters, like letters. So with UTF-8 you can type or paste them straight into your HTML. On Windows press Win + . and on a Mac press Ctrl + Cmd + Space to open the emoji picker. You can also use numeric codes: 😀 is 😀 or 😀.

<h2>Weekend Weather 🌤️</h2>
<p>Saturday: sunny ☀️ 24&deg;C</p>
<p>Sunday: rain 🌧️ 17&deg;C</p>
<p>Happy face: &#x1F600;</p>

You will see the emojis in color. Each device draws emojis in its own style, so an emoji may look a little different on an iPhone, an Android phone and Windows. Emojis are text, so they also grow with font-size.

Note: Emojis only work if the page is saved and served as UTF-8. Always keep <meta charset="utf-8"> as the first thing in your <head>, and save your file as UTF-8 in your editor (VS Code does this by default).

Making emojis accessible

Screen readers read emojis out loud using their official name. "🔥🔥🔥 Hot deals" may be read as "fire fire fire Hot deals". Sometimes that is fine, but sometimes the name is confusing or the emoji is just decoration.

• If the emoji has meaning, wrap it in a <span> with role="img" and a clear aria-label. The label replaces the emoji name.
• If the emoji is only decoration, hide it from screen readers with aria-hidden="true".

<p><span role="img" aria-label="Vegan">🌱</span> Lentil soup &mdash; &pound;5.50</p>
<p><span role="img" aria-label="Spicy">🌶️</span> Chilli noodles &mdash; &pound;7.00</p>
<h2><span aria-hidden="true">🎉</span> Grand opening this Friday!</h2>

A screen reader says "Vegan, Lentil soup", instead of "seedling", and "Spicy" instead of "hot pepper". The party emoji in the heading is skipped, because it adds nothing to the meaning.

Tip: Don't replace words with emojis in important text, like "Click 👉 to pay". Use real words and add emojis as a friendly extra.

Practice exercise

Create a small recipe card for pancakes. Show the oven temperature with °, the price with a currency symbol, the cooking time with an arrow like "Mix → Rest → Cook", a star rating with numeric codes, and two emojis: one meaningful (like "vegetarian") with role="img" and aria-label, and one decorative with aria-hidden="true".

Hint: ★ is ★ and ☆ is ☆.

Key takeaways

• You can add a symbol by typing it, with a named entity like €, or with a numeric code like €.
• Hex codes use &#x, so U+2605 becomes ★.
• Emojis are normal Unicode characters and work with UTF-8.
• Give meaningful emojis role="img" and an aria-label; hide decorative ones with aria-hidden="true".
• Use real symbols like × instead of look-alike letters.