Flèches et chevrons ligne, 24 icônes offertes

Ce pack s’adresse aux designers UI et aux développeurs front-end qui ont besoin de flèches et de chevrons cohérents pour la navigation d’une interface : menus déroulants, pagination, carrousels, retours en arrière, liens externes, annulation ou actualisation. Toutes les icônes sont dessinées sur la même grille, avec la même épaisseur de trait et des extrémités arrondies. Vous pouvez donc les mêler sans écart de style, dans une maquette comme dans le code.

• 24 icônes en style ligne, réparties en 3 familles de 8 :
  • Flèches : arrow-up, arrow-down, arrow-left, arrow-right, arrow-up-right, arrow-up-left, arrow-down-right, arrow-down-left ;
  • Chevrons : chevron-up, chevron-down, chevron-left, chevron-right, chevrons-up, chevrons-down, chevrons-left, chevrons-right ;
  • Doubles et actions : arrow-up-down, arrow-left-right, undo, redo, refresh, external-link, expand, collapse.
• 24 fichiers SVG, un par icône.
• 72 fichiers PNG : chaque icône en 24, 48 et 96 px.
• 1 sprite SVG qui regroupe les 24 icônes sous forme de symboles.
• 1 page HTML de démonstration.

Organisation de l’archive :

svg/
png/24/
png/48/
png/96/
sprite/line-arrow-icons.svg
demo/index.html

Fabrication et IA

Les icônes ont été dessinées en SVG avec un assistant d’IA, puis relues et contrôlées une à une : rendu à 24 et à 48 px, puis relecture de chaque icône sur planche avant la mise en vente. Le pack ne contient aucune image générée par IA.

• SVG : fichiers vectoriels, sans remplissage, dont le trait suit la couleur du texte (currentColor). La couleur se change avec la propriété CSS color, l’épaisseur du trait avec l’attribut stroke-width de la balise racine. Ces fichiers SVG s’utilisent dans la plupart des outils de design et directement dans le code (HTML, composants).
• PNG 24 px, 48 px et 96 px : icônes noires sur fond transparent, pour les logiciels qui n’importent pas le SVG, comme les outils de présentation ou de traitement de texte.
• Sprite SVG : un seul fichier, où chaque icône est un <symbol> appelé par son nom avec <use>, pour n’insérer qu’une fois le dessin des icônes dans une page web.
• HTML : une page de démonstration, sans script ni ressource externe, à ouvrir dans un navigateur pour voir toutes les icônes.

Le pack est livré sous licence commerciale : vous pouvez l’utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les produits que vous vendez, mais pas revendre ni redistribuer les fichiers, même gratuitement.

• Produire une série d’icônes cohérente : méthode et rejets
• Organiser les espacements d’une interface sur une grille

1.0.0 (2026-11-10) : première version.