Code Style: A standard for Unicode icons in Web fonts

Follow Code Style

CSS font stacks

Top Web font FAQs

Put your text ad here

WestNIC provides reliable web hosting services

Fastwebhost offers cheap web hosting & reseller hosting services

Unicode is the Web standard to represent symbols and icons in HTML and CSS. Unicode provides universal key bindings which have semantic meaning that matches their graphical representation.

Some system fonts have the Unicode coverage necessary to display some standard icons, they do not necessarily have the aesthetics that designers seek to render them. Custom Web fonts delivered with the @font-face rule can deliver the aesthetics and the semantics if icon glyphs are mapped to the appropriate Unicode code point.

See Scalable Web font icons further below for a background discussion.

Working example

The icons below are rendered in a custom Web font with each glyph mapped to an appropriate Unicode entity. The icons are scalable, meaningful and cross-browser compabible. You can apply all standard CSS styles normally used with HTML text.

ࣾ home ࣾ
ℹ information ℹ
♡ heart ♡
⚙ cog or gear ⚙
⚿ key ⚿
✉ envelope ✉
✎ pencil ✎
✓ check or tick mark ✓
❌ cross mark ❌
💬 speech balloon 💬

This example uses extracts from the free trial version of the IcoMoon Web font.

Standard Unicode icon entities

The lists below identify standard Unicode code points that should be used to configure custom @font-face icon fonts. The entities on this page are rendered using your standard system fonts and may not be pretty, some glyphs may be missing altogether, but the entities have meaning.

In Unicode a smiley ☺ means a smiley.

Object symbols

⌚ wrist watch e.g. time ⌚
☎ telephone ☎ see also ☏ and ✆
✉ envelope e.g. mail, email ✉
✎ pencil ✎ see also ✏ ✐ and ✑
📕 closed book 📕
📖 open book 📖

Action concepts

+ plus +
↺ rotate anticlockwise ↺
↻ rotate clockwise ↻
− minus, not a hyphen −
⌁ box with lower right shadow ⌁ see also ❏ and ❐
☐ ballot box ☐
☑ ballot box with check ☑
☒ ballot box with cross ☒
✓ check or tick mark ✓
✔ heavy check or tick mark ✔
❌ cross mark ❌

Status signals

ℹ information ℹ
⚠ warning sign ⚠
⛔ no entry e.g. access denied ⛔

Application concepts

ࣾ home ࣾ
♲ recycle e.g. trash ♲
⚓ anchor ⚓
⚙ cog or gear e.g. settings preferences ⚙
💬 speech balloon e.g. chat 💬
💭 thought balloon e.g. comment 💭
📅 calendar 📅
📌 push pin 📌
📍 rounded push pin 📍
📷 camera e.g. photograph or image 📷
🔖 bookmark 🔖
🕐 clock 🕐

Avatars and emoticons

☺ white smiley ☺
☻ black smiley ☺
♡ heart e.g. friend like etc. ♡ see also ♥ and ❤ for playing cards
👨 man 👨
👩 woman 👩
💡 light bulb 💡
🙋 person raising one hand e.g. end-user or student 🔊

Security concepts

⚿ key ⚿
🔐 closed lock with key 🔐
🔒 closed lock or locked 🔒
🔓 open lock or unlocked 🔓

Audio settings

🔇 speaker with cancellation stroke e.g. mute 🔇
🔈 speaker with no sound waves 🔈
🔉 speaker with one sound wave e.g. low or lower volume audio 🔉
🔊 speaker with three sound waves e.g. high or higher volume audio 🔊

Scalable Web font icons

In Ever thought about using @font-face for icons? Wayne Helman uses a custom Web font mapped to standard ASCII characters. In this case the meaning of the letter “a” is mapped to a star icon, “b” is an RSS icon. This approach creates a mis-match between the meaning of the letter and its representation.

P.J. Onori's article Font-embedding icons: this is a big deal elaborates Helman's CSS generated content technique to keep the icon-mapped characters out of the published HTML markup, which minimises the mis-match in meaning.

Both these examples use custom @font-face fonts to substitute placeholder characters with the desired icon glyph, but they do not degrade well. Web icons should be written in standard Unicode character literals, HTML entities (as above) and CSS generated content, e.g.

.smiley:before {

  // 9786 decimal = 263A hexadecimal
  content: '\263A';
}

Custom Web fonts should assign icon glyphs to the same standard Unicode code points so they upgrade the original content, enhance and standardise the aesthetics of the icons and retain their fundamental semantics. It is not necessary to map or hide the original characters.

.smiley {

  // Font has icon glyphs for specific code points
  font-family: "Custom Icon Font", serif;
}

Icon concepts that do not have a standard Unicode code point can be assigned a value in the private use character ranges.

Web font survey results by Unicode range

Article feedback

Your comments on this article will be appreciated, please use the form below to submit your views. If you would like a reply or article update notification, include your email address.

Comments:
Name:
Email:
Was this useful?	Yes, very comprehensive Yes, but lacked important details No, but some parts were good No, very superficial
Reference URL:
Do NOT put any URLs here
Join mailing list:	Yes (requires email address) No

Your email address will not be mis-used. If you include your address you may be sent a personal reply, you will not be added to any mailing list unless you request update notification. Read the site privacy statement for details.

A standard for Unicode icons in Web fonts