Iconify: Açık kaynak ikon kütüphanesi

• Çeşitli açık kaynak ikon setlerini tek bir yerde keşfetmeyi ve kullanmayı sağlayan birleşik ikon platformu
• Birden fazla kategoriye ayrılmış 204 set ve yaklaşık 280 bin ikon sunuyor
• API üzerinden ikon bilgilerini alma ve SVG/CSS üretimini destekliyor. Ayrıca bir arama API’si de sunarak Figma/Sketch eklentilerinde kullanım sağlıyor
• Her set Apache 2.0, MIT, CC BY, GPL gibi çeşitli açık lisanslarla dağıtılıyor
• Google Material, Fluent UI, Font Awesome, Tabler, HeroIcons gibi başlıca tasarım sistemlerinin ikonlarını içeriyor

---

Iconify genel bakış

• Iconify, açık kaynak ikon setleri için merkezi bir depo olup web tabanlı arayüz üzerinden çeşitli ikonların keşfedilmesini sağlar
• Her ikon seti; ad, lisans türü, ikon sayısı ve ayrı bağlantılardan oluşur
• Kullanıcılar kategoriye göre filtreleme yaparak Material, UI, Emoji, Logos, Programming vb. setleri seçebilir

Başlıca ikon kategorileri

• Material ailesi: Material Symbols, Material Design Icons vb. 6 set; en fazla 15.000’in üzerinde ikon içerir
• UI 24px setleri: Solar, Tabler, Remix, Lucide, Iconoir vb. 50’den fazla setten oluşur; çeşitli stil ve boyutlar sunar
• UI 16px / 32px setleri: Carbon, IonIcons, Ant Design Icons, Bootstrap Icons vb. 18 set içerir
• UI Other / Mixed Grid: Fluent UI System Icons (18.959), Phosphor (9.072) gibi çok sayıda büyük set içerir
• UI Multicolor setleri: Streamline, Fluent Color, IconPark gibi çok renkli ikonlar sunar
• Programming setleri: VSCode Icons, Devicon, File Icons gibi geliştirme ortamına özel 9 set
• Logos setleri: Simple Icons, SVG Logos, Web3 Icons gibi marka ve logo odaklı 15 set
• Emoji setleri: OpenMoji, Twemoji, Noto Emoji dahil 11 setten oluşur
• Flags / Maps setleri: Circle Flags, Flag Icons vb. 7 set içerir
• Thematic setleri: Game Icons, Health Icons, Weather Icons gibi konu bazlı 8 set
• Archive / Unmaintained setleri: Font Awesome 4~6, Eva Icons gibi eski sürümlere ait 30 seti arşivler

Lisans çeşitliliği

• Her set Apache 2.0, MIT, CC BY, GPL, OFL(Open Font License) gibi çeşitli açık lisanslarla dağıtılır
• Bazı setler CC0(public domain) veya Unlicense biçiminde serbestçe kullanılabilir
• Lisans bilgileri açıkça belirtildiğinden, ticari kullanım ve değişiklik izni kolayca kontrol edilebilir

Öne çıkan ikon seti örnekleri

• Fluent UI System Icons: MIT lisansı, 18.959 ikon
• Material Symbols Light: Apache 2.0, 15.180 ikon
• Tabler Icons: MIT, 5.986 ikon
• Simple Icons: CC0, 3.379 marka logosu
• OpenMoji: CC BY-SA 4.0, 4.449 emoji

Kullanım değeri

• Çeşitli tasarım sistemleri ve framework’lerde tutarlı ikon erişilebilirliği sağlar
• Geliştiriciler ve tasarımcılar proje gereksinimlerine uygun stil ve lisansı anında seçebilir
• Açık kaynak ekosistemi genelinde ikonların yeniden kullanımını ve standardizasyonu teşvik eden bir kaynak platformudur
• Resmî doküman sayfasında kullanım şekilleri ile API/eklenti bilgilerine bakılabilir

[GN⁺]

Hacker News yorumları

