diff --git a/changes/15996-fix-svg-fill-empty-members b/changes/15996-fix-svg-fill-empty-members
new file mode 100644
index 000000000..69bf59b47
--- /dev/null
+++ b/changes/15996-fix-svg-fill-empty-members
@@ -0,0 +1 @@
+- Fix missing empty members svg by fixing svg ids
diff --git a/frontend/components/graphics/CollectingResults.tsx b/frontend/components/graphics/CollectingResults.tsx
index 0df9824b3..ef19cfe96 100644
--- a/frontend/components/graphics/CollectingResults.tsx
+++ b/frontend/components/graphics/CollectingResults.tsx
@@ -9,7 +9,7 @@ const CollectingResults = () => {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 240 126"
     >
-      <g clipPath="url(#a)">
+      <g clipPath="url(#collectingresults_clippath)">
         <path
           d="M109.214 120.128c26.769-13.44 35.513-50.12 19.53-81.927C112.761 6.394 78.104-8.496 51.335 4.945c-26.768 13.44-35.512 50.12-19.53 81.927 15.984 31.807 50.64 46.697 77.409 33.256Z"
           fill="#F1F1FD"
@@ -243,7 +243,7 @@ const CollectingResults = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="collectingresults_clippath">
           <path fill="#fff" d="M0 0h240v126H0z" />
         </clipPath>
       </defs>
diff --git a/frontend/components/graphics/EmptyMembers.tsx b/frontend/components/graphics/EmptyMembers.tsx
index ec9f4b183..6f57cacd0 100644
--- a/frontend/components/graphics/EmptyMembers.tsx
+++ b/frontend/components/graphics/EmptyMembers.tsx
@@ -8,12 +8,12 @@ const EmptyMembers = () => {
       height="150"
       fill="none"
     >
-      <g clipPath="url(#a)">
+      <g clipPath="url(#emptymembers_clippath)">
         <path
           fill="#F1F0FF"
           d="M161.5 150c41.421 0 75-33.579 75-75s-33.579-75-75-75-75 33.579-75 75 33.579 75 75 75Z"
         />
-        <g filter="url(#b)">
+        <g filter="url(#emptymembers_filter)">
           <path
             fill="#fff"
             d="M312.075 35H10.925C6.548 35 3 38.582 3 43v64c0 4.418 3.548 8 7.925 8h301.15c4.377 0 7.925-3.582 7.925-8V43c0-4.418-3.548-8-7.925-8Z"
@@ -40,11 +40,11 @@ const EmptyMembers = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="emptymembers_clippath">
           <path fill="#fff" d="M0 0h322v150H0z" />
         </clipPath>
         <filter
-          id="b"
+          id="emptymembers_filter"
           width={324}
           height={93}
           x={-0.5}
diff --git a/frontend/components/graphics/EmptyPacks.tsx b/frontend/components/graphics/EmptyPacks.tsx
index b9b2514b6..727b5bd7a 100644
--- a/frontend/components/graphics/EmptyPacks.tsx
+++ b/frontend/components/graphics/EmptyPacks.tsx
@@ -8,12 +8,12 @@ const EmptyPacks = () => {
       height="176"
       fill="none"
     >
-      <g clipPath="url(#a)">
+      <g clipPath="url(#emptypacks_clippath)">
         <path
           fill="#F1F0FF"
           d="M162.5 176c41.421 0 75-33.579 75-75s-33.579-75-75-75-75 33.579-75 75 33.579 75 75 75Z"
         />
-        <g filter="url(#b)">
+        <g filter="url(#emptypacks_filter)">
           <path
             fill="#fff"
             d="M313 61H9a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h304a8 8 0 0 0 8-8V69a8 8 0 0 0-8-8Z"
@@ -57,7 +57,7 @@ const EmptyPacks = () => {
           d="M162.5 48c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24Z"
         />
         <mask
-          id="c"
+          id="emptypacks_mask"
           width={24}
           height={24}
           x={151}
@@ -69,17 +69,17 @@ const EmptyPacks = () => {
         >
           <path fill="#fff" d="M151 12h24v24h-24V12Z" />
         </mask>
-        <g fill="#fff" mask="url(#c)">
+        <g fill="#fff" mask="url(#emptypacks_mask)">
           <path d="M173.658 24.15v-9L162.329 12 151 15.3v16.35l11.329 3.3.596-.3c1.193.75 2.684 1.35 4.323 1.35 4.174 0 7.752-3.45 7.752-7.65-.149-1.65-.596-3-1.342-4.2Zm-10.434-4.5 8.646-2.55v5.1a7.674 7.674 0 0 0-4.771-1.65c-1.341 0-2.683.45-3.875 1.2v-2.1Zm6.26-3.75-7.155 2.1-7.155-2.1 7.155-2.1 7.155 2.1Zm-16.695 1.2 8.646 2.55v3.6a7.712 7.712 0 0 0-1.938 5.1c0 1.65.447 3 1.342 4.35l-8.05-2.25V17.1Zm14.31 17.1c-3.279 0-5.962-2.7-5.962-5.85 0-3.3 2.683-5.85 5.962-5.85 3.28 0 5.963 2.7 5.963 5.85 0 3.15-2.683 5.85-5.963 5.85Z" />
           <path d="M169.45 28.35h-1.35V25.5c0-.45-.45-.9-.9-.9s-.9.3-.9.9V30h3.15c.45 0 .9-.45.9-.9s-.3-.75-.9-.75Z" />
         </g>
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="emptypacks_clippath">
           <path fill="#fff" d="M0 0h322v176H0z" />
         </clipPath>
         <filter
-          id="b"
+          id="emptypacks_filter"
           width={328}
           height={92}
           x={-3}
diff --git a/frontend/components/graphics/EmptyPolicies.tsx b/frontend/components/graphics/EmptyPolicies.tsx
index 91ae6b83b..da2d725d8 100644
--- a/frontend/components/graphics/EmptyPolicies.tsx
+++ b/frontend/components/graphics/EmptyPolicies.tsx
@@ -8,7 +8,7 @@ const EmptyPolicies = () => {
       height="176"
       fill="none"
     >
-      <g clipPath="url(#a)">
+      <g clipPath="url(#emptypolicies_clippath)">
         <path
           fill="#F1F0FF"
           d="M162 176c41.421 0 75-33.579 75-75s-33.579-75-75-75-75 33.579-75 75 33.579 75 75 75Z"
@@ -19,7 +19,7 @@ const EmptyPolicies = () => {
           d="M162 48c13.255 0 24-10.745 24-24S175.255 0 162 0s-24 10.745-24 24 10.745 24 24 24Z"
         />
         <mask
-          id="b"
+          id="emptypolicies_mask"
           width={23}
           height={26}
           x={150}
@@ -31,7 +31,7 @@ const EmptyPolicies = () => {
         >
           <path fill="#fff" d="M150 11h23v26h-23V11Z" />
         </mask>
-        <g mask="url(#b)">
+        <g mask="url(#emptypolicies_mask)">
           <path
             stroke="#fff"
             strokeWidth={1.869}
@@ -42,7 +42,7 @@ const EmptyPolicies = () => {
             d="m165.608 19.313-5.056 5.606-3.318-2.156c-.474-.288-.948-.288-1.264.143-.316.432-.316.863.158 1.15l4.74 3.163 6.162-6.9c.316-.431.316-.863-.158-1.15-.316-.288-.948-.288-1.264.144Z"
           />
         </g>
-        <g filter="url(#c)">
+        <g filter="url(#emptypolicies_filter)">
           <path
             fill="#fff"
             d="M312.5 61H9.5a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h303a8 8 0 0 0 8-8V69a8 8 0 0 0-8-8Z"
@@ -97,11 +97,11 @@ const EmptyPolicies = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="emptypolicies_clippath">
           <path fill="#fff" d="M0 0h322v176H0z" />
         </clipPath>
         <filter
-          id="c"
+          id="emptypolicies_filter"
           width={327}
           height={92}
           x={-2.5}
diff --git a/frontend/components/graphics/EmptyQueries.tsx b/frontend/components/graphics/EmptyQueries.tsx
index 686ef157f..26f6027b5 100644
--- a/frontend/components/graphics/EmptyQueries.tsx
+++ b/frontend/components/graphics/EmptyQueries.tsx
@@ -9,12 +9,12 @@ const EmptyQueries = () => {
       fill="none"
       viewBox="0 0 322 176"
     >
-      <g clipPath="url(#clip0_121_352)">
+      <g clipPath="url(#emptyqueries_clippath)">
         <path
           fill="#F1F0FF"
           d="M162.5 176c41.421 0 75-33.579 75-75s-33.579-75-75-75-75 33.579-75 75 33.579 75 75 75z"
         />
-        <g filter="url(#filter0_d_121_352)">
+        <g filter="url(#emptyqueries_filter)">
           <path
             fill="#fff"
             d="M313 61H9a8 8 0 00-8 8v64a8 8 0 008 8h304a8 8 0 008-8V69a8 8 0 00-8-8z"
@@ -68,14 +68,14 @@ const EmptyQueries = () => {
         >
           <path fill="#fff" d="M150 12h24v24h-24V12z" />
         </mask>
-        <g fill="#fff" mask="url(#mask0_121_352)">
+        <g fill="#fff" mask="url(#emptyqueries_mask)">
           <path d="M173.1 30.75l-3.45-3.3c.9-1.35 1.35-3.15 1.35-4.95 0-5.85-4.65-10.5-10.5-10.5S150 16.65 150 22.5 154.65 33 160.5 33c1.8 0 3.45-.45 4.8-1.2l3.45 3.3c.6.6 1.35.9 2.1.9s1.5-.3 2.1-.9c1.35-1.2 1.35-3.15.15-4.35zm-21.3-8.25c0-4.8 3.9-8.7 8.7-8.7 4.8 0 8.7 3.9 8.7 8.7 0 4.8-3.9 8.7-8.7 8.7-4.8 0-8.7-3.9-8.7-8.7zm20.1 11.4c-.45.45-1.2.45-1.8 0l-3.15-3c.6-.45 1.2-1.05 1.8-1.8l3.15 3c.45.45.45 1.2 0 1.8z" />
           <path d="M164.4 18.45l-4.8 5.85-3.15-2.25c-.45-.3-.9-.3-1.2.15-.3.45-.3.9.15 1.2l4.5 3.3 5.85-7.2c.3-.45.3-.9-.15-1.2-.3-.3-.9-.3-1.2.15z" />
         </g>
       </g>
       <defs>
         <filter
-          id="filter0_d_121_352"
+          id="emptyqueries_filter"
           width="328"
           height="92"
           x="-3"
@@ -102,7 +102,7 @@ const EmptyQueries = () => {
             result="shape"
           />
         </filter>
-        <clipPath id="clip0_121_352">
+        <clipPath id="emptyqueries_clippath">
           <path fill="#fff" d="M0 0H322V176H0z" />
         </clipPath>
       </defs>
diff --git a/frontend/components/graphics/EmptySchedule.tsx b/frontend/components/graphics/EmptySchedule.tsx
index 5fc9a6cd5..6d765d9b6 100644
--- a/frontend/components/graphics/EmptySchedule.tsx
+++ b/frontend/components/graphics/EmptySchedule.tsx
@@ -8,12 +8,12 @@ const EmptySchedule = () => {
       height="176"
       fill="none"
     >
-      <g clipPath="url(#a)">
+      <g clipPath="url(#emptyschedule_svg)">
         <path
           fill="#F1F0FF"
           d="M162.5 176c41.421 0 75-33.579 75-75s-33.579-75-75-75-75 33.579-75 75 33.579 75 75 75Z"
         />
-        <g filter="url(#b)">
+        <g filter="url(#emptyschedule_filter)">
           <path
             fill="#fff"
             d="M313 61H9a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h304a8 8 0 0 0 8-8V69a8 8 0 0 0-8-8Z"
@@ -57,7 +57,7 @@ const EmptySchedule = () => {
           d="M162.5 48c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24Z"
         />
         <mask
-          id="c"
+          id="emptyschedule_mask"
           width={24}
           height={24}
           x={151}
@@ -69,17 +69,17 @@ const EmptySchedule = () => {
         >
           <path fill="#fff" d="M151 12h24v24h-24V12Z" />
         </mask>
-        <g fill="#fff" mask="url(#c)">
+        <g fill="#fff" mask="url(#emptyschedule_mask)">
           <path d="M173.658 24.15v-9L162.329 12 151 15.3v16.35l11.329 3.3.596-.3c1.193.75 2.684 1.35 4.323 1.35 4.174 0 7.752-3.45 7.752-7.65-.149-1.65-.596-3-1.342-4.2Zm-10.434-4.5 8.646-2.55v5.1a7.674 7.674 0 0 0-4.771-1.65c-1.341 0-2.683.45-3.875 1.2v-2.1Zm6.26-3.75-7.155 2.1-7.155-2.1 7.155-2.1 7.155 2.1Zm-16.695 1.2 8.646 2.55v3.6a7.712 7.712 0 0 0-1.938 5.1c0 1.65.447 3 1.342 4.35l-8.05-2.25V17.1Zm14.31 17.1c-3.279 0-5.962-2.7-5.962-5.85 0-3.3 2.683-5.85 5.962-5.85 3.28 0 5.963 2.7 5.963 5.85 0 3.15-2.683 5.85-5.963 5.85Z" />
           <path d="M169.45 28.35h-1.35V25.5c0-.45-.45-.9-.9-.9s-.9.3-.9.9V30h3.15c.45 0 .9-.45.9-.9s-.3-.75-.9-.75Z" />
         </g>
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="emptyschedule_clippath">
           <path fill="#fff" d="M0 0h322v176H0z" />
         </clipPath>
         <filter
-          id="b"
+          id="emptyschedule_filter"
           width={328}
           height={92}
           x={-3}
diff --git a/frontend/components/graphics/EmptySoftware.tsx b/frontend/components/graphics/EmptySoftware.tsx
index 347331a6b..d4501fa1c 100644
--- a/frontend/components/graphics/EmptySoftware.tsx
+++ b/frontend/components/graphics/EmptySoftware.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const EmptySoftware = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="100" height="56" fill="none">
-      <g clipPath="url(#a)">
+      <g clipPath="url(#emptysoftware_clippath)">
         <path
           fill="#E3E3FE"
           d="m15.438 46.738 26.923 8.726.111-31.327-8.9 9.518-18.134-5.666v18.749Z"
@@ -126,7 +126,7 @@ const EmptySoftware = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="emptysoftware_clippath">
           <path fill="#fff" d="M0 0h100v56H0z" />
         </clipPath>
       </defs>
diff --git a/frontend/components/graphics/EmptyTeams.tsx b/frontend/components/graphics/EmptyTeams.tsx
index 43b005c20..34ee84a60 100644
--- a/frontend/components/graphics/EmptyTeams.tsx
+++ b/frontend/components/graphics/EmptyTeams.tsx
@@ -8,12 +8,12 @@ const EmptyTeams = () => {
       height="150"
       fill="none"
     >
-      <g clipPath="url(#a)">
+      <g clipPath="url(#emptyteams_clippath)">
         <path
           fill="#F1F0FF"
           d="M162.5 150c41.421 0 75-33.579 75-75s-33.579-75-75-75-75 33.579-75 75 33.579 75 75 75Z"
         />
-        <g filter="url(#b)">
+        <g filter="url(#emptyteams_filter)">
           <path
             fill="#fff"
             d="M313 35H9a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h304a8 8 0 0 0 8-8V43a8 8 0 0 0-8-8Z"
@@ -53,11 +53,11 @@ const EmptyTeams = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="emptyteams_clippath">
           <path fill="#fff" d="M0 0h322v150H0z" />
         </clipPath>
         <filter
-          id="b"
+          id="emptyteams_filter"
           width={328}
           height={92}
           x={-3}
diff --git a/frontend/components/graphics/FileConfigurationProfile.tsx b/frontend/components/graphics/FileConfigurationProfile.tsx
index b85e61fb3..c2b9bc355 100644
--- a/frontend/components/graphics/FileConfigurationProfile.tsx
+++ b/frontend/components/graphics/FileConfigurationProfile.tsx
@@ -3,14 +3,14 @@ import React from "react";
 const FileConfigurationProfile = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="34" height="40" fill="none">
-      <g clipPath="url(#a)">
+      <g clipPath="url(#fileconfigurationprofile_clippath__a)">
         <path
           fill="#fff"
           stroke="#192147"
           strokeWidth={0.5}
           d="M29.333 39.75H4.667a2.417 2.417 0 0 1-2.417-2.416V2.667A2.417 2.417 0 0 1 4.667.25h19.562c.64 0 1.255.255 1.709.708l5.104 5.105c.453.453.708 1.068.708 1.709v29.562a2.417 2.417 0 0 1-2.417 2.416Z"
         />
-        <g fill="#8B8FA2" clipPath="url(#b)">
+        <g fill="#8B8FA2" clipPath="url(#fileconfigurationprofile_clippath__b)">
           <path d="M16.999 14.714a6.788 6.788 0 1 0 0 13.575 6.788 6.788 0 0 0 0-13.575Zm0 12.407a5.619 5.619 0 0 1-5.62-5.62 5.619 5.619 0 0 1 5.62-5.62 5.619 5.619 0 0 1 5.62 5.62 5.619 5.619 0 0 1-5.62 5.62Z" />
           <path d="M16.999 23.207a1.708 1.708 0 1 0 0-3.416 1.708 1.708 0 0 0 0 3.416Z" />
           <path d="M26.839 22.26c-.933-.417-.933-1.101 0-1.52.933-.419.87-.891-.14-1.054-1.007-.163-1.186-.821-.393-1.466.794-.644.61-1.086-.407-.982-1.017.105-1.359-.486-.759-1.314.598-.829.308-1.208-.646-.843-.954.366-1.439-.118-1.073-1.072.365-.954-.017-1.245-.843-.647-.826.598-1.419.256-1.314-.759.105-1.017-.338-1.198-.982-.407-.645.793-1.305.617-1.466-.393-.16-1.01-.635-1.07-1.054-.14-.417.933-1.1.933-1.52 0-.416-.933-.89-.87-1.054.14-.163 1.01-.821 1.186-1.466.393-.644-.793-1.086-.61-.981.407.104 1.017-.487 1.359-1.315.759-.829-.6-1.208-.307-.842.646.363.955-.12 1.439-1.073 1.073-.954-.363-1.245.017-.647.843.598.828.256 1.419-.759 1.314-1.017-.104-1.198.338-.407.982.794.645.617 1.306-.393 1.466-1.01.16-1.07.635-.14 1.054.931.419.933 1.1 0 1.52-.933.418-.87.89.14 1.054 1.01.163 1.187.821.393 1.466-.793.644-.61 1.086.407.982 1.017-.105 1.36.486.759 1.314-.598.829-.307 1.208.647.843.954-.363 1.438.118 1.073 1.072-.364.954.016 1.245.842.647.826-.598 1.42-.256 1.315.759-.105 1.017.337 1.198.981.407.645-.794 1.306-.617 1.466.393.163 1.01.636 1.07 1.054.14.417-.933 1.101-.933 1.52 0 .416.933.891.87 1.054-.14.163-1.01.821-1.187 1.466-.393.644.793 1.087.61.982-.407-.105-1.017.486-1.36 1.314-.759.829.6 1.208.307.843-.647-.363-.954.119-1.438 1.073-1.072.954.365 1.244-.017.646-.843-.598-.828-.256-1.42.759-1.314 1.017.104 1.198-.338.407-.982-.791-.645-.617-1.306.393-1.466 1.01-.163 1.07-.636.14-1.054Zm-9.84 7.306a8.067 8.067 0 1 1 0-16.132 8.068 8.068 0 0 1 0 16.134v-.002Z" />
@@ -27,10 +27,10 @@ const FileConfigurationProfile = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="fileconfigurationprofile_clippath__a">
           <path fill="#fff" d="M0 0h34v40H0z" />
         </clipPath>
-        <clipPath id="b">
+        <clipPath id="fileconfigurationprofile_clippath__b">
           <path fill="#fff" d="M6.5 11h21v21h-21z" />
         </clipPath>
       </defs>
diff --git a/frontend/components/graphics/FileP7m.tsx b/frontend/components/graphics/FileP7m.tsx
index 92df721f2..5c182a14e 100644
--- a/frontend/components/graphics/FileP7m.tsx
+++ b/frontend/components/graphics/FileP7m.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const FileP7m = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="34" height="40" fill="none">
-      <g clipPath="url(#a)">
+      <g clipPath="url(#filep7m_clippath)">
         <path
           fill="#fff"
           stroke="#192147"
@@ -46,7 +46,7 @@ const FileP7m = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="filep7m_clippath">
           <path fill="#fff" d="M0 0h34v40H0z" />
         </clipPath>
       </defs>
diff --git a/frontend/components/graphics/FilePdf.tsx b/frontend/components/graphics/FilePdf.tsx
index 537121ace..a0e164800 100644
--- a/frontend/components/graphics/FilePdf.tsx
+++ b/frontend/components/graphics/FilePdf.tsx
@@ -45,11 +45,6 @@ const FilePdf = () => {
           rx={1.75}
         />
       </g>
-      <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h34v40H0z" />
-        </clipPath>
-      </defs>
     </svg>
   );
 };
diff --git a/frontend/components/graphics/FilePem.tsx b/frontend/components/graphics/FilePem.tsx
index bf4cbc803..83aec4829 100644
--- a/frontend/components/graphics/FilePem.tsx
+++ b/frontend/components/graphics/FilePem.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const FilePem = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="34" height="40" fill="none">
-      <g clipPath="url(#a)">
+      <g clipPath="url(#filepem_clippath)">
         <path
           fill="#fff"
           stroke="#192147"
@@ -46,7 +46,7 @@ const FilePem = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="filepem_clippath">
           <path fill="#fff" d="M0 0h34v40H0z" />
         </clipPath>
       </defs>
diff --git a/frontend/components/graphics/FilePkg.tsx b/frontend/components/graphics/FilePkg.tsx
index a839e127d..a44a988ef 100644
--- a/frontend/components/graphics/FilePkg.tsx
+++ b/frontend/components/graphics/FilePkg.tsx
@@ -3,14 +3,14 @@ import React from "react";
 const FilePkg = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="34" height="40" fill="none">
-      <g clipPath="url(#a)">
+      <g clipPath="url(#filepkg_clippath__a)">
         <path
           fill="#fff"
           stroke="#192147"
           strokeWidth={0.5}
           d="M29.333 39.75H4.667a2.417 2.417 0 0 1-2.417-2.416V2.667A2.417 2.417 0 0 1 4.667.25h19.562c.64 0 1.255.255 1.709.708l5.104 5.105c.453.453.708 1.068.708 1.709v29.562a2.417 2.417 0 0 1-2.417 2.416Z"
         />
-        <g clipPath="url(#b)">
+        <g clipPath="url(#filepkg_clippath__b)">
           <path
             fill="#533006"
             d="m16.685 30.474 7.826-4.518-7.826-4.518-7.826 4.518 7.826 4.518Z"
@@ -131,10 +131,10 @@ const FilePkg = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="filepkg_clippath__a">
           <path fill="#fff" d="M0 0h34v40H0z" />
         </clipPath>
-        <clipPath id="b">
+        <clipPath id="filepkg_clippath__b">
           <path fill="#fff" d="M6.5 11h21v21h-21z" />
         </clipPath>
       </defs>
diff --git a/frontend/components/graphics/FilePy.tsx b/frontend/components/graphics/FilePy.tsx
index f8269b824..882a05ddb 100644
--- a/frontend/components/graphics/FilePy.tsx
+++ b/frontend/components/graphics/FilePy.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const FilePy = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="34" height="40" fill="none">
-      <g clipPath="url(#a)">
+      <g clipPath="url(#filepy_clippath)">
         <path
           fill="#fff"
           stroke="#192147"
@@ -46,7 +46,7 @@ const FilePy = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="filepy_clippath">
           <path fill="#fff" d="M0 0h34v40H0z" />
         </clipPath>
       </defs>
diff --git a/frontend/components/graphics/FileScript.tsx b/frontend/components/graphics/FileScript.tsx
index dcdadede2..350713ef8 100644
--- a/frontend/components/graphics/FileScript.tsx
+++ b/frontend/components/graphics/FileScript.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const FileScript = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="34" height="40" fill="none">
-      <g clipPath="url(#a)">
+      <g clipPath="url(#filescript_clippath__a)">
         <path
           fill="#fff"
           stroke="#192147"
@@ -19,7 +19,7 @@ const FileScript = () => {
           strokeWidth={0.5}
           d="M24.5.334v5.667c0 .736.597 1.333 1.333 1.333h6"
         />
-        <g clipPath="url(#b)">
+        <g clipPath="url(#filescript_clippath__b)">
           <path
             fill="#8B8FA2"
             d="M15.113 26.75c.829.807 1.549 1.507 2.018 1.953.545.52.85 1.241.818 1.984-.033.743-.447 1.623-1.909 1.952-2.924.647-3.218-2.154-3.218-2.154l-.087-.817 2.389-2.917h-.011Z"
@@ -54,10 +54,10 @@ const FileScript = () => {
         </g>
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="filescript_clippath__a">
           <path fill="#fff" d="M0 0h34v40H0z" />
         </clipPath>
-        <clipPath id="b">
+        <clipPath id="filescript_clippath__b">
           <path fill="#fff" d="M8 9h18v24H8z" />
         </clipPath>
       </defs>
diff --git a/frontend/components/graphics/FileSh.tsx b/frontend/components/graphics/FileSh.tsx
index ed4fb3421..40da7eefd 100644
--- a/frontend/components/graphics/FileSh.tsx
+++ b/frontend/components/graphics/FileSh.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const FileSh = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="34" height="40" fill="none">
-      <g clipPath="url(#a)">
+      <g clipPath="url(#filesh_clippath)">
         <path
           fill="#fff"
           stroke="#192147"
@@ -46,7 +46,7 @@ const FileSh = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="filesh_clippath">
           <path fill="#fff" d="M0 0h34v40H0z" />
         </clipPath>
       </defs>
diff --git a/frontend/components/icons/Pencil.tsx b/frontend/components/icons/Pencil.tsx
index 4f5f38479..d5c7e43f9 100644
--- a/frontend/components/icons/Pencil.tsx
+++ b/frontend/components/icons/Pencil.tsx
@@ -17,19 +17,12 @@ const Pencil = ({ color = "core-fleet-blue", size = "medium" }: IPencil) => {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16"
     >
-      <g clipPath="url(#a)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="m14.513.507.98.98c.327.327.507.762.507 1.225 0 .463-.18.899-.508 1.226l-1.2 1.2-3.43-3.43 1.2-1.2c.654-.655 1.796-.656 2.45 0ZM1.077 11.492l8.804-8.805 3.43 3.431-8.804 8.804a.346.346 0 0 1-.16.091l-3.917.976a.343.343 0 0 1-.328-.09.348.348 0 0 1-.092-.33l.976-3.917a.35.35 0 0 1 .091-.16Z"
-          fill={COLORS[color]}
-        />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h16v16H0z" />
-        </clipPath>
-      </defs>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m14.513.507.98.98c.327.327.507.762.507 1.225 0 .463-.18.899-.508 1.226l-1.2 1.2-3.43-3.43 1.2-1.2c.654-.655 1.796-.656 2.45 0ZM1.077 11.492l8.804-8.805 3.43 3.431-8.804 8.804a.346.346 0 0 1-.16.091l-3.917.976a.343.343 0 0 1-.328-.09.348.348 0 0 1-.092-.33l.976-3.917a.35.35 0 0 1 .091-.16Z"
+        fill={COLORS[color]}
+      />
     </svg>
   );
 };
diff --git a/frontend/components/icons/Profile.tsx b/frontend/components/icons/Profile.tsx
index 3d1d7989d..d678ffb16 100644
--- a/frontend/components/icons/Profile.tsx
+++ b/frontend/components/icons/Profile.tsx
@@ -3,14 +3,14 @@ import React from "react";
 const Profile = () => {
   return (
     <svg width="34" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#a)">
+      <g clipPath="url(#profile_clippath__a)">
         <path
           d="M29.333 39.75H4.667a2.417 2.417 0 0 1-2.417-2.416V2.667A2.417 2.417 0 0 1 4.667.25h19.562c.64 0 1.255.255 1.709.708l5.104 5.105c.453.453.708 1.068.708 1.709v29.562a2.417 2.417 0 0 1-2.417 2.416Z"
           fill="#fff"
           stroke="#192147"
           strokeWidth=".5"
         />
-        <g clipPath="url(#b)" fill="#8B8FA2">
+        <g clipPath="url(#profile_clippath__b)" fill="#8B8FA2">
           <path d="M16.999 14.714a6.788 6.788 0 1 0 0 13.575 6.788 6.788 0 0 0 0-13.575Zm0 12.406a5.619 5.619 0 0 1-5.62-5.619 5.619 5.619 0 0 1 5.62-5.62 5.619 5.619 0 0 1 5.62 5.62 5.619 5.619 0 0 1-5.62 5.62Z" />
           <path d="M16.999 23.207a1.708 1.708 0 1 0 0-3.416 1.708 1.708 0 0 0 0 3.416Z" />
           <path d="M26.839 22.26c-.933-.417-.933-1.101 0-1.52.933-.419.87-.891-.14-1.054-1.007-.163-1.186-.821-.393-1.466.794-.644.61-1.087-.407-.982-1.017.105-1.359-.486-.759-1.314.598-.829.308-1.208-.646-.843-.954.366-1.439-.118-1.073-1.072.365-.955-.017-1.245-.843-.647-.826.598-1.419.255-1.314-.759.105-1.017-.338-1.198-.982-.407-.645.793-1.305.616-1.466-.393-.16-1.01-.635-1.07-1.054-.14-.417.933-1.1.933-1.52 0-.416-.933-.89-.87-1.054.14-.163 1.01-.821 1.186-1.466.393-.644-.794-1.086-.61-.981.407.104 1.017-.487 1.359-1.315.759-.829-.6-1.208-.308-.842.646.363.955-.12 1.439-1.073 1.073-.954-.363-1.245.016-.647.843.598.828.256 1.419-.759 1.314-1.017-.105-1.198.338-.407.982.794.645.617 1.306-.393 1.466-1.01.16-1.07.635-.14 1.054.931.419.933 1.1 0 1.52-.933.418-.87.89.14 1.054 1.01.163 1.187.821.393 1.465-.793.645-.61 1.087.407.983 1.017-.105 1.36.486.759 1.314-.598.828-.307 1.208.647.843.954-.364 1.438.118 1.073 1.072-.364.954.016 1.245.842.647.826-.598 1.42-.256 1.315.759-.105 1.016.337 1.198.981.407.645-.794 1.306-.617 1.466.393.163 1.01.636 1.07 1.054.14.417-.933 1.101-.933 1.52 0 .416.933.891.87 1.054-.14.163-1.01.821-1.187 1.466-.393.644.793 1.087.61.982-.407-.105-1.017.486-1.36 1.314-.759.829.6 1.208.307.843-.647-.363-.954.119-1.438 1.073-1.072.954.365 1.244-.017.646-.843-.598-.828-.256-1.42.759-1.314 1.017.104 1.198-.338.407-.983-.791-.644-.617-1.305.393-1.465 1.01-.163 1.07-.636.14-1.055Zm-9.84 7.306a8.067 8.067 0 1 1 0-16.132 8.068 8.068 0 0 1 0 16.134v-.002Z" />
@@ -27,10 +27,10 @@ const Profile = () => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="profile_clippath__a">
           <path fill="#fff" d="M0 0h34v40H0z" />
         </clipPath>
-        <clipPath id="b">
+        <clipPath id="profile_clippath__b">
           <path fill="#fff" d="M6.5 11h21v21h-21z" />
         </clipPath>
       </defs>
diff --git a/frontend/pages/SoftwarePage/components/icons/Chrome.tsx b/frontend/pages/SoftwarePage/components/icons/Chrome.tsx
index 4a4df76d3..c356dc9c3 100644
--- a/frontend/pages/SoftwarePage/components/icons/Chrome.tsx
+++ b/frontend/pages/SoftwarePage/components/icons/Chrome.tsx
@@ -9,10 +9,10 @@ const Chrome = (props: SVGProps<SVGSVGElement>) => (
       stroke="#E2E4EA"
       d="M.5 8A7.5 7.5 0 0 1 8 .5h16A7.5 7.5 0 0 1 31.5 8v16a7.5 7.5 0 0 1-7.5 7.5H8A7.5 7.5 0 0 1 .5 24z"
     />
-    <g clipPath="url(#Name=chrome_svg__a)">
+    <g clipPath="url(#Name=chrome_clippath__a)">
       <path fill="#fff" d="M16 21.997a6 6 0 1 0 0-12 6 6 0 0 0 0 12" />
       <path
-        fill="url(#Name=chrome_svg__b)"
+        fill="url(#Name=chrome_clippath__b)"
         d="M16 10h10.39a11.997 11.997 0 0 0-20.781.002L10.804 19l.005-.001A5.992 5.992 0 0 1 16 10"
       />
       <path
@@ -20,17 +20,17 @@ const Chrome = (props: SVGProps<SVGSVGElement>) => (
         d="M16 20.75a4.75 4.75 0 1 0 0-9.5 4.75 4.75 0 0 0 0 9.5"
       />
       <path
-        fill="url(#Name=chrome_svg__c)"
+        fill="url(#Name=chrome_clippath__c)"
         d="M21.196 19.002 16 28a11.997 11.997 0 0 0 10.39-17.998H16l-.002.004a5.993 5.993 0 0 1 5.198 8.996"
       />
       <path
-        fill="url(#Name=chrome_svg__d)"
+        fill="url(#Name=chrome_clippath__d)"
         d="M10.804 19.002 5.61 10.003A11.997 11.997 0 0 0 16.001 28l5.195-8.998-.003-.004a5.992 5.992 0 0 1-10.389.004"
       />
     </g>
     <defs>
       <linearGradient
-        id="Name=chrome_svg__b"
+        id="Name=chrome_clippath__b"
         x1={5.609}
         x2={26.391}
         y1={11.5}
@@ -41,7 +41,7 @@ const Chrome = (props: SVGProps<SVGSVGElement>) => (
         <stop offset={1} stopColor="#EA4335" />
       </linearGradient>
       <linearGradient
-        id="Name=chrome_svg__c"
+        id="Name=chrome_clippath__c"
         x1={14.361}
         x2={24.752}
         y1={27.84}
@@ -52,7 +52,7 @@ const Chrome = (props: SVGProps<SVGSVGElement>) => (
         <stop offset={1} stopColor="#FBBC04" />
       </linearGradient>
       <linearGradient
-        id="Name=chrome_svg__d"
+        id="Name=chrome_clippath__d"
         x1={17.299}
         x2={6.908}
         y1={27.251}
@@ -62,7 +62,7 @@ const Chrome = (props: SVGProps<SVGSVGElement>) => (
         <stop stopColor="#1E8E3E" />
         <stop offset={1} stopColor="#34A853" />
       </linearGradient>
-      <clipPath id="Name=chrome_svg__a">
+      <clipPath id="Name=chrome_clippath__a">
         <path fill="#fff" d="M4 4h24v24H4z" />
       </clipPath>
     </defs>
diff --git a/frontend/pages/SoftwarePage/components/icons/Firefox.tsx b/frontend/pages/SoftwarePage/components/icons/Firefox.tsx
index be5594c4e..f4206a449 100644
--- a/frontend/pages/SoftwarePage/components/icons/Firefox.tsx
+++ b/frontend/pages/SoftwarePage/components/icons/Firefox.tsx
@@ -9,7 +9,7 @@ const Firefox = (props: SVGProps<SVGSVGElement>) => (
       stroke="#E2E4EA"
       d="M.5 8A7.5 7.5 0 0 1 8 .5h16A7.5 7.5 0 0 1 31.5 8v16a7.5 7.5 0 0 1-7.5 7.5H8A7.5 7.5 0 0 1 .5 24z"
     />
-    <g clipPath="url(#Name=firefox_svg__a)">
+    <g clipPath="url(#Name=firefox_clippath)">
       <path
         fill="url(#Name=firefox_svg__b)"
         d="M23.288 6.233c-.584.68-.857 2.21-.264 3.762.591 1.552 1.5 1.215 2.066 2.797.747 2.087.399 4.892.399 4.892s.898 2.6 1.523-.162c1.384-5.186-3.724-10.011-3.724-11.29"
@@ -283,7 +283,7 @@ const Firefox = (props: SVGProps<SVGSVGElement>) => (
         <stop offset={0.838} stopColor="#FF8E00" stopOpacity={0.172} />
         <stop offset={1} stopColor="#FF8E00" stopOpacity={0} />
       </linearGradient>
-      <clipPath id="Name=firefox_svg__a">
+      <clipPath id="Name=firefox_clippath">
         <path fill="#fff" d="M4.5 4h23.253v24H4.5z" />
       </clipPath>
     </defs>
diff --git a/frontend/pages/SoftwarePage/components/icons/Slack.tsx b/frontend/pages/SoftwarePage/components/icons/Slack.tsx
index 3b6aac63d..992bb1672 100644
--- a/frontend/pages/SoftwarePage/components/icons/Slack.tsx
+++ b/frontend/pages/SoftwarePage/components/icons/Slack.tsx
@@ -9,7 +9,11 @@ const Slack = (props: SVGProps<SVGSVGElement>) => (
       stroke="#E2E4EA"
       d="M.5 8A7.5 7.5 0 0 1 8 .5h16A7.5 7.5 0 0 1 31.5 8v16a7.5 7.5 0 0 1-7.5 7.5H8A7.5 7.5 0 0 1 .5 24z"
     />
-    <g fillRule="evenodd" clipPath="url(#Name=slack_svg__a)" clipRule="evenodd">
+    <g
+      fillRule="evenodd"
+      clipPath="url(#Name=slack_clippath)"
+      clipRule="evenodd"
+    >
       <path
         fill="#36C5F0"
         d="M13.066 5a2.204 2.204 0 0 0 .001 4.408h2.2V7.205A2.204 2.204 0 0 0 13.067 5m0 5.878H7.2A2.202 2.202 0 0 0 5 13.082a2.202 2.202 0 0 0 2.2 2.205h5.866a2.202 2.202 0 0 0 2.2-2.204 2.202 2.202 0 0 0-2.2-2.205"
@@ -28,7 +32,7 @@ const Slack = (props: SVGProps<SVGSVGElement>) => (
       />
     </g>
     <defs>
-      <clipPath id="Name=slack_svg__a">
+      <clipPath id="Name=slack_clippath">
         <path fill="#fff" d="M5 5h22v22.044H5z" />
       </clipPath>
     </defs>
diff --git a/frontend/pages/SoftwarePage/components/icons/VisualStudioCode.tsx b/frontend/pages/SoftwarePage/components/icons/VisualStudioCode.tsx
index ac089803e..1c209468e 100644
--- a/frontend/pages/SoftwarePage/components/icons/VisualStudioCode.tsx
+++ b/frontend/pages/SoftwarePage/components/icons/VisualStudioCode.tsx
@@ -9,7 +9,7 @@ const VisualStudioCode = (props: SVGProps<SVGSVGElement>) => (
       stroke="#E2E4EA"
       d="M.5 8A7.5 7.5 0 0 1 8 .5h16A7.5 7.5 0 0 1 31.5 8v16a7.5 7.5 0 0 1-7.5 7.5H8A7.5 7.5 0 0 1 .5 24z"
     />
-    <g clipPath="url(#Name=vsc_svg__a)">
+    <g clipPath="url(#Name=vsc_clippath)">
       <path
         fill="#2489CA"
         d="M5.64 12.864s-.53-.382.106-.892l1.483-1.326s.424-.447.873-.058l13.683 10.36v4.967s-.007.78-1.008.694z"
@@ -28,7 +28,7 @@ const VisualStudioCode = (props: SVGProps<SVGSVGElement>) => (
       />
     </g>
     <defs>
-      <clipPath id="Name=vsc_svg__a">
+      <clipPath id="Name=vsc_clippath">
         <path fill="#fff" d="M5 5h22.403v22H5z" />
       </clipPath>
     </defs>