diff --git a/packages/histoire-controls/package.json b/packages/histoire-controls/package.json
index a48a7fa4..bc40a1dd 100644
--- a/packages/histoire-controls/package.json
+++ b/packages/histoire-controls/package.json
@@ -41,6 +41,11 @@
     "story:dev": "histoire dev",
     "story:build": "histoire build"
   },
+  "dependencies": {
+    "@iconify/vue": "^3.2.1",
+    "@vueuse/core": "^8.2.5",
+    "floating-vue": "^2.0.0-beta.14"
+  },
   "devDependencies": {
     "@peeky/test": "^0.13.5",
     "@types/node": "^17.0.23",
diff --git a/packages/histoire-controls/src/components/HstCopyIcon.vue b/packages/histoire-controls/src/components/HstCopyIcon.vue
new file mode 100644
index 00000000..a7518a8e
--- /dev/null
+++ b/packages/histoire-controls/src/components/HstCopyIcon.vue
@@ -0,0 +1,34 @@
+<script lang="ts">
+export default {
+  name: 'HstCopyIcon',
+}
+</script>
+
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { useClipboard } from '@vueuse/core'
+import { VTooltip as vTooltip } from 'floating-vue'
+
+const props = defineProps<{
+  content: string
+}>()
+
+const { copy, copied } = useClipboard()
+
+const action = () => copy(props.content)
+</script>
+
+<template>
+  <Icon
+    v-tooltip="{
+      content: 'Copied!',
+      triggers: [],
+      shown: copied,
+      distance: 12,
+      delay: 0,
+    }"
+    icon="carbon:copy-file"
+    class="htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
+    @click="action()"
+  />
+</template>
diff --git a/packages/histoire-controls/src/index.ts b/packages/histoire-controls/src/index.ts
index 405c0e9e..6c69b36a 100644
--- a/packages/histoire-controls/src/index.ts
+++ b/packages/histoire-controls/src/index.ts
@@ -3,11 +3,13 @@ import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
 import HstTextVue from './components/text/HstText.vue'
 import HstNumberVue from './components/number/HstNumber.vue'
 import HstTextareaVue from './components/textarea/HstTextarea.vue'
+import HstCopyIconVue from './components/HstCopyIcon.vue'
 
 export const HstCheckbox = HstCheckboxVue
 export const HstText = HstTextVue
 export const HstNumber = HstNumberVue
 export const HstTextarea = HstTextareaVue
+export const HstCopyIcon = HstCopyIconVue
 
 export function registerVueComponents (app: App) {
   app.component('HstCheckbox', HstCheckboxVue)
diff --git a/packages/histoire/src/client/app/components/story/StorySourceCode.vue b/packages/histoire/src/client/app/components/story/StorySourceCode.vue
index 143ad84e..4269b6ab 100644
--- a/packages/histoire/src/client/app/components/story/StorySourceCode.vue
+++ b/packages/histoire/src/client/app/components/story/StorySourceCode.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import { computed, onMounted, PropType, ref, shallowRef, watch } from 'vue'
 import { getHighlighter, Highlighter, setCDN } from 'shiki'
-import { Icon } from '@iconify/vue'
+import { HstCopyIcon } from '@histoire/controls'
 import { generateSourceCode } from '../../codegen/vue3'
 import type { Variant } from '../../types'
 import { isDark } from '../../util/dark'
 import { unindent } from '../../codegen/util'
-import { useClipboard } from '@vueuse/core'
 
 const props = defineProps({
   variant: {
@@ -59,11 +58,6 @@ const sourceHtml = computed(() => highlighter.value?.codeToHtml(sourceCode.value
   lang: 'html',
   theme: isDark.value ? 'github-dark' : 'github-light',
 }))
-
-// Copy
-const { copy, copied } = useClipboard()
-
-const copySourceCode = () => copy(sourceCode.value)
 </script>
 
 <template>
@@ -97,16 +91,8 @@ const copySourceCode = () => copy(sourceCode.value)
       v-if="!error"
       class="htw-absolute htw-top-2 htw-right-6 htw-p-1 htw-bg-gray-100 dark:htw-bg-gray-800"
     >
-      <Icon
-        v-tooltip="{
-          content: 'Copied!',
-          triggers: [],
-          shown: copied,
-          distance: 12,
-        }"
-        icon="carbon:copy-file"
-        class="htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
-        @click="copySourceCode()"
+      <HstCopyIcon
+        :content="sourceCode"
       />
     </div>
   </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d60247d..e0164708 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -171,6 +171,7 @@ importers:
 
   packages/histoire-controls:
     specifiers:
+      '@iconify/vue': ^3.2.1
       '@peeky/test': ^0.13.5
       '@types/node': ^17.0.23
       '@vitejs/plugin-vue': ^2.3.1
@@ -187,15 +188,17 @@ importers:
       vite: ^2.9.1
       vue: ^3.2.31
       vue-tsc: ^0.33.9
+    dependencies:
+      '@iconify/vue': 3.2.1_vue@3.2.31
+      '@vueuse/core': 8.2.5_vue@3.2.31
+      floating-vue: 2.0.0-beta.14_vue@3.2.31
     devDependencies:
       '@peeky/test': 0.13.5_eslint@8.13.0
       '@types/node': 17.0.23
       '@vitejs/plugin-vue': 2.3.1_vite@2.9.1+vue@3.2.31
       '@vue/test-utils': 2.0.0-rc.19_vue@3.2.31
-      '@vueuse/core': 8.2.5_vue@3.2.31
       autoprefixer: 10.4.4_postcss@8.4.12
       concurrently: 7.1.0
-      floating-vue: 2.0.0-beta.14_vue@3.2.31
       histoire: link:../histoire
       postcss: 8.4.12
       postcss-import: 14.1.0_postcss@8.4.12
@@ -1443,6 +1446,7 @@ packages:
       '@vueuse/shared': 8.2.5_vue@3.2.31
       vue: 3.2.31
       vue-demi: 0.12.5_vue@3.2.31
+    dev: false
 
   /@vueuse/metadata/8.2.5:
     resolution: {integrity: sha512-Lk9plJjh9cIdiRdcj16dau+2LANxIdFCiTgdfzwYXbflxq0QnMBeOD2qHgKDE7fuVrtPcVWj8VSuZEx1HRfNQA==}
@@ -1474,6 +1478,7 @@ packages:
     dependencies:
       vue: 3.2.31
       vue-demi: 0.12.5_vue@3.2.31
+    dev: false
 
   /@wry/equality/0.1.11:
     resolution: {integrity: sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==}
@@ -3856,6 +3861,7 @@ packages:
       '@floating-ui/dom': 0.1.10
       vue: 3.2.31
       vue-resize: 2.0.0-alpha.1_vue@3.2.31
+    dev: false
 
   /follow-redirects/1.14.9_debug@4.3.2:
     resolution: {integrity: sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==}
@@ -6872,6 +6878,7 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.31
+    dev: false
 
   /vue-eslint-parser/8.3.0_eslint@8.13.0:
     resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==}
@@ -6909,6 +6916,7 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.31
+    dev: false
 
   /vue-router/4.0.14_vue@3.2.31:
     resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==}