Using Symbols in CSS

Master CSS escape syntax, the content property, and pseudo-elements to add Unicode symbols to any web page — without touching your HTML.

Find CSS Symbol Codes

CSS Escape Syntax

CSS uses its own escape format to represent Unicode characters. The syntax is a backslash followed by the hexadecimal codepoint — with no prefix, no braces, and no semicolon. This is different from HTML entities (✓) and JavaScript escapes (\u{2713}).

For the check mark character (✓, U+2713), the CSS escape is simply:

\2713

For the right arrow (→, U+2192):

\2192

For emoji and characters outside the Basic Multilingual Plane, use the full codepoint. The grinning face (😀, U+1F600):

\1F600

If the character immediately following the escape could be interpreted as a hex digit, add a trailing space to separate them. CSS parsers consume up to six hex digits after the backslash, so the space acts as a delimiter:

\2713 Next text here

This is one of the most common sources of confusion. If your symbol isn't rendering, check whether the parser is consuming extra characters as part of the hex sequence.

The content Property and Pseudo-Elements

The content property in CSS is exclusively used with the ::before and ::after pseudo-elements. It defines generated content that appears visually on the page without altering the DOM. This makes it the primary way to insert symbols through CSS alone.

The basic pattern is:

.element::before {
  content: "\2713";
}

The value of content is a string (in quotes) that can contain plain text, CSS escapes, or a mix of both. You can concatenate multiple values:

.element::before {
  content: "\2713 " "Done";
}

You can also use the attr() function to pull content from HTML attributes, but for symbol insertion, string literals with CSS escapes are the standard approach.

Practical Example: Custom List Markers

Replace default bullet points with custom symbols using ::before pseudo-elements:

/* Replace bullets with check marks */
ul.checklist {
  list-style: none;
  padding-left: 0;
}

ul.checklist li {
  padding-left: 1.5em;
  position: relative;
}

ul.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: bold;
}

This pattern is widely used for feature lists, pricing tables, and step-by-step instructions. Swap \2713 for any symbol — \2022 for a bullet (•), \25B6 for a right-pointing triangle (▶), or \2605 for a star (★).

Practical Example: External Link Indicator

Automatically append an arrow symbol to links that point outside your site:

/* Add external link arrow */
a[href^="http"]::after {
  content: " \2197";
  font-size: 0.75em;
  vertical-align: super;
  text-decoration: none;
  display: inline-block;
}

The north-east arrow (↗, U+2197) is a common convention for external links. Some designs prefer \1F517 (🔗 link symbol) or \29C9 (⧉ two joined squares).

Practical Example: Decorative Section Separators

Create elegant section dividers using symbol sequences:

/* Decorative separator */
.divider::before {
  content: "\2726 \2727 \2726";
  display: block;
  text-align: center;
  font-size: 1.25rem;
  color: #94a3b8;
  letter-spacing: 0.5em;
  margin: 2rem 0;
}

Try different symbol combinations: \2014 \2022 \2014 (em dash, bullet, em dash), \2736 \2736 \2736 (six-pointed stars), or \2500\2500\2500 (box-drawing line).

Practical Example: Blockquote Styling

Add quotation marks to blockquotes without modifying HTML:

/* Smart quotes around blockquotes */
blockquote {
  position: relative;
  padding-left: 2em;
  font-style: italic;
}

blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.25em;
  font-size: 3em;
  color: #cbd5e1;
  line-height: 1;
}

blockquote::after {
  content: "\201D";
  font-size: 3em;
  color: #cbd5e1;
  line-height: 1;
}

The left double quotation mark (“, U+201C) and right double quotation mark (”, U+201D) are typographically correct curly quotes — a professional touch that straight quotes cannot match.

Finding CSS Codes on Symbolwise

Symbolwise makes it easy to get the CSS escape for any Unicode symbol. Here's the workflow:

Search for a symbol by name or keyword on the Symbolwise home page. For example, search for "check mark" or "arrow right."
Select the CSS format from the format picker on any symbol card. The CSS escape (e.g., \2713) is shown and ready to copy.
Click to copy. The value is placed on your clipboard, ready to paste into your content property or anywhere else in your CSS.
Open the detail page for a complete encoding reference — including the CSS escape alongside Plain, HTML, JavaScript, React JSX, and Markdown formats.

You can also browse symbol collections to find CSS codes for themed sets of symbols. The Arrows collection, for example, shows CSS escapes for every arrow variant in Unicode.

`/Ctrl+K / Cmd+K`	Focus search
`Esc`	Clear search / close dialog
`?`	Show keyboard shortcuts