Icônes d'outils de design : 48 icônes ligne offertes (vecteurs, structure, alignement, typographie, couleur, export)

Ce pack réunit 48 icônes ligne consacrées aux gestes des outils de design, livrées en SVG, en PNG et en sprite SVG, gratuites avec un compte et sous licence commerciale. Il s’adresse aux designers et aux développeurs qui construisent un éditeur graphique en ligne, un générateur de visuels, la barre d’outils d’une extension, la documentation d’un design system, un support de formation ou un tutoriel : tracer à la plume, combiner des formes, grouper des calques, gérer composants et variantes, aligner et répartir, régler la typographie, choisir une couleur, exporter et passer la main aux développeurs. Pour choisir les extensions utiles à chacune de ces tâches, voyez le guide des plugins par tâche. Chaque fichier porte un nom anglais simple (pen, auto-layout, dev-handoff), que vous reprenez tel quel dans votre code. Toutes les icônes partagent le même trait, sans remplissage, avec des terminaisons arrondies, pour qu’une barre d’outils, un panneau de propriétés et un menu d’export restent dans un seul style.

Le pack ne contient aucune marque : aucun logo de logiciel, aucune icône d’interface recopiée d’un outil existant, aucun sigle de format dessiné. Les gestes sont redessinés pour se lire hors de tout logiciel.

• 48 icônes en style ligne, réparties en 6 familles de 8 :
  • Vecteurs (8) : pen, bezier-point, anchor-add, anchor-remove, path-close, boolean-union, boolean-subtract, boolean-intersect ;
  • Structure (8) : group-objects, ungroup-objects, component, instance, variant, detach, mask, auto-layout ;
  • Alignement (8) : distribute-horizontal, distribute-vertical, align-center-objects, grid-columns, grid-baseline, ruler, guide, spacing ;
  • Typographie (8) : type-tool, font-size, line-height, letter-spacing, text-box, text-on-path, glyph, variable-font ;
  • Couleur (8) : eyedropper, swatch, gradient-linear, gradient-radial, opacity, blend-mode, palette, contrast-check ;
  • Export et passation (8) : export-svg, export-png, slice, measure, inspect-code, dev-handoff, comment-pin, version-history.
• 48 fichiers SVG, un par icône.
• 144 fichiers PNG : chaque icône en 24, 48 et 96 px.
• 1 sprite SVG qui rassemble les 48 icônes sous forme de symboles.
• 1 page HTML de démonstration.

Quelques choix de dessin à connaître avant de télécharger. Les trois opérations booléennes partent des mêmes deux cercles qui se chevauchent : boolean-union garde le contour extérieur, boolean-subtract un croissant, boolean-intersect la lentille centrale. Les quatre icônes de composants partagent une brique : seule pour component, doublée d’une copie décalée pour instance, posée sur un socle pour variant, au contour rompu en tirets pour detach. export-svg et export-png partagent un cadre d’où sort une flèche : une courbe lisse à l’intérieur pour le vectoriel, une ligne de crêtes pour l’image. Aucune icône ne porte de sigle de format, et la typographie n’emploie qu’une lettre à la fois.

Certains sujets n’ont pas de dessin que tout le monde reconnaît au premier regard : opacity (deux carrés superposés), blend-mode (un carré et un rond superposés), mask (une image recadrée dans un rond), auto-layout (deux blocs dans un cadre), variant et detach. Dans une interface, doublez-les d’un libellé ou d’une infobulle.

Le pack suit la même grille que les autres packs d’icônes ligne de Beryl Design : même trait, mêmes rayons et mêmes terminaisons arrondies. Si vous utilisez déjà l’un de ces packs, les icônes se combinent dans une même interface sans retouche, et aucun nom de fichier n’y fait doublon.

Organisation des fichiers :

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

Fabrication et IA

Les icônes ont été dessinées en SVG avec un assistant d’IA, sur la grille de la gamme, puis rendues, mesurées et relues une à une : vérification de la grille, du trait et de la zone utile, rendu sur planche à 24 et à 48 px, puis relecture finale de chaque icône. Le pack ne contient aucune image produite par un générateur d’images.

• SVG : vecteurs sans remplissage dont le trait prend la couleur du texte (currentColor). Vous changez la couleur avec la propriété CSS color et l’épaisseur avec l’attribut stroke-width, posé une seule fois sur la balise racine. Les fichiers s’ouvrent dans la plupart des outils de design et s’utilisent directement dans le code (HTML, composants).
• PNG 24, 48 et 96 px : icônes noires sur fond transparent, pour une présentation, un document, une maquette ou un logiciel qui n’importe pas le SVG.
• Sprite SVG : un fichier unique où chaque icône est un <symbol> portant le nom de son fichier, à appeler par <use href="#pen"/>.
• HTML : une page de démonstration autonome, sans script ni ressource externe, qui affiche les icônes par famille en 24, 48 ou 96 px et en plusieurs couleurs, y compris sur fond sombre.

Les icônes sont livrées sous licence commerciale : vous pouvez les 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.

• Bibliothèque d’éléments ou système complet : la différence entre UI kit et design system.
• Des composants qui s’adaptent à leur contenu : maîtriser la mise en page automatique.

1.0.0 (13 novembre 2026) : première version.