Labs ICT

HTML Symbols

← HTML Entities
HTML Emojis →

HTML symbols are special characters that can be displayed using HTML entities. These symbols include mathematical symbols, currency signs, arrows, geometric shapes, and various decorative characters. Understanding how to use symbols in HTML is essential for creating rich, visually appealing content that goes beyond standard text and punctuation.

Mathematical Symbols

Mathematical symbols are used to represent various mathematical concepts and operations in HTML.

Basic Mathematical Operations

Here are some common mathematical symbols:

<!-- Basic operations -->
<p>Plus: + or &plus;</p>           <!-- + or + -->
<p>Minus: &minus;</p>               <!-- − -->
<p>Multiplication: &times;</p>        <!-- × -->
<p>Division: &divide;</p>            <!-- Ă· -->
<p>Equals: = or &equals;</p>         <!-- = or = -->

<!-- Comparison operators -->
<p>Not equal: &ne;</p>               <!-- ≠ -->
<p>Less than: &lt;</p>                 <!-- < -->
<p>Greater than: &gt;</p>              <!-- > -->
<p>Less than or equal: &le;</p>        <!-- ≀ -->
<p>Greater than or equal: &ge;</p>     <!-- ≄ -->
<p>Approximately: &asymp;</p>           <!-- ≈ -->
Try it Yourself →

Advanced Mathematical Symbols

In addition to basic operations, HTML supports a wide range of advanced mathematical symbols:

<!-- Advanced symbols -->
<p>Infinity: &infin;</p>             <!-- ∞ -->
<p>Summation: &sum;</p>               <!-- ÎŁ -->
<p>Product: &prod;</p>               <!-- ∏ -->
<p>Integral: &int;</p>               <!-- ∫ -->
<p>Square root: &radic;</p>          <!-- √ -->
<p>Partial derivative: &part;</p>    <!-- ∂ -->
<p>Nabla: &nabla;</p>                 <!-- ∇ -->
<p>There exists: &exist;</p>          <!-- ∃ -->
<p>For all: &forall;</p>              <!-- ∀ -->
Try it Yourself →

Greek Letters

Greek letters are commonly used in mathematics and science to represent variables and constants.

Greek Alphabet

Here are the Greek letters available in HTML:

<!-- Greek letters (lowercase and uppercase) -->
<p>Alpha: &alpha; &Alpha;</p>        <!-- α Α -->
<p>Beta: &beta; &Beta;</p>            <!-- ÎČ Î’ -->
<p>Gamma: &gamma; &Gamma;</p>          <!-- γ Γ -->
<p>Delta: &delta; &Delta;</p>          <!-- ή Δ -->
<p>Epsilon: &epsilon; &Epsilon;</p>    <!-- Δ Ε -->
<p>Zeta: &zeta; &Zeta;</p>            <!-- ζ Ζ -->
<p>Eta: &eta; &Eta;</p>                <!-- η Η -->
<p>Theta: &theta; &Theta;</p>          <!-- Ξ Θ -->
<p>Iota: &iota; &Iota;</p>            <!-- Îč Ι -->
<p>Kappa: &kappa; &Kappa;</p>          <!-- Îș Κ -->
<p>Lambda: &lambda; &Lambda;</p>        <!-- λ Λ -->
<p>Mu: &mu; &Mu;</p>                  <!-- ÎŒ Μ -->
<p>Nu: &nu; &Nu;</p>                  <!-- Μ Ν -->
<p>Xi: &xi; &Xi;</p>                  <!-- Ο Ξ -->
<p>Omicron: &omicron; &Omicron;</p>  <!-- ο Ο -->
<p>Pi: &pi; &Pi;</p>                  <!-- π Π -->
<p>Rho: &rho; &Rho;</p>                <!-- ρ ÎĄ -->
<p>Sigma: &sigma; &Sigma;</p>          <!-- σ ÎŁ -->
<p>Tau: &tau; &Tau;</p>                <!-- τ ΀ -->
<p>Upsilon: &upsilon; &Upsilon;</p>    <!-- υ ΄ -->
<p>Phi: &phi; &Phi;</p>                <!-- φ Ί -->
<p>Chi: &chi; &Chi;</p>                <!-- χ Χ -->
<p>Psi: &psi; &Psi;</p>                <!-- ψ Κ -->
<p>Omega: &omega; &Omega;</p>          <!-- ω Ω -->
Try it Yourself →

