diff --git a/app/images/address-book.svg b/app/images/address-book.svg
deleted file mode 100644
index 7559babab..000000000
--- a/app/images/address-book.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="56" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M54.5 20c.75 0 1.5-.625 1.5-1.5v-5c0-.75-.75-1.5-1.5-1.5H52V6c0-3.25-2.75-6-6-6H6C2.625 0 0 2.75 0 6v52c0 3.375 2.625 6 6 6h40c3.25 0 6-2.625 6-6v-6h2.5c.75 0 1.5-.625 1.5-1.5v-5c0-.75-.75-1.5-1.5-1.5H52v-8h2.5c.75 0 1.5-.625 1.5-1.5v-5c0-.75-.75-1.5-1.5-1.5H52v-8h2.5zM26 16c4.375 0 8 3.625 8 8 0 4.5-3.625 8-8 8-4.5 0-8-3.5-8-8 0-4.375 3.5-8 8-8zm14 29.625C40 47 38.75 48 37.125 48H14.75c-1.5 0-2.75-1-2.75-2.375V43.25c0-4 3.75-7.25 8.375-7.25H21c1.5.75 3.125 1 5 1 1.75 0 3.375-.25 4.875-1h.625c4.625 0 8.5 3.25 8.5 7.25v2.375z" fill="#D6D9DC"/></svg>
\ No newline at end of file
diff --git a/app/images/alert-red.svg b/app/images/alert-red.svg
deleted file mode 100644
index 29aa77e8c..000000000
--- a/app/images/alert-red.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-        <circle cx="8" cy="8" fill="#d0021b" r="8"/>
-        <g fill="#fff">
-            <rect height="7" rx="1" width="2" x="7" y="3"/>
-            <rect height="2" rx="1" width="2" x="7" y="11"/>
-        </g>
-    </g>
-</svg>
diff --git a/app/images/alert.svg b/app/images/alert.svg
deleted file mode 100644
index 7238cfb29..000000000
--- a/app/images/alert.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg height="29" width="29" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-        <circle cx="14.5" cy="14.5" fill="#605a1c" r="14.5"/>
-        <path d="M16 16.828h-2V7h2zM16 21h-2v-2h2z" fill="#fffcdb"/>
-    </g>
-</svg>
diff --git a/app/images/arrow-popout.svg b/app/images/arrow-popout.svg
deleted file mode 100644
index c3a11e45f..000000000
--- a/app/images/arrow-popout.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg fill="none" height="10" width="10" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.676.642a.65.65 0 00-.072.006H4.793a.65.65 0 00-.57.975.65.65 0 00.57.322H7.12L.438 8.614a.647.647 0 00.286 1.096.65.65 0 00.632-.179L8.04 2.861v2.324a.648.648 0 00.977.57.648.648 0 00.322-.57V1.38a.647.647 0 00-.662-.737z" fill="#359bdd"/>
-</svg>
diff --git a/app/images/arrow-right.svg b/app/images/arrow-right.svg
deleted file mode 100644
index 158e63c82..000000000
--- a/app/images/arrow-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg height="21" width="25" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12.281.467a1.58 1.58 0 000 2.259l5.824 5.743H1.62a1.61 1.61 0 00-1.62 1.597v.001c0 .882.726 1.596 1.62 1.596h16.486l-5.824 5.745a1.58 1.58 0 000 2.258 1.637 1.637 0 002.29 0l9.734-9.6L14.571.467a1.637 1.637 0 00-2.29 0" fill="#5b5b5b" fill-rule="evenodd"/>
-</svg>
diff --git a/app/images/check_circle.svg b/app/images/check_circle.svg
deleted file mode 100644
index 514183743..000000000
--- a/app/images/check_circle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.75 8C15.75 3.75 12.25 0.25 8 0.25C3.71875 0.25 0.25 3.75 0.25 8C0.25 12.2812 3.71875 15.75 8 15.75C12.25 15.75 15.75 12.2812 15.75 8ZM7.09375 12.125C6.90625 12.3125 6.5625 12.3125 6.375 12.125L3.125 8.875C2.9375 8.6875 2.9375 8.34375 3.125 8.15625L3.84375 7.46875C4.03125 7.25 4.34375 7.25 4.53125 7.46875L6.75 9.65625L11.4375 4.96875C11.625 4.75 11.9375 4.75 12.125 4.96875L12.8438 5.65625C13.0312 5.84375 13.0312 6.1875 12.8438 6.375L7.09375 12.125Z" fill="#4CD964"/>
-</svg>
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
index 29f7b9edd..5c4f5d632 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
@@ -4,11 +4,7 @@ import PropTypes from 'prop-types';
 const ConfirmPageContainerWarning = (props) => {
   return (
     <div className="confirm-page-container-warning">
-      <img
-        className="confirm-page-container-warning__icon"
-        src="./images/alert.svg"
-        alt=""
-      />
+      <i className="fa fa-info-circle confirm-page-container-warning__icon" />
       <div className="confirm-page-container-warning__warning">
         {props.warning}
       </div>
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.stories.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.stories.js
new file mode 100644
index 000000000..f36b6bf4c
--- /dev/null
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import ConfirmPageContainerWarning from '.';
+
+export default {
+  title: 'Components/UI/ConfirmPageContainerWarning', // title should follow the folder structure location of the component. Don't use spaces.
+  id: __filename,
+  argTypes: {
+    warning: {
+      control: 'text',
+    },
+  },
+  args: {
+    warning: 'This is a warning',
+  },
+};
+
+export const DefaultStory = (args) => <ConfirmPageContainerWarning {...args} />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
index 1d437d4a2..e5377f96a 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss
@@ -7,12 +7,13 @@
 
   &__icon {
     flex: 0 0 auto;
-    margin-right: 16px;
+    margin-right: 8px;
+    color: var(--color-warning-default);
   }
 
   &__warning {
     @include H7;
 
-    color: var(--color-warning-default);
+    color: var(--color-text-default);
   }
 }
diff --git a/ui/components/ui/error-message/error-message.component.js b/ui/components/ui/error-message/error-message.component.js
index ceaf354db..dd1e16c5c 100644
--- a/ui/components/ui/error-message/error-message.component.js
+++ b/ui/components/ui/error-message/error-message.component.js
@@ -7,11 +7,7 @@ const ErrorMessage = (props, context) => {
 
   return (
     <div className="error-message">
-      <img
-        src="./images/alert-red.svg"
-        alt=""
-        className="error-message__icon"
-      />
+      <i className="fa fa-exclamation-circle error-message__icon" />
       <div className="error-message__text">{error}</div>
     </div>
   );
diff --git a/ui/components/ui/error-message/index.scss b/ui/components/ui/error-message/index.scss
index 80f38bc3c..42defef6e 100644
--- a/ui/components/ui/error-message/index.scss
+++ b/ui/components/ui/error-message/index.scss
@@ -2,9 +2,9 @@
   @include H7;
 
   min-height: 32px;
-  border: 1px solid var(--Red-300);
-  color: var(--ui-black);
-  background: var(--error-2);
+  border: 1px solid var(--color-error-default);
+  color: var(--color-text-default);
+  background-color: var(--color-error-muted);
   border-radius: 8px;
   display: flex;
   justify-content: flex-start;
@@ -14,6 +14,7 @@
   &__icon {
     margin-right: 8px;
     flex: 0 0 auto;
+    color: var(--color-error-default);
   }
 
   &__text {
diff --git a/ui/components/ui/sender-to-recipient/index.scss b/ui/components/ui/sender-to-recipient/index.scss
index f989197c5..e00d34c4c 100644
--- a/ui/components/ui/sender-to-recipient/index.scss
+++ b/ui/components/ui/sender-to-recipient/index.scss
@@ -66,6 +66,10 @@
         display: flex;
         justify-content: center;
         align-items: center;
+
+        &__icon {
+          color: var(--color-icon-muted);
+        }
       }
 
       &__name {
diff --git a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
index 2b19bf4a1..deb1faf47 100644
--- a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
@@ -155,7 +155,7 @@ function Arrow({ variant }) {
   return variant === DEFAULT_VARIANT ? (
     <div className="sender-to-recipient__arrow-container">
       <div className="sender-to-recipient__arrow-circle">
-        <img height="15" width="15" src="./images/arrow-right.svg" alt="" />
+        <i className="fa fa-arrow-right sender-to-recipient__arrow-circle__icon" />
       </div>
     </div>
   ) : (
diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
index 730fd7de9..b9f0c9682 100644
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@@ -309,10 +309,7 @@ export default class Home extends PureComponent {
             className="home__new-network-notification"
             message={
               <div className="home__new-network-notification-message">
-                <img
-                  src="./images/check_circle.svg"
-                  className="home__new-network-notification-message--image"
-                />
+                <i className="fa fa-check-circle home__new-network-notification-message--icon" />
                 <Typography
                   variant={TYPOGRAPHY.H7}
                   fontWeight={FONT_WEIGHT.NORMAL}
@@ -334,10 +331,7 @@ export default class Home extends PureComponent {
             className="home__new-network-notification"
             message={
               <div className="home__new-network-notification-message">
-                <img
-                  src="./images/check_circle.svg"
-                  className="home__new-network-notification-message--image"
-                />
+                <i className="fa fa-check-circle home__new-network-notification-message--icon" />
                 <Typography
                   variant={TYPOGRAPHY.H7}
                   fontWeight={FONT_WEIGHT.NORMAL}
diff --git a/ui/pages/home/index.scss b/ui/pages/home/index.scss
index c184d0226..96d88061d 100644
--- a/ui/pages/home/index.scss
+++ b/ui/pages/home/index.scss
@@ -141,9 +141,11 @@
   &__new-network-notification-message {
     display: flex;
     flex-direction: row;
+    align-items: center;
 
-    &--image {
-      margin-right: 10px;
+    &--icon {
+      margin-right: 8px;
+      color: var(--color-success-default);
     }
   }
 
diff --git a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
index f37f2c962..04ee9a88a 100644
--- a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
+++ b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
@@ -72,7 +72,10 @@ export default class ContactListTab extends Component {
     return (
       <div className="address-book__container">
         <div>
-          <img src="./images/address-book.svg" alt={t('addressBookIcon')} />
+          <i
+            className="fa fa-address-book fa-4x address-book__icon"
+            title={t('addressBookIcon')}
+          />
           <h4 className="address-book__title">{t('buildContactList')}</h4>
           <p className="address-book__sub-title">
             {t('addFriendsAndAddresses')}
diff --git a/ui/pages/settings/contact-list-tab/index.scss b/ui/pages/settings/contact-list-tab/index.scss
index 7bfd99398..eefa550ca 100644
--- a/ui/pages/settings/contact-list-tab/index.scss
+++ b/ui/pages/settings/contact-list-tab/index.scss
@@ -67,6 +67,11 @@
     text-align: center;
   }
 
+  &__icon {
+    margin-bottom: 16px;
+    display: block;
+  }
+
   &__title {
     @include H4;