Icons8 MCP server

Máy chủ MCP Icons8

422.674 biểu tượng SVG và PNG ở 130 phong cách, đưa thẳng vào trình soạn thảo AI bạn đang dùng

Sử dụng miễn phí

Product Hunt

Sản phẩm của ngày

Bộ biểu tượng khổng lồ, lên đến 40.000 biểu tượng trong một phong cách

130 phong cách để lựa chọn

Hoạt động với

Claude Code,

Codex,

Cursor,

Windsurf

và các công cụ lập trình AI khác

Thay thế tất cả biểu tượng trong dự án bằng những biểu tượng hợp thời

hoặc bất kỳ phong cách nào khác

Thêm biểu tượng vào tất cả danh sách gạch đầu dòng và khối tính năng,

các bước xử lý, điều hướng, v.v.

Bản demo được tạo bằng Icons8 MCP

Phong cách Emoji · 36 biểu tượng

29 biểu tượng, nhúng dưới dạng SVG

10 biểu tượng, một phong cách đường viền

Phong cách Color · 27 biểu tượng

Cách sử dụng Icons8 MCP

Những gì bạn cần

• Claude Code, Codex, Cursor, Windsurf, VS Code hoặc công cụ lập trình AI tương tự
• Node.js cho đường dẫn plugin trong Claude Code và Codex: máy chủ được đóng gói chạy qua npx mcp-remote. Cấu hình thủ công cho Cursor, Windsurf và VS Code nói chuyện trực tiếp qua HTTP, nên chúng không cần cài đặt gì

Bước 1: kết nối Icons8

Claude Code

Codex

Cursor

Windsurf

VS Code

Khác

Một dòng lệnh trong terminal cài đặt cả máy chủ MCP và kỹ năng icons8:

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

Sao chép mã

Phê duyệt máy chủ khi sử dụng lần đầu, sau đó kiểm tra với /mcp. Đó là toàn bộ quá trình thiết lập.

Muốn ở lại trong Claude Code? Hai lệnh này làm điều tương tự:

/plugin marketplace add icons8/agent-skills

Sao chép mã

/plugin install icons8@icons8

Sao chép mã

Kỹ năng icons8 bổ sung những gì

• Một phong cách cho mỗi dự án, được lưu vào icons8.json. Cam kết nó, và phiên tiếp theo giữ phong cách đó thay vì chọn phong cách mới.
• Một bánh răng đơn giản cho cài đặt, không phải logo thương hiệu trùng tên.
• Bản xem trước PNG miễn phí trong khi bạn duyệt, SVG chỉ dành cho bộ bạn đã phê duyệt.

MCP cung cấp cho agent của bạn danh mục, kỹ năng cung cấp cho nó các quy tắc. Nếu không có nó, agent sẽ lấy kết quả tìm kiếm đầu tiên cho mỗi nhãn, và đó là cách một màn hình kết thúc với các biểu tượng từ bốn phong cách khác nhau. Mã nguồn mở theo Apache-2.0: github.com/icons8/agent-skills.

Bước 2: mở khóa SVG khi bạn cần

Mọi thứ ở trên đã hoạt động: tìm kiếm, xem trước PNG, PNG độ phân giải cao ở mọi kích thước. SVG là định dạng sản xuất, và nó cần một khóa.

Khóa mở khóa công cụ thứ năm, get_icon_svg: SVG thật cho bất kỳ phong cách nào trong danh mục, chia tỷ lệ mượt mà và theo màu văn bản. PNG vẫn miễn phí kèm liên kết về Icons8. Đăng ký với giá $15, sau đó lấy mã thiết lập có sẵn từ tab MCP trong tài khoản của bạn: nó đi kèm với khóa đã được điền sẵn. Hoặc thêm khóa vào bất kỳ cấu hình nào bằng tay:

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

Sao chép mã

Trong Claude Code, điều tương tự chỉ là một lệnh:

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

Sao chép mã

Kiểm tra xem khóa đã vào chưa: chạy claude mcp list. Năm công cụ nghĩa là khóa đã đến, và công cụ thứ năm là get_icon_svg. Bốn công cụ nghĩa là header chưa đến được máy chủ.

Đã cài plugin ở Bước 1? Khi đó máy chủ của bạn là máy chủ không khóa được đóng gói, nên SVG vẫn bị khóa dù bạn yêu cầu gì. Thêm máy chủ có khóa ở trên: cả hai chạy song song, các công cụ PNG chỉ xuất hiện hai lần, và bạn có thể tắt máy chủ không khóa trong client của mình.

Bước 3: đưa biểu tượng vào dự án của bạn

Hãy yêu cầu những gì bạn cần. Nêu tên một phong cách nếu bạn có ý định, và nếu không, hãy yêu cầu xem một vài phong cách trước: bản xem trước PNG miễn phí và không cần khóa, nên việc so sánh không tốn gì.

• "Cho tôi xem biểu tượng cài đặt ở sáu phong cách Icons8 khác nhau dưới dạng bản xem trước PNG, và cho tôi biết tên của mỗi phong cách."
• "Xây dựng một màn hình cài đặt. Biểu tượng từ Icons8, Material Outlined, 24px."
• "Thay mọi biểu tượng trong dự án này bằng Flat Color và giữ nguyên kích thước hiện tại."
• "Thêm biểu tượng vào sáu khối tính năng trên trang đích, một phong cách, 48px."

Mô tả giao diện cũng được: "đường viền mảnh, không màu, 24px", "màu phẳng cho trang đích", "vẽ tay". Kỹ năng lưu phong cách bất kỳ mà agent của bạn chọn vào icons8.json, để các phiên sau tự động giữ nguyên. Tất cả 130 phong cách đều có thể duyệt tại icons8.com/icons.