Mathematical Usage Examples

Here are some examples of how these symbols can be used in mathematical expressions:

<!-- Mathematical formulas -->
<p>Area of circle: A = &pi;r&sup2;&sup2;</p>
<p>Euler's identity: e&sup;i;&pi; + 1 = 0</p>
<p>Pythagorean theorem: a&sup2;&sup2; + b&sup2;&sup2; = c&sup2;&sup2;</p>
<p>Summation: &sum;&sub;i=1&sup;n; i&sup2;&sup2;</p>
<p>Integral: &int;&sub;0&sup;&infin; e&sup;-x&sup2;&sup2; dx = &radic;&pi;/2</p>
<p>Limit: lim&sub;x→0&part;f/&part;x = f&apos;(0)</p>
Try it Yourself →

Currency Symbols

Currency symbols are used to represent different monetary units around the world.

Major Currency Symbols

Here are some of the most commonly used currency symbols in HTML:

<!-- Major currencies -->
<p>US Dollar: $ or &dollar;</p>           <!-- $ -->
<p>Euro: &euro;</p>                       <!-- € -->
<p>British Pound: &pound;</p>              <!-- ÂŁ -->
<p>Japanese Yen: &yen;</p>                 <!-- „ -->
<p>Chinese Yuan: &#165;</p>               <!-- „ -->
<p>Indian Rupee: &#8377;</p>               <!-- â‚č -->
<p>Russian Ruble: &#8381;</p>              <!-- ₜ -->
<p>Swiss Franc: &#8355;</p>                <!-- ₣ -->
Try it Yourself →

Cryptocurrency and Other Symbols

In addition to traditional currency symbols, HTML also supports symbols for cryptocurrencies and other financial units:

<!-- Cryptocurrency symbols -->
<p>Bitcoin: &#8383;</p>                 <!-- ₿ -->
<p>Ethereum: &#8368;</p>                 <!-- Ξ -->

<!-- Other currency symbols -->
<p>Cent: &cent;</p>                     <!-- Âą -->
<p>Generic currency: &#8364;</p>        <!-- € -->
<p>Guarani: &#8370;</p>                  <!-- â‚Č -->
<p>Hryvnia: &#8372;</p>                  <!-- ₮ -->
<p>Kip: &#8365;</p>                     <!-- ₭ -->
<p>Tugrik: &#8366;</p>                  <!-- ₼ -->
<p>Won: &#8361;</p>                     <!-- ₩ -->
Try it Yourself →

Arrows and Directional Symbols

Arrows and directional symbols are used to indicate movement or relationships between elements.

Basic Arrows

Here are some common arrow symbols in HTML:

<!-- Simple arrows -->
<p>Left arrow: &larr;</p>                <!-- ← -->
<p>Right arrow: &rarr;</p>               <!-- → -->
<p>Up arrow: &uarr;</p>                  <!-- ↑ -->
<p>Down arrow: &darr;</p>                <!-- ↓ -->
<p>Left-right arrow: &harr;</p>          <!-- ↔ -->
<p>Up-down arrow: &varr;</p>             <!-- ↕ -->
<p>Northwest arrow: &nwarr;</p>        <!-- ↖ -->
<p>Northeast arrow: &nearr;</p>        <!-- ↗ -->
<p>Southwest arrow: &swarr;</p>        <!-- ↙ -->
<p>Southeast arrow: &searr;</p>        <!-- ↘ -->
Try it Yourself →

Advanced Arrows

HTML also includes a variety of advanced arrow symbols for more specific use cases:

