Short answer

Use UTF-8 and paste the character into your HTML. Keep a clear text label when a symbol controls an action.

Technical note: Use UTF-8, paste the character directly or use a numeric character reference. In CSS-generated content, escape the code point carefully and still provide accessible text for meaningful controls.Reviewed by CoolSymbol.now Editorial · August 2, 2026

What you need to know

01Declare UTF-8

Serve the document as UTF-8 and include a charset declaration near the start of the head.

02Escape syntax, not every symbol

HTML entities are useful when a character conflicts with markup or when source constraints require ASCII.

03Use semantics for interface icons

Generated CSS content may not be exposed consistently to assistive technology.

See real examples in technical symbols and bracket symbols. For the full lesson, read How to Copy and Paste Symbols Safely.

01

Declare UTF-8

Declare UTF-8 and paste the character straight in. That is the simplest way and the easiest to read later.

You can also use a numeric reference. ♥ and ♥ both give a heart suit.

Key points
  • HTML: paste ★ directly
  • Numeric reference: ★ or ★
  • CSS: content: '\2605';

02

Escape syntax, not every symbol

Use a numeric reference when the toolchain is old or the encoding is uncertain. It survives more steps than a raw character.

03

Use semantics for interface icons

In CSS, escape the code point with a backslash inside a content value. In JavaScript, use a unicode escape.

04

Choosing between the three forms

Pasting directly is more readable and works whenever the page, the server headers and the editor all agree on UTF-8. A trailing space ends a CSS escape, which is a common source of confusion.

Key points
  • HTML: paste directly, or use a hexadecimal or decimal numeric reference
  • CSS: a backslash escape inside the content value
  • JavaScript: a unicode escape, with braces for values above U+FFFF

05

Sources and further reading

This answer was reviewed against current Unicode terminology and the practical guidance below.

06

Related symbol collections

More collections supported by this answer

These links are grouped by purpose so you can move from the general answer to the exact inventory you need.

Creative 1
Marks & notation 1
Numbers & math 8
Arrows & shapes 1
Science & professional 3
Writing & typography 4