المصدر المفتوح
الأيقونات مقدمة من مجموعة Lucide المفتوحة المصدر بترخيص MIT.
يعرض 120 من أصل 1904 أيقونةخيارات النسخ
نسخ الاسم مخصص لاستيراد lucide-react. نسخ SVG يعطيك الكود الخام. ونسخ React ينشئ مكونًا مستقلًا.
مجموعة أيقونات SVG مفتوحة المصدر
تعرض هذه الصفحة مكتبة Lucide الكاملة مع بحث سريع ومعاينات ومخرجات سهلة النسخ لتدفقات العمل بين التصميم والتطوير.
- استخدم أسماء الأيقونات مباشرة مع lucide-react
- انسخ كود SVG الخام لاستخدامه في Figma أو HTML
- أنشئ مكونات React مستقلة من دون اعتماد إضافي
- افتح الأيقونات فورًا في محرر SVG للتنظيف أو التعديل
أمثلة لاستخدام أيقونات SVG
طرق شائعة لاستخدام مكتبة الأيقونات هذه في React وHTML وتدفقات العمل التصميمية.
الاستخدام مع lucide-react
استورد الأيقونة بالاسم ثم اعرضها كمكون React.
import { Activity } from "lucide-react";
export function IconExample() {
return <Activity className="h-6 w-6" />;
}
إدراج SVG داخل HTML
ألصق كود SVG الخام مباشرة داخل HTML أو أداة التصميم.
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 12h4l2-7 4 14 2-7h4" />
</svg>
مكون React مستقل
حوّل SVG إلى مكون React قابل لإعادة الاستخدام من دون اعتماد إضافي.
export function ActivityIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M4 12h4l2-7 4 14 2-7h4" />
</svg>
);
}