Ba điều đáng đưa vào lời nhắc

• Phong cách. Nêu tên một lần, kỹ năng sẽ khóa nó trong icons8.json cho toàn bộ dự án. Id đặc trưng cho từng phong cách, nên đổi phong cách sau đó nghĩa là phải chọn lại mọi biểu tượng.
• Kích thước. Mỗi phong cách được vẽ cho một kích thước, từ các ký tự 16px đến cảnh màu 64px. Hỏi agent của bạn phong cách bạn chọn được vẽ cho kích thước nào, và dùng kích thước đó hoặc gấp đôi. Một biểu tượng 50px thu nhỏ xuống 16px sẽ mất đi chi tiết khiến nó dễ đọc.
• Định dạng. Bản xem trước PNG miễn phí và tức thì, nên hãy duyệt trên chúng và yêu cầu SVG khi bộ biểu tượng đã hoàn tất. SVG cần khóa, xem Bước 2.

Đây là cùng một màn hình được xây dựng hai lần: bên trái không nêu tên phong cách, nên agent lấy kết quả đầu tiên cho mỗi nhãn. Bên phải một phong cách được nêu tên cho toàn bộ màn hình.

Không nêu tên phong cách

Biểu tượng đến từ bốn phong cách khác nhau: logo thương hiệu cho Cài đặt, avatar màu đầy đủ trong thanh bên đơn sắc, biểu tượng cảm xúc cho một trạng thái.

Material Outlined, 24px

18 biểu tượng, một độ dày nét, một giao diện. Mọi biểu tượng theo màu văn bản, nên chế độ tối và tùy biến chủ đề miễn phí.

Hãy xem các bản demo trực tiếp để lấy cảm hứng. Nếu có gì không hoạt động, xem FAQ.

Các câu hỏi thường gặp

Nếu nó báo "No API key" thì sao?

Đăng ký với giá $15, tìm tab MCP trong tài khoản Icons8 của bạn để lấy mã thiết lập. Ngoài ra, hãy lấy API key từ cổng dành cho nhà phát triển Icons8.

Làm sao để giữ một phong cách biểu tượng cho toàn bộ dự án?

Kỹ năng icons8 từ Bước 1 làm việc này cho bạn: nó chọn một bộ cho toàn bộ dự án và khóa trong icons8.json. Cam kết tệp, và phiên tiếp theo, hoặc một agent khác, giữ nguyên phong cách. Không có kỹ năng, hãy nêu tên phong cách trong lời nhắc đầu tiên và lặp lại mỗi khi bạn thêm biểu tượng sau đó. Id đặc trưng cho từng phong cách: cùng một biểu tượng có id khác nhau trong mỗi phong cách, nên đổi phong cách sau đó nghĩa là phải chọn lại mọi biểu tượng.

Tôi nhận được những định dạng nào?

SVG (với API key), bản xem trước PNG có sẵn cho tất cả người dùng.

Tôi có thể tải biểu tượng PNG bằng máy chủ MCP miễn phí không?

Có, bản xem trước biểu tượng PNG có sẵn mà không cần API key khi bạn kết nối với máy chủ MCP Icons8.

Điều khoản giấy phép cho phiên bản miễn phí là gì?

Tất cả biểu tượng PNG tải qua MCP đều miễn phí sử dụng nếu bạn cung cấp liên kết về chúng tôi, kể cả trong sản xuất. Kiểm tra giấy phép của chúng tôi tại đây. Đối với tài sản cần chia tỷ lệ trong giao diện sản xuất, hãy dùng SVG với API key.

Đây có phải mã nguồn mở không?

Kỹ năng và plugin là Apache-2.0 trên GitHub, và danh sách skills.sh vượt qua các cuộc kiểm toán bảo mật Socket, Snyk và Gen Agent Trust Hub. Bản thân các biểu tượng được cấp phép riêng: miễn phí kèm ghi công, SVG trong gói trả phí.

Tôi có cần API key không?

PNG hoạt động không cần khóa, tải SVG yêu cầu API key trả phí, tìm trong tab MCP của tài khoản bạn.

Tôi yêu cầu SVG nhưng vẫn nhận PNG

Chạy claude mcp list và đếm số công cụ. Bốn nghĩa là khóa chưa đến được máy chủ, nên kiểm tra header Authorization trong cấu hình của bạn, hoặc sao chép bản có sẵn từ tab MCP. Năm công cụ mà vẫn PNG: nêu tên định dạng trong lời nhắc, và nếu bạn đã cài plugin, hãy đảm bảo agent của bạn dùng máy chủ có khóa chứ không phải máy chủ không khóa được đóng gói.

Tôi nên yêu cầu kích thước biểu tượng nào?

Kích thước mà phong cách được vẽ cho: 16px cho Simple Small, 24px cho Material và Windows 11, 30 đến 50px cho iOS, 48px trở lên cho các phong cách màu. Chi tiết biến mất khi một phong cách lớn được dùng ở kích thước nhỏ. Agent của bạn có thể cho bạn biết kích thước mà bất kỳ phong cách nào được vẽ cho.

Tôi có thể tải biểu tượng theo lô không?

Chưa có, nhưng đây chính xác là tính năng chúng tôi đang tích cực phát triển ngay lúc này.

Nó có hoạt động với OpenAI Codex không?

Có. Chạy codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/, sau đó thêm kỹ năng với npx skills add icons8/agent-skills --skill icons8. Để dùng SVG, trỏ Codex vào khóa của bạn với --bearer-token-env-var, xem Bước 2.

Cần trợ giúp?

Xem tài liệu của chúng tôi hoặc trò chuyện với chúng tôi.