Icons8 MCP server

Servidor MCP do Icons8

422.674 ícones em SVG e PNG em 130 estilos, diretamente no editor de IA que você já usa

Use gratuitamente

Product Hunt

Produto do dia

Pacotes enormes de ícones, com até 40.000 ícones em um único estilo

130 estilos para escolher

Funciona com

Claude Code,

Codex,

Cursor,

Windsurf

e outras ferramentas de codificação com IA

Substitua todos os ícones do projeto por outros modernos

ou qualquer outro estilo

Adicione ícones a todas as listas com marcadores e blocos de recursos,

etapas de processo, navegação, etc.

Demonstrações feitas com o Icons8 MCP

Estilo Emoji · 36 ícones

29 ícones, embutidos como SVG

10 ícones, um estilo de contorno

Estilo Color · 27 ícones

Como usar o Icons8 MCP

O que você precisa

• Claude Code, Codex, Cursor, Windsurf, VS Code ou uma ferramenta de codificação com IA similar
• Node.js para a rota de plugin no Claude Code e Codex: o servidor empacotado roda através do npx mcp-remote. As configurações manuais para Cursor, Windsurf e VS Code falam HTTP diretamente, então não precisam instalar nada

Passo 1: conectar o Icons8

Claude Code

Codex

Cursor

Windsurf

VS Code

Outro

Uma linha no seu terminal instala tanto o servidor MCP quanto a skill icons8:

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

Copiar código

Aprove o servidor no primeiro uso, depois verifique com /mcp. Essa é toda a configuração.

Prefere ficar dentro do Claude Code? Estes dois comandos fazem o mesmo:

/plugin marketplace add icons8/agent-skills

Copiar código

/plugin install icons8@icons8

Copiar código

O que a skill icons8 adiciona

• Um estilo por projeto, salvo em icons8.json. Faça commit dele, e a próxima sessão mantém o estilo em vez de escolher um novo.
• Uma engrenagem simples para configurações, não o logotipo da marca que compartilha o nome.
• Pré-visualizações PNG gratuitas enquanto você itera, SVG apenas para o conjunto que você aprovou.

O MCP dá ao seu agente o catálogo, a skill dá a ele as regras. Sem ela, o agente pega o primeiro resultado da pesquisa para cada rótulo, e é assim que uma tela acaba com ícones de quatro estilos diferentes. Código aberto sob licença Apache-2.0: github.com/icons8/agent-skills.

Passo 2: desbloquear SVG quando precisar

Tudo acima já funciona: pesquisa, pré-visualizações PNG, PNG de alta resolução em qualquer tamanho. SVG é o formato de produção e precisa de uma chave. Assine por $15, depois pegue o código de configuração pronto na aba MCP da sua conta: ele vem com sua chave preenchida. Ou adicione a chave a qualquer configuração manualmente:

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

Copiar código

No Claude Code, a mesma coisa é um comando:

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

Copiar código

Se você instalou o plugin, o servidor com chave roda junto com o servidor sem chave embutido, então as ferramentas PNG aparecem duas vezes. Isso é inofensivo; se te incomodar, desabilite o servidor do plugin e mantenha sua própria entrada.

Passo 3: colocar ícones no seu projeto

Peça o que você precisa. Nomeie um estilo se você tiver um em mente e, se não tiver, peça para ver alguns primeiro: as pré-visualizações PNG são gratuitas e não precisam de chave, então comparar não custa nada.

• “Mostre-me um ícone de configurações em seis estilos diferentes do Icons8 como pré-visualizações PNG e diga-me como cada estilo se chama.”
• “Construa uma tela de configurações. Ícones do Icons8, Material Outlined, 24px.”
• “Troque todos os ícones neste projeto para Flat Color e mantenha os tamanhos atuais.”
• “Adicione ícones aos seis blocos de recursos na página inicial, um estilo, 48px.”

Descrever a aparência também funciona: “contorno fino, sem cor, 24px”, “cor sólida para uma página inicial”, “desenhado à mão”. A skill salva qualquer estilo que seu agente escolher em icons8.json, para que sessões posteriores o mantenham automaticamente. Todos os 130 estilos podem ser navegados em icons8.com/icons.

