Icons8 MCP server

Icons8 MCP server

422 674 SVG и PNG иконок в 130 стилях — прямо в AI-редактор, которым вы уже пользуетесь

Используйте бесплатно

Product Hunt

Продукт дня

Огромные наборы иконок — до 40 000 иконок в одном стиле

130 стилей на выбор

Работает с

Claude Code,

Codex,

Cursor,

Windsurf

и другими AI-инструментами для кодинга

Замените все иконки в проекте на трендовые

или любой другой стиль

Добавьте иконки во все маркированные списки и блоки возможностей,

шаги процессов, навигацию и т. д.

Демо, созданные с помощью Icons8 MCP

Стиль Emoji · 36 иконок

29 иконок, встроены как SVG

10 иконок, один стиль контура

Стиль Color · 27 иконок

Как использовать Icons8 MCP

Что вам понадобится

• Claude Code, Codex, Cursor, Windsurf, VS Code или аналогичный AI-инструмент для кодинга
• Node.js для маршрута плагина в Claude Code и Codex: встроенный сервер запускается через npx mcp-remote. Ручные конфигурации для Cursor, Windsurf и VS Code работают напрямую через HTTP, поэтому им ничего устанавливать не нужно

Шаг 1: подключите Icons8

Claude Code

Codex

Cursor

Windsurf

VS Code

Другое

Одна строка в терминале устанавливает и MCP-сервер, и навык icons8:

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

Скопировать код

При первом использовании одобрите сервер, затем проверьте его с помощью /mcp. На этом вся настройка.

Предпочитаете оставаться в Claude Code? Эти две команды делают то же самое:

/plugin marketplace add icons8/agent-skills

Скопировать код

/plugin install icons8@icons8

Скопировать код

Что добавляет навык icons8

• Один стиль на проект, сохраняется в icons8.json. Закоммитьте его — и следующая сессия сохранит стиль вместо выбора нового.
• Обычная шестерёнка для настроек, а не логотип бренда, у которого то же имя.
• Бесплатные PNG-превью на время итераций, SVG — только для утверждённого набора.

MCP даёт вашему агенту каталог, а навык — правила. Без него агент берёт первый результат поиска для каждой подписи, и именно так на одном экране оказываются иконки из четырёх разных стилей. Открытый исходный код по лицензии Apache-2.0: github.com/icons8/agent-skills.

Шаг 2: откройте SVG, когда он вам нужен

Всё вышеперечисленное уже работает: поиск, PNG-превью, PNG высокого разрешения любого размера. SVG — это производственный формат, и для него нужен ключ.

Ключ открывает пятый инструмент, get_icon_svg: настоящий SVG для любого стиля из каталога, который масштабируется без потерь и следует цвету текста. PNG остаётся бесплатным со ссылкой на Icons8. Оформите подписку за $15, затем возьмите готовый код настройки из вкладки MCP вашего аккаунта: он уже содержит ваш ключ. Или добавьте ключ в любую конфигурацию вручную:

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

Скопировать код

В Claude Code то же самое делается одной командой:

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

Скопировать код

Проверьте, что ключ дошёл: выполните claude mcp list. Пять инструментов — значит всё на месте, и пятый — это get_icon_svg. Четыре инструмента — значит заголовок не доходит до сервера.

Установили плагин на шаге 1? Тогда ваш сервер — встроенный, без ключа, поэтому SVG останется заблокированным, что бы вы ни запрашивали. Добавьте сервер с ключом выше: они будут работать бок о бок, PNG-инструменты просто появятся дважды, а сервер без ключа можно отключить в вашем клиенте.

Шаг 3: добавьте иконки в свой проект

Опишите, что вам нужно. Если у вас есть стиль на примете, назовите его, а если нет — попросите сначала показать несколько вариантов: PNG-превью бесплатны и не требуют ключа, так что сравнение ничего не стоит.

• «Покажи мне иконку настроек в шести разных стилях Icons8 как PNG-превью и расскажи, как называется каждый стиль».
• «Создай экран настроек. Иконки из Icons8, Material Outlined, 24px».
• «Замени все иконки в этом проекте на Flat Color, сохранив текущие размеры».
• «Добавь иконки в шесть блоков возможностей на лендинге, один стиль, 48px».

Описание внешнего вида тоже работает: «тонкий контур, без цвета, 24px», «плоский цвет для лендинга», «от руки». Навык сохраняет выбранный агентом стиль в icons8.json, так что последующие сессии используют его автоматически. Все 130 стилей можно посмотреть на icons8.com/icons.

