---
title: "आइकन"
description: "हर डिज़ाइन सिस्टम का एक आइकन सेट, एक वेट, और एक नियम — चयनित न हो तो आउटलाइन वाला, चयनित हो तो भरा हुआ।"
url: "https://tanrei.chnotchy.com/hi/foundations/icons/"
last_updated: 2026-10-26T22:31:27.000Z
---

# आइकन

> हर डिज़ाइन सिस्टम का एक आइकन सेट, एक वेट, और एक नियम — चयनित न हो तो आउटलाइन वाला, चयनित हो तो भरा हुआ।

Tanrei के डिफ़ॉल्ट आइकन [Material Symbols](https://fonts.google.com/icons) हैं, **Rounded** शैली में, **वेट 300** पर। टेक्स्ट के टाइपफ़ेस की तरह इस फ़ॉन्ट का भी सिर्फ़ नाम से रेफ़रेंस लिया जाता है, इसे साथ में नहीं दिया जाता: इसे प्रॉडक्ट लोड करता है।

आइकन कैसे बनता है, यह टोकन का एक छोटा ग्रुप तय करता है। आइकन बॉक्स तीन साइज़ में आता है, `sys.icon.small`, `medium` और `large` (डिफ़ॉल्ट रूप से 16, 20 और 24px), और फ़ॉन्ट का ऑप्टिकल साइज़ बॉक्स के अनुसार चलता है।

- **`ref.typeface.icon`**: The icon font. Material Symbols Rounded: a variable font whose weight and fill are set from sys.icon.
- **`sys.icon.family`**: The icon font by selection. A variable icon font (Material Symbols) is one family and tells selected from unselected with its FILL axis; a static icon font tells them apart with two families (Material Icons Outlined / Material Icons). Both default to ref.typeface.icon.
- **`sys.icon.weight`**: The stroke weight of every icon (the \`wght\` axis of the icon font).
- **`sys.icon.fill`**: The fill of an icon by selection (the \`FILL\` axis of the icon font): 0 is outlined, 1 is filled.

इससे जनरेट किया गया: `tokens/ref/typeface.tokens.json`, `tokens/sys/measure.tokens.json`

## फ़िल का नियम

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

```js
import '@tanrei/web/icons.css';
```

```html
<button aria-pressed="true"><span class="tanrei-icon" aria-hidden="true">favorite</span> पसंदीदा</button>
```

`.tanrei-icon` किसी भी पूर्वज एलिमेंट पर `aria-pressed`, `aria-selected`, `aria-checked` और `aria-current` पढ़ता है (Tanrei कंट्रोल इन्हें `data-aria-*` पर ले जाते हैं, इसलिए उन पर यह `data-aria-pressed`, `data-aria-selected`, `data-aria-checked` और `data-aria-current` पढ़ता है), या आइकन अथवा किसी पूर्वज पर `data-selected` (`data-selected="false"` किसी एक आइकन को इससे बाहर रखता है)। जब आइकन के पास का टेक्स्ट वही बात कहता हो, तो आइकन को `aria-hidden="true"` दें, और जब न कहता हो, तो कंट्रोल को एक्सेसिबल नाम दें।

नाम `data-icon` में भी दिया जा सकता है, एलिमेंट को खाली छोड़कर:

```html
<span class="tanrei-icon" data-icon="folder"></span>
```

ग्लिफ़ वही बनता है, पर उसका नाम पेज का टेक्स्ट नहीं रहता: वह `textContent` या `innerText` में नहीं आता, कॉपी किए गए टेक्स्ट में नहीं आता, और आसपास के कंट्रोल के एक्सेसिबल नाम में भी नहीं आता। इसे वहाँ इस्तेमाल करें जहाँ नाम वरना टेक्स्ट की तरह पढ़ा जाता, जैसे मेन्यू या सूची की कोई पंक्ति, टेबल का कोई सेल, या वह टेक्स्ट जिसकी तुलना कोई टेस्ट करता है। साइज़, सिलेक्शन और दाएँ से बाएँ लेआउट में मिरर होना ठीक वैसे ही काम करते हैं जैसे टेक्स्ट में लिखे नाम के साथ। जब आइकन के पास का टेक्स्ट वही बात कहता हो, तो `aria-hidden="true"` बनाए रखें: Firefox 128 से पहले के वर्शन नाम को एक्सेसिबल नाम में पढ़ते हैं।

नेटिव प्लैटफ़ॉर्म पर यही मान डिज़ाइन सिस्टम के साथ आते हैं (`system.icon`), साथ में एक छोटा हेल्पर, जो **चयनित** होने की स्थिति और एक साइज़ को उस रूप में बदलता है जो फ़ॉन्ट को चाहिए। Tanrei अभी कोई आइकन कंपोनेंट शिप नहीं करता।

## हर डिज़ाइन सिस्टम का अपना आइकन सेट

आइकन सेट डिज़ाइन सिस्टम का होता है, इसलिए [लेयर](https://tanrei.chnotchy.com/hi/foundations/design-systems/) उसे बदल सकती है। साथ आने वाले सिस्टम इन मानों पर रिज़ॉल्व होते हैं:

| डिज़ाइन सिस्टम | `family.unselected` | `family.selected` | `weight` | `fill.unselected` | `fill.selected` |
| --- | --- | --- | --- | --- | --- |
| `tanrei` | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
| `cupertino` | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
| `m3-expressive-like` | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |
| `m3-like` | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |

इससे जनरेट किया गया: `tokens/systems/*.system.json`, `design/tokens/<system>/tanrei.light.tokens.json`

आइकन फ़ॉन्ट चयनित आइकन को अचयनित से दो में से किसी एक तरीक़े से अलग करता है, और टोकन दोनों को कवर करते हैं। चयनित आइकन हमेशा `family.selected` **और** `fill.selected` दोनों लेता है; दोनों में से कौन-सा वास्तव में बनने वाली चीज़ को बदलता है, यह सेट पर निर्भर है।

### एक वेरिएबल फ़ैमिली

वेरिएबल आइकन फ़ॉन्ट, जैसे Material Symbols, `FILL` अक्ष वाली एक ही फ़ैमिली है। फ़ैमिली के दोनों टोकन डिफ़ॉल्ट रूप से `ref.typeface.icon` की ओर इशारा करते हैं, इसलिए उस एक टोकन को दूसरी जगह मोड़ने से सेट बदल जाता है, और `fill.unselected` / `fill.selected` स्टेट को अलग करते हैं। `m3-like` बस इतना ही लिखता है:

```json
"tokens": {
  "tanrei.ref.typeface.icon": { "$value": ["Material Symbols Outlined"], "reason": "Material Design 3 draws Material Symbols in the Outlined style." },
  "tanrei.sys.icon.weight":   { "$value": 400, "reason": "Material Symbols default weight in Material Design 3." }
}
```

### दो स्टैटिक फ़ैमिली

स्टैटिक आइकन फ़ॉन्ट में कोई अक्ष नहीं होता। वह आउटलाइन वाले और भरे हुए चित्र दो अलग फ़ैमिली के रूप में देता है, इसलिए लेयर हर स्टेट के लिए एक फ़ैमिली का नाम देती है:

```json
"tokens": {
  "tanrei.sys.icon.family.unselected": { "$value": ["Material Icons Outlined"], "reason": "Acme uses the static Material Icons set: outlined when unselected." },
  "tanrei.sys.icon.family.selected":   { "$value": ["Material Icons"], "reason": "Acme uses the static Material Icons set: filled when selected." },
  "tanrei.sys.icon.weight":            { "$value": 400, "reason": "A static icon font has one weight; 400 is what Material Icons is drawn at." }
}
```

फ़िल और वेट के टोकन जैसे हैं वैसे ही रहते हैं। स्टैटिक फ़ॉन्ट अक्षों को नज़रअंदाज़ कर देता है, इसलिए उनसे कोई नुक़सान नहीं होता, और कंपोनेंट को यह जानने की ज़रूरत नहीं कि किस तरह का सेट सक्रिय है। यह लेयर रिपॉज़िटरी का अपना टेस्ट फ़िक्स्चर है (`packages/tokens-build/test/fixtures/acme.system.json`)।

### आइकन के नाम प्रॉडक्ट की ज़िम्मेदारी हैं

Tanrei यह तय करता है कि आइकन कैसे बनता है, यह नहीं कि कौन-से आइकन मौजूद हैं। सेट अपने ग्लिफ़ को अलग-अलग नाम देते हैं, और हो सकता है किसी सेट में वह ग्लिफ़ न हो जो दूसरे में है। जो प्रॉडक्ट अपना आइकन सेट बदलता है, वह अपने इस्तेमाल किए हुए नाम जाँचता है। जो सिंबल सेट फ़ॉन्ट नहीं है, जैसे SF Symbols, उसे फ़ैमिली टोकन से नाम नहीं दिया जा सकता; यह मिमिक्री-गैप रजिस्ट्री में `platform-symbol-sets` के रूप में दर्ज है।

### React Native

React Native का `<Text>` फ़ॉन्ट-वेरिएशन अक्ष सेट नहीं कर सकता, इसलिए वेरिएबल आइकन फ़ॉन्ट के साथ `FILL` कभी ग्लिफ़ तक नहीं पहुँचता और आइकन दोनों स्टेट में एक जैसा दिखता है। वहाँ नियम बनाए रखने के लिए ऊपर की तरह दो स्टैटिक फ़ैमिली इस्तेमाल करें, या आइकन SVG के रूप में बनाएँ।

चारों नेटिव पैकेजों के आइकन हेल्पर अभी “हर स्टेट की अपनी फ़ैमिली” वाले मॉडल पर ले जाए जा रहे हैं; जब तक किसी पैकेज का README इसका वर्णन न करे, मानकर चलें कि वह पैकेज एक ही फ़ैमिली पढ़ता है।