diff --git a/src/components/IconDetail.vue b/src/components/IconDetail.vue
index 1646d017..fe032490 100644
--- a/src/components/IconDetail.vue
+++ b/src/components/IconDetail.vue
@@ -235,6 +235,9 @@ const collection = computed(() => {
           <button class="btn small mr-1 mb-1 opacity-75" @click="copy('html')">
             Iconify
           </button>
+          <button class="btn small mr-1 mb-1 opacity-75" @click="copy('iconify-tailwind')">
+            Iconify Tailwind
+          </button>
           <button class="btn small mr-1 mb-1 opacity-75" @click="copy('pure-jsx')">
             JSX
           </button>
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
index b7c5eba5..ac8a312f 100644
--- a/src/utils/icons.ts
+++ b/src/utils/icons.ts
@@ -258,6 +258,9 @@ export async function getIconSnippet(icon: string, type: string, snippet = true,
       return SvgToReactNative(await getSvg(icon, undefined, color), toComponentName(icon), snippet)
     case 'unplugin':
       return `import ${toComponentName(icon)} from '~icons/${icon.split(':')[0]}/${icon.split(':')[1]}'`
+    case 'iconify-tailwind':
+      // https://iconify.design/docs/usage/css/tailwind/#html
+      return `<span class="icon-[${icon.replace(/:/g, '--')}]"></span>`
   }
 }