diff --git a/pages/api/icons.js b/pages/api/icons.js
new file mode 100644
index 00000000000..fcdb316251d
--- /dev/null
+++ b/pages/api/icons.js
@@ -0,0 +1,46 @@
+import logger from "@config/logger";
+import connectMongo from "@config/mongo";
+import Link from "@models/Link";
+
+export default async function handler(req, res) {
+  if (req.method != "GET") {
+    return res
+      .status(400)
+      .json({ error: "Invalid request: GET request required" });
+  }
+
+  const icons = await getPopularIcons();
+  return res.status(200).json(icons);
+}
+
+export async function getPopularIcons() {
+  await connectMongo();
+  let icons = [];
+  try {
+    icons = await Link.aggregate([
+      {
+        $group: {
+          _id: "$icon",
+          count: { $count: {} },
+        },
+      },
+      {
+        $sort:{
+            count: -1
+        }
+      },
+      {
+        $limit: 20
+      },
+      {
+        $project: { _id: 0, icon: "$_id"},
+      }
+    ]).exec();
+    icons = icons.map( icon => icon.icon )
+  } catch (e) {
+    logger.error(e, "Failed to load popular icons");
+    icons = [];
+  }
+
+  return JSON.parse(JSON.stringify(icons));
+}
diff --git a/pages/icons.js b/pages/icons.js
index c24fd2ebcc8..22ec5cb6609 100644
--- a/pages/icons.js
+++ b/pages/icons.js
@@ -9,6 +9,14 @@ import PageHead from "@components/PageHead";
 import { PROJECT_NAME } from "@constants/index";
 import { useRouter } from "next/router";
 import Button from "@components/Button";
+import { getPopularIcons } from "./api/icons";
+
+export async function getServerSideProps(){
+  const popularIcons = await getPopularIcons();
+  return {
+    props: { popularIcons }
+  }
+}
 
 const icons = {};
 
@@ -20,30 +28,8 @@ Object.keys(SiIcons).forEach((key) => {
   icons[key.toLocaleLowerCase()] = key;
 });
 
-const popularIcons = [
-  "FaGithub",
-  "FaTwitter",
-  "FaLinkedin",
-  "FaGit",
-  "FaXTwitter",
-  "FaInstagram",
-  "SiHashnode",
-  "FaLink",
-  "FaYoutube",
-  "FaGlobe",
-  "FaDev",
-  "FaDiscord",
-  "FaMedium",
-  "SiMedium",
-  "FaFacebook",
-  "FaGithubAlt",
-  "SiLinkedin",
-  "SiLeetcode",
-  "FaDollarSign",
-  "FaMastodon",
-];
 
-export default function Icons() {
+export default function Icons({ popularIcons }) {
   const [notFound, setNotFound] = useState();
 
   const router = useRouter();
@@ -89,7 +75,7 @@ export default function Icons() {
       }
       return filteredIconNames;
     },
-    [keyword],
+    [keyword, popularIcons],
   );
   return (
     <>