diff --git a/scripts/generate-sprites.ts b/scripts/generate-sprites.ts
index 273abc53d..515f9fc09 100644
--- a/scripts/generate-sprites.ts
+++ b/scripts/generate-sprites.ts
@@ -41,6 +41,8 @@ const svgDir = path.resolve(__dirname, "../src/core/icons");
 // Object to store the grouped filenames
 const iconGroups: Record<string, string[]> = {};
 
+let iconCSSClasses = "";
+
 // Read all SVG files from the directory and add them to the sprite
 fs.readdirSync(svgDir).forEach((file) => {
   if (file.endsWith(".svg")) {
@@ -55,6 +57,7 @@ fs.readdirSync(svgDir).forEach((file) => {
 
         // Remove the .svg extension before adding to the group
         const fileNameWithoutExtension = file.replace(".svg", "");
+        iconCSSClasses += `.ui-${fileNameWithoutExtension} { background-image: url(../icons/${file}); }\n`;
         iconGroups[key].push(fileNameWithoutExtension);
       }
 
@@ -88,6 +91,11 @@ sprite.compile((err, result) => {
         "../src/core/Icon/computed-icons.ts",
       );
 
+      const iconClassesPath = path.resolve(
+        __dirname,
+        "../src/core/styles/icons.css",
+      );
+
       const generatedIconGroups =
         `// AUTOGENERATED BY build:sprites - DO NOT EDIT\n\nexport const computedIcons = ${JSON.stringify(iconGroups, null, 2)}`.replace(
           /]/g,
@@ -96,7 +104,15 @@ sprite.compile((err, result) => {
 
       fs.writeFileSync(iconJsonPath, generatedIconGroups, "utf-8");
 
-      console.log("🖼️  SVG sprites and icon manifest generated successfully!");
+      fs.writeFileSync(
+        iconClassesPath,
+        `/* AUTOGENERATED BY build:sprites - DO NOT EDIT */\n\n${iconCSSClasses}`,
+        "utf-8",
+      );
+
+      console.log(
+        "🖼️  SVG sprites, icon manifest and icon CSS classes generated successfully!",
+      );
     } catch (error) {
       console.log("SVG sprite/manifest generation failed:", error);
     }
diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
index c68200073..1d052720a 100644
--- a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
+++ b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
@@ -447,14 +447,14 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-display-connection-state-&amp;-recovery
+      icon-display-connection-state-recovery
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-display-connection-state-&amp;-recovery">
+          <use xlink:href="#sprite-icon-display-connection-state-recovery">
           </use>
         </svg>
       </div>
diff --git a/src/core/styles.components.css b/src/core/styles.components.css
index 3b880f25d..594ca1e1a 100644
--- a/src/core/styles.components.css
+++ b/src/core/styles.components.css
@@ -4,6 +4,7 @@
 @import "./styles/layout.css";
 @import "./styles/shadows.css";
 @import "./styles/text.css";
+@import "./styles/icons.css"; /* Autogenerated at build time */
 
 @layer components {
   /* Basis for icon component */
@@ -43,4 +44,8 @@
   .ui-container-padding {
     @apply px-24 py-40 sm:px-40 sm:py-48 md:p-64;
   }
+
+  .ui-icon {
+    @apply bg-cover;
+  }
 }
diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
index ff3bbd488..03d109812 100644
--- a/src/core/styles/Forms.stories.tsx
+++ b/src/core/styles/Forms.stories.tsx
@@ -80,6 +80,32 @@ export const Inputs = {
         />
         <p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
       </div>
+      <div>
+        <p className="mb-16 text-neutral-800">With icon insert</p>
+        <div className="relative">
+          <div className="h-32 w-32 ui-icon ui-icon-display-48hrs absolute left-8 top-8"></div>
+          <input
+            type="search"
+            className="ui-input pl-48"
+            placeholder="With icon"
+            autoComplete="off"
+          />
+        </div>
+      </div>
+      <div>
+        <p className="mb-16 text-neutral-800">With character insert</p>
+        <div className="relative">
+          <div className="h-32 w-32 absolute left-8 top-8 flex items-center justify-center">
+            $
+          </div>
+          <input
+            type="search"
+            className="ui-input pl-40"
+            placeholder="With icon"
+            autoComplete="off"
+          />
+        </div>
+      </div>
     </div>
   ),
 };
diff --git a/src/core/styles/__snapshots__/Forms.stories.tsx.snap b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
index 7303c8cd0..b04ba406e 100644
--- a/src/core/styles/__snapshots__/Forms.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
@@ -255,6 +255,35 @@ exports[`CSS/Forms Inputs smoke-test 1`] = `
       Oof, what an input
     </p>
   </div>
+  <div>
+    <p class="mb-16 text-neutral-800">
+      With icon insert
+    </p>
+    <div class="relative">
+      <div class="h-32 w-32 ui-icon ui-icon-display-48hrs absolute left-8 top-8">
+      </div>
+      <input type="search"
+             class="ui-input pl-48"
+             placeholder="With icon"
+             autocomplete="off"
+      >
+    </div>
+  </div>
+  <div>
+    <p class="mb-16 text-neutral-800">
+      With character insert
+    </p>
+    <div class="relative">
+      <div class="h-32 w-32 absolute left-8 top-8 flex items-center justify-center">
+        $
+      </div>
+      <input type="search"
+             class="ui-input pl-40"
+             placeholder="With icon"
+             autocomplete="off"
+      >
+    </div>
+  </div>
 </div>
 `;
 
diff --git a/src/core/styles/icons.css b/src/core/styles/icons.css
new file mode 100644
index 000000000..6ee2d58d1
--- /dev/null
+++ b/src/core/styles/icons.css
@@ -0,0 +1,171 @@
+/* AUTOGENERATED BY build:sprites - DO NOT EDIT */
+
+.ui-icon-display-48hrs { background-image: url(../icons/icon-display-48hrs.svg); }
+.ui-icon-display-ably-channels { background-image: url(../icons/icon-display-ably-channels.svg); }
+.ui-icon-display-about-ably-col { background-image: url(../icons/icon-display-about-ably-col.svg); }
+.ui-icon-display-api-keys { background-image: url(../icons/icon-display-api-keys.svg); }
+.ui-icon-display-api { background-image: url(../icons/icon-display-api.svg); }
+.ui-icon-display-architectural-guidance { background-image: url(../icons/icon-display-architectural-guidance.svg); }
+.ui-icon-display-asset-tracking-col { background-image: url(../icons/icon-display-asset-tracking-col.svg); }
+.ui-icon-display-authentication { background-image: url(../icons/icon-display-authentication.svg); }
+.ui-icon-display-avatar-stack { background-image: url(../icons/icon-display-avatar-stack.svg); }
+.ui-icon-display-browser { background-image: url(../icons/icon-display-browser.svg); }
+.ui-icon-display-calendar { background-image: url(../icons/icon-display-calendar.svg); }
+.ui-icon-display-call-mobile { background-image: url(../icons/icon-display-call-mobile.svg); }
+.ui-icon-display-careers-col { background-image: url(../icons/icon-display-careers-col.svg); }
+.ui-icon-display-case-studies-col { background-image: url(../icons/icon-display-case-studies-col.svg); }
+.ui-icon-display-chat-col { background-image: url(../icons/icon-display-chat-col.svg); }
+.ui-icon-display-chat-mono { background-image: url(../icons/icon-display-chat-mono.svg); }
+.ui-icon-display-chat-stack-col { background-image: url(../icons/icon-display-chat-stack-col.svg); }
+.ui-icon-display-chat-stack { background-image: url(../icons/icon-display-chat-stack.svg); }
+.ui-icon-display-cloud-servers { background-image: url(../icons/icon-display-cloud-servers.svg); }
+.ui-icon-display-compare-tech-col { background-image: url(../icons/icon-display-compare-tech-col.svg); }
+.ui-icon-display-connection-state-recovery { background-image: url(../icons/icon-display-connection-state-recovery.svg); }
+.ui-icon-display-consumer-groups { background-image: url(../icons/icon-display-consumer-groups.svg); }
+.ui-icon-display-custom-cname { background-image: url(../icons/icon-display-custom-cname.svg); }
+.ui-icon-display-custom { background-image: url(../icons/icon-display-custom.svg); }
+.ui-icon-display-customers-col { background-image: url(../icons/icon-display-customers-col.svg); }
+.ui-icon-display-data-broadcast-col { background-image: url(../icons/icon-display-data-broadcast-col.svg); }
+.ui-icon-display-data-broadcast-mono { background-image: url(../icons/icon-display-data-broadcast-mono.svg); }
+.ui-icon-display-data-synchronization-col { background-image: url(../icons/icon-display-data-synchronization-col.svg); }
+.ui-icon-display-dedicated-cluster { background-image: url(../icons/icon-display-dedicated-cluster.svg); }
+.ui-icon-display-deltas { background-image: url(../icons/icon-display-deltas.svg); }
+.ui-icon-display-docs-col { background-image: url(../icons/icon-display-docs-col.svg); }
+.ui-icon-display-documentation { background-image: url(../icons/icon-display-documentation.svg); }
+.ui-icon-display-dynamic-channel-groups { background-image: url(../icons/icon-display-dynamic-channel-groups.svg); }
+.ui-icon-display-edge-network { background-image: url(../icons/icon-display-edge-network.svg); }
+.ui-icon-display-elasticity { background-image: url(../icons/icon-display-elasticity.svg); }
+.ui-icon-display-equalisers-mono { background-image: url(../icons/icon-display-equalisers-mono.svg); }
+.ui-icon-display-events-col { background-image: url(../icons/icon-display-events-col.svg); }
+.ui-icon-display-exactly-once-delivery { background-image: url(../icons/icon-display-exactly-once-delivery.svg); }
+.ui-icon-display-examples-col { background-image: url(../icons/icon-display-examples-col.svg); }
+.ui-icon-display-fan-out { background-image: url(../icons/icon-display-fan-out.svg); }
+.ui-icon-display-firehose { background-image: url(../icons/icon-display-firehose.svg); }
+.ui-icon-display-gdpr { background-image: url(../icons/icon-display-gdpr.svg); }
+.ui-icon-display-general-comms { background-image: url(../icons/icon-display-general-comms.svg); }
+.ui-icon-display-granular-permissions { background-image: url(../icons/icon-display-granular-permissions.svg); }
+.ui-icon-display-hipaa-mono { background-image: url(../icons/icon-display-hipaa-mono.svg); }
+.ui-icon-display-hipaa { background-image: url(../icons/icon-display-hipaa.svg); }
+.ui-icon-display-history { background-image: url(../icons/icon-display-history.svg); }
+.ui-icon-display-integrations-col { background-image: url(../icons/icon-display-integrations-col.svg); }
+.ui-icon-display-integrations { background-image: url(../icons/icon-display-integrations.svg); }
+.ui-icon-display-it-support-access { background-image: url(../icons/icon-display-it-support-access.svg); }
+.ui-icon-display-it-support-helpdesk { background-image: url(../icons/icon-display-it-support-helpdesk.svg); }
+.ui-icon-display-kafka-at-the-edge-col { background-image: url(../icons/icon-display-kafka-at-the-edge-col.svg); }
+.ui-icon-display-laptop { background-image: url(../icons/icon-display-laptop.svg); }
+.ui-icon-display-lightbulb-col { background-image: url(../icons/icon-display-lightbulb-col.svg); }
+.ui-icon-display-live-chat { background-image: url(../icons/icon-display-live-chat.svg); }
+.ui-icon-display-live-updates-results-metrics-col { background-image: url(../icons/icon-display-live-updates-results-metrics-col.svg); }
+.ui-icon-display-map-pin { background-image: url(../icons/icon-display-map-pin.svg); }
+.ui-icon-display-message-batching { background-image: url(../icons/icon-display-message-batching.svg); }
+.ui-icon-display-message-persistence { background-image: url(../icons/icon-display-message-persistence.svg); }
+.ui-icon-display-message-queues { background-image: url(../icons/icon-display-message-queues.svg); }
+.ui-icon-display-message { background-image: url(../icons/icon-display-message.svg); }
+.ui-icon-display-multi-user-spaces-col { background-image: url(../icons/icon-display-multi-user-spaces-col.svg); }
+.ui-icon-display-observe-analytics { background-image: url(../icons/icon-display-observe-analytics.svg); }
+.ui-icon-display-padlock-closed { background-image: url(../icons/icon-display-padlock-closed.svg); }
+.ui-icon-display-platform { background-image: url(../icons/icon-display-platform.svg); }
+.ui-icon-display-play { background-image: url(../icons/icon-display-play.svg); }
+.ui-icon-display-premium-support { background-image: url(../icons/icon-display-premium-support.svg); }
+.ui-icon-display-privacy-shield-framework { background-image: url(../icons/icon-display-privacy-shield-framework.svg); }
+.ui-icon-display-private-link { background-image: url(../icons/icon-display-private-link.svg); }
+.ui-icon-display-push-notifications-col { background-image: url(../icons/icon-display-push-notifications-col.svg); }
+.ui-icon-display-push-notifications-mono { background-image: url(../icons/icon-display-push-notifications-mono.svg); }
+.ui-icon-display-push-notifications { background-image: url(../icons/icon-display-push-notifications.svg); }
+.ui-icon-display-quickstart-guides-col { background-image: url(../icons/icon-display-quickstart-guides-col.svg); }
+.ui-icon-display-resources-col { background-image: url(../icons/icon-display-resources-col.svg); }
+.ui-icon-display-rewind { background-image: url(../icons/icon-display-rewind.svg); }
+.ui-icon-display-sdks-col { background-image: url(../icons/icon-display-sdks-col.svg); }
+.ui-icon-display-send-received-messages { background-image: url(../icons/icon-display-send-received-messages.svg); }
+.ui-icon-display-servers { background-image: url(../icons/icon-display-servers.svg); }
+.ui-icon-display-shopping-cart { background-image: url(../icons/icon-display-shopping-cart.svg); }
+.ui-icon-display-sla { background-image: url(../icons/icon-display-sla.svg); }
+.ui-icon-display-soc2-type2-mono { background-image: url(../icons/icon-display-soc2-type2-mono.svg); }
+.ui-icon-display-soc2-type2 { background-image: url(../icons/icon-display-soc2-type2.svg); }
+.ui-icon-display-subscription-filters { background-image: url(../icons/icon-display-subscription-filters.svg); }
+.ui-icon-display-support-chat-mono { background-image: url(../icons/icon-display-support-chat-mono.svg); }
+.ui-icon-display-system-metadata { background-image: url(../icons/icon-display-system-metadata.svg); }
+.ui-icon-display-tech-account-comms { background-image: url(../icons/icon-display-tech-account-comms.svg); }
+.ui-icon-display-tutorials-demos-col { background-image: url(../icons/icon-display-tutorials-demos-col.svg); }
+.ui-icon-display-virtual-events-col { background-image: url(../icons/icon-display-virtual-events-col.svg); }
+.ui-icon-display-virtual-events { background-image: url(../icons/icon-display-virtual-events.svg); }
+.ui-icon-gui-ably-badge { background-image: url(../icons/icon-gui-ably-badge.svg); }
+.ui-icon-gui-arrow-bidirectional-horizontal { background-image: url(../icons/icon-gui-arrow-bidirectional-horizontal.svg); }
+.ui-icon-gui-arrow-bidirectional-vertical { background-image: url(../icons/icon-gui-arrow-bidirectional-vertical.svg); }
+.ui-icon-gui-arrow-down { background-image: url(../icons/icon-gui-arrow-down.svg); }
+.ui-icon-gui-arrow-left { background-image: url(../icons/icon-gui-arrow-left.svg); }
+.ui-icon-gui-arrow-right { background-image: url(../icons/icon-gui-arrow-right.svg); }
+.ui-icon-gui-arrow-up { background-image: url(../icons/icon-gui-arrow-up.svg); }
+.ui-icon-gui-burger-menu { background-image: url(../icons/icon-gui-burger-menu.svg); }
+.ui-icon-gui-check-circled-fill-black { background-image: url(../icons/icon-gui-check-circled-fill-black.svg); }
+.ui-icon-gui-check-circled-fill { background-image: url(../icons/icon-gui-check-circled-fill.svg); }
+.ui-icon-gui-check-circled { background-image: url(../icons/icon-gui-check-circled.svg); }
+.ui-icon-gui-checklist-checked { background-image: url(../icons/icon-gui-checklist-checked.svg); }
+.ui-icon-gui-clock { background-image: url(../icons/icon-gui-clock.svg); }
+.ui-icon-gui-close { background-image: url(../icons/icon-gui-close.svg); }
+.ui-icon-gui-copy { background-image: url(../icons/icon-gui-copy.svg); }
+.ui-icon-gui-cross-circled-fill { background-image: url(../icons/icon-gui-cross-circled-fill.svg); }
+.ui-icon-gui-cross-circled { background-image: url(../icons/icon-gui-cross-circled.svg); }
+.ui-icon-gui-dash-circled { background-image: url(../icons/icon-gui-dash-circled.svg); }
+.ui-icon-gui-disclosure-arrow { background-image: url(../icons/icon-gui-disclosure-arrow.svg); }
+.ui-icon-gui-document-generic { background-image: url(../icons/icon-gui-document-generic.svg); }
+.ui-icon-gui-enlarge { background-image: url(../icons/icon-gui-enlarge.svg); }
+.ui-icon-gui-external-link { background-image: url(../icons/icon-gui-external-link.svg); }
+.ui-icon-gui-filter-flow-step-1 { background-image: url(../icons/icon-gui-filter-flow-step-1.svg); }
+.ui-icon-gui-filter-flow-step-2 { background-image: url(../icons/icon-gui-filter-flow-step-2.svg); }
+.ui-icon-gui-filter-flow-step-3 { background-image: url(../icons/icon-gui-filter-flow-step-3.svg); }
+.ui-icon-gui-history { background-image: url(../icons/icon-gui-history.svg); }
+.ui-icon-gui-info { background-image: url(../icons/icon-gui-info.svg); }
+.ui-icon-gui-link-arrow { background-image: url(../icons/icon-gui-link-arrow.svg); }
+.ui-icon-gui-link { background-image: url(../icons/icon-gui-link.svg); }
+.ui-icon-gui-live-chat { background-image: url(../icons/icon-gui-live-chat.svg); }
+.ui-icon-gui-minus { background-image: url(../icons/icon-gui-minus.svg); }
+.ui-icon-gui-partial { background-image: url(../icons/icon-gui-partial.svg); }
+.ui-icon-gui-plus { background-image: url(../icons/icon-gui-plus.svg); }
+.ui-icon-gui-quote-marks-solid { background-image: url(../icons/icon-gui-quote-marks-solid.svg); }
+.ui-icon-gui-refresh { background-image: url(../icons/icon-gui-refresh.svg); }
+.ui-icon-gui-resources { background-image: url(../icons/icon-gui-resources.svg); }
+.ui-icon-gui-search { background-image: url(../icons/icon-gui-search.svg); }
+.ui-icon-gui-tick { background-image: url(../icons/icon-gui-tick.svg); }
+.ui-icon-gui-warning { background-image: url(../icons/icon-gui-warning.svg); }
+.ui-icon-other-quote { background-image: url(../icons/icon-other-quote.svg); }
+.ui-icon-product-asset-tracking { background-image: url(../icons/icon-product-asset-tracking.svg); }
+.ui-icon-product-chat { background-image: url(../icons/icon-product-chat.svg); }
+.ui-icon-product-liveobjects { background-image: url(../icons/icon-product-liveobjects.svg); }
+.ui-icon-product-livesync { background-image: url(../icons/icon-product-livesync.svg); }
+.ui-icon-product-pubsub { background-image: url(../icons/icon-product-pubsub.svg); }
+.ui-icon-product-spaces { background-image: url(../icons/icon-product-spaces.svg); }
+.ui-icon-social-discord { background-image: url(../icons/icon-social-discord.svg); }
+.ui-icon-social-facebook { background-image: url(../icons/icon-social-facebook.svg); }
+.ui-icon-social-github { background-image: url(../icons/icon-social-github.svg); }
+.ui-icon-social-glassdoor { background-image: url(../icons/icon-social-glassdoor.svg); }
+.ui-icon-social-google { background-image: url(../icons/icon-social-google.svg); }
+.ui-icon-social-linkedin { background-image: url(../icons/icon-social-linkedin.svg); }
+.ui-icon-social-stackoverflow { background-image: url(../icons/icon-social-stackoverflow.svg); }
+.ui-icon-social-twitter { background-image: url(../icons/icon-social-twitter.svg); }
+.ui-icon-social-x { background-image: url(../icons/icon-social-x.svg); }
+.ui-icon-social-youtube { background-image: url(../icons/icon-social-youtube.svg); }
+.ui-icon-tech-amqp10 { background-image: url(../icons/icon-tech-amqp10.svg); }
+.ui-icon-tech-apache-kafka { background-image: url(../icons/icon-tech-apache-kafka.svg); }
+.ui-icon-tech-apachepulsar { background-image: url(../icons/icon-tech-apachepulsar.svg); }
+.ui-icon-tech-awskinesis { background-image: url(../icons/icon-tech-awskinesis.svg); }
+.ui-icon-tech-awslambda { background-image: url(../icons/icon-tech-awslambda.svg); }
+.ui-icon-tech-awssqs { background-image: url(../icons/icon-tech-awssqs.svg); }
+.ui-icon-tech-azureservicebus { background-image: url(../icons/icon-tech-azureservicebus.svg); }
+.ui-icon-tech-cloudflareworkers { background-image: url(../icons/icon-tech-cloudflareworkers.svg); }
+.ui-icon-tech-csharp { background-image: url(../icons/icon-tech-csharp.svg); }
+.ui-icon-tech-flutter { background-image: url(../icons/icon-tech-flutter.svg); }
+.ui-icon-tech-gcloudfunctions { background-image: url(../icons/icon-tech-gcloudfunctions.svg); }
+.ui-icon-tech-go { background-image: url(../icons/icon-tech-go.svg); }
+.ui-icon-tech-ifttt { background-image: url(../icons/icon-tech-ifttt.svg); }
+.ui-icon-tech-java { background-image: url(../icons/icon-tech-java.svg); }
+.ui-icon-tech-javascript { background-image: url(../icons/icon-tech-javascript.svg); }
+.ui-icon-tech-net { background-image: url(../icons/icon-tech-net.svg); }
+.ui-icon-tech-objectivec { background-image: url(../icons/icon-tech-objectivec.svg); }
+.ui-icon-tech-php { background-image: url(../icons/icon-tech-php.svg); }
+.ui-icon-tech-python { background-image: url(../icons/icon-tech-python.svg); }
+.ui-icon-tech-react { background-image: url(../icons/icon-tech-react.svg); }
+.ui-icon-tech-ruby { background-image: url(../icons/icon-tech-ruby.svg); }
+.ui-icon-tech-swift { background-image: url(../icons/icon-tech-swift.svg); }
+.ui-icon-tech-terraform { background-image: url(../icons/icon-tech-terraform.svg); }
+.ui-icon-tech-zapier { background-image: url(../icons/icon-tech-zapier.svg); }