Projeniz için doğru ikon setini seçmek

Tutarlı bir ikon seti arayüzü tasarlanmış gösterir; üç setin karışımı ise aceleyle bir araya getirilmiş gibi gösterir. Yüzlerce ücretsiz set varken zorluk ikon bulmak değil; ihtiyaçlarınızı karşılayan, tarzınıza uyan ve lisansını kabul edebileceğiniz o tek seti bulmaktır. İşte hızlı karar vermenin bir yolu.

1. Önce kapsamı kontrol edin

Ürününüzün en çok ihtiyaç duyduğu 15–20 ikonu (ana sayfa, arama, ayarlar, kullanıcı, yükleme, çöp kutusu, düzenle, kapat, köşeli oklar, uyarılar…) ve alanınıza özgü birkaç ikonu (fatura, stetoskop veya git dalı gibi) listeleyin. Ardından her birini aday sette arayın. Temel ikonlarınızdan ikisi eksik olan bir set, ileride başka bir seti karıştırmanızı gerektirir; uyumsuz ikonlar da arayüzlerdeki en yaygın görsel tutarsızlıktır.

Boyut önemlidir ama her şey değildir: Material Design Icons 7.447, Fluent UI System Icons 19.850 ikon içerirken Heroicons özenle seçilmiş 1.288 ikon sunar. Bir pazarlama sitesi için küçük bir set yeterli olabilir; karmaşık bir panelde ise derinliğin değerini anlarsınız.

2. Bir stil seçin: çerçeveli, dolu veya duotone

• Çerçeveli (çizgi) ikonlar hafif ve modern görünür, çoğu arayüze uyar. Örnekler: Lucide, Tabler Icons.
• Dolu ikonlar küçük boyutlarda ve aktif durumlarda daha okunaklıdır. Örnekler: Material Design Icons, Bootstrap Icons (çerçeveli sürümleri de vardır).
• Birden çok ağırlığa sahip setler, aileyi değiştirmeden normal durumda çerçeveli, seçili durumda dolu ikon kullanmanızı sağlar. Phosphor inceden duotone'a altı ağırlık sunar. Material Symbols çerçeveli, yuvarlak ve keskin stiller sunar. Heroicons ve Fluent çerçeveli ile dolu stili eşleştirir.
• Çok renkli ikonlar çizimlere, karşılama ekranlarına ve boş durumlara karakter katar, ancak temaya uyarlanmaları daha zordur. Çok renkli arayüz ikonlarına göz atın.

İkon stilini tipografinizle eşleştirin: ince çizgiler hafif ve geometrik yazı tipleriyle, daha kalın ikonlar ise kalın arayüz metinleriyle uyum sağlar.

3. Izgarayı ve çizgi kalınlığını eşleştirin

İkonlar bir ızgara üzerinde çizilir; bu genellikle 24×24 pikseldir. İkonlar ızgara boyutlarında veya katlarında en net görünür, bu yüzden gerçekten kullandığınız boyut için tasarlanmış bir set seçin:

• 24px arayüz setleri en yaygın senaryo olan düğmelere, menülere ve gezinmeye uyar.
• 16 ve 32 px setler sırasıyla yoğun araçlara ve büyük dokunma alanlarına uygundur.

Her set sayfası ızgara boyutunu gösterir. İkonları metinle birlikte kullanıyorsanız çizgi kalınlığını da kontrol edin: 1,5 px çizgi normal metinle dengeli görünür, 2 px çizgi ise orta kalın veya kalın metne uyar.

4. Lisansı kontrol edin

Çoğu set ticari kullanıma izin verir, ancak koşullar farklıdır. MIT, ISC ve Apache 2.0 yalnızca lisans metnini eklemenizi isterken CC BY görünür bir atıf gerektirir. Birkaç set ticari kullanımı tamamen yasaklar. Her kategori sayfasında bir lisans tablosu bulunur; ikon lisansları rehberi de her lisansı açıklar.

5. Bakımı süren setleri tercih edin

Aktif olarak geliştirilen bir set, yeni ihtiyaçlar ortaya çıktıkça (yeni markalar, yeni arayüz kalıpları) yeni ikonlar ve mevcut ikonlar için düzeltmeler alır. Arşiv (bakımı yapılmayan) kategorisindeki setler hâlâ çalışır, ancak yeni bir ikona ihtiyacınız olduğunda yalnız kalırsınız. Ekosisteme de bakın: popüler setlerin React, Vue ve diğer framework'ler için resmi paketleri ve Figma için tasarım dosyaları vardır.

Kullanım senaryosuna göre öneriler

Hâlâ kararsız mısınız? İki adayı yan yana açın, ikisinde de en önemli on ikonunuzu arayın ve bunları ürününüzün gerçek bir ekranına yerleştirin. Doğru seçim genellikle birkaç dakika içinde belli olur. Karar verdiğinizde SVG ikon kullanım rehberi, ikonları HTML, React veya Vue'ya nasıl ekleyeceğinizi gösterir.