आइकन सिस्टम डिज़ाइन: ऐसी आइकनोग्राफी जो 50 सिंबल के बाद भी टिके

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

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

आइकन सिस्टम असल में क्या है

आइकन सिस्टम साझा नियमों से चलने वाले पिक्टोग्राफ़ का एकरूप सेट है। ग्रिड साइज़, स्ट्रोक वज़न, कॉर्नर रेडियस, ऑप्टिकल अलाइनमेंट, नामकरण, और नए आइकन जोड़ने की प्रक्रिया। लक्ष्य SVG का फ़ोल्डर नहीं है। लक्ष्य ऐसा सिस्टम है जिसे कोई भी डिज़ाइनर या इंजीनियर प्रोडक्ट की विज़ुअल लय तोड़े बिना आगे बढ़ा सके।

आइकनों का ढेर सिस्टम नहीं होता। 200 सिंबल वाली Figma फ़ाइल, जिसमें कोई नियम नहीं, सिस्टम नहीं है। सिस्टम में पाबंदियाँ होती हैं, नाम वाले फ़ैसले होते हैं, और इस बात की लिखी हुई प्रक्रिया होती है कि जब किसी को ऐसा आइकन चाहिए जो अभी मौजूद नहीं है तो क्या होगा।

डिज़ाइन सिस्टम गाइड उस बड़े सिस्टम को कवर करती है जिसके भीतर आइकन रहते हैं। यह पेपर खास तौर पर आइकनोग्राफी की परत में गहराई तक जाता है।

आइकन दिखने से ज़्यादा मायने क्यों रखते हैं

आइकन किसी भी प्रोडक्ट का सबसे घना UI हिस्सा होते हैं। एक अकेला 24x24 पिक्सल का आइकन स्क्रीन के किसी भी दूसरे एलिमेंट से ज़्यादा अर्थ प्रति वर्ग इंच ढोता है। सिस्टम सही रखिए तो प्रोडक्ट एक चीज़ की तरह पढ़ा जाता है। गलत रखिए तो हर स्क्रीन में कुछ अटपटा लगता है, जिसे यूज़र शब्दों में बता नहीं पाते।

आइकन अजीब तरह से स्केल भी होते हैं। दो स्क्रीन के बीच टाइपफ़ेस का भटकाव पकड़ना आसान है। आइकन का भटकाव नाम देना मुश्किल है, पर महसूस ज़्यादा ज़ोर से होता है। दिमाग पिक्टोग्राफ़ को टेक्स्ट से तेज़ प्रोसेस करता है, यानी वह आइकन की असंगति को कॉपी की असंगति से तेज़ पकड़ लेता है।

जो प्रोडक्ट आइकन को एकरूप सिस्टम की तरह शिप करता है, वह बाकी काम कच्चा होने पर भी पॉलिश्ड लगता है। जो प्रोडक्ट आइकन को खुली छूट की तरह शिप करता है, वह बाकी काम तीखा होने पर भी सस्ता लगता है।

---

ग्रिड ही सिस्टम है

हर एकरूप आइकन लाइब्रेरी ग्रिड से शुरू होती है। ग्रिड वह अदृश्य ढाँचा है जिस पर हर आइकन बैठता है। इसके बिना आइकन साइज़, वज़न और ऑप्टिकल संतुलन में भटकते हैं, और कोड रिव्यू में एकरूपता लागू कराने का कोई तरीका नहीं बचता।

बेस ग्रिड

एक बेस ग्रिड साइज़ चुनिए और उसी के भीतर जिएँ। 2026 में काम करने वाले दो डिफ़ॉल्ट:

• प्रोडक्ट UI आइकन के लिए 24 पिक्सल ग्रिड। ज़्यादातर आधुनिक इंटरफ़ेस का मानक साइज़।
• घने डेटा इंटरफ़ेस, डैशबोर्ड और एडमिन टूलिंग के लिए 20 पिक्सल ग्रिड।

