diff --git a/assets/css/callouts.css b/assets/css/callouts.css
index 12bab2b8aa..9a2aaac119 100644
--- a/assets/css/callouts.css
+++ b/assets/css/callouts.css
@@ -10,7 +10,20 @@
     @apply bg-blue-light-100 px-6 py-4 font-normal not-italic dark:bg-blue-dark-100;
     quotes: none;
     > *:first-child {
-      @apply relative ml-6 mt-0 before:absolute before:-left-6 before:font-icons before:content-['info'];
+      @apply relative ml-6 mt-0;
+      &:before {
+        @apply bg-black dark:bg-white;
+        position: absolute;
+        display: block;
+        margin-left: -24px;
+        margin-top: 4px;
+        width: 20px;
+        height: 20px;
+        mask-image: url('/icons/info-fill.svg');
+        -webkit-mask-image: url('/icons/info-fill.svg');
+        mask-repeat: no-repeat;
+        mask-size: cover;
+      }
     }
     *:last-child {
       @apply mb-0 after:content-none;
@@ -18,34 +31,39 @@
 
     &.warning {
       @apply border-l-red-light bg-red-light-100 dark:border-l-red-dark dark:bg-red-dark-100;
-      > *:first-child {
-        @apply before:content-['dangerous'];
+      > *:first-child:before {
+        mask-image: url('/icons/dangerous-fill.svg');
+        -webkit-mask-image: url('/icons/dangerous-fill.svg');
       }
     }
 
     &.important {
       @apply border-l-amber-light bg-amber-light-100 dark:border-l-amber-dark dark:bg-amber-dark-100;
-      > *:first-child {
-        @apply before:content-['warning'];
+      > *:first-child:before {
+        mask-image: url('/icons/warning-fill.svg');
+        -webkit-mask-image: url('/icons/warning-fill.svg');
       }
     }
 
     &.tip {
       @apply border-l-green-light bg-green-light-100 dark:border-l-green-dark dark:bg-green-dark-100;
-      > *:first-child {
-        @apply before:content-['lightbulb'];
+      > *:first-child:before {
+        mask-image: url('/icons/lightbulb-fill.svg');
+        -webkit-mask-image: url('/icons/lightbulb-fill.svg');
       }
     }
 
     &.experimental {
-      > *:first-child {
-        @apply before:content-['science'];
+      > *:first-child:before {
+        mask-image: url('/icons/science-fill.svg');
+        -webkit-mask-image: url('/icons/science-fill.svg');
       }
     }
     &.restricted {
       @apply border-l-violet-light bg-violet-light-100 dark:border-l-violet-dark dark:bg-violet-dark-100;
-      > *:first-child {
-        @apply before:content-['rocket\_launch'];
+      > *:first-child:before {
+        mask-image: url('/icons/rocket_launch-fill.svg');
+        -webkit-mask-image: url('/icons/rocket_launch-fill.svg');
       }
     }
   }
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 99bdf9ebaa..e9a1970a85 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -60,3 +60,4 @@
 {{ $mermaid := resources.Get "js/mermaid.js" | js.Build (dict "minify" true) }}
 <script>{{ $mermaid.Content | safeJS }}</script>
 {{ end }}
+{{ partialCached "utils/resources.html" . }}
diff --git a/layouts/partials/utils/resources.html b/layouts/partials/utils/resources.html
new file mode 100644
index 0000000000..e1cfedf119
--- /dev/null
+++ b/layouts/partials/utils/resources.html
@@ -0,0 +1,11 @@
+{{/* meta partial for publishing resources */}}
+{{ $icons := slice }}
+{{ $icons = $icons | append (resources.Get "icons/info-fill.svg") }}
+{{ $icons = $icons | append (resources.Get "icons/dangerous-fill.svg") }}
+{{ $icons = $icons | append (resources.Get "icons/warning-fill.svg") }}
+{{ $icons = $icons | append (resources.Get "icons/lightbulb-fill.svg") }}
+{{ $icons = $icons | append (resources.Get "icons/science-fill.svg") }}
+{{ $icons = $icons | append (resources.Get "icons/rocket_launch-fill.svg") }}
+{{ range $icons }}
+  {{ .Publish}}
+{{ end }}