diff --git a/packages/website/build-scripts/icons-generation/index.mjs b/packages/website/build-scripts/icons-generation/index.mjs
index ca4404488d61..efcbe2395d5d 100644
--- a/packages/website/build-scripts/icons-generation/index.mjs
+++ b/packages/website/build-scripts/icons-generation/index.mjs
@@ -1,7 +1,35 @@
 import fs from "fs";
 import path from "path";
+
 let counter = 0;
 
+const SAPIconsConfig = {
+    title: "SAP Icons",
+    npmLink: "https://www.npmjs.com/package/@ui5/webcomponents-icons",
+    npmPackage: "@ui5/webcomponents-icons",
+    version: "v5",
+    dir: "icons",
+    componentName: "SAPIcons",
+};
+
+const SAPTNTIconsConfig = {
+    title: "SAP TNT Icons",
+    npmLink: "https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt",
+    npmPackage: "@ui5/webcomponents-icons-tnt",
+    version: "v3",
+    dir: "icons-tnt",
+    componentName: "SAPTNTIcons",
+};
+
+const SAPBSIconsConfig = {
+    title: "SAP Business Suite Icons",
+    npmLink: "https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite",
+    npmPackage: "@ui5/webcomponents-icons-business-suite",
+    version: "v2",
+    dir: "icons-business-suite",
+    componentName: "SAPBSIcons"
+};
+
 const replaceFirstNumber = (str) => {
     const firstLetter = str.charAt(0);
     if (!isNaN(firstLetter)) {
@@ -16,7 +44,17 @@ const capitalize = (str) => {
     const remainingLetters = str.slice(1);
     const capitalizedWord = firstLetterCap + remainingLetters;
     return capitalizedWord;
-}
+};
+
+const writeFile = (targetDir, content) => {
+    const targetPath = path.resolve(`./${targetDir}`);
+    const targetFile = path.resolve(`${targetPath}/index.js`);
+
+    if (!fs.existsSync(targetPath)) {
+        fs.mkdirSync(targetPath, { recursive: true });
+    }
+    fs.writeFileSync(targetFile, content,{ encoding:'utf8', flag:'w' });
+};
 
 const commonImports = `
 import React from 'react';
@@ -25,7 +63,14 @@ import Heading from '@theme/Heading';
 import Link from '@docusaurus/Link';
 `
 
-const _generateIconsPage = (sourceDir, collection, version) => {
+const additionalImports = `
+import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
+import AcceptSvg from "../local-cdn/local-cdn/icons/dist/v5/accept.svg";
+import PictureSvg from "../local-cdn/local-cdn/icons/dist/v5/picture.svg";
+`;
+
+
+const _generateIconsPage = (sourceDir, config) => {
     let imports = ``;
     let icons = ``;
 
@@ -36,139 +81,93 @@ const _generateIconsPage = (sourceDir, collection, version) => {
 
             const iconNameImport = `${fileNameImportName}SvgName`;
             const svgImport = `${capitalize(fileNameImportName)}Svg`;
-
-        imports += `
-import ${iconNameImport} from "../local-cdn/local-cdn/${collection}/dist/${fileName}.js";
-import ${svgImport} from "../local-cdn/local-cdn/${collection}/dist/${version}/${fileName}.svg";
-`;
+            
+            imports += `
+            import ${iconNameImport} from "../local-cdn/local-cdn/${config.dir}/dist/${fileName}.js";
+            import ${svgImport} from "../local-cdn/local-cdn/${config.dir}/dist/${config.version}/${fileName}.svg";
+            `;
 
         icons += `
-<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");
-        }, 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>`;
+        <div
+            tabIndex="-1"
+            title="Copy Icon"
+            className="icon__wrapper"
+            onClick={function(e) {
+                const target = e.target;
+
+                if (target.classList.contains("icon__button--picture") || target.classList.contains("icon__button--copy")) {
+                    const acceptSVG = document.querySelector("#${svgImport}_accept");
+                    acceptSVG?.classList.add("icon__svg--accept--visible");
+
+                    setTimeout(() => {
+                        acceptSVG.classList.remove("icon__svg--accept--visible");
+                    }, 600);
+                }
+            }}>
+    
+            <AcceptSvg id="${svgImport}_accept" className="icon__svg--accept"/>
+            <div id="${svgImport}_svg"  className="icon__wrapper__svg"><${svgImport} fill="var(--ifm-font-color-base)"/></div>
+            <span className="icon__wrapper__title">{${iconNameImport}.replace("tnt/", "").replace("business-suite/", "")}</span>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+                <button className="button button--secondary icon__button--copy"
+                    onClick={function(e) {
+                        navigator.clipboard.writeText(${iconNameImport});
+                }}>
+                    <CopySvg className="icon__svg--copy" />
+                </button>
+
+                <button className="button button--secondary icon__button--picture"
+                    onClick={function(e) {
+                        navigator.clipboard.writeText(document.querySelector("#${svgImport}_svg")?.innerHTML);
+                }}>
+                    <PictureSvg className="icon__svg--picture" />
+                </button>
+            </div>
+        </div>`;
         }
     });
 
-    return { imports, icons};
-};
-
-const generateIconsPage = (sourceDir, collection, version) => {
-   const { imports, icons} = _generateIconsPage(sourceDir, collection, version);
-
-    const content =`
-${commonImports}
-
-${imports}
-
-export default function SAPIcons() {
-    return (
-            <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 className="icon__grid">
-                    ${icons}
+    const classDef = `export default function ${config.componentName}() {
+        return (
+                <div style={{
+                        padding: "2rem 2rem",
+                    }}>
+                    
+                    <Heading as="h2" style={{ marginBottom: "0.125rem" }}>${config.title}</Heading>
+                    <Link to="${config.npmLink}">${config.npmPackage}</Link>
+    
+                    <div className="icon__grid">
+                        ${icons}
+                    </div>
                 </div>
-            </div>
-    );
-}`;
-
-    const targetPath = path.resolve(`./${collection}`);
-    const targetFile = path.resolve(`${targetPath}/index.js`);
+        );
+    }`
 
-    if (!fs.existsSync(targetPath)) {
-        fs.mkdirSync(targetPath, { recursive: true });
-    }
-    fs.writeFileSync(targetFile,content,{ encoding:'utf8', flag:'w' });
+    return { imports, classDef};
 };
 
-const generateTNTIconsPage = (sourceDir, collection, version) => {
-    const { imports, icons} = _generateIconsPage(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";
+const generateIconsPage = (sourceDir, config) => {
+    const { imports, classDef} = _generateIconsPage(sourceDir, config);
 
+    let content
+    if (config.componentName === "SAPIcons" ) {
+        content =`
+${commonImports}
 ${imports}
- 
- export default function SAPTNTIcons() {
-     return (
-             <div style={{
-                     padding: "2rem 2rem",
-                 }}>
-                 
-                 <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 className="icon__grid">
-                     ${icons}
-                 </div>
-             </div>
-     );
- }`;
- 
-     const targetPath = path.resolve(`./${collection}`);
-     const targetFile = path.resolve(`${targetPath}/index.js`);
- 
-     if (!fs.existsSync(targetPath)) {
-         fs.mkdirSync(targetPath, { recursive: true });
-     }
-     fs.writeFileSync(targetFile, content,{ encoding:'utf8', flag:'w' });
-};
-
-const generateBSIconsPage = (sourceDir, collection, version) => {
-    const { imports, icons} = _generateIconsPage(sourceDir, collection, version);
- 
-     const content =`
+${classDef}`;
+    } else {
+        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";
-
+${additionalImports}
 ${imports}
- 
- export default function SAPBSIcons() {
-     return (
-             <div style={{
-                     padding: "2rem 2rem",
-                 }}>
-                 
-                 <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 className="icon__grid">
-                     ${icons}
-                 </div>
-             </div>
-     );
- }`;
- 
-     const targetPath = path.resolve(`./${collection}`);
-     const targetFile = path.resolve(`${targetPath}/index.js`);
- 
-     if (!fs.existsSync(targetPath)) {
-         fs.mkdirSync(targetPath, { recursive: true });
-     }
-     fs.writeFileSync(targetFile, content,{ encoding:'utf8', flag:'w' });
+${classDef}`;
+    }
+   
+    writeFile(config.dir, content);
 };
 
-generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons/dist/v5"), "icons", "v5");
-generateTNTIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-tnt/dist/v3"), "icons-tnt", "v3");
-generateBSIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-business-suite/dist/v2"), "icons-business-suite", "v2");
+
+generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons/dist/v5"), SAPIconsConfig);
+generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-tnt/dist/v3"), SAPTNTIconsConfig);
+generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-business-suite/dist/v2"), SAPBSIconsConfig);
diff --git a/packages/website/src/pages/icons.css b/packages/website/src/pages/icons.css
index f72f282f727a..89ecb6159cf9 100644
--- a/packages/website/src/pages/icons.css
+++ b/packages/website/src/pages/icons.css
@@ -32,29 +32,30 @@
 	background-color: var(--ifm-menu-color-background-active);
 }
 
-.icon__wrapper.icon__wrapper--copied .icon__wrapper__copy {
-	display: none;
-}
-
-.icon__wrapper.icon__wrapper--copied .icon__wrapper__accept {
+.icon__svg--accept.icon__svg--accept--visible {
 	fill: var(--ifm-color-primary);
-	display: inline-block;
+	visibility: visible;
 }
 
-.icon__wrapper__copy,
-.icon__wrapper__accept {
+.icon__svg--copy,
+.icon__svg--accept,
+.icon__svg--picture {
 	width: 1rem;
 	height: 1rem;
 	align-self: end;
-	fill: var(--ifm-font-color-base);
 	pointer-events: none;
 }
 
-.icon__wrapper__accept {
-	display: none;
+.icon__svg--accept {
+	visibility: hidden;
 }
 
-
+[data-theme='dark'] .icon__svg--copy,
+[data-theme='dark'] .icon__svg--accept,
+[data-theme='dark'] .icon__svg--picture {
+	fill: var(--ifm-color-primary);
+}
+	
 
 .icon__wrapper__title {
 	color: var(--ifm-font-color-base);
@@ -63,8 +64,37 @@
 	word-break: break-all;
 	font-size: 0.813rem;
 	pointer-events: none;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-wrap: nowrap;
+	width: 100%;
 }
 
+.icon__button--copy,
+.icon__button--picture {
+	width: 1.5rem;
+	height: 1.5rem;
+	display: inline-flex;
+	width: 100%;
+	align-items: center;
+	justify-content: center;
+	padding: 0.25rem;
+	margin: 0.25rem;
+}
+
+[data-theme='dark'] .icon__button--copy,
+[data-theme='dark'] .icon__button--picture {
+	background-color: transparent;
+	border-color: transparent;
+}
+
+[data-theme='dark'] .icon__button--copy:hover,
+[data-theme='dark'] .icon__button--picture:hover {
+	background-color: var(--ifm-background-surface-color);
+}
+
+
+
 .segmented__button {
 	display: inline-flex;
     align-items: center;