ग्रिड सिर्फ़ कैनवस का साइज़ नहीं है। वह कैनवस के भीतर का वह लाइव एरिया भी है जहाँ आइकन असल में बैठता है। 24 पिक्सल ग्रिड में 20 पिक्सल का लाइव एरिया होता है, हर तरफ़ 2 पिक्सल पैडिंग के साथ। पैडिंग आइकन को साँस लेने की जगह देती है और पड़ोसी एलिमेंट के पास उसे दबा-दबा दिखने से रोकती है।

ग्रिड के भीतर कीलाइन

लाइव एरिया में आकार तय करने वाली भीतरी कीलाइनें होती हैं। 20 पिक्सल के लाइव एरिया में चार कीलाइन आकार मिलते हैं:

हर कीलाइन एक ही साइज़ पर दृश्य रूप से संतुलित आइकन देती है। 18 पिक्सल पर बना वृत्त 18 पिक्सल के वर्ग से छोटा दिखता है, क्योंकि इंसानी आँख वृत्त को छोटा पढ़ती है। कीलाइनें इस धारणा की सनक की भरपाई करती हैं।

टोकन के रूप में स्ट्रोक वज़न

एक स्ट्रोक वज़न चुनिए और उस पर टिके रहिए। ज़्यादातर प्रोडक्ट आइकन सिस्टम 24 पिक्सल ग्रिड पर 1.5 या 2 पिक्सल स्ट्रोक इस्तेमाल करते हैं। ब्रांड वॉइस के आधार पर चुनिए।

1.5 पिक्सल का स्ट्रोक हल्का, तकनीकी और आधुनिक पढ़ा जाता है। 2 पिक्सल का स्ट्रोक आत्मविश्वासी, दोस्ताना और सुलभ लगता है। 3 पिक्सल का स्ट्रोक बोल्ड, बच्चों वाला या प्रिंट-स्टाइल लगता है। एक चुनिए। उसे टोकन के रूप में दर्ज कीजिए। अलग वज़न वाला हर आइकन योगदान ठुकरा दीजिए।

डिज़ाइन टोकन ग्लॉसरी बताती है कि स्ट्रोक वज़न बड़े टोकन आर्किटेक्चर में कैसे बैठता है।

---

फ़र्क ऑप्टिकल करेक्शन से पड़ता है

गणितीय अलाइनमेंट दृश्य अलाइनमेंट नहीं होता। ग्रिड पर एकदम सटीक बैठे आइकन अक्सर गलत दिखते हैं, क्योंकि इंसानी आँख पिक्सल नहीं नापती, वह महसूस होने वाला वज़न और संतुलन नापती है।

ऑप्टिकल करेक्शन क्यों होता है

20x20 पिक्सल का वृत्त और 20x20 पिक्सल का वर्ग एक ही साइज़ के नहीं पढ़े जाते। वर्ग में ज़्यादा दृश्य द्रव्यमान होता है क्योंकि वह अपना बाउंडिंग बॉक्स पूरी तरह भर देता है। वृत्त के कोनों में खाली जगह होती है, जिसे आँख छोटी वस्तु के रूप में दर्ज करती है।

इलाज यह है कि वृत्त को बाउंडिंग बॉक्स से थोड़ा बड़ा बनाइए, कभी-कभी 1 से 2 पिक्सल। गणित कहता है गलत, आँख कहती है सही। हमेशा आँख पर भरोसा कीजिए।

आम ऑप्टिकल फ़िक्स

पाँच सुधार ज़्यादातर आइकन काम को कवर कर देते हैं:

