diff --git a/package-lock.json b/package-lock.json
index 778bdd9e2..fe987e899 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
       "devDependencies": {
         "@edx/frontend-build": "^11.0.2",
         "@edx/frontend-platform": "2.4.0",
-        "@edx/paragon": "^20.21.0",
+        "@edx/paragon": "^20.21.3",
         "@testing-library/dom": "^8.13.0",
         "@testing-library/react": "12.1.1",
         "@testing-library/user-event": "^13.5.0",
@@ -2329,9 +2329,9 @@
       }
     },
     "node_modules/@edx/paragon": {
-      "version": "20.21.0",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.21.0.tgz",
-      "integrity": "sha512-p9g/ONfWsZ6UxX7hNEoO2nUI0qhdGqQZYvLk3MpE0NMmTUYafpCBpRwOGYTXOXpIBzRENRiJUGJ/59XL0MelOw==",
+      "version": "20.21.3",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.21.3.tgz",
+      "integrity": "sha512-h/x4vZ6Plkfjmc3mV3+gd4wYt5fBC1QnNYfd8Fz5bybsNAQ/DZfryzXObuJjy4R++4RqPTKt+4/aoAMgRmCdDQ==",
       "dev": true,
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -26418,9 +26418,9 @@
       }
     },
     "@edx/paragon": {
-      "version": "20.21.0",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.21.0.tgz",
-      "integrity": "sha512-p9g/ONfWsZ6UxX7hNEoO2nUI0qhdGqQZYvLk3MpE0NMmTUYafpCBpRwOGYTXOXpIBzRENRiJUGJ/59XL0MelOw==",
+      "version": "20.21.3",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.21.3.tgz",
+      "integrity": "sha512-h/x4vZ6Plkfjmc3mV3+gd4wYt5fBC1QnNYfd8Fz5bybsNAQ/DZfryzXObuJjy4R++4RqPTKt+4/aoAMgRmCdDQ==",
       "dev": true,
       "requires": {
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
diff --git a/package.json b/package.json
index 4cae644ea..f1fce9acd 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@edx/frontend-build": "^11.0.2",
     "@edx/frontend-platform": "2.4.0",
-    "@edx/paragon": "^20.21.0",
+    "@edx/paragon": "^20.21.3",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/react": "12.1.1",
     "@testing-library/user-event": "^13.5.0",
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/ErrorSummary.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/ErrorSummary.jsx
index f65da9b2b..f5943a749 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/ErrorSummary.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/ErrorSummary.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { Alert } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { InfoOutline } from '@edx/paragon/icons';
 
 import messages from './components/messages';
 import { ErrorContext } from '../../hooks';
@@ -16,7 +16,7 @@ export const ErrorSummary = () => {
   const errors = React.useContext(ErrorContext);
   return (
     <Alert
-      icon={Info}
+      icon={InfoOutline}
       show={module.showAlert(errors)}
       variant="danger"
     >
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
index 64ca5e2fa..2a9c6d128 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Collapsible, Icon, IconButton } from '@edx/paragon';
-import { ExpandLess, ExpandMore, Info } from '@edx/paragon/icons';
+import { ExpandLess, ExpandMore, InfoOutline } from '@edx/paragon/icons';
 
 import messages from './messages';
 
@@ -38,7 +38,7 @@ export const CollapsibleFormWidget = ({
           {subtitle ? <div className={`${fontSize} mb-4 mt-3`}>{subtitle}</div> : <div className="mb-4" />}
         </div>
         <div className="d-flex flex-row align-self-start">
-          {isError && <Icon className="alert-icon" src={Info} />}
+          {isError && <Icon className="alert-icon" src={InfoOutline} />}
           <IconButton alt={intl.formatMessage(messages.expandAltText)} src={ExpandMore} iconAs={Icon} variant="dark" />
         </div>
       </Collapsible.Visible>
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
index 0eab68191..fe710c5ee 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
@@ -12,7 +12,7 @@ import {
   Icon,
   IconButtonWithTooltip,
 } from '@edx/paragon';
-import { Delete } from '@edx/paragon/icons';
+import { DeleteOutline } from '@edx/paragon/icons';
 
 import { actions, selectors } from '../../../../../../data/redux';
 import hooks from './hooks';
@@ -54,7 +54,7 @@ export const LicenseSelector = ({
             <ActionRow.Spacer />
             <IconButtonWithTooltip
               iconAs={Icon}
-              src={Delete}
+              src={DeleteOutline}
               onClick={() => {
                 ref.current.value = courseLicenseType;
                 updateField({ licenseType: '', licenseDetails: {} });
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
index 89dab43b9..c8b9efe77 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
@@ -14,7 +14,7 @@ import {
   IconButtonWithTooltip,
   Alert,
 } from '@edx/paragon';
-import { Delete, FileUpload } from '@edx/paragon/icons';
+import { DeleteOutline, FileUpload } from '@edx/paragon/icons';
 
 import { selectors } from '../../../../../../data/redux';
 import { isEdxVideo } from '../../../../../../data/services/cms/api';
@@ -95,7 +95,7 @@ export const ThumbnailWidget = ({
               tooltipPlacement="top"
               tooltipContent={intl.formatMessage(messages.deleteThumbnail)}
               iconAs={Icon}
-              src={Delete}
+              src={DeleteOutline}
               onClick={deleteThumbnail}
             />
           ) : null }
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
index 7c6474dd0..15bc19b47 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
@@ -10,7 +10,7 @@ import {
   Icon,
   ActionRow,
 } from '@edx/paragon';
-import { Delete } from '@edx/paragon/icons';
+import { DeleteOutline } from '@edx/paragon/icons';
 
 import {
   FormattedMessage,
@@ -83,7 +83,7 @@ export const Transcript = ({
             { language === '' ? (
               <IconButton
                 iconAs={Icon}
-                src={Delete}
+                src={DeleteOutline}
                 onClick={() => launchDeleteConfirmation()}
               />
             ) : (
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
index ee3bf46f6..97fd98c4a 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
@@ -15,7 +15,7 @@ import {
   Tooltip,
   ActionRow,
 } from '@edx/paragon';
-import { Add, Info } from '@edx/paragon/icons';
+import { Add, InfoOutline } from '@edx/paragon/icons';
 
 import { actions, selectors } from '../../../../../../data/redux';
 import messages from './messages';
@@ -135,7 +135,7 @@ export const TranscriptWidget = ({
                   </Tooltip>
                 )}
               >
-                <Icon src={Info} style={{ height: '16px', width: '16px' }} />
+                <Icon src={InfoOutline} style={{ height: '16px', width: '16px' }} />
               </OverlayTrigger>
               <ActionRow.Spacer />
             </ActionRow>
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
index b2602f648..7dc2762d5 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -12,7 +12,7 @@ import {
   OverlayTrigger,
   FormControlFeedback,
 } from '@edx/paragon';
-import { Delete, Info, Add } from '@edx/paragon/icons';
+import { DeleteOutline, InfoOutline, Add } from '@edx/paragon/icons';
 import {
   FormattedMessage,
   injectIntl,
@@ -97,7 +97,7 @@ export const VideoSourceWidget = ({
               key={`top-delete-${videoUrl}`}
               tooltipPlacement="top"
               tooltipContent={intl.formatMessage(messages.deleteFallbackVideo)}
-              src={Delete}
+              src={DeleteOutline}
               iconAs={Icon}
               alt={intl.formatMessage(messages.deleteFallbackVideo)}
               onClick={() => deleteFallbackVideo(videoUrl)}
@@ -123,7 +123,7 @@ export const VideoSourceWidget = ({
               </Tooltip>
             )}
           >
-            <Icon src={Info} style={{ height: '16px', width: '16px' }} />
+            <Icon src={InfoOutline} style={{ height: '16px', width: '16px' }} />
           </OverlayTrigger>
           <ActionRow.Spacer />
         </ActionRow>
diff --git a/src/editors/sharedComponents/ErrorAlerts/ErrorAlert.jsx b/src/editors/sharedComponents/ErrorAlerts/ErrorAlert.jsx
index 4300df0e5..fe73eb053 100644
--- a/src/editors/sharedComponents/ErrorAlerts/ErrorAlert.jsx
+++ b/src/editors/sharedComponents/ErrorAlerts/ErrorAlert.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Alert } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Outline } from '@edx/paragon/icons';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import messages from './messages';
@@ -42,7 +42,7 @@ export const ErrorAlert = ({
   return (
     <Alert
       variant="danger"
-      icon={Info}
+      icon={Outline}
       dismissible
       onClose={dismissAlert}
     >