diff --git a/frontend/src/App.css b/frontend/src/App.css
index 2f91669..071727e 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -45,6 +45,10 @@
   color: #888;
 }
 
-html.dark .svg-display {
+html.dark .svg-display svg {
   filter: hue-rotate(180deg) invert(80%) saturate(200%);
 }
+
+html.dark .icon svg {
+  filter: none;
+}
diff --git a/frontend/src/components/InstanceView.jsx b/frontend/src/components/InstanceView.jsx
index d8e3c3f..6989901 100644
--- a/frontend/src/components/InstanceView.jsx
+++ b/frontend/src/components/InstanceView.jsx
@@ -1,11 +1,11 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { Printer } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
+import { AppInfo } from './AppInfo';
 import { SVGDisplay } from './SVGDisplay';
 import { Spinner } from './Spinner';
-import { Printer } from 'lucide-react';
-import { AppInfo } from './AppInfo';
 
 export const InstanceView = ({ templateName, objectID, endpoint }) => {
   const [details, setDetails] = useState([]);
@@ -72,7 +72,7 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => {
         ref={contentRef}
         className="html-content scrollbar scrollbar-track-gray-200
           scrollbar-thumb-gray-400 dark:scrollbar-track-custom-dark-3
-          dark:scrollbar-thumb-slate-600 mb-4 rounded-lg border-4
+          dark:scrollbar-thumb-slate-600 svg-display mb-4 rounded-lg border-4
           border-transparent bg-gray-100 p-8 text-gray-700 shadow-lg
           hover:border-gray-300 hover:shadow-md dark:bg-custom-dark-2
           dark:text-gray-100 dark:shadow-dark md:w-[210mm] print:m-0
@@ -83,7 +83,7 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => {
           <div className="fixed hidden md:-ml-14 md:-mt-6 md:block">
             <div
               onClick={() => window.print()}
-              className="flex cursor-pointer items-center justify-center
+              className="icon flex cursor-pointer items-center justify-center
                 rounded-full bg-custom-blue p-2 text-white transition-colors
                 duration-700 ease-in-out hover:bg-custom-blue-hover">
               <Printer></Printer>
diff --git a/frontend/src/components/Lightbox.jsx b/frontend/src/components/Lightbox.jsx
index e82cf8e..23a7cc0 100644
--- a/frontend/src/components/Lightbox.jsx
+++ b/frontend/src/components/Lightbox.jsx
@@ -1,9 +1,9 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useEffect, useState } from 'react';
-import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import { Printer, XIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import { LightboxButton } from './LightboxButton';
 
 export const Lightbox = ({ onClose, imageSource }) => {
@@ -59,8 +59,8 @@ export const Lightbox = ({ onClose, imageSource }) => {
       <div className="z-50 flex flex-col items-center justify-center">
         <div
           id="control-bar"
-          className="fixed top-0 z-50 flex w-screen justify-center bg-black
-            py-4 print:hidden">
+          className="icon fixed top-0 z-50 flex w-screen justify-center
+            bg-black py-4 print:hidden">
           <LightboxButton onClick={() => window.print()} className="mr-4">
             <Printer />
           </LightboxButton>