diff --git a/src/styles/font-styles.js b/src/styles/font-styles.js
index 75070078..4460330e 100644
--- a/src/styles/font-styles.js
+++ b/src/styles/font-styles.js
@@ -87,54 +87,27 @@ export default css`
     grid-template-columns: 20px 1fr;
   }
 
+  .m-markdown .callout-icon {
+    display: inline-block;
+    flex-shrink: 0;
+    grid-row: 1;
+  }
+
   .m-markdown .info-blockquote {
     background: #f8f7fc;
     border: 1px solid #ccced8;
   }
 
-  .m-markdown .info-blockquote:before {
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    content: '';
-    background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/info.svg')
-      no-repeat 0 0;
-    background-size: 20px 20px;
-    position: absolute;
-  }
-
   .m-markdown .warning-blockquote {
     background: #fff2d4;
     border: 1px solid #ffb100;
   }
 
-  .m-markdown .warning-blockquote:before {
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    content: '';
-    background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/warning.svg')
-      no-repeat 0 0;
-    background-size: 20px 20px;
-    position: absolute;
-  }
-
   .m-markdown .danger-blockquote {
     background: #fdefef;
     border: 1px solid #dc5a41;
   }
 
-  .m-markdown .danger-blockquote:before {
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    content: '';
-    background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/danger.svg')
-      no-repeat 0 0;
-    background-size: 20px 20px;
-    position: absolute;
-  }
-
   blockquote p{
     grid-column: 2 / -1;
     margin: 0;
diff --git a/src/utils/renderBlockquote.js b/src/utils/renderBlockquote.js
index 4de9444a..527e34f3 100644
--- a/src/utils/renderBlockquote.js
+++ b/src/utils/renderBlockquote.js
@@ -1,3 +1,18 @@
+const calloutColors = {
+  info: '#8C929D',
+  warning: '#FFB100',
+  danger: '#DC5A41',
+};
+
+function calloutIcon(type) {
+  const fill = calloutColors[type] || calloutColors.info;
+  const glyph = type === 'info'
+    ? '<rect x="9.1" y="5" width="1.8" height="1.8" rx="0.9" fill="white"/><rect x="9.1" y="8.2" width="1.8" height="6.8" rx="0.9" fill="white"/>'
+    : '<rect x="9.1" y="5" width="1.8" height="7" rx="0.9" fill="white"/><rect x="9.1" y="13.5" width="1.8" height="1.8" rx="0.9" fill="white"/>';
+
+  return `<svg class="callout-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="${fill}"/>${glyph}</svg>`;
+}
+
 export default function renderBlockquote(text) {
   const infoMarker = 'ℹ️';
   const bookMarker = '📘';
@@ -6,18 +21,18 @@ export default function renderBlockquote(text) {
 
   if (text.startsWith(`<p>${infoMarker}`)) {
     // Apply custom styling for the info blockquote
-    return `<blockquote class="info-blockquote">${text.replace(infoMarker, '').trim()}</blockquote>`;
+    return `<blockquote class="info-blockquote">${calloutIcon('info')}${text.replace(infoMarker, '').trim()}</blockquote>`;
   } if (text.startsWith(`<p>${bookMarker}`)) {
     // Apply custom styling for the info blockquote
-    return `<blockquote class="info-blockquote">${text.replace(bookMarker, '').trim()}</blockquote>`;
+    return `<blockquote class="info-blockquote">${calloutIcon('info')}${text.replace(bookMarker, '').trim()}</blockquote>`;
   } if (text.startsWith(`<p>${warningMarker} `)) {
     // Apply custom styling for the warning blockquote
-    return `<blockquote class="warning-blockquote">${text.replace(warningMarker, '').trim()}</blockquote>`;
+    return `<blockquote class="warning-blockquote">${calloutIcon('warning')}${text.replace(warningMarker, '').trim()}</blockquote>`;
   } if (text.startsWith(`<p>${dangerMarker} `)) {
     // Apply custom styling for the danger blockquote
-    return `<blockquote class="danger-blockquote">${text.replace(dangerMarker, '').trim()}</blockquote>`;
+    return `<blockquote class="danger-blockquote">${calloutIcon('danger')}${text.replace(dangerMarker, '').trim()}</blockquote>`;
   }
 
   // Default rendering for regular blockquotes
-  return `<blockquote class="info-blockquote">${text}</blockquote>`;
+  return `<blockquote class="info-blockquote">${calloutIcon('info')}${text}</blockquote>`;
 }