• वृत्त वर्ग से बड़े दिखते हैं। वृत्त की कीलाइन 1 से 2 पिक्सल बढ़ाइए।
• त्रिकोण वर्ग से छोटे दिखते हैं। त्रिकोण की कीलाइन 2 से 3 पिक्सल बढ़ाइए।
• तिरछी रेखाएँ क्षैतिज रेखाओं से पतली दिखती हैं। तिरछी रेखाओं में 0.25 से 0.5 पिक्सल वज़न जोड़िए।
• असममित आइकन के केंद्र खिसकते हैं। प्ले बटन, तीर और शेवरॉन को आँख से ऑप्टिकली सेंटर कीजिए, बाउंडिंग बॉक्स से कभी नहीं।
• तीखे कोने छोटे पढ़े जाते हैं। भीतरी कोनों को थोड़ा गोल कीजिए ताकि वे बाहरी कोनों के महसूस होने वाले वज़न से मेल खाएँ।

ये फ़िक्स राय नहीं हैं। किसी भी आइकन को गणित-परफ़ेक्ट और ऑप्टिकली करेक्ट, दोनों संस्करणों में छोटे साइज़ पर अगल-बगल रखकर परखिए। ऑप्टिकली करेक्ट संस्करण हमेशा जीतता है। हमेशा।

---

वे स्टाइल फ़ैसले जो जुड़ते जाते हैं

ग्रिड और वज़न तय होने के बाद हर दूसरा स्टाइल फ़ैसला एक बार लेना है और हर जगह लागू करना है। इनमें से किसी में भी असंगति ऐसे पढ़ी जाती है जैसे लाइब्रेरी को बहुत सारे हाथों ने छुआ हो।

कॉर्नर रेडियस

एक बाहरी कॉर्नर रेडियस और एक भीतरी कॉर्नर रेडियस चुनिए। दोनों जोड़ी में काम करते हैं।

1 पिक्सल बाहरी और 0.5 पिक्सल भीतरी रेडियस कreview और आधुनिक पढ़ा जाता है। 2 पिक्सल बाहरी और 1 पिक्सल भीतरी रेडियस दोस्ताना और गोलाई वाला लगता है। बिना रेडियस वाला तीखे किनारों का सेट वास्तुशिल्पीय और गंभीर पढ़ा जाता है।

गलत चाल है एक ही लाइब्रेरी में रेडियस मिलाना। बाकी से तीखे कोनों वाला एक अकेला आइकन भी ऐसा लगता है जैसे किसी और सेट से उधार लिया गया हो।

एंड कैप और जॉइन

स्ट्रोक के सिरे होते हैं। एंड कैप स्क्वेयर, राउंड या प्रोजेक्टिंग हो सकते हैं। स्ट्रोक के बीच जॉइन मिटर (तीखा), राउंड या बेवल (कटा हुआ) हो सकते हैं। हर एक में से एक चुनिए और पूरे सिस्टम में लागू कीजिए।

राउंड एंड कैप और राउंड जॉइन दोस्ताना, सहज आइकन सेट बनाते हैं। स्क्वेयर एंड कैप और मिटर जॉइन सटीक, तकनीकी सेट बनाते हैं। एक ही लाइब्रेरी में मिले-जुले एंड कैप ऐसा सेट बनाते हैं जो अधूरा लगता है।

फ़िल्ड बनाम आउटलाइन्ड

ज़्यादातर आधुनिक आइकन सिस्टम हर आइकन के दो वेरिएंट शिप करते हैं: निष्क्रिय स्थितियों के लिए आउटलाइन्ड संस्करण और सक्रिय स्थितियों के लिए फ़िल्ड संस्करण। आउटलाइन्ड संस्करण स्ट्रोक इस्तेमाल करता है। फ़िल्ड संस्करण वही आकार भीतर से भरकर इस्तेमाल करता है।

दोनों वेरिएंट दृश्य रूप से संतुलित होने चाहिए। उसी साइज़ पर फ़िल्ड संस्करण अक्सर आउटलाइन से भारी और हावी पढ़ा जाता है। इलाज है फ़िल्ड संस्करण का फ़ुटप्रिंट 1 से 2 पिक्सल घटाना, ताकि उसी स्केल पर दृश्य वज़न आउटलाइन से मेल खाए।

फ़ोकस स्टेट ग्लॉसरी बताती है कि आउटलाइन्ड से फ़िल्ड की अदला-बदली बड़े इंटरैक्शन स्टेट डिज़ाइन में कैसे फ़िट होती है।

