Alembic (⚗) is the Miscellaneous Symbols character at Unicode U+2697. Unicode’s official name is Alembic — a distillation still used in chemistry and historical alchemy iconography. You can paste ⚗ in UTF-8 HTML, or write it with a numeric character reference when you need an explicit entity form.
Remember
Character ⚗
Unicode U+2697
Hex entity ⚗
Decimal ⚗
CSS escape \2697
Named entity (none)
All of these produce the same glyph: ⚗. Prefer the character or a numeric entity in body text; use the CSS escape for generated content on pseudo-elements. For branded product UI, an SVG icon is often a better fit than a Miscellaneous Symbol.
Reference
Quick Reference
One table for every form you will actually use.
Form
Code
Where it goes
Direct character
⚗
HTML text (UTF-8)
Hex entity
⚗
HTML markup
Decimal entity
⚗
HTML markup
CSS escape
\2697
Stylesheet content
Named entity
—
Not defined in HTML5
When to Use Which
Situation
Use
UTF-8 page, glyph available in your editor
Paste ⚗
Need an entity in HTML source
⚗ or ⚗
Generated text via ::before / ::after
content: "\2697"
Looking for &alembic;
Does not exist — use numeric form
Branded / scalable product icon
Prefer SVG (or an icon set) over a Unicode symbol
See it
Live Preview
Alembic rendered in common science and UI contexts.
Inline textLab topic: distillation ⚗ in early chemistry.
Large glyph⚗
UI label⚗ Chemistry lab
MonospaceICON-U+2697-⚗
With entitiesHex: ⚗ | Decimal: ⚗
Code
Complete HTML Example
One page that shows Alembic with the hex entity, decimal entity, CSS escape, and a typed character. Use View Output or open the live editor.
Hex + Decimal + CSS + Typed
All four ways to produce ⚗ in a single document.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alembic (⚗) in HTML</title>
<style>
#point::after {
content: "\2697";
}
</style>
</head>
<body>
<p>Alembic using Hex Code: ⚗</p>
<p>Alembic using HTML Code: ⚗</p>
<p id="point">Alembic using CSS Entity: </p>
<p>Typed directly: ⚗</p>
</body>
</html>
Alembic using Hex Code: ⚗
Alembic using HTML Code: ⚗
Alembic using CSS Entity: ⚗
Typed directly: ⚗
How It Works
1. Hex:U+2697 → ⚗ in HTML. The browser turns it into ⚗.
2. Decimal: same code point as 9879 → ⚗. Same result as hex.
3. CSS: use \2697 in content (not an HTML entity). #point::after appends that ⚗ after the paragraph text.
4. Typed ⚗: fine in UTF-8 source. All four lines show the same glyph.
Pitfalls & Tips
Common mistakes when working with the Alembic entity.
Named?
No &alembic;
HTML5 does not define a named entity for this symbol. Use numeric forms.
CSS vs HTML
Do not mix escapes
\2697 belongs in CSS. ⚗ / ⚗ belong in HTML.
Fonts
Check symbol coverage
Some webfonts omit U+2697. Test your UI font or rely on system fallbacks.
Color
Emoji-style variants
Some OS fonts colorize ⚗. If you need a flat icon, use SVG or a monochrome font.
A11y
Add a text label
Pair ⚗ with words like “Chemistry” so meaning is clear without the glyph alone.
Semicolon
End references
Always finish with ; — write ⚗, not ⚗.
Compatibility
Browser Support
Alembic (U+2697) and its numeric entity forms (⚗, ⚗, CSS \\2697) are supported in all mainstream browsers. Glyph appearance depends on font coverage for the Miscellaneous Symbols block.
✓ Universal support
Alembic (⚗)
Paste ⚗, or encode with hex, decimal, or CSS escape — same character everywhere encoding is supported.
100%Browser coverage
Google ChromeSupported
Yes
Microsoft EdgeSupported
Yes
Mozilla FirefoxSupported
Yes
Apple SafariSupported
Yes
OperaSupported
Yes
Internet ExplorerAll versions
Yes
U+2697 / entitiesFull support
Bottom line: Use a typed ⚗ in UTF-8 text when convenient. Prefer ⚗ or ⚗ in HTML when encoding must be explicit, and \\2697 only inside CSS content.
Remember
Key Takeaways
Unicode: Alembic is U+2697 (decimal 9879).
HTML: use ⚗ or ⚗ when you need an entity.
CSS: use \2697 inside content for generated text.
UI tip: use SVG for brand icons; U+2697 is great for text and docs.
One line:U+2697 → paste ⚗, or encode as ⚗ / ⚗ / CSS \2697.
Frequently Asked Questions
Use ⚗ (hex), ⚗ (decimal), or the CSS escape \2697 in the content property. All render Alembic (⚗). You can also paste ⚗ directly if your file is UTF-8.
U+2697 (hex 2697, decimal 9879). Unicode names it Alembic. It belongs to the Miscellaneous Symbols block (U+2600–U+26FF).
No. HTML5 does not define a named entity such as &alembic;. Use numeric references like ⚗ or ⚗ when you need an entity form.
In chemistry, science education, history of alchemy themes, and UI icons where a distillation still glyph fits. Prefer an SVG for branded product icons; use U+2697 for simple text and documentation.
HTML entities (⚗ or ⚗) go in markup. The CSS escape \2697 is used in stylesheets (usually in the content property of ::before/::after). Both render ⚗.
Some platforms render Miscellaneous Symbols with emoji-style color. Appearance depends on the font and OS. Test your stack if you need a flat monochrome silhouette.
🤔
Did you know?
Alembic is Unicode U+2697 (decimal 9879) in the Miscellaneous Symbols block. It depicts a distillation still used in chemistry and historical alchemy imagery. HTML5 has no named entity — use ⚗ or ⚗.
