devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Iconos de flecha gratis (SVG)

48 iconos de flecha gratis de conjuntos de código abierto. Haz clic en uno para cambiar su tamaño, color y trazo, y cópialo como SVG, JSX, data URI o CSS.

Actualizado el

arrow-up
Lucidearrow-up
Tablerarrow-up
Heroiconsarrow-up
Phosphorarrow-up
Bootstrap Iconsarrow-up
Iconoirarrow-up-12-filled
Fluent UIline-end-arrow
Material Symbolsarrow
Material Design Iconsarrow-up
Carbonbow-arrow
Lucidearrow-back
Tablerarrow-up-16-solid
Heroiconsarrow-up-bold
Phosphorarrow-down
Bootstrap Iconsarrow-down
Iconoirarrow-up-12-regular
Fluent UIarrow-back
Material Symbolsarrow-up
Material Design Iconsarrow-down
Carbona-arrow-up
Lucidearrow-down
Tablerarrow-up-20-solid
Heroiconsarrow-up-duotone
Phosphorarrow-left
Bootstrap Iconsarrow-left
Iconoirarrow-up-16-filled
Fluent UIarrow-back-rounded
Material Symbolsarrow-up-bold
Material Design Iconsarrow-left
Carbonarrow-down
Lucidearrow-fork
Tablerarrow-up-solid
Heroiconsarrow-up-fill
Phosphormaps-arrow
Iconoirarrow-up-16-regular
Fluent UIarrow-left
Material Symbolsarrow-up-thin
Material Design Iconsarrow-left
Lucidearrow-left
Tablerarrow-up-light
Phosphorpath-arrow
Iconoirarrow-up-20-filled
Fluent UIarrow-left-rounded
Material Symbolsarrow-all
Material Design Iconsarrow-up-thin
Phosphorpath-arrow-solid
Iconoirarrow-up-20-regular
Fluent UI

Uso de iconos de flecha

Las flechas indican dirección: siguiente y atrás, expandir y contraer, orden de clasificación o un enlace que sale de la página.

Todos los iconos de aquí siguen currentColor, así que toman el color de texto del elemento en el que están: un mismo SVG funciona en fondos claros y oscuros, en enlaces y en botones. Define un width y un height explícitos (o dimensiónalos en CSS con 1em) para que el diseño no se desplace mientras carga la página.

Iconos accesibles

Si el icono es decorativo o va junto a texto visible, añade aria-hidden="true". Si es el único contenido de un botón o enlace, dale a ese elemento un aria-label como “Flecha”.

Licencias

Estos iconos de flecha provienen de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons y Carbon: conjuntos de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso personal y comercial. ¿Necesitas algo más? Busca entre más de 70.000 iconos en el Buscador de iconos SVG.

Preguntas frecuentes

¿Son gratis estos iconos de flecha para uso comercial?
Sí. Provienen de conjuntos de iconos de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso comercial. Conserva el aviso de licencia si redistribuyes los propios archivos de los iconos.
¿Cómo cambio el color de un icono de flecha?
Los SVG usan currentColor, así que define el color CSS del elemento padre. También puedes abrir el icono en el buscador y elegir un color fijo antes de copiarlo.
¿Puedo usar estos iconos en Webflow o React?
Sí. Abre un icono y usa Copiar para Webflow (pega un Code Embed) o Copiar JSX para un componente de React.