Icons8 MCP server

Icons8 MCP server

422 674 icônes SVG et PNG dans 130 styles, directement dans l’éditeur IA que vous utilisez déjà

Utilisation gratuite

Product Hunt

Produit du jour

Packs d’icônes énormes, jusqu’à 40 000 icônes dans un seul style

130 styles au choix

Fonctionne avec

Claude Code,

Codex,

Cursor,

Windsurf

et d’autres outils de codage IA

Remplacez toutes les icônes du projet par des modèles tendance

ou tout autre style

Ajoutez des icônes à toutes les listes à puces et aux blocs de fonctionnalités,

étapes de processus, navigation, etc.

Démonstrations réalisées avec Icons8 MCP

Style Émoji · 36 icônes

29 icônes, intégrées en SVG

10 icônes, un style contour

Style Couleur · 27 icônes

Comment utiliser Icons8 MCP

Ce qu’il vous faut

• Claude Code, Codex, Cursor, Windsurf, VS Code ou un outil de codage IA similaire
• Node.js pour le routage par plugin dans Claude Code et Codex : le serveur intégré s’exécute via npx mcp-remote. Les configurations manuelles pour Cursor, Windsurf et VS Code utilisent directement HTTP, donc rien à installer

Étape 1 : connecter Icons8

Claude Code

Codex

Cursor

Windsurf

VS Code

Autre

Une seule ligne dans votre terminal installe à la fois le serveur MCP et la compétence icons8 :

claude plugin marketplace add icons8/agent-skills && claude plugin install icons8@icons8

Copier le code

Approuvez le serveur lors de la première utilisation, puis vérifiez-le avec /mcp. C’est toute la configuration.

Vous préférez rester dans Claude Code ? Ces deux commandes font la même chose :

/plugin marketplace add icons8/agent-skills

Copier le code

/plugin install icons8@icons8

Copier le code

Ce que la compétence icons8 ajoute

• Un style par projet, enregistré dans icons8.json. Validez-le et la session suivante conserve le style au lieu d’en choisir un autre.
• Un simple engrenage pour les paramètres, pas le logo de marque qui porte le même nom.
• Aperçus PNG gratuits pendant que vous itérez, SVG uniquement pour l’ensemble que vous avez approuvé.

Le MCP donne à votre agent le catalogue, la compétence lui donne les règles. Sans elle, l’agent prend le premier résultat de recherche pour chaque étiquette, et c’est ainsi qu’un écran se retrouve avec des icônes de quatre styles différents. Open source sous Apache-2.0 : github.com/icons8/agent-skills.

Étape 2 : débloquer SVG quand vous en avez besoin

Tout ce qui précède fonctionne déjà : recherche, aperçus PNG, PNG haute résolution à n’importe quelle taille. SVG est le format de production, et il nécessite une clé.

La clé débloque un cinquième outil, get_icon_svg : de vrais SVG pour n’importe quel style du catalogue, avec une mise à l’échelle nette et suivant la couleur du texte. PNG reste gratuit avec un lien retour vers Icons8. Abonnez-vous pour 15 $, puis récupérez le code de configuration prêt à l’emploi depuis l’onglet MCP de votre compte : il inclut votre clé. Ou ajoutez la clé à n’importe quelle configuration à la main :

{ "mcpServers": { "icons8mcp-svg": { "type": "http", "url": "https://mcp.icons8.com/mcp/", "headers": { "Authorization": "Bearer YOUR_API_KEY" } } } }

Copier le code

Dans Claude Code, c’est la même chose en une commande :

claude mcp add --transport http icons8mcp-svg https://mcp.icons8.com/mcp/ --header "Authorization: Bearer YOUR_API_KEY"

Copier le code

Vérifiez que la clé est bien transmise : exécutez claude mcp list. Cinq outils signifie qu’elle est arrivée, et le cinquième est get_icon_svg. Quatre outils signifie que l’en-tête n’atteint pas le serveur.

Vous avez installé le plugin à l’étape 1 ? Alors votre serveur est celui fourni, sans clé, donc SVG reste verrouillé quoi que vous demandiez. Ajoutez le serveur avec clé ci-dessus : les deux fonctionnent côte à côte, les outils PNG apparaissent simplement en double, et vous pouvez désactiver celui sans clé dans votre client.

Étape 3 : récupérer des icônes dans votre projet

Demandez ce dont vous avez besoin. Nommez un style si vous en avez un en tête, et si ce n’est pas le cas, demandez à en voir plusieurs d’abord : les aperçus PNG sont gratuits et ne nécessitent pas de clé, donc comparer ne coûte rien.

• « Montre-moi une icône de paramètres dans six styles Icons8 différents en aperçus PNG, et dis-moi comment chaque style s’appelle. »
• « Construis un écran de paramètres. Icônes d’Icons8, Material Outlined, 24 px. »
• « Remplace chaque icône de ce projet par Flat Color et garde les tailles actuelles. »
• « Ajoute des icônes aux six blocs de fonctionnalités de la page d’accueil, un style, 48 px. »

