diff --git a/src/components/RichTextEditor/BlockStyleButtons.jsx b/src/components/RichTextEditor/BlockStyleButtons.jsx
index 9aa21176d..2d21267fc 100644
--- a/src/components/RichTextEditor/BlockStyleButtons.jsx
+++ b/src/components/RichTextEditor/BlockStyleButtons.jsx
@@ -5,8 +5,8 @@ import BulletIcon from '../../styles/icons/bullet.svg';
 import NumberIcon from '../../styles/icons/number.svg';
 
 const BLOCK_TYPES = [
-  { label: <BulletIcon data-testid="bullet" />, style: 'unordered-list-item', ariaLabel: 'Unordered list' },
-  { label: <NumberIcon data-testid="number" />, style: 'ordered-list-item', ariaLabel: 'Ordered list' },
+  { label: <img src={BulletIcon} data-testid="bullet" />, style: 'unordered-list-item', ariaLabel: 'Unordered list' },
+  { label: <img src={NumberIcon} data-testid="number" />, style: 'ordered-list-item', ariaLabel: 'Ordered list' },
 ];
 
 const BlockStyleButtons = (props) => {
diff --git a/src/components/RichTextEditor/InlineStyleButtons.jsx b/src/components/RichTextEditor/InlineStyleButtons.jsx
index 838a86ea6..0057d8817 100644
--- a/src/components/RichTextEditor/InlineStyleButtons.jsx
+++ b/src/components/RichTextEditor/InlineStyleButtons.jsx
@@ -6,10 +6,10 @@ import ItalicIcon from '../../styles/icons/italic.svg';
 import UnderlineIcon from '../../styles/icons/underline.svg';
 
 const INLINE_STYLES = [
-  { label: <BoldIcon data-testid="bold" />, style: 'BOLD', ariaLabel: 'Bold' },
-  { label: <ItalicIcon data-testid="italics" aria-label="italic" />, style: 'ITALIC', ariaLabel: 'Italic' },
+  { label: <img src={BoldIcon} data-testid="bold" />, style: 'BOLD', ariaLabel: 'Bold' },
+  { label: <img src={ItalicIcon} data-testid="italics" aria-label="italic" />, style: 'ITALIC', ariaLabel: 'Italic' },
   {
-    label: <UnderlineIcon data-testid="underline" aria-label="Underline" />,
+    label: <img src={UnderlineIcon} data-testid="underline" aria-label="Underline" />,
     style: 'UNDERLINE',
     ariaLabel: 'Underline',
   },