Temabayiiİkon lisans karnesi
Tasarım

Arayüz ikonlarında 24 piksellik ızgara ve 2 piksellik çizgi

5 dakikalık okuma · Yayın 28 Ekim 2026 · Son kontrol 23 Ekim 2026 · 2 kaynak

İki farklı ikon setini aynı arayüzde kullandığınızda ikonlar “bir yerden tuhaf” görünüyorsa, sorun çoğu zaman lisansta ya da renkte değil, ızgaradadır. Her set ikonlarını belirli bir kare tuvale, belirli bir iç boşlukla ve belirli bir çizgi kalınlığıyla çizer. Bu üç sayı setten sete değişir ve aynı boyutta gösterilen iki ikonun görsel ağırlığını farklı yapar.

23 Ekim 2026 verimize göre Iconify’daki 227 setin 94’ü 24 piksellik bir tasarım yüksekliğiyle kayıtlı. Onu 32 piksellik 39 set ve 16 piksellik 18 set izliyor. 47 setin kaydında yükseklik bilgisi yok; bunlar çoğunlukla ikon başına boyutu değişen setler.

Tuval ve iç boşluk

Tuval, ikonun çizildiği karedir. Lucide’ın tasarım rehberi bunu kesin sayılarla verir: ikonlar 24×24 piksellik bir kareye çizilir ve çizgiler ile tuval kenarı arasında en az 1 piksel boşluk kalır, böylece hiçbir şey kırpılmaz.

İç boşluğun önemi şurada: iki set de 24 piksel tuval kullansa bile biri kenardan 1, öteki 2 piksel boşluk bırakıyorsa, ikincisinin ikonları aynı boyutta gösterildiğinde daha küçük görünür. Iconify kayıtlarında bu bilgi “Has Padding” (iç boşluk var) etiketiyle işaretlenir. Etiket 125 sette bulunuyor; yani setlerin yarısından fazlası ikonu tuvalin tamamına yaymıyor.

Pratik sonuç: farklı setlerden ikonları yan yana kullanacaksanız, ikisini de aynı boyutta gösterip bir ekran görüntüsü alın ve görsel boyutlarını karşılaştırın. Gerekirse birinin gösterim boyutunu bir iki piksel değiştirin.

Çizgi kalınlığı

Arayüz ikonlarının büyük kısmı ya dolgulu şekillerden ya da sabit kalınlıkta çizgilerden oluşur. Lucide’ın rehberi çizgi kalınlığını 2 piksel olarak sabitler ve farklı kalınlıkların karıştırılmamasını ister. Aynı rehber çizgilerin yolun ortasına hizalanmasını, açık yollarda yuvarlak uç (round cap) ve köşelerde yuvarlak birleşim (round join) kullanılmasını söyler.

Iconify kaydında “Uses Stroke” (çizgi kullanır) etiketi bu tür setleri gösterir. Etiket 48 sette var, bunların 44’ü arayüz gruplarında. Tabler Icons ve Lucide bu etiketi taşıyan setlerdendir.

Çizgi tabanlı setlerin bir avantajı var: çoğu, çizgi kalınlığını CSS ya da bileşen ayarıyla değiştirmenize izin verir. Bir sette 2 piksellik çizgi size kalın geliyorsa 1,5 piksele indirebilirsiniz. Ama bunu yaparken tüm ikonlarda aynı değeri kullanın; karışık kalınlık, karışık setten daha çok göze batar.

Köşe yarıçapı ve aralık

Lucide’ın rehberi küçük ayrıntıları da sayıya bağlar:

Bu sayılar yalnız Lucide için geçerlidir; ama iki setin neden “aynı aileden” görünmediğini anlamak için iyi bir kontrol listesidir. Köşeleri keskin bir setle yumuşak köşeli bir seti aynı menüde kullandığınızda fark hemen hissedilir.

Dolgulu, çizgi ve iki tonlu çeşitler

Birçok set aynı ikonun birden çok stilini sunar. Verimize göre 99 set, çizgi ve dolgulu çeşitleri ad ekiyle ayırıyor (outline, line, regular ile filled, fill, solid, bold gibi). Bu çeşitler genellikle durum göstermek için kullanılır: seçili sekmede dolgulu, seçili olmayanlarda çizgi ikon gibi.

