Choisir et personnaliser une icône

Une icône aide à reconnaître une action ou une idée. Choisissez un pictogramme simple, puis vérifiez qu’il reste lisible à la taille prévue. Pour une commande importante, un texte visible évite les ambiguïtés.

1. Ouvrir la bibliothèque

Dans Design, passez en Expert et sélectionnez l’icône dans la page ou dans Calques. Les réglages restent visuels, sans code. Dans Image, ouvrez Icône et utilisez le Sélecteur d’icônes.

Si vous avez sélectionné une photographie ou le conteneur autour du pictogramme, ce réglage ne correspond pas à cet élément. Retrouvez l’icône dans les calques. Un élément image se règle avec les commandes d’image.

2. Rechercher et remplacer un pictogramme

Ouvrez le choix de l’icône. Dans Iconify, choisissez une famille dans la liste, puis saisissez un nom dans la recherche. Les familles regroupent des pictogrammes ayant une apparence cohérente.

Les noms viennent des bibliothèques et sont souvent en anglais. Dans la démonstration, nous choisissons Lucide, puis cherchons « heart » pour trouver un cœur. Essayez un terme simple si votre recherche ne donne rien. Attendez le chargement de la famille avant de choisir un résultat.

Cliquez sur le pictogramme souhaité : il remplace celui de cet élément et apparaît dans la page. Le nom du choix reste visible dans le panneau. Vous pouvez rouvrir la bibliothèque et choisir une autre icône. Pour un fichier personnel, utilisez les SVG personnalisés.

3. Régler la taille

Dans Taille, réglez Largeur et Hauteur. Pour un pictogramme carré, choisissez la même valeur dans les deux champs. Dans la vidéo, la valeur 16 correspond à 64 pixels ; ce nombre n’est pas une taille de police.

Adaptez les dimensions à l’endroit où le pictogramme apparaît. Un grand symbole d’illustration et une petite icône dans un bouton n’ont pas le même besoin. Vérifiez aussi les dimensions et leur unité.

4. Choisir la couleur

Dans Texte, ouvrez Couleur et choisissez une couleur du thème. Les traits du cœur de la démonstration reprennent cette couleur. Ce réglage concerne le pictogramme sélectionné ; il ne recolore pas toutes les icônes du site.

Certaines icônes de bibliothèque sont multicolores et peuvent conserver des couleurs intégrées. Observez le résultat au lieu de supposer que chaque partie suivra la couleur du texte. Gardez un contraste suffisant avec le fond et ne transmettez pas une information uniquement par la couleur.

5. Enregistrer et contrôler les langues et les écrans

Enregistrez, puis rechargez la page. Le choix, sa taille et sa couleur doivent être conservés. Si le site possède plusieurs langues, changez la langue du contenu et vérifiez que le pictogramme commun est toujours retrouvé. La langue de l’interface du builder et celle du contenu sont deux choix différents.

La démonstration retrouve le même cœur dans la langue secondaire après rechargement. Elle vérifie ensuite les deux langues sur le site publié, sur ordinateur et téléphone. Un choix commun s’applique lorsqu’aucune valeur propre à la langue ne le remplace.

Ouvrez la prévisualisation publiée et contrôlez la lisibilité dans son contexte. Une icône qui accompagne un lien doit toujours laisser comprendre sa destination ou son action.