مكتبة أيقونات SVG و PNG
جاهزة لمواقعك وتصميماتك
ابحث عن الأيقونة المناسبة، غيّر لونها مباشرة، ثم حمّلها بصيغة SVG أو PNG أو انسخ الكود لاستخدامها في موقعك أو تصميمك.
غيّر اللون والسماكة والحجم قبل النسخ أو التحميل.
مكتبة أيقونات عملية للمواقع والتصميم
هذه الصفحة تساعدك على الوصول بسرعة إلى أيقونات خطية مناسبة للمواقع، لوحات التحكم، صفحات الهبوط، العروض التقديمية، والتصاميم اليومية. الهدف هو توفير أيقونات واضحة وخفيفة يمكن تغيير لونها وتحميلها مباشرة.
اكتب اسم الأيقونة بالإنجليزية مثل search أو file أو user للوصول إلى الرمز المطلوب.
اختر اللون المناسب لهوية موقعك، وسيتم تطبيقه على الأيقونات قبل النسخ أو التحميل.
اضغط على الأيقونة ثم حمّلها بصيغة SVG أو PNG من النافذة المنبثقة.
متى تستخدم SVG ومتى تستخدم PNG؟
في المواقع والواجهات غالبًا تكون صيغة SVG أفضل لأنها خفيفة وقابلة للتكبير بدون فقدان الجودة. أما PNG فهي مناسبة عندما تحتاج صورة جاهزة لاستخدام سريع في تصميم ثابت أو عرض تقديمي.
| الصيغة | الأفضل استخدامها في | الميزة الأساسية | ملاحظة مهمة |
|---|---|---|---|
| SVG | المواقع، التطبيقات، أزرار الواجهة، الأقسام التعريفية | واضحة في كل المقاسات وخفيفة في التحميل | مناسبة أكثر للمطورين وتصميم الواجهات |
| PNG | العروض، الصور الثابتة، التصاميم السريعة | سهلة الاستخدام في أغلب برامج التصميم | الأفضل اختيار مقاس كبير عند الحاجة لجودة أعلى |
| نسخ الكود | إضافة الأيقونة مباشرة داخل صفحة HTML | لا تحتاج إلى رفع ملف منفصل | مفيد إذا كنت تعدل صفحة أو قالبًا بشكل مباشر |
أمثلة على استخدام الأيقونات
| نوع الصفحة | أيقونات مناسبة | طريقة الاستخدام المقترحة |
|---|---|---|
| صفحة خدمات | check, settings, file, shield | استخدم أيقونة واحدة بجانب كل خدمة لتوضيح الفكرة بسرعة. |
| لوحة تحكم | user, chart, bell, calendar | اختر أيقونات خطية بسيطة حتى تبقى الواجهة خفيفة وسهلة القراءة. |
| صفحة هبوط | arrow, search, download, star | استخدم الأيقونات لتوجيه المستخدم نحو الإجراء المطلوب دون ازدحام بصري. |
| موقع أدوات | image, pdf, link, code | اربط كل أداة بأيقونة واضحة تساعد الزائر على فهم وظيفتها مباشرة. |
نصائح لاختيار أيقونات مناسبة
حاول استخدام نمط واحد داخل الصفحة نفسها، ولا تخلط بين الأيقونات الخطية والأيقونات الممتلئة إلا عند وجود سبب واضح. كذلك يفضل أن يكون لون الأيقونة متناسقًا مع ألوان الموقع، وأن يكون حجمها قريبًا من حجم النص أو العنوان المجاور لها.
هل يمكن استخدام الأيقونات في المواقع التجارية؟
الأداة مخصصة لتسهيل الوصول إلى أيقونات قابلة للاستخدام في المشاريع والمواقع. من الأفضل دائمًا مراجعة سياسة الاستخدام الخاصة بالمشروع إذا كنت تعمل على منتج تجاري كبير أو علامة تجارية حساسة.
لماذا تظهر الأيقونات بأسلوب خطي بسيط؟
الأيقونات الخطية عادة تكون أوضح داخل الواجهات، وأخف بصريًا من الأيقونات الممتلئة، لذلك اخترناها كعرض أساسي حتى تكون مناسبة للمواقع الحديثة.
هل تغيير اللون يؤثر على ملف SVG؟
نعم، عند تحميل SVG من النافذة يتم تضمين اللون الحالي الذي اخترته، مما يجعل الملف جاهزًا للاستخدام مباشرة.