İkon Tasarımı: Tutarlı Bir Set Nasıl Oluşturulur

İyi bir ikon tasarımı tek bir simgeyle değil, birbirine yakışan bir setle ölçülür. Tek başına güzel görünen bir ikon, diğerlerinin yanına geldiğinde çizgisi kalın, köşesi sert ya da boyutu farklı kaçıyorsa tüm arayüz dağınık durur. Tutarlı bir set kurmanın sırrı yetenekten çok kuralları önceden belirlemekte: ortak bir grid, sabit bir çizgi kalınlığı, aynı köşe yarıçapı ve optik denge. Bu yazıda bir ikon setini sıfırdan, sürdürülebilir biçimde nasıl kuracağını adım adım anlatıyorum.

Grid ve canvas: her şeyin başladığı yer

Bir set kurmadan önce ortak bir çalışma alanı tanımla. Endüstri standardı 24×24 piksel bir canvas'tır; daha küçük arayüzler için 20×20 veya 16×16 da yaygındır. Önemli olan tüm ikonları aynı canvas üzerinde çizmek. Canvas'ın içine bir de live area (güvenli alan) yerleştir: 24'lük bir canvas'ta genelde 2 piksellik kenar boşluğu bırakıp 20×20'lik bir iç alan kullanılır. İkonun ağırlık merkezi bu alanın içinde kalmalı.

Grid'i sadece kare olarak düşünme. Pratikte dört temel keystone şekli işine yarar: kare, dikey dikdörtgen, yatay dikdörtgen ve daire. Bir kalem ikonu dikey, bir zarf yatay, bir saat ise daire keystone'una oturur. Bu sayede farklı ikonlar farklı biçimlerde olsa da gözle aynı büyüklükte algılanır.

Çizgi kalınlığı: setin DNA'sı

Bir line (outline) sette tutarlılığın en görünür ölçütü stroke (çizgi kalınlığı)'dur. 24'lük bir grid için klasik tercih 2 piksellik çizgidir; daha ince bir his için 1.5 piksel de kullanılır. Kuralı bir kez seç ve setin tamamında bozma.

• Tüm açık uçları aynı bitişle bırak: yuvarlak uçlar için stroke-linecap: round, keskin için butt.
• Köşe birleşimlerini de sabitle: stroke-linejoin: round ya da miter; ikisini karıştırma.
• Çizgileri piksel ızgarasına hizala. 2 piksellik bir çizginin merkezi tam piksel sınırına denk gelirse kenarları bulanıklaşır; yarım piksel kaydırarak netleştir.

Tasarımı vektörel tut ama her zaman gerçek boyutunda (örneğin 16 ve 24 pikselde) önizle. Bir çizgi 24'te zarif görünüp 16'da hamur gibi kapanabilir.

Köşe yarıçapı ve görsel dil

Köşe yarıçapı (corner radius) setin kişiliğini belirler. Sert köşeler teknik ve ciddi, yumuşak köşeler dostça ve modern durur. Bir radius değeri seç (örneğin 2 piksel) ve dış köşelerde tutarlı uygula. İç köşelerde radius'u biraz küçültmek optik olarak daha doğru görünür çünkü iç bükeyler gözde zaten yumuşar.

Aynı mantık uçların kesimi, okların açısı (genelde 45°), kapların eğimi gibi tüm tekrarlayan detaylar için geçerli: bir karar ver, dokümante et, her ikona uygula. Setin tutarlılığı bu mikro kararların toplamından doğar.

Optik denge: matematik değil göz

İkon tasarımının en çok atlanan yanı optik düzeltmedir. Geometrik olarak doğru her zaman doğru görünmez. Birkaç klasik örnek:

• Bir daire, eşit kenarlı bir kareyle yan yana konduğunda daha küçük algılanır; daireyi grid'in biraz dışına taşırarak büyütmek gerekir.
• Üçgen (örneğin "play" ikonu) geometrik merkeze konursa sola kaymış görünür; ağırlık merkezini hizalamak için sağa kaydırılır.
• Yatay çizgiler aynı kalınlıktaki dikey çizgilerden daha kalın algılanır; bazı setlerde yataylar hafifçe inceltilir.

Kural: cetvele değil göze güven. Bir ikonu diğerlerinin yanına koy, gözünü kıs, hangisi öne fırlıyor ya da geride kalıyorsa onu düzelt.

Yapım sürecini sistemleştirmek

Tutarlılığı tek tek hafızada tutmak yerine araçlara gömmek gerekir. Figma kullanıyorsan şu yapıyı kur:

• İkonları component olarak oluştur ve hepsini aynı frame boyutunda (24×24) tut.
• Grid ve live area'yı bir şablon frame'e koy, her yeni ikona kopyala.
• Çizgi kalınlığı, renk ve uç stilini stroke style olarak kaydet ki tek yerden değiştirebilesin.
• Adlandırmayı sistematik tut: arrow/left, arrow/right, user/filled gibi slash'lı isimler Figma'da otomatik klasörlenir.

İkon başına bir hızlı kontrol listesi işe yarar: doğru canvas mı, doğru stroke mu, çizgiler piksele hizalı mı, 16 pikselde okunuyor mu, isimlendirme doğru mu.

Temiz SVG olarak dışa aktarmak

Tasarım bittiğinde ikonlar koda SVG olarak gider. Temiz çıktı için birkaç noktaya dikkat et:

• Mümkünse çizgileri outline'a çevirmek yerine stroke olarak bırak; böylece renk ve kalınlık CSS'ten kontrol edilebilir.
• Rengi currentColor yap ki ikon metnin rengini miras alsın.
• Gereksiz grupları, boş <g> etiketlerini ve editör meta verisini temizle (SVGO bunu otomatik yapar).

Tipik bir temiz ikon şöyle görünür:

<svg viewBox="0 0 24 24" width="24" height="24"
     fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M13 6l6 6-6 6"/>
</svg>

Bu yapıyla bir buton içindeki ikon color ve font-size üzerinden boyut ve renk alır, ayrı bir resim dosyasına gerek kalmaz.

Sık Sorulan Sorular

Bir ikon seti için kaç piksel grid kullanmalıyım?

Çoğu web ve mobil arayüz için 24×24 piksel iyi bir başlangıçtır. Çok yoğun arayüzlerde 20×20 veya 16×16'ya da geçebilirsin; önemli olan tüm seti tek bir gridde tutmak ve farklı boyutları aynı kaynaktan türetmektir.

Outline mı yoksa dolu (filled) ikonlar mı kullanmalıyım?

İkisi de geçerli; karar bağlama göre verilir. Outline ikonlar hafif ve nötr durur, dolu ikonlar dikkat çeker. Birçok set ikisini birden sunar: pasif durumda outline, aktif/seçili durumda filled. Yeter ki ikisinin de aynı grid ve görsel dile uysun.

Çizgi kalınlığını sonradan değiştirebilir miyim?

SVG'de çizgileri stroke olarak bıraktıysan kalınlığı stroke-width ile tek satırda değiştirebilirsin. Ama çizgileri outline'a (path'e) çevirdiysen geri dönüş zor olur; bu yüzden ana kaynağı her zaman stroke'lu sakla.

Kendi markanız için tutarlı bir ikon seti mi gerekiyor? Grid'den SVG dışa aktarmaya kadar uçtan uca bir set kurmanıza yardımcı olabilirim. Benimle iletişime geçin ve projenizden bahsedin.