diff --git a/packages/core/src/components/buttons/IconButton/IconButton.stories.ts b/packages/core/src/components/buttons/IconButton/IconButton.stories.ts
index d805beb7..604d2689 100644
--- a/packages/core/src/components/buttons/IconButton/IconButton.stories.ts
+++ b/packages/core/src/components/buttons/IconButton/IconButton.stories.ts
@@ -279,3 +279,80 @@ export const PrimaryLink: Story = {
     href: '#'
   }
 }
+
+/**
+ * An example of a custom styled IconButton using CSS variables.
+ * These styles will override the default styles of the IconButton component.
+ * The variant is set to 'blank' to remove default styling.
+ *
+ * Note: In a real application, it's better to use a CSS class or a style scoped block
+ * instead of inline styles for better maintainability.
+ *
+ * - `--icon-button-color`: The color of the icon.
+ * - `--icon-button-bg-color`: The background color of the button.
+ * - `--icon-button-bg-hover-color`: The background color of the button on hover.
+ * - `--icon-button-font-size`: The size of the icon.
+ * - `--icon-button-radius`: The border radius of the button.
+ * - `--icon-button-padding`: The padding inside the button.
+ */
+export const CustomColors: Story = {
+  render: (args: unknown) => ({
+    components: { IconButton, IconInfoCircle },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton
+        v-bind="args"
+        style="
+          --icon-button-color: #6b21a8;
+          --icon-button-bg-color: transparent;
+          --icon-button-bg-hover-color: #cc2626;
+          --icon-button-font-size: 5rem;
+          --icon-button-radius: 100px;
+          --icon-button-padding: 3rem;
+        "
+      >
+        <IconInfoCircle />
+      </IconButton>
+    `
+  }),
+  args: {
+    ...Primary.args,
+    variant: 'blank',
+  }
+}
+
+/**
+ * Custom colors with filled style
+ *
+ *
+ */
+export const CustomColorsFilled: Story = {
+  render: (args: unknown) => ({
+    components: { IconButton, IconInfoCircle },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton
+        v-bind="args"
+        style="
+          --icon-button-color: #6b21a8;
+          --icon-button-bg-color: #7e22ce;
+          --icon-button-bg-hover-color: #cc2626;
+          --icon-button-font-size: 5rem;
+          --icon-button-radius: 1px;
+          --icon-button-padding: 0.5rem;
+        "
+      >
+        <IconInfoCircle />
+        <span>Text</span>
+      </IconButton>
+    `
+  }),
+  args: {
+    ...PrimaryFilled.args,
+    variant: 'blank',
+  }
+}
diff --git a/packages/core/src/components/buttons/IconButton/IconButton.vue b/packages/core/src/components/buttons/IconButton/IconButton.vue
index 70543632..09c6cc44 100644
--- a/packages/core/src/components/buttons/IconButton/IconButton.vue
+++ b/packages/core/src/components/buttons/IconButton/IconButton.vue
@@ -36,9 +36,11 @@ const props = withDefaults(
     /**
      * Defines button color variant
      *
-     * @values primary, neutral, info, warning, danger, success
+     * @values primary, neutral, info, warning, danger, success, blank
+     *
+     * blank: no special coloring, just the default colors
      */
-    variant?: 'primary' | 'neutral' | 'info' | 'warning' | 'danger' | 'success'
+    variant?: 'primary' | 'neutral' | 'info' | 'warning' | 'danger' | 'success' | 'blank'
   }>(),
   {
     disabled: false,
@@ -143,6 +145,11 @@ const disabled = computed(() => props.disabled || props.busy)
     --_icon-button-bg-hover-color: var(--color-success-200);
   }
 
+  &.blank {
+    --_icon-button-color: var(--icon-button-color, var(--color-font-1));
+    --_icon-button-bg-color: var(--icon-button-bg-color, transparent);
+  }
+
   // Filled variant overrides
   &.filled {
     --_icon-button-color: var(--color-white);
@@ -186,13 +193,13 @@ const disabled = computed(() => props.disabled || props.busy)
   border-radius: var(--_icon-button-radius);
   font-size: var(--_icon-button-font-size);
   line-height: 0.5;
-  transition: transform 0.04s ease-in-out;
   padding: var(--_icon-button-padding);
   cursor: pointer;
   color: var(--_icon-button-color);
   background-color: var(--_icon-button-bg-color);
   text-decoration: none;
   text-align: center;
+  transition: transform 0.04s ease-in-out, color 0.2s, background-color 0.2s;
 
   &:hover:not(:disabled) {
     background-color: var(--_icon-button-bg-hover-color);
diff --git a/packages/core/src/components/icons/IconInfoCircle.vue b/packages/core/src/components/icons/IconInfoCircle.vue
index 12eb104a..6efd555f 100644
--- a/packages/core/src/components/icons/IconInfoCircle.vue
+++ b/packages/core/src/components/icons/IconInfoCircle.vue
@@ -1,3 +1,3 @@
 <template>
-  <i class="bi-info-circle-fill" />
+  <i class="bi bi-info-circle-fill" />
 </template>