Temeller

İkonlar

Arayüz ikonları tek bir Icon bileşeninden, 24 px ızgaraya çizilmiş çizgi ikonlardan gelir. Varsayılan set Lucide, ikinci set Tabler'dır; ikon rengi metinden, boyutu token ölçeğinden gelir.

İkon setleri

Set	Lisans	Rol
Lucide	ISC (Feather’dan gelen ikonlar için MIT)	Varsayılan set. Önce burada arayın.
Tabler Icons	MIT	İkinci set. Yalnızca Lucide’de karşılığı olmayan kavramlar için.
BigBang ikonları	Pupas	Hiçbir sette olmayan kavramlar; aynı ızgarada ve aynı çizgi kalınlığında çizilir.

İki set de 24 px ızgara, 2 birim çizgi, yuvarlak uç ve birleşim kullanır; bu yüzden yan yana tutarlı görünür.
Dolgulu ikon setleri (Phosphor, Material, Fluent) çizgi ikonlarla aynı ekranda kullanılmaz.
Remix Icon kullanılmaz: 4.9.0 ve sonraki sürümlerin lisansı ikon paketinin yeniden dağıtımını yasaklar (D-17).
Ödeme yöntemi ve kart ağı işaretleri ikon değildir. Sahiplerinin dosyalarıyla, renkleri değiştirilmeden, ayrı bir klasörden kullanılır. Bkz. Marka.

Icon bileşeni

Arayüzde ikon yalnızca <Icon name="…" /> ile kullanılır. İkon paketinden doğrudan içe aktarma yapılmaz (ASSET-03).
name değeri ikon kaydından türetilmiş bir türdür; kayıtta olmayan ad derlenmez.
Adlar BigBang adlarıdır, setin kendi adı değildir: chevron-down, check, x. Bir ikon setten sete taşınırsa ad değişmez.
Yalnızca kullanılan ikonlar pakete girer ve her ikon ayrı bir modüldür; kullanılmayan ikon son pakette yer almaz.
Kullanılan setlerin lisans bildirimi ürünle birlikte dağıtılır.

Boyutlar

Boyut	px	Birlikte kullanıldığı metin	Örnek
`xs`	12	`body-sm`, `label-sm`	Badge içindeki ikon
`sm`	16	`body-md`, `label-md`	Button `sm` ve `md`, alan içi ikon
`md`	20	`body-lg`, `heading-sm`	Button `lg`, menü öğesi
`lg`	24	`heading-md` ve üstü	Boş durum satırı, başlık yanı
`xl`	32	`heading-lg` ve üstü	Metinsiz, tek başına duran büyük ikon

İkon ile metin arasındaki boşluk space-sm (6 px) ya da space-md (8 px) olur.
İkon metnin ilk satırıyla dikeyde ortalanır.
Bileşenlerin ikon boyutları kendi token’larından gelir: button-icon-size-*, badge-icon-size.

Çizgi ve ızgara

İkonlar 24 × 24 px ızgaraya, her yanda 2 px boşlukla çizilir.
Çizgi kalınlığı 24 px’te 2 birimdir ve ikon küçüldükçe orantılı incelir.
Uçlar ve birleşimler yuvarlaktır. Köşe yarıçapı Lucide’de 2, Tabler’da 3 birimdir; yeni ikonlar Lucide’ye uyar.
Çizgi kalınlığı tüm markalarda 2’dir.

Renk

İkon rengi currentColor ile metinden gelir. Metinden farklı bir renk gerekiyorsa ikon token’larından biri seçilir; ikonun kendi rengi yoktur.

Token	Açık mod	Koyu mod
`--bigbang-color-icon-default`	`#262626#262626#262626`	`#f5f5f5#f5f5f5#f5f5f5`
`--bigbang-color-icon-subtle`	`#737373#737373#737373`	`#a1a1a1#a1a1a1#a1a1a1`
`--bigbang-color-icon-disabled`	`#a1a1a1#a1a1a1#a1a1a1`	`#525252#525252#525252`
`--bigbang-color-icon-inverse`	`#ffffff#ffffff#ffffff`	`#171717#171717#171717`
`--bigbang-color-icon-brand`	`#146d83#9a451c#4f55b4`	`#77bacf#ea9774#9aa6ff`
`--bigbang-color-icon-danger`	`#c14347#c14347#c14347`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-icon-success`	`#138a50#138a50#138a50`	`#7dd09b#7dd09b#7dd09b`
`--bigbang-color-icon-warning`	`#a16600#a16600#a16600`	`#ecac5f#ecac5f#ecac5f`
`--bigbang-color-icon-info`	`#007ac1#007ac1#007ac1`	`#79c2ff#79c2ff#79c2ff`

Erişilebilirlik

İkon varsayılan olarak süstür: aria-hidden="true" taşır ve ekran okuyucu onu okumaz. Yanında aynı anlamı taşıyan metin vardır (ASSET-08).
Yalnızca ikon taşıyan bir kontrolün label özelliği zorunludur; etiket ipucunda da görünür.
Tek başına anlam taşıyan ikon (örneğin bir tablo hücresindeki durum ikonu) bir ad alır ve zemine karşı en az 3:1 kontrast taşır (WCAG 1.4.11).
İkon tek başına bir eylemi anlatmaya yetmiyorsa metinli buton kullanın.
Aynı ikon her yerde aynı anlamı taşır; bir ikona ikinci bir anlam yüklenmez.

Hareket

İkonlar süs olarak hareket etmez.
Durum değişikliği hareketle gösterilebilir: açılan bölümün oku motion-collapsible-icon-duration ile 180° döner.
Sürekli dönen tek ikon yükleniyor göstergesidir; azaltılmış harekette durur.

Yeni ikon ekleme

İkon kaydında ve Lucide’de arayın; yoksa Tabler’da arayın.
İkon bulunduysa kayda BigBang adıyla, kaynak set, sürüm ve lisansla eklenir.
Hiçbir sette yoksa 24 px ızgarada, 2 birim çizgiyle çizilir ve kayda kaynak own olarak eklenir.
SVG dosyası temizlenir: üst veri, <style>, style=, <script>, <foreignObject> ve dış bağlantılar kaldırılır; renkler currentColor olur (ASSET-06).
Ad kebab-case yazılır, marka adı ve new-, final-, v2 gibi ekler kullanılmaz (ASSET-13).

Galeri

Kayıttaki her ikon İkon galerisi sayfasındadır. Galeri ikonları derleme sırasında packages/icons kaydından okur; ada ve Türkçe anahtar kelimeye göre arar, ikonu 12–32 px boyutlarında ve farklı çizgi kalınlıklarında önizler, adını ve <Icon /> satırını kopyalar. Yeni bir ikon eklemeden önce galeride arayın.

Yönergeler

Tek bir ikon ailesi kullanın

YapınAynı çizgi kalınlığı ve uç biçimi; ikonlar bir aile gibi okunur.

YapmayınDolgulu ve çizgili ikonlar karışınca ağırlıklar tutmaz.

İkonu rengiyle değil, metnin rengiyle boyayın

<Icon name=“check” />

Yapınİkon metnin rengini alır; mod ve marka değişince uyumlu kalır.

<svg stroke=“#3366CC”>

YapmayınSabit renk koyu modda ve başka markada uyumsuz kalır.