Skip to main content

आइकॉन खोज समायोज्य आकार, रंग और स्ट्रोक के साथ ओपन-सोर्स एसवीजी आइकॉन को खोजें और अनुकूलित करें।

आइकॉन खोज illustration
🎨

आइकॉन खोज

समायोज्य आकार, रंग और स्ट्रोक के साथ ओपन-सोर्स एसवीजी आइकॉन को खोजें और अनुकूलित करें।

1

आइकॉन्स खोजें

एक कीवर्ड टाइप करें ताकि आप कई श्रेणियों से आइकॉन्स को नाम द्वारा फ़िल्टर कर सकें।

2

दिखने को अनुकूलित करें

आइकॉन रंग, आकार और स्ट्रोक चौड़ाई को अपने डिज़ाइन से मेल खाने के लिए समायोजित करें।

3

SVG की प्रतिलिपि बनाएं

एक आइकॉन पर क्लिक करके उसके अनुकूलित SVG कोड की प्रतिलिपि बनाएं।

Loading tool...

What Is आइकॉन खोज?

आइकॉन सर्च टूल आपको ओपन-सोर्स एसवीजी आइकॉन ब्राउज़ करने, कस्टमाइज़ करने और कॉपी करने देता है। आइकॉन नेविगेशन, एक्शन, स्टेटस इंडिकेटर और विज़ुअल कम्युनिकेशन के लिए आवश्यक यूआई तत्व हैं। यह टूल छह श्रेणियों में आइकॉन प्रदान करता है: एरो, एक्शन, यूआई, मीडिया, कम्युनिकेशन और फ़ाइलें। प्रत्येक आइकॉन स्ट्रोक-आधारित एसवीजी है जिसे आपके पसंदीदा रंग, आकार और स्ट्रोक चौड़ाई के साथ अनुकूलित किया जा सकता है। त्वरित खोज के लिए कीवर्ड द्वारा खोजें। अपने कस्टम सेटिंग्स लागू करने के साथ एसवीजी कोड को कॉपी करने के लिए किसी भी आइकॉन पर क्लिक करें। उत्पन्न एसवीजी साफ, एक्सेसिबल और एचटीएमएल में इनलाइन या स्टैंडअलोन एसवीजी फ़ाइलों के रूप में उपयोग करने के लिए तैयार है।

Why Use आइकॉन खोज?

  • व्यवस्थित आइकॉन श्रेणियाँ: तीर, क्रियाएँ, यूआई, मीडिया, और अधिक
  • आइकॉन खोज के लिए कीवर्ड सर्च
  • रंग, आकार और स्ट्रोक चौड़ाई अनुकूलन योग्य
  • स्वच्छ और सुलभ SVG कोड की एक-क्लिक प्रतिलिपि

Common Use Cases

यूआई विकास

बटन, नेविगेशन और इंटरफ़ेस तत्वों के लिए आइकॉन्स खोजें और अनुकूलित करें।

त्वरित प्रोटोटाइपिंग

मॉकअप और प्रोटोटाइप के लिए जल्दी से आइकॉन्स प्राप्त करें बिना वेब पर खोजे।

डिज़ाइन एकरूपता

एक समन्वित इंटरफ़ेस डिज़ाइन के लिए स्ट्रोक-आधारित आइकॉन्स का उपयोग करें।

दस्तावेज़ीकरण

दस्तावेज़, गाइड और README फ़ाइलों में दृश्य आइकॉन जोड़ें।

Technical Guide

एसवीजी आइकॉन <svg> तत्व का उपयोग दृश्य आकार से स्वतंत्र स्केलिंग के लिए करते हैं। स्ट्रोक-आधारित आइकॉन रंग के लिए स्ट्रोक विशेषता, रेखा मोटाई के लिए स्ट्रोक-विड्थ और रेखा समाप्ति के लिए स्ट्रोक-लाइनकैप/स्ट्रोक-लाइनजॉइन विशेषता का उपयोग करते हैं। फ़िल="नन" विशेषता यह सुनिश्चित करती है कि केवल स्ट्रोक दिखाई दें। एसवीजी आइकॉन को सीधे सीएसएस शैलीकरण के लिए एचटीएमएल में इनलाइन, <img> src के रूप में सरल उपयोग के लिए या डेटा यूआरआई के माध्यम से सीएसएस बैकग्राउंड-इमेज के रूप में उपयोग किया जा सकता है। एक्सेसिबिलिटी के लिए, सजावटी आइकॉन में भूमिका="छवि" और एरिया-लेबल विशेषताएं जोड़ें, या दृश्यमान पाठ लेबल वाले शुद्ध रूप से सजावटी आइकॉन के लिए एरिया-हिडन="सच"। एसवीजी आइकॉन बिना गुणवत्ता हानि के किसी भी आकार में सही ढंग से स्केल करते हैं। आइकॉन प्रणालियों के लिए, एसवीजी स्प्राइट शीट या एसवीजी परिभाषाओं को संदर्भित करने वाले एक आइकॉन घटक का उपयोग करने पर विचार करें। वर्तमान रंग कीवर्ड आइकॉन को माता-पिता तत्व पाठ रंग विरासत में लेने देता है।

Tips & Best Practices

  • 1
    एकरूप स्टाइलिंग के लिए अपने प्रोजेक्ट भर में स्ट्रोक-आधारित आइकॉन्स का उपयोग करें
  • 2
    स्वचालित रूप से टेक्स्ट रंग विरासत में मिले ताकि वर्तमान रंग को स्ट्रोक रंग में सेट करें
  • 3
    आइकॉन आकारों को एकरूप रखें-24px एक आम मानक आकार है
  • 4
    सुलभ आइकॉन बटन के लिए दिखाई नहीं देने वाले टेक्स्ट के साथ aria-label जोड़ें

Related Tools

Frequently Asked Questions

Q क्या ये आइकॉन उपयोग करने के लिए नि:शुल्क हैं?
हाँ, इस उपकरण में सभी आइकॉन ओपन-सोर्स और व्यक्तिगत और वाणिज्यिक उपयोग के लिए नि:शुल्क हैं।
Q क्या मैं आइकॉन रंग बदल सकता हूँ?
हाँ, सभी आइकॉन्स के स्ट्रोक रंग को बदलने के लिए रंग चुनें वाले को समायोजित करें।
Q मैं अपने प्रोजेक्ट में SVG आइकॉन्स का उपयोग कैसे करूँ?
SVG कोड को सीधे अपने HTML में, <img> src के रूप में या एक React घटक में चिपकाएं।
Q क्या मैं इन आइकॉन्स को React में जोड़ सकता हूँ?
हाँ, SVG कोड को एक React घटक में चिपकाएं या एक SVG-से-React रूपांतरण उपकरण का उपयोग करें।
Q मैं आइकॉन्स को सुलभ कैसे बना सकता हूँ?
स्टैंडअलोन आइकॉन बटन के लिए aria-label जोड़ें या दृश्य टेक्स्ट के साथ जब aria-hidden="true" हो।

About This Tool

आइकॉन खोज is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.