diff --git a/audit-ci.json b/audit-ci.json
index 9b61c65b7..69349b45f 100644
--- a/audit-ci.json
+++ b/audit-ci.json
@@ -24,6 +24,8 @@
     "GHSA-prr3-c3m5-p7q2",
     "GHSA-7hpj-7hhx-2fgx",
     "GHSA-p6mc-m468-83gw",
-    "GHSA-78xj-cgh5-2h22"
+    "GHSA-78xj-cgh5-2h22",
+    "GHSA-rm97-x556-q36h",
+    "GHSA-cxjh-pqwp-8mfp"
   ]
 }
diff --git a/gatsby-config.js b/gatsby-config.js
index 98d28307e..27ff0204f 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -122,5 +122,32 @@ module.exports = {
       },
     },
     `gatsby-plugin-no-sourcemaps`,
+    {
+      resolve: `gatsby-plugin-robots-txt`,
+      options: {
+        host: pagesConfig.siteUrl,
+        sitemap: `${pagesConfig.siteUrl}sitemap-index.xml`,
+        policy: [{ userAgent: "*", allow: "/" }],
+      },
+    },
+    {
+      resolve: "gatsby-plugin-sitemap",
+      options: {
+        output: "/",
+        query: `
+        {
+          allSitePage {
+            edges {
+              node {
+                path
+              }
+            }
+          }
+        }`,
+        resolveSiteUrl: () => pagesConfig.siteUrl,
+        resolvePages: (data) => data.allSitePage.edges.map((edge) => edge.node),
+      },
+    },
+    `gatsby-plugin-fix-fouc`,
   ],
 };
diff --git a/package-lock.json b/package-lock.json
index 7a110c5fd..ceab6de0d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,10 +15,10 @@
         "@mdi/react": "^1.5.0",
         "@mdx-js/mdx": "^1.6.22",
         "@mdx-js/react": "^1.6.22",
-        "@ukic/docs": "^2.9.4",
+        "@ukic/docs": "^2.10.0",
         "@ukic/fonts": "^2.6.0",
-        "@ukic/react": "^2.13.0",
-        "@ukic/web-components": "^2.13.0",
+        "@ukic/react": "^2.14.0",
+        "@ukic/web-components": "^2.14.0",
         "audit-ci": "^6.6.1",
         "clsx": "^1.1.1",
         "cross-env": "^7.0.3",
@@ -28,6 +28,7 @@
         "fs-extra": "^11.1.1",
         "gatsby": "^4.2.0",
         "gatsby-plugin-catch-links": "^4.2.0",
+        "gatsby-plugin-fix-fouc": "^1.0.5",
         "gatsby-plugin-local-search": "^2.0.1",
         "gatsby-plugin-manifest": "^4.2.0",
         "gatsby-plugin-mdx": "^3.20.0",
@@ -37,7 +38,9 @@
         "gatsby-plugin-postbuild": "^3.0.2",
         "gatsby-plugin-react-helmet": "^5.2.0",
         "gatsby-plugin-react-svg": "^3.1.0",
+        "gatsby-plugin-robots-txt": "^1.8.0",
         "gatsby-plugin-sharp": "^4.2.0",
+        "gatsby-plugin-sitemap": "^6.13.1",
         "gatsby-plugin-stencil": "^0.2.0",
         "gatsby-remark-copy-linked-files": "^5.2.0",
         "gatsby-remark-images": "^6.2.0",
@@ -5963,9 +5966,9 @@
       "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
     },
     "node_modules/@stencil/core": {
-      "version": "4.12.4",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.4.tgz",
-      "integrity": "sha512-KrwoXu9J1loWSvQQReilGPkt6/dCH/x5eTBDecCBPclz7vxUM13Iw9almBIffEpurk/kaMAglH0G7sAF/A2y1A==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.13.0.tgz",
+      "integrity": "sha512-gg+gtBWekQ08mDja8GVAUHNu+rrFhQaKZDvfhnS3l/5JbYiJddTimuDPPhuc0sR0JZL1iRdJTJSa+JbvmnQ1cQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -6441,8 +6444,7 @@
     "node_modules/@types/minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
-      "dev": true
+      "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag=="
     },
     "node_modules/@types/mkdirp": {
       "version": "0.5.2",
@@ -6477,8 +6479,7 @@
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
-      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
-      "dev": true
+      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
@@ -6583,6 +6584,14 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/sax": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz",
+      "integrity": "sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
@@ -7050,9 +7059,9 @@
       }
     },
     "node_modules/@ukic/docs": {
-      "version": "2.9.4",
-      "resolved": "https://registry.npmjs.org/@ukic/docs/-/docs-2.9.4.tgz",
-      "integrity": "sha512-G+d/LyJtQZDxA/RTpDoOqay2qiGF1N6VWrg6VAoa8C2ro8+ioIPzD+4JyPlpdqBR2FtVGwEer87mEYKQOhNERA=="
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@ukic/docs/-/docs-2.10.0.tgz",
+      "integrity": "sha512-z06WK/DNuBJVHZvVaitrkMgUoWTbQbH3PtlPzwr1jmw5I55ehKLS/A6JymKopOD5/N65uValNNiyGVIKeUyeQA=="
     },
     "node_modules/@ukic/fonts": {
       "version": "2.6.0",
@@ -7060,11 +7069,11 @@
       "integrity": "sha512-sJ7wFvCWb/+dnuyGr3x3Nj4gSawEQYwTrMAjJJcCHlKPm4QL2HVpdmhsX4NybwrhVD7a3wofzCVHJ271k+VlfA=="
     },
     "node_modules/@ukic/react": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/@ukic/react/-/react-2.13.0.tgz",