---

आइकन का नामकरण आधा सिस्टम है

200 बढ़िया बने आइकनों वाली लाइब्रेरी, जिन्हें कोई ढूँढ नहीं पाता, ऐसी लाइब्रेरी है जिसे कोई इस्तेमाल नहीं करता। नामकरण खोजे जाने की परत है, और बुरा नामकरण बुरी ड्रॉइंग से तेज़ अपनाव मार देता है।

स्केल होने वाले नामकरण पैटर्न

ऑब्जेक्ट-फ़र्स्ट नामकरण कीजिए, मेटाफ़र-फ़र्स्ट नहीं। मैग्निफ़ाइंग ग्लास का आइकन search या magnifier है, कभी find या look नहीं। वस्तु स्थिर रहती है। मेटाफ़र संदर्भ के साथ बदलता है।

कई शब्दों वाले आइकन के लिए kebab-case इस्तेमाल कीजिए: arrow-left, chevron-down, cloud-upload। केस में एकरूपता इंजीनियरों को लाइब्रेरी grep करने, IDE में ऑटोकम्प्लीट करने और बिना टाइपो के शिप करने देती है।

दिशा वाले प्रत्यय तभी लगाइए जब ज़रूरत हो। arrow काफ़ी नहीं है। arrow-left, arrow-right, arrow-up, arrow-down न्यूनतम सेट है। शेवरॉन, कैरेट और किसी भी दूसरे दिशा वाले पिक्टोग्राफ़ के लिए भी यही।

वेरिएंट नामकरण

जब किसी आइकन के कई वेरिएंट हों (आउटलाइन्ड, फ़िल्ड, टू-टोन), तो वेरिएंट को प्रत्यय की तरह जोड़िए:

• search (डिफ़ॉल्ट आउटलाइन)
• search-filled
• search-duotone

यह पैटर्न इंजीनियर को अलग फ़ोल्डर खँगाले बिना search-filled को बटन में खींचने देता है। अनुमान लगाने लायक नामकरण परफ़ेक्ट संगठन से तेज़ होता है।

पर्यायवाची मैप

नामकरण की सबसे बड़ी विफलता वह आइकन है जो डिज़ाइनर को इसलिए नहीं मिलता कि उसने गलत शब्द खोजा। लाइब्रेरी के साथ एक पर्यायवाची मैप बनाइए। cart से bag, shopping भी मिलें। home से house, dashboard भी मिलें। delete से trash, remove, bin भी मिलें।

ज़्यादातर आधुनिक आइकन सर्च टूल (Iconify, Lucide, Phosphor) अपने सर्च UI में पर्यायवाची मैप बनाकर रखते हैं। वही आंतरिक लाइब्रेरी में भी बनाइए, या मान लीजिए कि डिज़ाइनर डुप्लिकेट आइकन जोड़ते रहेंगे क्योंकि उन्हें मौजूदा आइकन मिला ही नहीं।

---

गवर्नेंस सिस्टम को ज़िंदा रखती है

ऊपर के तकनीकी फ़ैसले कोई भी सक्षम डिज़ाइनर दोहरा सकता है। गवर्नेंस के फ़ैसले वे हैं जो ज़िंदा सिस्टम को दूसरे साल में मरने वाले सिस्टम से अलग करते हैं।

सच का एकमात्र स्रोत

एक जगह चुनिए जहाँ आइकन रहें। या तो Figma लाइब्रेरी, या SVG वाला कोड रेपो, या Iconify जैसी होस्टेड सेवा। एक चुनिए। लाइब्रेरी वहीं रहती है। हर डिज़ाइनर वहीं से खींचता है। हर इंजीनियर वहीं से खींचता है।

सच के दो स्रोत वाला सिस्टम शून्य स्रोत वाला सिस्टम है। Figma लाइब्रेरी और कोड लाइब्रेरी तीसरे हफ़्ते तक भटक जाएँगी, और उसके बाद हर स्क्रीन ऐसे आइकन शिप करेगी जो सिस्टम से मेल नहीं खाते।

