Open the user configuration file
Use the VS Code Command Palette to find the user configuration command or create a dedicated portable file inside your project directory
Add Icons8 to your GitHub Copilot MCP
Connect Icons8 to VS Code and fetch 420,000+ icons and 110,000+ illustrations. PNGs are free on any account, while SVG comes with a paid plan
{"mcpServers": {"icons8mcp": {"type": "http", "url": "https://mcp.icons8.com/mcp/"}}}New to MCP servers? Start with the guide
How to configure the VS Code MCP server for Icons8
Adding the Icons8 endpoint to your VS Code MCP setup takes one entry. Edit your portable config file and authenticate through the browser to give GitHub Copilot access to the catalogue
Add the remote HTTP server entry
Paste the endpoint URL as a remote HTTP server inside the top level object of your global or project configuration file
Sign in to the Icons8 server
Authenticate securely through your web browser when prompted to complete the connection
Add the endpoint to your configuration file
# .mcp.json at the project root{"mcpServers": {"icons8mcp": {"type": "http", "url": "https://mcp.icons8.com/mcp/"}}}Open the Command Palette, run MCP: Add Server, then sign in
Build user interfaces without leaving the code editor
Turn your coding environment into an AI copilot for designers and developers that picks icons and illustrations from the Icons8 catalogue
Consistent visual elements
Ask the agent to build a navigation bar. It searches the catalogue for each icon the bar needs and adds it to your markup.
Form and empty state illustrations
GitHub Copilot searches the illustrations and places one into your component markup, saving you a manual trip to a stock image website
Fast prototyping
Draft application layouts using free PNG previews for immediate visual feedback. Switch to scalable SVG formats once the final layout is approved.
Why use a dedicated design asset server
While some teams search for a Microsoft Copilot Canva integration MCP server, Icons8 provides a direct HTTP connection to its catalogue of 420,000+ icons
Built for product teams
The server connects your editor to the Icons8 catalogue, so assets come from a library instead of being generated during your workflow
133 distinct icon packs
Every pack has its own drawing size and is either monochrome or colour. Pick one pack and the icons stay in the same style
347 illustration styles
The agent searches the illustrations and lists the styles, so a whole page can stay in one style
No memory between requests
The server answers the call in front of it. A pack choice carries over only if something outside the server writes it down
What your agent builds with the server
Kinds of visual results a coding agent assembles to build a consistent Copilot UI when connected to the VS Code workspace
Dashboard interfaces
Admin panels and analytics views populated with consistent line icons drawn from a single pack
Landing page headers
Hero sections with illustrations in one style
Mobile application screens
Tab bars and list items with icons from a pack that matches your platform
Configuration file paths for the VS Code MCP
The VS Code MCP integration supports both global user configurations for all projects and isolated project-level files for team sharing
| Scope | Configuration file path | Expected top-level object |
|---|---|---|
| Global (Copilot) | ~/.copilot/mcp-config.json | mcpServers |
| Project (Portable) | .mcp.json at project root | mcpServers |
| Legacy VS Code | .vscode/mcp.json | servers |
Questions about Icons8 MCP in VS Code
No. You sign in through the browser once via OAuth, and then the client can call the server.
PNG previews are free on any account at any size. SVG and other paid formats need a plan and are capped at 100 an hour and 1,000 a day per account.
No. The Icons8 server operates as a remote HTTP endpoint, so you do not need Node.js running locally to use it within your code editor.
# ~/.copilot/mcp-config.json