<!-- Advanced arrows -->
<p>Long left arrow: &xlarr;</p>          <!-- ⟔ -->
<p>Long right arrow: &xrarr;</p>         <!-- ⟶ -->
<p>Double left arrow: &lArr;</p>          <!-- ⇐ -->
<p>Double right arrow: &rArr;</p>         <!-- ⇒ -->
<p>Double left-right arrow: &hArr;</p>   <!-- ⇔ -->
<p>Leftwards arrow with stroke: &lArr;</p> <!-- ⇐ -->
<p>Rightwards arrow with stroke: &rArr;</p><!-- ⇒ -->
<p>Leftwards double arrow with stroke: &nLArr;</p> <!-- ⇚ -->
<p>Rightwards double arrow with stroke: &nRArr;</p> <!-- ⇛ -->
Try it Yourself →

Geometric Shapes

Geometric shapes are used to create visual elements and icons in HTML.

Basic Shapes

Here are some basic geometric shapes available in HTML:

<!-- Basic geometric shapes -->
<p>Square: &#9633;</p>                 <!-- □ -->
<p>Filled square: &#9632;</p>            <!-- ■ -->
<p>Circle: &#9675;</p>                 <!-- ○ -->
<p>Filled circle: &#9679;</p>            <!-- ● -->
<p>Triangle: &#9651;</p>               <!-- △ -->
<p>Filled triangle: &#9650;</p>          <!-- â–Č -->
<p>Diamond: &#9671;</p>                <!-- ◇ -->
<p>Filled diamond: &#9670;</p>           <!-- ◆ -->
Try it Yourself →

Advanced Shapes

Here are some advanced geometric shapes available in HTML:

<!-- Advanced shapes -->
<p>Pentagon: &#9673;</p>                <!-- ⬟ -->
<p>Hexagon: &#9672;</p>                <!-- ⏹ -->
<p>Star: &#9734;</p>                   <!-- ★ -->
<p>Outlined star: &#9733;</p>          <!-- ☆ -->
<p>Heart: &#9829;</p>                  <!-- ♄ -->
<!-- Outlined heart: &#9825;</p>        <!-- ♡ -->
<p>Club suit: &#9827;</p>               <!-- ♣ -->
<p>Diamond suit: &#9830;</p>            <!-- ♩ -->
<p>Heart suit: &#9829;</p>               <!-- ♄ -->
<p>Spade suit: &#9824;</p>               <!-- ♠ -->
Try it Yourself →

Punctuation and Typographic Symbols

HTML provides a wide range of punctuation and typographic symbols for various use cases.

Quotation Marks

Here are some common quotation marks and related symbols in HTML:

<!-- Quotation marks -->
<p>Left single quote: &lsquo;</p>          <!-- ' -->
<p>Right single quote: &rsquo;</p>         <!-- ' -->
<p>Left double quote: &ldquo;</p>           <!-- " -->
<p>Right double quote: &rdquo;</p>          <!-- " -->
<p>Single low-9 quote: &sbquo;</p>        <!-- ‚ -->
<p>Double low-9 quote: &bdquo;</p>        <!-- „ -->
<p>Prime: &prime;</p>                    <!-- â€Č -->
<p>Double prime: &Prime;</p>              <!-- ″ -->
Try it Yourself →

Dashes and Other Punctuation

Here are some common dashes and other punctuation symbols in HTML:

<!-- Dashes -->
<p>En dash: &ndash;</p>                  <!-- – -->
<p>Em dash: &mdash;</p>                  <!-- — -->
<p>Horizontal bar: &#8213;</p>           <!-- ― -->
<p>Figure dash: &#8210;</p>              <!-- ‒ -->

<!-- Other punctuation -->
<p>Ellipsis: &hellip;</p>                <!-- 
 -->
<p>Interrobang: &#8253;</p>              <!-- “ -->
<p>Irony mark: &#8252;</p>               <!-- “ -->
<p>Reference mark: &#8251;</p>           <!-- ※ -->
<p>Exclamation mark: &excl;</p>         <!-- ! -->
<p>Question mark: &quest;</p>           <!-- ? -->
Try it Yourself →

Scientific and Technical Symbols

Scientific and Technical Symbols are used to represent various scientific and technical concepts in HTML.