योगदान की प्रक्रिया

नया आइकन जोड़ने की प्रक्रिया दर्ज कीजिए। प्रक्रिया में ये शामिल होने चाहिए:

1. पहले खोजिए। पक्का कीजिए कि आइकन किसी और नाम से पहले से मौजूद नहीं है।
2. जोड़ने का औचित्य बताइए। एक वाक्य लिखिए कि आइकन क्या दर्शाता है और कहाँ इस्तेमाल होगा।
3. स्पेक पर बनाइए। मौजूदा लाइब्रेरी का ग्रिड, स्ट्रोक वज़न, कॉर्नर रेडियस, एंड कैप और जॉइन मिलाइए।
4. ऑप्टिकल रिव्यू। दूसरा डिज़ाइनर 16, 20 और 24 पिक्सल साइज़ पर आइकन का दृश्य संतुलन जाँचे।
5. नाम दीजिए और शिप कीजिए। नाम नामकरण पैटर्न का पालन करे। Figma और कोड दोनों पर एक ही PR में शिप कीजिए।

बिना योगदान प्रक्रिया वाला सिस्टम ऐसा सिस्टम है जिसे लोग बायपास कर देते हैं। जिस पहली बार किसी डिज़ाइनर को आइकन तुरंत चाहिए होगा, वह फ़्री पैक से डाउनलोड करके बिना पूछे शिप कर देगा। उसके बाद से लाइब्रेरी में एक फ़ोर्क है।

डिप्रिकेशन की प्रक्रिया

आइकन डिप्रिकेट होते हैं। रीडिज़ाइन पुरानी स्टाइल रिटायर कर देता है, कोई फ़ीचर कट जाता है, ब्रांड रिफ़्रेश विज़ुअल भाषा बदल देता है। दर्ज कीजिए कि आइकन लाइब्रेरी से कैसे बाहर जाते हैं, सिर्फ़ यह नहीं कि कैसे अंदर आते हैं।

डिप्रिकेट आइकनों को लाइब्रेरी में दिखने वाले लेबल से चिह्नित कीजिए। उन्हें 90 दिन उपलब्ध रखिए ताकि मौजूदा स्क्रीन को माइग्रेट होने का समय मिले। फिर हटा दीजिए। जो लाइब्रेरी कभी आइकन नहीं हटाती वह संग्रहालय बन जाती है, और संग्रहालयों को अनदेखा किया जाता है।

---

आइकन कोड तक कैसे पहुँचते हैं

डिज़ाइन और कोड के बीच का हैंडऑफ़ वह जगह है जहाँ ज़्यादातर आइकन सिस्टम टूटते हैं। Figma लाइब्रेरी बेदाग़ है, कोड लाइब्रेरी बेमेल SVG का कब्रिस्तान है, और इंजीनियर दोनों पर भरोसा करना छोड़ देते हैं।

SVG ही फ़ॉर्मेट है

आइकन SVG में शिप कीजिए। PNG में नहीं, आइकन फ़ॉन्ट में नहीं। SVG वेक्टर है, बिना नुकसान किसी भी साइज़ तक स्केल होता है, आसान थीमिंग के लिए current color इनहेरिटेंस सपोर्ट करता है, और कंपोनेंट में इनलाइन करने लायक छोटा शिप होता है।

हर SVG का viewBox ग्रिड से मेल खाता है (24x24 या 20x20), स्ट्रोक और फ़िल के लिए currentColor इस्तेमाल करता है, और फ़ालतू transform या स्टाइल नहीं रखता। साफ़ SVG 1 KB से छोटा होता है। ज़्यादातर आइकन लाइब्रेरी 3 से 5 KB के आइकन शिप करती हैं क्योंकि वे डिफ़ॉल्ट सेटिंग से एक्सपोर्ट हुए थे, जो मेटाडेटा, transform और इनलाइन स्टाइल भर देती हैं जिनकी किसी को ज़रूरत नहीं।

