diff --git a/src/components/iconButton/UKIconButton.module.scss b/src/components/iconButton/UKIconButton.module.scss
index e09aad6..b923cda 100644
--- a/src/components/iconButton/UKIconButton.module.scss
+++ b/src/components/iconButton/UKIconButton.module.scss
@@ -29,6 +29,12 @@
     margin-right var(--uk-sys-motion-duration-50) var(--uk-sys-motion-easing-linear),
     border-radius var(--border-radius-duration, var(--uk-sys-motion-duration-50)) var(--uk-sys-motion-easing-linear);
 
+  >img {
+    display: block;
+    width: var(--icon-size);
+    height: var(--icon-size);
+  }
+
   &::before {
     content: "";
     position: absolute;
@@ -386,10 +392,8 @@
         color: rgb(var(--uk-sys-color-on-surface-variant));
 
         &::before {
-          background-color: rgb(
-            var(--uk-sys-color-on-surface-variant),
-            var(--uk-sys-state-pressed-state-layer-opacity)
-          );
+          background-color: rgb(var(--uk-sys-color-on-surface-variant),
+              var(--uk-sys-state-pressed-state-layer-opacity));
         }
       }
 
@@ -397,10 +401,8 @@
         color: rgb(var(--uk-sys-color-on-primary));
 
         &::before {
-          background-color: rgb(
-            var(--uk-sys-color-on-surface-variant),
-            var(--uk-sys-state-pressed-state-layer-opacity)
-          );
+          background-color: rgb(var(--uk-sys-color-on-surface-variant),
+              var(--uk-sys-state-pressed-state-layer-opacity));
         }
       }
     }
@@ -445,20 +447,16 @@
       color: rgb(var(--uk-sys-color-on-secondary-container));
 
       &::before {
-        background-color: rgb(
-          var(--uk-sys-color-on-secondary-container),
-          var(--uk-sys-state-focus-state-layer-opacity)
-        );
+        background-color: rgb(var(--uk-sys-color-on-secondary-container),
+            var(--uk-sys-state-focus-state-layer-opacity));
       }
 
       &[data-type="toggle"] {
         color: rgb(var(--uk-sys-color-on-secondary-container));
 
         &::before {
-          background-color: rgb(
-            var(--uk-sys-color-on-secondary-container),
-            var(--uk-sys-state-focus-state-layer-opacity)
-          );
+          background-color: rgb(var(--uk-sys-color-on-secondary-container),
+              var(--uk-sys-state-focus-state-layer-opacity));
         }
       }
 
@@ -475,20 +473,16 @@
       color: rgb(var(--uk-sys-color-on-secondary-container));
 
       &::before {
-        background-color: rgb(
-          var(--uk-sys-color-on-secondary-container),
-          var(--uk-sys-state-hover-state-layer-opacity)
-        );
+        background-color: rgb(var(--uk-sys-color-on-secondary-container),
+            var(--uk-sys-state-hover-state-layer-opacity));
       }
 
       &[data-type="toggle"] {
         color: rgb(var(--uk-sys-color-on-secondary-container));
 
         &::before {
-          background-color: rgb(
-            var(--uk-sys-color-on-secondary-container),
-            var(--uk-sys-state-over-state-layer-opacity)
-          );
+          background-color: rgb(var(--uk-sys-color-on-secondary-container),
+              var(--uk-sys-state-over-state-layer-opacity));
         }
       }
 
@@ -505,20 +499,16 @@
       color: rgb(var(--uk-sys-color-on-secondary-container));
 
       &::before {
-        background-color: rgb(
-          var(--uk-sys-color-on-secondary-container),
-          var(--uk-sys-state-pressed-state-layer-opacity)
-        );
+        background-color: rgb(var(--uk-sys-color-on-secondary-container),
+            var(--uk-sys-state-pressed-state-layer-opacity));
       }
 
       &[data-type="toggle"] {
         color: rgb(var(--uk-sys-color-on-surface-variant));
 
         &::before {
-          background-color: rgb(
-            var(--uk-sys-color-on-secondary-container),
-            var(--uk-sys-state-pressed-state-layer-opacity)
-          );
+          background-color: rgb(var(--uk-sys-color-on-secondary-container),
+              var(--uk-sys-state-pressed-state-layer-opacity));
         }
       }
 
@@ -579,10 +569,8 @@
         color: rgb(var(--uk-sys-color-on-surface-variant));
 
         &::before {
-          background-color: rgb(
-            var(--uk-sys-color-on-secondary-container),
-            var(--uk-sys-state-focus-state-layer-opacity)
-          );
+          background-color: rgb(var(--uk-sys-color-on-secondary-container),
+              var(--uk-sys-state-focus-state-layer-opacity));
         }
       }
 
@@ -630,10 +618,8 @@
         color: rgb(var(--uk-sys-color-on-surface-variant));
 
         &::before {
-          background-color: rgb(
-            var(--uk-sys-color-on-surface-variant),
-            var(--uk-sys-state-pressed-state-layer-opacity)
-          );
+          background-color: rgb(var(--uk-sys-color-on-surface-variant),
+              var(--uk-sys-state-pressed-state-layer-opacity));
         }
       }
 
@@ -641,10 +627,8 @@
         color: rgb(var(--uk-sys-color-inverse-on-surface));
 
         &::before {
-          background-color: rgb(
-            var(--uk-sys-color-inverse-on-surface),
-            var(--uk-sys-state-pressed-state-layer-opacity)
-          );
+          background-color: rgb(var(--uk-sys-color-inverse-on-surface),
+              var(--uk-sys-state-pressed-state-layer-opacity));
         }
       }
     }
@@ -742,10 +726,8 @@
         color: rgb(var(--uk-sys-color-on-surface-variant));
 
         &::before {
-          background-color: rgb(
-            var(--uk-sys-color-on-surface-variant),
-            var(--uk-sys-state-pressed-state-layer-opacity)
-          );
+          background-color: rgb(var(--uk-sys-color-on-surface-variant),
+              var(--uk-sys-state-pressed-state-layer-opacity));
         }
       }
 
@@ -778,4 +760,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/iconButton/UKIconButton.tsx b/src/components/iconButton/UKIconButton.tsx
index a10aee6..96009be 100644
--- a/src/components/iconButton/UKIconButton.tsx
+++ b/src/components/iconButton/UKIconButton.tsx
@@ -11,6 +11,7 @@ import styles from "./UKIconButton.module.scss";
 
 const UKIconButton: Component<{
   icon: string;
+  iconType?: "icon" | "image";
   alt: string;
   onClick: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;
   width?: IconButtonWidth;
@@ -46,7 +47,9 @@ const UKIconButton: Component<{
       class={clsx(props.class, styles.root)}
       aria-label={props.alt}
     >
+      {props.iconType === "image" ? <img src={props.icon}/> :
       <UKIcon class={props.iconClass}>{props.icon}</UKIcon>
+}
     </button>
   );
 };