diff --git a/app/views/settings/api_keys/created.html.erb b/app/views/settings/api_keys/created.html.erb
index d0c4e7bcab..0d79d3a895 100644
--- a/app/views/settings/api_keys/created.html.erb
+++ b/app/views/settings/api_keys/created.html.erb
@@ -24,12 +24,22 @@
       <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
         <div class="flex items-center justify-between gap-3">
           <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @api_key.plain_key %></code>
-          <%= render DS::Button.new(
-            text: t(".copy_key"),
-            variant: "ghost",
-            icon: "copy",
-            data: { action: "clipboard#copy" }
-          ) %>
+          <span data-clipboard-target="iconDefault">
+            <%= render DS::Button.new(
+              text: t(".copy_key"),
+              variant: "ghost",
+              icon: "copy",
+              data: { action: "clipboard#copy" }
+            ) %>
+          </span>
+          <span data-clipboard-target="iconSuccess" class="hidden">
+            <%= render DS::Button.new(
+              text: t(".copied"),
+              variant: "ghost",
+              icon: "check",
+              data: { action: "clipboard#copy" }
+            ) %>
+          </span>
         </div>
       </div>
     </div>
diff --git a/app/views/settings/api_keys/show.html.erb b/app/views/settings/api_keys/show.html.erb
index c32e87349b..d44ad5a1a0 100644
--- a/app/views/settings/api_keys/show.html.erb
+++ b/app/views/settings/api_keys/show.html.erb
@@ -25,12 +25,22 @@
         <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
           <div class="flex items-center justify-between gap-3">
             <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
-            <%= render DS::Button.new(
-              text: t(".newly_created.copy_api_key"),
-              variant: "ghost",
-              icon: "copy",
-              data: { action: "clipboard#copy" }
-            ) %>
+            <span data-clipboard-target="iconDefault">
+              <%= render DS::Button.new(
+                text: t(".newly_created.copy_api_key"),
+                variant: "ghost",
+                icon: "copy",
+                data: { action: "clipboard#copy" }
+              ) %>
+            </span>
+            <span data-clipboard-target="iconSuccess" class="hidden">
+              <%= render DS::Button.new(
+                text: t(".newly_created.copied"),
+                variant: "ghost",
+                icon: "check",
+                data: { action: "clipboard#copy" }
+              ) %>
+            </span>
           </div>
         </div>
       </div>
@@ -113,12 +123,22 @@
         <div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
           <div class="flex items-center justify-between gap-3">
             <code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @current_api_key.plain_key %></code>
-            <%= render DS::Button.new(
-              text: t(".current_api_key.copy_api_key"),
-              variant: "ghost",
-              icon: "copy",
-              data: { action: "clipboard#copy" }
-            ) %>
+            <span data-clipboard-target="iconDefault">
+              <%= render DS::Button.new(
+                text: t(".current_api_key.copy_api_key"),
+                variant: "ghost",
+                icon: "copy",
+                data: { action: "clipboard#copy" }
+              ) %>
+            </span>
+            <span data-clipboard-target="iconSuccess" class="hidden">
+              <%= render DS::Button.new(
+                text: t(".current_api_key.copied"),
+                variant: "ghost",
+                icon: "check",
+                data: { action: "clipboard#copy" }
+              ) %>
+            </span>
           </div>
         </div>
       </div>
diff --git a/config/locales/views/settings/api_keys/en.yml b/config/locales/views/settings/api_keys/en.yml
index ebc072b88b..78b05ba84f 100644
--- a/config/locales/views/settings/api_keys/en.yml
+++ b/config/locales/views/settings/api_keys/en.yml
@@ -38,6 +38,7 @@ en:
           your_api_key: "Your API Key"
           copy_store_securely: "Copy and store this key securely. You'll need it to authenticate your API requests."
           copy_api_key: "Copy API Key"
+          copied: "Copied!"
           how_to_use: "How to use your API key"
           continue: "Continue to API Key Settings"
         current_api_key:
@@ -57,6 +58,7 @@ en:
           scope_read_only: "Read Only"
           scope_read_write: "Read/Write"
           copy_api_key: "Copy API Key"
+          copied: "Copied!"
           copy_store_securely: "Copy and store this key securely. You'll need it to authenticate your API requests."
           usage_instructions_title: "How to use your API key"
           usage_instructions: "Include your API key in the X-Api-Key header when making requests to the %{product_name} API:"
@@ -112,4 +114,5 @@ en:
         critical_warning_3: "If you lose this key, you'll need to create a new one."
         usage_instructions: "Use your API key by including it in the X-Api-Key header:"
         copy_key: "Copy API Key"
-        continue: "Continue to API Key Settings"
\ No newline at end of file
+        copied: "Copied!"
+        continue: "Continue to API Key Settings"