HTML Symbols

Badar KhalilUpdated September 27, 2026 1 min read

HTML Symbols

Focus Keyword: html symbols | Trending Keyword: html symbol codes reference

HTML symbols cover a wide range of characters beyond basic reserved characters — currency signs, mathematical operators, arrows, and dingbats. Developers frequently search for an "html symbol codes reference" when building pricing tables, math content, or UI icons without relying on image files or icon fonts.

Currency Symbols

Symbol	Name	Entity	Numeric
&dollar;	Dollar	&dollar;	$
€	Euro	€	€
£	Pound	£	£
¥	Yen	¥	¥
¢	Cent	¢	¢

Arrow Symbols

Symbol	Name	Entity	Numeric
←	Left arrow	←	←
↑	Up arrow	↑	↑
→	Right arrow	→	→
↓	Down arrow	↓	↓

Mathematical Symbols

Symbol	Name	Entity	Numeric
±	Plus-minus	±	±
×	Multiplication	×	×
÷	Division	÷	÷
≠	Not equal	≠	≠
∞	Infinity	∞	∞

Dingbats & Misc Symbols

Symbol	Name	Entity	Numeric
♥	Heart	&hearts;	♥
&star;	Star	&star;	★
&check;	Check mark	&check;	✓
©	Copyright	©	©
®	Registered	®	®
™	Trademark	™	™

Using Symbols Instead of Icon Fonts

For simple UI needs, native HTML symbols load instantly with zero extra HTTP requests, render at any size without pixelation, and inherit the surrounding text color automatically — a lightweight alternative to icon libraries for basic use cases like arrows, checkmarks, and stars.

Best Practices

Prefer named entities (€) over raw numeric codes for readability in source code.
Add an aria-hidden="true" attribute when a symbol is purely decorative, so screen readers skip it.
For a symbol used as meaningful content (e.g. a currency sign in a price), keep it readable to screen readers.

Try it Yourself HTML

<!-- Pricing card using currency & math symbols -->
<div class="price-card">
  <p>Basic Plan: &dollar;9<span>/mo</span></p>
  <p>Save 20&percnt; on annual billing</p>
  <p>5 &times; more storage than the free tier</p>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<!-- Navigation arrows built with pure HTML symbols -->
<button aria-label="Previous">&larr;</button>
<button aria-label="Next">&rarr;</button>

<!-- Rating stars -->
<p>&star;&star;&star;&star;&star; (5.0)</p>

<!-- Feature checklist -->
<ul>
  <li>&check; Free shipping</li>
  <li>&check; 24/7 support</li>
</ul>

Output

Press Run to execute.

Try it Yourself HTML

<!-- Trademark and registered symbols in a footer -->
<footer>
  <p>Acme Software&trade; &mdash; &copy; 2026 Acme Corp. All rights reserved.</p>
  <p>Windows&reg; is a registered trademark of Microsoft Corporation.</p>
</footer>

Output

Press Run to execute.

Exercise: Build a Pricing Card with SymbolsHTML

Create a pricing card that shows a Euro price, a percentage discount, and a right arrow button, using proper HTML symbol entities instead of raw characters.

Try it Yourself HTML

<div class="price-card">
  <!-- add your symbols here -->
</div>

Output

Press Run to execute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?