Scientific Symbols

Here are some common scientific symbols in HTML:

<!-- Scientific symbols -->
<p>Degree: &deg;</p>                   <!-- ° -->
<p>Minute: &prime;</p>                  <!-- â€Č -->
<p>Second: &Prime;</p>                  <!-- ″ -->
<p>Plus-minus: &plusmn;</p>             <!-- ± -->
<p>Minus-plus: &#8723;</p>              <!-- ∓ -->
<p>Division slash: &#8725;</p>          <!-- ∕ -->
<p>Bullet point: &bull;</p>             <!-- ‱ -->
<p>Middle dot: &#183;</p>               <!-- · -->
Try it Yourself →

Technical Symbols

Here are some common technical symbols in HTML:

<!-- Technical symbols -->
<p>Check mark: &check;</p>              <!-- ✓ -->
<p>Ballot X: &#10007;</p>               <!-- ✗ -->
<p>Heavy check mark: &#10003;</p>       <!-- ✔ -->
<p>Heavy ballot X: &#10008;</p>         <!-- ✘ -->
<p>Asterisk operator: &#8727;</p>        <!-- ∗ -->
<p>Circled asterisk: &#8859;</p>         <!-- ⊛ -->
<p>Lozenge: &#9674;</p>                <!-- ◊ -->
<p>White lozenge: &#9671;</p>           <!-- ◇ -->
Try it Yourself →

Decorative and Miscellaneous Symbols

Decorative and Miscellaneous Symbols are used to add visual interest and convey additional meaning in HTML.

Decorative Symbols

Here are some common decorative symbols in HTML:

<!-- Decorative symbols -->
<p>Floral heart: &#9829;</p>            <!-- ♄ -->
<p>Black heart: &#9829;</p>              <!-- ♄ -->
<p>White heart: &#9825;</p>              <!-- ♡ -->
<p>Sparkles: &#10024;</p>                <!-- ✹ -->
<p>Star: &#9733;</p>                   <!-- ★ -->
<p>White star: &#9734;</p>              <!-- ☆ -->
<p>Snowflake: &#10052;</p>             <!-- ❄ -->
<p>Hot beverage: &#9749;</p>            <!-- ☕ -->
<p>Electrical light: &#128161;</p>       <!-- 💡 -->
Try it Yourself →

Weather Symbols

Here are some common weather symbols in HTML:

<!-- Weather symbols -->
<p>Sun: &#9728;</p>                    <!-- ☀ -->
<p>Cloud: &#9729;</p>                  <!-- ☁ -->
<p>Umbrella: &#9730;</p>               <!-- ☂ -->
<p>Snowman: &#9731;</p>               <!-- ☃ -->
<p>Comet: &#9732;</p>                 <!-- ☄ -->
<p>Lightning: &#26a1;</p>               <!-- ⚡ -->
<p>Thermometer: &#8482;</p>            <!-- ℱ -->
<p>Water wave: &#9791;</p>              <!-- ☇ -->
Try it Yourself →

Practical Usage Examples

The following examples demonstrate how to use HTML symbols in practical scenarios:

Mathematical Content

Here is how to use HTML symbols for mathematical content:

<!-- Mathematical formulas -->
<div class="math-content">
  <h3>Physics Formulas</h3>
  <p>Einstein's equation: E = mc&sup2;&sup2;</p>
  <p>Newton's second law: F = ma</p>
  <p>Pythagorean theorem: a&sup2;&sup2; + b&sup2;&sup2; = c&sup2;&sup2;</p>
  <p>Area of circle: A = &pi;r&sup2;&sup2;</p>
  <p>Circumference: C = 2&pi;r</p>
  <p>Volume of sphere: V = (4/3)&pi;r&sup3;&sup3;</p>
</div>

<!-- Mathematical inequalities -->
<div class="inequalities">
  <h3>Inequalities</h3>
  <p>x &gt; 5 and x &lt; 10</p>
  <p>x &ge; 5 and x &le; 10</p>
  <p>x &ne; 0</p>
  <p>x &asymp; 3.14159</p>
  <p>x &rarr; &infin;</p>