Три вещи, которые стоит указать в промпте

• Стиль. Назовите его один раз — навык закрепит его в icons8.json для всего проекта. ID привязаны к стилю, поэтому смена стиля позже означает повторный выбор каждой иконки.
• Размер. Каждый стиль нарисован под один размер — от 16px глифов до 64px цветных сцен. Спросите у агента, под какой размер нарисован выбранный стиль, и используйте его или удвоенный. Иконка 50px, уменьшенная до 16px, теряет детализацию, которая делала её читаемой.
• Формат. PNG-превью бесплатны и мгновенны, поэтому итерируйте на них и запрашивайте SVG, когда набор утверждён. Для SVG нужен ключ — см. Шаг 2.

Вот один и тот же экран, собранный дважды: слева стиль не был назван, поэтому агент брал первый результат для каждой подписи. Справа для всего экрана был назван один стиль.

Стиль не указан

Иконки приходят из четырёх разных стилей: логотип бренда для «Настроек», полноцветный аватар в монохромном сайдбаре, эмодзи для статуса.

Material Outlined, 24px

18 иконок, одна толщина штриха, один внешний вид. Каждая иконка следует цвету текста, поэтому тёмная тема и кастомизация достаются бесплатно.

Посмотрите живые демо для вдохновения. Если что-то не работает, загляните в FAQ.

Частые вопросы

Что делать, если написано «No API key»?

Оформите подписку за $15 и найдите вкладку MCP в вашем аккаунте Icons8 — там будет код настройки. Либо получите API-ключ на портале разработчиков Icons8.

Как сохранить один стиль иконок во всём проекте?

Навык icons8 из шага 1 делает это за вас: он выбирает один набор для всего проекта и закрепляет его в icons8.json. Закоммитьте файл — и следующая сессия или другой агент сохранит тот же стиль. Без навыка называйте стиль в первом промпте и повторяйте его при каждом добавлении иконок. ID привязаны к стилю: одна и та же иконка имеет разный ID в каждом стиле, поэтому смена стиля позже означает повторный выбор каждой иконки.

Какие форматы я получу?

SVG (с API-ключом), PNG-превью доступны всем пользователям.

Можно ли бесплатно скачивать PNG-иконки через MCP-сервер?

Да, PNG-превью доступны без API-ключа при подключении к Icons8 MCP server.

Каковы условия лицензии для бесплатной версии?

Все PNG-иконки, скачанные через MCP, можно свободно использовать — в том числе в продакшене — при условии ссылки на нас. Ознакомьтесь с нашей лицензией здесь. Для ассетов, которые масштабируются в продакшен-интерфейсе, используйте SVG с API-ключом.

Это открытый исходный код?

Навык и плагин — Apache-2.0 на GitHub, а листинг на skills.sh проходит аудиты безопасности Socket, Snyk и Gen Agent Trust Hub. Сами иконки лицензированы отдельно: бесплатно с указанием авторства, SVG — по платному тарифу.

Нужен ли мне API-ключ?

PNG работает без ключа, скачивание SVG требует платного API-ключа — найдите его во вкладке MCP вашего аккаунта.

Я запрашиваю SVG, но получаю PNG

Выполните claude mcp list и посчитайте инструменты. Четыре — значит, ключ не доходит до сервера: проверьте заголовок Authorization в вашей конфигурации или скопируйте готовый из вкладки MCP. Пять инструментов, а всё равно PNG: укажите формат в промпте, а если вы установили плагин, убедитесь, что агент использовал сервер с ключом, а не встроенный без ключа.

Какой размер иконок мне запрашивать?

Тот, под который нарисован стиль: 16px для Simple Small, 24px для Material и Windows 11, от 30 до 50px для iOS, от 48px и выше для цветных стилей. Детализация исчезает, когда крупный стиль используется в маленьком размере. Ваш агент может сказать, под какой размер нарисован любой стиль.

Можно ли скачивать иконки пакетами?

Пока нет, но именно над этой функцией мы сейчас активно работаем.

Работает ли это с OpenAI Codex?

Да. Выполните codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/, затем добавьте навык с помощью npx skills add icons8/agent-skills --skill icons8. Для SVG укажите Codex ваш ключ через --bearer-token-env-var, см. Шаг 2.

Нужна помощь?

Ознакомьтесь с нашей документацией или напишите нам в чат.