diff --git a/docs/3-customizing/02-theme.md b/docs/3-customizing/02-theme.md
index d196b73d118c..9a104e1c3cdd 100644
--- a/docs/3-customizing/02-theme.md
+++ b/docs/3-customizing/02-theme.md
@@ -1,4 +1,4 @@
-# Custom Theming with `UI Theme Designer`
+# Custom Theming with UI Theme Designer
 
 UI5 Web Components are fully compatible with `UI Theme Designer`, a tool for building a custom theme. You can create your own theme and effortlessly integrate it in your UI5 Web Components project on HTML level. On top, this does not prevent you from switching to and from officially supported themes, while having your own.
 
diff --git a/docs/5-development/04-understanding-hbs-templates.md b/docs/5-development/04-understanding-hbs-templates.md
index bd01088d0e69..d726e90e5150 100644
--- a/docs/5-development/04-understanding-hbs-templates.md
+++ b/docs/5-development/04-understanding-hbs-templates.md
@@ -1,4 +1,4 @@
-# Understanding the Handlebars (`.hbs`) templates
+# Understanding the Handlebars (.hbs) templates
 
 The preferred way to write the renderers for UI5 Web Components (and supported directly by the build tools) is to use standard Handlebars templates with some additional custom syntax.
 
diff --git a/packages/website/build-scripts/icons-generation/index.mjs b/packages/website/build-scripts/icons-generation/index.mjs
index 542517c70609..07036beb5748 100644
--- a/packages/website/build-scripts/icons-generation/index.mjs
+++ b/packages/website/build-scripts/icons-generation/index.mjs
@@ -18,6 +18,13 @@ const capitalize = (str) => {
     return capitalizedWord;
 }
 