-      "integrity": "sha512-6px/2U0M3/QaZO9+j39VE+wP0d9/u/6yZ2QiRJkSz2SLpsL32vYvW95ANijB24tXeo74HNe0zTu/RaS/qSOOBQ==",
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@ukic/react/-/react-2.14.0.tgz",
+      "integrity": "sha512-JNWplyvYQsiGwctA4PIxArk/VoZiR6/kgvyXJS+MCe9LAU8molKf18lsZ1oJjOvhEZqDI1uPPYPH8MUlFnFUvg==",
       "dependencies": {
-        "@ukic/web-components": "^2.13.0"
+        "@ukic/web-components": "^2.14.0"
       },
       "peerDependencies": {
         "@ukic/fonts": "^2.6.0",
@@ -7073,9 +7082,9 @@
       }
     },
     "node_modules/@ukic/web-components": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/@ukic/web-components/-/web-components-2.13.0.tgz",
-      "integrity": "sha512-waSGKutUODrZQWgcoQ0umg28mfq2rWlA3PtGQf65r3dqFU+ghDnIgnqiqvrAtKiMF36N9OEnfzs4BKeyfZDseA==",
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@ukic/web-components/-/web-components-2.14.0.tgz",
+      "integrity": "sha512-xvd9Gs4PnKCArBb/i4+kTQnRkSKl9mIt4OERd1z/jXzTT0hUC/rvB3+IUOjm31PbN0GSbuw0a6fi4yU6Sw73AA==",
       "dependencies": {
         "@popperjs/core": "^2.11.2",
         "@stencil/core": "^4.9.0"
@@ -8855,7 +8864,6 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
       "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
-      "dev": true,
       "dependencies": {
         "camelcase": "^5.3.1",
         "map-obj": "^4.0.0",
@@ -8872,7 +8880,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
       "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -10552,7 +10559,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz",
       "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==",
-      "dev": true,
       "dependencies": {
         "decamelize": "^1.1.0",
         "map-obj": "^1.0.0"
@@ -10568,7 +10574,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13980,6 +13985,17 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/gatsby-plugin-fix-fouc": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-fix-fouc/-/gatsby-plugin-fix-fouc-1.0.5.tgz",
+      "integrity": "sha512-cs1JBMWZ5St3XimEHJMyeHd66lMHQDYTJzm/zn9omBI4tliBbNh3aF0bob/xVxykPLfWJZ5H6t38QidiKTb9Vw==",
+      "dependencies": {
+        "camel-case": "^4"
+      },
+      "peerDependencies": {
+        "gatsby": "^3 || ^4 || ^5"
+      }
+    },
     "node_modules/gatsby-plugin-local-search": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-local-search/-/gatsby-plugin-local-search-2.0.1.tgz",
@@ -14605,6 +14621,18 @@
         "gatsby": "^5.0.0 || ^4.0.0 || ^3.0.0 || ^2.0.0"
       }
     },
+    "node_modules/gatsby-plugin-robots-txt": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-robots-txt/-/gatsby-plugin-robots-txt-1.8.0.tgz",
+      "integrity": "sha512-GMUIrsCPncb10wM9cuF2ZwYNN8revEolzvvizT0RzRE4NhPxsQUT4LIRE4n5IYQhbYu6oYZtfeG7YreFXmxLMw==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.9",
+        "generate-robotstxt": "^8.0.3"
+      },
+      "peerDependencies": {
+        "gatsby": "^5.0.0"
+      }
+    },
     "node_modules/gatsby-plugin-sharp": {
       "version": "4.25.1",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-4.25.1.tgz",
@@ -14683,6 +14711,25 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/gatsby-plugin-sitemap": {
+      "version": "6.13.1",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-sitemap/-/gatsby-plugin-sitemap-6.13.1.tgz",
+      "integrity": "sha512-PuBcCjpwVj7NVW/GXFgmP2NLhM5FsFV618pVGCWnLSr0cPrtJsmPtLze1PMaq148EGUGnnctl/+7VLozheQ/CA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "common-tags": "^1.8.2",
+        "minimatch": "^3.1.2",
+        "sitemap": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "gatsby": "^5.0.0-next",
+        "react": "^18.0.0 || ^0.0.0",
+        "react-dom": "^18.0.0 || ^0.0.0"
+      }
+    },
     "node_modules/gatsby-plugin-stencil": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-stencil/-/gatsby-plugin-stencil-0.2.0.tgz",
