diff --git a/src/shared/SocialsList.tsx b/src/shared/SocialsList.tsx
new file mode 100644
index 0000000..f6d8f06
--- /dev/null
+++ b/src/shared/SocialsList.tsx
@@ -0,0 +1,43 @@
+import { SocialType } from "@/shared/SocialsShare";
+import React, { FC } from "react";
+
+export interface SocialsListProps {
+  className?: string;
+  itemClass?: string;
+  socials?: SocialType[];
+}
+
+const socialsDemo: SocialType[] = [
+  { name: "Facebook", icon: "lab la-facebook-square", href: "#" },
+  { name: "Twitter", icon: "lab la-twitter", href: "#" },
+  { name: "Youtube", icon: "lab la-youtube", href: "#" },
+  { name: "Instagram", icon: "lab la-instagram", href: "#" },
+];
+
+const SocialsList: FC<SocialsListProps> = ({
+  className = "",
+  itemClass = "block",
+  socials = socialsDemo,
+}) => {
+  return (
+    <nav
+      className={`nc-SocialsList flex space-x-2.5 text-2xl text-neutral-6000 dark:text-neutral-300 ${className}`}
+      data-nc-id="SocialsList"
+    >
+      {socials.map((item, i) => (
+        <a
+          key={i}
+          className={`${itemClass}`}
+          href={item.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={item.name}
+        >
+          <i className={item.icon}></i>
+        </a>
+      ))}
+    </nav>
+  );
+};
+
+export default SocialsList;