ऑप्टिमाइज़ेशन पर समझौता नहीं

हर SVG को कोड रेपो में आने से पहले SVGO से गुज़ारिए। SVGO मेटाडेटा हटाता है, पाथ सरल करता है, फ़ालतू एट्रिब्यूट हटाता है, और फ़ाइल साइज़ औसतन 60 से 80% घटा देता है।

200 आइकनों की लाइब्रेरी में बिना ऑप्टिमाइज़ और ऑप्टिमाइज़्ड का अंतर आम तौर पर हर पेज लोड पर 400 KB होता है। यह Lighthouse पर चोट है, कोर वेब वाइटल्स में गिरावट है, और बिना वजह धीमा मोबाइल अनुभव है।

कंपोनेंट रैपर

हर SVG को टाइप्ड कंपोनेंट (React, Vue, Svelte) में लपेटिए। कंपोनेंट साइज़, रंग और एक्सेसिबिलिटी प्रॉप्स लेता है। इंजीनियर कभी कच्चा SVG इम्पोर्ट नहीं करता। वह <Icon name="search" size={20} /> इम्पोर्ट करता है और बाकी सिस्टम संभालता है।

इस पैटर्न का मतलब है कि आइकन लाइब्रेरी अपना अंदरूनी एक्सपोर्ट फ़ॉर्मेट (SVG, स्प्राइट, आइकन फ़ॉन्ट) कंज्यूमर कोड छुए बिना बदल सकती है। कंपोनेंट API है, SVG इम्प्लीमेंटेशन।

डिज़ाइन हैंडऑफ़ ग्लॉसरी हैंडऑफ़ के बड़े अनुशासन को कवर करती है। आइकन उन गिने-चुने मामलों में से हैं जहाँ डिज़ाइनर और इंजीनियर सचमुच मालिकाना साझा करते हैं।

---

आइकन सिस्टम की आम विफलताएँ

हर आइकन ऑडिट वही विफलताएँ पकड़ता है। अगर सिस्टम इनमें से किसी के साथ शिप होता है, तो लाइब्रेरी एक रीडिज़ाइन दूर है पूरी रीराइट से।

एक लाइब्रेरी में तीन स्ट्रोक वज़न। लगभग हमेशा मतलब है कि लाइब्रेरी कई फ़्री पैक से जोड़कर बनी है। इलाज है पूरे सेट को एक वज़न पर ज़बरदस्ती दोबारा बनाना।

अलग स्केल पर फ़िल्ड और आउटलाइन्ड वेरिएंट। फ़िल्ड संस्करण आउटलाइन से बड़ा पढ़ा जाता है क्योंकि किसी ने महसूस होने वाले वज़न की भरपाई नहीं की। इलाज है फ़िल्ड संस्करण को 1 से 2 पिक्सल घटाना जब तक दोनों एक साइज़ के न पढ़े जाएँ।

असंगत कॉर्नर रेडियस। आधे आइकनों के कोने गोल हैं, आधे के चौकोर। लगभग हमेशा इसलिए कि दो अलग डिज़ाइनरों ने बिना लिखे नियम के योगदान दिया। इलाज है एक रेडियस तय करना और रीफ़ैक्टर करना।

मेटाफ़र से नामकरण। आइकन जिनके नाम find, look, discover हैं, उस वस्तु की जगह जो वे दर्शाते हैं। डिज़ाइनर उन्हें ढूँढ नहीं पाते। इलाज है ऑब्जेक्ट-फ़र्स्ट परंपरा में नाम बदलना।

कोई डिप्रिकेशन प्रक्रिया नहीं। लाइब्रेरी में 350 आइकन हैं, जिनमें 80 बेकार या बदले जा चुके हैं। यह फूलापन सर्च धीमा करता है और नए डिज़ाइनरों को उलझाता है। इलाज है तिमाही ऑडिट और 90 दिन का डिप्रिकेशन चक्र।

