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.
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 | ◃ | ◃ |
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 | - | ➲ | ➱ |
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 |
- |
✜ | ✜ |
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 |
- | - | ▪ |