</div>
Try it Yourself →

Financial Content

Here is how to use HTML symbols for financial content:

<!-- Financial information -->
<div class="financial-info">
  <h3>Price Information</h3>
  <p>Original price: &dollar;99.99</p>
  <p>Discount price: &dollar;79.99 (-20%)</p>
  <p>European price: &euro;89.99</p>
  <p>British price: &pound;69.99</p>
  <p>Japanese price: &yen;8,999</p>
  <p>Indian price: &#8377;6,999</p>
  <p>Bitcoin price: &#8383;0.05</p>
</div>

<!-- Stock market symbols -->
<div class="stock-info">
  <h3>Stock Market</h3>
  <p>AAPL: &#9650; +2.5% (+&dollar;4.25)</p>
  <p>GOOGL: &#9660; -1.2% (-&dollar;1.50)</p>
  <p>MSFT: &#9650; +0.8% (+&dollar;2.10)</p>
  <p>TSLA: &#9660; -3.4% (-&dollar;8.90)</p>
</div>
Try it Yourself →

Complete HTML Symbol Reference Table

The table below contains some of the most commonly used HTML symbols, their entity names, numeric codes, and descriptions.

Symbol Entity Name Numeric Code Description Category
+ &plus; &#43; Plus sign Math
− &minus; &#8722; Minus sign Math
× &times; &#215; Multiplication sign Math
Ă· &divide; &#247; Division sign Math
≈ &asymp; &#8776; Approximately equal Math
≠ &ne; &#8800; Not equal Math
≀ &le; &#8804; Less than or equal Math
≄ &ge; &#8805; Greater than or equal Math
∞ &infin; &#8734; Infinity Math
√ &radic; &#8730; Square root Math
∑ &sum; &#8721; Summation Math
∫ &int; &#8747; Integral Math
$ &dollar; &#36; US Dollar Currency
€ &euro; &#8364; Euro Currency
ÂŁ &pound; &#163; British Pound Currency
„ &yen; &#165; Japanese Yen Currency
â‚č N/A &#8377; Indian Rupee Currency
₿ N/A &#8383; Bitcoin Currency
← &larr; &#8592; Left arrow Arrow
→ &rarr; &#8594; Right arrow Arrow
↑ &uarr; &#8593; Up arrow Arrow
↓ &darr; &#8595; Down arrow Arrow
↔ &harr; &#8596; Left-right arrow Arrow
⇐ &lArr; &#8656; Double left arrow Arrow
⇒ &rArr; &#8658; Double right arrow Arrow
⇔ &hArr; &#8660; Double left-right arrow Arrow
α &alpha; &#945; Greek small alpha Greek
ÎČ &beta; &#946; Greek small beta Greek
Îł &gamma; &#947; Greek small gamma Greek
π &pi; &#960; Greek small pi Greek
Ω &Omega; &#937; Greek capital omega Greek
★ &#9733; &#9733; Black star Shape
☆ &#9734; &#9734; White star Shape
♄ &#9829; &#9829; Heart symbol Shape
♩ &#9830; &#9830; Diamond suit Shape
♣ &#9827; &#9827; Club suit Shape
♠ &#9824; &#9824; Spade suit Shape

 &hellip; &#8230; Ellipsis Punctuation
— &mdash; &#8212; Em dash Punctuation
– &ndash; &#8211; En dash Punctuation
“ &ldquo; &#8220; Left double quotation mark Punctuation
” &rdquo; &#8221; Right double quotation mark Punctuation
✓ &check; &#10003; Check mark Technical
✗ &#10007; &#10007; Ballot X Technical
⚡ &#9889; &#9889; Lightning bolt Technical
☀ &#9728; &#9728; Sun symbol Weather
☁ &#9729; &#9729; Cloud symbol Weather

Navigation and UI Symbols

Here is how to use HTML symbols for navigation and user interface elements:

