300 ikon · 20 kategori
Animasyonlu ikon kategorileri
Her useAnimations ikonu, navigasyon oklarından medya kontrollerine, loader’lardan sosyal medya logolarına kadar tek bir kategoriye aittir. Bir kategoriyi açtığınızda tüm ikonlarını, nerede kullanılacaklarını ve birini eklemek için gereken kodu görürsünüz; isterseniz etkileşime göre de göz atabilirsiniz.
- Uyarılar5 ikonYanıp sönmeden, tam fark edilecek kadar hafifçe atan uyarı üçgenleri, uyarı daireleri ve dur işaretleri. Hatalı bir form alanının yanına, bir hata banner’ının başına ya da durum sütununa koyun; sabit bir ikonu kaydırırken gözden kaçırmak kolaydır.
- Bildirimler4 ikonYeni bir hareket olduğunda çalan ya da zil ile sessiz zil arasında geçiş yapan zil ikonları. Zilin kısa bir sallanışı gözü okunmamış sayısına çeker; geçiş yapan sürümler aynı zamanda bir kanalın ya da konunun sessize alma düğmesi olarak işe yarar.
- Navigasyon34 ikonKapatma düğmesine dönüşen hamburger menüler; hover’da kendi yönüne doğru hafifçe kayan oklar, chevron’lar ve köşe okları. Bir kontrolün nereye götürdüğünü açıkça gösterirler: çekmeceyi aç, geri dön, satırı genişlet, siteden çık.
- Eylemler64 ikonArayüzün fiilleri: kaydet, sil, indir, yenile, beğen, yer imine ekle, ara ve ayarlar. Her biri ait olduğu tıklamayı ya da hover’ı onaylar; bir gönderiyi beğendiğinizde kalp dolar, silmeden önce çöp kutusunun kapağı kalkar.
- İçerik22 ikonDosyalar, klasörler, kitaplar, posta, ekler ve kişiler. Kullanıcının üzerinde çalıştığı şeyleri etiketlerler; ekleme, çıkarma ve onay varyantları da liste ve ekip yönetimini daha canlı hissettirir.
- Form3 ikonİşaretli ve işaretsiz durumları arasında animasyonla geçen bir onay kutusu, bir radyo düğmesi ve bir toggle switch. Sıradan bir input’un yavan kaldığı yerlerde, örneğin onboarding kontrol listelerinde ve ayar ekranlarında kullanın; durum yine tek bakışta okunur.
- Medya28 ikonSes ve video oynatıcılar için oynat ve duraklat, ses düzeyi, mikrofon, kamera, atla ve karıştır. Geçiş yapan ikonlar iki durumu arasında değişir (oynattan duraklata ya da mikrofondan sessize), böylece düğme her zaman bir tıklamanın ne yapacağını gösterir.
- Metin düzenleme10 ikonZengin metin araç çubukları için kalın, italik, altı çizili, hizalama ve liste ikonları. Kısa bir tıklama animasyonu biçimlendirmenin uygulandığını onaylar; metnin kendisindeki değişikliğin zor fark edildiği editörlerde bu işe yarar.
- İletişim13 ikonTelefonlar, sohbet balonları, gönder düğmeleri, sesli mesaj ve RSS. Arama ikonları bir arama geçmişinin ihtiyaç duyduğu gelen, giden, cevapsız ve yönlendirilmiş durumları karşılar; gönder ikonu da tıklandığında mesajı küçük bir hareketle uğurlar.
- Cihazlar12 ikonTelefonlar, tabletler, monitörler, saatler ve yazıcılar; bunların yanında wifi, Bluetooth ve pil gibi bağlantı göstergeleri. Cihaz seçicilerde, responsive önizleme geçişlerinde ve bağlantı durumunda işe yarar.
- Hava durumu16 ikonHava tahminleri ve günün saatine bağlı her şey için güneş, ay, bulutlar, yağmur, kar, şimşek ve rüzgâr. Güneş ve ay aynı zamanda doğal bir açık/karanlık mod anahtarı oluşturur.
- Harita ve konum9 ikonHarita pinleri, navigasyon okları, küreler, hedefler ve çapalar. Hover’da düşen bir pin, mağaza bulucuyu ya da teslimat adresini öne çıkarır; küre ise dil veya bölge seçici olarak kullanılabilir.
- E-ticaret11 ikonOnline mağazalar için alışveriş sepetleri, çantalar, fiyat etiketleri, hediyeler, kredi kartları ve kargo kamyonları. Sepete ekle animasyonu tıklamayı bir toast’a gerek kalmadan onaylar; kamyon ve paket ikonları da sipariş durumuna biraz hayat katar.
- Grafikler5 ikonAnalitik ve raporlama için sütun grafikler, bir pasta grafik ve trend okları. Yükselen ve düşen trend ikonları bir metriğin arttığını mı azaldığını mı tek bakışta gösterir; KPI kartlarına ve sayı değişikliklerinin listelendiği sayfalara uyar.
- Geliştirme9 ikonKod parantezleri, bir terminal, Git branch’leri, commit’ler, merge’ler ve pull request’ler; ayrıca sunucular ve veritabanları. Git ve altyapı terimlerinin arayüzün parçası olduğu geliştirici araçları, dokümantasyon siteleri ve durum sayfaları için tasarlandı.
- Tasarım ve yerleşim10 ikonEditörler ve sayfa oluşturucular için grid, sütun, katman, kırpma, kalem aracı ve imleç ikonları. Kullanıcıların içerik düzenlediği, grid ile tablo görünümü arasında geçtiği ya da bir çizim aracı seçtiği araç çubuklarına uyar.
- Şekiller ve matematik8 ikonDaireler, kareler, üçgenler, altıgenler, bir sekizgen ve bölme işaretleri. Çizim uygulamalarında şekil aracı, hesap makinesinde operatör ya da diyagramlarda ve onboarding adımlarında nötr işaret olarak kullanın.
- Yükleme5 ikonBir işlem sürdüğü müddetçe döngüde oynayan spinner’lar ve loader’lar. Bir istek çalışırken gönder düğmesinin içine, hâlâ yüklenen içeriğin yerine ya da tam ekran bir açılış ekranına koyun; kullanıcı azaltılmış hareketi tercih ettiğinde sabit kalırlar.
- Sosyal medya22 ikonSosyal ağların ve geliştiricilerle tasarımcıların işlerini paylaştığı araçların marka ikonları: X, Instagram, YouTube, Discord, Telegram, Figma ve daha fazlası. Hover’da canlanırlar; bu da footer ve profil bağlantılarının tıklanabilir olduğunu hissettirir.
- Diğer10 ikonDaha büyük bir gruba girmeyen ikonlar: geri bildirim için emoji yüzler, bir kahve fincanı, bir saat, bir nabız çizgisi ve bir aşağı kaydır ipucu. Aşağı kaydır ikonu, hero bölümlerinde aşağıda daha fazlası olduğunu gösteren yaygın bir ipucudur.