Icons8 MCP server

Servidor MCP Icons8

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

Use gratuitamente

Product Hunt

Produto do dia

Pacotes de ícones gigantes, 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 do processo, navegação etc.

Demonstrações criadas com o Icons8 MCP

Estilo Emoji · 36 ícones

29 ícones, incorporados 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 semelhante
• Node.js para a rota de plugin no Claude Code e no Codex: o servidor incluído é executado por meio de npx mcp-remote. As configurações manuais para Cursor, Windsurf e VS Code falam HTTP diretamente, portanto, não precisam instalar nada

Etapa 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 e verifique com /mcp. Essa é toda a configuração.

Prefere ficar dentro do Claude Code? Estes dois fazem a mesma coisa:

/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 o commit e a próxima sessão manterá 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 durante a iteração, SVG apenas para o conjunto que você aprovou.

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

Etapa 2: desbloquear SVG quando você precisar

Tudo acima já funciona: busca, pré-visualizações PNG, PNG em alta resolução em qualquer tamanho. SVG é o formato de produção e precisa de uma chave.

A chave desbloqueia uma quinta ferramenta, get_icon_svg: SVG real para qualquer estilo do catálogo, com dimensionamento limpo e seguindo a cor do texto. O PNG permanece gratuito com um link de volta para o Icons8. Assine por US$ 15 e pegue o código de configuração pronto na aba MCP da sua conta: ele já vem com a chave preenchida. Ou adicione a chave manualmente a qualquer configuração:

{ "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 único comando:

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

Copiar código

Verifique se a chave chegou: execute claude mcp list. Cinco ferramentas significa que chegou, e a quinta é get_icon_svg. Quatro ferramentas significa que o cabeçalho não está chegando ao servidor.

Instalou o plugin na Etapa 1? Então o seu servidor é o incluído, sem chave, então o SVG permanece bloqueado, não importa o que você peça. Adicione o servidor com chave acima: os dois funcionam lado a lado, as ferramentas PNG simplesmente aparecem duas vezes, e você pode desativar o sem chave no seu cliente.

Etapa 3: colocar ícones no seu projeto

Peça o que você precisa. Mencione um estilo se 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 o nome de cada estilo.”
• “Crie uma tela de configurações. Ícones do Icons8, Material Outlined, 24px.”
• “Troque todos os ícones deste projeto para Flat Color e mantenha os tamanhos atuais.”
• “Adicione ícones aos seis blocos de recursos da página inicial, um estilo, 48px.”

Descrever a aparência também funciona: “contorno fino, sem cor, 24px”, “cor chapada para uma página inicial”, “desenhado à mão”. A skill salva o 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. Mencione uma vez e a skill o fixa em icons8.json para o projeto inteiro. 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 escolhido foi desenhado e use esse 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 quando o conjunto estiver final. SVG precisa de chave, veja a Etapa 2.

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

Nenhum estilo mencionado

Í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, uma espessura de traço, um visual. Cada ícone segue a cor do texto, então o modo escuro e os temas vêm de graça.

Dê uma olhada nas demonstrações ao vivo para se inspirar. Se algo não funcionar, consulte as perguntas frequentes.

Perguntas frequentes

E se aparecer “Sem chave de API”?

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

Como mantenho um único estilo de ícone em todo o projeto?

A skill icons8 da Etapa 1 faz isso por você: ela escolhe um pacote para o projeto inteiro e o fixa em icons8.json. Faça o commit do arquivo e a próxima sessão, ou outro agente, manterá o mesmo estilo. Sem a skill, mencione o estilo no seu primeiro prompt e repita-o 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 recebo?

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

Posso baixar ícones PNG gratuitamente com o servidor MCP?

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

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

Todos os ícones PNG baixados por meio do MCP são gratuitos para uso se você fornecer um link de volta para nós, inclusive em produção. Consulte nossa licença aqui. Para ativos que precisam ser dimensionados 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 em skills.sh passa nas auditorias de segurança 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 de SVG exigem uma chave de API paga, encontre-a na aba MCP da sua conta.

Estou solicitando SVG, mas ainda recebo PNG

Execute claude mcp list e conte as ferramentas. Quatro significa que a chave não está chegando ao servidor, então verifique o cabeçalho Authorization na sua configuração, ou copie o pronto da aba MCP. Cinco ferramentas e ainda PNG: mencione o formato no prompt e, se você instalou o plugin, certifique-se de que o seu agente usou o servidor com chave e não o incluído, sem chave.

Qual tamanho de ícone devo pedir?

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 e acima para estilos coloridos. O detalhe desaparece quando um estilo grande é usado em tamanho pequeno. Seu agente pode dizer para qual tamanho qualquer estilo foi desenhado.

Posso baixar ícones em lotes?

Ainda não, mas é exatamente esse o recurso que estamos trabalhando ativamente agora.

Funciona com o OpenAI Codex?

Sim. Execute codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/ e adicione a skill com npx skills add icons8/agent-skills --skill icons8. Para SVG, aponte o Codex para a sua chave com --bearer-token-env-var, veja a Etapa 2.

Precisa de ajuda?

Consulte a nossa documentação ou converse conosco.