Arrow Symbols for Website UI

The → right arrow tends to show up in plain text whenever next steps, flow notes, directional captions need more structure or visual direction.

This left arrow is most useful in text-heavy layouts built around back navigation, pointing back, reverse flow where the character has to do real visual work.

This up arrow is most useful in text-heavy layouts built around upward movement, scroll hints, growth labels where the character has to do real visual work.

The ↓ down arrow is commonly copied for drop-down cues, downward movement, scroll hints when the goal is structure, not just decoration.

The ↖ north west arrow is commonly copied for diagonal direction, corner movement, layout cues when the goal is structure, not just decoration.

The ↗ north east arrow is commonly copied for diagonal up-right movement, outbound hints, trend cues when the goal is structure, not just decoration.

Users usually reach for the ↘ south east arrow in workflows involving down-right direction, corner navigation, motion cues because it keeps the layout readable and copy-ready.

Users usually reach for the ↙ south west arrow in workflows involving down-left direction, corner navigation, motion cues because it keeps the layout readable and copy-ready.

The ↪ rightwards arrow with hook is commonly copied for follow-on actions, redirected flow, reply chains when the goal is structure, not just decoration.

This anticlockwise open circle arrow is most useful in text-heavy layouts built around refresh notes, rotation, repeat actions where the character has to do real visual work.

The ↻ clockwise open circle arrow tends to show up in plain text whenever reload cues, repeat loops, rotation hints need more structure or visual direction.

The ⇐ leftwards double arrow tends to show up in plain text whenever reverse mapping, logic notes, backward relation need more structure or visual direction.

The ⇑ upwards double arrow tends to show up in plain text whenever elevation cues, priority markers, upward emphasis need more structure or visual direction.

Users usually reach for the ⇓ downwards double arrow in workflows involving drop markers, lower sections, downward emphasis because it keeps the layout readable and copy-ready.

This rightwards arrow over leftwards arrow is most useful in text-heavy layouts built around swap controls, exchange flow, switching where the character has to do real visual work.

This leftwards arrow over rightwards arrow is most useful in text-heavy layouts built around bidirectional movement, exchange actions, toggle flow where the character has to do real visual work.

The ➔ heavy wide headed rightwards arrow is commonly copied for strong calls to action, hero buttons, visual next steps when the goal is structure, not just decoration.

The ➜ heavy round-tipped rightwards arrow is commonly copied for prominent callouts, button text, attention guides when the goal is structure, not just decoration.

This heavy black curved downwards and rightwards arrow is most useful in text-heavy layouts built around curved flow, soft directional cues, layout guidance where the character has to do real visual work.

The ➞ heavy dashed triangle-headed rightwards arrow is commonly copied for process steps, diagram flow, tutorial cues when the goal is structure, not just decoration.

The ➟ heavy black dashed upwards and downwards arrow tends to show up in plain text whenever movement hints, step diagrams, process direction need more structure or visual direction.