@@ -15942,6 +15989,125 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/generate-robotstxt": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/generate-robotstxt/-/generate-robotstxt-8.0.3.tgz",
+      "integrity": "sha512-iD//oAVKcHOCz9M0IiT3pyUiF2uN1qvL3qaTA8RGLz7NU7l0XVwyzd3rN+tzhB657DNUgrygXt9w8+0zkTMFrg==",
+      "dependencies": {
+        "cosmiconfig": "^6.0.0",
+        "fs-extra": "^9.0.0",
+        "ip-regex": "^4.1.0",
+        "is-absolute-url": "^3.0.3",
+        "meow": "^7.0.1",
+        "resolve-from": "^5.0.0"
+      },
+      "bin": {
+        "generate-robotstxt": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/generate-robotstxt/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/generate-robotstxt/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/generate-robotstxt/node_modules/hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+    },
+    "node_modules/generate-robotstxt/node_modules/meow": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-7.1.1.tgz",
+      "integrity": "sha512-GWHvA5QOcS412WCo8vwKDlTelGLsCGBVevQB5Kva961rmNfun0PCbv5+xta2kUMFJyR8/oWnn7ddeKdosbAPbA==",
+      "dependencies": {
+        "@types/minimist": "^1.2.0",
+        "camelcase-keys": "^6.2.2",
+        "decamelize-keys": "^1.1.0",
+        "hard-rejection": "^2.1.0",
+        "minimist-options": "4.1.0",
+        "normalize-package-data": "^2.5.0",
+        "read-pkg-up": "^7.0.1",
+        "redent": "^3.0.0",
+        "trim-newlines": "^3.0.0",
+        "type-fest": "^0.13.1",
+        "yargs-parser": "^18.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/generate-robotstxt/node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dependencies": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "node_modules/generate-robotstxt/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/generate-robotstxt/node_modules/type-fest": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/generate-robotstxt/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -16361,7 +16527,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
       "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -17139,7 +17304,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -17227,6 +17391,14 @@
       "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
       "dev": true
     },
+    "node_modules/ip-regex": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
+      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -20396,7 +20568,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -21760,7 +21931,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -21808,7 +21978,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
       "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
