Icons8 MCP server

Icons8 MCP server

422.674 SVG- und PNG-Icons in 130 Stilen, direkt in den KI-Editor, den du bereits nutzt

Kostenlos nutzen

Product Hunt

Produkt des Tages

Riesige Icon-Pakete, bis zu 40.000 Icons in einem Stil

130 Stile zur Auswahl

Funktioniert mit

Claude Code,

Codex,

Cursor,

Windsurf

und anderen KI-Coding-Tools

Ersetze alle Icons im Projekt durch trendige

oder jeden anderen Stil

Füge Icons zu allen Aufzählungslisten und Feature-Blöcken hinzu,

Prozessschritten, Navigation usw.

Demos, erstellt mit Icons8 MCP

Emoji-Stil · 36 Icons

29 Icons, als SVG eingebettet

10 Icons, ein Outline-Stil

Color-Stil · 27 Icons

So verwendest du Icons8 MCP

Was du brauchst

• Claude Code, Codex, Cursor, Windsurf, VS Code oder ein ähnliches KI-Coding-Tool
• Node.js für den Plugin-Weg in Claude Code und Codex: Der gebündelte Server läuft über npx mcp-remote. Die manuellen Konfigurationen für Cursor, Windsurf und VS Code sprechen direkt HTTP, benötigen also keine Installation

Schritt 1: Icons8 verbinden

Claude Code

Codex

Cursor

Windsurf

VS Code

Andere

Eine Zeile im Terminal installiert sowohl den MCP-Server als auch die icons8-Skill:

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

Code kopieren

Genehmige den Server bei der ersten Verwendung und prüfe ihn dann mit /mcp. Das ist die gesamte Einrichtung.

Lieber in Claude Code bleiben? Diese beiden Befehle bewirken dasselbe:

/plugin marketplace add icons8/agent-skills

Code kopieren

/plugin install icons8@icons8

Code kopieren

Was die icons8-Skill hinzufügt

• Ein Stil pro Projekt, gespeichert in icons8.json. Committe die Datei, und die nächste Sitzung behält den Stil, statt einen neuen zu wählen.
• Ein schlichtes Zahnrad für Einstellungen, nicht das Markenlogo, das denselben Namen trägt.
• Kostenlose PNG-Vorschauen während du iterierst, SVG nur für das genehmigte Set.

Der MCP gibt deinem Agenten den Katalog, die Skill gibt ihm die Regeln. Ohne sie nimmt der Agent das erste Suchergebnis für jede Beschriftung, und so landet ein Bildschirm am Ende mit Icons aus vier verschiedenen Stilen. Open Source unter Apache-2.0: github.com/icons8/agent-skills.

Schritt 2: SVG freischalten, wenn du es brauchst

Alles oben funktioniert bereits: Suche, PNG-Vorschauen, hochauflösendes PNG in jeder Größe. SVG ist das Produktionsformat und benötigt einen Key.

Der Key schaltet ein fünftes Tool frei, get_icon_svg: echtes SVG für jeden Stil im Katalog, skaliert sauber und folgt der Textfarbe. PNG bleibt kostenlos mit einem Link zurück zu Icons8. Abonniere für $15 und nimm dann den fertigen Setup-Code aus dem MCP-Tab deines Kontos: Er kommt mit deinem Key ausgefüllt. Oder füge den Key manuell zu einer beliebigen Konfiguration hinzu:

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

Code kopieren

In Claude Code ist dasselbe ein einziger Befehl:

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

Code kopieren

Prüfe, ob der Key angekommen ist: Führe claude mcp list aus. Fünf Tools bedeutet, er ist angekommen, und das fünfte ist get_icon_svg. Vier Tools bedeutet, der Header erreicht den Server nicht.

Hast du das Plugin in Schritt 1 installiert? Dann ist dein Server der gebündelte ohne Key, und SVG bleibt gesperrt, egal was du fragst. Füge den Server mit Key oben hinzu: Die beiden laufen nebeneinander, die PNG-Tools erscheinen einfach doppelt, und du kannst den ohne Key in deinem Client deaktivieren.

Schritt 3: Icons in dein Projekt bringen

Frag nach dem, was du brauchst. Nenne einen Stil, wenn du einen im Kopf hast, und wenn nicht, bitte darum, zuerst ein paar zu sehen: PNG-Vorschauen sind kostenlos und benötigen keinen Key, der Vergleich kostet also nichts.

• „Zeig mir ein Einstellungs-Icon in sechs verschiedenen Icons8-Stilen als PNG-Vorschauen und sag mir, wie jeder Stil heißt."
• „Erstelle einen Einstellungsbildschirm. Icons von Icons8, Material Outlined, 24px."
• „Tausche jedes Icon in diesem Projekt gegen Flat Color und behalte die aktuellen Größen."
• „Füge Icons zu den sechs Feature-Blöcken auf der Landingpage hinzu, ein Stil, 48px."

Auch eine Beschreibung des Looks funktioniert: „dünne Outline, keine Farbe, 24px", „flache Farbe für eine Landingpage", „handgezeichnet". Die Skill speichert den Stil, den dein Agent wählt, in icons8.json, damit spätere Sitzungen ihn automatisch behalten. Alle 130 Stile sind auf icons8.com/icons durchsuchbar.

