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 estilos · 4458 iconos · SVG y PNG
Iconos de arrow: Línea
Contornos de un solo color que toman el color del texto. Ideales para interfaces.
Iconos de arrow: Plano
Ilustraciones de color sólido sin contornos, para webs, apps y presentaciones.
Iconos de arrow: Sólido
Formas sólidas de un color que se leen bien en tamaños pequeños y al imprimir.
Iconos de arrow: Línea a color
Contornos rellenos de color. Combinan bien con sets de iconos de línea.
Iconos de arrow: Degradado
Degradados suaves para landing pages, banners y presentaciones.
Iconos de arrow: Más estilos
Packs en estilos mixtos y menos comunes.
Iconos populares de arrow
Una selección de los iconos de arrow más descargados en todos los estilos. Busca para ver el resto.
FlechaGradient
FlechaLineal Color
FlechaFlat
FlechaLineal Color
FlechaLineal Color
FlechaGradient
FlechaBlue
FlechaFlat
FlechaFlat
FlechaFlat
FlechaLineal
FlechaFlatChoosing 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.
Preguntas sobre iconos de arrow
Respuestas breves sobre formatos, edición y 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.