---

2026 की परिस्थितियों में आइकन सिस्टम

तीन बदलावों ने आइकन सिस्टम बनने का तरीका बदल दिया। सिस्टम को इनसे बचना होगा।

वेरिएबल आइकन फ़ॉन्ट असली हैं। नए फ़ॉर्मेट एक आइकन फ़ाइल को कई वज़न, फ़िल और ऑप्टिकल साइज़ ले जाने देते हैं जो सहजता से इंटरपोलेट होते हैं। तकनीकी फ़ायदा विशाल है, डिज़ाइन का जोखिम यह है कि टीमें हर स्क्रीन पर हर वेरिएंट शिप कर देती हैं क्योंकि कर सकती हैं। तय कीजिए कौन-से वेरिएंट शिप होंगे। बाकी काट दीजिए।

AI टूल सेकंडों में आइकन बनाते हैं। Midjourney, DALL-E और ChatGPT एक प्रॉम्प्ट में चलने लायक आइकन बना सकते हैं। जोखिम यह है कि डिज़ाइनर आइकन बनाना छोड़कर प्रॉम्प्ट करने लगते हैं, जो सिस्टम की एकरूपता मार देता है क्योंकि हर प्रॉम्प्ट थोड़ी अलग स्टाइल देता है। पहले ड्राफ़्ट के लिए AI इस्तेमाल कीजिए। हर आउटपुट को सिस्टम से मिलाने के लिए रीफ़ैक्टर कीजिए।

Lucide, Phosphor और Heroicons बेसलाइन तय करते हैं। ये ओपन लाइब्रेरी एकसमान ग्रिड, वज़न और नामकरण के साथ 1500+ आइकन शिप करती हैं। ज़्यादातर प्रोडक्ट के लिए इनमें से किसी से शुरू करके कस्टमाइज़ करना शुरू से बनाने से तेज़ और बेहतर है। कस्टम आइकन सिर्फ़ उन प्रोडक्ट-विशेष अवधारणाओं के लिए बनाइए जिन्हें ओपन लाइब्रेरी कवर नहीं करतीं।

WCAG ग्लॉसरी उन एक्सेसिबिलिटी बेसलाइन को कवर करती है जो आइकन कंट्रास्ट और लेबलिंग तय करती हैं। इंटरैक्टिव एलिमेंट के आइकनों को सिर्फ़ दृश्य लेबल नहीं, एक्सेसिबल नाम भी चाहिए।

---

FAQ

आइकन सिस्टम को कौन-सा ग्रिड साइज़ इस्तेमाल करना चाहिए?

सामान्य प्रोडक्ट UI के लिए 24 पिक्सल ग्रिड, घने डेटा इंटरफ़ेस के लिए 20 पिक्सल ग्रिड। ग्रिड में हर तरफ़ 2 पिक्सल पैडिंग होती है, जिससे 20 या 16 पिक्सल का लाइव एरिया बचता है जहाँ आइकन असल में बैठता है। एक चुनिए और पूरी लाइब्रेरी में उसी के भीतर जिएँ।

आइकन के स्ट्रोक कितने मोटे होने चाहिए?

24 पिक्सल ग्रिड पर 1.5 से 2 पिक्सल। 1.5 पिक्सल हल्का और तकनीकी पढ़ा जाता है, 2 पिक्सल आत्मविश्वासी और दोस्ताना। एक वज़न चुनिए, उसे टोकन के रूप में दर्ज कीजिए, और अलग वज़न वाला हर योगदान ठुकरा दीजिए।

आइकन डिज़ाइन में ऑप्टिकल करेक्शन क्या है?

आइकनों को इस तरह एडजस्ट करने का अभ्यास कि वे तब भी संतुलित दिखें जब गणित कहता है कि वे अलाइन हैं। वृत्त वर्ग से बड़े दिखते हैं, त्रिकोण छोटे, तिरछी रेखाएँ क्षैतिज से पतली। ऑप्टिकल करेक्शन इन धारणा की सनकों की भरपाई करता है। बाउंडिंग बॉक्स से ज़्यादा हमेशा आँख पर भरोसा कीजिए।

