From 6c83436865020a7b3e6cb4bf4bcc80d4d2037638 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Tue, 23 Jun 2026 13:25:17 +0100
Subject: [PATCH] feat(docs): docs-native Icon component, drop
 @ably/ui/core/Icon (DX-1128)

Vendor a local Icon that renders only Ably's own glyphs (product, social,
tech, gui-prod). Heroicons are now imported directly from @heroicons/react
as components at each call site, so they tree-shake instead of going through
a name->component lookup that bundles the whole set. This keeps the custom
Icon's responsibility narrow and matches the direction for the rest of the
vendored components.
---
 .eslintignore                                 |   2 +
 .prettierignore                               |   3 +
 package.json                                  |   1 +
 src/components/Examples/ExamplesCheckbox.tsx  |   9 +-
 src/components/Examples/ExamplesFilter.tsx    |  11 +-
 src/components/Examples/ExamplesGrid.tsx      |   4 +-
 src/components/Examples/ExamplesRenderer.tsx  |   2 +-
 .../Icon/glyphs/icon-gui-ably-badge.tsx       |  14 ++
 .../icon-gui-prod-ai-transport-outline.tsx    |  14 ++
 .../icon-gui-prod-ai-transport-solid.tsx      |  14 ++
 .../glyphs/icon-gui-prod-chat-outline.tsx     |  14 ++
 .../Icon/glyphs/icon-gui-prod-chat-solid.tsx  |  14 ++
 .../icon-gui-prod-liveobjects-outline.tsx     |  14 ++
 .../icon-gui-prod-liveobjects-solid.tsx       |  14 ++
 .../glyphs/icon-gui-prod-livesync-outline.tsx |  14 ++
 .../glyphs/icon-gui-prod-livesync-solid.tsx   |  14 ++
 .../glyphs/icon-gui-prod-pubsub-outline.tsx   |  14 ++
 .../glyphs/icon-gui-prod-pubsub-solid.tsx     |  14 ++
 .../glyphs/icon-gui-prod-spaces-outline.tsx   |  14 ++
 .../glyphs/icon-gui-prod-spaces-solid.tsx     |  14 ++
 .../Icon/glyphs/icon-gui-resources.tsx        |  14 ++
 .../glyphs/icon-product-ai-transport-mono.tsx |  14 ++
 .../Icon/glyphs/icon-product-ai-transport.tsx |  14 ++
 .../Icon/glyphs/icon-product-chat-mono.tsx    |  14 ++
 .../Icon/glyphs/icon-product-chat.tsx         |  14 ++
 .../glyphs/icon-product-liveobjects-mono.tsx  |  14 ++
 .../Icon/glyphs/icon-product-liveobjects.tsx  |  14 ++
 .../glyphs/icon-product-livesync-mono.tsx     |  14 ++
 .../Icon/glyphs/icon-product-livesync.tsx     |  14 ++
 .../glyphs/icon-product-platform-mono.tsx     |  14 ++
 .../Icon/glyphs/icon-product-platform.tsx     |  14 ++
 .../Icon/glyphs/icon-product-pubsub-mono.tsx  |  14 ++
 .../Icon/glyphs/icon-product-pubsub.tsx       |  14 ++
 .../Icon/glyphs/icon-product-spaces-mono.tsx  |  14 ++
 .../Icon/glyphs/icon-product-spaces.tsx       |  14 ++
 .../Icon/glyphs/icon-social-discord-mono.tsx  |  14 ++
 .../Icon/glyphs/icon-social-github-mono.tsx   |  14 ++
 .../Icon/glyphs/icon-social-github.tsx        |  14 ++
 .../Icon/glyphs/icon-social-linkedin-mono.tsx |  14 ++
 .../glyphs/icon-social-stackoverflow-mono.tsx |  14 ++
 .../Icon/glyphs/icon-social-x-mono.tsx        |  14 ++
 .../Icon/glyphs/icon-social-youtube-mono.tsx  |  14 ++
 .../Icon/glyphs/icon-tech-android-full.tsx    |  14 ++
 .../Icon/glyphs/icon-tech-claude-mono.tsx     |  14 ++
 .../Icon/glyphs/icon-tech-csharp.tsx          |  14 ++
 .../Icon/glyphs/icon-tech-flutter.tsx         |  14 ++
 src/components/Icon/glyphs/icon-tech-go.tsx   |  14 ++
 src/components/Icon/glyphs/icon-tech-java.tsx |  14 ++
 .../Icon/glyphs/icon-tech-javascript.tsx      |  14 ++
 src/components/Icon/glyphs/icon-tech-json.tsx |  14 ++
 .../Icon/glyphs/icon-tech-kotlin.tsx          |  14 ++
 .../glyphs/icon-tech-laravel-broadcast.tsx    |  14 ++
 .../Icon/glyphs/icon-tech-nextjs.tsx          |  16 +++
 .../Icon/glyphs/icon-tech-nodejs.tsx          |  14 ++
 .../Icon/glyphs/icon-tech-objectivec.tsx      |  14 ++
 .../Icon/glyphs/icon-tech-openai.tsx          |  14 ++
 src/components/Icon/glyphs/icon-tech-php.tsx  |  14 ++
 .../Icon/glyphs/icon-tech-postgres.tsx        |  14 ++
 .../Icon/glyphs/icon-tech-python.tsx          |  14 ++
 .../Icon/glyphs/icon-tech-react.tsx           |  14 ++
 .../Icon/glyphs/icon-tech-reactnative.tsx     |  14 ++
 src/components/Icon/glyphs/icon-tech-ruby.tsx |  14 ++
 .../Icon/glyphs/icon-tech-swift.tsx           |  14 ++
 .../Icon/glyphs/icon-tech-typescript.tsx      |  14 ++
 .../Icon/glyphs/icon-tech-vercel.tsx          |  14 ++
 src/components/Icon/glyphs/icon-tech-web.tsx  |  14 ++
 src/components/Icon/glyphs/index.ts           | 126 ++++++++++++++++++
 src/components/Icon/index.tsx                 |  60 +++++++++
 src/components/Icon/set-unique-ids.ts         |  32 +++++
 src/components/Icon/types.ts                  |   5 +
 src/components/Layout/Breadcrumbs.tsx         |  28 ++--
 src/components/Layout/CopyForLLM.test.tsx     |   2 +-
 src/components/Layout/CopyForLLM.tsx          |  16 ++-
 src/components/Layout/Footer.tsx              |  51 +++----
 src/components/Layout/Header.test.tsx         |   6 +-
 src/components/Layout/Header.tsx              |  43 ++++--
 .../Layout/LanguageSelector.test.tsx          |   7 +-
 src/components/Layout/LanguageSelector.tsx    |  22 ++-
 src/components/Layout/LeftSidebar.tsx         |  18 +--
 src/components/Layout/MDXWrapper.test.tsx     |   2 +-
 src/components/Layout/ProductBar.test.tsx     |   2 +-
 src/components/Layout/ProductBar.tsx          |   7 +-
 src/components/Layout/mdx/tiles.tsx           |   4 +-
 src/components/Markdown/CodeBlock.test.tsx    |   2 +-
 src/components/Markdown/CodeBlock.tsx         |   4 +-
 src/components/Redoc/GoTopButton.tsx          |   8 +-
 src/components/SDKsPage/Card/index.tsx        |   5 +-
 src/components/blocks/dividers/Aside.tsx      |   7 +-
 .../blocks/software/Code/ApiKeyIndicator.tsx  |   4 +-
 src/data/nav/types.ts                         |   2 +-
 src/pages/docs/api/chat-rest.tsx              |   9 +-
 src/pages/docs/api/control-api.tsx            |   9 +-
 src/pages/docs/api/liveobjects-rest.tsx       |   9 +-
 src/templates/examples.tsx                    |   4 +-
 94 files changed, 1206 insertions(+), 148 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 src/components/Icon/glyphs/icon-gui-ably-badge.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-ai-transport-outline.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-ai-transport-solid.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-chat-outline.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-chat-solid.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-liveobjects-outline.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-liveobjects-solid.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-livesync-outline.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-livesync-solid.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-pubsub-outline.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-pubsub-solid.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-spaces-outline.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-prod-spaces-solid.tsx
 create mode 100644 src/components/Icon/glyphs/icon-gui-resources.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-ai-transport-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-ai-transport.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-chat-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-chat.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-liveobjects-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-liveobjects.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-livesync-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-livesync.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-platform-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-platform.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-pubsub-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-pubsub.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-spaces-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-product-spaces.tsx
 create mode 100644 src/components/Icon/glyphs/icon-social-discord-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-social-github-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-social-github.tsx
 create mode 100644 src/components/Icon/glyphs/icon-social-linkedin-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-social-stackoverflow-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-social-x-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-social-youtube-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-android-full.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-claude-mono.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-csharp.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-flutter.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-go.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-java.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-javascript.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-json.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-kotlin.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-laravel-broadcast.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-nextjs.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-nodejs.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-objectivec.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-openai.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-php.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-postgres.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-python.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-react.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-reactnative.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-ruby.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-swift.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-typescript.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-vercel.tsx
 create mode 100644 src/components/Icon/glyphs/icon-tech-web.tsx
 create mode 100644 src/components/Icon/glyphs/index.ts
 create mode 100644 src/components/Icon/index.tsx
 create mode 100644 src/components/Icon/set-unique-ids.ts
 create mode 100644 src/components/Icon/types.ts

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000000..f7ec20a985
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+# Icon glyphs — generated via SVGR from @ably/ui's SVG sources (DX-1128)
+src/components/Icon/glyphs/
diff --git a/.prettierignore b/.prettierignore
index f8dfafd431..2ceb138a62 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -9,3 +9,6 @@ data/onPostBuild/__fixtures__/*.mdx
 
 # Vendored @ably/ui design tokens, reset and component CSS (DX-1128) - do not reformat
 src/styles/ui/
+
+# Icon glyphs — generated via SVGR from @ably/ui's SVG sources (DX-1128), do not reformat
+src/components/Icon/glyphs/
diff --git a/package.json b/package.json
index 6e322c5409..66340d43c3 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@codesandbox/sandpack-react": "^2.20.0",
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@gfx/zopfli": "^1.0.15",
+    "@heroicons/react": "^2.2.0",
     "@mdx-js/react": "^2.3.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
diff --git a/src/components/Examples/ExamplesCheckbox.tsx b/src/components/Examples/ExamplesCheckbox.tsx
index 1b756abe85..31871d63bf 100644
--- a/src/components/Examples/ExamplesCheckbox.tsx
+++ b/src/components/Examples/ExamplesCheckbox.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Icon from '@ably/ui/core/Icon';
 import cn from 'src/utilities/cn';
+import { CheckIcon } from '@heroicons/react/24/outline';
 
 const ExamplesCheckbox = ({
   label,
@@ -35,10 +35,9 @@ const ExamplesCheckbox = ({
         data-ui-checkbox-styled=""
         className={cn(['ui-checkbox-styled', disabled && '!border-neutral-800 !bg-orange-600'])}
       >
-        <Icon
-          size="1rem"
-          name="icon-gui-check-outline"
-          additionalCSS={cn(['ui-checkbox-styled-tick cursor-pointer', disabled && 'text-neutral-000'])}
+        <CheckIcon
+          className={cn('size-[1rem]', cn(['ui-checkbox-styled-tick cursor-pointer', disabled && 'text-neutral-000']))}
+          aria-hidden
         />
       </div>
       <label htmlFor={name} className="ui-text-p4 text-neutral-900">
diff --git a/src/components/Examples/ExamplesFilter.tsx b/src/components/Examples/ExamplesFilter.tsx
index fad7c32ba1..cee33349d6 100644
--- a/src/components/Examples/ExamplesFilter.tsx
+++ b/src/components/Examples/ExamplesFilter.tsx
@@ -1,6 +1,5 @@
 import React, { ChangeEvent, Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import Icon from '@ably/ui/core/Icon';
 import { Input } from 'src/components/ui/Input';
 import { products } from '../../data/examples';
 import Button from '@ably/ui/core/Button';
@@ -11,6 +10,7 @@ import { SelectedFilters } from './ExamplesContent';
 import { useOnClickOutside } from 'src/hooks/use-on-click-outside';
 import { navigate } from 'gatsby';
 import { ProductName } from '@ably/ui/core/ProductTile/data';
+import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
 
 const ExamplesFilter = ({
   selected,
@@ -113,10 +113,9 @@ const ExamplesFilter = ({
   return (
     <>
       <div className="relative w-full">
-        <Icon
-          name="icon-gui-magnifying-glass-outline"
-          size="16px"
-          additionalCSS="absolute left-3 top-1/2 -translate-y-1/2 z-10 text-neutral-600 dark:text-neutral-700 pointer-events-none"
+        <MagnifyingGlassIcon
+          className="size-[16px] absolute left-3 top-1/2 -translate-y-1/2 z-10 text-neutral-600 dark:text-neutral-700 pointer-events-none"
+          aria-hidden
         />
         <Input
           type="search"
@@ -154,7 +153,7 @@ const ExamplesFilter = ({
         <div className="flex justify-between items-center sm:hidden h-16 px-4 py-2 bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 rounded-t-2xl sm:rounded-none">
           <p className="ui-text-p1 font-bold text-neutral-1300 dark:text-neutral-000">Filters</p>
           <button onClick={closeFilterMenu} aria-label="Close filter menu">
-            <Icon name="icon-gui-x-mark-outline" size="24px" />
+            <XMarkIcon className="size-[24px]" aria-hidden />
           </button>
         </div>
         {filters.map(({ key, selected, handleSelect, data }) => (
diff --git a/src/components/Examples/ExamplesGrid.tsx b/src/components/Examples/ExamplesGrid.tsx
index 595b1c1898..6f1ab43e1e 100644
--- a/src/components/Examples/ExamplesGrid.tsx
+++ b/src/components/Examples/ExamplesGrid.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import Badge from '@ably/ui/core/Badge';
-import Icon from '@ably/ui/core/Icon';
-import { IconName } from '@ably/ui/core/Icon/types';
+import Icon from 'src/components/Icon';
+import { IconName } from 'src/components/Icon/types';
 import { ProductName, products as dataProducts } from '@ably/ui/core/ProductTile/data';
 import cn from 'src/utilities/cn';
 import { Image, ImageProps } from '../Image';
diff --git a/src/components/Examples/ExamplesRenderer.tsx b/src/components/Examples/ExamplesRenderer.tsx
index 79f25aec59..896c39a6ff 100644
--- a/src/components/Examples/ExamplesRenderer.tsx
+++ b/src/components/Examples/ExamplesRenderer.tsx
@@ -5,7 +5,7 @@ import { CodeEditor } from 'src/components/CodeEditor';
 import { LanguageKey } from 'src/data/languages/types';
 import { ExampleFiles, ExampleWithContent } from 'src/data/examples/types';
 import { updateAblyConnectionKey } from 'src/utilities/update-ably-connection-keys';
-import { IconName } from '@ably/ui/core/Icon/types';
+import { IconName } from 'src/components/Icon/types';
 import SegmentedControl from '@ably/ui/core/SegmentedControl';
 import dotGrid from './images/dot-grid.svg';
 import cn from 'src/utilities/cn';
diff --git a/src/components/Icon/glyphs/icon-gui-ably-badge.tsx b/src/components/Icon/glyphs/icon-gui-ably-badge.tsx
new file mode 100644
index 0000000000..0b4294b82c
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-ably-badge.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiAblyBadge = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M2.77 19.615 11.849 3H9.4L1 18.373zm18.282 0L11.975 3h2.449l8.399 15.373zm-9.14-6.962 9.014 7.06L19.086 21l-7.174-5.617L4.737 21l-1.84-1.288z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiAblyBadge);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-ai-transport-outline.tsx b/src/components/Icon/glyphs/icon-gui-prod-ai-transport-outline.tsx
new file mode 100644
index 0000000000..c2903799fb
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-ai-transport-outline.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdAiTransportOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.307} d="M11.498 1.016c.334 0 .628.221.72.543l.811 2.841A3.74 3.74 0 0 0 15.6 6.971l2.841.812a.749.749 0 0 1 0 1.44l-2.84.811a3.74 3.74 0 0 0-2.572 2.572l-.812 2.84a.749.749 0 0 1-1.44 0l-.811-2.84a3.74 3.74 0 0 0-2.571-2.572l-2.841-.811a.749.749 0 0 1 0-1.44l2.84-.812a3.74 3.74 0 0 0 2.572-2.57l.812-2.842a.75.75 0 0 1 .72-.543" clipRule="evenodd" /><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.307} d="M7.455 14.642 3.56 18.536M5.059 12.995l-2.097 2.097" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdAiTransportOutline);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-ai-transport-solid.tsx b/src/components/Icon/glyphs/icon-gui-prod-ai-transport-solid.tsx
new file mode 100644
index 0000000000..72e5f2a14f
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-ai-transport-solid.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdAiTransportSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#FF5416" d="M19.638 8.502c0 .626-.415 1.177-1.017 1.349l-2.841.812a3.09 3.09 0 0 0-2.122 2.121l-.812 2.842a1.402 1.402 0 0 1-2.697 0l-.812-2.841a3.09 3.09 0 0 0-2.121-2.122L4.374 9.85a1.402 1.402 0 0 1 0-2.697l2.842-.812A3.09 3.09 0 0 0 9.337 4.22l.812-2.841a1.402 1.402 0 0 1 2.697 0l.812 2.841a3.09 3.09 0 0 0 2.122 2.122l2.841.812a1.4 1.4 0 0 1 1.017 1.348M6.993 14.18a.653.653 0 1 1 .924.924l-3.894 3.893a.653.653 0 0 1-.924-.924zM4.597 12.533a.653.653 0 1 1 .924.924l-2.097 2.096a.653.653 0 1 1-.924-.924z" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdAiTransportSolid);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-chat-outline.tsx b/src/components/Icon/glyphs/icon-gui-prod-chat-outline.tsx
new file mode 100644
index 0000000000..e72079a720
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-chat-outline.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdChatOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeWidth={1.5} d="M7 3h10a3.333 3.333 0 0 1 3.333 3.333v12.402c0 .869-1.031 1.324-1.673.739l-3.802-3.467a.67.67 0 0 0-.45-.174H7A3.333 3.333 0 0 1 3.667 12.5V6.333A3.333 3.333 0 0 1 7 3Z" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdChatOutline);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-chat-solid.tsx b/src/components/Icon/glyphs/icon-gui-prod-chat-solid.tsx
new file mode 100644
index 0000000000..2096488096
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-chat-solid.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdChatSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M2.917 6.333A4.083 4.083 0 0 1 7 2.25h10a4.083 4.083 0 0 1 4.083 4.083v12.402c0 1.52-1.805 2.318-2.929 1.293l-3.778-3.445H7A4.083 4.083 0 0 1 2.917 12.5z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdChatSolid);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-liveobjects-outline.tsx b/src/components/Icon/glyphs/icon-gui-prod-liveobjects-outline.tsx
new file mode 100644
index 0000000000..d86cd022e0
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-liveobjects-outline.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdLiveobjectsOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeLinecap="round" strokeWidth={1.5} d="M14.038 3h2.886A4.076 4.076 0 0 1 21 7.075v2.887M9.962 3H7.075A4.075 4.075 0 0 0 3 7.075v2.887m0 4.076v2.886A4.076 4.076 0 0 0 7.075 21h2.887M21 14.038v2.886A4.076 4.076 0 0 1 16.924 21h-2.886" /><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="m8.434 12.34 2.887 2.887 4.415-6.453" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdLiveobjectsOutline);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-liveobjects-solid.tsx b/src/components/Icon/glyphs/icon-gui-prod-liveobjects-solid.tsx
new file mode 100644
index 0000000000..fba1d734ba
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-liveobjects-solid.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdLiveobjectsSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M7 2a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5zm9.355 7.197a.75.75 0 0 0-1.238-.847l-3.905 5.707-2.248-2.248a.75.75 0 1 0-1.06 1.06l2.886 2.888a.75.75 0 0 0 1.15-.107z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdLiveobjectsSolid);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-livesync-outline.tsx b/src/components/Icon/glyphs/icon-gui-prod-livesync-outline.tsx
new file mode 100644
index 0000000000..4a88e6b9de
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-livesync-outline.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdLivesyncOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeLinecap="round" strokeWidth={1.5} d="M19.703 20H12v-5.884c0-.125.143-.196.242-.12l7.552 5.733a.151.151 0 0 1-.091.271ZM4 10.189v3.773A6.04 6.04 0 0 0 10.038 20H12M4.297 4H12v5.884a.151.151 0 0 1-.242.12L4.206 4.272A.15.15 0 0 1 4.297 4ZM20 13.812v-3.774A6.04 6.04 0 0 0 13.962 4H12" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdLivesyncOutline);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-livesync-solid.tsx b/src/components/Icon/glyphs/icon-gui-prod-livesync-solid.tsx
new file mode 100644
index 0000000000..476a363772
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-livesync-solid.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdLivesyncSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M20 14.561a.75.75 0 0 1-.75-.75v-3.773a5.29 5.29 0 0 0-5.288-5.288H12.75v5.134a.9.9 0 0 1-1.446.718L3.753 4.868c-.688-.522-.319-1.618.544-1.618h9.665a6.79 6.79 0 0 1 6.788 6.788v3.773a.75.75 0 0 1-.75.75M4 9.438a.75.75 0 0 1 .75.75v3.774a5.29 5.29 0 0 0 5.288 5.288h1.212v-5.134a.901.901 0 0 1 1.446-.718l7.551 5.733c.688.523.319 1.619-.544 1.619h-9.665a6.79 6.79 0 0 1-6.788-6.788v-3.774a.75.75 0 0 1 .75-.75" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdLivesyncSolid);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-pubsub-outline.tsx b/src/components/Icon/glyphs/icon-gui-prod-pubsub-outline.tsx
new file mode 100644
index 0000000000..e79781878c
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-pubsub-outline.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdPubsubOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeWidth={1.5} d="M10.994 3.328 4.106 14.404a.692.692 0 0 0 .587 1.057h7.235c.191 0 .346.155.346.347v4.499c0 .696.913.956 1.28.365l6.889-11.076a.692.692 0 0 0-.588-1.057H12.62a.346.346 0 0 1-.346-.347V3.694c0-.697-.912-.957-1.28-.366Z" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdPubsubOutline);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-pubsub-solid.tsx b/src/components/Icon/glyphs/icon-gui-prod-pubsub-solid.tsx
new file mode 100644
index 0000000000..d4c3d0cf94
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-pubsub-solid.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdPubsubSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M10.357 2.932c.766-1.232 2.667-.69 2.667.762v4.095h6.831a1.442 1.442 0 0 1 1.225 2.204L14.19 21.068c-.766 1.232-2.667.69-2.667-.761v-4.095h-6.83a1.442 1.442 0 0 1-1.225-2.204z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdPubsubSolid);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-spaces-outline.tsx b/src/components/Icon/glyphs/icon-gui-prod-spaces-outline.tsx
new file mode 100644
index 0000000000..17faeab1a2
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-spaces-outline.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdSpacesOutline = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeWidth={1.5} d="M8.262 19.89 4.292 5.543a1.018 1.018 0 0 1 1.252-1.252l14.345 3.97c.941.26 1.011 1.568.104 1.928l-6.475 2.567a1.36 1.36 0 0 0-.761.761l-2.567 6.475c-.36.907-1.667.837-1.928-.104Z" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdSpacesOutline);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-prod-spaces-solid.tsx b/src/components/Icon/glyphs/icon-gui-prod-spaces-solid.tsx
new file mode 100644
index 0000000000..5eb80f9f1c
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-prod-spaces-solid.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiProdSpacesSolid = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" d="M3.569 5.744C3.203 4.42 4.42 3.203 5.744 3.57l14.345 3.97c1.634.453 1.756 2.723.18 3.348l-6.474 2.567a.6.6 0 0 0-.34.34l-2.568 6.476c-.625 1.575-2.895 1.453-3.347-.18z" /></svg>;
+const ForwardRef = forwardRef(IconGuiProdSpacesSolid);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-gui-resources.tsx b/src/components/Icon/glyphs/icon-gui-resources.tsx
new file mode 100644
index 0000000000..8daa79f52e
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-gui-resources.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconGuiResources = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M5 1.5c-.69 0-1.25.56-1.25 1.25v1H5a.75.75 0 0 1 0 1.5H3.75v1.5H5a.75.75 0 0 1 0 1.5H3.75v1.5H5a.75.75 0 0 1 0 1.5H3.75v1.5H5a.75.75 0 0 1 0 1.5H3.75v1.5H5a.75.75 0 0 1 0 1.5H3.75v1.5H5a.75.75 0 0 1 0 1.5H3.75v1c0 .69.56 1.25 1.25 1.25h13.5c.69 0 1.25-.56 1.25-1.25v-1.5H12A2.75 2.75 0 0 1 9.25 17v-5A2.75 2.75 0 0 1 12 9.25h7.75v-5.5A2.25 2.25 0 0 0 17.5 1.5zM2.25 2.75v1H1a.75.75 0 0 0 0 1.5h1.25v1.5H1a.75.75 0 0 0 0 1.5h1.25v1.5H1a.75.75 0 0 0 0 1.5h1.25v1.5H1a.75.75 0 0 0 0 1.5h1.25v1.5H1a.75.75 0 0 0 0 1.5h1.25v1.5H1a.75.75 0 0 0 0 1.5h1.25v1A2.75 2.75 0 0 0 5 24h13.5a2.75 2.75 0 0 0 2.75-2.75v-1.511A2.75 2.75 0 0 0 23.75 17v-5a2.75 2.75 0 0 0-2.5-2.739V3.75A3.75 3.75 0 0 0 17.5 0H5a2.75 2.75 0 0 0-2.75 2.75m18.25 8H12c-.69 0-1.25.56-1.25 1.25v5c0 .69.56 1.25 1.25 1.25h9c.69 0 1.25-.56 1.25-1.25v-5c0-.69-.56-1.25-1.25-1.25zm-8-6.5a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-3a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm1.5 9.508 1.975 1.241L15.5 15.74zm2.542 2.066a.97.97 0 0 0 0-1.65l-2.024-1.272c-.641-.402-1.518.034-1.518.825v2.545c0 .79.877 1.227 1.518.824z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconGuiResources);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-ai-transport-mono.tsx b/src/components/Icon/glyphs/icon-product-ai-transport-mono.tsx
new file mode 100644
index 0000000000..e895366d11
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-ai-transport-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductAiTransportMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={6} d="M74 4a5 5 0 0 1 4.808 3.626l5.42 18.975a25 25 0 0 0 17.171 17.17l18.975 5.421a5 5 0 0 1 0 9.616l-18.975 5.42A25 25 0 0 0 84.229 81.4l-5.421 18.975a5 5 0 0 1-9.616 0l-5.42-18.975A25 25 0 0 0 46.6 64.229l-18.975-5.421a5 5 0 0 1 0-9.616l18.975-5.42A25 25 0 0 0 63.771 26.6l5.421-18.975A5 5 0 0 1 74 4" clipRule="evenodd" /><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={6} d="m47 95-26 26M31 84 17 98" /></svg>;
+const ForwardRef = forwardRef(IconProductAiTransportMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-ai-transport.tsx b/src/components/Icon/glyphs/icon-product-ai-transport.tsx
new file mode 100644
index 0000000000..1a8968ff0f
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-ai-transport.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductAiTransport = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_transport" x1={74} x2={74} y1={4} y2={104} gradientUnits="userSpaceOnUse"><stop stopColor="#FF5416" /><stop offset={1} stopColor="#FF2739" /></linearGradient></defs><path fill="url(#paint0_linear_transport)" fillRule="evenodd" d="M74 4a5 5 0 0 1 4.808 3.626l5.42 18.975a25 25 0 0 0 17.171 17.17l18.975 5.421a5 5 0 0 1 0 9.616l-18.975 5.42A25 25 0 0 0 84.229 81.4l-5.421 18.975a5 5 0 0 1-9.616 0l-5.42-18.975A25 25 0 0 0 46.6 64.229l-18.975-5.421a5 5 0 0 1 0-9.616l18.975-5.42A25 25 0 0 0 63.771 26.6l5.421-18.975A5 5 0 0 1 74 4" clipRule="evenodd" /><path stroke="url(#paint0_linear_transport)" strokeLinecap="round" strokeLinejoin="round" strokeWidth={6} d="m47 95-26 26M31 84 17 98" /></svg>;
+const ForwardRef = forwardRef(IconProductAiTransport);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-chat-mono.tsx b/src/components/Icon/glyphs/icon-product-chat-mono.tsx
new file mode 100644
index 0000000000..21376882bd
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-chat-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductChatMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeWidth={6} d="M38 11h52c13.255 0 24 10.745 24 24v70.41c0 5.213-6.19 7.946-10.043 4.434l-22.812-20.8A4 4 0 0 0 78.45 88H38c-13.255 0-24-10.745-24-24V35c0-13.255 10.745-24 24-24Z" /></svg>;
+const ForwardRef = forwardRef(IconProductChatMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-chat.tsx b/src/components/Icon/glyphs/icon-product-chat.tsx
new file mode 100644
index 0000000000..2d03969370
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-chat.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductChat = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_3636_438" x1={64} x2={64} y1={29.85} y2={109.883} gradientUnits="userSpaceOnUse"><stop stopColor="#FF5416" /><stop offset={1} stopColor="#FF2739" /></linearGradient></defs><path fill="url(#paint0_linear_3636_438)" fillRule="evenodd" d="M11.5 35c0-12.426 10.074-22.5 22.5-22.5h60c12.426 0 22.5 10.074 22.5 22.5v74.41c0 7.385-8.77 11.257-14.227 6.281l-22.812-20.8a1.5 1.5 0 0 0-1.01-.391H34c-12.426 0-22.5-10.074-22.5-22.5z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconProductChat);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-liveobjects-mono.tsx b/src/components/Icon/glyphs/icon-product-liveobjects-mono.tsx
new file mode 100644
index 0000000000..f057cfc13b
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-liveobjects-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductLiveobjectsMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<g stroke="currentColor" strokeLinecap="round" strokeWidth={6}><path d="M76 11h17c13.255 0 24 10.745 24 24v17M52 11H35c-13.255 0-24 10.745-24 24v17m0 24v17c0 13.255 10.745 24 24 24h17m65-41v17c0 13.255-10.745 24-24 24H76" /><path strokeLinejoin="round" d="m43 66 17 17 26-38" /></g></svg>;
+const ForwardRef = forwardRef(IconProductLiveobjectsMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-liveobjects.tsx b/src/components/Icon/glyphs/icon-product-liveobjects.tsx
new file mode 100644
index 0000000000..e7f3d4a715
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-liveobjects.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductLiveobjects = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_3807_520" x1={64} x2={64} y1={27.103} y2={110.608} gradientUnits="userSpaceOnUse"><stop stopColor="#FF5416" /><stop offset={1} stopColor="#FF2739" /></linearGradient></defs><rect width={110} height={110} x={9} y={9} fill="url(#paint0_linear_3807_520)" rx={26} /><path stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth={5} d="m43 66 17 17 26-38" /></svg>;
+const ForwardRef = forwardRef(IconProductLiveobjects);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-livesync-mono.tsx b/src/components/Icon/glyphs/icon-product-livesync-mono.tsx
new file mode 100644
index 0000000000..f6e03f4052
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-livesync-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductLivesyncMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeLinecap="round" strokeWidth={6} d="M115.029 117H64V78.015a1 1 0 0 1 1.605-.797l50.029 37.986c.763.579.353 1.796-.605 1.796ZM11 52v25c0 22.091 17.909 40 40 40h13M12.97 11H64v38.985a1 1 0 0 1-1.605.797L12.366 12.797c-.763-.58-.353-1.797.605-1.797ZM117 76V51c0-22.091-17.909-40-40-40H64" /></svg>;
+const ForwardRef = forwardRef(IconProductLivesyncMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-livesync.tsx b/src/components/Icon/glyphs/icon-product-livesync.tsx
new file mode 100644
index 0000000000..a7a635534a
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-livesync.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductLivesync = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_3807_387" x1={64} x2={64} y1={101.232} y2={16.969} gradientUnits="userSpaceOnUse"><stop stopColor="#FF5416" /><stop offset={1} stopColor="#FF2739" /></linearGradient></defs><path fill="url(#paint0_linear_3807_387)" fillRule="evenodd" d="M13.5 52a2.5 2.5 0 0 0-5 0v25c0 23.472 19.028 42.5 42.5 42.5h64.029c3.353 0 4.787-4.26 2.117-6.288l-50.03-37.985c-2.304-1.75-5.616-.106-5.616 2.788V114.5H51c-20.71 0-37.5-16.79-37.5-37.5zm53-2.015c0 2.894-3.312 4.538-5.617 2.788L10.854 14.788C8.184 12.76 9.618 8.5 12.971 8.5H77c23.472 0 42.5 19.028 42.5 42.5v25a2.5 2.5 0 1 1-5 0V51c0-20.71-16.79-37.5-37.5-37.5H66.5z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconProductLivesync);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-platform-mono.tsx b/src/components/Icon/glyphs/icon-product-platform-mono.tsx
new file mode 100644
index 0000000000..7edf5726f6
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-platform-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductPlatformMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} fill="none" viewBox="0 0 20 20" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M5.358 8.125 1.874 10l3.483 1.875m0-3.75 4.642 2.5 4.643-2.5m-9.285 0L1.874 6.25 10 1.875l8.125 4.375-3.482 1.875m-9.285 3.75L1.874 13.75 10 18.125l8.125-4.375-3.482-1.875m-9.285 0 4.642 2.5 4.643-2.5m0-3.75L18.125 10l-3.482 1.875" /></svg>;
+const ForwardRef = forwardRef(IconProductPlatformMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-platform.tsx b/src/components/Icon/glyphs/icon-product-platform.tsx
new file mode 100644
index 0000000000..aafda88bbb
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-platform.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductPlatform = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} fill="none" viewBox="0 0 20 20" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#ff5416" d="M9.703 1.325a.63.63 0 0 1 .594 0L18.422 5.7a.624.624 0 0 1 0 1.1l-8.126 4.375a.63.63 0 0 1-.593 0L1.578 6.8a.625.625 0 0 1 0-1.1z" /><path fill="#ff5416" d="m2.72 8.835 6.39 3.44a1.88 1.88 0 0 0 1.78 0l6.39-3.44 1.14.615a.625.625 0 0 1 0 1.1l-8.124 4.375a.63.63 0 0 1-.592 0L1.58 10.55a.626.626 0 0 1 0-1.1z" /><path fill="#ff5416" d="m9.11 16.026-6.39-3.442-1.14.616a.625.625 0 0 0 0 1.1l8.124 4.375c.184.1.408.1.592 0L18.42 14.3a.626.626 0 0 0 0-1.1l-1.142-.615-6.39 3.442a1.88 1.88 0 0 1-1.778-.001" /></svg>;
+const ForwardRef = forwardRef(IconProductPlatform);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-pubsub-mono.tsx b/src/components/Icon/glyphs/icon-product-pubsub-mono.tsx
new file mode 100644
index 0000000000..396a952a2d
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-pubsub-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductPubsubMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeWidth={6} d="M56.604 13.893 16.802 77.888C15.145 80.552 17.061 84 20.2 84H62a2 2 0 0 1 2 2v25.995c0 4.023 5.272 5.529 7.397 2.112l39.802-63.994c1.657-2.665-.259-6.113-3.397-6.113H66a2 2 0 0 1-2-2V16.005c0-4.023-5.271-5.529-7.396-2.112Z" /></svg>;
+const ForwardRef = forwardRef(IconProductPubsubMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-pubsub.tsx b/src/components/Icon/glyphs/icon-product-pubsub.tsx
new file mode 100644
index 0000000000..185b7a9ef4
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-pubsub.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductPubsub = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_3807_142" x1={64} x2={64} y1={27.434} y2={110.189} gradientUnits="userSpaceOnUse"><stop stopColor="#FF5416" /><stop offset={1} stopColor="#FF2739" /></linearGradient></defs><path fill="url(#paint0_linear_3807_142)" fillRule="evenodd" d="M54.48 12.572c3.453-5.551 12.02-3.105 12.02 3.433V41.5h41.302c5.099 0 8.212 5.603 5.519 9.933L73.52 115.428c-3.453 5.551-12.02 3.105-12.02-3.433V86.5H20.198c-5.099 0-8.212-5.603-5.52-9.933z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconProductPubsub);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-spaces-mono.tsx b/src/components/Icon/glyphs/icon-product-spaces-mono.tsx
new file mode 100644
index 0000000000..4c6c28b312
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-spaces-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductSpacesMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke="currentColor" strokeWidth={6} d="m41.23 109.769-23.404-84.56c-1.244-4.494 2.889-8.627 7.383-7.383l84.56 23.405c5.545 1.535 5.96 9.239.611 11.36L72.213 67.726a8 8 0 0 0-4.487 4.487L52.59 110.38c-2.121 5.349-9.825 4.934-11.36-.611Z" /></svg>;
+const ForwardRef = forwardRef(IconProductSpacesMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-product-spaces.tsx b/src/components/Icon/glyphs/icon-product-spaces.tsx
new file mode 100644
index 0000000000..3c996e0360
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-product-spaces.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconProductSpaces = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={128} height={128} fill="none" viewBox="0 0 128 128" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_3807_221" x1={65.785} x2={65.785} y1={31.716} y2={108.821} gradientUnits="userSpaceOnUse"><stop stopColor="#FF5416" /><stop offset={1} stopColor="#FF2739" /></linearGradient></defs><path fill="url(#paint0_linear_3807_221)" d="M15.318 25.777c-1.762-6.366 4.093-12.221 10.46-10.46l84.559 23.406c7.856 2.174 8.443 13.088.866 16.093L73.036 69.951a5.5 5.5 0 0 0-3.085 3.085l-15.135 38.167c-3.005 7.577-13.919 6.99-16.093-.866z" /></svg>;
+const ForwardRef = forwardRef(IconProductSpaces);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-social-discord-mono.tsx b/src/components/Icon/glyphs/icon-social-discord-mono.tsx
new file mode 100644
index 0000000000..33290cd478
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-social-discord-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconSocialDiscordMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" d="M20.317 4.607a19.6 19.6 0 0 0-4.885-1.542.074.074 0 0 0-.079.038c-.21.382-.444.88-.608 1.271a18 18 0 0 0-5.487 0c-.163-.4-.406-.89-.617-1.271a.08.08 0 0 0-.079-.038c-1.714.3-3.354.827-4.885 1.542a.07.07 0 0 0-.032.028C.533 9.364-.32 13.976.099 18.532a.08.08 0 0 0 .031.057 19.8 19.8 0 0 0 5.993 3.082.08.08 0 0 0 .084-.028c.462-.642.874-1.318 1.226-2.03a.08.08 0 0 0-.041-.107A13 13 0 0 1 5.52 18.6a.08.08 0 0 1-.008-.13q.19-.145.372-.297a.07.07 0 0 1 .078-.01c3.927 1.824 8.18 1.824 12.061 0a.07.07 0 0 1 .079.01q.18.15.372.297a.08.08 0 0 1-.006.13q-.895.531-1.873.906a.08.08 0 0 0-.041.109c.36.71.772 1.386 1.225 2.028a.075.075 0 0 0 .084.029 19.7 19.7 0 0 0 6.002-3.082.08.08 0 0 0 .032-.056c.5-5.267-.838-9.842-3.549-13.897a.06.06 0 0 0-.031-.03M8.02 15.757c-1.182 0-2.157-1.104-2.157-2.46s.956-2.46 2.157-2.46c1.21 0 2.176 1.113 2.157 2.46 0 1.356-.956 2.46-2.157 2.46m7.975 0c-1.183 0-2.157-1.104-2.157-2.46s.955-2.46 2.157-2.46c1.21 0 2.176 1.113 2.157 2.46 0 1.356-.946 2.46-2.157 2.46" /></svg>;
+const ForwardRef = forwardRef(IconSocialDiscordMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-social-github-mono.tsx b/src/components/Icon/glyphs/icon-social-github-mono.tsx
new file mode 100644
index 0000000000..3984945b21
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-social-github-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconSocialGithubMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M12 0C5.4 0 0 5.42 0 12.043c0 5.32 3.4 9.836 8.2 11.441.6.1.8-.3.8-.602v-2.007c-3.3.702-4-1.606-4-1.606-.5-1.405-1.3-1.806-1.3-1.806-1.1-.703.1-.703.1-.703 1.2.1 1.8 1.204 1.8 1.204 1.1 1.807 2.8 1.305 3.5 1.004.1-.803.4-1.305.8-1.606-2.8-.3-5.6-1.304-5.6-5.92 0-1.306.5-2.41 1.2-3.212 0-.402-.5-1.606.2-3.212 0 0 1-.301 3.3 1.204 1-.3 2-.401 3-.401s2 .1 3 .401c2.3-1.505 3.3-1.204 3.3-1.204.7 1.706.2 2.91.1 3.212.8.802 1.2 1.906 1.2 3.211 0 4.617-2.8 5.62-5.5 5.921.4.402.8 1.104.8 2.208v3.312c0 .301.2.703.8.602 4.9-1.606 8.3-6.122 8.3-11.44C24 5.418 18.6 0 12 0" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconSocialGithubMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-social-github.tsx b/src/components/Icon/glyphs/icon-social-github.tsx
new file mode 100644
index 0000000000..6eae7bfb5d
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-social-github.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconSocialGithub = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#191717" fillRule="evenodd" d="M12 0C5.4 0 0 5.42 0 12.043c0 5.32 3.4 9.836 8.2 11.441.6.1.8-.3.8-.602v-2.007c-3.3.702-4-1.606-4-1.606-.5-1.405-1.3-1.806-1.3-1.806-1.1-.703.1-.703.1-.703 1.2.1 1.8 1.204 1.8 1.204 1.1 1.807 2.8 1.305 3.5 1.004.1-.803.4-1.305.8-1.606-2.8-.3-5.6-1.304-5.6-5.92 0-1.306.5-2.41 1.2-3.212 0-.402-.5-1.606.2-3.212 0 0 1-.301 3.3 1.204 1-.3 2-.401 3-.401s2 .1 3 .401c2.3-1.505 3.3-1.204 3.3-1.204.7 1.706.2 2.91.1 3.212.8.802 1.2 1.906 1.2 3.211 0 4.617-2.8 5.62-5.5 5.921.4.402.8 1.104.8 2.208v3.312c0 .301.2.703.8.602 4.9-1.606 8.3-6.122 8.3-11.44C24 5.418 18.6 0 12 0" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconSocialGithub);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-social-linkedin-mono.tsx b/src/components/Icon/glyphs/icon-social-linkedin-mono.tsx
new file mode 100644
index 0000000000..4294057515
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-social-linkedin-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconSocialLinkedinMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" d="M24 1.765v20.47A1.764 1.764 0 0 1 22.235 24H1.765A1.765 1.765 0 0 1 0 22.235V1.765A1.765 1.765 0 0 1 1.765 0h20.47A1.765 1.765 0 0 1 24 1.765M7.059 9.176h-3.53v11.295h3.53zm.317-3.882a2.033 2.033 0 0 0-2.018-2.047h-.064a2.047 2.047 0 1 0 0 4.094 2.033 2.033 0 0 0 2.082-1.983zm13.095 8.315c0-3.395-2.16-4.715-4.306-4.715a4.02 4.02 0 0 0-3.572 1.821h-.099V9.176H9.176v11.295h3.53v-6.007a2.344 2.344 0 0 1 2.117-2.527h.135c1.122 0 1.955.705 1.955 2.484v6.05h3.53z" /></svg>;
+const ForwardRef = forwardRef(IconSocialLinkedinMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-social-stackoverflow-mono.tsx b/src/components/Icon/glyphs/icon-social-stackoverflow-mono.tsx
new file mode 100644
index 0000000000..a9c23846ba
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-social-stackoverflow-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconSocialStackoverflowMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" fillRule="evenodd" d="M19.01 15.47h2.126V24H2v-8.53h2.126v6.397H19.01z" clipRule="evenodd" /><path fill="currentColor" d="m6.446 14.83 10.437 2.21.445-2.093-10.438-2.21zM7.818 9.83l9.665 4.517.908-1.939L8.727 7.89zm2.687-4.77 8.195 6.844 1.373-1.648-8.196-6.843zM15.8 0l-1.72 1.28 6.359 8.588 1.72-1.28zM6.252 19.735h10.631v-2.132H6.253z" /></svg>;
+const ForwardRef = forwardRef(IconSocialStackoverflowMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-social-x-mono.tsx b/src/components/Icon/glyphs/icon-social-x-mono.tsx
new file mode 100644
index 0000000000..7593ebe2f9
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-social-x-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconSocialXMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" d="M17.729 2h3.257l-7.116 8.133L22.24 21.2h-6.554l-5.134-6.712L4.679 21.2h-3.26l7.612-8.699L1 2h6.721l4.64 6.135zm-1.143 17.25h1.804L6.74 3.847H4.804z" /></svg>;
+const ForwardRef = forwardRef(IconSocialXMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-social-youtube-mono.tsx b/src/components/Icon/glyphs/icon-social-youtube-mono.tsx
new file mode 100644
index 0000000000..ac8145437d
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-social-youtube-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconSocialYoutubeMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" d="M23.499 6.631a3.01 3.01 0 0 0-2.122-2.128C19.505 4 12 4 12 4s-7.505 0-9.377.503A3.01 3.01 0 0 0 .502 6.631C0 8.51 0 12.425 0 12.425s0 3.917.502 5.795a3.01 3.01 0 0 0 2.121 2.128c1.872.503 9.377.503 9.377.503s7.505 0 9.377-.503a3.01 3.01 0 0 0 2.122-2.128C24 16.342 24 12.426 24 12.426s0-3.917-.502-5.795" /><path fill="#fff" d="m9.545 15.982 6.273-3.556-6.273-3.557z" /></svg>;
+const ForwardRef = forwardRef(IconSocialYoutubeMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-android-full.tsx b/src/components/Icon/glyphs/icon-tech-android-full.tsx
new file mode 100644
index 0000000000..92e5360c82
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-android-full.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechAndroidFull = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#ABC43E" fillRule="evenodd" d="M29.711 6.88c.84 0 1.52.664 1.52 1.484s-.68 1.484-1.52 1.484c-.838 0-1.52-.665-1.52-1.484 0-.82.682-1.485 1.52-1.485m-11.423 0c.839 0 1.52.664 1.52 1.484s-.681 1.484-1.52 1.484c-.84 0-1.52-.665-1.52-1.484 0-.82.68-1.485 1.52-1.485m23.744 8.425c1.633 0 2.968 1.303 2.968 2.897v11.59c0 1.594-1.335 2.897-2.968 2.897-1.632 0-2.968-1.303-2.968-2.897v-11.59c0-1.594 1.336-2.897 2.968-2.897m-36.065 0c1.632 0 2.967 1.303 2.967 2.897v11.59c0 1.594-1.335 2.897-2.967 2.897S3 31.386 3 29.792v-11.59c0-1.594 1.335-2.897 2.967-2.897m15.624 23.357v6.44c0 1.594-1.335 2.898-2.968 2.898-1.632 0-2.967-1.304-2.967-2.898v-6.44h-2.49c-1.32 0-2.402-1.056-2.402-2.346v-21.11h26.47v21.11c0 1.29-1.08 2.346-2.402 2.346h-2.49v6.44c0 1.594-1.334 2.898-2.966 2.898s-2.967-1.304-2.967-2.898v-6.44zm2.408-35.705c1.998 0 3.89.358 5.589 1l2.5-3.759a.453.453 0 0 1 .617-.128.43.43 0 0 1 .13.604l-2.412 3.628c3.992 1.8 6.712 5.224 6.79 9.166H10.786c.078-3.942 2.798-7.366 6.79-9.166L15.164.674a.43.43 0 0 1 .131-.604.453.453 0 0 1 .618.128l2.5 3.759c1.697-.641 3.59-1 5.587-1" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconTechAndroidFull);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-claude-mono.tsx b/src/components/Icon/glyphs/icon-tech-claude-mono.tsx
new file mode 100644
index 0000000000..0c0733cb07
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-claude-mono.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechClaudeMono = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={45} height={44} fill="none" viewBox="0 0 45 44" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="currentColor" d="m9.28 29.252 8.677-4.853.145-.423-.145-.234h-.425l-1.451-.09-4.959-.133-4.3-.178-4.165-.222-1.05-.223-.983-1.291.1-.646.883-.59 1.262.112 2.792.189 4.188.29 3.037.177 4.501.468h.715l.1-.29-.245-.178-.19-.178-4.333-2.927-4.69-3.094-2.458-1.781-1.329-.902-.67-.846-.29-1.848 1.206-1.324 1.62.111.412.111 1.642 1.258 3.507 2.705 4.579 3.361.67.557.268-.19.033-.133-.301-.5-2.49-4.486-2.658-4.564L11.3 4.575l-.313-1.136c-.112-.467-.19-.857-.19-1.335l1.374-1.86.76-.244 1.83.245.771.668 1.14 2.593 1.842 4.085 2.86 5.555.837 1.647.447 1.525.167.467h.29v-.267l.235-3.128.436-3.84.424-4.942.145-1.391.692-1.67 1.374-.901 1.072.512.883 1.257-.123.813-.525 3.395-1.028 5.32-.67 3.562h.391l.447-.445 1.81-2.393 3.037-3.785 1.34-1.502L34.62 5.72l1.005-.79h1.898L38.92 7l-.625 2.137-1.955 2.471-1.619 2.093-2.323 3.117-1.452 2.493.134.2.346-.033 5.25-1.113 2.836-.512 3.384-.579 1.53.712.168.724-.604 1.48-3.618.89-4.244.847-6.321 1.491-.078.056.09.111 2.847.267 1.217.067h2.982l5.55.412 1.453.957.87 1.169-.145.89-2.233 1.136-3.016-.713-7.035-1.67-2.413-.6h-.335v.2l2.01 1.959 3.686 3.317 4.612 4.274.235 1.058-.592.834-.625-.089-4.054-3.038-1.564-1.37-3.54-2.971h-.235v.311l.816 1.191 4.31 6.456.224 1.981-.313.646-1.117.39-1.228-.223-2.524-3.528-2.602-3.974-2.1-3.562-.257.145-1.24 13.301-.58.679-1.34.512-1.117-.846-.592-1.369.592-2.705.715-3.528.58-2.805.525-3.484.313-1.158-.022-.078-.257.034-2.636 3.606-4.01 5.398-3.17 3.384-.76.3-1.318-.678.123-1.213.737-1.08 4.389-5.565 2.647-3.451 1.708-1.992-.01-.29h-.101l-11.66 7.547-2.077.267-.893-.835.111-1.369.425-.445L9.29 29.24z" /></svg>;
+const ForwardRef = forwardRef(IconTechClaudeMono);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-csharp.tsx b/src/components/Icon/glyphs/icon-tech-csharp.tsx
new file mode 100644
index 0000000000..78ed72d85b
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-csharp.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechCsharp = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><clipPath id="clip0_1031_1911"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g clipPath="url(#clip0_1031_1911)"><path fill="#9A4993" d="M45.68 14.1c0-.801-.172-1.524-.526-2.13q-.513-.906-1.539-1.498C37.935 7.198 32.242 3.924 26.562.65c-1.539-.88-3.011-.855-4.536.04C19.764 2.017 8.43 8.512 5.064 10.471 3.671 11.274 3 12.51 3 14.114v19.775c0 .789.17 1.486.5 2.09.342.619.867 1.145 1.564 1.552 3.38 1.96 14.7 8.441 16.962 9.782 1.525.894 3.01.934 4.536.04 5.68-3.287 11.373-6.548 17.053-9.822.71-.407 1.223-.92 1.565-1.551.328-.605.5-1.302.5-2.091z" /><path fill="#6A1577" d="M24.393 23.922 3.473 35.966c.343.618.868 1.144 1.565 1.552 3.38 1.959 14.7 8.44 16.962 9.782 1.525.894 3.01.934 4.536.04 5.68-3.288 11.373-6.548 17.053-9.822.71-.408 1.223-.92 1.565-1.552z" /><path fill="#6A1577" d="M18.2 27.486a7.06 7.06 0 0 0 6.126 3.563 7.04 7.04 0 0 0 6.154-3.603l-6.088-3.524z" /><path fill="#813084" d="M45.68 14.1c0-.801-.172-1.524-.527-2.13l-20.76 11.952L45.18 35.967c.328-.604.5-1.301.5-2.09z" /><path fill="#fff" fillRule="evenodd" d="M30.48 27.446a7.07 7.07 0 0 1-6.153 3.603 7.03 7.03 0 0 1-6.127-3.563 7.054 7.054 0 0 1 12.228-7.034l6.166-3.55c-2.459-4.234-7.034-7.088-12.28-7.088-7.837 0-14.174 6.351-14.174 14.174 0 2.564.683 4.984 1.88 7.061a14.2 14.2 0 0 0 12.307 7.113c5.272 0 9.874-2.88 12.32-7.152zm7.797-6.811H36.87v6.797h1.407zm1.71 0h1.406v6.797h-1.407z" clipRule="evenodd" /><path fill="#fff" fillRule="evenodd" d="M35.74 21.779h6.797v1.407h-6.798zm0 3.103h6.797v1.407h-6.798z" clipRule="evenodd" /></g></svg>;
+const ForwardRef = forwardRef(IconTechCsharp);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-flutter.tsx b/src/components/Icon/glyphs/icon-tech-flutter.tsx
new file mode 100644
index 0000000000..e161ade2ac
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-flutter.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechFlutter = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_1031_1893" x1={25.645} x2={26.676} y1={39.281} y2={40.312} gradientUnits="userSpaceOnUse"><stop offset={0.2} stopOpacity={0.15} /><stop offset={0.85} stopColor="#616161" stopOpacity={0.01} /></linearGradient><linearGradient id="paint1_linear_1031_1893" x1={22.466} x2={33.433} y1={42.463} y2={42.463} gradientUnits="userSpaceOnUse"><stop offset={0.2} stopOpacity={0.55} /><stop offset={0.85} stopColor="#616161" stopOpacity={0.01} /></linearGradient><clipPath id="clip0_1031_1893"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g clipPath="url(#clip0_1031_1893)"><path fill="#0D47A1" d="M22.463 42.463 28 48h14.781L29.855 35.074" /><path fill="#42A5F5" fillOpacity={0.8} fillRule="evenodd" d="m4 23.998 7.392 7.392L42.78 0H28zm24-1.853h14.781L29.855 35.073l-7.392-7.391z" clipRule="evenodd" /><path fill="#42A5F5" d="m15.09 35.077 7.38-7.382 7.379 7.38-7.38 7.382z" /><path fill="url(#paint0_linear_1031_1893)" d="m22.47 42.458 7.379-7.38 1.03 1.03-7.38 7.38z" /><path fill="url(#paint1_linear_1031_1893)" d="m22.463 42.463 10.967-3.789-3.575-3.602" /></g></svg>;
+const ForwardRef = forwardRef(IconTechFlutter);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-go.tsx b/src/components/Icon/glyphs/icon-tech-go.tsx
new file mode 100644
index 0000000000..d01783bd69
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-go.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechGo = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#00ACD7" fillRule="evenodd" d="M5.75 24.73c-.094 0-.118-.07-.07-.14l.326-.585c.047-.07.14-.14.234-.14h4.674c.094 0 .14.07.14.163l-.046.561c0 .094-.094.164-.164.164zM.093 22.58c-.093 0-.116-.047-.07-.117l.491-.63c.047-.07.164-.118.257-.118h10.657c.094 0 .14.07.117.14l-.187.561c-.023.094-.117.14-.21.14zM3.622 20.43c-.093 0-.117-.047-.07-.117l.491-.631c.047-.07.164-.117.257-.117h8.343c.094 0 .117.07.07.14l-.397.608c-.047.07-.164.14-.234.14zM30.008 20.01c-1.473.373-2.478.654-3.927 1.028-.35.093-.374.116-.677-.234-.351-.397-.608-.654-1.099-.888-1.472-.725-2.898-.514-4.23.35-1.59 1.029-2.407 2.548-2.384 4.44.024 1.87 1.309 3.413 3.155 3.67 1.59.21 2.922-.35 3.973-1.543.21-.257.398-.537.631-.864h-4.51c-.491 0-.608-.304-.444-.701.303-.725.864-1.94 1.192-2.548a.63.63 0 0 1 .584-.374h8.507c-.047.631-.047 1.262-.14 1.893-.258 1.683-.889 3.226-1.917 4.58-1.683 2.221-3.88 3.6-6.66 3.974-2.29.304-4.417-.14-6.287-1.543-1.73-1.308-2.711-3.038-2.968-5.188-.304-2.547.444-4.837 1.986-6.847 1.66-2.174 3.857-3.553 6.544-4.043 2.197-.398 4.3-.14 6.193 1.145 1.239.818 2.127 1.94 2.711 3.295.14.21.047.327-.233.397" clipRule="evenodd" /><path fill="#00ACD7" fillRule="evenodd" d="M37.743 32.933c-2.126-.047-4.066-.654-5.702-2.057-1.379-1.191-2.244-2.71-2.524-4.51-.42-2.64.304-4.978 1.893-7.058 1.706-2.244 3.762-3.412 6.544-3.903 2.383-.42 4.627-.187 6.66 1.192 1.846 1.262 2.992 2.968 3.295 5.212.398 3.155-.514 5.726-2.687 7.922-1.543 1.566-3.436 2.548-5.61 2.992-.63.117-1.261.14-1.869.21m5.562-9.442c-.023-.303-.023-.537-.07-.77-.42-2.314-2.547-3.623-4.767-3.109-2.174.49-3.576 1.87-4.09 4.067-.42 1.822.467 3.669 2.15 4.417 1.285.56 2.57.49 3.81-.14 1.846-.959 2.85-2.455 2.967-4.465" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconTechGo);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-java.tsx b/src/components/Icon/glyphs/icon-tech-java.tsx
new file mode 100644
index 0000000000..ff128af1bd
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-java.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechJava = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><clipPath id="clip0_1031_1923"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g clipPath="url(#clip0_1031_1923)" clipRule="evenodd"><path fill="#0B6FB6" fillRule="evenodd" d="M15.487 37.987c.538-.432 1.205-.654 1.86-.842-.211.199-.585.445-.421.784.315.41.9.456 1.368.561 1.976.246 3.975.41 5.951.257 1.496-.093 2.97-.362 4.431-.62.841.492 1.719.912 2.619 1.287-1.38.62-2.865 1.017-4.35 1.298-2.501.444-5.085.502-7.6.105-1.11-.199-2.244-.456-3.25-1.006-.385-.222-.794-.48-.958-.912-.129-.339.081-.7.35-.912" /><path fill="#0B6FB6" fillRule="evenodd" d="M8.998 41.296c1.076-.362 2.187-.655 3.321-.69.456-.011.924.012 1.321.246-1.356.082-2.713.42-3.928 1.04-.27.152-.573.328-.679.644 0 .362.41.479.679.596 1.695.631 3.507.83 5.285 1.017 5.296.444 10.627.327 15.924-.152 2-.222 4.01-.444 5.951-.994.62-.21 1.321-.42 1.73-.97.246-.328.083-.737-.163-1.017.397.222.959.502.877 1.04-.152.561-.726.854-1.193 1.123-1.496.76-3.145 1.145-4.782 1.484-4.759.936-9.634 1.146-14.475 1.006A81 81 0 0 1 7.97 44.57c-.643-.152-1.367-.281-1.835-.783-.304-.351-.035-.842.257-1.1.737-.677 1.684-1.052 2.607-1.391" /><path fill="#0B6FB6" fillRule="evenodd" d="M38.135 45.295c1.181-.41 2.443-.842 3.32-1.777-.152 1.017-1.029 1.718-1.894 2.174-1.66.866-3.52 1.263-5.366 1.59-3.906.62-7.869.772-11.833.702-2.7-.082-5.425-.187-8.079-.748-.631-.176-1.31-.293-1.859-.667 2.362.398 4.759.562 7.156.655 3.94.117 7.892-.035 11.809-.527 2.268-.315 4.548-.7 6.746-1.402" /><path stroke="#0B6FB6" strokeWidth={0.706} d="M38.135 45.295c1.181-.41 2.443-.842 3.32-1.777-.152 1.017-1.029 1.718-1.894 2.174-1.66.866-3.52 1.263-5.366 1.59-3.906.62-7.869.772-11.833.702-2.7-.082-5.425-.187-8.079-.748-.631-.176-1.31-.293-1.859-.667 2.362.398 4.759.562 7.156.655 3.94.117 7.892-.035 11.809-.527 2.268-.315 4.548-.7 6.746-1.402Z" /><path fill="#0B6FB6" fillRule="evenodd" d="M14.13 32.89c.609-.48 1.334-.748 2.059-1.006-.234.28-.561.55-.585.936-.012.245.188.432.386.55.386.198.818.268 1.251.326 2.245.234 4.513.363 6.782.211 2.069-.105 4.127-.444 6.173-.807.561.526 1.227.889 1.93 1.204-2.468.725-5.005 1.146-7.554 1.345-2.408.164-4.852.152-7.25-.234-.946-.175-1.916-.374-2.781-.818-.351-.187-.749-.433-.854-.842-.07-.35.187-.667.444-.865" /><path fill="#E11F22" fillRule="evenodd" d="M28.56 0c1.098 1.251 1.46 3.04 1.145 4.654-.34 1.812-1.345 3.414-2.526 4.793-.946 1.111-2.034 2.093-3.168 3.005-1.321 1.064-2.62 2.21-3.45 3.707-.7 1.216-.864 2.712-.385 4.033.783 2.268 2.607 3.952 3.601 6.092a49 49 0 0 1-3.18-3.04c-1.053-1.123-2.046-2.315-2.701-3.718-.444-.982-.643-2.128-.304-3.169.339-1.064 1.099-1.917 1.86-2.712 2.115-2.117 4.722-3.672 6.792-5.823 1.146-1.18 2.093-2.595 2.42-4.22.27-1.193.14-2.421-.105-3.602" /><path fill="#E11F22" fillRule="evenodd" d="M26.828 13.318c2.269-1.672 4.923-2.736 7.612-3.508-2.127 1.356-4.349 2.595-6.185 4.338-.667.643-1.297 1.38-1.59 2.28-.222.666-.129 1.403.14 2.034.492 1.122 1.321 2.034 1.953 3.063.538.877.631 2 .222 2.947-.62 1.39-1.835 2.408-3.098 3.215-.164.093-.305.269-.503.292.842-.76 1.496-1.835 1.473-2.993-.024-.865-.503-1.625-1.064-2.245-1.157-1.38-2.128-3.133-1.93-4.992.2-1.86 1.532-3.356 2.97-4.431" /><path fill="#0B6FB6" fillRule="evenodd" d="M34.873 26.834c.49-.596 1.274-.749 1.987-.842 1.24-.164 2.561.152 3.496 1.005.772.69 1.205 1.766 1.04 2.806-.174 1.205-.981 2.21-1.893 2.97-1.648 1.321-3.683 2.093-5.717 2.607.117-.128.245-.245.397-.339 1.544-.83 3.075-1.8 4.21-3.156.689-.842 1.227-1.941 1.005-3.052-.234-1.286-1.485-2.222-2.76-2.292-.608-.058-1.18.176-1.765.293M11.372 27.898c2.151-.924 4.49-1.52 6.84-1.485-1.368.397-2.771.736-4.057 1.344-.305.164-.655.316-.83.632-.094.245.163.409.35.49.795.328 1.672.375 2.526.457 2.993.199 5.998.082 8.98-.106 2.945-.187 5.869-.584 8.78-1.052-.643.304-1.298.608-1.894.994-.304.21-.678.269-1.017.35-3.578.796-7.25 1.041-10.897 1.1a56 56 0 0 1-4.221-.105c-1.567-.106-3.145-.223-4.677-.632-.445-.129-.912-.269-1.263-.585-.175-.14-.175-.42-.023-.584.386-.398.924-.585 1.403-.819" /></g></svg>;
+const ForwardRef = forwardRef(IconTechJava);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-javascript.tsx b/src/components/Icon/glyphs/icon-tech-javascript.tsx
new file mode 100644
index 0000000000..d8f50591fb
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-javascript.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechJavascript = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><clipPath id="clip0_1031_1922"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g clipPath="url(#clip0_1031_1922)"><path fill="#F7DF1E" d="M46 0H2a2 2 0 0 0-2 2v44a2 2 0 0 0 2 2h44a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2" /><path fill="#000" d="M32.244 37.5c.967 1.579 2.225 2.74 4.45 2.74 1.868 0 3.062-.935 3.062-2.225 0-1.547-1.227-2.095-3.284-2.995l-1.127-.484c-3.255-1.386-5.417-3.123-5.417-6.796 0-3.382 2.577-5.958 6.605-5.958 2.868 0 4.93.998 6.416 3.612l-3.513 2.255c-.773-1.387-1.607-1.933-2.903-1.933-1.32 0-2.158.838-2.158 1.933 0 1.353.838 1.9 2.773 2.739l1.128.483c3.832 1.643 5.996 3.319 5.996 7.086 0 4.06-3.19 6.285-7.474 6.285-4.19 0-6.896-1.996-8.22-4.612zm-15.934.391c.709 1.257 1.353 2.32 2.903 2.32 1.482 0 2.417-.58 2.417-2.834V22.04h4.51v15.398c0 4.67-2.738 6.796-6.735 6.796-3.612 0-5.703-1.869-6.767-4.12z" /></g></svg>;
+const ForwardRef = forwardRef(IconTechJavascript);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-json.tsx b/src/components/Icon/glyphs/icon-tech-json.tsx
new file mode 100644
index 0000000000..49bd3b8529
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-json.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechJson = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><clipPath id="clip0_4810_1924"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g clipPath="url(#clip0_4810_1924)"><path stroke="currentColor" strokeLinecap="round" strokeWidth={3} d="M36 2h3a4 4 0 0 1 4 4v12.092a4 4 0 0 0 1.056 2.708l1.761 1.915a2 2 0 0 1 .068 2.63l-1.965 2.37a4 4 0 0 0-.92 2.553V42a4 4 0 0 1-4 4h-3M12 2H9a4 4 0 0 0-4 4v12.092A4 4 0 0 1 3.944 20.8l-1.761 1.915a2 2 0 0 0-.068 2.63l1.965 2.37A4 4 0 0 1 5 30.269V42a4 4 0 0 0 4 4h3" /><path fill="currentColor" d="M26 41V25.67h3.213l4.263 12.39-.147-1.575a79 79 0 0 1-.105-1.87 39 39 0 0 1-.042-1.68V25.67h2.394V41h-3.213l-4.221-12.39.105 1.47q.063.861.105 1.764t.042 1.659V41zM17.038 41.21q-1.47 0-2.562-.546a4.1 4.1 0 0 1-1.659-1.575q-.567-1.029-.567-2.415v-6.678q0-1.386.567-2.394a3.9 3.9 0 0 1 1.659-1.575q1.092-.567 2.562-.567 1.491 0 2.562.567 1.071.546 1.638 1.575.588 1.008.588 2.373v6.699q0 1.386-.588 2.415a3.95 3.95 0 0 1-1.638 1.575q-1.071.546-2.562.546m0-2.31q1.071 0 1.617-.567.546-.588.546-1.659v-6.678q0-1.092-.546-1.659t-1.617-.567-1.617.567-.546 1.659v6.678q0 1.071.546 1.659.567.567 1.617.567M30.895 22.21q-1.575 0-2.73-.525t-1.785-1.491q-.609-.987-.63-2.31h2.625q0 .945.672 1.491.693.525 1.869.525 1.134 0 1.764-.525.651-.525.651-1.449 0-.777-.462-1.344-.441-.588-1.281-.798l-1.764-.483q-1.806-.462-2.793-1.659-.966-1.197-.966-2.898 0-1.302.588-2.268a3.9 3.9 0 0 1 1.659-1.491q1.092-.525 2.562-.525 2.226 0 3.528 1.155 1.302 1.134 1.323 3.066H33.1q0-.903-.588-1.407-.588-.525-1.659-.525-1.029 0-1.596.483t-.567 1.365q0 .798.42 1.365.441.546 1.26.777l1.827.504q1.827.462 2.793 1.659.966 1.176.966 2.919 0 1.302-.63 2.31-.63.987-1.764 1.533t-2.667.546M17.04 22.23q-2.331 0-3.696-1.28Q12 19.648 12 17.464h2.625q0 1.155.651 1.806.651.65 1.764.65t1.764-.63q.651-.65.651-1.805v-8.38h-3.57V6.67h6.195v10.815q0 2.205-1.365 3.486-1.344 1.26-3.675 1.26" /></g></svg>;
+const ForwardRef = forwardRef(IconTechJson);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-kotlin.tsx b/src/components/Icon/glyphs/icon-tech-kotlin.tsx
new file mode 100644
index 0000000000..a05acdc02b
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-kotlin.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechKotlin = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_1031_1914" x1={14.252} x2={58.919} y1={66.464} y2={21.797} gradientUnits="userSpaceOnUse"><stop offset={0.108} stopColor="#C757BC" /><stop offset={0.173} stopColor="#CD5CA9" /><stop offset={0.492} stopColor="#E8744F" /><stop offset={0.716} stopColor="#F88316" /><stop offset={0.823} stopColor="#FF8900" /></linearGradient><linearGradient id="paint1_linear_1031_1914" x1={36.994} x2={43.459} y1={62.127} y2={36.495} gradientUnits="userSpaceOnUse"><stop offset={0.296} stopColor="#00AFFF" /><stop offset={0.694} stopColor="#5282FF" /><stop offset={1} stopColor="#945DFF" /></linearGradient><linearGradient id="paint2_linear_1031_1914" x1={6.685} x2={22.686} y1={21.279} y2={6.811} gradientUnits="userSpaceOnUse"><stop offset={0.296} stopColor="#00AFFF" /><stop offset={0.694} stopColor="#5282FF" /><stop offset={1} stopColor="#945DFF" /></linearGradient><clipPath id="clip0_1031_1914"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g clipPath="url(#clip0_1031_1914)"><path fill="url(#paint0_linear_1031_1914)" d="M24.1 0 0 25.344V48l24.065-24.107L48 0z" /><path fill="url(#paint1_linear_1031_1914)" d="m0 48 24.065-24.107L48 48z" /><path fill="url(#paint2_linear_1031_1914)" d="M0 0h24.1L0 25.344z" /></g></svg>;
+const ForwardRef = forwardRef(IconTechKotlin);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-laravel-broadcast.tsx b/src/components/Icon/glyphs/icon-tech-laravel-broadcast.tsx
new file mode 100644
index 0000000000..4e0c06da0d
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-laravel-broadcast.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechLaravelBroadcast = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#FF2D20" fillRule="evenodd" d="M47.6 10.859q.027.097.027.196v10.303a.75.75 0 0 1-.378.652l-8.647 4.979v9.868a.75.75 0 0 1-.376.652L20.176 47.9c-.042.023-.087.038-.132.054-.017.006-.033.016-.051.021a.76.76 0 0 1-.385 0c-.02-.006-.04-.017-.06-.024-.04-.015-.084-.029-.123-.051L1.377 37.509A.75.75 0 0 1 1 36.857V5.947q.001-.101.026-.196c.006-.022.02-.042.027-.063.014-.04.027-.08.047-.117.015-.024.035-.044.052-.067.022-.03.041-.06.067-.087.021-.021.05-.037.074-.056q.038-.036.083-.065L10.402.1a.75.75 0 0 1 .75 0l9.025 5.196h.002q.043.03.082.064.04.027.074.056c.026.027.045.058.067.088.016.023.038.043.051.067.022.038.034.077.049.117.007.021.02.04.026.063a.8.8 0 0 1 .026.197v19.305l7.52-4.33v-9.869q0-.1.027-.195c.006-.023.018-.042.026-.064.015-.04.028-.08.049-.116.014-.025.034-.045.05-.067.023-.03.042-.061.068-.087.022-.022.049-.038.073-.057.028-.022.053-.047.083-.065l9.026-5.195a.75.75 0 0 1 .751 0l9.024 5.195c.032.02.056.043.085.064.023.02.05.036.072.057.026.027.045.058.068.088.017.022.037.042.05.067.022.036.034.077.05.116.008.022.02.041.025.064m-1.478 10.064v-8.567l-3.158 1.818-4.362 2.512v8.567l7.521-4.33m-9.024 15.5v-8.574l-4.291 2.45-12.255 6.995v8.654zM2.504 7.247v29.174l16.544 9.525v-8.653l-8.643-4.89-.002-.003-.004-.002c-.03-.017-.054-.041-.081-.062-.024-.018-.05-.033-.071-.054l-.002-.003c-.025-.023-.041-.053-.062-.079-.019-.025-.041-.047-.056-.073l-.002-.003q-.022-.044-.039-.094c-.012-.028-.028-.054-.036-.084v-.001c-.009-.036-.01-.074-.015-.11-.003-.028-.01-.056-.01-.085V11.58L5.661 9.064 2.504 7.25m8.273-5.628L3.258 5.948l7.517 4.328 7.518-4.33-7.518-4.326zm3.91 27.01 4.362-2.51V7.247l-3.158 1.818-4.363 2.512V30.45zM37.851 6.727l-7.518 4.328 7.517 4.328 7.517-4.329zm-.753 9.959-4.362-2.512-3.158-1.818v8.567l4.361 2.511 3.16 1.82zM19.8 35.993l11.028-6.295 5.512-3.146-7.513-4.325-8.65 4.98-7.882 4.538z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconTechLaravelBroadcast);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-nextjs.tsx b/src/components/Icon/glyphs/icon-tech-nextjs.tsx
new file mode 100644
index 0000000000..4dfb9c82c8
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-nextjs.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechNextjs = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_2276_25" x1={29.067} x2={38.533} y1={31.067} y2={42.8} gradientUnits="userSpaceOnUse"><stop stopColor="#fff" /><stop offset={1} stopColor="#fff" stopOpacity={0} /></linearGradient><linearGradient id="paint1_linear_2276_25" x1={32.267} x2={32.213} y1={14.4} y2={28.5} gradientUnits="userSpaceOnUse"><stop stopColor="#fff" /><stop offset={1} stopColor="#fff" stopOpacity={0} /></linearGradient><clipPath id="clip0_2276_25"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath><clipPath id="clip1_2276_25"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g clipPath="url(#clip0_2276_25)"><g clipPath="url(#clip1_2276_25)"><mask id="mask0_2276_25" width={48} height={48} x={0} y={0} maskUnits="userSpaceOnUse" style={{
+        maskType: "alpha"
+      }}><path fill="#000" d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24" /></mask><g mask="url(#mask0_2276_25)"><path fill="#000" d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24" /><path fill="url(#paint0_linear_2276_25)" d="M39.869 42.005 18.438 14.4H14.4v19.192h3.23v-15.09L37.333 43.96a24 24 0 0 0 2.536-1.954" /><path fill="url(#paint1_linear_2276_25)" d="M33.867 14.4h-3.2v19.2h3.2z" /></g></g></g></svg>;
+const ForwardRef = forwardRef(IconTechNextjs);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-nodejs.tsx b/src/components/Icon/glyphs/icon-tech-nodejs.tsx
new file mode 100644
index 0000000000..291eae9421
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-nodejs.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechNodejs = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_1031_1900" x1={24.084} x2={-23.516} y1={-23.765} y2={18.053} gradientUnits="userSpaceOnUse"><stop stopColor="#3E863D" /><stop offset={1} stopColor="#5AAD45" /></linearGradient><linearGradient id="paint1_linear_1031_1900" x1={18.428} x2={-6.405} y1={-5.756} y2={27.603} gradientUnits="userSpaceOnUse"><stop stopColor="#76AC64" /><stop offset={0.526} stopColor="#3E863D" /><stop offset={1} stopColor="#3E863D" /></linearGradient><linearGradient id="paint2_linear_1031_1900" x1={3.048} x2={45.13} y1={48.88} y2={48.88} gradientUnits="userSpaceOnUse"><stop stopColor="#6BBF46" /><stop offset={1} stopColor="#3E863D" /></linearGradient><clipPath id="clip0_1031_1900"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g fillRule="evenodd" clipPath="url(#clip0_1031_1900)" clipRule="evenodd"><path fill="url(#paint0_linear_1031_1900)" d="M22.944.539h.005L4.137 11.397A2.27 2.27 0 0 0 3 13.365v21.732a2.27 2.27 0 0 0 1.137 1.967L22.95 47.932c.703.405 1.57.405 2.273 0l18.81-10.868a2.28 2.28 0 0 0 1.135-1.967V13.365a2.27 2.27 0 0 0-1.139-1.968L25.222.54a2.29 2.29 0 0 0-2.278 0" /><path fill="url(#paint1_linear_1031_1900)" d="M3.466 36.477c.18.234.405.436.67.588l16.138 9.322 2.688 1.544a2.28 2.28 0 0 0 1.757.216L44.56 11.816a2.3 2.3 0 0 0-.529-.42L31.713 4.283 25.202.536a2.4 2.4 0 0 0-.59-.236z" /><path fill="url(#paint2_linear_1031_1900)" d="M23.87.248h-.012c-.315.031-.624.13-.908.29L4.19 11.367 24.42 48.21c.281-.04.558-.134.808-.278L44.04 37.064a2.28 2.28 0 0 0 1.09-1.51v-.056L24.517.285a2.4 2.4 0 0 0-.648-.037" /></g></svg>;
+const ForwardRef = forwardRef(IconTechNodejs);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-objectivec.tsx b/src/components/Icon/glyphs/icon-tech-objectivec.tsx
new file mode 100644
index 0000000000..af3d00c900
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-objectivec.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechObjectivec = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><clipPath id="clip0_1031_1913"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g fill="#03020D" clipPath="url(#clip0_1031_1913)"><path d="M48 45v3H38v-3zM10 45v3H0v-3zM33.068 31.276c-1.728 1.26-3.888 2.088-6.48 2.088-5.508 0-9.54-3.816-9.54-9.144 0-5.4 3.924-9.252 9.252-9.252l7.74 2.376v-5.076c-1.98-.72-4.788-1.476-7.884-1.476-7.74 0-13.752 5.436-13.752 13.428s6.012 13.428 13.752 13.428c3.348 0 6.48-.972 8.532-2.268zM0 3h3v42H0zM48 0v3H38V0zM45 3h3v42h-3zM10 0v3H0V0z" /></g></svg>;
+const ForwardRef = forwardRef(IconTechObjectivec);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-openai.tsx b/src/components/Icon/glyphs/icon-tech-openai.tsx
new file mode 100644
index 0000000000..c6e78ba54c
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-openai.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechOpenai = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<g clipPath="url(#a)"><path fill="currentColor" d="M44.24 19.645a11.96 11.96 0 0 0-1.027-9.821 12.09 12.09 0 0 0-13.027-5.802A11.96 11.96 0 0 0 21.168 0 12.095 12.095 0 0 0 9.631 8.373a11.96 11.96 0 0 0-7.997 5.801 12.1 12.1 0 0 0 1.488 14.181 11.96 11.96 0 0 0 1.027 9.822 12.095 12.095 0 0 0 13.026 5.803 11.96 11.96 0 0 0 9.02 4.02 12.09 12.09 0 0 0 11.54-8.378 11.96 11.96 0 0 0 7.997-5.8 12.1 12.1 0 0 0-1.492-14.177M26.2 44.865a8.97 8.97 0 0 1-5.76-2.082c.074-.04.202-.11.285-.16l9.557-5.52a1.55 1.55 0 0 0 .786-1.362V22.266l4.04 2.333a.14.14 0 0 1 .079.11v11.16a9.007 9.007 0 0 1-8.989 8.995zM6.87 36.61a8.97 8.97 0 0 1-1.073-6.028c.072.043.194.119.284.17l9.557 5.52a1.56 1.56 0 0 0 1.57 0l11.67-6.738V34.2a.14.14 0 0 1-.058.124l-9.662 5.579A9.005 9.005 0 0 1 6.87 36.61M4.357 15.745A8.96 8.96 0 0 1 9.04 11.8c0 .082-.004.228-.004.33v11.04a1.55 1.55 0 0 0 .784 1.36l11.668 6.736L17.45 33.6a.14.14 0 0 1-.137.012L7.648 28.03a9.005 9.005 0 0 1-3.291-12.284Zm33.19 7.725-11.669-6.74 4.04-2.331a.15.15 0 0 1 .136-.012l9.663 5.577a8.998 8.998 0 0 1-1.39 16.235V24.828a1.55 1.55 0 0 0-.78-1.358m4.02-6.052a9 9 0 0 0-.283-.17l-9.558-5.52a1.56 1.56 0 0 0-1.57 0l-11.668 6.737V13.8a.14.14 0 0 1 .058-.124l9.66-5.574a8.996 8.996 0 0 1 13.362 9.316Zm-25.276 8.315-4.04-2.333a.14.14 0 0 1-.079-.11V12.13a8.996 8.996 0 0 1 14.753-6.907q-.143.078-.284.16l-9.558 5.52a1.55 1.55 0 0 0-.785 1.36zM18.486 21l5.196-3 5.199 3v6l-5.198 3-5.197-3v-5.999Z" /></g></svg>;
+const ForwardRef = forwardRef(IconTechOpenai);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-php.tsx b/src/components/Icon/glyphs/icon-tech-php.tsx
new file mode 100644
index 0000000000..4ba5dcea31
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-php.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechPhp = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#000" fillRule="evenodd" d="M10.917 17.073H3.798L0 36.118h3.692l1.01-5.047h3.187q1.62 0 3.134-.372 1.515-.372 2.842-1.753a8.2 8.2 0 0 0 1.7-2.443q.638-1.355.824-2.763.479-3.081-.93-4.86-1.408-1.781-4.542-1.807m-4.016 3.055.005-.026-.026.026zm0 0L5.312 28.07q.16.027.32.027h.371q2.55.027 4.25-.505 1.7-.558 2.284-3.878.479-2.789-.956-3.214-1.408-.425-3.533-.398a8 8 0 0 1-.61.026z" clipRule="evenodd" /><path fill="#000" d="M20.595 12h3.665l-1.036 5.073h3.294q2.71.054 4.037 1.116 1.355 1.062.797 4.037l-1.78 8.846h-3.718l1.7-8.447q.266-1.328-.16-1.886-.425-.558-1.832-.558l-2.949-.027-2.178 10.918H16.77z" /><path fill="#000" fillRule="evenodd" d="M42.407 17.073h-7.119L31.49 36.118h3.692l1.01-5.047h3.187q1.62 0 3.134-.372 1.515-.372 2.842-1.753a8.2 8.2 0 0 0 1.7-2.443q.638-1.355.824-2.763.479-3.081-.93-4.86-1.409-1.781-4.542-1.807m-4.016 3.055.005-.026-.026.026zm0 0-1.588 7.942q.159.027.318.027h.372q2.55.027 4.25-.505 1.7-.558 2.284-3.878.479-2.789-.956-3.214-1.408-.425-3.533-.398a8 8 0 0 1-.61.026z" clipRule="evenodd" /></svg>;
+const ForwardRef = forwardRef(IconTechPhp);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-postgres.tsx b/src/components/Icon/glyphs/icon-tech-postgres.tsx
new file mode 100644
index 0000000000..84238f027d
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-postgres.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechPostgres = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#000" d="M34.799 34.936c.304-2.544.217-2.899 2.109-2.508l.485.044c1.53.07 3.057-.177 4.487-.725 2.406-1.123 3.841-2.993 1.45-2.5-5.43 1.123-5.799-.725-5.799-.725 5.726-8.495 8.118-19.287 6.052-21.926-5.639-7.204-15.395-3.798-15.554-3.71h-.058a19 19 0 0 0-3.624-.377 8.9 8.9 0 0 0-5.726 1.71S1.226-2.949 2.023 13.236c.167 3.45 4.936 26.093 10.618 19.236 2.073-2.5 4.08-4.61 4.08-4.61 1.013.68 2.23.99 3.444.877l.101-.087c-.034.326-.022.656.036.979-1.45 1.63-1.036 1.92-3.964 2.522s-1.218 1.696-.08 1.979c1.377.348 4.559.833 6.712-2.175l-.087.348c.58.457.536 3.298.616 5.335-.015 1.712.2 3.418.638 5.073.413 1.117.898 3.994 4.747 3.168 3.211-.689 5.668-1.682 5.893-10.872" /><path fill="#000" d="M27.63 47.998a5.07 5.07 0 0 1-3.588-1.334 6.8 6.8 0 0 1-1.696-2.994 5 5 0 0 1-.101-.304 20 20 0 0 1-.761-5.66c0-.363 0-.726-.036-1.146v-.812a8.7 8.7 0 0 1-5.661.334 5.7 5.7 0 0 1-1.617-.681 3.6 3.6 0 0 1-.862-.725 4.1 4.1 0 0 1-4.08.862c-1.537-.514-2.9-1.942-4.19-4.349a38.5 38.5 0 0 1-2.595-6.624A62 62 0 0 1 .03 13.345C-.224 8.27 1.153 4.596 4.125 2.473 6.582.74 9.923.204 14.105.893c1.447.242 2.872.598 4.262 1.065a11.3 11.3 0 0 1 6.038-1.45c1.161.018 2.32.124 3.464.32A20.2 20.2 0 0 1 33.791 0c4.755.05 8.698 1.906 11.394 5.356 1.022 1.305 1.899 4.19.26 10.517a46.6 46.6 0 0 1-4.92 11.691q1.217-.05 2.406-.311a4.4 4.4 0 0 1 1.565-.087 2.36 2.36 0 0 1 1.98 1.572c.818 2.472-2.654 4.306-3.734 4.806a13.05 13.05 0 0 1-5.428.942H36.9v.247c0 .08 0 .246-.043.384-.123 4.697-.797 7.683-2.175 9.661-1.45 2.095-3.508 2.682-5.298 3.066a8 8 0 0 1-1.754.153m-3.486-17.28c1.152.92 1.254 2.595 1.34 5.733v1.088c.007 1.49.177 2.975.508 4.428q.085.219.16.45c.413 1.282.587 1.812 2.275 1.45 1.494-.32 2.262-.602 2.849-1.45.877-1.254 1.37-3.791 1.45-7.546l2.014.051-2-.24c0-.166.036-.318.058-.463.174-1.5.312-2.689 1.384-3.457a3 3 0 0 1 2.095-.486 2.84 2.84 0 0 1-.674-1.37l-.167-.833.471-.725a42.2 42.2 0 0 0 5.661-12.51c1.232-4.755.689-6.77.479-7.053-4.48-5.726-12.279-3.384-13.141-3.102l-.152.08-.725.138-.384-.08a17 17 0 0 0-3.24-.333 6.9 6.9 0 0 0-4.48 1.304l-.992.754-1.066-.442c-2.087-.848-8.22-2.566-11.423-.297-1.768 1.254-2.573 3.725-2.392 7.357a59.5 59.5 0 0 0 2.32 10.487c1.928 6.227 3.624 7.973 4.117 8.096.243-.132.454-.318.616-.543a101 101 0 0 1 4.175-4.711l1.166-1.225 1.407.935a3.34 3.34 0 0 0 1.565.55l3.356-2.855-.493 4.972a2 2 0 0 0 0 .471l.145.942-.638.725 1.566.725z" /><path fill="#336791" d="M43.344 29.218c-5.429 1.123-5.799-.725-5.799-.725 5.727-8.495 8.118-19.287 6.053-21.925-5.64-7.205-15.395-3.798-15.555-3.711h-.058a20.3 20.3 0 0 0-3.624-.377 8.94 8.94 0 0 0-5.726 1.717S1.24-2.97 2.037 13.214c.167 3.45 4.936 26.093 10.619 19.236 2.073-2.5 4.08-4.61 4.08-4.61a5.28 5.28 0 0 0 3.443.878l.094-.087c-.027.326-.013.655.044.978-1.45 1.63-1.037 1.92-3.965 2.523-2.928.601-1.218 1.696-.08 1.978 1.378.348 4.56.834 6.712-2.174l-.087.348c.573.456.979 2.986.914 5.276-.066 2.29-.116 3.87.333 5.074.45 1.203.906 3.993 4.755 3.167 3.21-.688 4.877-2.471 5.11-5.45.166-2.117.536-1.805.558-3.697l.304-.899c.34-2.899.05-3.798 2.03-3.363l.485.044c1.53.07 3.057-.177 4.487-.725 2.406-1.123 3.841-2.993 1.45-2.5z" /><path fill="#fff" d="M27.84 46.751c-3.232 0-4.262-2.566-4.682-3.624-.609-1.537-.725-7.248-.609-12.322a.674.674 0 1 1 1.348 0c-.159 5.581.066 10.633.515 11.757.689 1.732 1.747 3.254 4.719 2.616 2.971-.637 3.892-1.652 4.348-4.428.37-2.117 1.095-8.154 1.182-9.343a.675.675 0 1 1 1.34.094c-.094 1.247-.811 7.248-1.195 9.48-.566 3.291-2.037 4.784-5.415 5.51a7.5 7.5 0 0 1-1.55.26M10.46 34.342a2.7 2.7 0 0 1-.841-.138c-2.102-.725-4.095-4.102-5.93-10.147a60 60 0 0 1-2.355-10.872c-.232-4.61.957-7.872 3.53-9.698 2.174-1.53 5.19-1.993 8.995-1.384 1.712.277 3.39.731 5.008 1.355a.674.674 0 0 1-.507 1.247c-.08 0-8.234-3.298-12.72-.124-2.175 1.544-3.175 4.414-2.965 8.531A60.6 60.6 0 0 0 4.973 23.68c1.63 5.335 3.479 8.698 5.073 9.234.247.08.993.333 2.066-.964 2.073-2.486 3.972-4.472 3.987-4.494a.674.674 0 1 1 .97.928s-1.884 1.979-3.92 4.429a3.5 3.5 0 0 1-2.69 1.529M37.502 29.11a.7.7 0 0 1-.37-.117.667.667 0 0 1-.18-.935c5.798-8.574 7.813-18.924 6.08-21.135-2.174-2.79-5.255-4.24-9.147-4.349a17.2 17.2 0 0 0-5.559.797l-.102.044a.677.677 0 1 1-.594-1.218 17.1 17.1 0 0 1 6.06-.978c4.348.043 7.936 1.718 10.379 4.841.609.776.898 2.044.877 3.77a25 25 0 0 1-.863 5.58 45 45 0 0 1-6.045 13.373.68.68 0 0 1-.536.326" /><path fill="#fff" d="M37.778 33.08c-.836.05-1.67-.109-2.429-.463a1.28 1.28 0 0 1-.688-1.044c-.145-2.58 1.232-3.087 2-3.312a11 11 0 0 0-.362-.464 9.2 9.2 0 0 1-1.42-2.406c-.073-.167-.298-.566-.552-1.03-1.398-2.507-4.312-7.726-2.428-10.422.863-1.232 2.573-1.732 5.074-1.45a15 15 0 0 0-2.718-4.653 12.97 12.97 0 0 0-9.915-4.74A8.07 8.07 0 0 0 18.208 5.4c-3.48 3.508-3.349 9.864-3.349 9.93a.674.674 0 0 1-1.34 0c0-.29-.139-7.002 3.732-10.916a9.37 9.37 0 0 1 7.103-2.696 14.3 14.3 0 0 1 10.872 5.124c2.175 2.493 3.197 5.248 3.276 6.168a.725.725 0 0 1-.558.892h-.246c-3.066-.493-4.24.159-4.682.797-1.4 2 1.333 6.9 2.5 8.995.297.536.515.927.616 1.166a8.1 8.1 0 0 0 1.283 2.052c.344.4.596.87.74 1.377.057.094.804 1.109 5.015.24 1.102-.233 1.768 0 1.979.6.398 1.204-1.805 2.595-3.03 3.16a11.2 11.2 0 0 1-4.341.79m-1.776-1.637a4.16 4.16 0 0 0 2.218.282 9.7 9.7 0 0 0 3.312-.688 7.4 7.4 0 0 0 1.913-1.232c-2.761.565-4.718.493-5.798-.232l-.188-.138-.283.087c-.645.218-1.232.34-1.153 1.92zM18.208 34.988a8.7 8.7 0 0 1-2.138-.276c-.218-.05-2.088-.558-2.059-1.754.03-1.196 1.58-1.45 2.175-1.536 2.072-.428 2.174-.595 2.848-1.414.188-.239.428-.543.725-.898a1.986 1.986 0 0 1 2.522-.61 2.73 2.73 0 0 1 1.45 1.776 2.27 2.27 0 0 1-.283 1.994 6.25 6.25 0 0 1-5.24 2.718m-2.711-1.965c.277.175.58.305.899.385 1.79.449 4.29.478 6.001-1.921a1 1 0 0 0 .087-.84 1.4 1.4 0 0 0-.725-.9c-.362-.152-.565-.239-1 .254-.297.333-.515.602-.725.84-.826 1.044-1.203 1.392-3.624 1.9a4 4 0 0 0-.906.282z" /><path fill="#fff" d="M20.186 30.196a.67.67 0 0 1-.66-.572 1.6 1.6 0 0 1 0-.268 6.16 6.16 0 0 1-4.261-1.928 6.99 6.99 0 0 1-1.841-5.864c.231-1.834.277-3.687.138-5.53 0-.312-.037-.537 0-.725.036-.188 0-.725 1.776-1.653a9.9 9.9 0 0 1 3.24-1.007c2.275-.24 3.776.783 4.232 2.9 1.196 5.558.094 8.015-.725 9.813-.152.333-.29.652-.405.95l-.095.275a6.6 6.6 0 0 0-.681 2.834.675.675 0 0 1-.565.768zm-5.334-14.655v.413a29 29 0 0 1-.152 5.799 5.67 5.67 0 0 0 1.486 4.74 4.76 4.76 0 0 0 3.435 1.522 17 17 0 0 1 .63-1.9l.095-.267c.13-.348.283-.682.442-1.037.776-1.718 1.732-3.849.623-8.98a2.02 2.02 0 0 0-1.573-1.754c-1.826-.428-4.428.964-4.986 1.464" /><path fill="#fff" d="M18.548 15.244c0 .217.406.804.972.884a1.02 1.02 0 0 0 1.072-.602c0-.217-.398-.463-.964-.536-.565-.072-1.05 0-1.08.254" /><path fill="#fff" d="M19.657 16.367h-.166a1.51 1.51 0 0 1-.957-.601.82.82 0 0 1-.196-.537.38.38 0 0 1 .174-.282c.352-.193.76-.252 1.153-.167.275.035.543.118.79.246.362.203.384.428.37.544a.97.97 0 0 1-.436.572 1.33 1.33 0 0 1-.732.225m-.877-1.073a1.09 1.09 0 0 0 .776.617.89.89 0 0 0 .819-.392 1.28 1.28 0 0 0-.768-.304 1.3 1.3 0 0 0-.834.08zM35.74 14.801c.037.218-.398.805-.963.885a1.04 1.04 0 0 1-1.08-.602c0-.217.406-.457.964-.536s1.05 0 1.08.253" /><path fill="#fff" d="M34.646 15.809a1.15 1.15 0 0 1-1.058-.725c-.05-.34.5-.595 1.058-.674s1.16 0 1.21.355a.86.86 0 0 1-.29.587 1.37 1.37 0 0 1-.775.42zm.37-1.175h-.334c-.594.08-.891.32-.876.413a.97.97 0 0 0 .956.508c.246-.045.47-.17.638-.355a.73.73 0 0 0 .232-.406c-.029-.058-.232-.16-.616-.16M36.56 27.471a.66.66 0 0 1-.377-.116.67.67 0 0 1-.181-.928c1.311-1.964 1.072-3.971.833-5.914a17.4 17.4 0 0 1-.174-2.522 18 18 0 0 1 .24-2.225c.152-.808.215-1.63.188-2.45a.676.676 0 0 1 1.348-.073c.028.914-.042 1.827-.21 2.726q-.172 1.026-.225 2.065 0 1.167.174 2.32c.246 2.08.53 4.443-1.058 6.82a.68.68 0 0 1-.558.297" /></svg>;
+const ForwardRef = forwardRef(IconTechPostgres);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-python.tsx b/src/components/Icon/glyphs/icon-tech-python.tsx
new file mode 100644
index 0000000000..8543649709
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-python.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechPython = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><radialGradient id="paint0_radial_1031_1963" cx={0} cy={0} r={1} gradientTransform="matrix(0 -2.48291 56.2936 0 23.895 45.735)" gradientUnits="userSpaceOnUse"><stop stopColor="#C6C6C6" /><stop offset={1} stopColor="#fff" /></radialGradient><radialGradient id="paint1_radial_1031_1963" cx={0} cy={0} r={1} gradientTransform="matrix(0 -2.48291 56.2936 0 23.895 45.735)" gradientUnits="userSpaceOnUse"><stop stopColor="#C6C6C6" /><stop offset={1} stopColor="#fff" /></radialGradient><linearGradient id="paint2_linear_1031_1963" x1={38.828} x2={30.863} y1={27.877} y2={16.841} gradientUnits="userSpaceOnUse"><stop stopColor="#FFD33A" /><stop offset={1} stopColor="#FFE873" /></linearGradient><clipPath id="clip0_1031_1963"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g fillRule="evenodd" clipPath="url(#clip0_1031_1963)" clipRule="evenodd"><path fill="url(#paint0_radial_1031_1963)" d="M23.895 48.218c-7.073 0-12.807-1.112-12.807-2.483s5.734-2.483 12.807-2.483 12.807 1.112 12.807 2.483-5.734 2.483-12.807 2.483" /><path fill="url(#paint1_radial_1031_1963)" d="M23.895 48.218c-7.073 0-12.807-1.112-12.807-2.483s5.734-2.483 12.807-2.483 12.807 1.112 12.807 2.483-5.734 2.483-12.807 2.483" /><path fill="url(#paint2_linear_1031_1963)" d="M29.156 33.479c.99 0 1.793.811 1.793 1.815 0 1.007-.803 1.827-1.794 1.827-.987 0-1.793-.82-1.793-1.827 0-1.004.806-1.815 1.794-1.815m5.368-23.046v4.244c0 3.29-2.79 6.059-5.97 6.059h-9.546c-2.614 0-4.778 2.238-4.778 4.857v9.1c0 2.59 2.252 4.113 4.778 4.856 3.025.89 5.926 1.05 9.546 0 2.406-.696 4.778-2.099 4.778-4.856V31.05h-9.546v-1.215H38.11c2.778 0 3.813-1.937 4.78-4.845.997-2.993.954-5.872 0-9.713-.687-2.765-1.998-4.845-4.78-4.845z" /><path fill="#4786CF" d="M4 20.149v-.052c.003-1.506.232-2.99.673-4.819.76-3.176 3.193-4.845 5.97-4.845h13.143V9.22H14.23V5.577c0-2.758.734-4.254 4.778-4.968a27.3 27.3 0 0 1 4.567-.39 30 30 0 0 1 4.979.39c2.593.432 4.778 2.378 4.778 4.968v9.1c0 2.669-2.121 4.856-4.778 4.856h-9.546c-3.24 0-5.97 2.782-5.97 5.937v4.366H9.752c-2.778 0-4.4-2.015-5.08-4.845-.45-1.869-.67-3.368-.672-4.842M18.407 3.148c-.991 0-1.794.82-1.794 1.827 0 1.003.803 1.815 1.794 1.815.987 0 1.793-.812 1.793-1.815 0-1.008-.806-1.827-1.793-1.827" /></g></svg>;
+const ForwardRef = forwardRef(IconTechPython);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-react.tsx b/src/components/Icon/glyphs/icon-tech-react.tsx
new file mode 100644
index 0000000000..91a33e1e3b
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-react.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechReact = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><clipPath id="clip0_1031_1960"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g fill="#61DAFB" clipPath="url(#clip0_1031_1960)"><path d="M48 24.378c0-3.18-3.982-6.193-10.087-8.062 1.409-6.223.783-11.173-1.977-12.758-.636-.372-1.38-.548-2.191-.548v2.182c.45 0 .812.088 1.115.254 1.33.763 1.908 3.669 1.458 7.406-.108.92-.284 1.889-.499 2.877a47 47 0 0 0-6.213-1.066 48 48 0 0 0-4.07-4.893c3.19-2.964 6.183-4.588 8.219-4.588V3c-2.691 0-6.213 1.918-9.775 5.244-3.56-3.307-7.083-5.205-9.774-5.205v2.182c2.026 0 5.03 1.614 8.219 4.56a46 46 0 0 0-4.041 4.881 46 46 0 0 0-6.223 1.077 30 30 0 0 1-.508-2.838c-.46-3.737.107-6.643 1.428-7.416.294-.176.675-.254 1.125-.254V3.049c-.822 0-1.565.176-2.21.548-2.75 1.585-3.367 6.526-1.948 12.729C3.962 18.204 0 21.208 0 24.378c0 3.18 3.982 6.193 10.087 8.062-1.409 6.223-.782 11.173 1.977 12.758.636.372 1.38.548 2.201.548 2.69 0 6.213-1.918 9.774-5.244 3.561 3.307 7.084 5.205 9.774 5.205.822 0 1.566-.176 2.212-.548 2.749-1.585 3.365-6.526 1.947-12.729C44.038 30.561 48 27.548 48 24.378m-12.739-6.526a44 44 0 0 1-1.32 3.865 46 46 0 0 0-1.282-2.348 53 53 0 0 0-1.41-2.29c1.39.206 2.73.46 4.012.773m-4.48 10.42a52 52 0 0 1-2.359 3.737 51 51 0 0 1-8.825.01 54 54 0 0 1-2.367-3.718 51 51 0 0 1-2.036-3.894 51 51 0 0 1 2.026-3.904 52 52 0 0 1 2.358-3.737 51 51 0 0 1 8.825-.01 54 54 0 0 1 2.367 3.718 51 51 0 0 1 2.036 3.894 55 55 0 0 1-2.026 3.904M33.94 27a42 42 0 0 1 1.35 3.894 44 44 0 0 1-4.031.783c.48-.754.958-1.527 1.409-2.32.45-.782.87-1.574 1.272-2.357M24.02 37.44c-.91-.94-1.82-1.987-2.72-3.131.88.039 1.78.068 2.69.068.92 0 1.83-.02 2.72-.068a38 38 0 0 1-2.69 3.13m-7.28-5.763c-1.389-.206-2.73-.46-4.011-.773a44 44 0 0 1 1.32-3.865c.402.783.823 1.566 1.282 2.348q.69 1.174 1.41 2.29m7.23-20.36c.91.939 1.82 1.986 2.72 3.13-.88-.039-1.78-.068-2.69-.068-.92 0-1.83.02-2.72.068a38 38 0 0 1 2.69-3.13m-7.24 5.762a54 54 0 0 0-2.68 4.667 42 42 0 0 1-1.35-3.894 48 48 0 0 1 4.03-.773M7.877 29.33c-3.463-1.478-5.704-3.415-5.704-4.951s2.24-3.483 5.704-4.95a30 30 0 0 1 2.71-.989 47 47 0 0 0 2.202 5.959 46 46 0 0 0-2.172 5.929 30 30 0 0 1-2.74-.998m5.264 13.98c-1.33-.762-1.908-3.668-1.458-7.406.108-.92.284-1.888.499-2.876 1.918.47 4.011.831 6.213 1.066a48 48 0 0 0 4.07 4.892c-3.19 2.965-6.183 4.589-8.219 4.589-.44-.01-.812-.098-1.105-.264m23.207-7.454c.46 3.737-.107 6.643-1.428 7.416-.294.176-.675.254-1.125.254-2.026 0-5.03-1.614-8.219-4.56a46 46 0 0 0 4.041-4.881 46 46 0 0 0 6.223-1.077c.225.989.4 1.938.508 2.848m3.767-6.526a30 30 0 0 1-2.71.988 47 47 0 0 0-2.201-5.959 46 46 0 0 0 2.172-5.929c.968.304 1.888.636 2.749.998 3.463 1.478 5.704 3.415 5.704 4.95-.01 1.537-2.25 3.484-5.714 4.952" /><path d="M23.99 28.85a4.471 4.471 0 1 0 0-8.943 4.471 4.471 0 0 0 0 8.942" /></g></svg>;
+const ForwardRef = forwardRef(IconTechReact);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-reactnative.tsx b/src/components/Icon/glyphs/icon-tech-reactnative.tsx
new file mode 100644
index 0000000000..d702ad4c03
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-reactnative.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechReactnative = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#61DAFB" d="M48 24.378c0-3.18-3.982-6.193-10.087-8.062 1.409-6.223.783-11.173-1.977-12.758-.636-.372-1.38-.548-2.191-.548v2.182c.45 0 .812.088 1.115.254 1.33.763 1.908 3.669 1.458 7.406-.108.92-.284 1.889-.499 2.877a47 47 0 0 0-6.213-1.066 48 48 0 0 0-4.07-4.893c3.19-2.964 6.183-4.588 8.219-4.588V3c-2.691 0-6.213 1.918-9.775 5.244-3.56-3.307-7.083-5.205-9.774-5.205v2.182c2.026 0 5.03 1.614 8.219 4.56a46 46 0 0 0-4.041 4.881 46 46 0 0 0-6.223 1.077 30 30 0 0 1-.508-2.838c-.46-3.737.107-6.643 1.428-7.416.294-.176.675-.254 1.125-.254V3.049c-.822 0-1.565.176-2.21.548-2.75 1.585-3.367 6.526-1.948 12.729C3.962 18.204 0 21.208 0 24.378c0 3.18 3.982 6.193 10.087 8.062-1.409 6.223-.782 11.173 1.977 12.758.636.372 1.38.548 2.201.548 2.69 0 6.213-1.918 9.774-5.244 3.561 3.307 7.084 5.205 9.774 5.205.822 0 1.566-.176 2.212-.548 2.749-1.585 3.365-6.526 1.947-12.729C44.038 30.561 48 27.548 48 24.378m-12.739-6.526a44 44 0 0 1-1.32 3.865 46 46 0 0 0-1.282-2.348 53 53 0 0 0-1.41-2.29c1.39.206 2.73.46 4.012.773m-4.48 10.42a52 52 0 0 1-2.359 3.737 51 51 0 0 1-8.825.01 54 54 0 0 1-2.367-3.718 51 51 0 0 1-2.036-3.894 51 51 0 0 1 2.026-3.904 52 52 0 0 1 2.358-3.737 51 51 0 0 1 8.825-.01 54 54 0 0 1 2.367 3.718 51 51 0 0 1 2.036 3.894 55 55 0 0 1-2.026 3.904M33.94 27a42 42 0 0 1 1.35 3.894 44 44 0 0 1-4.031.783c.48-.754.958-1.527 1.409-2.32.45-.782.87-1.574 1.272-2.357M24.02 37.44c-.91-.94-1.82-1.987-2.72-3.131.88.039 1.78.068 2.69.068.92 0 1.83-.02 2.72-.068a38 38 0 0 1-2.69 3.13m-7.28-5.763c-1.389-.206-2.73-.46-4.011-.773a44 44 0 0 1 1.32-3.865c.402.783.823 1.566 1.282 2.348q.69 1.174 1.41 2.29m7.23-20.36c.91.939 1.82 1.986 2.72 3.13-.88-.039-1.78-.068-2.69-.068-.92 0-1.83.02-2.72.068a38 38 0 0 1 2.69-3.13m-7.24 5.762a54 54 0 0 0-2.68 4.667 42 42 0 0 1-1.35-3.894 48 48 0 0 1 4.03-.773M7.877 29.33c-3.463-1.478-5.704-3.415-5.704-4.951s2.24-3.483 5.704-4.95a30 30 0 0 1 2.71-.989 47 47 0 0 0 2.202 5.959 46 46 0 0 0-2.172 5.929 30 30 0 0 1-2.74-.998m5.264 13.98c-1.33-.762-1.908-3.668-1.458-7.406.108-.92.284-1.888.499-2.876 1.918.47 4.011.831 6.213 1.066a48 48 0 0 0 4.07 4.892c-3.19 2.965-6.183 4.589-8.219 4.589-.44-.01-.812-.098-1.105-.264m23.207-7.454c.46 3.737-.107 6.643-1.428 7.416-.294.176-.675.254-1.125.254-2.026 0-5.03-1.614-8.219-4.56a46 46 0 0 0 4.041-4.881 46 46 0 0 0 6.223-1.077c.225.989.4 1.938.508 2.848m3.767-6.526a30 30 0 0 1-2.71.988 47 47 0 0 0-2.201-5.959 46 46 0 0 0 2.172-5.929c.968.304 1.888.636 2.749.998 3.463 1.478 5.704 3.415 5.704 4.95-.01 1.537-2.25 3.484-5.714 4.952" /><path fill="#61DAFB" d="M23.99 28.85a4.471 4.471 0 1 0 0-8.943 4.471 4.471 0 0 0 0 8.942" /></svg>;
+const ForwardRef = forwardRef(IconTechReactnative);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-ruby.tsx b/src/components/Icon/glyphs/icon-tech-ruby.tsx
new file mode 100644
index 0000000000..311f07a238
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-ruby.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechRuby = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_1031_2037" x1={51.112} x2={41.001} y1={47.178} y2={29.274} gradientUnits="userSpaceOnUse"><stop stopColor="#FB7655" /><stop stopColor="#FB7655" /><stop offset={0.41} stopColor="#E42B1E" /><stop offset={0.99} stopColor="#900" /><stop offset={1} stopColor="#900" /></linearGradient><linearGradient id="paint1_linear_1031_2037" x1={67.988} x2={22.822} y1={-4.343} y2={-6.911} gradientUnits="userSpaceOnUse"><stop stopColor="#871101" /><stop stopColor="#871101" /><stop offset={0.99} stopColor="#911209" /><stop offset={1} stopColor="#911209" /></linearGradient><linearGradient id="paint2_linear_1031_2037" x1={2787.28} x2={2787.11} y1={559.152} y2={-83.088} gradientUnits="userSpaceOnUse"><stop stopColor="#871101" /><stop stopColor="#871101" /><stop offset={0.99} stopColor="#911209" /><stop offset={1} stopColor="#911209" /></linearGradient><linearGradient id="paint3_linear_1031_2037" x1={4.959} x2={12.911} y1={34.187} y2={44.708} gradientUnits="userSpaceOnUse"><stop stopColor="#fff" /><stop stopColor="#fff" /><stop offset={0.23} stopColor="#E57252" /><stop offset={0.46} stopColor="#DE3B20" /><stop offset={0.99} stopColor="#A60003" /><stop offset={1} stopColor="#A60003" /></linearGradient><linearGradient id="paint4_linear_1031_2037" x1={-11.51} x2={1.418} y1={52.752} y2={53.259} gradientUnits="userSpaceOnUse"><stop stopColor="#fff" /><stop stopColor="#fff" /><stop offset={0.31} stopColor="#DE4024" /><stop offset={0.99} stopColor="#BF190B" /><stop offset={1} stopColor="#BF190B" /></linearGradient><linearGradient id="paint5_linear_1031_2037" x1={16.647} x2={17.436} y1={18.967} y2={32.38} gradientUnits="userSpaceOnUse"><stop stopColor="#fff" /><stop stopColor="#fff" /><stop offset={0.23} stopColor="#E4714E" /><stop offset={0.56} stopColor="#BE1A0D" /><stop offset={0.99} stopColor="#A80D00" /><stop offset={1} stopColor="#A80D00" /></linearGradient><linearGradient id="paint6_linear_1031_2037" x1={21.859} x2={22.969} y1={2.592} y2={22.043} gradientUnits="userSpaceOnUse"><stop stopColor="#fff" /><stop stopColor="#fff" /><stop offset={0.18} stopColor="#E46342" /><stop offset={0.4} stopColor="#C82410" /><stop offset={0.99} stopColor="#A80D00" /><stop offset={1} stopColor="#A80D00" /></linearGradient><linearGradient id="paint7_linear_1031_2037" x1={88.161} x2={89.301} y1={7.302} y2={-33.694} gradientUnits="userSpaceOnUse"><stop stopColor="#fff" /><stop stopColor="#fff" /><stop offset={0.54} stopColor="#C81F11" /><stop offset={0.99} stopColor="#BF0905" /><stop offset={1} stopColor="#BF0905" /></linearGradient><linearGradient id="paint8_linear_1031_2037" x1={14.71} x2={51.846} y1={56.193} y2={17.788} gradientUnits="userSpaceOnUse"><stop stopColor="#BD0012" /><stop stopColor="#BD0012" /><stop offset={0.07} stopColor="#fff" /><stop offset={0.17} stopColor="#fff" /><stop offset={0.27} stopColor="#C82F1C" /><stop offset={0.33} stopColor="#820C01" /><stop offset={0.46} stopColor="#A31601" /><stop offset={0.72} stopColor="#B31301" /><stop offset={0.99} stopColor="#E82609" /><stop offset={1} stopColor="#E82609" /></linearGradient><linearGradient id="paint9_linear_1031_2037" x1={27.062} x2={17.422} y1={39.083} y2={32.193} gradientUnits="userSpaceOnUse"><stop stopColor="#8C0C01" /><stop stopColor="#8C0C01" /><stop offset={0.54} stopColor="#990C00" /><stop offset={0.99} stopColor="#A80D0E" /><stop offset={1} stopColor="#A80D0E" /></linearGradient><linearGradient id="paint10_linear_1031_2037" x1={11.381} x2={-7.149} y1={31.099} y2={27.336} gradientUnits="userSpaceOnUse"><stop stopColor="#8B2114" /><stop stopColor="#8B2114" /><stop offset={0.43} stopColor="#9E100A" /><stop offset={0.99} stopColor="#B3100C" /><stop offset={1} stopColor="#B3100C" /></linearGradient><linearGradient id="paint11_linear_1031_2037" x1={48.563} x2={35.215} y1={20.922} y2={13.408} gradientUnits="userSpaceOnUse"><stop stopColor="#7E110B" /><stop stopColor="#7E110B" /><stop offset={0.99} stopColor="#9E0C00" /><stop offset={1} stopColor="#9E0C00" /></linearGradient><linearGradient id="paint13_linear_1031_2037" x1={49.814} x2={44.46} y1={8.931} y2={3.77} gradientUnits="userSpaceOnUse"><stop stopColor="#79130D" /><stop stopColor="#79130D" /><stop offset={0.99} stopColor="#9E120B" /><stop offset={1} stopColor="#9E120B" /></linearGradient><linearGradient id="paint15_linear_1031_2037" x1={10.024} x2={11.64} y1={0.08} y2={23.505} gradientUnits="userSpaceOnUse"><stop stopColor="#B31000" /><stop stopColor="#B31000" /><stop offset={0.44} stopColor="#910F08" /><stop offset={0.99} stopColor="#791C12" /><stop offset={1} stopColor="#791C12" /></linearGradient><radialGradient id="paint12_radial_1031_2037" cx={0} cy={0} r={1} gradientTransform="matrix(16.212 0 0 12.6203 17.943 35.297)" gradientUnits="userSpaceOnUse"><stop stopColor="#A30C00" /><stop stopColor="#A30C00" /><stop offset={0.99} stopColor="#800E08" /><stop offset={1} stopColor="#800E08" /></radialGradient><radialGradient id="paint14_radial_1031_2037" cx={0} cy={0} r={1} gradientTransform="matrix(12.1954 0 0 6.37254 34.832 19.226)" gradientUnits="userSpaceOnUse"><stop stopColor="#A80D00" /><stop stopColor="#A80D00" /><stop offset={0.99} stopColor="#7E0E08" /><stop offset={1} stopColor="#7E0E08" /></radialGradient><clipPath id="clip0_1031_2037"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g clipPath="url(#clip0_1031_2037)"><path fill="url(#paint0_linear_1031_2037)" d="M37.174 31.582 9.779 47.849l35.471-2.407 2.732-35.767z" /><path fill="url(#paint1_linear_1031_2037)" d="M45.308 45.417 42.26 24.375l-8.305 10.966z" /><path fill="url(#paint2_linear_1031_2037)" d="m45.35 45.417-22.336-1.753-13.116 4.139z" /><path fill="url(#paint3_linear_1031_2037)" d="m9.93 47.808 5.58-18.28-12.28 2.626z" /><path fill="url(#paint4_linear_1031_2037)" d="m0 38.285 3.422-6.24-2.768-7.436z" /><path fill="url(#paint5_linear_1031_2037)" d="m33.953 35.401-5.134-20.11-14.693 13.773z" /><path fill="url(#paint6_linear_1031_2037)" d="M46.817 15.574 32.93 4.23 29.06 16.734z" /><path fill="url(#paint7_linear_1031_2037)" d="m40.322.186-8.168 4.515L27 .126z" /><path fill="#fff" d="m.47 24.375 2.785 7.9 12.102-2.715 13.815-12.84 3.9-12.385L26.931 0 16.494 3.906c-3.288 3.059-9.67 9.11-9.9 9.225-.227.116-4.213 7.65-6.124 11.244" /><path fill="url(#paint8_linear_1031_2037)" d="M10.249 10.183C17.376 3.117 26.564-1.059 30.09 2.5c3.524 3.558-.213 12.203-7.34 19.268-7.128 7.064-16.202 11.469-19.725 7.911-3.526-3.555.097-12.43 7.224-19.495" /><path fill="url(#paint9_linear_1031_2037)" d="m9.93 47.8 5.535-18.337 18.386 5.907C27.203 41.603 19.81 46.873 9.93 47.8" /><path fill="#9E1209" d="M0 38.204c.262 9.408 7.05 9.548 9.941 9.631L3.262 32.236z" /><path fill="url(#paint10_linear_1031_2037)" d="M3.233 32.255 2.185 44.742c1.978 2.702 4.7 2.937 7.555 2.727-2.065-5.142-6.192-15.422-6.507-15.214" /><path fill="url(#paint11_linear_1031_2037)" d="m29.197 16.683 4.72 18.696C39.47 29.54 44.453 23.263 46.894 15.5z" /><path fill="url(#paint12_radial_1031_2037)" d="m15.458 29.463 7.4 14.279c4.377-2.374 7.804-5.265 10.942-8.363z" /><path fill="url(#paint13_linear_1031_2037)" d="M46.846 15.594c1.89-5.701 2.325-13.88-6.582-15.398l-7.31 4.037z" /><path fill="url(#paint14_radial_1031_2037)" d="M29.223 16.713c4.267 2.622 12.867 7.89 13.041 7.987.271.152 3.708-5.796 4.488-9.157z" /><path fill="url(#paint15_linear_1031_2037)" d="m32.912 4.265 14.702 2.063C46.83 3.003 44.42.858 40.312.187z" /></g></svg>;
+const ForwardRef = forwardRef(IconTechRuby);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-swift.tsx b/src/components/Icon/glyphs/icon-tech-swift.tsx
new file mode 100644
index 0000000000..b184fd3d64
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-swift.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechSwift = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id="paint0_linear_1031_1912" x1={2.813} x2={-6.259} y1={-6.259} y2={45.187} gradientUnits="userSpaceOnUse"><stop stopColor="#FAAE41" /><stop offset={1} stopColor="#EF3E31" /></linearGradient><linearGradient id="paint1_linear_1031_1912" x1={4.876} x2={-1.23} y1={-2.365} y2={35.34} gradientUnits="userSpaceOnUse"><stop stopColor="#E29F3A" /><stop offset={1} stopColor="#D43929" /></linearGradient><clipPath id="clip0_1031_1912"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g fillRule="evenodd" clipPath="url(#clip0_1031_1912)" clipRule="evenodd"><path fill="url(#paint0_linear_1031_1912)" d="M10.633 0C4.76 0 0 4.76 0 10.633v26.734C0 43.24 4.76 48 10.633 48h26.734C43.24 48 48 43.24 48 37.367V10.633C48 4.76 43.24 0 37.367 0z" /><path fill="url(#paint1_linear_1031_1912)" d="M10.624.038C4.756.038 0 4.795 0 10.662v12.092l4.925 5.301c.05.088 6.417 11.228 19.817 11.228 6.054 0 7.813-3.104 10.814-3.104 3.104 0 4.967 3.104 4.967 3.104 1.811-4.45-2.69-9.52-2.69-9.52s5.122-11.848-10.71-22.61l-.001-.001L20.107.038z" /><path fill="#FEFEFE" d="M27.16 7.155c15.833 10.763 10.71 22.612 10.71 22.612s4.502 5.07 2.691 9.52c0 0-1.863-3.105-4.967-3.105-3.001 0-4.76 3.105-10.814 3.105-13.453 0-19.817-11.228-19.817-11.228 12.113 7.982 20.386 2.328 20.386 2.328-5.465-3.174-17.075-18.316-17.075-18.316 10.12 8.608 14.488 10.865 14.488 10.865-2.615-2.152-9.935-12.676-9.935-12.676 5.857 5.926 17.49 14.177 17.49 14.177 3.317-9.12-3.157-17.282-3.157-17.282" /></g></svg>;
+const ForwardRef = forwardRef(IconTechSwift);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-typescript.tsx b/src/components/Icon/glyphs/icon-tech-typescript.tsx
new file mode 100644
index 0000000000..e626a0c4cc
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-typescript.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechTypescript = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><clipPath id="clip0_1031_1977"><path fill="#fff" d="M0 0h48v48H0z" /></clipPath></defs><g clipPath="url(#clip0_1031_1977)"><path fill="#007ACC" d="M0 24V0h48v48H0" /><path fill="#fff" fillRule="evenodd" d="M41.568 23.796c-.84-.876-1.776-1.428-3-1.716l.024-.024c-.828-.216-2.808-.288-3.648-.12-2.592.48-4.404 2.16-4.92 4.56-.168.684-.108 2.388.072 3.084.24.804.756 1.776 1.32 2.4.984 1.032 2.04 1.704 4.524 2.76 2.16.96 2.928 1.392 3.312 1.92.276.42.36.672.36 1.224 0 .6-.192 1.032-.636 1.44-1.032.936-3.12 1.044-4.68.24-.516-.288-1.404-1.128-1.8-1.752l-.312-.42-1.356.792-1.8 1.044-.456.288c-.048.084.804 1.368 1.248 1.848 1.128 1.236 2.964 2.196 4.884 2.556.9.156 2.82.18 3.66.036 2.676-.444 4.548-1.8 5.316-3.804.684-1.836.456-4.284-.564-5.844-.9-1.392-2.388-2.364-5.82-3.84-1.86-.816-2.46-1.212-2.784-1.872-.144-.312-.216-.528-.216-.912 0-1.26.96-2.016 2.4-1.92.996.072 1.632.456 2.256 1.344.192.312.384.516.432.48 1.26-.78 3.336-2.184 3.336-2.256-.048-.216-.708-1.056-1.152-1.536M10.524 26.04v-1.956l.036.012v-1.968l8.4-.036c4.62 0 8.424.012 8.424.048.048.024.048.9.048 1.98v1.92h-6.24V43.8h-4.428V26.04z" clipRule="evenodd" /></g></svg>;
+const ForwardRef = forwardRef(IconTechTypescript);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-vercel.tsx b/src/components/Icon/glyphs/icon-tech-vercel.tsx
new file mode 100644
index 0000000000..1380bbf9f1
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-vercel.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechVercel = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#000" d="m23.856 6 20.785 36H3.07z" /></svg>;
+const ForwardRef = forwardRef(IconTechVercel);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/icon-tech-web.tsx b/src/components/Icon/glyphs/icon-tech-web.tsx
new file mode 100644
index 0000000000..d906a579ce
--- /dev/null
+++ b/src/components/Icon/glyphs/icon-tech-web.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const IconTechWeb = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={48} height={48} fill="none" viewBox="0 0 48 48" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill="#03020D" fillRule="evenodd" d="M4 2h40a2 2 0 0 1 2 2v6H2V4a2 2 0 0 1 2-2m-4 8V4a4 4 0 0 1 4-4h40a4 4 0 0 1 4 4v40a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V10m2 2v32a2 2 0 0 0 2 2h40a2 2 0 0 0 2-2V12z" clipRule="evenodd" /><path fill="#03020D" d="m14.816 32.52 1.584-6.036 1.596 6.036h1.488L21.812 24h-1.584l-1.488 6.12L17.144 24h-1.476l-1.608 6.12L12.584 24H11l2.328 8.52zM28.025 32.52v-1.404h-3.6v-2.172h3.336V27.54h-3.336v-2.136h3.54V24h-5.04v8.52zM33.073 32.52c1.692 0 2.64-1.02 2.64-2.364 0-.996-.54-1.812-1.524-2.172.612-.396.936-1.032.936-1.776 0-1.248-.9-2.208-2.52-2.208h-3.024v8.52zm-.216-3.576c.72 0 1.272.336 1.272 1.08s-.552 1.092-1.272 1.092H31.13v-2.172zm-.432-3.54c.624 0 1.128.324 1.128 1.044 0 .768-.504 1.092-1.128 1.092H31.13v-2.136zM14 6c0-1.09.91-2 2-2s2 .91 2 2-.91 2-2 2-2-.91-2-2M9 6c0-1.09.91-2 2-2s2 .91 2 2-.91 2-2 2-2-.91-2-2M4 6c0-1.09.91-2 2-2s2 .91 2 2-.91 2-2 2-2-.91-2-2" /></svg>;
+const ForwardRef = forwardRef(IconTechWeb);
+export default ForwardRef;
\ No newline at end of file
diff --git a/src/components/Icon/glyphs/index.ts b/src/components/Icon/glyphs/index.ts
new file mode 100644
index 0000000000..302b2e993a
--- /dev/null
+++ b/src/components/Icon/glyphs/index.ts
@@ -0,0 +1,126 @@
+import type { ComponentType, SVGProps } from "react";
+import IconGuiAblyBadge from "./icon-gui-ably-badge";
+import IconGuiProdAiTransportOutline from "./icon-gui-prod-ai-transport-outline";
+import IconGuiProdAiTransportSolid from "./icon-gui-prod-ai-transport-solid";
+import IconGuiProdChatOutline from "./icon-gui-prod-chat-outline";
+import IconGuiProdChatSolid from "./icon-gui-prod-chat-solid";
+import IconGuiProdLiveobjectsOutline from "./icon-gui-prod-liveobjects-outline";
+import IconGuiProdLiveobjectsSolid from "./icon-gui-prod-liveobjects-solid";
+import IconGuiProdLivesyncOutline from "./icon-gui-prod-livesync-outline";
+import IconGuiProdLivesyncSolid from "./icon-gui-prod-livesync-solid";
+import IconGuiProdPubsubOutline from "./icon-gui-prod-pubsub-outline";
+import IconGuiProdPubsubSolid from "./icon-gui-prod-pubsub-solid";
+import IconGuiProdSpacesOutline from "./icon-gui-prod-spaces-outline";
+import IconGuiProdSpacesSolid from "./icon-gui-prod-spaces-solid";
+import IconGuiResources from "./icon-gui-resources";
+import IconProductAiTransportMono from "./icon-product-ai-transport-mono";
+import IconProductAiTransport from "./icon-product-ai-transport";
+import IconProductChatMono from "./icon-product-chat-mono";
+import IconProductChat from "./icon-product-chat";
+import IconProductLiveobjectsMono from "./icon-product-liveobjects-mono";
+import IconProductLiveobjects from "./icon-product-liveobjects";
+import IconProductLivesyncMono from "./icon-product-livesync-mono";
+import IconProductLivesync from "./icon-product-livesync";
+import IconProductPlatformMono from "./icon-product-platform-mono";
+import IconProductPlatform from "./icon-product-platform";
+import IconProductPubsubMono from "./icon-product-pubsub-mono";
+import IconProductPubsub from "./icon-product-pubsub";
+import IconProductSpacesMono from "./icon-product-spaces-mono";
+import IconProductSpaces from "./icon-product-spaces";
+import IconSocialDiscordMono from "./icon-social-discord-mono";
+import IconSocialGithubMono from "./icon-social-github-mono";
+import IconSocialGithub from "./icon-social-github";
+import IconSocialLinkedinMono from "./icon-social-linkedin-mono";
+import IconSocialStackoverflowMono from "./icon-social-stackoverflow-mono";
+import IconSocialXMono from "./icon-social-x-mono";
+import IconSocialYoutubeMono from "./icon-social-youtube-mono";
+import IconTechAndroidFull from "./icon-tech-android-full";
+import IconTechClaudeMono from "./icon-tech-claude-mono";
+import IconTechCsharp from "./icon-tech-csharp";
+import IconTechFlutter from "./icon-tech-flutter";
+import IconTechGo from "./icon-tech-go";
+import IconTechJava from "./icon-tech-java";
+import IconTechJavascript from "./icon-tech-javascript";
+import IconTechJson from "./icon-tech-json";
+import IconTechKotlin from "./icon-tech-kotlin";
+import IconTechLaravelBroadcast from "./icon-tech-laravel-broadcast";
+import IconTechNextjs from "./icon-tech-nextjs";
+import IconTechNodejs from "./icon-tech-nodejs";
+import IconTechObjectivec from "./icon-tech-objectivec";
+import IconTechOpenai from "./icon-tech-openai";
+import IconTechPhp from "./icon-tech-php";
+import IconTechPostgres from "./icon-tech-postgres";
+import IconTechPython from "./icon-tech-python";
+import IconTechReact from "./icon-tech-react";
+import IconTechReactnative from "./icon-tech-reactnative";
+import IconTechRuby from "./icon-tech-ruby";
+import IconTechSwift from "./icon-tech-swift";
+import IconTechTypescript from "./icon-tech-typescript";
+import IconTechVercel from "./icon-tech-vercel";
+import IconTechWeb from "./icon-tech-web";
+
+export type GlyphProps = SVGProps<SVGSVGElement> & { title?: string; titleId?: string };
+
+// Glyph components keyed by icon name. `satisfies` keeps the keys as a literal union so
+// IconName can be checked against them, while still enforcing the value type.
+export const glyphs = {
+  "icon-gui-ably-badge": IconGuiAblyBadge,
+  "icon-gui-prod-ai-transport-outline": IconGuiProdAiTransportOutline,
+  "icon-gui-prod-ai-transport-solid": IconGuiProdAiTransportSolid,
+  "icon-gui-prod-chat-outline": IconGuiProdChatOutline,
+  "icon-gui-prod-chat-solid": IconGuiProdChatSolid,
+  "icon-gui-prod-liveobjects-outline": IconGuiProdLiveobjectsOutline,
+  "icon-gui-prod-liveobjects-solid": IconGuiProdLiveobjectsSolid,
+  "icon-gui-prod-livesync-outline": IconGuiProdLivesyncOutline,
+  "icon-gui-prod-livesync-solid": IconGuiProdLivesyncSolid,
+  "icon-gui-prod-pubsub-outline": IconGuiProdPubsubOutline,
+  "icon-gui-prod-pubsub-solid": IconGuiProdPubsubSolid,
+  "icon-gui-prod-spaces-outline": IconGuiProdSpacesOutline,
+  "icon-gui-prod-spaces-solid": IconGuiProdSpacesSolid,
+  "icon-gui-resources": IconGuiResources,
+  "icon-product-ai-transport-mono": IconProductAiTransportMono,
+  "icon-product-ai-transport": IconProductAiTransport,
+  "icon-product-chat-mono": IconProductChatMono,
+  "icon-product-chat": IconProductChat,
+  "icon-product-liveobjects-mono": IconProductLiveobjectsMono,
+  "icon-product-liveobjects": IconProductLiveobjects,
+  "icon-product-livesync-mono": IconProductLivesyncMono,
+  "icon-product-livesync": IconProductLivesync,
+  "icon-product-platform-mono": IconProductPlatformMono,
+  "icon-product-platform": IconProductPlatform,
+  "icon-product-pubsub-mono": IconProductPubsubMono,
+  "icon-product-pubsub": IconProductPubsub,
+  "icon-product-spaces-mono": IconProductSpacesMono,
+  "icon-product-spaces": IconProductSpaces,
+  "icon-social-discord-mono": IconSocialDiscordMono,
+  "icon-social-github-mono": IconSocialGithubMono,
+  "icon-social-github": IconSocialGithub,
+  "icon-social-linkedin-mono": IconSocialLinkedinMono,
+  "icon-social-stackoverflow-mono": IconSocialStackoverflowMono,
+  "icon-social-x-mono": IconSocialXMono,
+  "icon-social-youtube-mono": IconSocialYoutubeMono,
+  "icon-tech-android-full": IconTechAndroidFull,
+  "icon-tech-claude-mono": IconTechClaudeMono,
+  "icon-tech-csharp": IconTechCsharp,
+  "icon-tech-flutter": IconTechFlutter,
+  "icon-tech-go": IconTechGo,
+  "icon-tech-java": IconTechJava,
+  "icon-tech-javascript": IconTechJavascript,
+  "icon-tech-json": IconTechJson,
+  "icon-tech-kotlin": IconTechKotlin,
+  "icon-tech-laravel-broadcast": IconTechLaravelBroadcast,
+  "icon-tech-nextjs": IconTechNextjs,
+  "icon-tech-nodejs": IconTechNodejs,
+  "icon-tech-objectivec": IconTechObjectivec,
+  "icon-tech-openai": IconTechOpenai,
+  "icon-tech-php": IconTechPhp,
+  "icon-tech-postgres": IconTechPostgres,
+  "icon-tech-python": IconTechPython,
+  "icon-tech-react": IconTechReact,
+  "icon-tech-reactnative": IconTechReactnative,
+  "icon-tech-ruby": IconTechRuby,
+  "icon-tech-swift": IconTechSwift,
+  "icon-tech-typescript": IconTechTypescript,
+  "icon-tech-vercel": IconTechVercel,
+  "icon-tech-web": IconTechWeb,
+} satisfies Record<string, ComponentType<GlyphProps>>;
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
new file mode 100644
index 0000000000..fd849a6d71
--- /dev/null
+++ b/src/components/Icon/index.tsx
@@ -0,0 +1,60 @@
+import React, { useCallback, useId } from 'react';
+
+import cn from 'src/utilities/cn';
+
+import { glyphs, type GlyphProps } from './glyphs';
+import { setUniqueIds } from './set-unique-ids';
+import type { IconName } from './types';
+
+export type { IconName };
+
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'color'> {
+  name: IconName;
+  /** CSS width & height, e.g. "1rem" or "20px". */
+  size?: string;
+  /** Tailwind text-colour class, appended to the icon's className. */
+  color?: string;
+  additionalCSS?: string;
+}
+
+type SvgComponent = React.ForwardRefExoticComponent<GlyphProps & React.RefAttributes<SVGSVGElement>>;
+
+// Renders a vendored Ably glyph by name; unknown names render null. Heroicons are
+// imported directly as components at call sites — this only handles Ably's own icons.
+const Icon = ({
+  name,
+  size = '0.75rem',
+  color,
+  additionalCSS = '',
+  className,
+  style,
+  ...rest
+}: IconProps): React.ReactElement | null => {
+  const Component = glyphs[name as keyof typeof glyphs] as SvgComponent | undefined;
+
+  // Per-instance id rewriting so a gradient/mask glyph rendered more than once on a
+  // page doesn't collide on duplicate DOM ids.
+  const uniqueId = useId();
+  const ref = useCallback((el: SVGSVGElement | null) => setUniqueIds(el, uniqueId), [uniqueId]);
+
+  if (!Component) {
+    // Dev-only: a name with no vendored glyph renders nothing. Surfaces typos and
+    // un-vendored names (e.g. a Heroicon name) that the open IconName type can't catch.
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(`[Icon] no glyph for "${name}", render skipped`);
+    }
+    return null;
+  }
+
+  return (
+    <Component
+      ref={ref}
+      aria-hidden
+      className={cn(color, additionalCSS, className) || undefined}
+      style={{ width: size, height: size, ...style }}
+      {...rest}
+    />
+  );
+};
+
+export default Icon;
diff --git a/src/components/Icon/set-unique-ids.ts b/src/components/Icon/set-unique-ids.ts
new file mode 100644
index 0000000000..f927f0130e
--- /dev/null
+++ b/src/components/Icon/set-unique-ids.ts
@@ -0,0 +1,32 @@
+// Rewrites in-SVG ids (and the url(#…) refs to them) to be unique per Icon instance,
+// so duplicate gradient/mask glyphs on a page don't collide on DOM ids.
+export const setUniqueIds = (el: SVGSVGElement | null, uniqueId: string): void => {
+  if (!el) {
+    return;
+  }
+
+  const defsElements = el.querySelectorAll('defs [id]');
+  const elementsWithUrls = el.querySelectorAll(
+    '[fill*="url("], [stroke*="url("], [filter*="url("], [clip-path*="url("], [mask*="url("]',
+  );
+
+  defsElements.forEach((def) => {
+    const oldId = def.id;
+    if (oldId.includes(uniqueId)) {
+      return;
+    }
+
+    const newId = `${oldId}-${uniqueId}`;
+    def.id = newId;
+
+    const regex = new RegExp(`url\\(#${oldId}\\)`, 'g');
+    elementsWithUrls.forEach((element) => {
+      ['fill', 'stroke', 'filter', 'clip-path', 'mask'].forEach((attr) => {
+        const value = element.getAttribute(attr);
+        if (value && value.includes(`url(#${oldId})`)) {
+          element.setAttribute(attr, value.replace(regex, `url(#${newId})`));
+        }
+      });
+    });
+  });
+};
diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
new file mode 100644
index 0000000000..c9141408a3
--- /dev/null
+++ b/src/components/Icon/types.ts
@@ -0,0 +1,5 @@
+import { glyphs } from './glyphs';
+
+// Static glyph names are checked against the vendored registry; `icon-tech-${language}`
+// stays open for the dynamically-built language icons.
+export type IconName = keyof typeof glyphs | `icon-tech-${string}`;
diff --git a/src/components/Layout/Breadcrumbs.tsx b/src/components/Layout/Breadcrumbs.tsx
index 31121740af..1e0b957896 100644
--- a/src/components/Layout/Breadcrumbs.tsx
+++ b/src/components/Layout/Breadcrumbs.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import Link from '../Link';
-import Icon from '@ably/ui/core/Icon';
 import cn from 'src/utilities/cn';
 import { hierarchicalKey } from './utils/nav';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
 
 const linkStyles =
   'ui-text-label4 font-semibold text-neutral-900 hover:text-neutral-1300 active:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-000 dark:active:text-neutral-500 focus-base transition-colors whitespace-nowrap';