<!-- Navigation elements -->
<nav class="navigation">
  <ul>
    <li><a href="#prev">&larr; Previous</a></li>
    <li><a href="#next">Next &rarr;</a></li>
    <li><a href="#home">&#9650; Home</a></li>
    <li><a href="#top">&uarr; Top</a></li>
  </ul>
</nav>

<!-- Status indicators -->
<div class="status-indicators">
  <h3>Status Indicators</h3>
  <p>&#10003; Task completed successfully</p>
  <p>&#10008; Task failed</p>
  <p>&#9728; Sunny weather expected</p>
  <p>&#9729; Cloudy with rain</p>
  <p>&#9749; Coffee break time</p>
  <p>&#26a1; High priority task</p>
</div>
Try it Yourself →

Accessibility Considerations

When using HTML symbols, it's important to consider accessibility to ensure that all users can understand the content. Here are some best practices:

<!-- Accessible symbol usage -->
<!-- Use ARIA labels for symbols -->
<span aria-label="Completed" role="img">&#10003;</span>

<!-- Provide text alternatives -->
<button>
  <span aria-hidden="true">&#9650;</span>
  <span class="sr-only">Scroll to top</span>
</button>

<!-- Use semantic HTML when possible -->
<!-- Instead of: &#10003; Completed -->
<div class="status success">Completed</div>

<!-- Use symbols with descriptive text -->
<p>&#9728; Weather: Sunny, 25&deg;C</p>
<p>&#9729; Weather: Cloudy, 18&deg;C</p>
Try it Yourself →

Note: Always ensure that symbols are used in a way that enhances the content and does not create confusion for users relying on assistive technologies.

