How to Insert Arrow Symbols on Your Web Page

Turn to Unicode for all kinds of symbols

Inserting an arrow (and other symbols) into a blog post or web page is simply a matter of typing the right key combinations into the page's HTML. These keystrokes are based on Unicode, which web browsers recognize and render into the desired symbols.

For example, when writing a blog post using WordPress, you'd switch to Text mode instead of Visual mode (a toggle switch in 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; in the middle is an abbreviation summarizing what the symbol is. Decimal codes follow the format ampersand+hashtag+numeric code+semicolon, and hexadecimal codes insert the letter X between the hashtag and the numbers.

For example, to produce a left-arrow symbol (←), type any of the following combinations:

  • HTML: ←
  • Decimal: ←
  • Hexadecimal: ←

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

You must insert these codes directly into the HTML using a text-mode or source-mode edit tool. Adding the symbols to a visual editor might not work, and pasting the Unicode character you want into a visual editor might not result in your intended effect.

Common Arrow Symbols

Use the following table to find the symbol you need. Unicode supports dozens of different types and styles of arrows. Looking at the Character Map on your computer 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.

Character Decimal Hexadecimal Entity Standardized Name
8592 2190 Leftwards Arrow
8593 2191 Upwards Arrow
8594 2192 Rightwards Arrow
8595 2194 Downwards Arrow
8597 2195 Up Down Arrow
8635 21BB Clockwise Open Circle Arrow
8648 21C8 Upwards Paired Arrows
8702 21FE Rightwards Open-Headed Arrow
8694 21F6 Three Rightward Arrows
8678 21E6 Leftwards White Arrow
8673 21E1 Upwards Dashed Arrow
8669 21DD Rightwards Squiggle Arrow
Selected UTF-8 arrow symbols

Considerations

Microsoft Edge, Internet Explorer 11, and Firefox 35 and 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 web pages as of November 2018, according to Google. The UTF-8 standard includes characters beyond arrows, too. For example, UTF-8 supports characters including:

  • Currency symbols
  • Letter-like 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.