diff --git a/README.md b/README.md
index 1aa27835..7695605d 100644
--- a/README.md
+++ b/README.md
@@ -81,7 +81,7 @@ Set the CSS `display` property for the icon wrapper element.
 - required: `false`
 - default: `false`
 
-Whether the SVG is meaningful to the page, or just complimentary. Utilized to expose or hide the SVG from screen readers.
+Whether the SVG is meaningful to the page, or just complimentary. Utilized to expose or hide the SVG from screen readers and enable or disable pointer events.
 
 #### `size`
 
diff --git a/src/__template__/ComponentTemplate.vue b/src/__template__/ComponentTemplate.vue
index 82bcf6a2..394834e5 100644
--- a/src/__template__/ComponentTemplate.vue
+++ b/src/__template__/ComponentTemplate.vue
@@ -90,7 +90,7 @@ const iconSize = computed((): string => {
  * We are adding styles inline to avoid additional stylesheet imports in the host application/component.
  * All of the properties should be mapped to component props for customization.
  */
-const rootElementStyles = computed((): Record<string, string> => ({
+const rootElementStyles = computed((): Record<string, string | undefined> => ({
   boxSizing: 'border-box',
   color: props.color,
   display: props.display,
@@ -98,6 +98,7 @@ const rootElementStyles = computed((): Record<string, string> => ({
   height: iconSize.value,
   lineHeight: '0',
   width: iconSize.value,
+  pointerEvents: props.decorative ? 'none' : undefined,
 }))
 
 /**
@@ -155,6 +156,7 @@ const svgProcessedContent = `${svgTitleContent}${!props.staticIds ? prefixSvgIds
     class="kui-icon {%%KONG_COMPONENT_ICON_CLASS%%}"
     data-testid="kui-icon-wrapper-{%%KONG_COMPONENT_ICON_CLASS%%}"
     :style="rootElementStyles"
+    :tabindex="decorative ? '-1' : undefined"
   >
     <svg
       :aria-hidden="decorative ? 'true' : undefined"