Icons8 MCP server

Icons8 MCP 서버

130가지 스타일의 422,674개 SVG 및 PNG 아이콘을, 이미 사용 중인 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 코딩 도구
• 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는 프로덕션 형식이며 키가 필요합니다.

키는 다섯 번째 도구인 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를 실행하세요. 도구가 5개면 키가 도착한 것이며, 다섯 번째 도구는 get_icon_svg입니다. 도구가 4개면 헤더가 서버에 도달하지 않은 것입니다.

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를 참조하세요.

자주 묻는 질문

"API 키 없음"이라고 표시되면 어떻게 하나요?

$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가 제공됩니다

claude mcp list을 실행하고 도구 수를 세어보세요. 4개면 키가 서버에 도달하지 않은 것이므로 구성의 Authorization 헤더를 확인하거나 MCP 탭에서 준비된 구성을 복사하세요. 도구가 5개인데 여전히 PNG인 경우: 프롬프트에서 형식을 지정하고, 플러그인을 설치했다면 에이전트가 번들된 키 없는 서버가 아닌 키 있는 서버를 사용했는지 확인하세요.

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

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

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

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

OpenAI Codex와 호환되나요?

네. codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/을 실행한 다음 npx skills add icons8/agent-skills --skill icons8으로 스킬을 추가하세요. SVG의 경우 --bearer-token-env-var으로 Codex를 키에 연결하세요. 2단계를 참조하세요.

도움이 필요하신가요?

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