HTML&CSS Design

HTML entities and ISO characters for user interface design

12 Feb 2009
8 minutes read

Why use harder to maintain and more ressource consumptive graphics, when it can be done with plain text too?

There are thousends of unicode symbols one can utilize for different tasks. Many websites list them all or let them search for specific ones.

Here’s a small list of graphic characters we use for interface design on a regular basis:

Update: Now that browser support for CSS @font-face is decent, you can use pre-packaged icon fonts like Typeicons or great services like Fontello, to create your own icon fonts.

Characters: Triangles ▲
Character Description ISO Hex Decimal
▲ Triangle - up U+25B2 ▲ ▲
△ Triangle - up, outline U+25B3
△
△
▴ Triangle - up, small U+25B4 ▴ ▴
▵ Triangle - up, outline, small U+25B5 ▵ ▵
▶ Triangle - right U+25B6 ▶ ▶
▷ Triangle - right, outline U+25B7 ▷ ▷
▸ Triangle - right, small U+25B8 ▸ ▸
▹ Triangle - right, outline, small U+25B9 ▹ ▹
▼ Triangle - down U+25BC ▼ ▼
▽ Triangle - down, outline
U+25BD ▽ ▽
▾ Triangle - down, small U+25BE ▾ ▾
▿ Triangle - down, outline, small U+25BF ▿ ▿
◀ Triangle - left U+25C0 ◀ ◀
◁ Triangle - left, outline U+25C1 ◁
◁
◂ Triangle - left, small U+25C2 ◂ ◂
◃ Triangle - left, outline, small U+25C3 ◃ ◃
Characters: Arrows ➔
Character Description ISO Hex Decimal
➔ Arrow
- ➔ ➔
➘ Arrow - southeast
-
➘ ➘
➙ Arrow - slanted
- ➙ ➙
➚ Arrow - northeast, slanted
- ➚ ➚
➛ Arrow - draftingpoint
- ➛ ➛
➜ Arrow - round-tipped
- ➜ ➜
➝ Arrow - triangle-headed
- ➝ ➝
➞ Arrow - triangle-headed, heavy
- ➞ ➞
➟ Arrow, triangle-headed, dashed
- ➟ ➟
➠ Arrow, triangle-headed, heavy, dashed
- ➠ ➠
➡ Arrow - triangle-headed, heavy
- ➡ ➡
➢ Arrow - 3D, topwards-lighted
- ➢ ➢
➣ Arrow - 3D, topwards-lighted
- ➣ ➣
➤ Arrow - arrowhead
- ➤ ➤
➥ Arrow - curved-downwards
- ➥ ➥
➦ Arrow - curved-upwards
- ➦ ➦
➧ Arrow - square
-
➧ ➧
➨ Arrow - concate
-
➨ ➨
➩ Arrow - 3D, rightshaded
-
➩ ➩
➪ Arrow - 3D, leftshaded
-
➪
➪
➫ Arrow - 3D, downshaded, backtilted
- ➫ ➫
➬ Arrow - 3D, upshaded, fronttilted
- ➬
➬
➭ Arrow, 3D, lower-rightshaded, heavy
- ➭ ➭
➮ Arrow, 3D, upper-rightshaded, heavy
- ➮ ➮
➱ Arrow - Circled - ➲ ➱
For more Arrows see websitebuilders.com/tools/html-codes/arrows/
Characters: CRUD ✁
Character Description ISO Hex Decimal
✁ Cut - down
- ✁ ✁
✂ Cut
-
✂ ✂
✃ Cut - up
- ✃ ✃
✄ Cut - outline
- ✃; ✄
✎ Edit - down
- ✎ ✎
✏ Edit
- ✏ ✏
✐ Edit - up
- ✐ ✐
✓ Checkmark - ✓ ✓
✔ Checkmark - heavy
- ✔ ✔
✕ Delete
-
✕ ✕
✖ Delete - heavy
- ✖ ✖
✗ Delete - slanted
- ✗ ✗
✘ Delete - slanted, heavy
- ✘ ✘
✚ Add - ✚ ✚
✙ Add - outline
- ✙ ✙
✛ Add - open-center
- ✛ ✛
✜ Add - black, open-center -
✜ ✜
Characters: Misc ∞
Character Description Named Hex Decimal
✭ Star - ✭ ✭
✩ Star - outline
- ✩ ✩
✪ Star - circle ✪ ✪
✱ Asterisk - ✱ ✱
✲ Asterisk - open-center
- ✲ ✲
❄ Snowflake - ❄ ❄
❆ Snowflake - heavy
- ❆ ❆
❅ Snowflake - trifoliate
- ❅ ❅
✆ Telephone - ✆ ✆
✉ Mail
- ✉ ✉
✻ Teardrop
- ✻ ✻
♥ Heart
♥ - ♥
♦ Diamond
♦ - ♦
♣ Clubs (Shamrock)
♣ - ♣
♠ Spade
♠ - ♠
∞ Infinity
∞ ∞ ∞
⌂ Home, House
- ⌂ ⌂
☰ Text, Heaven
- ☰ ☰
■ Large square
- - ■
▪ Small square
- - ▪