Editör seçimi · resmî kaynak
Tabler Icons: 6.000+ Ücretsiz SVG İkon
Tutarlı çizgi diline sahip binlerce ikonu SVG olarak kopyala, renk ve stroke değerlerini projene göre düzenle.
- 6.000+ yüksek kaliteli SVG ikon
- Web, mobil uygulama, Figma, Illustrator ve sunum
- Açık kaynak depo ve MIT lisansı
Arayüz tasarımında ikon seçerken yalnızca aradığın sembolün bulunması yetmez. Çizgi kalınlığı, köşe yapısı, optik boyut ve dolu/çizgi stili aynı sistem içinde tutarlı olmalıdır.
Bu nedenle farklı sitelerden tek tek ikon toplamak yerine bir ana ikon ailesi seçmek daha profesyonel sonuç verir.
Tabler Icons
Tabler Icons 6.000'den fazla ücretsiz SVG ikon sunan açık kaynak bir kütüphane. İkonların temel çizgi dili tutarlı olduğu için büyük web siteleri, yönetim panelleri ve mobil arayüzlerde güçlü bir başlangıçtır.
Avantajları:
- Çok geniş konu kapsamı
- SVG kopyalama ve indirme
- Tutarlı stroke ve köşe yapısı
- Farklı yazılım ve framework paketleri
- MIT lisanslı açık kaynak depo
Lucide Icons
Lucide, Feather Icons yaklaşımını devam ettiren ve 1.600'den fazla SVG içeren açık kaynak bir proje. Daha küçük ama sade bir görsel dil isteyen arayüzler için iyi çalışır.
Lucide özellikle 24 piksel arayüz ikonlarında temiz görünür. SVG içindeki stroke, stroke-width, stroke-linecap ve stroke-linejoin değerleri kolayca düzenlenebilir.
Heroicons
Heroicons, Tailwind ekibinin hazırladığı arayüz odaklı bir set. Outline ve solid seçeneklerinin yanında farklı optik boyutlar sunması, küçük butonlarla büyük özellik kartlarında aynı aileyi kullanmayı kolaylaştırır.
SaaS arayüzleri, mobil menüler, ayar ekranları ve sade kurumsal sitelerde hızlı sonuç verir.
Phosphor Icons
Phosphor aynı ikonları thin, light, regular, bold, fill ve duotone gibi farklı ağırlıklarda sunar. Grafik tasarım ve sunumlarda tek bir çizgi kalınlığına bağlı kalmadan tutarlı çeşitlilik sağlar.
Duotone seçeneği özellikle özellik anlatan kartlar ve sunum başlıklarında kullanışlıdır. Ancak aynı ekranda regular, bold ve duotone stilleri rastgele karıştırılmamalıdır.
Bootstrap Icons
Bootstrap Icons web arayüzlerinde sık kullanılan eylem ve durum sembollerini kapsar. Bootstrap kullanmasan bile ikonları ayrı SVG olarak indirebilirsin.
Bu set özellikle form, tablo, dosya, kullanıcı ve navigasyon ikonlarında pratik bir alternatiftir.
SVG ikon Illustrator'a nasıl alınır?
- İkonu SVG olarak indir.
- Illustrator'da File > Open veya Place ile aç.
- Gerekirse
Object > Expandkullanmadan önce bir kopya sakla. - Stroke kalınlığını tasarımın ölçeğine göre ayarla.
- Teslim öncesi ikonların aynı optik boyutta göründüğünü kontrol et.
İki ikon teknik olarak 24 × 24 piksel olsa bile biri daha dolu veya geniş olabilir. Yalnızca matematiksel hizaya değil, gözle algılanan merkeze göre küçük düzeltmeler yapmak gerekebilir.
SVG ikon rengini değiştirme
Web kodunda çizgi ikonları çoğunlukla currentColor değerini kullanır. Böylece ikon, bulunduğu bağlantı veya butonun metin rengini takip eder.
Illustrator ve Figma'da ise stroke veya fill rengini doğrudan değiştirebilirsin. Aynı arayüzde ikonların bir kısmı fill, bir kısmı stroke ise görsel ağırlık dengesizleşebilir.
Ticari kullanım ve lisans
Tabler, Lucide, Heroicons, Phosphor ve Bootstrap Icons açık kaynak lisanslarla yayımlanır. Bu lisanslar genellikle ticari projelerde kullanıma izin verir; ancak lisans metnini koruma ve ikon kütüphanesini yeniden dağıtma koşulları farklı olabilir.
Müşteriye logo olarak teslim edeceğin sembol için ayrıca dikkat et. Açık kaynak bir arayüz ikonunu değişiklik yapmadan markanın benzersiz logosu gibi kullanmak hem özgünlük hem marka tescili açısından zayıf bir seçimdir. İkonlar navigasyon ve arayüz için; logo ise özgün kimlik için tasarlanmalıdır.
Hangi ikon setini seçmelisin?
- En geniş arşiv: Tabler Icons
- Sade ve hafif arayüz: Lucide
- Tailwind ve ürün arayüzü: Heroicons
- Farklı ağırlık ve duotone: Phosphor
- Form ve yönetim ekranları: Bootstrap Icons
Font, texture ve brush bağlantılarını da içeren ana liste için ücretsiz grafik tasarım kaynakları rehberine geçebilirsin.