Drei Dinge, die sich lohnen, in den Prompt zu schreiben

• Der Stil. Nenne ihn einmal, die Skill legt ihn in icons8.json für das gesamte Projekt fest. IDs sind stilspezifisch, einen Stil später zu wechseln bedeutet also, jedes Icon erneut auszuwählen.
• Die Größe. Jeder Stil wurde für eine Größe gezeichnet, von 16px-Glyphen bis zu 64px-Farbszenen. Frag deinen Agenten, für welche Größe der gewählte Stil gezeichnet wurde, und verwende diese oder das Doppelte. Ein 50px-Icon auf 16px verkleinert verliert die Details, die es lesbar gemacht haben.
• Das Format. PNG-Vorschauen sind kostenlos und sofort verfügbar, also iteriere darauf und frag erst nach SVG, wenn das Set final ist. SVG benötigt einen Key, siehe Schritt 2.

Hier ist derselbe Bildschirm zweimal gebaut: Links wurde kein Stil genannt, also nahm der Agent das erste Ergebnis für jede Beschriftung. Rechts wurde ein Stil für den gesamten Bildschirm genannt.

Kein Stil genannt

Icons kommen aus vier verschiedenen Stilen: ein Markenlogo für Einstellungen, ein Vollfarb-Avatar in einer monochromen Seitenleiste, ein Emoji für einen Status.

Material Outlined, 24px

18 Icons, eine Strichstärke, ein Look. Jedes Icon folgt der Textfarbe, also sind Dark Mode und Theming automatisch enthalten.

Schau dir die Live-Demos zur Inspiration an. Wenn etwas nicht funktioniert, sieh im FAQ nach.

Häufige Fragen

Was, wenn „No API key" angezeigt wird?

Abonniere für $15 und finde den MCP-Tab in deinem Icons8-Konto für den Setup-Code. Alternativ erhältst du einen API-Key über das Icons8-Entwicklerportal.

Wie behalte ich einen Icon-Stil im gesamten Projekt?

Die icons8-Skill aus Schritt 1 erledigt das für dich: Sie wählt ein Paket für das gesamte Projekt und legt es in icons8.json fest. Committe die Datei, und die nächste Sitzung oder ein anderer Agent behält denselben Stil. Ohne die Skill nenne den Stil in deinem ersten Prompt und wiederhole ihn, wenn du später Icons hinzufügst. IDs sind stilspezifisch: Dasselbe Icon hat in jedem Stil eine andere ID, daher bedeutet ein Stilwechsel später, jedes Icon erneut auszuwählen.

Welche Formate erhalte ich?

SVG (mit API-Key), PNG-Vorschauen für alle Nutzer verfügbar.

Kann ich PNG-Icons mit dem MCP-Server kostenlos herunterladen?

Ja, PNG-Icon-Vorschauen sind ohne API-Key verfügbar, wenn du dich mit dem Icons8 MCP-Server verbindest.

Welche Lizenzbedingungen gelten für die kostenlose Version?

Alle PNG-Icons, die über MCP heruntergeladen werden, sind kostenlos nutzbar, wenn du einen Link zurück zu uns setzt – auch in Produktion. Prüfe unsere Lizenz hier. Für Assets, die in einer Produktions-UI skalieren, verwende SVG mit einem API-Key.

Ist das Open Source?

Die Skill und das Plugin sind Apache-2.0 auf GitHub, und der skills.sh-Eintrag besteht die Sicherheitsaudits von Socket, Snyk und Gen Agent Trust Hub. Die Icons selbst sind separat lizenziert: kostenlos mit Namensnennung, SVG im kostenpflichtigen Plan.

Brauche ich einen API-Key?

PNG funktioniert ohne Key, SVG-Downloads erfordern einen kostenpflichtigen API-Key, den du im MCP-Tab deines Kontos findest.

Ich fordere SVG an, erhalte aber weiterhin PNG

Führe claude mcp list aus und zähle die Tools. Vier bedeutet, der Key erreicht den Server nicht – prüfe also den Authorization-Header in deiner Konfiguration oder kopiere den fertigen aus dem MCP-Tab. Fünf Tools und trotzdem PNG: Nenne das Format im Prompt, und wenn du das Plugin installiert hast, stelle sicher, dass dein Agent den Server mit Key verwendet hat und nicht den gebündelten ohne Key.

Welche Icon-Größe soll ich anfordern?

Die Größe, für die der Stil gezeichnet wurde: 16px für Simple Small, 24px für Material und Windows 11, 30 bis 50px für iOS, 48px und mehr für Farbstile. Details verschwinden, wenn ein großer Stil klein verwendet wird. Dein Agent kann dir sagen, für welche Größe ein Stil gezeichnet wurde.

Kann ich Icons in Stapeln herunterladen?

Noch nicht, aber genau daran arbeiten wir gerade aktiv.

Funktioniert es mit OpenAI Codex?

Ja. Führe codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/ aus und füge dann die Skill mit npx skills add icons8/agent-skills --skill icons8 hinzu. Für SVG weise Codex mit --bearer-token-env-var auf deinen Key hin, siehe Schritt 2.

Brauchst du Hilfe?

Lies unsere Dokumentation oder chatte mit uns.