Setler bu çeşitleri farklı şekillerde adlandırır. Phosphor’da adı dolgulu ya da kalın bir ekle (fill, bold) biten 3.036, iki tonlu ekle (duotone) biten 1.519 ikon var. Fluent UI System Icons’ta adı dolgulu bir ekle biten 10.147, çizgi ekiyle (regular gibi) biten 10.029 ikon var. Material Symbols ise farklı bir yol izler: Google’ın geliştirici rehberine göre yazı tipi sürümünde dolgu bir eksendir (FILL, 0 ile 1 arası) ve aynı ikon iki durumu da gösterebilir. Rehber kalınlığın 100–700, optik boyutun 20–48 arasında ayarlanabildiğini de belirtir.

Set sayfalarımızdaki “Setin yapısı” bölümü, her sette adında bu eklerden hangisinin kaç kez geçtiğini gösterir. Bu sayılar, bir setin durum değişimlerini (seçili ve seçili değil) karşılayıp karşılayamayacağı konusunda hızlı bir fikir verir.

Küçük boyutlar için ayrı ızgara

16 piksellik ızgaraya çizilmiş setler, ikonların küçük gösterildiği yerler için tasarlanır: tablo hücreleri, sıkı araç çubukları, form alanlarının içi. 24 piksellik bir ikonu 16 piksele küçülttüğünüzde 2 piksellik çizgi 1,33 piksele düşer ve ekranda bulanık görünebilir. Bootstrap Icons gibi setler doğrudan 16 piksellik ızgaraya çizilmiştir; bu boyutta, küçültülmüş bir 24 piksellik ikondan daha az bulanıklaşır.

Iconify’ın gruplamasında bu setler “16 ve 32 piksellik arayüz setleri” başlığında ayrı durur. Grup sayfasında 16 ve 32 piksellik setleri lisans ve bakım durumlarıyla birlikte görebilirsiniz. 24 piksellik setlerin tamamı ayrı bir grup sayfasında.

İki seti karıştırmak gerekiyorsa

Bazen ana setinizde bir ikon yoktur ve başka bir setten almanız gerekir. Bu durumda:

  1. Aynı ızgara boyutunda bir set seçin (24 ile 24, 16 ile 16).
  2. Çizgi tabanlı bir sete çizgi tabanlı, dolgulu bir sete dolgulu ikon ekleyin.
  3. Çizgi kalınlığını ana setinizinkine eşitleyin.
  4. İkonu ana setinizin en benzer ikonunun yanında, aynı boyutta gösterip karşılaştırın.
  5. Lisansı kontrol edin: ikinci set farklı bir lisansla geliyorsa onun şartları da projeye girer.

Set sayfalarımızdaki “adlandırması en çok benzeyen setler” listesi bu iş için iyi bir başlangıçtır. Ad benzerliği çizim tarzının benzerliğini ölçmez, ama aynı anlam yelpazesini kapsayan setleri bulmanızı kolaylaştırır. Örneğin Lucide karnesinde en benzer set Lucide Extended’dır; ikisi aynı tasarım kurallarıyla çizilmiştir.

Optik denge

Aynı ızgara ve aynı çizgi kalınlığı bile her zaman yeterli değildir. Bir daire ile bir kare aynı genişlikte çizildiğinde daire göze daha küçük görünür; bu yüzden tasarımcılar daireleri ızgarada biraz daha büyük çizer. Iconify kayıtlarındaki “Precise Shapes” (kesin şekiller) etiketi, setin ikonlarının ızgaraya hassas hizalandığını gösterir ve 113 sette bulunur. Bu etiketi taşıyan setler küçük boyutlarda daha net görünme eğilimindedir; ama etiket tek başına bir kalite ölçüsü değildir.

Lisans bu işin neresinde

Izgara ve çizgi kurallarını öğrenmek için bir setin tasarım rehberini okumak ya da kendi ikonunuzu o kurallara göre çizmek telif sorunu doğurmaz; kurallar fikirdir, çizim değildir. Bir setin ikonunu alıp üzerinde değişiklik yaptığınızda ise o setin lisansı geçerli olur. Hangi lisansın değişikliğe nasıl baktığını lisans türleri sayfasında karşılaştırdık.

Kaynaklar

  1. Lucide, Icon Design Guide
  2. Google for Developers, Material Symbols guide

Temabayii ekibi hazırladı. Lisans açıklamaları genel bilgidir. Hata görürseniz bize yazın.

Kılavuzdan başka yazılar