بحث عن الأيقونات ابحث عن وتخصيص أيقونات SVG مفتوحة المصدر مع حجم و لون و خط قابل للتعديل.
بحث عن الأيقونات
ابحث عن وتخصيص أيقونات SVG مفتوحة المصدر مع حجم و لون و خط قابل للتعديل.
ابحث عن الأيقونات
اكتب كلمة مفتاحية لتصفية الأيقونات حسب الاسم من عدة فئات.
تخصيص المظهر
_adjust ضبط لون الأيقونة، والحجم، وعرض الخط لتطابق تصميمك.
نسخ SVG
انقر على أيقونة لنسخ رمز SVG المخصص.
What Is بحث عن الأيقونات?
أداة بحث الأيقونات تسمح لك بتصفح وتخصيص ونسخ أيقونات SVG مفتوحة المصدر.الأيقونات هي عناصر واجهة المستخدم الأساسية للتنقل والإجراءات ومؤشرات الحالة والتواصل البصري. تتضمن هذه الأداة أيقونات عبر ست فئات: السهام، الإجراءات، الواجهة، الوسائط، التواصل، والملفات. كل أيقونة هي SVG مبنية على الخطوط يمكن تخصيصها بلونك المفضل وحجمها وسمك خطها. ابحث bằng كلمة مفتاحية للعثور بسرعة على الأيقونة التي تحتاجها. انقر على أي أيقونة لنسخ رمز SVG الخاص بها مع تطبيق الإعدادات المخصصة. يعتبر SVG الناتج نظيفًا ومتوافقًا وجاهزًا للاستخدام مباشرة في HTML أو كملفات SVG مستقلة.
Why Use بحث عن الأيقونات?
-
فئات الأيقونات المنظمة: السهام، والactions، وواجهة المستخدم، ووسائل الإعلام، وغيرها
-
البحث بالكلمة الرئيسية للعثور على الأيقونة بسرعة
-
لون قابل للتخصيص، وحجم، وعرض الخط
-
نسخ رمز SVG النقي والمتاح بكل سهولة بنقرة واحدة
Common Use Cases
تطوير واجهة المستخدم
ابحث عن الأيقونات وتخصيصها لأزرار،และการتنقل، وعناصر الواجهة.
النمذجة السريعة
احصل بسرعة على الأيقونات لتصميم النماذج الأولية والبروتوتايب دون البحث على الويب.
اتساق التصميم
استخدم أيقونات خط متطابقة للحصول على تصميم واجهة مستخدم متناسق.
التوثيق
أضف أيقونات بصرية إلى التوثيق، والدلائل، وملفات README.
Technical Guide
تستخدم أيقونات SVG عنصر <svg> مع viewBox للتحجيم المستقل عن حجم العرض. تستخدم الأيقونات المبنية على الخطوط سمة stroke للون وسمك stroke-width للخطوط وسِمات stroke-linecap/stroke-linejoin لنهاية الخطوط. تأكد سمة fill="none" من أن تكون فقط الخطوط مرئية. يمكن استخدام أيقونات SVG مباشرة في HTML لتصفيف CSS المباشر، أو كـ <img> src للاستخدام البسيط، أو كصورة خلفية CSS عبر URI البيانات. لأغراض سهولة الوصول، أضف سمة role="img" وسمات aria-label إلى الأيقونات الزخرفية، أو aria-hidden="true" للأيقونات الزخرفية الخالصة مع علامات نص مرئية. تتمتع أيقونات SVG بميزة التمثيل المثالي لأي حجم دون فقدان الجودة. لمنظومات الأيقونات، فكر في استخدام صفحات sprite SVG أو مكون أيقونة ي tham khảo تعريفات SVG. يسمح كلمة currentColor للأيقونات بالوراثة من لون النص الرئيسي للعنصر الأب.
Tips & Best Practices
-
1استخدم الأيقونات القائمة على الخطوط لتحقيق أسلوب متسق عبر مشروعك
-
2اضبط لون الخط الحالي لتتمكن من наследة لون النص تلقائيًا
-
3احتفظ بأحجام الأيقونات ثابتة - 24 بكسل هو حجم معياري شائع
-
4أضف aria-label للأزرار ذات الأيقونات القابلة للوصول دون نص مرئي
Related Tools
مُحول أزرار CSS
صمم أزرار CSS مخصصة مع ألوان، حواف، حدود، ظلال، وأffects عند التمرير.
🎨 CSS & Design
SVG إلى خلفية CSS
تشفير رمز SVG كخلفية صورة CSS باستخدام ترميز URI البيانات.
🎨 CSS & Design
مُولِّد متغيرات CSS
إنشاء خصائص مخصصة لCSS (متغيرات) للألوان والتباعد والتخطيط.
🎨 CSS & Design
مُولِد نَمَطات SVG
انشئ نمطات متكررة مبنية على SVG لخلفيات CSS مع أشكال متنوعة.
🎨 CSS & DesignFrequently Asked Questions
Q هل هذه الأيقونات مجانية للاستخدام؟
Q يمكنني تغيير لون الأيقونة؟
Q كيف استخدم أيقونات SVG في مشروعي؟
Q يمكنني إضافة هذه الأيقونات إلى React؟
Q كيف أجعل الأيقونات قابلة للوصول؟
About This Tool
بحث عن الأيقونات 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.