Icons8 MCP server

Icons8 MCP 서버

130가지 스타일의 SVG 및 PNG 아이콘 422,674개를, 이미 사용 중인 AI 편집기에 바로 연결하세요

무료로 사용하기

Product Hunt

오늘의 제품

한 스타일에 최대 40,000개의 아이콘이 담긴 대용량 아이콘 팩

선택 가능한 130가지 스타일

다음과 함께 작동합니다

Claude Code,

Codex,

Cursor,

Windsurf

및 기타 AI 코딩 도구

프로젝트의 모든 아이콘을 트렌디한 스타일로 교체하세요

또는 다른 어떤 스타일이든

모든 불릿 목록과 기능 블록에 아이콘을 추가하고,

프로세스 단계, 내비게이션 등에도 활용하세요.

Icons8 MCP로 만든 데모

이모지 스타일 · 아이콘 36개

아이콘 29개, SVG로 인라인 처리됨

아이콘 10개, 단일 아웃라인 스타일

컬러 스타일 · 아이콘 27개

Icons8 MCP 사용 방법

필요한 것

• Claude Code, Codex, Cursor, Windsurf, VS Code 또는 이와 유사한 AI 코딩 도구
• Claude Code 및 Codex의 플러그인 방식에 필요한 Node.js: 번들로 제공되는 서버는 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는 프로덕션용 형식이며 키가 필요합니다. $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"

코드 복사

플러그인을 설치한 경우, 키가 있는 서버가 번들로 제공되는 키 없는 서버와 함께 실행되므로 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를 요청하세요.

동일한 화면을 두 번 만든 예시입니다: 왼쪽은 스타일을 지정하지 않아 에이전트가 모든 레이블에 대해 첫 번째 결과를 가져왔습니다. 오른쪽은 전체 화면에 대해 하나의 스타일을 지정했습니다.

스타일 미지정

네 가지 다른 스타일의 아이콘이 섞여 있습니다: 설정에 브랜드 로고, 모노크롬 사이드바에 풀컬러 아바타, 상태에 이모지.

Material Outlined, 24px

아이콘 18개, 하나의 스트로크 두께, 하나의 룩. 모든 아이콘이 텍스트 색상을 따르므로 다크 모드와 테마 적용이 자동으로 됩니다.

라이브 데모를 살펴보고 영감을 얻으세요. 문제가 발생하면 FAQ를 확인하세요.

자주 묻는 질문

"No API key"라고 표시되면 어떻게 하나요?

$15를 구독하고, Icons8 계정의 MCP 탭에서 설정 코드를 찾으세요. 또는 Icons8 개발자 포털에서 API 키를 받을 수 있습니다.

프로젝트 전체에서 하나의 아이콘 스타일을 유지하려면 어떻게 하나요?

1단계의 icons8 스킬이 이 작업을 대신 처리합니다: 프로젝트 전체에 대해 하나의 팩을 선택하고 icons8.json에 고정합니다. 파일을 커밋하면 다음 세션이나 다른 에이전트도 동일한 스타일을 유지합니다. 스킬이 없으면 첫 프롬프트에서 스타일 이름을 지정하고 나중에 아이콘을 추가할 때마다 반복하세요. ID는 스타일별로 다릅니다: 동일한 아이콘도 스타일마다 다른 ID를 가지므로, 나중에 스타일을 변경하면 모든 아이콘을 다시 선택해야 합니다.

어떤 형식을 받을 수 있나요?

SVG(API 키 필요), PNG 미리보기는 모든 사용자에게 제공됩니다.

MCP 서버로 PNG 아이콘을 무료로 다운로드할 수 있나요?

네, Icons8 MCP 서버에 연결하면 API 키 없이 PNG 아이콘 미리보기를 사용할 수 있습니다.

무료 버전의 라이선스 조건은 무엇인가요?

MCP를 통해 다운로드한 모든 PNG 아이콘은 프로덕션에서도 링크만 제공하면 무료로 사용할 수 있습니다. 라이선스는 여기에서 확인하세요. 프로덕션 UI에서 크기가 조절되는 에셋에는 API 키와 함께 SVG를 사용하세요.

오픈소스인가요?

스킬과 플러그인은 GitHub에서 Apache-2.0 라이선스로 제공되며, skills.sh 목록은 Socket, Snyk 및 Gen Agent Trust Hub 보안 감사를 통과했습니다. 아이콘 자체는 별도로 라이선스가 부여됩니다: 출처 표기 시 무료, SVG는 유료 플랜에서 사용 가능합니다.

API 키가 필요한가요?

PNG는 키 없이 작동하며, SVG 다운로드에는 유료 API 키가 필요합니다. 계정의 MCP 탭에서 찾을 수 있습니다.

SVG를 요청하는데 계속 PNG를 받고 있어요

MCP 탭에서 API 키 설정을 완료하거나, 명시적으로 SVG 형식을 요청하세요.

어떤 아이콘 크기를 요청해야 하나요?

스타일이 그려진 크기를 사용하세요: Simple Small은 16px, Material 및 Windows 11은 24px, iOS는 30~50px, 컬러 스타일은 48px 이상. 큰 스타일을 작게 사용하면 디테일이 사라집니다. 에이전트가 어떤 스타일이 어떤 크기로 그려졌는지 알려줄 수 있습니다.

아이콘을 일괄 다운로드할 수 있나요?

아직은 아니지만, 바로 이 기능을 현재 적극적으로 개발 중입니다.

OpenAI Codex와 호환되나요?

네. codex plugin marketplace add icons8/agent-skills을 실행한 다음 플러그인 브라우저에서 icons8을 설치하세요. MCP 서버가 번들로 포함되어 있습니다. 1단계를 참조하세요.

도움이 필요하신가요?

문서를 확인하거나 채팅으로 문의하세요.