@@ -37,30 +37,26 @@ const Breadcrumbs: React.FC = () => {
   return (
     <nav aria-label="breadcrumb" className="flex items-center gap-1 min-w-0 flex-wrap">
       {lastActiveNodeIndex === null && (
-        <Icon
-          name="icon-gui-chevron-left-solid"
-          size="12px"
-          color="text-neutral-900 dark:text-neutral-400"
-          additionalCSS="md:hidden shrink-0"
+        <ChevronLeftIcon
+          className="size-[12px] text-neutral-900 dark:text-neutral-400 md:hidden shrink-0"
+          aria-hidden
         />
       )}
       <Link to="/docs" className={cn(linkStyles, lastActiveNodeIndex !== null && 'hidden md:block')}>
         Home
       </Link>
-      <Icon
-        name="icon-gui-chevron-right-solid"
-        size="12px"
-        color="text-neutral-900 dark:text-neutral-400"
-        additionalCSS={cn('shrink-0 rotate-180 md:rotate-0', { 'hidden md:flex': lastActiveNodeIndex === null })}
+      <ChevronRightIcon
+        className={cn('size-[12px] text-neutral-900 dark:text-neutral-400 shrink-0 rotate-180 md:rotate-0', {
+          'hidden md:flex': lastActiveNodeIndex === null,
+        })}
+        aria-hidden
       />
       {activePage.tree.map((node, index) => (
         <React.Fragment key={hierarchicalKey(node.page.link, index, activePage.tree)}>
           {index > 0 ? (
-            <Icon
-              name="icon-gui-chevron-right-solid"
-              size="12px"
-              color="text-neutral-900 dark:text-neutral-400"
-              additionalCSS="hidden md:flex shrink-0"
+            <ChevronRightIcon
+              className="size-[12px] text-neutral-900 dark:text-neutral-400 hidden md:flex shrink-0"
+              aria-hidden
             />
           ) : null}
           <Link
diff --git a/src/components/Layout/CopyForLLM.test.tsx b/src/components/Layout/CopyForLLM.test.tsx
index 03d0de30f2..0812ed06cd 100644
--- a/src/components/Layout/CopyForLLM.test.tsx
+++ b/src/components/Layout/CopyForLLM.test.tsx
@@ -24,7 +24,7 @@ jest.mock('@reach/router', () => ({
   useLocation: () => ({ pathname: '/docs/test-page' }),
 }));
 
-jest.mock('@ably/ui/core/Icon', () => ({
+jest.mock('src/components/Icon', () => ({
   __esModule: true,
   default: ({ name }: { name: string }) => <span data-testid={`icon-${name}`}>{name}</span>,
 }));
diff --git a/src/components/Layout/CopyForLLM.tsx b/src/components/Layout/CopyForLLM.tsx
index bbd979803f..245a72e245 100644
--- a/src/components/Layout/CopyForLLM.tsx
+++ b/src/components/Layout/CopyForLLM.tsx
@@ -2,14 +2,16 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation } from '@reach/router';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import cn from 'src/utilities/cn';
-import Icon from '@ably/ui/core/Icon';
-import { IconName } from '@ably/ui/core/Icon/types';
+import Icon from 'src/components/Icon';
+import { IconName } from 'src/components/Icon/types';
 import { track } from '@ably/ui/core/insights';
 import { productData } from 'src/data';
 import { languageInfo } from 'src/data/languages';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import { ButtonGroup, ButtonGroupSeparator } from 'src/components/ui/ButtonGroup';
 import { secondaryButtonClassName } from './utils/styles';
+import { ArrowTopRightOnSquareIcon, EyeIcon, Square2StackIcon } from '@heroicons/react/24/outline';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
 
 const menuItemClassName =
   'flex items-center gap-2 px-3 py-2 text-sm text-neutral-1300 dark:text-neutral-000 hover:bg-neutral-100 dark:hover:bg-neutral-1200 rounded cursor-pointer outline-none';
@@ -142,13 +144,13 @@ const CopyForLLM: React.FC = () => {
           onClick={handleCopyMarkdown}
           disabled={!markdownContent}
         >
-          <Icon name="icon-gui-square-2-stack-outline" size="16px" />
+          <Square2StackIcon className="size-[16px]" aria-hidden />
           <span>{copyFeedback ?? 'Copy for LLM'}</span>
         </button>
         <ButtonGroupSeparator />
         <DropdownMenu.Trigger asChild>
           <button className={cn(secondaryButtonClassName, 'px-2')}>
-            <Icon name="icon-gui-chevron-down-solid" size="12px" />
+            <ChevronDownIcon className="size-[12px]" aria-hidden />
           </button>
         </DropdownMenu.Trigger>
       </ButtonGroup>
@@ -169,7 +171,7 @@ const CopyForLLM: React.FC = () => {
                 });
               }}
             >
-              <Icon name="icon-gui-eye-outline" size="20px" />
+              <EyeIcon className="size-[20px]" aria-hidden />
               <span>View as markdown</span>
             </a>
           </DropdownMenu.Item>
@@ -180,7 +182,7 @@ const CopyForLLM: React.FC = () => {
               handleCopyMarkdown();
             }}
           >
-            <Icon name="icon-gui-square-2-stack-outline" size="20px" />
+            <Square2StackIcon className="size-[20px]" aria-hidden />
             <span>{copyFeedback ?? 'Copy as markdown'}</span>
           </DropdownMenu.Item>
           <DropdownMenu.Separator className="h-px bg-neutral-300 dark:bg-neutral-1000 my-1" />
@@ -203,7 +205,7 @@ const CopyForLLM: React.FC = () => {
                   <Icon name={icon as IconName} size="20px" />
                   <span>{label}</span>
                 </div>
-                <Icon name="icon-gui-arrow-top-right-on-square-outline" size="16px" />
+                <ArrowTopRightOnSquareIcon className="size-[16px]" aria-hidden />
               </a>
             </DropdownMenu.Item>
           ))}
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 936733a5c3..bc31e4b8dc 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -1,12 +1,18 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { ComponentType, SVGProps, useEffect, useMemo, useState } from 'react';
 import { useLocation } from '@reach/router';
-import Icon from '@ably/ui/core/Icon';
-import { IconName } from '@ably/ui/core/Icon/types';
+import Icon from 'src/components/Icon';
+import { IconName } from 'src/components/Icon/types';
 import Status, { StatusUrl } from '@ably/ui/core/Status';
 import cn from 'src/utilities/cn';
 import type { PageContextType } from './Layout';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import Button from '@ably/ui/core/Button';
+import { HandRaisedIcon, HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline';
+import {
+  HandRaisedIcon as HandRaisedSolidIcon,
+  HandThumbDownIcon as HandThumbDownSolidIcon,
+  HandThumbUpIcon as HandThumbUpSolidIcon,
+} from '@heroicons/react/24/solid';
 
 const ENABLE_FEEDBACK = false;
 
@@ -14,8 +20,8 @@ type FeedbackMode = 'yes' | 'no' | 'feedback';
 
 type FeedbackButton = {
   label: string;
-  monoIcon: IconName;
-  colorIcon: IconName;
+  monoIcon: ComponentType<SVGProps<SVGSVGElement>>;
+  colorIcon: ComponentType<SVGProps<SVGSVGElement>>;
   placeholder: string;
   description?: string;
 };
@@ -65,22 +71,22 @@ const socialLinks: { key: string; icon: IconName; link: string }[] = [
 const feedbackButtons: Record<FeedbackMode, FeedbackButton> = {
   yes: {
     label: 'Yes',
-    monoIcon: 'icon-gui-hand-thumb-up-outline',
-    colorIcon: 'icon-gui-hand-thumb-up-solid',
+    monoIcon: HandThumbUpIcon,
+    colorIcon: HandThumbUpSolidIcon,
     description: 'Great! Thanks for letting us know, what are we doing well?',
     placeholder: 'Optional feedback.',
   },
   no: {
     label: 'No',
-    monoIcon: 'icon-gui-hand-thumb-down-outline',
-    colorIcon: 'icon-gui-hand-thumb-down-solid',
+    monoIcon: HandThumbDownIcon,
+    colorIcon: HandThumbDownSolidIcon,
     description: 'Yikes! Thanks for letting us know, what can we do better?',
     placeholder: 'Optional feedback.',
   },
   feedback: {
     label: 'I have feedback',
-    monoIcon: 'icon-gui-hand-raised-outline',
-    colorIcon: 'icon-gui-hand-raised-solid',
+    monoIcon: HandRaisedIcon,
+    colorIcon: HandRaisedSolidIcon,
     placeholder: 'What would you like to say?',
   },
 };
@@ -189,6 +195,8 @@ const Footer: React.FC<{ pageContext: PageContextType }> = ({ pageContext }) =>
             <div className="flex items-center gap-6">
               {Object.entries(feedbackButtons).map(([key, button]) => {
                 const isActive = feedbackMode === key;
+                const ColorIcon = button.colorIcon;
+                const MonoIcon = button.monoIcon;
 
                 return (
                   <button
@@ -198,22 +206,19 @@ const Footer: React.FC<{ pageContext: PageContextType }> = ({ pageContext }) =>
                       setFeedbackMode(key as FeedbackMode);
                     }}
                   >
-                    <Icon
-                      name={button.colorIcon}
-                      size="20px"
-                      additionalCSS="transition-colors"
-                      color={
+                    <ColorIcon
+                      aria-hidden
+                      className={cn(
+                        'size-5 transition-colors',
                         isActive
                           ? 'text-orange-600'
-                          : 'hidden group-hover/feedback-button:block text-neutral-1300 dark:text-neutral-000'
-                      }
+                          : 'hidden group-hover/feedback-button:block text-neutral-1300 dark:text-neutral-000',
+                      )}
                     />
                     {!isActive && (
-                      <Icon
-                        name={button.monoIcon}
-                        size="20px"
-                        additionalCSS="transition-colors"
-                        color="text-neutral-900 dark:text-neutral-400 group-hover/feedback-button:hidden"
+                      <MonoIcon
+                        aria-hidden
+                        className="size-5 transition-colors text-neutral-900 dark:text-neutral-400 group-hover/feedback-button:hidden"
                       />
                     )}
                     <span
diff --git a/src/components/Layout/Header.test.tsx b/src/components/Layout/Header.test.tsx
index 66f3f2ea13..dd675edc13 100644
--- a/src/components/Layout/Header.test.tsx
+++ b/src/components/Layout/Header.test.tsx
@@ -17,7 +17,7 @@ jest.mock('src/contexts/layout-context', () => ({
   }),
 }));
 
-jest.mock('@ably/ui/core/Icon', () => {
+jest.mock('src/components/Icon', () => {
   const MockIcon: React.FC<{ name: string }> = ({ name }) => <div>{name}</div>;
   MockIcon.displayName = 'MockIcon';
   return MockIcon;
@@ -86,8 +86,8 @@ describe('Header', () => {
 
   it('toggles the mobile menu when the burger icon is clicked', () => {
     render(<Header />);
-    const burgerIcon = screen.getByText('icon-gui-bars-3-outline');
-    fireEvent.click(burgerIcon);
+    const burgerButton = screen.getByRole('button', { name: /toggle navigation menu/i });
+    fireEvent.click(burgerButton);
     expect(screen.getByText('LeftSidebar')).toBeInTheDocument();
   });
 
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 08e1e6e9fb..de7305490e 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -5,12 +5,11 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { throttle } from 'es-toolkit/compat';
 import cn from 'src/utilities/cn';
-import Icon from '@ably/ui/core/Icon';
+import Icon from 'src/components/Icon';
 import TabMenu from '@ably/ui/core/TabMenu';
 import Logo from '@ably/ui/core/images/logo/ably-logo.svg';
 import { track } from '@ably/ui/core/insights';
 import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from 'src/utilities/heights';
-import { IconName } from '@ably/ui/core/Icon/types';
 import LeftSidebar from './LeftSidebar';
 import ProductBar from './ProductBar';
 import UserContext from 'src/contexts/user-context';
@@ -20,6 +19,17 @@ import { InkeepSearchBar } from '../SearchBar/InkeepSearchBar';
 import { secondaryButtonClassName, iconButtonClassName, tooltipContentClassName } from './utils/styles';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import { ProductKey } from 'src/data/types';
+import {
+  ArrowRightStartOnRectangleIcon,
+  ArrowTopRightOnSquareIcon,
+  Bars3Icon,
+  CommandLineIcon,
+  CubeIcon,
+  LifebuoyIcon,
+  MagnifyingGlassIcon,
+  QuestionMarkCircleIcon,
+  SparklesIcon,
+} from '@heroicons/react/24/outline';
 
 // Tailwind 'md' breakpoint from tailwind.config.js
 const MD_BREAKPOINT = 1040;
@@ -37,17 +47,17 @@ const mobileTabs = ['Platform', 'Products', 'Examples'];
 const helpResourcesItems = [
   {
     href: '/support',
-    icon: 'icon-gui-lifebuoy-outline' as IconName,
+    icon: <LifebuoyIcon className="size-5" aria-hidden />,
     label: 'Support',
   },
   {
     href: '/docs/sdks',
-    icon: 'icon-gui-cube-outline' as IconName,
+    icon: <CubeIcon className="size-5" aria-hidden />,
     label: 'SDKs',
   },
   {
     href: 'https://ably.com',
-    icon: 'icon-gui-ably-badge' as IconName,
+    icon: <Icon name="icon-gui-ably-badge" size="20px" />,
     label: 'ably.com',
     external: true,
   },
@@ -252,7 +262,7 @@ const Header: React.FC = () => {
                 }}
               >
                 <span className="flex items-center gap-2">
-                  <Icon name="icon-gui-magnifying-glass-outline" size="16px" />
+                  <MagnifyingGlassIcon className="size-[16px]" aria-hidden />
                   <span>Search docs...</span>
                 </span>
                 <span className="flex items-center gap-0.5">
@@ -283,7 +293,7 @@ const Header: React.FC = () => {
                   }
                 }}
               >
-                <Icon name="icon-gui-sparkles-outline" size="20px" />
+                <SparklesIcon className="size-[20px]" aria-hidden />
                 <span>Ask AI</span>
               </button>
             )}
@@ -292,7 +302,7 @@ const Header: React.FC = () => {
                 <DropdownMenu.Trigger asChild>
                   <Tooltip.Trigger asChild>
                     <button className={iconButtonClassName} onClick={() => track('docs_help_resources_button_clicked')}>
-                      <Icon name="icon-gui-question-mark-circle-outline" size="20px" />
+                      <QuestionMarkCircleIcon className="size-[20px]" aria-hidden />
                     </button>
                   </Tooltip.Trigger>
                 </DropdownMenu.Trigger>
@@ -318,10 +328,10 @@ const Header: React.FC = () => {
                         className={item.external ? 'justify-between' : undefined}
                       >
                         <div className="flex items-center gap-2">
-                          <Icon name={item.icon} size="20px" />
+                          {item.icon}
                           <span>{item.label}</span>
                         </div>
-                        {item.external && <Icon name="icon-gui-arrow-top-right-on-square-outline" size="16px" />}
+                        {item.external && <ArrowTopRightOnSquareIcon className="size-[16px]" aria-hidden />}
                       </a>
                     </DropdownMenu.Item>
                   ))}
@@ -332,7 +342,7 @@ const Header: React.FC = () => {
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <button className={iconButtonClassName} onClick={() => track('docs_cli_button_clicked')}>
-                    <Icon name="icon-gui-command-line-outline" size="20px" />
+                    <CommandLineIcon className="size-[20px]" aria-hidden />
                   </button>
                 </Tooltip.Trigger>
                 <Tooltip.Portal>
@@ -363,7 +373,7 @@ const Header: React.FC = () => {
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <button className={iconButtonClassName} onClick={handleLogout}>
-                      <Icon name="icon-gui-arrow-right-start-on-rectangle-outline" size="20px" />
+                      <ArrowRightStartOnRectangleIcon className="size-[20px]" aria-hidden />
                     </button>
                   </Tooltip.Trigger>
                   <Tooltip.Portal>
@@ -384,8 +394,13 @@ const Header: React.FC = () => {
           </div>
         </Tooltip.Provider>
         <div ref={burgerButtonRef} className="flex md:hidden">
-          <button className={iconButtonClassName} onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
-            <Icon name="icon-gui-bars-3-outline" size="20px" />
+          <button
+            className={iconButtonClassName}
+            aria-label="Toggle navigation menu"
+            aria-expanded={isMobileMenuOpen}
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+          >
+            <Bars3Icon className="size-[20px]" aria-hidden />
           </button>
         </div>
 
diff --git a/src/components/Layout/LanguageSelector.test.tsx b/src/components/Layout/LanguageSelector.test.tsx
index 46fca66280..b37a10ca4c 100644
--- a/src/components/Layout/LanguageSelector.test.tsx
+++ b/src/components/Layout/LanguageSelector.test.tsx
@@ -9,7 +9,7 @@ jest.mock('src/contexts/layout-context', () => ({
   useLayoutContext: jest.fn(),
 }));
 
-jest.mock('@ably/ui/core/Icon', () => ({
+jest.mock('src/components/Icon', () => ({
   __esModule: true,
   default: ({ name }: { name: string }) => <div>{name}</div>,
 }));
@@ -72,7 +72,7 @@ describe('LanguageSelector', () => {
 
   it('renders the LanguageSelector component with default language (JS)', () => {
     render(<LanguageSelector />);
-    expect(screen.getByText('icon-gui-chevron-down-solid')).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: /select code language/i })).toBeInTheDocument();
     expect(screen.getByText('icon-tech-javascript')).toBeInTheDocument();
     expect(screen.getByText('JavaScript')).toBeInTheDocument();
   });
@@ -156,8 +156,7 @@ describe('LanguageSelector', () => {
 
     expect(screen.getByText('JavaScript')).toBeInTheDocument();
     expect(screen.getByText('icon-tech-javascript')).toBeInTheDocument();
-    // No dropdown chevron and no combobox trigger when there is nothing to choose between.
-    expect(screen.queryByText('icon-gui-chevron-down-solid')).not.toBeInTheDocument();
+    // No combobox trigger (and so no dropdown chevron) when there is nothing to choose between.
     expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
   });
 
diff --git a/src/components/Layout/LanguageSelector.tsx b/src/components/Layout/LanguageSelector.tsx
index 1e9a4e911e..36a4fe9291 100644
--- a/src/components/Layout/LanguageSelector.tsx
+++ b/src/components/Layout/LanguageSelector.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useLocation } from '@reach/router';
 import Badge from '@ably/ui/core/Badge';
-import Icon from '@ably/ui/core/Icon';
-import { IconName } from '@ably/ui/core/Icon/types';
+import Icon from 'src/components/Icon';
+import { IconName } from 'src/components/Icon/types';
 import cn from 'src/utilities/cn';
 import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from 'src/utilities/heights';
 import { track } from '@ably/ui/core/insights';
@@ -14,6 +14,8 @@ import { LANGUAGE_SELECTOR_HEIGHT, INKEEP_ASK_BUTTON_HEIGHT } from './utils/heig
 import { secondaryButtonClassName } from './utils/styles';
 import * as Select from '../ui/Select';
 import { Skeleton } from '../ui/Skeleton';
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
 
 type LanguageSelectorOptionData = {
   label: LanguageKey;
@@ -101,7 +103,7 @@ const SingleLanguageSelector = () => {
             </Badge>
             {options.length > 1 && (
               <Select.Icon className="flex items-center ml-auto">
-                <Icon name="icon-gui-chevron-down-solid" size="12px" />
+                <ChevronDownIcon className="size-[12px]" aria-hidden />
               </Select.Icon>
             )}
           </button>
@@ -149,11 +151,7 @@ const SingleLanguageSelector = () => {
                     </Badge>
                     {option.value === value ? (
                       <Select.ItemIndicator className="w-4 h-4 flex items-center justify-center">
-                        <Icon
-                          name="icon-gui-check-outline"
-                          size="16px"
-                          color="text-neutral-1000 dark:text-neutral-300"
-                        />
+                        <CheckIcon className="size-[16px] text-neutral-1000 dark:text-neutral-300" aria-hidden />
                       </Select.ItemIndicator>
                     ) : (
                       <div className="w-4 h-4" aria-hidden={option.value === value} />
@@ -263,7 +261,7 @@ const DualLanguageDropdown = ({ label, paramName, languages, selectedLanguage }:
             </Badge>
             {options.length > 1 && (
               <Select.Icon className="flex items-center">
-                <Icon name="icon-gui-chevron-down-solid" size="12px" />
+                <ChevronDownIcon className="size-[12px]" aria-hidden />
               </Select.Icon>
             )}
           </button>
@@ -312,11 +310,7 @@ const DualLanguageDropdown = ({ label, paramName, languages, selectedLanguage }:
                     </Badge>
                     {option.value === value ? (
                       <Select.ItemIndicator className="w-4 h-4 flex items-center justify-center">
-                        <Icon
-                          name="icon-gui-check-outline"
-                          size="16px"
-                          color="text-neutral-1000 dark:text-neutral-300"
-                        />
+                        <CheckIcon className="size-[16px] text-neutral-1000 dark:text-neutral-300" aria-hidden />
                       </Select.ItemIndicator>
                     ) : (
                       <div className="w-4 h-4" aria-hidden={option.value === value} />
diff --git a/src/components/Layout/LeftSidebar.tsx b/src/components/Layout/LeftSidebar.tsx
index 16de250f8a..bedc586aed 100644
--- a/src/components/Layout/LeftSidebar.tsx
+++ b/src/components/Layout/LeftSidebar.tsx
@@ -4,7 +4,6 @@ import { useLocation } from '@reach/router';
 import * as Accordion from '@radix-ui/react-accordion';
 import cn from 'src/utilities/cn';
 import { HEADER_HEIGHT } from 'src/utilities/heights';
-import Icon from '@ably/ui/core/Icon';
 
 import { productData } from 'src/data';
 import { ProductKey } from 'src/data/types';
@@ -13,6 +12,8 @@ import Link from '../Link';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import { interactiveButtonClassName } from './utils/styles';
 import { PRODUCT_BAR_HEIGHT } from './utils/heights';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
+import { ChevronRightIcon } from '@heroicons/react/24/solid';
 
 // Build link preserving all language params across navigation
 const buildLinkWithParams = (targetLink: string, searchParams: URLSearchParams): string => {
@@ -168,18 +169,15 @@ const ChildAccordion = ({ content, tree }: { content: (NavProductPage | NavProdu
                   >
                     <span>{page.name}</span>
                     {page.external && (
-                      <Icon
-                        name="icon-gui-arrow-top-right-on-square-outline"
-                        additionalCSS={cn(iconClassName, '-mr-[22px]')}
-                        size="16px"
+                      <ArrowTopRightOnSquareIcon
+                        className={cn('size-[16px]', cn(iconClassName, '-mr-[22px]'))}
+                        aria-hidden
                       />
                     )}
                   </Link>
                 )
               )}
-              {hasDeeperLayer ? (
-                <Icon name="icon-gui-chevron-right-solid" additionalCSS={iconClassName} size="12px" />
-              ) : null}
+              {hasDeeperLayer ? <ChevronRightIcon className={cn('size-[12px]', iconClassName)} aria-hidden /> : null}
             </Accordion.Trigger>
             {hasDeeperLayer && (
               <Accordion.Content className={cn(accordionContentClassName, layer === 0 && 'pt-1')}>
@@ -226,9 +224,7 @@ const SectionNav = ({ content, tree }: { content: (NavProductPage | NavProductCo
               })}
             >
               <span>{page.name}</span>
-              {page.external && (
-                <Icon name="icon-gui-arrow-top-right-on-square-outline" additionalCSS={iconClassName} size="16px" />
-              )}
+              {page.external && <ArrowTopRightOnSquareIcon className={cn('size-[16px]', iconClassName)} aria-hidden />}
             </Link>
           );
         }
diff --git a/src/components/Layout/MDXWrapper.test.tsx b/src/components/Layout/MDXWrapper.test.tsx
index 600e58e645..e4cb87b438 100644
--- a/src/components/Layout/MDXWrapper.test.tsx
+++ b/src/components/Layout/MDXWrapper.test.tsx
@@ -38,7 +38,7 @@ jest.mock('src/hooks/use-site-metadata', () => ({
 }));
 
 // We need to mock minimal implementation of other dependencies that CodeSnippet might use
-jest.mock('@ably/ui/core/Icon', () => {
+jest.mock('src/components/Icon', () => {
   return {
     __esModule: true,
     default: ({ name, size, additionalCSS, color }: any) => (
diff --git a/src/components/Layout/ProductBar.test.tsx b/src/components/Layout/ProductBar.test.tsx
index 37a5a4feaa..55444cffd2 100644
--- a/src/components/Layout/ProductBar.test.tsx
+++ b/src/components/Layout/ProductBar.test.tsx
@@ -7,7 +7,7 @@ jest.mock('src/contexts/layout-context', () => ({
   useLayoutContext: jest.fn(),
 }));
 
-jest.mock('@ably/ui/core/Icon', () => {
+jest.mock('src/components/Icon', () => {
   const MockIcon: React.FC<{ name: string }> = ({ name }) => <div data-testid={`icon-${name}`} />;
   MockIcon.displayName = 'MockIcon';
   return MockIcon;
diff --git a/src/components/Layout/ProductBar.tsx b/src/components/Layout/ProductBar.tsx
index e3b4558f63..f9ec5ede9d 100644
--- a/src/components/Layout/ProductBar.tsx
+++ b/src/components/Layout/ProductBar.tsx
@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
 import cn from 'src/utilities/cn';
-import Icon from '@ably/ui/core/Icon';
-import { IconName } from '@ably/ui/core/Icon/types';
+import Icon from 'src/components/Icon';
+import { IconName } from 'src/components/Icon/types';
 
 import { productData } from 'src/data';
 import { ProductKey } from 'src/data/types';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import Link from '../Link';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
 
 type ProductBarItem = {
   type: 'product';
@@ -127,7 +128,7 @@ const ProductBar = ({ className, onSelectProduct, selectedProduct }: ProductBarP
               )}
               <span>{item.name}</span>
               {!isProduct && (item as CustomBarItem).external && (
-                <Icon name="icon-gui-arrow-top-right-on-square-outline" size="12px" />
+                <ArrowTopRightOnSquareIcon className="size-[12px]" aria-hidden />
               )}
             </>
           );
diff --git a/src/components/Layout/mdx/tiles.tsx b/src/components/Layout/mdx/tiles.tsx
index 47616d0887..68f20f3b7e 100644
--- a/src/components/Layout/mdx/tiles.tsx
+++ b/src/components/Layout/mdx/tiles.tsx
@@ -1,6 +1,6 @@
 import Link from 'src/components/Link';
-import Icon from '@ably/ui/core/Icon';
-import { IconName } from '@ably/ui/core/Icon/types';
+import Icon from 'src/components/Icon';
+import { IconName } from 'src/components/Icon/types';
 
 type TileProps = {
   title?: string;
diff --git a/src/components/Markdown/CodeBlock.test.tsx b/src/components/Markdown/CodeBlock.test.tsx
index 0920f23383..661cac410c 100644
--- a/src/components/Markdown/CodeBlock.test.tsx
+++ b/src/components/Markdown/CodeBlock.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { CodeBlock } from './CodeBlock';
 
-jest.mock('@ably/ui/core/Icon', () => {
+jest.mock('src/components/Icon', () => {
   return function MockIcon() {
     return <span data-testid="mock-icon" />;
   };
diff --git a/src/components/Markdown/CodeBlock.tsx b/src/components/Markdown/CodeBlock.tsx
index 55613b5ded..8d6cb72767 100644
--- a/src/components/Markdown/CodeBlock.tsx
+++ b/src/components/Markdown/CodeBlock.tsx
@@ -1,6 +1,5 @@
 import React, { FC, useMemo } from 'react';
 import DOMPurify from 'dompurify';
-import Icon from '@ably/ui/core/Icon';
 import {
   highlightSnippet,
   LINE_HIGHLIGHT_CLASSES,
@@ -15,6 +14,7 @@ registerDefaultLanguages(languagesRegistry);
 import { ButtonWithTooltip } from 'src/components/ButtonWithTooltip';
 import { safeWindow } from 'src/utilities';
 import { copyCodeBlockContentTracker } from 'src/external-scripts/google-tag-manager/events';
+import { Square2StackIcon } from '@heroicons/react/16/solid';
 
 const sanitize = (html: string) =>
   DOMPurify.sanitize
@@ -76,7 +76,7 @@ export const CodeBlock: FC<{ children: React.ReactNode; language: string }> = ({
       </div>
       <div className="absolute top-4 right-2">
         <ButtonWithTooltip tooltip="Copy" notification="Copied!" onClick={handleCopy} className="text-white">
-          <Icon name="icon-gui-square-2-stack-micro" size="1rem" color="text-neutral-000" />
+          <Square2StackIcon className="size-[1rem] text-neutral-000" aria-hidden />
         </ButtonWithTooltip>
       </div>
     </pre>
diff --git a/src/components/Redoc/GoTopButton.tsx b/src/components/Redoc/GoTopButton.tsx
index f4749684d2..c39e3a867f 100644
--- a/src/components/Redoc/GoTopButton.tsx
+++ b/src/components/Redoc/GoTopButton.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import Icon from '@ably/ui/core/Icon';
+import { ArrowLongUpIcon } from '@heroicons/react/24/outline';
 
 export const GoTopButton = () => {
   const [showGoTop, setShowGoTop] = useState(false);
@@ -21,11 +21,7 @@ export const GoTopButton = () => {
   return (
     <div className={showGoTop ? 'block' : 'hidden'} onClick={handleScrollUp}>
       <div className="rounded text-white py-2 px-2 bg-cool-black fixed bottom-0 left-0 m-4 z-20 cursor-pointer">
-        <Icon
-          name="icon-gui-arrow-long-up-outline"
-          size="1.5rem"
-          additionalCSS="block text-white align-text-bottom w-6 h-6 m-2.5"
-        />
+        <ArrowLongUpIcon className="size-[1.5rem] block text-white align-text-bottom w-6 h-6 m-2.5" aria-hidden />
       </div>
     </div>
   );
diff --git a/src/components/SDKsPage/Card/index.tsx b/src/components/SDKsPage/Card/index.tsx
index 7f487f15df..9001a53d98 100644
--- a/src/components/SDKsPage/Card/index.tsx
+++ b/src/components/SDKsPage/Card/index.tsx
@@ -1,7 +1,8 @@
-import Icon from '@ably/ui/core/Icon';
+import Icon from 'src/components/Icon';
 import Link from 'src/components/Link';
 import { btn_sdks } from '../sdks.module.css';
 import cn from 'src/utilities/cn';
+import { ArrowLongRightIcon } from '@heroicons/react/16/solid';
 
 type ImagesSDK = {
   src: string;
@@ -26,7 +27,7 @@ const Card = ({ githubRepoURL, setupLink, title, image, text }: CardProps) => {
       <p className="ui-text-p3 py-4">{text}</p>
       <div className="flex flex-col justify-center gap-2">
         <Link to={setupLink} rel="noreferrer" className={cn(btn_sdks, 'ui-button-primary gap-2')}>
-          Get started <Icon name="icon-gui-arrow-long-right-micro" size="1rem" />
+          Get started <ArrowLongRightIcon className="size-[1rem]" aria-hidden />
         </Link>
         {githubRepoURL && (
           <a
diff --git a/src/components/blocks/dividers/Aside.tsx b/src/components/blocks/dividers/Aside.tsx
index 151a323bad..3dce02cdc8 100644
--- a/src/components/blocks/dividers/Aside.tsx
+++ b/src/components/blocks/dividers/Aside.tsx
@@ -1,4 +1,4 @@
-import Icon from '@ably/ui/core/Icon';
+import Icon from 'src/components/Icon';
 import {
   inlineGridParagraph,
   inlineContentContainer,
@@ -11,6 +11,7 @@ import {
   tipTitleElement,
 } from './dividers.module.css';
 import { PropsWithChildren } from 'react';
+import { DocumentTextIcon, ExclamationTriangleIcon } from '@heroicons/react/16/solid';
 
 const versioningColors: { [key: string]: { bg: string; text: string } } = {
   new: { bg: '#FFF0BA', text: '#AC8600' },
@@ -32,7 +33,7 @@ const Aside = ({ children, attribs }: AsideProps) => {
         <>
           <span className={`${leftSideElement} ${pitfallElement}`}>&nbsp;</span>
           <strong className={tipTitleElement}>
-            <Icon name="icon-gui-exclamation-triangle-micro" size="1rem" additionalCSS="mr-3" />
+            <ExclamationTriangleIcon className="size-[1rem] mr-3" aria-hidden />
             <span className="ui-text-p2 font-bold text-neutral-1300 mb-12">Important</span>
           </strong>
         </>
@@ -60,7 +61,7 @@ const Aside = ({ children, attribs }: AsideProps) => {
         <>
           <span className={`${leftSideElement} ${noteElement}`}>&nbsp;</span>
           <strong className={tipTitleElement}>
-            <Icon name="icon-gui-document-text-micro" size="1rem" additionalCSS="mr-3" />
+            <DocumentTextIcon className="size-[1rem] mr-3" aria-hidden />
             <span className="ui-text-p2 font-bold text-neutral-1300 mb-12">Note</span>
           </strong>
         </>
diff --git a/src/components/blocks/software/Code/ApiKeyIndicator.tsx b/src/components/blocks/software/Code/ApiKeyIndicator.tsx
index f57ae7c564..5e7a9091ed 100644
--- a/src/components/blocks/software/Code/ApiKeyIndicator.tsx
+++ b/src/components/blocks/software/Code/ApiKeyIndicator.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import Icon from '@ably/ui/core/Icon';
+import { InformationCircleIcon } from '@heroicons/react/16/solid';
 
 type ApiKeyIndicatorProps = { tooltip: string };
 
@@ -16,7 +16,7 @@ const APIKeyIndicator = ({ tooltip }: ApiKeyIndicatorProps) => {
       <div className="docs-api-key-label" title={tooltip}>
         Demo Only
       </div>
-      <Icon additionalCSS="ml-1 cursor-help" name="icon-gui-information-circle-micro" size="1rem" />
+      <InformationCircleIcon className="size-[1rem] ml-1 cursor-help" aria-hidden />
       {tooltipHover ? (
         <aside
           className="w-60 max-w-60 absolute -mt-[8.75rem] box-border
diff --git a/src/data/nav/types.ts b/src/data/nav/types.ts
index bebe3cb5ff..1445df70bc 100644
--- a/src/data/nav/types.ts
+++ b/src/data/nav/types.ts
@@ -1,4 +1,4 @@
-import { IconName } from '@ably/ui/core/Icon/types';
+import { IconName } from 'src/components/Icon/types';
 import { LanguageKey } from 'src/data/languages/types';
 
 export type NavProduct = {
diff --git a/src/pages/docs/api/chat-rest.tsx b/src/pages/docs/api/chat-rest.tsx
index 3e2b7f0d9b..d63628259e 100644
--- a/src/pages/docs/api/chat-rest.tsx
+++ b/src/pages/docs/api/chat-rest.tsx
@@ -1,8 +1,8 @@
 import { Link, withAssetPrefix } from 'gatsby';
-import Icon from '@ably/ui/core/Icon';
 import { useSiteMetadata } from '../../../hooks/use-site-metadata';
 import { Head } from '../../../components/Head';
 import { Loader } from '../../../components/Redoc';
+import { ArrowLongRightIcon } from '@heroicons/react/16/solid';
 
 const ChatRestApi = () => {
   const { canonicalUrl } = useSiteMetadata();
@@ -17,10 +17,9 @@ const ChatRestApi = () => {
       <div className="ml-2 mt-8 mb-6">
         <div className="text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2">
           <Link to="/docs/chat">
-            <Icon
-              name="icon-gui-arrow-long-right-micro"
-              size="1rem"
-              additionalCSS="align-middle transform rotate-180 mr-1 h-4 w-4 ui-link"
+            <ArrowLongRightIcon
+              className="size-[1rem] align-middle transform rotate-180 mr-1 h-4 w-4 ui-link"
+              aria-hidden
             />
             Ably Chat
           </Link>
diff --git a/src/pages/docs/api/control-api.tsx b/src/pages/docs/api/control-api.tsx
index 0ea6ecacf9..7f7f824279 100644
--- a/src/pages/docs/api/control-api.tsx
+++ b/src/pages/docs/api/control-api.tsx
@@ -1,8 +1,8 @@
 import { Link, withAssetPrefix } from 'gatsby';
-import Icon from '@ably/ui/core/Icon';
 import { useSiteMetadata } from '../../../hooks/use-site-metadata';
 import { Head } from '../../../components/Head';
 import { Loader } from '../../../components/Redoc';
+import { ArrowLongRightIcon } from '@heroicons/react/16/solid';
 
 const ControlApi = () => {
   const { canonicalUrl } = useSiteMetadata();
@@ -18,10 +18,9 @@ const ControlApi = () => {
       <div className="ml-2 mt-8 mb-6">
         <div className="text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2">
           <Link to="/docs/api">
-            <Icon
-              name="icon-gui-arrow-long-right-micro"
-              size="1rem"
-              additionalCSS="align-middle transform rotate-180 mr-1 h-4 w-4 ui-link"
+            <ArrowLongRightIcon
+              className="size-[1rem] align-middle transform rotate-180 mr-1 h-4 w-4 ui-link"
+              aria-hidden
             />
             API Reference
           </Link>
diff --git a/src/pages/docs/api/liveobjects-rest.tsx b/src/pages/docs/api/liveobjects-rest.tsx
index 5a268de78d..7f08ecab98 100644
--- a/src/pages/docs/api/liveobjects-rest.tsx
+++ b/src/pages/docs/api/liveobjects-rest.tsx
@@ -1,8 +1,8 @@
 import { Link, withAssetPrefix } from 'gatsby';
-import Icon from '@ably/ui/core/Icon';
 import { useSiteMetadata } from '../../../hooks/use-site-metadata';
 import { Head } from '../../../components/Head';
 import { Loader } from '../../../components/Redoc';
+import { ArrowLongRightIcon } from '@heroicons/react/16/solid';
 
 const LiveObjectsRestApi = () => {
   const { canonicalUrl } = useSiteMetadata();
@@ -17,10 +17,9 @@ const LiveObjectsRestApi = () => {
       <div className="ml-2 mt-8 mb-6">
         <div className="text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2">
           <Link to="/docs/liveobjects">
-            <Icon
-              name="icon-gui-arrow-long-right-micro"
-              size="1rem"
-              additionalCSS="align-middle transform rotate-180 mr-1 h-4 w-4 ui-link"
+            <ArrowLongRightIcon
+              className="size-[1rem] align-middle transform rotate-180 mr-1 h-4 w-4 ui-link"
+              aria-hidden
             />
             Ably LiveObjects
           </Link>
diff --git a/src/templates/examples.tsx b/src/templates/examples.tsx
index 67cd3222a2..323d7c7f0b 100644
--- a/src/templates/examples.tsx
+++ b/src/templates/examples.tsx
@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, useContext, useEffect, useRef } from 'react';
 import Markdown from 'markdown-to-jsx/react';
 import { Link } from 'gatsby';
-import Icon from '@ably/ui/core/Icon';
 import LinkButton from '@ably/ui/core/LinkButton';
 import { UnstyledOpenInCodeSandboxButton } from '@codesandbox/sandpack-react';
 
@@ -12,6 +11,7 @@ import UserContext from 'src/contexts/user-context';
 import { getApiKey } from 'src/utilities/update-ably-connection-keys';
 import ExamplesRenderer from 'src/components/Examples/ExamplesRenderer';
 import { LanguageKey } from 'src/data/languages/types';
+import { ChevronLeftIcon } from '@heroicons/react/16/solid';
 
 const MarkdownOverrides = {
   h1: {
@@ -143,7 +143,7 @@ const Examples = ({ pageContext }: { pageContext: { example: ExampleWithContent
       <Head title={meta_title} canonical={canonical} description={meta_description} />
       <div className="my-10">
         <Link to="/examples" className="flex gap-1 items-center mb-5">
-          <Icon name="icon-gui-chevron-left-micro" size="16px" />
+          <ChevronLeftIcon className="size-[16px]" aria-hidden />
           <span className="ui-text-menu4 text-neutral-900 dark:text-neutral-400 font-semibold">All examples</span>
         </Link>
         <h1 className="ui-text-title mb-4">{example.name}</h1>