Arrow icon packs
Every direction, turn and loop you need for navigation, pagination and diagrams, drawn to one stroke so they line up.
72 pacotes · 6 estilos · 4.458 ícones · SVG e PNG
Ícones de arrow Linha
Contornos de uma cor que assumem a cor do seu texto. Ideais para interfaces.
Ícones de arrow Flat
Arte de cor sólida sem contornos, para sites, apps e slides.
Ícones de arrow Sólido
Formas sólidas de uma cor que continuam claras em tamanhos pequenos e impressas.
Ícones de arrow Linha colorida
Contornos preenchidos com cor. Combinam bem com conjuntos de ícones de linha.
Ícones de arrow Gradiente
Gradientes de cor suaves para landing pages, banners e apresentações.
Ícones de arrow Mais estilos
Pacotes em estilos mistos e menos comuns.
Ícones de arrow populares
Uma mistura dos ícones de arrow mais baixados em todos os estilos. Busque para ver o resto.
ArrowGradient
ArrowLineal Color
ArrowFlat
ArrowLineal Color
ArrowLineal Color
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.
Perguntas sobre ícones de arrow
Respostas curtas sobre formatos, edição e uso.
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.
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.
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.
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.
