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

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

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

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

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

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

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

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

SVG (พร้อมคีย์ API) ตัวอย่าง PNG พร้อมใช้งานสำหรับผู้ใช้ทุกคน

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

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

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

ไอคอน PNG ทั้งหมดที่ดาวน์โหลดผ่าน MCP ใช้ได้ฟรีหากคุณให้ลิงก์กลับมาที่เรา แม้ในการผลิต ตรวจสอบใบอนุญาตของเราที่นี่ สำหรับทรัพย์สินที่ปรับขนาดใน UI การผลิต ให้ใช้ 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

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

ตรวจสอบเอกสารของเราหรือแชทกับเรา