• Iconify, ikon SVG'lerini API üzerinden doğrudan almayı mümkün kılıyor
  Ben sık sık D2 ile mimari diyagramlar oluşturuyorum; Iconify'ın devasa ikon kütüphanesiyle birlikte kullanınca görsel olarak çok daha zengin oluyor
  Örneğin Docker ile Kubernetes'i bağlayan bir diyagramda her biri için ilgili SVG ikonunu belirleyebiliyorsunuz

• Bazı SVG'lerde animasyon var ve arama da yapılabiliyor
  Ben bu ikonları çevrimdışı metin editörü wrifocus.bounded.cc içinde kullandım ve ortaya çıkan sonuçtan çok memnun kaldım

  • Hangi ikon setini kullandığınızı merak ettim. “contains animations” filtresiyle yalnızca loader ve hava durumu ikon setleri görünüyor
  • Ayarlar ikonundaki dönen dişli animasyonu özellikle çok hoş. Editörün kendisi de etkileyici
    Acaba bunu çevrimiçi olarak da, verileri sunucuda saklayacak şekilde kullanmak mümkün mü; ayrıca neden çevrimdışı tarayıcı tabanlı yaptığınızı da merak ediyorum
  • Paylaştığınız için teşekkürler. Projenin self-hosted olarak çalıştırılıp çalıştırılamayacağını da öğrenmek isterim

• icones.js.org bu tür ikonları aramak için iyi bir site

• İkon optimizasyonu hakkında bir yazı yazma fikri aklıma geliyor
  Web sitelerinin ikonları inline etmemesi yüzünden düzenin kaydığını görünce sinir oluyorum

  • Katılıyorum. Inline ikonlar iyi bir yöntem ama DOM boyutunu büyütebilir
    İkonun karmaşıklığına veya tekrar kullanım miktarına bağlı olarak lazy loading bazen daha iyi olabilir
    Temelde sorun, alanın düzgün rezerve edilmemesinden kaynaklanıyor
  • width/height özniteliklerini belirtmek de iyi bir çözüm. aspect-ratio da sık sık öneriliyor
    Ancak inline ikonlarda cache'leme mümkün olmuyor
    İlgili kaynak: web.dev'in CLS optimizasyonu yazısı

• Önceki tartışma bağlantısı: Eylül 2024 tartışması

• Bu projeye büyük övgüler gönderiyorum. Yaptığım neredeyse her şeyde her gün kullanıyorum
  k3s projesi için hem renkli sürümün hem de gri tonlamalı sürümün devicon içinde bulunmasına şaşırdım

• Pictogrammers'ın küçük bir avantajı var
  Material ikonları için Home Assistant kodunu doğrudan verdiği için tek tıkla ihtiyacınız olan kodu alabiliyorsunuz

• Bir diğer harika ikon kaynağı olarak The Noun Project öneriliyor
  Ücretsiz, CC-BY-3.0 ve ücretli lisanslı ikonların bir karışımı var

  • Ancak ücret ödemediğinizde SVG içindeki gereksiz kodu elle temizlemek zorunda kalmanız can sıkıcı

• En iyi ikon kütüphanesinin hangisi olduğuna dair çeşitli yanıtlar

  • Bana göre 2005 civarında famfamfam Silk ikon seti zirvedeydi
    Yüksek çözünürlüklü ya da SVG sürümünün olmaması üzücüydü ama bugünlerde bunu AI ile telafi etmek mümkün olabilir
    Bakın / İndir
  • Lucide öneriliyor
  • Phosphor Icons'u seviyorum. Onun dışında temelde Material UI Icons kullanıyorum
  • Ben daha çok oyun geliştirme için FlatIcon'ı sık kullanıyorum
  • SVGRepo stroke kalınlığı veya renk gibi şeyleri doğrudan ayarlamaya izin verdiği için kullanıcı dostu

• Benim sitem universymbols.com, Iconify'ın çeşitli ikon setlerini AI görüntü modelleri ile genişletebiliyor
  Böylece mevcut büyük setlerin ötesinde daha özgün ikon setleri oluşturmak mümkün oluyor