HTML Entity for Bowtie (⋈)

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 1 Code Example
Unicode U+22C8
HTML Entity for Bowtie symbol tutorial illustration

What You'll Learn

How to display the Bowtie (⋈) in HTML using various entity methods. This character is part of the Mathematical Operators Unicode block (U+22C8), approved in Unicode 1.1 (1993). In database theory and relational algebra it represents the natural join operator—combining rows from two relations on matching attribute names. In LaTeX it is written as \bowtie.

The symbol can be rendered with a hexadecimal reference, a decimal reference, the named entity ⋈, or a CSS escape in the content property. It appears in SQL tutorials, database documentation, CS coursework, and math notation.

⚡ Quick Reference — Bowtie Entity

Unicode U+22C8

Mathematical Operators block

Hex Code ⋈

Hexadecimal reference

HTML Code ⋈

Decimal reference

Named Entity ⋈

Most readable option

Reference Table
Name           Value
────────────   ──────────
Unicode        U+22C8
Hex code       ⋈
HTML code      ⋈
Named entity   ⋈
CSS code       \22C8
1

Complete HTML Example

This example demonstrates the Bowtie (⋈) using hexadecimal code, decimal HTML code, the named entity, and a CSS content escape on a pseudo-element:

html
<!DOCTYPE html>
<html>
<head>
 <style>
  #point:after{
   content: "\22C8";
  }
 </style>
</head>
<body>
<p>Bowtie using Hexa Decimal: &#x22C8;</p>
<p>Bowtie using HTML Code: &#8904;</p>
<p>Bowtie using HTML Entity: &bowtie;</p>
<p id="point">Bowtie using CSS Entity: </p>
</body>
</html>
Try it Yourself

🌐 Browser Support

The Bowtie entity is universally supported in all modern browsers:

Chrome 1+
Firefox 1+
Safari 1+
Edge 12+
Opera 4+
Android 4.4+
iOS Safari 1+

👀 Live Preview

See the Bowtie symbol rendered live in different contexts:

Inline text R ⋈ S denotes the natural join of relations R and S.
Large glyph ⋈
Database notation Employees ⋈ Departments
LaTeX equivalent HTML &bowtie; corresponds to LaTeX \bowtie for ⋈
Monospace refs &#x22C8; &#8904; &bowtie; \22C8

🧠 How It Works

1

Hexadecimal Code

&#x22C8; uses the Unicode hexadecimal value 22C8 to display the Bowtie symbol. The x prefix indicates hexadecimal format.

HTML markup
2

Decimal HTML Code

&#8904; uses the decimal Unicode value 8904 to display the same character. This is one of the most commonly used methods.

HTML markup
3

Named HTML Entity

&bowtie; is the semantic named entity—the easiest to read in source HTML and corresponds to LaTeX \bowtie.

HTML markup
4

CSS Entity

\22C8 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.

CSS stylesheet
=

Same visual result

All four methods produce the Bowtie glyph: ⋈. Unicode U+22C8 sits in the Mathematical Operators block (U+2200–U+22FF) and denotes natural join in relational algebra.

✅

Use Cases

The Bowtie (⋈) commonly appears in the following scenarios:

🗄 Relational algebra

Natural join operator notation in database theory and formal query languages.

📊 Database theory

SQL tutorials, query documentation, and relational model explanations.

📐 Math notation

Mathematical expressions, set theory, and formal logic where bowtie is used.

📚 Education

Computer science courses, database textbooks, and CS education sites.

🎨 Decorative design

Creative layouts, fashion themes, and decorative symbol usage.

📝 Technical docs

API docs, database schema docs, and developer documentation.

♿ Accessibility

Pair ⋈ with text or aria-label (e.g. “Natural join” or “Bowtie operator”).

💡 Best Practices

Do

  • Use &bowtie; for readable source markup
  • Explain ⋈ as natural join when writing database or SQL content
  • Pick one style (hex / decimal / named) per project
  • Add aria-label for standalone operator symbols
  • Test the glyph across browsers and math-friendly fonts

Don’t

  • Mix entity styles randomly in one file
  • Assume all fonts render ⋈ correctly
  • Use CSS escape \22C8 inside HTML text nodes
  • Confuse ⋈ (natural join) with ⋉ (left natural join) or ⋊ (right natural join)
  • Rely on the symbol alone without explanatory text on first use

Key Takeaways

1

Three HTML references all render ⋈

&#x22C8; &#8904; &bowtie;
2

For CSS stylesheets, use the escape in the content property

\22C8
3

Unicode U+22C8 belongs to the Mathematical Operators block (U+2200–U+22FF)

4

Prefer &bowtie; for readability—matches LaTeX \bowtie

5

In relational algebra, ⋈ denotes natural join on common attribute names

❓ Frequently Asked Questions

Use &#x22C8; (hex), &#8904; (decimal), &bowtie; (named), or \22C8 in CSS content. All produce ⋈.
U+22C8 (hex 22C8, decimal 8904). Mathematical Operators block. The symbol represents the natural join operator in relational algebra.
For relational algebra, database theory, natural join operator notation, SQL tutorials, math notation, educational content, and decorative design.
HTML entities (&#8904;, &#x22C8;, or &bowtie;) go directly in markup. The CSS escape \22C8 is used in stylesheets, typically in the content property of ::before or ::after. Same visual result, different layers of the stack.
Yes. &bowtie; is the named HTML entity for ⋈. You can also use &#8904; (decimal) or &#x22C8; (hex).

Explore More HTML Entities!

Discover 1500+ HTML character references — currency symbols, arrows, math operators, emojis, and more.

All HTML Entities →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Bottom Arc Anticlockwise Arrow (⤻) Breve (˘)