diff --git a/nx-dev/ui-common/src/lib/plugin-card.tsx b/nx-dev/ui-common/src/lib/plugin-card.tsx
index 9f97cc378b..ee9d7928c8 100644
--- a/nx-dev/ui-common/src/lib/plugin-card.tsx
+++ b/nx-dev/ui-common/src/lib/plugin-card.tsx
@@ -1,5 +1,5 @@
 import {
-  ArrowDownIcon,
+  ArrowDownTrayIcon,
   ClockIcon,
   StarIcon,
 } from '@heroicons/react/24/outline';
@@ -117,7 +117,7 @@ function NpmDownloadsWidget({
   }
   return (
     <abbr data-tooltip="Monthly NPM Downloads" data-tooltip-align-right>
-      <ArrowDownIcon className="h-4 w-4 inline-block mx-0.5 align-bottom"></ArrowDownIcon>
+      <ArrowDownTrayIcon className="h-4 w-4 inline-block mx-0.5 align-bottom"></ArrowDownTrayIcon>
       {shortenNumber(npmDownloads)}
       <span className="md:hidden">
         <br />
diff --git a/nx-dev/ui-community/src/lib/plugin-directory.tsx b/nx-dev/ui-community/src/lib/plugin-directory.tsx
index eb1f55af8e..5c85559be3 100644
--- a/nx-dev/ui-community/src/lib/plugin-directory.tsx
+++ b/nx-dev/ui-community/src/lib/plugin-directory.tsx
@@ -1,7 +1,7 @@
 import {
-  ArrowDownIcon,
   ArrowLongDownIcon,
   ArrowLongUpIcon,
+  ArrowDownTrayIcon,
   ClockIcon,
   StarIcon,
 } from '@heroicons/react/24/outline';
@@ -110,7 +110,7 @@ export function PluginDirectory({
                 className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
                 onClick={() => setOrderBy('npmDownloads')}
               >
-                <ArrowDownIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></ArrowDownIcon>
+                <ArrowDownTrayIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></ArrowDownTrayIcon>
                 Downloads
                 {modifiers.orderBy === 'npmDownloads' &&
                 modifiers.orderDirection === 'ASC' ? (