Arrow icon packs

Choosing arrow icons

Arrows are among the most used icons in any interface: back buttons, dropdowns, pagination, sliders, sort controls and diagrams. Small differences between them add up, so consistency matters more here than almost anywhere else.

Chevron or arrow?

• Chevrons, the simple ">" shape, suggest moving within something: opening a dropdown, expanding a row, going to the next slide.
• Full arrows with a shaft suggest going somewhere: a new page, the next step, an external link.

Using both for the same action on one screen makes an interface feel unsure, so give each one a meaning and stick to it.

Match weight and size

Arrows sit next to text in buttons and links, so match their stroke to the font. A 2 px stroke usually pairs with semibold text at 14–16 px, while lighter text looks better with 1.5 px. You can adjust the line weight in the editor before downloading.

Right-to-left languages

In Arabic, Hebrew and other right-to-left languages, back and next arrows point the other way. Icons that show direction in navigation or time should be mirrored; icons that show real-world direction, like a compass, should not. Flipping one SVG with transform: scaleX(-1) keeps both versions identical.

Sorting and tables

Sortable table headers need three states: unsorted, ascending and descending. A pair of small up and down arrows, with the active direction darker, is widely understood. Keep these arrows smaller than the header text so they don't pull attention away from the column names.

Diagrams and flowcharts

Curved, looped and bent arrows connect steps in diagrams and onboarding illustrations. Line color and flat packs give you matching shapes in several colors, which helps show different paths through a process.

Before you download

• Decide where you use chevrons and where you use arrows, and write it down for your team.
• Match the stroke weight to your body font.
• List the directions you need, including diagonals and curved arrows.
• Check which icons should mirror in right-to-left layouts.
• Use one SVG per shape and rotate it with CSS instead of mixing drawings.

See also business icons for charts and reports, or search arrow icons by direction.