diff --git a/docsite/src/components/AdmonitionDetails.tsx b/docsite/src/components/AdmonitionDetails.tsx
index fa098547..5f3352e9 100644
--- a/docsite/src/components/AdmonitionDetails.tsx
+++ b/docsite/src/components/AdmonitionDetails.tsx
@@ -5,9 +5,10 @@ import IconDanger from '@theme/Admonition/Icon/Danger';
 import IconTip from '@theme/Admonition/Icon/Tip';
 import IconNote from '@theme/Admonition/Icon/Note';
 import { ReactElement } from 'react';
+import AdmonitionIconImportant from './ImportantIcon';
 
 export interface DetailsAdmoProps extends DetailProps {
-    type?: 'warning' | 'danger' | 'note' | 'tip'
+    type?: 'warning' | 'danger' | 'note' | 'tip' | 'important'
 }
 
 const DetailsAdmo = (props: DetailsAdmoProps) => {
@@ -32,6 +33,10 @@ const DetailsAdmo = (props: DetailsAdmoProps) => {
             cn = 'alert--success';
             icon = <IconTip/>
             break;
+        case 'important':
+            cn = 'alert--important';
+            icon = <AdmonitionIconImportant/>;
+            break;            
     }
 
     const iconWrapper = icon === undefined ? null : <span className="admoIcon">{icon}</span>;
diff --git a/docsite/src/components/ImportantIcon.tsx b/docsite/src/components/ImportantIcon.tsx
new file mode 100644
index 00000000..b3778678
--- /dev/null
+++ b/docsite/src/components/ImportantIcon.tsx
@@ -0,0 +1,13 @@
+import type { Props } from '@theme/Admonition/Icon/Info';
+
+export default function AdmonitionIconImportant(props: Props) {
+    // based on https://icon-sets.iconify.design/zondicons/exclamation-outline/
+  return (
+    <svg viewBox="0 0 22 22" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07m12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32M9 5h2v6H9zm0 8h2v2H9z"
+      />
+    </svg>
+  );
+}
\ No newline at end of file
diff --git a/docsite/src/css/custom.css b/docsite/src/css/custom.css
index 25603721..46485615 100644
--- a/docsite/src/css/custom.css
+++ b/docsite/src/css/custom.css
@@ -13,6 +13,7 @@
   --ifm-color-primary-light: #33925d;
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-important-contrast-background: #bb91ff;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
@@ -26,6 +27,7 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-important-contrast-background: #5a3795;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
@@ -59,6 +61,10 @@ details[class^='details_'].alert--info {
     --ifm-alert-background-color: var(--ifm-color-secondary-contrast-background);
     --ifm-alert-foreground-color: var(--ifm-color-secondary-contrast-foreground);
   }
+  &.alert--important {
+    --ifm-alert-background-color: var(--ifm-color-important-contrast-background);
+    --ifm-alert-foreground-color: var(--ifm-color-secondary-contrast-foreground);
+  }
 
   > summary {
     --docusaurus-details-decoration-color: currentColor;