Icons8 MCP server

Icons8 MCP server

422,674 SVG और PNG आइकन, 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 कोडिंग टूल
• Claude Code और Codex में प्लगइन रूट के लिए Node.js: बंडल किया गया सर्वर npx mcp-remote के माध्यम से चलता है। Cursor, Windsurf और VS Code के लिए मैन्युअल कॉन्फ़िगरेशन सीधे HTTP से बात करते हैं, इसलिए उन्हें कुछ भी इंस्टॉल करने की आवश्यकता नहीं है

चरण 1: Icons8 कनेक्ट करें

Claude Code

Codex

Cursor

Windsurf

VS Code

Other

आपके टर्मिनल में एक पंक्ति MCP सर्वर और icons8 स्किल दोनों इंस्टॉल करती है:

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

Copy code

पहली बार उपयोग पर सर्वर को स्वीकृति दें, फिर इसे /mcp से जांचें। यही पूरा सेटअप है।

क्या आप Claude Code के अंदर ही रहना चाहते हैं? ये दोनों कमांड वही काम करते हैं:

/plugin marketplace add icons8/agent-skills

Copy code

/plugin install icons8@icons8

Copy code

icons8 स्किल क्या जोड़ता है

• प्रति प्रोजेक्ट एक शैली, icons8.json में सेव की जाती है। इसे कमिट करें, और अगला सेशन नई शैली चुनने के बजाय उसी शैली को बनाए रखता है।
• सेटिंग्स के लिए एक सादा गियर, न कि वह ब्रांड लोगो जो इसी नाम से जाना जाता है।
• आपके पुनरावृत्ति (iterate) करते समय मुफ्त 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" } } } }

Copy code

Claude Code में वही काम एक कमांड में:

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

Copy code

जांचें कि की पहुंची है: 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 आइकन, एक स्ट्रोक वेट, एक लुक। हर आइकन टेक्स्ट रंग का अनुसरण करता है, इसलिए डार्क मोड और थीमिंग मुफ्त में मिलती है।

प्रेरणा के लिए लाइव डेमो देखें। यदि कुछ काम नहीं करता है, तो FAQ देखें।

अक्सर पूछे जाने वाले प्रश्न

अगर यह "No API key" कहे तो क्या करें?

$15 के लिए सब्सक्राइब करें, सेटअप कोड के लिए अपने Icons8 अकाउंट में MCP टैब खोजें। वैकल्पिक रूप से, Icons8 डेवलपर पोर्टल से API की प्राप्त करें।

मैं पूरे प्रोजेक्ट में एक ही आइकन शैली कैसे बनाए रखूं?

चरण 1 की icons8 स्किल यह आपके लिए करती है: यह पूरे प्रोजेक्ट के लिए एक पैक चुनती है और इसे icons8.json में लॉक कर देती है। फ़ाइल को कमिट करें, और अगला सेशन, या कोई अन्य एजेंट, वही शैली बनाए रखता है। स्किल के बिना, अपने पहले प्रॉम्प्ट में शैली का नाम बताएं और जब भी बाद में आइकन जोड़ें तो इसे दोहराएं। Id शैली-विशिष्ट हैं: एक ही आइकन की हर शैली में अलग id होती है, इसलिए बाद में शैली बदलने का मतलब है हर आइकन को फिर से चुनना।

मुझे कौन से फॉर्मेट मिलते हैं?

SVG (API की के साथ), PNG प्रीव्यू सभी उपयोगकर्ताओं के लिए उपलब्ध।

क्या मैं MCP सर्वर के साथ PNG आइकन मुफ्त में डाउनलोड कर सकता हूं?

हां, जब आप Icons8 MCP सर्वर से कनेक्ट होते हैं तो PNG आइकन प्रीव्यू बिना API की के उपलब्ध होते हैं।

मुफ्त संस्करण के लिए लाइसेंस शर्तें क्या हैं?

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 चलाएं और टूल गिनें। चार का मतलब है कि की सर्वर तक नहीं पहुंच रही, इसलिए अपने कॉन्फ़िग में Authorization हेडर जांचें, या MCP टैब से तैयार कोड कॉपी करें। पांच टूल और फिर भी 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 के लिए, Codex को अपनी की के साथ --bearer-token-env-var से इंगित करें, चरण 2 देखें।

सहायता चाहिए?

हमारे दस्तावेज़ देखें या हमसे चैट करें।