Icons8 MCP server

Icons8 MCP server

ไอคอน SVG และ PNG 422,674 รายการใน 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 server และสกิล 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 เมื่อ commit แล้ว เซสชันถัดไปจะคงสไตล์นั้นแทนการเลือกใหม่
• ไอคอนเฟืองธรรมดาสำหรับการตั้งค่า ไม่ใช่โลโก้แบรนด์ที่มีชื่อเดียวกัน
• ตัวอย่าง 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 ไอคอน น้ำหนักเส้นเดียว หน้าตาเดียว ทุกไอคอนเป็นไปตามสีข้อความ โหมดมืดและธีมจึงได้มาฟรี

ดูเดโมสดเพื่อแรงบันดาลใจ หากมีอะไรไม่ทำงาน ดูคำถามที่พบบ่อย

คำถามที่พบบ่อย

ถ้าขึ้นว่า "No API key" ต้องทำอย่างไร?

สมัครสมาชิก $15 หาแท็บ MCP ในบัญชี Icons8 ของคุณเพื่อรับโค้ดการตั้งค่า หรือรับ API key จากพอร์ทัลนักพัฒนา Icons8

จะรักษาสไตล์ไอคอนเดียวทั่วทั้งโปรเจกต์ได้อย่างไร?

สกิล icons8 จากขั้นตอนที่ 1 ทำสิ่งนี้ให้คุณ: เลือกหนึ่งแพ็กสำหรับทั้งโปรเจกต์และล็อกไว้ใน icons8.json Commit ไฟล์ แล้วเซสชันถัดไปหรือเอเจนต์อื่นจะใช้สไตล์เดียวกัน หากไม่มีสกิล ให้ระบุสไตล์ในพรอมต์แรกและพูดซ้ำเมื่อเพิ่มไอคอนทีหลัง ID เฉพาะต่อสไตล์: ไอคอนเดียวกันมี ID ต่างกันในแต่ละสไตล์ การเปลี่ยนสไตล์ทีหลังจึงหมายถึงการเลือกไอคอนทุกตัวใหม่

ฉันได้รับรูปแบบอะไรบ้าง?

SVG (ต้องใช้ API key) ตัวอย่าง PNG มีให้ผู้ใช้ทุกคน

ฉันดาวน์โหลดไอคอน PNG ด้วย MCP server ฟรีได้ไหม?

ได้ ตัวอย่างไอคอน PNG พร้อมใช้งานโดยไม่ต้องใช้ API key เมื่อคุณเชื่อมต่อกับ Icons8 MCP server

เงื่อนไขใบอนุญาตสำหรับเวอร์ชันฟรีคืออะไร?

ไอคอน PNG ทั้งหมดที่ดาวน์โหลดผ่าน MCP ใช้ได้ฟรีหากคุณใส่ลิงก์กลับมาที่เรา แม้ในโปรดักชัน ดูใบอนุญาตของเราที่นี่ สำหรับทรัพย์สินที่ปรับขนาดใน UI โปรดักชัน ให้ใช้ SVG กับ API key

โอเพนซอร์สหรือไม่?

สกิลและปลั๊กอินเป็น Apache-2.0 บน GitHub และรายการ skills.sh ผ่านการตรวจสอบความปลอดภัยของ Socket, Snyk และ Gen Agent Trust Hub ตัวไอคอนเองมีใบอนุญาตแยกต่างหาก: ฟรีพร้อมแสดงที่มา SVG ในแผนแบบเสียเงิน

ฉันต้องใช้ API key ไหม?

PNG ทำงานได้โดยไม่ต้องใช้คีย์ การดาวน์โหลด SVG ต้องใช้ API key แบบเสียเงิน หาได้ในแท็บ MCP ของบัญชีคุณ

ฉันขอ SVG แต่ยังได้ PNG

ตั้งค่า API key ในแท็บ MCP หรือขอรูปแบบ SVG อย่างชัดเจน

ควรขอขนาดไอคอนเท่าใด?

ขนาดที่สไตล์ถูกวาดไว้: 16px สำหรับ Simple Small, 24px สำหรับ Material และ Windows 11, 30 ถึง 50px สำหรับ iOS, 48px ขึ้นไปสำหรับสไตล์สี รายละเอียดจะหายไปเมื่อใช้สไตล์ใหญ่ในขนาดเล็ก เอเจนต์ของคุณสามารถบอกได้ว่าสไตล์ใดถูกวาดสำหรับขนาดเท่าใด

ดาวน์โหลดไอคอนเป็นชุดได้ไหม?

ยังไม่ได้ แต่ฟีเจอร์นี้คือสิ่งที่เรากำลังพัฒนาอยู่ตอนนี้

ใช้กับ OpenAI Codex ได้ไหม?

ได้ รัน codex plugin marketplace add icons8/agent-skills จากนั้นติดตั้ง icons8 จากเบราว์เซอร์ปลั๊กอิน MCP server มาพร้อมกัน ดูขั้นตอนที่ 1

ต้องการความช่วยเหลือ?

ดูเอกสารของเราหรือแชทกับเรา