Arrow icon packs
Every direction, turn and loop you need for navigation, pagination and diagrams, drawn to one stroke so they line up.
72 packs · 6 styles · 4,320 icons · SVG and PNG
Line arrow icons
One-color outlines that take on your text color. Best for interfaces.
Flat arrow icons
Solid color artwork without outlines, for websites, apps and slides.
Line color arrow icons
Outlines filled with color. They pair well with line icon sets.
Solid arrow icons
Solid one-color shapes that stay clear at small sizes and in print.
Gradient arrow icons
Soft color gradients for landing pages, banners and presentations.
More styles arrow icons
Packs in mixed and less common styles.
Popular arrow icons
A mix of the most downloaded arrow icons across every style. Search to see the rest.
ArrowLineal Color
ArrowFlat
ArrowLineal Color
ArrowLineal Color
ArrowGradient
ArrowGradient
ArrowBlue
ArrowFlat
ArrowFlat
ArrowFlat
ArrowLineal
ArrowFlatChoosing 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.
Questions about arrow icons
Short answers on formats, editing and use.
When should I use a chevron instead of an arrow?
Use chevrons for moving within the current view, such as dropdowns, accordions and carousels, and full arrows for going somewhere new, such as the next page or an external link.
Do arrows need to flip in right-to-left languages?
Navigation arrows like back and next should be mirrored in Arabic and Hebrew. Arrows that show physical direction, such as a compass or a rotate icon, usually stay the same.
How do I keep arrows consistent with my text?
Use one pack and match the stroke weight to your font: about 2 px for semibold text and 1.5 px for regular text at 14–16 px.
Can I use arrow icons in commercial projects?
Yes. IconHub icons are free for personal and commercial projects with attribution. You can't resell them as files or use them in a logo. The license page has the full summary.
