İcon Arama Boyut, renk ve çizgi kalınlığı ayarlanabilen açık kaynaklı SVG ikonlarını arayın ve özelleştirin.

🎨

İcon Arama

Boyut, renk ve çizgi kalınlığı ayarlanabilen açık kaynaklı SVG ikonlarını arayın ve özelleştirin.

Simgeleri Ara

Birden fazla kategoriden simgeleri adlarına göre filtrelemek için bir anahtar kelime girin.

Görünümü Özelleştir

Tasarımınıza uydurmak için simge rengini, boyutunu ve çizgi genişliğini ayarlayın.

SVG'yi Kopyala

Özelleştirilmiş SVG kodunu kopyalamak için bir simgeye tıklayın.

Loading tool...

What Is İcon Arama?

İcon Arama aracı, açık kaynaklı SVG ikonlarını taraymanıza, özelleştirmenize ve kopyalamanıza olanak tanır. İkonlar, gezinme, eylemler, durum göstergeleri ve görsel iletişim için temel UI öğeleridir. Bu araç, Oklar, Eylemler, UI, Medya, İletişim ve Dosyalar olmak üzere altı kategoriye ait ikonları içerir. Her bir ikon, tercih ettiğiniz renk, boyut ve çizgi kalınlığıyla özelleştirilebilen stroke tabanlı bir SVG'dir. Hızlıca ihtiyacınız olan ikonu bulmak için anahtar kelimeyle arama yapın. İkonlardan herhangi birine tıklayarak, özel ayarlarınız uygulanmış SVG kodunu kopyalayabilirsiniz. Oluşturulan SVG temiz, erişilebilir ve HTML içinde doğrudan veya bağımsız SVG dosyaları olarak kullanıma hazırdır.

Why Use İcon Arama?

Düzenlenmiş simge kategorileri: Oklar, Eylemler, UI, Medya ve daha fazlası
Hızlı simge keşfi için anahtar kelime araması
Özelleştirilebilir renk, boyut ve çizgi genişliği
Temiz ve erişilebilir SVG kodunun bir tıklamayla kopyalanması

Common Use Cases

UI Geliştirme

Düğmeler, gezinme ve arayüz öğeleri için simgeler bulun ve özelleştirin.

Hızlı Prototipleme

Mockup'lar ve prototipler için web'de aramadan hızlıca simgeler edinin.

Tasarım Tutarlılığı

Birleşik bir arayüz tasarımı için uyumlu çizgi tabanlı simgeleri kullanın.

Belgeleme

Belgelere, kılavuzlara ve README dosyalarına görsel simgeler ekleyin.

Technical Guide

SVG ikonları, ölçekleme bağımsızlığını sağlamak için <svg> öğesiyle birlikte viewBox kullanır. Stroke tabanlı ikonlar, renk için stroke özniteliğini, çizgi kalınlığı için stroke-width özniteliğini ve çizgi sonlarını için stroke-linecap/stroke-linejoin özniteliklerini kullanır. fill="none" özniteliği yalnızca çizgilerin görünür olmasını sağlar. SVG ikonları doğrudan CSS stillendirme için HTML içinde, basit kullanım için <img> src olarak veya veri URI'si aracılığıyla CSS arka plan resmi olarak kullanılabilir. Erişilebilirlik için süsleme ikonlarına role="img" ve aria-label özniteliklerini ekleyin veya yalnızca görünen metin etiketleriyle süsleme ikonları için aria-hidden="true" kullanın. SVG ikonları, kalite kaybı olmadan herhangi bir boyuta mükemmel şekilde ölçeklenebilir. İkon sistemleri için, SVG sprite sayfaları veya SVG tanımlarına atıfta bulunan bir ikon bileşeni kullanmayı düşünün. currentColor anahtarı, ikonların üst öğe metin rengini miras almasına olanak tanır.

Tips & Best Practices

1
Tutarlı bir stil için projeniz boyunca çizgi tabanlı simgeleri kullanın
2
Çizgi rengini currentColor olarak ayarlayın ve metin rengini otomatik olarak devralayın
3
Simge boyutlarını tutarlı tutun - 24px ortak bir standart boyuttur
4
Görünür metni olmayan simge düğmeleri için erişilebilirlik sağlamak üzere aria-label ekleyin

Related Tools

CSS Düğme Oluşturucu

Renkler, iç boşluklar, sınırlar, gölgeler ve hover efektleri ile özel CSS düğmeleri tasarlayın.

🎨 CSS & Design

SVG'yi CSS Arka Planına Dönüştür

Veri URI kodlaması kullanarak SVG kodunu bir CSS arka-plan-görüntüsü olarak kodlayın.

🎨 CSS & Design

CSS Değişken Oluşturucu

Renkler, boşluklar ve tipografi için özel CSS özelliklerini (değişkenleri) oluşturun.

🎨 CSS & Design

SVG Desen Jeneratörü

CSS arka planları için çeşitli şekillerle SVG tabanlı tekrar eden desenler oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q Bu simgeler ücretsiz olarak kullanılabilir mi?

Evet, bu araçtaki tüm simgeler açık kaynaklı ve kişisel ve ticari kullanım için ücretsizdir.

Q Simge rengini değiştirebilir miyim?

Evet, renk seçiciyi ayarlayarak tüm simgelerin çizgi rengini değiştirin.

Q Projeimde SVG simgelerini nasıl kullanabilirim?

SVG kodunu doğrudan HTML'nize yapıştırın, <img> src olarak kullanın veya bir React bileşenine dönüştürün.

Q Bu simgeleri React'e ekleyebilir miyim?

Evet, SVG kodunu bir React bileşenine yapıştırın veya bir SVG'den-React'e dönüşüm aracı kullanın.

Q Simgeleri erişilebilir kılmak nasıl yapılır?

Bağımsız simge düğmeleri için aria-label ekleyin veya görünür metinle birlikte kullanıldığında aria-hidden="true" kullanın.

About This Tool

İcon Arama is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.