HTML Entity for Gear (⚙)
What You'll Learn
How to display the Gear symbol (⚙) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+2699 (GEAR) in the Miscellaneous Symbols block (U+2600–U+26FF)—widely used for settings, preferences, and configuration in apps and websites.
Render it with ⚙, ⚙, or CSS escape \2699. There is no named HTML entity. Pair the symbol with text or aria-label (e.g. aria-label="Settings") for accessible UI controls.
⚡ Quick Reference — Gear
U+2699Miscellaneous Symbols
⚙Hexadecimal reference
⚙Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+2699
Hex code ⚙
HTML code ⚙
Named entity (none)
CSS code \2699
Meaning Gear / cog (settings, options, machinery)
Related See HTML Symbol Entities (/html/entity/symbol)Complete HTML Example
This example demonstrates the Gear symbol (⚙) using hexadecimal code, decimal HTML code, and a CSS content escape. There is no named HTML entity:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\2699";
}
</style>
</head>
<body>
<p>Gear using Hexadecimal: ⚙</p>
<p>Gear using Decimal: ⚙</p>
<p id="point">Gear using CSS Entity: </p>
</body>
</html>🌐 Browser Support
The Gear symbol (⚙) is widely supported in modern browsers with a suitable font:
👀 Live Preview
See the Gear symbol (⚙) in settings and UI contexts:
🧠 How It Works
Hexadecimal Code
⚙ uses the Unicode hexadecimal value 2699 to display the Gear symbol. The x prefix indicates hexadecimal format.
Decimal HTML Code
⚙ uses the decimal Unicode value 9881 to display the same character.
CSS Entity
\2699 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Same visual result
All three methods produce the glyph: ⚙. Unicode U+2699 is in Miscellaneous Symbols (U+2600–U+26FF). Next: Geometric Proportional (∺).
Use Cases
The Gear symbol (⚙) is commonly used in:
Settings menus, options panels, and preference links in apps and websites.
Control panels, configuration pages, and admin dashboards.
Content about machinery, engineering, tools, or industrial design.
App settings icons, profile configuration, and feature toggles.
Visual elements that indicate customization, control, or options.
HTML entity lists, Unicode charts, and icon documentation.
💡 Best Practices
Do
- Pair ⚙ with text or
aria-label="Settings"for accessibility - Use
⚙or⚙consistently (no named entity) - Verify font support for U+2699 on target platforms
- Use the CSS escape in
::before/::afterfor decorative icons - Serve pages with UTF-8 (
<meta charset="utf-8">)
Don’t
- Rely on ⚙ alone without accessible label text for icon-only buttons
- Expect a named entity—none exists for U+2699
- Put CSS escape
\2699in HTML text nodes - Assume every font renders the cog glyph identically
- Skip SVG/icon-font options when you need complex, scalable UI icons
Key Takeaways
Two HTML numeric references plus CSS render ⚙
⚙ ⚙For CSS stylesheets, use the escape in the content property
\2699Unicode U+2699 — GEAR (cog / settings)
Miscellaneous Symbols block (U+2600–U+26FF)
❓ Frequently Asked Questions
⚙ (hex), ⚙ (decimal), or \2699 in CSS content. There is no named entity for the Gear symbol (⚙).U+2699 (GEAR). Miscellaneous Symbols block. Hex 2699, decimal 9881. No named HTML entity.⚙ or ⚙) go in markup. The CSS escape \2699 is used in stylesheets, typically in the content property of pseudo-elements. Same visual result, different layers of the stack.⚙ or ⚙ in modern browsers.Explore More HTML Entities!
Discover 1500+ HTML character references — UI symbols, settings icons, and more.
About the author
8 people found this page helpful