Três coisas que valem a pena colocar no prompt

• O estilo. Nomeie-o uma vez, a skill o trava em icons8.json para todo o projeto. Os IDs são específicos do estilo, então mudar de estilo depois significa escolher cada ícone novamente.
• O tamanho. Cada estilo foi desenhado para um tamanho, de glifos de 16px a cenas coloridas de 64px. Pergunte ao seu agente para qual tamanho o estilo que você escolheu foi desenhado e use esse tamanho ou o dobro. Um ícone de 50px reduzido para 16px perde o detalhe que o tornava legível.
• O formato. As pré-visualizações PNG são gratuitas e instantâneas, então itere nelas e peça SVG assim que o conjunto estiver final.

Aqui está a mesma tela construída duas vezes: à esquerda, nenhum estilo foi nomeado, então o agente pegou o primeiro resultado para cada rótulo. À direita, um estilo foi nomeado para a tela inteira.

Nenhum estilo nomeado

Os ícones chegam de quatro estilos diferentes: um logotipo de marca para Configurações, um avatar colorido em uma barra lateral monocromática, um emoji para um status.

Material Outlined, 24px

18 ícones, um peso de traço, uma aparência. Cada ícone segue a cor do texto, então o modo escuro e a personalização de temas vêm de graça.

Dê uma olhada nas demonstrações ao vivo para se inspirar. Se algo não funcionar, veja o FAQ.

Perguntas frequentes

E se aparecer "No API key"?

Assine por $15, encontre a aba MCP na sua conta Icons8 para obter o código de configuração. Alternativamente, obtenha uma chave de API no portal do desenvolvedor Icons8.

Como manter um estilo de ícone em todo o projeto?

A skill icons8 do Passo 1 faz isso por você: ela escolhe um pacote para todo o projeto e o trava em icons8.json. Faça commit do arquivo, e a próxima sessão, ou outro agente, mantém o mesmo estilo. Sem a skill, nomeie o estilo no seu primeiro prompt e repita sempre que adicionar ícones depois. Os IDs são específicos do estilo: o mesmo ícone tem um ID diferente em cada estilo, então mudar de estilo depois significa escolher cada ícone novamente.

Quais formatos eu obtenho?

SVG (com chave de API), pré-visualizações PNG disponíveis para todos os usuários.

Posso baixar ícones PNG com o servidor MCP gratuitamente?

Sim, as pré-visualizações de ícones PNG estão disponíveis sem chave de API quando você se conecta ao servidor Icons8 MCP.

Quais são os termos de licença para a versão gratuita?

Todos os ícones PNG baixados através do MCP são gratuitos para uso se você fornecer um link de volta para nós, também em produção. Verifique nossa licença aqui. Para ativos que escalam em uma interface de produção, use SVG com uma chave de API.

Isso é código aberto?

A skill e o plugin são Apache-2.0 no GitHub, e a listagem do skills.sh passa pelas auditorias de segurança do Socket, Snyk e Gen Agent Trust Hub. Os ícones em si são licenciados separadamente: gratuitos com atribuição, SVG no plano pago.

Preciso de uma chave de API?

PNG funciona sem chave, downloads SVG exigem uma chave de API paga, encontre-a na aba MCP da sua conta.

Estou solicitando SVG, mas ainda recebo PNG

Configure sua chave de API na aba MCP ou solicite explicitamente o formato SVG.

Qual tamanho de ícone devo solicitar?

O tamanho para o qual o estilo foi desenhado: 16px para Simple Small, 24px para Material e Windows 11, 30 a 50px para iOS, 48px ou mais para estilos coloridos. O detalhe desaparece quando um estilo grande é usado pequeno. Seu agente pode informar o tamanho para o qual qualquer estilo foi desenhado.

Posso baixar ícones em lote?

Ainda não, mas este é exatamente o recurso no qual estamos trabalhando ativamente agora.

Funciona com o OpenAI Codex?

Sim. Execute codex plugin marketplace add icons8/agent-skills, depois instale o icons8 no navegador de plugins. O servidor MCP vem embutido, veja o Passo 1.

Precisa de ajuda?

Consulte nossa documentação ou converse conosco.