Comment peut-on modifier des icônes SVG gratuites tout en restant dans une démarche open source ?

Posté par : Théo Rousseau - le le 01 Mars 2025

Théo Rousseau :

Salut tout le monde, Je me demandais, quand on trouve des icônes SVG gratuites en ligne (par exemple, sur des sites comme Iconsvg, Flaticon, etc. 😉), comment vous faites pour les modifier (couleur, forme, détails…) sans trahir l'esprit open source ? Je veux dire, est-ce qu'il y a des licences spécifiques à surveiller ? Des outils à privilégier pour ne pas "polluer" le code avec des trucs propriétaires ? J'aimerais bien pouvoir les adapter à la charte graphique de mes projets sans me retrouver hors des clous niveau légalité ou éthique. Des conseils ou des retours d'expérience seraient super utiles ! 👍

Commentaires (9)

DataForge9 :

Théo, pour les SVG, vérifie toujours la licence attachée. La plupart sont sous des licences MIT ou Apache, ce qui te donne pas mal de liberté pour les modifier et les utiliser, même commercialement, tant que tu conserves les mentions de copyright d'origine. Pour l'édition, Inkscape est un bon choix open source. Sinon, si tu as la suite Adobe, Illustrator fait le job, mais assure-toi de nettoyer le code SVG après pour enlever tout métadonnée inutile ajoutée par le logiciel. Ça évite d'alourdir le fichier et de potentiellement introduire des infos non désirées.
LeatherPixel88 :

DataForge9 a raison, bien checker la licence c'est la base. Pour Inkscape, je trouve

https://www.youtube.com/watch?v=.Éa peut aider ceux qui débutent, ce tuto montre comment on peut refaire des icônes SVG avec Inkscape.
Théo Rousseau :

L'idée du tuto Inkscape c'est top, LeatherPixel88 ! Perso, j'utilise aussi parfois un simple éditeur de texte pour des modifs rapides sur les couleurs ou des ajustements de formes simples. C'est brut de décoffrage, mais ça permet de garder le code super propre et de bien comprendre ce qu'on fait. Juste faire gaffe de pas casser la syntaxe, hein. 😉
CryptoSculptor :

Quand tu dis que tu utilises un éditeur de texte pour les modifs rapides, je suis 100% d'accord. 👍 Souvent, c'est la méthode la plus directe, surtout pour des changements de couleur. Un petit coup de `sed` ou un script Python, et hop, le tour est joué ! 😉 C'est vrai que faut faire attention à la syntaxe, mais avec un peu de pratique, ça devient super efficace. ✨
Théo Rousseau :

Merci pour vos conseils et vos retours ! Je vais explorer Inkscape et creuser la question des licences pour éviter les impairs. L'astuce de l'éditeur de texte, c'est bon à savoir pour les modifs express.
ElArtista :

L'approche éditeur de texte + scripts, c'est du pur bonheur quand on a des séries de modifs à faire. Mais je me demande, Théo, est-ce que tu as jeté un oeil à des outils comme Tabler Icons ? J'ai découvert ça récemment et je trouve que c'est assez pratique pour certaines choses. L'avantage, c'est que c'est gratuit et que tu peux personnaliser pas mal de paramètres directement en ligne : taille, épaisseur des traits, couleur (avec le code HEX direct, ce qui est top pour coller à une charte graphique précise). Et le tout est sous licence MIT, donc niveau légalité, on est tranquille. Pas besoin de se prendre la tête avec des scripts pour des modifs basiques. En plus, leur système de recherche en anglais est bien foutu. Bon, c'est vrai que parfois, faut chercher le terme exact, mais globalement, ça va assez vite. Et la toolbar épinglable, c'est un petit plus qui fait gagner du temps. L'option copier-coller direct est un véritable atout. Après, c'est sûr que pour des modifs plus poussées, Inkscape ou même l'éditeur de texte restent indispensables. Mais pour du rapide et efficace, je trouve que c'est une bonne alternative. Et si jamais tu as besoin d'autres sources d'icônes, SVG Gobbler, Iconduck, Flaticon, Lordicon, Favicon.io ou Lineicons peuvent aussi valoir le coup d'oeil, même si certains ont des limitations en version gratuite. En tout cas, c'est bien de voir qu'on est plusieurs à se soucier de l'aspect open source et de la propreté du code. C'est tout un art de jongler entre efficacité et respect des licences ! Olé !
PixelNomad :

ElArtista, Tabler Icons, tu m'intéresses avec ça! 🤔 Je vais checker ça de plus près, parce que si on peut éviter de se prendre la tête avec des scripts pour du basique, c'est toujours ça de gagné! Merci pour la reco et pour la liste des autres sources, je note! 😉 C'est clair que jongler entre efficacité et respect des licences, c'est un sport à part entière! 😅
Aïssa Mbaye :

PixelNomad, t'as raison de t'y intéresser à Tabler Icons. Pour des projets rapides, ça dépanne bien. Moi, je l'utilise surtout pour les maquettes ou les prototypes. Ça évite de passer trop de temps sur des détails graphiques qui vont peut-être changer après les premiers tests utilisateurs. Mais attention, faut pas non plus tomber dans le piège de la facilité. J'ai remarqué que beaucoup de sites commencent à se ressembler parce qu'ils utilisent tous les mêmes sets d'icônes par défaut. C'est un peu comme les templates WordPress : au début, c'est super pratique, mais à la fin, tout le monde a le même site. Du coup, même si Tabler Icons est pratique, je pense que c'est toujours intéressant de savoir mettre les mains dans le cambouis avec Inkscape ou un éditeur de texte. Ça permet de créer des icônes vraiment uniques et adaptées à l'identité visuelle de chaque projet. Par exemple, si tu as une charte graphique avec des couleurs très spécifiques, tu peux avoir besoin d'ajuster les icônes pour qu'elles correspondent parfaitement. Avec un outil comme Tabler Icons, tu es limité aux couleurs proposées. Et puis, il y a aussi la question de la performance. Des fois, les icônes générées automatiquement sont plus lourdes que nécessaire. En optimisant le code SVG à la main, on peut gagner quelques Ko par fichier, ce qui peut faire une différence sur un site avec beaucoup d'icônes. Surtout que selon une étude de Google, 53% des visites sont abandonnées si un site mobile prend plus de 3 secondes à charger. Chaque Ko compte ! Donc, pour résumer, Tabler Icons c'est bien pour gagner du temps, mais faut pas oublier les bases et savoir comment modifier les SVG en profondeur pour un résultat vraiment pro et personnalisé. C'est un peu comme en traduction (mon métier, quoi) : les outils de traduction automatique, c'est pratique, mais ça ne remplace pas un bon traducteur humain qui sait adapter le texte au contexte et à la culture cible.
CodeAlambic :

Aïssa Mbaye, ton analogie avec la traduction est top ! 👍 J'avais jamais vu ça comme ça, mais c'est tellement vrai. D'ailleurs, en parlant de traduction, j'ai testé DeepL pour un projet perso et j'ai été bluffé par la qualité. Bon, bref, on s'éloigne du sujet des icônes... 😅 Pour revenir à nos moutons, je suis d'accord, faut pas hésiter à optimiser les SVG à la main. Même un simple `svgo` peut faire des miracles pour réduire la taille des fichiers. Et puis, c'est toujours une bonne occasion de comprendre comment le code SVG fonctionne, non ? 🤔