-      "dev": true,
       "dependencies": {
         "arrify": "^1.0.1",
         "is-plain-obj": "^1.1.0",
@@ -21822,7 +21991,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -25454,7 +25622,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
       "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-      "dev": true,
       "dependencies": {
         "@types/normalize-package-data": "^2.4.0",
         "normalize-package-data": "^2.5.0",
@@ -25469,7 +25636,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
       "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-      "dev": true,
       "dependencies": {
         "find-up": "^4.1.0",
         "read-pkg": "^5.2.0",
@@ -25486,7 +25652,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -25499,7 +25664,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -25511,7 +25675,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -25526,7 +25689,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -25538,7 +25700,6 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
       "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -25546,14 +25707,12 @@
     "node_modules/read-pkg/node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-      "dev": true
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
     "node_modules/read-pkg/node_modules/normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
       "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "dev": true,
       "dependencies": {
         "hosted-git-info": "^2.1.4",
         "resolve": "^1.10.0",
@@ -25565,7 +25724,6 @@
       "version": "5.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
       "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -25574,7 +25732,6 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
       "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -25660,7 +25817,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
       "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-      "dev": true,
       "dependencies": {
         "indent-string": "^4.0.0",
         "strip-indent": "^3.0.0"
@@ -27671,6 +27827,29 @@
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
     },
+    "node_modules/sitemap": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
+      "integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
+      "dependencies": {
+        "@types/node": "^17.0.5",
+        "@types/sax": "^1.2.1",
+        "arg": "^5.0.0",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "sitemap": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=5.6.0"
+      }
+    },
+    "node_modules/sitemap/node_modules/@types/node": {
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
+    },
     "node_modules/size-limit": {
       "version": "7.0.8",
       "resolved": "https://registry.npmjs.org/size-limit/-/size-limit-7.0.8.tgz",
@@ -27922,7 +28101,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
       "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
-      "dev": true,
       "dependencies": {
         "spdx-expression-parse": "^3.0.0",
         "spdx-license-ids": "^3.0.0"
@@ -27931,14 +28109,12 @@
     "node_modules/spdx-exceptions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
-      "dev": true
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
     },
     "node_modules/spdx-expression-parse": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
       "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
-      "dev": true,
       "dependencies": {
         "spdx-exceptions": "^2.1.0",
         "spdx-license-ids": "^3.0.0"
@@ -27947,8 +28123,7 @@
     "node_modules/spdx-license-ids": {
       "version": "3.0.16",
       "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz",
-      "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
-      "dev": true
+      "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw=="
     },
     "node_modules/split": {
       "version": "1.0.1",
@@ -28560,7 +28735,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
       "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-      "dev": true,
       "dependencies": {
         "min-indent": "^1.0.0"
       },
@@ -29343,7 +29517,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
       "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -30314,7 +30487,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
       "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "dev": true,
       "dependencies": {
         "spdx-correct": "^3.0.0",
         "spdx-expression-parse": "^3.0.0"
diff --git a/package.json b/package.json
index 126bf096a..599cb88a1 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,10 @@
     "@mdi/react": "^1.5.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@ukic/docs": "^2.9.4",
+    "@ukic/docs": "^2.10.0",
     "@ukic/fonts": "^2.6.0",
-    "@ukic/react": "^2.13.0",
-    "@ukic/web-components": "^2.13.0",
+    "@ukic/react": "^2.14.0",
+    "@ukic/web-components": "^2.14.0",
     "audit-ci": "^6.6.1",
     "clsx": "^1.1.1",
     "cross-env": "^7.0.3",
@@ -23,6 +23,7 @@
     "fs-extra": "^11.1.1",
     "gatsby": "^4.2.0",
     "gatsby-plugin-catch-links": "^4.2.0",
+    "gatsby-plugin-fix-fouc": "^1.0.5",
     "gatsby-plugin-local-search": "^2.0.1",
     "gatsby-plugin-manifest": "^4.2.0",
     "gatsby-plugin-mdx": "^3.20.0",
@@ -32,7 +33,9 @@
     "gatsby-plugin-postbuild": "^3.0.2",
     "gatsby-plugin-react-helmet": "^5.2.0",
     "gatsby-plugin-react-svg": "^3.1.0",
+    "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sharp": "^4.2.0",
+    "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-plugin-stencil": "^0.2.0",
     "gatsby-remark-copy-linked-files": "^5.2.0",
     "gatsby-remark-images": "^6.2.0",
diff --git a/src/components/AnchorNav/index.tsx b/src/components/AnchorNav/index.tsx
index 0b5460257..beb3c7a1d 100644
--- a/src/components/AnchorNav/index.tsx
+++ b/src/components/AnchorNav/index.tsx
@@ -29,7 +29,7 @@ const AnchorNav: React.FC<AnchorNavProps> = ({ allHeadings, currentPage }) => {
           }
         });
       },
-      { rootMargin: `10% 0% -80% 0%` }
+      { rootMargin: `20% 0% -70% 0%` }
     );
 
     headingIds.forEach((id) => {
diff --git a/src/components/WrappedH2/index.css b/src/components/WrappedH2/index.css
index eaa9a70a7..08fbc665c 100644
--- a/src/components/WrappedH2/index.css
+++ b/src/components/WrappedH2/index.css
@@ -6,3 +6,9 @@ ic-typography[data-class="h2"] h4 {
   display: inline-flex;
   align-items: center;
 }
+
+@media screen and (min-width: 1201px) {
+  ic-typography[data-class="h2"] h3 {
+    scroll-margin-top: 12rem;
+  }
+}
diff --git a/src/content/structured/components/badge/code.mdx b/src/content/structured/components/badge/code.mdx
index 717545ca4..666c3b480 100644
--- a/src/content/structured/components/badge/code.mdx
+++ b/src/content/structured/components/badge/code.mdx
@@ -207,6 +207,7 @@ export const snippetsInformation = [
     height="24px"
     viewBox="0 0 24 24"
     width="24px"
+    aria-label="retry"
   >
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path
@@ -235,6 +236,7 @@ export const snippetsInformation = [
       height="24px"
       viewBox="0 0 24 24"
       width="24px"
+      aria-label="retry"
     >
       <path d="M0 0h24v24H0V0z" fill="none" />
       <path
@@ -268,6 +270,7 @@ export const snippetsInformation = [
           height="24px"
           slot="badge-icon"
           viewBox="0 0 24 24"
+          aria-label="retry"
         >
           <path d="M0 0h24v24H0V0z" fill="none" />
           <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
@@ -335,6 +338,7 @@ export const snippetsNear = [
         height="24px"
         viewBox="0 0 24 24"
         width="24px"
+        aria-label="success"
       >
         <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
       </svg> 
@@ -348,6 +352,7 @@ export const snippetsNear = [
         height="24px"
         viewBox="0 0 24 24"
         width="24px"
+        aria-label="success"
       >
         <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
       </svg> 
@@ -366,6 +371,7 @@ export const snippetsNear = [
         height="24px"
         viewBox="0 0 24 24"
         width="24px"
+        aria-label="success"
       >
         <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
       </svg> 
@@ -379,6 +385,7 @@ export const snippetsNear = [
         height="24px"
         viewBox="0 0 24 24"
         width="24px"
+        aria-label="success"
       >
         <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
       </svg>
@@ -398,6 +405,7 @@ export const snippetsNear = [
             height="24px"
             slot="badge-icon"
             viewBox="0 0 24 24"
+            aria-label="success"
           >
             <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
           </SlottedSVG>
@@ -410,6 +418,7 @@ export const snippetsNear = [
             height="24px"
             slot="badge-icon"
             viewBox="0 0 24 24"
+            aria-label="success"
           >
             <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
           </SlottedSVG>
diff --git a/src/content/structured/components/buttons/code.mdx b/src/content/structured/components/buttons/code.mdx
index 9c87b93b6..c516f4ec6 100644
--- a/src/content/structured/components/buttons/code.mdx
+++ b/src/content/structured/components/buttons/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/button/code"
 
-date: "2023-10-03"
+date: "2024-03-13"
 
 title: "Button"
 
@@ -67,12 +67,14 @@ export const snippetsOtherStates = [
   {
     language: "Web component",
     snippet: `<ic-button variant="primary" disabled="true">Add to order</ic-button>
-<ic-button variant="secondary" loading="true">Loading button</ic-button>`,
+<ic-button variant="secondary" loading="true">Loading button</ic-button>
+<ic-button variant="primary" dropdown="true">Add to order</ic-button>`,
   },
   {
     language: "React",
     snippet: `<IcButton variant="primary" disabled>Add to order</IcButton>
-<IcButton variant="secondary" loading>Loading button</IcButton>`,
+<IcButton variant="secondary" loading>Loading button</IcButton>
+<IcButton variant="primary" dropdown>Add to order</IcButton>`,
   },
 ];
 
@@ -83,6 +85,9 @@ export const snippetsOtherStates = [
   <IcButton variant="secondary" loading>
     Loading button
   </IcButton>
+  <IcButton variant="primary" dropdown>
+    Add to order
+  </IcButton>
 </ComponentPreview>
 
 ### With icon
@@ -247,3 +252,86 @@ export const snippetsColour = [
     Add to order
   </IcButton>
 </ComponentPreview>
+
+### File upload
+
+export const FileUpload = () => {
+  function updateFileList(fileArray) {
+    const fileList = [];
+    Array.from(fileArray).forEach((file) => {
+      fileList.push(file.name);
+    });
+    return fileList.join(", ");
+  }
+  return (
+    <IcButton
+      variant="primary"
+      fileUpload
+      accept=".doc, text/plain, .json, .png"
+      onClick={() =>
+        document.addEventListener("icFileSelection", (event) =>
+          console.log(updateFileList(event.detail))
+        )
+      }
+    >
+      Upload File
+    </IcButton>
+  );
+};
+
+export const snippetsFileUpload = [
+  {
+    language: "Web component",
+    snippet: `<ic-button
+  variant="primary"
+  id="file-button"
+  file-upload="true"
+  accept=".doc, text/plain, .json, .png"
+>
+  Upload File
+</ic-button>
+<script>
+  var file;
+  onclick = document
+    .querySelector("#file-button")
+    .addEventListener("icFileSelection", (ev) => {
+      const fileArray = ev.detail;
+      const fileList = [];
+      Array.from(fileArray).forEach((file) => {
+        fileList.push(file.name);
+      });
+      console.log(fileList.join(", "));
+    });
+</script>`,
+  },
+  {
+    language: "React",
+    snippet: `export const FileUpload = () => {
+  function updateFileList(fileArray) {
+    const fileList = [];
+    Array.from(fileArray).forEach((file) => {
+      fileList.push(file.name);
+    });
+    return fileList.join(", ");
+  }
+  return (
+    <IcButton
+      variant="primary"
+      fileUpload
+      accept=".doc, text/plain, .json, .png"
+      onClick={(event) =>
+        document.addEventListener("icFileSelection", (event) =>
+          console.log(updateFileList(event.detail))
+        )
+      }
+    >
+      Upload File
+    </IcButton>
+  ); 
+};`,
+  },
+];
+
+<ComponentPreview snippets={snippetsFileUpload}>
+  <FileUpload />
+</ComponentPreview>
diff --git a/src/content/structured/components/toggle-buttons/code.mdx b/src/content/structured/components/toggle-buttons/code.mdx
index 69462f9bc..b3ec9fdda 100644
--- a/src/content/structured/components/toggle-buttons/code.mdx
+++ b/src/content/structured/components/toggle-buttons/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/toggle-button/code"
 
-date: "2024-02-08"
+date: "2024-03-08"
 
 title: "Toggle button"
 
@@ -19,7 +19,12 @@ tabs:
   ]
 ---
 
-import { IcToggleButton, SlottedSVG, IcBadge } from "@ukic/react";
+import {
+  IcToggleButton,
+  IcToggleButtonGroup,
+  SlottedSVG,
+  IcBadge,
+} from "@ukic/react";
 
 ## Component demo
 
@@ -54,6 +59,10 @@ export const snippetsDefault = [
 
 <ComponentDetails component="ic-toggle-button" />
 
+## Toggle button group details
+
+<ComponentDetails component="ic-toggle-button-group" />
+
 ## Variants
 
 ### Other states
@@ -233,16 +242,31 @@ export const snippetsLight = [
 export const snippetsFullWidth = [
   {
     language: "Web component",
-    snippet: `<ic-toggle-button label="Switch to oat milk" full-width="true"></ic-toggle-button>`,
+    snippet: `<ic-toggle-button-group label="Milk selection" full-width="true" select-type="single">
+  <ic-toggle-button label="Switch to oat milk" ></ic-toggle-button>
+  <ic-toggle-button label="Switch to almond milk" ></ic-toggle-button>
+  <ic-toggle-button label="Switch to coconut milk" ></ic-toggle-button>
+  <ic-toggle-button label="Switch to rice milk" ></ic-toggle-button>
+</ic-toggle-button-group>`,
   },
   {
     language: "React",
-    snippet: `<IcToggleButton label="Switch to oat milk" fullWidth />`,
+    snippet: `<IcToggleButtonGroup fullWidth selectType="single">
+  <IcToggleButton label="Switch to oat milk"/>
+  <IcToggleButton label="Switch to almond milk"/>
+  <IcToggleButton label="Switch to coconut milk"/>
+  <IcToggleButton label="Switch to rice milk"/>
+</IcToggleButtonGroup>`,
   },
 ];
 
 <ComponentPreview style={{ display: "block" }} snippets={snippetsFullWidth}>
-  <IcToggleButton label="Switch to oat milk" fullWidth="true" />
+  <IcToggleButtonGroup fullWidth selectType="single">
+    <IcToggleButton label="Switch to oat milk" />
+    <IcToggleButton label="Switch to almond milk" />
+    <IcToggleButton label="Switch to coconut milk" />
+    <IcToggleButton label="Switch to rice milk" />
+  </IcToggleButtonGroup>
 </ComponentPreview>
 
 ### Icon only
@@ -250,123 +274,118 @@ export const snippetsFullWidth = [
 export const snippetsIconOnly = [
   {
     language: "Web component",
-    snippet: `<ic-toggle-button
-    variant="icon"
-    accessible-label="Switch to oat milk"
->
-    <svg
-     xmlns="http://www.w3.org/2000/svg"
-     height="24px"
-     viewBox="0 0 24 24"
-     width="24px"
-     fill="#000000"
-    >
-        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </svg>
-</ic-toggle-button>
-<ic-toggle-button
-    variant="icon"
-    accessible-label="Switch to oat milk"
-    loading="true"
->
-    <svg
-     xmlns="http://www.w3.org/2000/svg"
-     height="24px"
-     viewBox="0 0 24 24"
-     width="24px"
-     fill="#000000"
-    >
-        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </svg>
-</ic-toggle-button>
-<ic-toggle-button
-    variant="icon"
-    accessible-label="Switch to oat milk"
-    disabled="true"
->
-    <svg
-     xmlns="http://www.w3.org/2000/svg"
-     height="24px"
-     viewBox="0 0 24 24"
-     width="24px"
-     fill="#000000"
-    >
+    snippet: `<ic-toggle-button-group label="Coffee icon variants" variant="icon">
+    <ic-toggle-button accessibleLabel="Coffee icon" variant="icon">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
         <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </svg>
-</ic-toggle-button>`,
+      </svg>
+      </ic-toggle-button>
+      <ic-toggle-button accessibleLabel="Loading coffee" variant="icon" loading="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+        </svg>
+      </ic-toggle-button>
+      <ic-toggle-button accessibleLabel="Disabled coffee" variant="icon"  disabled="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+        </svg>
+      </ic-toggle-button>
+    </ic-toggle-button-group>`,
   },
   {
     language: "React",
-    snippet: `<IcToggleButton variant="icon" accessibleLabel="Switch to oat milk">
-    <SlottedSVG
-     xmlns="http://www.w3.org/2000/svg"
-     height="24px"
-     viewBox="0 0 24 24"
-     width="24px"
-     fill="#000000"
-    >
-        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </SlottedSVG>
-</IcToggleButton>
-<IcToggleButton variant="icon" accessibleLabel="Switch to oat milk" loading>
-    <SlottedSVG
-     xmlns="http://www.w3.org/2000/svg"
-     height="24px"
-     viewBox="0 0 24 24"
-     width="24px"
-     fill="#000000"
-    >
-        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </SlottedSVG>
-</IcToggleButton>
-<IcToggleButton variant="icon" accessibleLabel="Switch to oat milk" disabled>
-    <SlottedSVG
-     xmlns="http://www.w3.org/2000/svg"
-     height="24px"
-     viewBox="0 0 24 24"
-     width="24px"
-     fill="#000000"
-    >
-        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </SlottedSVG>
-</IcToggleButton>`,
+    snippet: `<IcToggleButtonGroup label="Coffee icon variants" variant="icon">
+      <IcToggleButton variant="icon" accessibleLabel="Coffee icon">
+        <SlottedSVG
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+        </SlottedSVG>
+      </IcToggleButton>
+      <IcToggleButton variant="icon" accessibleLabel="Loading coffee" loading>
+        <SlottedSVG
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+        </SlottedSVG>
+      </IcToggleButton>
+      <IcToggleButton variant="icon" accessibleLabel="Disabled coffee" disabled>
+        <SlottedSVG
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+        </SlottedSVG>
+      </IcToggleButton>
+  </IcToggleButtonGroup>`,
   },
 ];
 
 <ComponentPreview snippets={snippetsIconOnly}>
-  <IcToggleButton variant="icon" accessibleLabel="Switch to oat milk">
-    <SlottedSVG
-      xmlns="http://www.w3.org/2000/svg"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      fill="#000000"
-    >
-      <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </SlottedSVG>
-  </IcToggleButton>
-  <IcToggleButton variant="icon" accessibleLabel="Switch to oat milk" loading>
-    <SlottedSVG
-      xmlns="http://www.w3.org/2000/svg"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      fill="#000000"
-    >
-      <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </SlottedSVG>
-  </IcToggleButton>
-  <IcToggleButton variant="icon" accessibleLabel="Switch to oat milk" disabled>
-    <SlottedSVG
-      xmlns="http://www.w3.org/2000/svg"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      fill="#000000"
-    >
-      <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </SlottedSVG>
-  </IcToggleButton>
+  <IcToggleButtonGroup label="Coffee icon variants" variant="icon">
+    <IcToggleButton variant="icon" accessibleLabel="Coffee icon">
+      <SlottedSVG
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+      </SlottedSVG>
+    </IcToggleButton>
+    <IcToggleButton variant="icon" accessibleLabel="Loading coffee" loading>
+      <SlottedSVG
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+      </SlottedSVG>
+    </IcToggleButton>
+    <IcToggleButton variant="icon" accessibleLabel="Disabled coffee" disabled>
+      <SlottedSVG
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+      </SlottedSVG>
+    </IcToggleButton>
+  </IcToggleButtonGroup>
 </ComponentPreview>
 
 ### Icon right
@@ -374,8 +393,9 @@ export const snippetsIconOnly = [
 export const snippetsIconRight = [
   {
     language: "Web component",
-    snippet: `<ic-toggle-button label="Switch to oat milk" icon-placement="right">
-    <svg
+    snippet: ` <ic-toggle-button-group label="Milk selection" icon-placement="right">
+  <ic-toggle-button label="Switch to oat milk">
+     <svg
      slot="icon"
      xmlns="http://www.w3.org/2000/svg"
      height="24px"
@@ -385,12 +405,9 @@ export const snippetsIconRight = [
     >
         <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
     </svg>
-</ic-toggle-button>`,
-  },
-  {
-    language: "React",
-    snippet: `<IcToggleButton label="Switch to oat milk" iconPlacement="right">
-    <SlottedSVG
+  </ic-toggle-button>
+  <ic-toggle-button label="Switch to almond milk">
+     <svg
      slot="icon"
      xmlns="http://www.w3.org/2000/svg"
      height="24px"
@@ -399,33 +416,15 @@ export const snippetsIconRight = [
      fill="#000000"
     >
         <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </SlottedSVG>
-</IcToggleButton>`,
+    </svg>
+  </ic-toggle-button>
+</ic-toggle-button-group>`,
   },
-];
-
-<ComponentPreview snippets={snippetsIconRight}>
+  {
+    language: "React",
+    snippet: `<IcToggleButtonGroup label="Milk selection" iconPlacement="right">  
   <IcToggleButton label="Switch to oat milk" iconPlacement="right">
     <SlottedSVG
-      slot="icon"
-      xmlns="http://www.w3.org/2000/svg"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      fill="#000000"
-    >
-      <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </SlottedSVG>
-  </IcToggleButton>
-</ComponentPreview>
-
-### Icon top
-
-export const snippetsIconTop = [
-  {
-    language: "Web component",
-    snippet: `<ic-toggle-button label="Switch to oat milk" icon-placement="top">
-    <svg
      slot="icon"
      xmlns="http://www.w3.org/2000/svg"
      height="24px"
@@ -434,12 +433,9 @@ export const snippetsIconTop = [
      fill="#000000"
     >
         <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </svg>
-</ic-toggle-button>`,
-  },
-  {
-    language: "React",
-    snippet: `<IcToggleButton label="Switch to oat milk" iconPlacement="top">
+    </SlottedSVG>
+</IcToggleButton>
+ <IcToggleButton label="Switch to almond milk" iconPlacement="right">
     <SlottedSVG
      slot="icon"
      xmlns="http://www.w3.org/2000/svg"
@@ -450,21 +446,132 @@ export const snippetsIconTop = [
     >
         <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
     </SlottedSVG>
-</IcToggleButton>`,
+  </IcToggleButton>
+</IcToggleButtonGroup>
+`,
   },
 ];
 
-<ComponentPreview snippets={snippetsIconTop}>
-  <IcToggleButton label="Switch to oat milk" iconPlacement="top">
-    <SlottedSVG
-      slot="icon"
-      xmlns="http://www.w3.org/2000/svg"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      fill="#000000"
-    >
-      <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
-    </SlottedSVG>
-  </IcToggleButton>
+<ComponentPreview snippets={snippetsIconRight}>
+  <IcToggleButtonGroup label="Milk selection" iconPlacement="right">
+    <IcToggleButton label="Switch to oat milk" iconPlacement="right">
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+      </SlottedSVG>
+    </IcToggleButton>
+    <IcToggleButton label="Switch to almond milk" iconPlacement="right">
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+      </SlottedSVG>
+    </IcToggleButton>
+  </IcToggleButtonGroup>
+</ComponentPreview>
+
+### Icon top
+
+export const snippetsIconTopGroup = [
+  {
+    language: "Web component",
+    snippet: ` <ic-toggle-button-group label="milk selection" icon-placement="top">
+    <ic-toggle-button label="Switch to oat milk" >
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+        >
+            <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+      </svg>
+    </ic-toggle-button>
+    <ic-toggle-button label="Switch to almond milk" >
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+        >
+            <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+      </svg>
+    </ic-toggle-button>s
+    </ic-toggle-button-group>
+`,
+  },
+  {
+    language: "React",
+    snippet: ` <IcToggleButtonGroup label="Milk selection" iconPlacement="top">
+    <IcToggleButton label="First toggle" iconPlacement="top">
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+      </SlottedSVG>
+    </IcToggleButton>
+    <IcToggleButton label="Second toggle" iconPlacement="top">
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+      </SlottedSVG>
+    </IcToggleButton>
+  </IcToggleButtonGroup>`,
+  },
+];
+
+<ComponentPreview snippets={snippetsIconTopGroup}>
+  <IcToggleButtonGroup label="Milk selection" iconPlacement="top">
+    <IcToggleButton label="Switch to oat milk" iconPlacement="top">
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+      </SlottedSVG>
+    </IcToggleButton>
+    <IcToggleButton label="Switch to almond milk" iconPlacement="top">
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
+      </SlottedSVG>
+    </IcToggleButton>
+  </IcToggleButtonGroup>
 </ComponentPreview>
diff --git a/src/content/structured/components/toggle-buttons/guidance.mdx b/src/content/structured/components/toggle-buttons/guidance.mdx
index f82a84676..7053d6aa5 100644
--- a/src/content/structured/components/toggle-buttons/guidance.mdx
+++ b/src/content/structured/components/toggle-buttons/guidance.mdx
@@ -3,7 +3,7 @@ path: "/components/toggle-button"
 
 navPriority: 33
 
-date: "2024-02-08"
+date: "2024-03-08"
 
 title: "Toggle button"
 
@@ -21,7 +21,7 @@ tabs:
   ]
 ---
 
-import { IcToggleButton, IcAlert } from "@ukic/react";
+import { IcToggleButton } from "@ukic/react";
 import toggleFig1 from "./images/fig-1-use-standalone-toggle-buttons-to-show-a-selection-status.png";
 import toggleFig2 from "./images/fig-2-use-toggle-button-groups-for-multiple-options.png";
 import toggleFig3 from "./images/fig-3-use-single-select-group-when-all-buttons-can-be-deselected.png";
@@ -30,12 +30,6 @@ import toggleFig5 from "./images/fig-5-dont-mix-different-appearance-options-tog
 import toggleFig6 from "./images/fig-6-use-consistent-label-between-states.png";
 import toggleFig7 from "./images/fig-7-dont-use-different-icon-positions-in-same-group.png";
 
-<IcAlert
-  heading="Coming soon"
-  message="The toggle button group functionality is in development."
-  variant="info"
-/>
-
 ## Introduction
 
 A toggle button is a type of button that shows a selection status and so is commonly used to turn a setting ‘on’ or ‘off’. It is similar to a [switch](/components/switch) but can be grouped into denser layouts like within a toolbar for example.
diff --git a/src/content/structured/styles/components/IconList/index.tsx b/src/content/structured/styles/components/IconList/index.tsx
index 4f0d721b6..6dbdebee3 100644
--- a/src/content/structured/styles/components/IconList/index.tsx
+++ b/src/content/structured/styles/components/IconList/index.tsx
@@ -59,7 +59,7 @@ import {
   mdiLaunch,
   mdiCheckCircle,
   mdiAlert,
-  mdiHelpCircle,
+  mdiHelpBox,
   mdiInformation,
   mdiImage,
   mdiPencil,
@@ -69,6 +69,7 @@ import {
   mdiArrowDown,
   mdiCloseCircle,
   mdiClose,
+  mdiCloseOctagon,
   mdiMenuDown,
   mdiMenuUp,
   mdiCheck,
@@ -142,19 +143,19 @@ const iconList: IconGroup[] = [
         library: "mdiAlert",
       },
       {
-        icon: <Icon size={ICON_SIZE} path={mdiCloseCircle} color="#D4351C" />,
+        icon: <Icon size={ICON_SIZE} path={mdiCloseOctagon} color="#D4351C" />,
         name: "Error",
-        library: "mdiCloseCircle",
+        library: "mdiCloseOctagon",
       },
       {
-        icon: <Icon size={ICON_SIZE} path={mdiInformation} color="#3170C2" />,
+        icon: <Icon size={ICON_SIZE} path={mdiInformation} color="#124DB3" />,
         name: "Information",
         library: "mdiInformation",
       },
       {
-        icon: <Icon size={ICON_SIZE} path={mdiHelpCircle} color="#6C7580" />,
+        icon: <Icon size={ICON_SIZE} path={mdiHelpBox} color="#6C7580" />,
         name: "Unknown",
-        library: "mdiHelpCircle",
+        library: "mdiHelpBox",
       },
     ],
   },