diff --git a/packages/website/build-scripts/icons-generation/index.mjs b/packages/website/build-scripts/icons-generation/index.mjs
index 07036beb5748..ca4404488d61 100644
--- a/packages/website/build-scripts/icons-generation/index.mjs
+++ b/packages/website/build-scripts/icons-generation/index.mjs
@@ -54,9 +54,10 @@ import ${svgImport} from "../local-cdn/local-cdn/${collection}/dist/${version}/$
 
         setTimeout(() => {
             target.classList.remove("icon__wrapper--copied");
-        }, 500)
+        }, 600)
     }}>
     <CopySvg className="icon__wrapper__copy"/>
+    <AcceptSvg className="icon__wrapper__accept"/>
     <div className="icon__wrapper__svg"><${svgImport} fill="var(--ifm-font-color-base)"/></div>
     <span className="icon__wrapper__title">{${iconNameImport}}</span>
 </div>`;
@@ -103,6 +104,7 @@ const generateTNTIconsPage = (sourceDir, collection, version) => {
      const content =`
 ${commonImports}
 import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
+import AcceptSvg from "../local-cdn/local-cdn/icons/dist/v5/accept.svg";
 
 ${imports}
  
@@ -138,6 +140,8 @@ const generateBSIconsPage = (sourceDir, collection, version) => {
 ${commonImports}
  
 import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
+import AcceptSvg from "../local-cdn/local-cdn/icons/dist/v5/accept.svg";
+
 ${imports}
  
  export default function SAPBSIcons() {
diff --git a/packages/website/src/pages/icons.css b/packages/website/src/pages/icons.css
index d95146a5cd96..f72f282f727a 100644
--- a/packages/website/src/pages/icons.css
+++ b/packages/website/src/pages/icons.css
@@ -22,25 +22,27 @@
 	background-color: var(--ifm-background-color);
 }
 
+.icon__wrapper__svg {
+	width: 2rem;
+	height: 2rem;
+	pointer-events: none;
+}
+
 .icon__wrapper:hover {
 	background-color: var(--ifm-menu-color-background-active);
 }
 
 .icon__wrapper.icon__wrapper--copied .icon__wrapper__copy {
-	fill: var(--ifm-color-primary);
+	display: none;
 }
 
-.icon__wrapper__svg {
-	width: 2rem;
-	height: 2rem;
-	pointer-events: none;
-}
-
-.icon__wrapper__copy {
+.icon__wrapper.icon__wrapper--copied .icon__wrapper__accept {
 	fill: var(--ifm-color-primary);
+	display: inline-block;
 }
 
-.icon__wrapper__copy {
+.icon__wrapper__copy,
+.icon__wrapper__accept {
 	width: 1rem;
 	height: 1rem;
 	align-self: end;
@@ -48,6 +50,12 @@
 	pointer-events: none;
 }
 
+.icon__wrapper__accept {
+	display: none;
+}
+
+
+
 .icon__wrapper__title {
 	color: var(--ifm-font-color-base);
 	text-align: center;