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.

260025A0260E25AE
260125A1260F25AF
260225A2261021C9
260325A3261121CA
260425A4261225B2
260525A5261325B3
260625A6261425B4
260725A7261525B5
25A8261625B621CF
260925A9261725B7
260A25AA261825B8
260B25AB261925B9
260C25AC261A25BA
260D25AD261B25BB
267823F6268621D5
267923F726872190
267A23F826882191
267B23F926892192
267C23FA268A2193
267D2390219421DA
267E2391219521DB
267F2392219621DC
2680219721DD269C
26812394219821DE
2682239626902199
268323972691219A
268423982692219B
268523992693219C
26CC26CF26D226D5
26CD26D026D326D6
26DA26DE2.60E+022.60E+05
21EE231521F421F5
262A25CA264025D8
262B25CB264125D9
25CC2642265025EE
25CD2643265125EF
262E25CE26442652
262F25CF26452653
263825D026462654
263925D126472655
25D22648265623C4
263B25D326492.50E+08
263C25D4264A2.50E+09
263D25D5264B2.50E+10
263E25D6264C25EA
263F25D7264D25EB
21AB26B021B926F2
26A321AC26B121BA
26A421AD26B221BB
26A521AE26B326F5
26A621AF26B426F6
21B026B526F726C3
21B126B626F826C4
21B226B726F926C5
26B826FA26C62672
21B426B926FB26C7
26AC21B526BA26FC
26AD21B626BB21C4
26AE21B726BC21C5
26AF21B826BD21C6
2.60E+032.60E+0926EB26EF
2.60E+042.60E+1026ED26F0
2.10E+0921F321FC21FD
21F2235F23F423F5
21C7261C25BC2670
21C8261D25BD2671
261E25BE262C231B
261F25BF262D2673
21CB262025C026C8
21CC262125C126FD
21CD262225C226FE
21CE262325C326FF
262425C4263A26EC
21D0262525C526DB
21D1262625C621FE
21D2262725C726D1
21D3262825C82319
21D4262925C9231A
2694219D26A221F9
21D62695219E21FA
21D72696219F2674
21D8269721A026C9
21D9269821A126CA
269921A226A72.60E+08
269A21A326A82.60E+06
269B21A426A92.60E+07
21A526AA21B321FF
269D21A626AB26D4
21DF269E21A721F6
2.10E+01269F21A821F7
2.10E+0226A021A921F8
2.10E+0326A121AA2.10E+07
26D826DC26DF2.10E+08
26D926DD2.60E+0121FB
26EA26EE26F12675
21EF21F021F12676
264E25EC265C2677
264F25ED265D26CE
265E2.10E+062.10E+0426CB
265F23CD2.10E+0526D7
23C0266823CE2660
23C1266923CF2661
23C221ED2.10E+102662
23C3266B21EA2663
266421EB21EC2665
265723C5266C2666
265823C623162667
265923C72317266A
265A23C8266E26BF
265B23C9231826C0
26BE26F426C2266D
26F326C1266F

Leave a Reply

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