+const commonImports = `
+import React from 'react';
+import clsx from "clsx";
+import Heading from '@theme/Heading';
+import Link from '@docusaurus/Link';
+`
+
 const _generateIconsPage = (sourceDir, collection, version) => {
     let imports = ``;
     let icons = ``;
@@ -36,17 +43,22 @@ import ${svgImport} from "../local-cdn/local-cdn/${collection}/dist/${version}/$
 `;
 
         icons += `
-<div style={{
-    display: "flex",
-    alignItems: "center",
-    flexDirection: "column",
-    padding: "1rem",
-    backgroundColor: "var(--ifm-background-surface-color)",
-    boxShadow: "rgba(0, 0, 0, 0.15) 0px 1.5px 3px 0px", 
-    borderRadius: "0.5rem",
-}}>
-    <div style={{width: "3rem", height: "3rem"}}><${svgImport} fill="var(--ifm-font-color-base)"/></div>
-    <span style={{ color: "var(--ifm-font-color-base)", textAlign: "center", marginTop: "0.5rem", wordBreak: "break-all" }}>{${iconNameImport}}</span>
+<div
+    tabIndex="-1"
+    title="Copy the icon name"
+    className="icon__wrapper"
+    onClick={function(e) { 
+        navigator.clipboard.writeText(${iconNameImport}); 
+        const target = e.target;
+        target.classList.add("icon__wrapper--copied");
+
+        setTimeout(() => {
+            target.classList.remove("icon__wrapper--copied");
+        }, 500)
+    }}>
+    <CopySvg className="icon__wrapper__copy"/>
+    <div className="icon__wrapper__svg"><${svgImport} fill="var(--ifm-font-color-base)"/></div>
+    <span className="icon__wrapper__title">{${iconNameImport}}</span>
 </div>`;
         }
     });
@@ -58,29 +70,18 @@ const generateIconsPage = (sourceDir, collection, version) => {
    const { imports, icons} = _generateIconsPage(sourceDir, collection, version);
 
     const content =`
-import React from 'react';
-
-import Heading from '@theme/Heading';
-import Link from '@docusaurus/Link';
+${commonImports}
 
 ${imports}
 
 export default function SAPIcons() {
     return (
-            <div style={{
-                    padding: "2rem 2rem",
-                }}>
+            <div style={{ padding: "2rem 2rem" }}>
                 
                 <Heading as="h2" style={{ marginBottom: "0.125rem" }}>SAP Icons</Heading>
                 <Link to="https://www.npmjs.com/package/@ui5/webcomponents-icons">@ui5/webcomponents-icons</Link>
 
-                <div style={{
-                    display: "grid",
-                    padding: "2rem 0",
-                    gap: "2rem",
-                    rowGap: "2rem",
-                    gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))"
-                }}>
+                <div className="icon__grid">
                     ${icons}
                 </div>
             </div>
@@ -100,12 +101,10 @@ const generateTNTIconsPage = (sourceDir, collection, version) => {
     const { imports, icons} = _generateIconsPage(sourceDir, collection, version);
  
      const content =`
- import React from 'react';
- 
- import Heading from '@theme/Heading';
- import Link from '@docusaurus/Link';
- 
- ${imports}
+${commonImports}
+import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
+
+${imports}
  
  export default function SAPTNTIcons() {
      return (
@@ -116,13 +115,7 @@ const generateTNTIconsPage = (sourceDir, collection, version) => {
                  <Heading as="h2" style={{ marginBottom: "0.125rem" }}>SAP TNT Icons</Heading>
                  <Link to="https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt">@ui5/webcomponents-icons-tnt</Link>
  
-                 <div style={{
-                     display: "grid",
-                     padding: "2rem 0",
-                     gap: "2rem",
-                     rowGap: "2rem",
-                     gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))"
-                 }}>
+                 <div className="icon__grid">
                      ${icons}
                  </div>
              </div>
@@ -142,12 +135,10 @@ const generateBSIconsPage = (sourceDir, collection, version) => {
     const { imports, icons} = _generateIconsPage(sourceDir, collection, version);
  
      const content =`
- import React from 'react';
- 
- import Heading from '@theme/Heading';
- import Link from '@docusaurus/Link';
+${commonImports}
  
- ${imports}
+import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
+${imports}
  
  export default function SAPBSIcons() {
      return (
@@ -158,13 +149,7 @@ const generateBSIconsPage = (sourceDir, collection, version) => {
                  <Heading as="h2" style={{ marginBottom: "0.125rem" }}>SAP Business Suite Icons</Heading>
                  <Link to="https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite">@ui5/webcomponents-icons-business-suite</Link>
  
-                 <div style={{
-                     display: "grid",
-                     padding: "2rem 0",
-                     gap: "2rem",
-                     rowGap: "2rem",
-                     gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))"
-                 }}>
+                 <div className="icon__grid">
                      ${icons}
                  </div>
              </div>
diff --git a/packages/website/src/pages/icons.css b/packages/website/src/pages/icons.css
index 7993b869af8e..d95146a5cd96 100644
--- a/packages/website/src/pages/icons.css
+++ b/packages/website/src/pages/icons.css
@@ -1,3 +1,62 @@
+.icon__grid {
+	display: grid;
+	padding: 2rem 0;
+	gap: 2rem;
+	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+}
+
+.icon__wrapper {
+	position: relative;
+	display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 0.5rem;
+    background-color: var(--ifm-background-surface-color);
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 1.5px 3px 0px;
+    border-radius: 0.5rem;
+    cursor: pointer;
+	justify-content: center;
+}
+
+[data-theme='dark'] .icon__wrapper:hover {
+	background-color: var(--ifm-background-color);
+}
+
+.icon__wrapper:hover {
+	background-color: var(--ifm-menu-color-background-active);
+}
+
+.icon__wrapper.icon__wrapper--copied .icon__wrapper__copy {
+	fill: var(--ifm-color-primary);
+}
+
+.icon__wrapper__svg {
+	width: 2rem;
+	height: 2rem;
+	pointer-events: none;
+}
+
+.icon__wrapper__copy {
+	fill: var(--ifm-color-primary);
+}
+
+.icon__wrapper__copy {
+	width: 1rem;
+	height: 1rem;
+	align-self: end;
+	fill: var(--ifm-font-color-base);
+	pointer-events: none;
+}
+
+.icon__wrapper__title {
+	color: var(--ifm-font-color-base);
+	text-align: center;
+	margin-top: 0.5rem;
+	word-break: break-all;
+	font-size: 0.813rem;
+	pointer-events: none;
+}
+
 .segmented__button {
 	display: inline-flex;
     align-items: center;
diff --git a/packages/website/src/pages/icons.tsx b/packages/website/src/pages/icons.tsx
index 0fd2b91589ba..57668854fccb 100644
--- a/packages/website/src/pages/icons.tsx
+++ b/packages/website/src/pages/icons.tsx
@@ -28,11 +28,11 @@ const Select = ({ updateState }) => {
 
     <div
         onClick={() => { 
-          setCollection("SAP BS Icons");
-          updateState("SAP BS Icons");
+          setCollection("SAP BSuite Icons");
+          updateState("SAP BSuite Icons");
         }}
-        className={clsx("segmented__button__item", { 'segmented__button__item--active': collection === "SAP BS Icons" })}
-    >SAP BS Icons</div>
+        className={clsx("segmented__button__item", { 'segmented__button__item--active': collection === "SAP BSuite Icons" })}
+    >SAP BSuite Icons</div>
   </div>;
 };
 
@@ -40,7 +40,7 @@ const Select = ({ updateState }) => {
 const Collection = ({ currCollection }) => { 
   if (currCollection === "SAP TNT Icons") {
       return <SAPTNTIcons />
-  } else if (currCollection === "SAP BS Icons") {
+  } else if (currCollection === "SAP BSuite Icons") {
       return <SAPBSIcons />
   }