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

Icônes de flèches gratuites (SVG)

48 icônes de flèches issues de jeux open source : cliquez sur l'une d'elles pour modifier sa taille, sa couleur et son trait, puis copiez-la en SVG, JSX, data URI ou CSS.

Mis à jour le

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

Utiliser les icônes de flèches

Les flèches indiquent une direction : suivant et précédent, développer et réduire, ordre de tri, ou un lien qui quitte la page.

Toutes les icônes suivent currentColor, elles prennent donc la couleur de texte de l'élément qui les contient : un seul SVG fonctionne sur fonds clairs et sombres, dans les liens comme dans les boutons. Définissez explicitement width et height (ou dimensionnez-les en CSS avec 1em) pour que la mise en page ne bouge pas pendant le chargement de la page.

Icônes accessibles

Si l'icône est décorative ou placée à côté d'un texte visible, ajoutez aria-hidden="true". Si elle est le seul contenu d'un bouton ou d'un lien, donnez à cet élément un aria-label tel que « Flèche ».

Licences

Ces icônes de flèches proviennent de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons et Carbon : des jeux open source sous licences MIT, ISC ou Apache 2.0, qui autorisent un usage personnel et commercial. Besoin d'autre chose ? Recherchez parmi plus de 70 000 icônes dans le SVG Icon Finder.

Questions fréquentes

Ces icônes de flèches sont-elles gratuites pour un usage commercial ?
Oui. Elles proviennent de jeux d'icônes open source sous licences MIT, ISC ou Apache 2.0, qui autorisent l'usage commercial. Conservez la mention de licence si vous redistribuez les fichiers d'icônes eux-mêmes.
Comment changer la couleur d'une icône de flèche ?
Les SVG utilisent currentColor : définissez donc la couleur CSS de l'élément parent, ou ouvrez l'icône dans le moteur de recherche et choisissez une couleur fixe avant de la copier.
Puis-je utiliser ces icônes dans Webflow ou React ?
Oui. Ouvrez une icône et utilisez « Copier pour Webflow » (colle un Code Embed) ou « Copier en JSX » pour un composant React.