आइकन फ़िल्ड होने चाहिए या आउटलाइन्ड?

ज़्यादातर आधुनिक सिस्टम दोनों शिप करते हैं। निष्क्रिय स्थितियों के लिए आउटलाइन्ड, सक्रिय के लिए फ़िल्ड। दोनों वेरिएंट दृश्य रूप से संतुलित होने चाहिए, जिसका मतलब आम तौर पर यह है कि फ़िल्ड संस्करण आउटलाइन से 1 से 2 पिक्सल छोटा होता है ताकि महसूस होने वाला वज़न मेल खाए।

डिज़ाइन सिस्टम में आइकनों का नामकरण कैसे करें?

ऑब्जेक्ट-फ़र्स्ट, kebab-case, और ज़रूरत पड़ने पर दिशा वाले प्रत्यय। Search, find नहीं। Arrow-left, back नहीं। पर्यायवाची मैप इस्तेमाल कीजिए ताकि डिज़ाइनर वैकल्पिक शब्दों से खोज सकें। वेरिएंट प्रत्यय (filled, duotone) जोड़िए ताकि इंजीनियर एक इम्पोर्ट में सही वेरिएंट उठा सकें।

कस्टम आइकन कब बनाएँ और ओपन लाइब्रेरी कब इस्तेमाल करें?

ओपन लाइब्रेरी (Lucide, Phosphor, Heroicons) को बेस की तरह इस्तेमाल कीजिए। सिर्फ़ वही प्रोडक्ट-विशेष अवधारणाएँ हाथ से बनाइए जिन्हें वे लाइब्रेरी कवर नहीं करतीं। 2026 में शुरू से 300 आइकन का सेट बनाना लगभग हमेशा बेकार मेहनत है। ओपन बेस को कस्टमाइज़ कीजिए, जोड़ों को दर्ज कीजिए, शिप कीजिए।

सिस्टम अपनी कीमत खुद वसूल लेता है

एकरूप आइकन लाइब्रेरी प्रोडक्ट को पॉलिश्ड महसूस कराने का सबसे सस्ता तरीका है। भटकती आइकन लाइब्रेरी प्रोडक्ट को सस्ता महसूस कराने का सबसे तेज़ तरीका है। सिस्टम बनाने की कीमत एक से दो हफ़्ते का अनुशासित काम है। न बनाने की कीमत हर उस स्क्रीन पर स्थायी विज़ुअल टैक्स है जो प्रोडक्ट शिप करता है, हमेशा के लिए।

एक ग्रिड चुनिए। एक वज़न चुनिए। एक कॉर्नर रेडियस चुनिए। एक नामकरण पैटर्न चुनिए। योगदान और डिप्रिकेशन की प्रक्रिया लिखिए। SVG ऑप्टिमाइज़ कीजिए। उन्हें टाइप्ड कंपोनेंट में लपेटिए। फिर कोड रिव्यू में इस सबको लागू कराइए।

हर स्क्रीन पर आइकन कॉलम प्रोडक्ट की गुणवत्ता के सबसे घने संकेतों में से एक है। इसे एक बार सही कर लीजिए और यह बाकी डिज़ाइन को संभाल लेगा।

अगर आपको ऐसी टीम चाहिए जो बड़े डिज़ाइन सिस्टम हैंडऑफ़ के हिस्से के रूप में आइकन सिस्टम बनाती हो, तो Brainy को हायर कीजिए। ग्रिड, गवर्नेंस और कोड एक ही प्रोजेक्ट में, अंत में ऊपर से चिपकाए हुए नहीं।

संबंधित पठन

• डिज़ाइन सिस्टम गाइड
• विज़ुअल हायरार्की डिज़ाइन
• डिज़ाइन हैंडऑफ़ Figma से Dev तक
• वेब एक्सेसिबिलिटी चेकलिस्ट