Complete Symbol Reference Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Symbols Complete Reference</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f4f4f4;
      color: #333;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    h1 {
      color: #2c3e50;
      text-align: center;
      margin-bottom: 30px;
    }
    
    .symbol-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin: 30px 0;
    }
    
    .symbol-card {
      background-color: #f8f9fa;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      transition: transform 0.3s ease;
    }
    
    .symbol-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .symbol-display {
      font-size: 2em;
      font-weight: bold;
      color: #007bff;
      margin-bottom: 10px;
    }
    
    .symbol-name {
      font-weight: bold;
      color: #495057;
      margin-bottom: 5px;
    }
    
    .symbol-entity {
      font-family: 'Courier New', monospace;
      background-color: #e9ecef;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.9em;
    }
    
    .category {
      margin: 40px 0;
      padding: 20px;
      background-color: #f8f9fa;
      border-radius: 8px;
      border-left: 4px solid #007bff;
    }
    
    .category h2 {
      color: #007bff;
      margin-top: 0;
    }
    
    .interactive-demo {
      background-color: #e3f2fd;
      border-left: 4px solid #2196f3;
      padding: 20px;
      margin: 30px 0;
      border-radius: 4px;
    }
    
    .button-group {
      display: flex;
      gap: 10px;
      margin: 15px 0;
      flex-wrap: wrap;
    }
    
    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
    }
    
    .btn-primary {
      background-color: #3498db;
      color: white;
    }
    
    .btn-primary:hover {
      background-color: #2980b9;
      transform: translateY(-2px);
    }
    
    #symbolOutput {
      background-color: #2d3748;
      color: #e2e8f0;
      padding: 15px;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
      margin: 15px 0;
      min-height: 100px;
      white-space: pre-wrap;
      font-size: 14px;
    }
    
    .example-section {
      background-color: #fff3cd;
      border-left: 4px solid #ffc107;
      padding: 20px;
      margin: 20px 0;
      border-radius: 4px;
    }
    
    .example-section h3 {
      color: #856404;
      margin-top: 0;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>HTML Symbols Complete Reference</h1>
    
    <div class="category">
      <h2>Mathematical Symbols</h2>
      <div class="symbol-grid">
        <div class="symbol-card">
          <div class="symbol-display">∑</div>
          <div class="symbol-name">Summation</div>
          <div class="symbol-entity">&sum;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">∫</div>
          <div class="symbol-name">Integral</div>
          <div class="symbol-entity">&int;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">√</div>
          <div class="symbol-name">Square Root</div>
          <div class="symbol-entity">&radic;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">∞</div>
          <div class="symbol-name">Infinity</div>
          <div class="symbol-entity">&infin;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">π</div>
          <div class="symbol-name">Pi</div>
          <div class="symbol-entity">&pi;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">±</div>
          <div class="symbol-name">Plus-Minus</div>
          <div class="symbol-entity">&plusmn;</div>
        </div>
      </div>
    </div>

    <div class="category">
      <h2>Currency Symbols</h2>
      <div class="symbol-grid">
        <div class="symbol-card">
          <div class="symbol-display">$</div>
          <div class="symbol-name">US Dollar</div>
          <div class="symbol-entity">&dollar;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">€</div>
          <div class="symbol-name">Euro</div>
          <div class="symbol-entity">&euro;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">ÂŁ</div>
          <div class="symbol-name">British Pound</div>
          <div class="symbol-entity">&pound;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">„</div>
          <div class="symbol-name">Japanese Yen</div>
          <div class="symbol-entity">&yen;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">â‚č</div>
          <div class="symbol-name">Indian Rupee</div>
          <div class="symbol-entity">&#8377;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">₿</div>
          <div class="symbol-name">Bitcoin</div>
          <div class="symbol-entity">&#8383;</div>
        </div>
      </div>
    </div>

    <div class="category">
      <h2>Arrows and Direction</h2>
      <div class="symbol-grid">
        <div class="symbol-card">
          <div class="symbol-display">←</div>
          <div class="symbol-name">Left Arrow</div>
          <div class="symbol-entity">&larr;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">→</div>
          <div class="symbol-name">Right Arrow</div>
          <div class="symbol-entity">&rarr;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">↑</div>
          <div class="symbol-name">Up Arrow</div>
          <div class="symbol-entity">&uarr;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">↓</div>
          <div class="symbol-name">Down Arrow</div>
          <div class="symbol-entity">&darr;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">↔</div>
          <div class="symbol-name">Left-Right Arrow</div>
          <div class="symbol-entity">&harr;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">↕</div>
          <div class="symbol-name">Up-Down Arrow</div>
          <div class="symbol-entity">&varr;</div>
        </div>
      </div>
    </div>

    <div class="category">
      <h2>Geometric Shapes</h2>
      <div class="symbol-grid">
        <div class="symbol-card">
          <div class="symbol-display">★</div>
          <div class="symbol-name">Star</div>
          <div class="symbol-entity">&#9733;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">☆</div>
          <div class="symbol-name">White Star</div>
          <div class="symbol-entity">&#9734;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">♄</div>
          <div class="symbol-name">Heart</div>
          <div class="symbol-entity">&#9829;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">♩</div>
          <div class="symbol-name">Diamond</div>
          <div class="symbol-entity">&#9830;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">♣</div>
          <div class="symbol-name">Club</div>
          <div class="symbol-entity">&#9827;</div>
        </div>
        <div class="symbol-card">
          <div class="symbol-display">♠</div>
          <div class="symbol-name">Spade</div>
          <div class="symbol-entity">&#9824;</div>
        </div>
      </div>
    </div>

    <div class="interactive-demo">
      <h3>Interactive Symbol Generator</h3>
      <p>Click the buttons below to see different symbol categories and their HTML entities:</p>
      
      <div class="button-group">
        <button class="btn btn-primary" onclick="showMathSymbols()">Mathematical</button>
        <button class="btn btn-primary" onclick="showCurrencySymbols()">Currency</button>
        <button class="btn btn-primary" onclick="showArrowSymbols()">Arrows</button>
        <button class="btn btn-primary" onclick="showShapeSymbols()">Shapes</button>
        <button class="btn btn-primary" onclick="showWeatherSymbols()">Weather</button>
        <button class="btn btn-primary" onclick="showStatusSymbols()">Status</button>
      </div>
      
      <div id="symbolOutput">Click a button to see symbol examples...</div>
    </div>

    <div class="example-section">
      <h3>Practical Usage Examples</h3>
      
      <h4>Mathematical Content</h4>
      <p>Einstein's equation: E = mc&sup2;&sup2;</p>
      <p>Area of circle: A = &pi;r&sup2;&sup2;</p>
      <p>Temperature: 25&deg;C (77&deg;F)</p>
      <p>Confidence: 95% &plusmn; 2.5%</p>
      
      <h4>Financial Information</h4>
      <p>Price: &dollar;29.99 (&euro;24.99, &pound;19.99)</p>
      <p>Stock: AAPL &#9650; +2.5% (+&dollar;4.25)</p>
      <p>Crypto: BTC &#8383;0.05</p>
      
      <h4>Navigation Elements</h4>
      <p>&larr; Previous | &rarr; Next | &#9650; Top</p>
      <p>&#10003; Completed | &#10008; Failed</p>
      <p>&#9728; Sunny | &#9729; Cloudy</p>
    </div>
  </div>

  <script>
    function showMathSymbols() {
      const output = document.getElementById('symbolOutput');
      output.innerHTML = `Mathematical Symbols:
∑ Summation: &sum;
∫ Integral: &int;
√ Square Root: &radic;
∞ Infinity: &infin;
π Pi: &pi;
± Plus-Minus: &plusmn;
≈ Approximately: &asymp;
≠ Not Equal: &ne;
≀ Less Equal: &le;
≄ Greater Equal: &ge;
∃ Exists: &exist;
∀ For All: &forall;
∂ Partial: &part;
∇ Nabla: &nabla`;
    }
    
    function showCurrencySymbols() {
      const output = document.getElementById('symbolOutput');
      output.innerHTML = `Currency Symbols:
$ US Dollar: &dollar;
€ Euro: &euro;
ÂŁ British Pound: &pound;
„ Japanese Yen: &yen;
â‚č Indian Rupee: &#8377;
ₜ Russian Ruble: &#8381;
₿ Bitcoin: &#8383;
Âą Cent: &cent;
€ Generic Currency: &#8364;
â‚Č Guarani: &#8370`;
    }
    
    function showArrowSymbols() {
      const output = document.getElementById('symbolOutput');
      output.innerHTML = `Arrow Symbols:
← Left: &larr;
→ Right: &rarr;
↑ Up: &uarr;
↓ Down: &darr;
↔ Left-Right: &harr;
↕ Up-Down: &varr;
↖ Northwest: &nwarr;
↗ Northeast: &nearr;
↙ Southwest: &swarr;
↘ Southeast: &searr;
⇐ Double Left: &lArr;
⇒ Double Right: &rArr`;
    }
    
    function showShapeSymbols() {
      const output = document.getElementById('symbolOutput');
      output.innerHTML = `Shape Symbols:
★ Star: &#9733;
☆ White Star: &#9734;
♄ Heart: &#9829;
♡ White Heart: &#9825;
♩ Diamond: &#9830;
♣ Club: &#9827;
♠ Spade: &#9824;
○ Circle: &#9675;
● Filled Circle: &#9679;
□ Square: &#9633;
■ Filled Square: &#9632`;
    }
    
    function showWeatherSymbols() {
      const output = document.getElementById('symbolOutput');
      output.innerHTML = `Weather Symbols:
☀ Sun: &#9728;
☁ Cloud: &#9729;
☂ Umbrella: &#9730;
☃ Snowman: &#9731;
☄ Comet: &#9732;
⚡ Lightning: &#26a1;
☇ Water Wave: &#9791
☈ Thunderstorm: &#9716`;
    }
    
    function showStatusSymbols() {
      const output = document.getElementById('symbolOutput');
      output.innerHTML = `Status Symbols:
✓ Check Mark: &check;
✗ Ballot X: &#10007;
✔ Heavy Check: &#10003;
✘ Heavy X: &#10008
‱ Bullet: &bull;
‣ Triangle Bullet: &#8227;
※ Reference: &#8251
‌ Interrobang: &#8253`;
    }
  </script>

</body>
</html>
Try it Yourself →

đŸ§Ș Quick Quiz

Which entity shows the left arrow (←)?

← HTML Entities
HTML Emojis →