Arrow Symbols on Your Web Page

Long before emojis colored people's messaging apps and inboxes, Web developers inserted special symbols into their webpages that are represented in the Unicode UTF-8 standard. To insert one of these Unicode symbols—for example, standard arrow characters—a developer must edit a webpage directly, by modifying the HTML that renders the page. 

For example, if you write a blog post using WordPress, you'll need to switch to the Text mode instead of Visual mode, togglable at the upper right corner of the composition box, to insert your special symbol.

How to Insert Arrow Symbols

You'll need one of three identifiers—the HTML5 entity code, the decimal code, or the hexadecimal code. Any of the three produces the same result. In general, entity codes start with an ampersand and end with a semicolon and in the middle relay an abbreviation summarizing what the symbol is. Decimal codes follow the format ampersand+hashtag+numeric code+semicolon, while hexadecimal codes insert the letter X between the hashtag and the numbers.

For example, a right-arrow symbol (←) inserts into the page by any of the following combinations:

 

I will display ←

 

I will display ←

 

 

I will display ←

 

 

Most Unicode symbols do not offer an entity code, so they must be assigned using the decimal or hexadecimal code instead.

These codes must be inserted directly into the HTML using some sort of text-mode or source-mode edit tool. Adding the symbols to a visual editor may not work, and pasting the Unicode character you want into a visual editor may not result in your intended effect.

Common Arrow Symbols

Use the following table to find a symbol you want. Unicode supports dozens of different types and styles of arrows. Looking at the Character Map on your Windows PC can help you identify specific styles of arrows. When you highlight a symbol, you'll frequently see a description at the bottom of the Character Map application window in the form of U+nnnn, where the numbers represent the decimal code for the symbol.

Note that not all Windows fonts display all forms of the Unicode symbols, so if you can't find what you want even after changing fonts inside of Character Map, consider alternate sources, including the summary pages for W3Schools.

Selected UTF-8 arrow symbols
CharacterDecimalHexadecimalEntityStandardized Name
85922190Leftwards Arrow
85932191Upwards Arrow
85942192Righwards Arrow
85952194Downwards Arrow
85972195 Up Down Arrow
863521BB Clockwise Open Circle Arrow
864821C8 Upwards Paired Arrows
870221FE Rightwards Open-Headed Arrow
869421F6 Three Rightward Arrows
867821E6 Leftwards White Arrow
867321E1 Upwards Dashed Arrow
866921DD Rightwards Squiggle Arrow

Considerations

Microsoft Edge, Internet Explorer 11, and Firefox 35 or newer browsers have no difficulty displaying the full range of Unicode characters captured in the UTF-8 standard. Google Chrome, however, intermittently misses some characters if they're presented solely using the HTML5 entity code.

UTF-8 serves as the default encoding for almost 90 percent of all webpages as of August 2017, according to Google. The UTF-8 standard includes characters beyond arrows. For example, UTF-8 supports characters including:

  • Currency symbols
  • Letterlike symbols that aren't letters
  • Mathematical operators
  • Geometric shapes
  • Boxlike shapes
  • Dingbats
  • Diacritical marks
  • Greek, Coptic, and Cyrillic characters

The procedure for inserting these additional symbols is exactly the same as it is for arrows.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Arrow Symbols on Your Web Page." ThoughtCo, Aug. 26, 2017, thoughtco.com/arrow-symbols-on-web-page-3466516. Kyrnin, Jennifer. (2017, August 26). Arrow Symbols on Your Web Page. Retrieved from https://www.thoughtco.com/arrow-symbols-on-web-page-3466516 Kyrnin, Jennifer. "Arrow Symbols on Your Web Page." ThoughtCo. https://www.thoughtco.com/arrow-symbols-on-web-page-3466516 (accessed November 19, 2017).