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 Stile · 4.320 Icons · SVG und PNG
arrow-Icons: Linie
Einfarbige Konturen, die die Textfarbe übernehmen. Ideal für Oberflächen.
arrow-Icons: Flach
Flächige Farbgrafiken ohne Konturen, für Websites, Apps und Präsentationen.
arrow-Icons: Linie farbig
Mit Farbe gefüllte Konturen, passend zu Linien-Icon-Sets.
arrow-Icons: Gefüllt
Gefüllte, einfarbige Formen, die auch klein und im Druck klar bleiben.
arrow-Icons: Verlauf
Weiche Farbverläufe für Landingpages, Banner und Präsentationen.
arrow-Icons: Weitere Stile
Packs in gemischten und selteneren Stilen.
Beliebte arrow-Icons
Eine Mischung der meistgeladenen arrow-Icons aus allen Stilen. Suche, um den Rest zu sehen.
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.
Fragen zu arrow-Icons
Kurze Antworten zu Formaten, Bearbeitung und Nutzung.
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.
