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
- - ▪