Improve your navigation and design with free and easy Unicode symbols to complement links

It doesn’t have to cost anything to improve your user experience and make links look more like, well, links. We’re accustomed to a modern navigation experience driven not just by underlined text anymore but by visual cues. We rely on iconography and buttons to get us more quickly from A to B.

So if you can’t (or don’t want to) install an icon library like Font Awesome, and if you’re not using a web part that has the built-in Office UI Fabric icons (such as the Quick Links web part), why not stick to the basics and use Unicode characters? While limited, you still have some great options for quick wins.

Note: These characters appear slightly different in different browsers or when used with pre-existing themes. For example, when writing this post they’re black-and-white, but when published, my styles are applied which give them color. They may also look different on a mobile device than they do on desktop.

Compart has a great listing of all the Unicode symbols you can search and filter. Here are a few examples I selected that could be useful:

☎ Directory
♻ Recycle vs Trash FAQ
♬ Fall Concert Details
☂ Inclement weather procedures
⛱ Vacation Requests
⛟  Track a Delivery
☃ Winter Sale

How to use Unicode characters on your site

Example used in the left navigation

To use Unicode characters, you can either:

  • Copy and paste the actual symbol -OR-
  • In your html, wrap the four-digit number in &#x and ; as follows

♥

Here are many more icons, some of which might have purpose in your organization. You can also download this excel file for easier viewing/customizing.

2600

25A0 260E 25AE
2601 25A1 260F 25AF
2602 25A2

2610 21C9
2603 25A3 2611 21CA
2604 25A4 2612 25B2
2605 25A5 2613 25B3
2606 25A6 2614 25B4
2607 25A7 2615 25B5
25A8 2616 25B6 21CF
2609 25A9 2617 25B7
260A 25AA 2618 25B8
260B 25AB 2619 25B9
260C 25AC 261A 25BA
260D 25AD 261B 25BB
2678 23F6 2686 21D5
2679 23F7 2687

2190
267A 23F8 2688 2191
267B 23F9 2689 2192
267C 23FA 268A 2193
267D 2390 2194 21DA
267E 2391 2195 21DB
267F 2392 2196 21DC

2680 2197 21DD 269C
2681 2394 2198 21DE
2682 2396

2690 2199
2683 2397 2691 219A
2684 2398 2692 219B
2685 2399 2693 219C
26CC 26CF 26D2 26D5
26CD

26D0 26D3 26D6
26DA 26DE 2.60E+02 2.60E+05
21EE 2315 21F4 21F5
262A 25CA

2640 25D8
262B 25CB 2641 25D9
25CC 2642

2650 25EE
25CD 2643 2651 25EF
262E 25CE 2644 2652
262F 25CF 2645 2653
2638

25D0 2646 2654
2639 25D1 2647 2655
25D2 2648 2656 23C4
263B 25D3 2649 2.50E+08
263C 25D4 264A 2.50E+09
263D 25D5 264B 2.50E+10
263E 25D6 264C 25EA
263F 25D7 264D 25EB
21AB

26B0 21B9 26F2
26A3 21AC 26B1 21BA
26A4 21AD 26B2 21BB
26A5 21AE 26B3 26F5
26A6 21AF 26B4 26F6

21B0 26B5 26F7 26C3
21B1 26B6 26F8 26C4
21B2 26B7 26F9 26C5
26B8 26FA 26C6 2672
21B4 26B9 26FB 26C7
26AC 21B5 26BA 26FC
26AD 21B6 26BB 21C4
26AE 21B7 26BC 21C5
26AF 21B8 26BD 21C6
2.60E+03 2.60E+09 26EB 26EF
2.60E+04 2.60E+10 26ED

26F0
2.10E+09 21F3 21FC 21FD
21F2

235F 23F4 23F5
21C7 261C 25BC

2670
21C8 261D 25BD 2671
261E 25BE 262C 231B
261F 25BF 262D 2673
21CB

2620

25C0 26C8
21CC 2621 25C1 26FD
21CD 2622 25C2 26FE
21CE 2623 25C3

26FF
2624 25C4 263A 26EC

21D0 2625 25C5 26DB
21D1 2626 25C6 21FE
21D2 2627 25C7 26D1
21D3 2628 25C8 2319
21D4 2629 25C9 231A
2694 219D 26A2 21F9
21D6 2695 219E 21FA
21D7 2696 219F 2674
21D8 2697

21A0 26C9
21D9 2698 21A1 26CA
2699 21A2 26A7 2.60E+08
269A 21A3 26A8 2.60E+06
269B 21A4 26A9 2.60E+07
21A5 26AA 21B3 21FF
269D 21A6 26AB 26D4
21DF 269E 21A7 21F6

2.10E+01 269F 21A8 21F7
2.10E+02

26A0 21A9 21F8
2.10E+03 26A1 21AA 2.10E+07
26D8 26DC 26DF 2.10E+08
26D9 26DD

2.60E+01 21FB
26EA 26EE 26F1 2675
21EF

21F0 21F1 2676
264E 25EC 265C 2677
264F 25ED 265D 26CE
265E 2.10E+06 2.10E+04 26CB
265F 23CD 2.10E+05 26D7

23C0 2668 23CE

2660
23C1 2669 23CF 2661
23C2 21ED 2.10E+10 2662
23C3 266B 21EA 2663
2664 21EB 21EC 2665
2657 23C5 266C 2666
2658 23C6 2316 2667
2659 23C7 2317 266A
265A 23C8 266E 26BF
265B 23C9 2318

26C0
26BE 26F4 26C2 266D
26F3 26C1 266F

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.