Décrire l’apparence fonctionne aussi : « contour fin, sans couleur, 24 px », « couleur plate pour une page d’accueil », « dessin à la main ». La compétence enregistre le style que votre agent choisit dans icons8.json, donc les sessions suivantes le conservent automatiquement. Les 130 styles sont consultables sur icons8.com/icons.

Trois choses à inclure dans la demande

• Le style. Nommez-le une fois, la compétence le verrouille dans icons8.json pour tout le projet. Les identifiants sont spécifiques au style, donc changer de style plus tard signifie choisir à nouveau chaque icône.
• La taille. Chaque style a été dessiné pour une taille, des glyphes de 16 px aux scènes couleur de 64 px. Demandez à votre agent pour quelle taille le style choisi a été dessiné, et utilisez cette taille ou son double. Une icône de 50 px réduite à 16 px perd le détail qui la rendait lisible.
• Le format. Les aperçus PNG sont gratuits et instantanés, itérez dessus et demandez le SVG une fois l’ensemble finalisé. SVG nécessite une clé, voir l’étape 2.

Voici le même écran construit deux fois : à gauche, aucun style n’a été nommé, donc l’agent a pris le premier résultat pour chaque étiquette. À droite, un style a été nommé pour tout l’écran.

Aucun style nommé

Les icônes arrivent de quatre styles différents : un logo de marque pour Paramètres, un avatar en couleur dans une barre latérale monochrome, un émoji pour un statut.

Material Outlined, 24 px

18 icônes, un poids de trait, un rendu. Chaque icône suit la couleur du texte, donc le mode sombre et les thèmes sont inclus.

Jetez un œil aux démos en direct pour vous inspirer. Si quelque chose ne fonctionne pas, consultez la FAQ.

Questions fréquentes

Que faire si le message « No API key » s’affiche ?

Abonnez-vous pour 15 $, trouvez l’onglet MCP dans votre compte Icons8 pour le code de configuration. Vous pouvez aussi obtenir une clé API depuis le portail développeur d’Icons8.

Comment conserver un seul style d’icônes dans tout le projet ?

La compétence icons8 de l’étape 1 fait cela pour vous : elle choisit un pack pour tout le projet et le verrouille dans icons8.json. Validez le fichier, et la prochaine session, ou un autre agent, conservera le même style. Sans la compétence, nommez le style dans votre première demande et répétez-le à chaque ajout d’icônes. Les identifiants sont spécifiques au style : la même icône a un identifiant différent dans chaque style, donc changer de style plus tard signifie tout sélectionner à nouveau.

Quels formats obtenez-vous ?

SVG (avec clé API), aperçus PNG disponibles pour tous les utilisateurs.

Puis-je télécharger des icônes PNG avec le serveur MCP gratuitement ?

Oui, les aperçus d’icônes PNG sont disponibles sans clé API lorsque vous vous connectez au serveur Icons8 MCP.

Quelles sont les conditions de licence pour la version gratuite ?

Toutes les icônes PNG téléchargées via MCP sont gratuites à condition de fournir un lien retour vers nous, même en production. Consultez notre licence ici. Pour les ressources qui s’adaptent dans une interface de production, utilisez SVG avec une clé API.

Est-ce open source ?

La compétence et le plugin sont sous licence Apache-2.0 sur GitHub, et la liste skills.sh passe les audits de sécurité Socket, Snyk et Gen Agent Trust Hub. Les icônes elles-mêmes sont sous licence distincte : gratuites avec attribution, SVG dans le plan payant.

Ai-je besoin d’une clé API ?

PNG fonctionne sans clé, les téléchargements SVG nécessitent une clé API payante, trouvez-la dans l’onglet MCP de votre compte.

Je demande du SVG mais je reçois encore du PNG

Exécutez claude mcp list et comptez les outils. Quatre signifie que la clé n’atteint pas le serveur, vérifiez donc l’en-tête Authorization dans votre configuration, ou copiez celui prêt à l’emploi depuis l’onglet MCP. Cinq outils et toujours du PNG : nommez le format dans la demande, et si vous avez installé le plugin, assurez-vous que votre agent a utilisé le serveur avec clé et non celui sans clé fourni.

Quelle taille d’icône dois-je demander ?

La taille pour laquelle le style a été dessiné : 16 px pour Simple Small, 24 px pour Material et Windows 11, 30 à 50 px pour iOS, 48 px et plus pour les styles couleur. Le détail disparaît quand un grand style est utilisé en petite taille. Votre agent peut vous indiquer la taille pour laquelle chaque style a été conçu.

Puis-je télécharger des icônes par lots ?

Pas encore, mais c’est exactement la fonctionnalité sur laquelle nous travaillons activement en ce moment.

Cela fonctionne-t-il avec OpenAI Codex ?

Oui. Exécutez codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/, puis ajoutez la compétence avec npx skills add icons8/agent-skills --skill icons8. Pour SVG, faites pointer Codex vers votre clé avec --bearer-token-env-var, voir l’étape 2.

Besoin d’aide ?

Consultez notre documentation ou discutez avec nous.