Utiliser vos propres icônes SVG

Vos propres pictogrammes peuvent rendre votre site plus reconnaissable. Un SVG est une image vectorielle : il reste net quand vous changez sa taille. Vous pouvez le choisir dans le même sélecteur que les icônes de la bibliothèque.

1. Sélectionner un élément icône

Dans Design, passez en Expert, puis sélectionnez l’icône dans la page ou dans Calques. Expert donne accès aux réglages visuels, sans code. Dans le groupe Image, ouvrez Icône, puis gardez le Sélecteur d’icônes.

Ces commandes concernent un élément icône. Si votre logo est un élément image, utilisez plutôt le choix d’une image. Pour chercher une icône déjà fournie, consultez la bibliothèque d’icônes.

2. Importer vos SVG

Ouvrez le choix de l’icône, puis l’onglet SVG personnalisés. Cliquez sur Télécharger des icônes SVG, choisissez un ou plusieurs fichiers SVG sur votre ordinateur et attendez leur apparition dans la liste. Malgré son libellé, ce bouton importe vos fichiers dans le projet.

Donnez-leur des noms faciles à reconnaître, par exemple « alma-feuille.svg » et « alma-soleil.svg ». Les fichiers importés restent dans la bibliothèque et peuvent être réutilisés. Importer un fichier ne l’applique pas automatiquement : choisissez-le dans la liste.

Vous avez besoin du fichier vectoriel d’origine. Renommer une photographie avec l’extension .svg ne la transforme pas en icône. Un pictogramme simple, avec peu de détails, reste généralement plus lisible à petite taille.

3. Retrouver et choisir une icône

Saisissez une partie du nom dans le champ de recherche, puis cliquez sur le pictogramme voulu. Le rendu de la page se met à jour. Effacez la recherche pour retrouver les autres fichiers.

Vous pouvez rouvrir le sélecteur et choisir un autre SVG, ou revenir à Iconify pour utiliser une icône de bibliothèque. Changer le pictogramme de cet élément ne change pas toutes les autres icônes du site.

4. Régler la taille et la couleur

Réglez Largeur et Hauteur dans Taille. Pour un pictogramme carré, choisissez la même valeur dans les deux champs. Dans la démonstration, la valeur 16 correspond à 64 pixels. Choisissez une taille adaptée à la place de l’icône, puis observez la page.

Le groupe Texte, réglage Couleur, peut donner à l’icône une couleur de votre thème. Le résultat dépend du SVG :

• Un SVG prévu pour reprendre la couleur du texte suit ce choix. La feuille de la démonstration reprend cette couleur dans le builder et sur le site publié.
• Un SVG contenant des couleurs fixes les conserve. Le soleil de la démonstration reste doré et vert, même si la couleur du texte change.

La démonstration contrôle les deux cas : la feuille suit la couleur du thème dans le builder et après publication ; le soleil conserve les couleurs de son fichier. Attendez la fin du chargement du SVG avant de comparer les rendus.

Si une icône ne change pas de couleur, cela ne signifie donc pas forcément que le réglage a échoué. Pour obtenir une icône monochrome recolorable, demandez à la personne qui fournit le SVG une version adaptée. Pour conserver une illustration multicolore, gardez ses couleurs d’origine.

Ne comptez pas sur la couleur seule pour expliquer une action. Accompagnez une commande importante d’un texte clair, surtout si son pictogramme peut avoir plusieurs sens.

5. Enregistrer et vérifier le résultat

Passez au cadre mobile et contrôlez la lisibilité. Enregistrez, rechargez la page et vérifiez que le pictogramme et ses dimensions sont conservés. Ouvrez ensuite la prévisualisation publiée sur ordinateur et téléphone.

Vérifiez la netteté, les couleurs et la place autour de l’icône. Si le fichier s’affiche différemment de l’original, vérifiez aussi son export SVG ; une image importée comme icône et une image affichée directement ne passent pas par le même rendu. Avant de supprimer un SVG du gestionnaire de fichiers, vérifiez ses utilisations sur les pages.