What’s the difference between HTML code and CSS entity for ✏?

HTML references (✏ or ✏) go in markup. The CSS escape \270F is used in stylesheets, typically in the content property of pseudo-elements. Both render ✏.

HTML Entity for Pencil (✏)

Q: How do I display the Pencil symbol (✏) in HTML?

Use ✏ (hex), ✏ (decimal), or \270F in CSS content. There is no named HTML entity. All three methods render the pencil symbol (✏).

Q: What is the Unicode value for the Pencil symbol?

U+270F (UPPER RIGHT PENCIL) in the Dingbats block (U+2700–U+27BF). Hex 270F, decimal 9999.

Q: Is the Pencil symbol the same as the lower-right pencil (✎)?

No. U+270F (✏) is UPPER RIGHT PENCIL. U+270E (✎) is LOWER RIGHT PENCIL—a mirrored variant. They are different characters.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 1 Code Example

Unicode U+270F

HTML entity for Pencil (U+270F) — hex, decimal, and CSS tutorial

What You'll Learn

How to display the Pencil symbol (✏) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+270F (UPPER RIGHT PENCIL) in the Dingbats block (U+2700–U+27BF)—a classic pencil icon for edit actions, notes, and creative design.

Render it with ✏, ✏, or CSS escape \270F. There is no named HTML entity. Do not confuse ✏ with U+270E (✎, lower right pencil), U+2712 (✒, black nib), or emoji-style pencil variants in color fonts.

⚡ Quick Reference — Pencil

Unicode U+270F

Dingbats (U+2700–U+27BF)

Hex Code ✏

Hexadecimal reference

HTML Code ✏

Decimal reference

Named Entity —

Use numeric codes only

Reference Table

Name           Value
────────────   ──────────
Unicode        U+270F
Hex code       &#x270F;
HTML code      &#9999;
Named entity   (none)
CSS code       \270F
Meaning        Upper right pencil (edit / write icon)
Related        U+270E = lower right pencil (✎)
               U+2712 = black nib (✒)
               U+270D = writing hand (✍)
Block          Dingbats (U+2700–U+27BF)

Complete HTML Example

A simple example showing ✏ using hexadecimal code, decimal HTML code, and a CSS content escape:

html

<!DOCTYPE html>
<html>
<head>
 <style>
  #point::after{
   content: "\270F";
  }
 </style>
</head>
<body>
<p>Pencil (hex): &#x270F;</p>
<p>Pencil (decimal): &#9999;</p>
<p>Edit note: ✏ Update your profile</p>
<p id="point">Pencil (CSS): </p>
</body>
</html>

Try it Yourself

🌐 Browser Support

The Pencil symbol (✏) is widely supported in all modern browsers:

Chrome1+

Firefox1+

Safari1+

Edge12+

Opera4+

Android4.4+

iOS Safari1+

👀 Live Preview

See the Pencil symbol (✏) in UI and content contexts:

Single symbol ✏

Edit action ✏ Edit

Note label ✏ Take notes

Not the same as Lower pencil ✎ | Black nib ✒

Numeric refs ✏ ✏ \270F

🧠 How It Works

Hexadecimal Code

✏ uses the Unicode hexadecimal value 270F to display the pencil symbol.

HTML markup

Decimal HTML Code

✏ uses the decimal Unicode value 9999 for the same character.

HTML markup

CSS Entity

\270F is used in CSS stylesheets in the content property of pseudo-elements for edit icons or decorative markers.

CSS stylesheet

Pencil symbol result

All three methods render ✏. Unicode U+270F in Dingbats. Next: Per Ten Thousand (‱).

✅

Use Cases

The Pencil symbol (✏) is commonly used in:

✎ Edit buttons

Inline edit links, form actions, and profile update controls.

📝 Notes UI

Note-taking apps, comment sections, and draft indicators.

🎨 Creative design

Blog headers, stationery themes, and writing-related branding.

📄 Documentation

Tutorial pages, how-to guides, and editable content labels.

📋 Unicode references

Character pickers, entity documentation, and symbol guides.

♿ Accessibility

Pair ✏ with visible text like “Edit”; add aria-label when used as an icon-only control.

💡 Best Practices

Do

Use ✏ or ✏ for inline pencil symbols
Include visible text like “Edit” alongside the icon for clarity
Set <meta charset="utf-8"> for reliable rendering
Use the correct symbol—✏ not lower pencil ✎
Pick one numeric style per project for consistency

Don’t

Confuse ✏ with ✎ (lower right pencil) or ✒ (black nib)
Use padded Unicode notation like U+0270F—the correct value is U+270F
Use CSS escape \270F in HTML text nodes
Rely on ✏ alone as the only edit affordance without accessible labeling
Assume every font renders Dingbats identically—test your typeface

Key Takeaways

Two HTML numeric references plus CSS for U+270F

✏ ✏

For CSS stylesheets, use \270F in the content property

Unicode U+270F — UPPER RIGHT PENCIL in Dingbats

Distinct from lower right pencil ✎ and black nib ✒

Previous: Peace Symbol (☮) Next: Per Ten Thousand (‱)

❓ Frequently Asked Questions

How do I display the Pencil symbol (✏) in HTML?

Use ✏ (hex), ✏ (decimal), or \270F in CSS content. There is no named entity. All three render ✏.

What is the Unicode value for the Pencil symbol?

U+270F (UPPER RIGHT PENCIL). Dingbats block (U+2700–U+27BF). Hex 270F, decimal 9999.

Is the Pencil symbol the same as the lower-right pencil (✎)?

No. ✏ (U+270F) is UPPER RIGHT PENCIL. ✎ (U+270E) is LOWER RIGHT PENCIL—a mirrored variant. They are different Unicode characters.

When should I use the Pencil symbol in HTML?

For edit buttons, note-taking UI, creative design accents, form labels, documentation pages, and any interface needing a simple pencil or write icon.

Why is there no named HTML entity for the Pencil symbol?

Named HTML entities cover a subset of common characters. U+270F uses numeric hex or decimal codes or CSS escapes, which is standard for Dingbats symbols.

Explore More HTML Entities!

Discover 1500+ HTML character references — punctuation, symbols, and more.

All HTML Entities →

About the author

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

Peace Symbol (☮) Per Ten Thousand (‱)