diff --git a/changelog/12976.txt b/changelog/12976.txt
new file mode 100644
index 000000000..1dea358d9
--- /dev/null
+++ b/changelog/12976.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Adds flight icons to UI
+```
\ No newline at end of file
diff --git a/ui/.storybook/config.js b/ui/.storybook/config.js
index 3a9556ab2..23f4116d6 100644
--- a/ui/.storybook/config.js
+++ b/ui/.storybook/config.js
@@ -1,6 +1,7 @@
 import { configure, addParameters, addDecorator } from '@storybook/ember';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import theme from './theme.js';
+import flightIconSprite from '@hashicorp/flight-icons/svg-sprite/svg-sprite-module';
 
 function loadStories() {
   // automatically import all files ending in *.stories.js
@@ -18,6 +19,9 @@ addParameters({
 addDecorator(storyFn => {
   const { template, context } = storyFn();
 
+  // flight icon sprite must be inserted into dom for icon lookup via use element
+  document.getElementById('root').insertAdjacentHTML('afterbegin', flightIconSprite.trim());
+
   // This adds styling to the Canvas tab.
   const styles = {
     style: {
diff --git a/ui/app/components/regex-validator.hbs b/ui/app/components/regex-validator.hbs
index 18c5cf64f..4b38e7a67 100644
--- a/ui/app/components/regex-validator.hbs
+++ b/ui/app/components/regex-validator.hbs
@@ -57,7 +57,7 @@
         <AlertInline @type="danger" @message="Your regex doesn't match the subject string" />
       {{else}}
         <div class="message-inline">
-          <Icon @glyph="check-circle-fill" class="has-text-success" aria-hidden="true" />
+          <Icon @name="check-circle-fill" class="has-text-success" />
           <p data-test-inline-success-message>Your regex matches the subject string</p>
         </div>
       {{/if}}
diff --git a/ui/app/components/status-menu.js b/ui/app/components/status-menu.js
index 59bfc2bcf..8aa4e182e 100644
--- a/ui/app/components/status-menu.js
+++ b/ui/app/components/status-menu.js
@@ -11,10 +11,9 @@ export default Component.extend({
   type: 'cluster',
   itemTag: null,
   glyphName: computed('type', function() {
-    const glyphs = {
-      cluster: 'status-indicator',
-      user: 'user-square-outline',
-    };
-    return glyphs[this.type];
+    return {
+      cluster: 'circle-dot',
+      user: 'user',
+    }[this.type];
   }),
 });
diff --git a/ui/app/components/toolbar-secret-link.js b/ui/app/components/toolbar-secret-link.js
index 00395ccab..08318b86f 100644
--- a/ui/app/components/toolbar-secret-link.js
+++ b/ui/app/components/toolbar-secret-link.js
@@ -23,7 +23,7 @@ import { computed } from '@ember/object';
 export default OuterHTML.extend({
   glyph: computed('type', function() {
     if (this.type == 'add') {
-      return 'plus-plain';
+      return 'plus';
     } else {
       return 'chevron-right';
     }
diff --git a/ui/app/models/transit-key.js b/ui/app/models/transit-key.js
index ffb203c74..09c6f47de 100644
--- a/ui/app/models/transit-key.js
+++ b/ui/app/models/transit-key.js
@@ -8,12 +8,12 @@ const ACTION_VALUES = {
   encrypt: {
     isSupported: 'supportsEncryption',
     description: 'Looks up wrapping properties for the given token',
-    glyph: 'lock-closed',
+    glyph: 'lock-fill',
   },
   decrypt: {
     isSupported: 'supportsDecryption',
     description: 'Decrypts the provided ciphertext using this key',
-    glyph: 'envelope-unsealed--outline',
+    glyph: 'mail-open',
   },
   datakey: {
     isSupported: 'supportsEncryption',
@@ -23,20 +23,28 @@ const ACTION_VALUES = {
   rewrap: {
     isSupported: 'supportsEncryption',
     description: 'Rewraps the ciphertext using the latest version of the named key',
-    glyph: 'refresh-default',
+    glyph: 'reload',
   },
   sign: {
     isSupported: 'supportsSigning',
     description: 'Get the cryptographic signature of the given data',
-    glyph: 'edit',
+    glyph: 'pencil-tool',
+  },
+  hmac: {
+    isSupported: true,
+    description: 'Generate a data digest using a hash algorithm',
+    glyph: 'shuffle',
   },
-  hmac: { isSupported: true, description: 'Generate a data digest using a hash algorithm', glyph: 'remix' },
   verify: {
     isSupported: true,
     description: 'Validate the provided signature for the given data',
-    glyph: 'check-circle-outline',
+    glyph: 'check-circle',
+  },
+  export: {
+    isSupported: 'exportable',
+    description: 'Get the named key',
+    glyph: 'external-link',
   },
-  export: { isSupported: 'exportable', description: 'Get the named key', glyph: 'exit' },
 };
 
 export default Model.extend({
diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss
index 170af92de..1542dcaec 100644
--- a/ui/app/styles/components/console-ui-panel.scss
+++ b/ui/app/styles/components/console-ui-panel.scss
@@ -106,7 +106,7 @@
   margin-left: calc(#{$console-spacing} - 0.33rem);
   position: relative;
 
-  .hs-icon {
+  svg {
     position: absolute;
     left: 0;
     top: 0;
diff --git a/ui/app/styles/components/hs-icon.scss b/ui/app/styles/components/icon.scss
similarity index 84%
rename from ui/app/styles/components/hs-icon.scss
rename to ui/app/styles/components/icon.scss
index 80507831e..e60da0533 100644
--- a/ui/app/styles/components/hs-icon.scss
+++ b/ui/app/styles/components/icon.scss
@@ -43,3 +43,10 @@
   width: 32px;
   height: 32px;
 }
+
+.flight-icon {
+  &.flight-icon-display-inline {
+    vertical-align: middle;
+    margin: 0px 4px;
+  }
+}
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index bce462cd3..7e07524df 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -120,4 +120,4 @@
 @import './components/vlt-table';
 
 // bulma-free-zone
-@import './components/hs-icon';
+@import './components/icon';
diff --git a/ui/app/templates/components/alert-popup.hbs b/ui/app/templates/components/alert-popup.hbs
index c6d73c1fa..389c1eeaa 100644
--- a/ui/app/templates/components/alert-popup.hbs
+++ b/ui/app/templates/components/alert-popup.hbs
@@ -3,16 +3,12 @@
     <div class="column is-narrow message-icon">
       <Icon
         aria-hidden="true"
-        @size="l"
-        @glyph="{{type.glyph}}"
+        @name={{type.glyph}}
       />
     </div>
     <div class="column">
       <button type="button" class="close-button" {{action close}}>
-        <Icon
-          @glyph="cancel-plain"
-          @aria-label="Close"
-        />
+        <Icon @name="x" aria-label="Close" />
       </button>
       <div class="message-title">
         {{type.text}}
diff --git a/ui/app/templates/components/cluster-info.hbs b/ui/app/templates/components/cluster-info.hbs
index c404841d7..17e3ff1ca 100644
--- a/ui/app/templates/components/cluster-info.hbs
+++ b/ui/app/templates/components/cluster-info.hbs
@@ -27,7 +27,7 @@
                     <LinkTo @route="vault.cluster.replication" @invokeAction={{@onLinkClick}}>
                       <div class="level is-mobile">
                         <span class="level-left">Enable</span>
-                        <Icon @glyph="plus-circle-outline" @class="has-text-grey-light level-right" />
+                        <Icon @name="plus-circle" class="has-text-grey-light level-right" />
                       </div>
                     </LinkTo>
                   </li>
@@ -66,14 +66,14 @@
                 <LinkTo @route="vault.cluster.settings.seal" @model={{@cluster.name}} @invokeAction={{@onLinkClick}}>
                   <div class="level is-mobile">
                     <span class="level-left">Unsealed</span>
-                    <Icon @glyph="check-circle-outline" class="has-text-success level-right" />
+                    <Icon @name="check-circle" class="has-text-success level-right" />
                   </div>
                 </LinkTo>
               {{else}}
                 <span class="menu-item">
                   <div class="level is-mobile">
                     <span class="level-left">Unsealed</span>
-                    <Icon @glyph="check-circle-outline" class="has-text-success level-right" />
+                    <Icon @name="check-circle" class="has-text-success level-right" />
                   </div>
                 </span>
               {{/if}}
@@ -81,7 +81,7 @@
               <span class="menu-item">
                 <div class="level is-mobile">
                   <span class="level-left has-text-danger">Sealed</span>
-                  <Icon @glyph="cancel-circle-outline" class="has-text-danger level-right" />
+                  <Icon @name="x-circle" class="has-text-danger level-right" />
                 </div>
               </span>
             {{/if}}
diff --git a/ui/app/templates/components/console/command-input.hbs b/ui/app/templates/components/console/command-input.hbs
index ab4be479e..4d666b350 100644
--- a/ui/app/templates/components/console/command-input.hbs
+++ b/ui/app/templates/components/console/command-input.hbs
@@ -7,7 +7,10 @@
   <input onkeyup={{action 'handleKeyUp'}} value={{value}} autocomplete="off" spellcheck="false" />
   <ToolTip @horizontalPosition="auto-right" @verticalPosition={{if isFullscreen "above" "below"}} as |d|>
     <d.trigger @tagName="button" @type="button" @class={{concat "button is-compact" (if isFullscreen " active")}} @click={{action "fullscreen"}} @data-test-tool-tip-trigger={{true}}>
-    <Icon @size="l" @glyph={{if isFullscreen "expand-less" "expand-more"}} aria-label={{if isFullscreen "Minimize" "Maximize"}} />
+    <Icon
+      @name={{if isFullscreen "minimize" "maximize"}}
+      aria-label={{if isFullscreen "Minimize" "Maximize"}}
+    />
     </d.trigger>
     <d.content @class="tool-tip">
       <div class="box">
diff --git a/ui/app/templates/components/console/log-command.hbs b/ui/app/templates/components/console/log-command.hbs
index cc446877d..87700e2e2 100644
--- a/ui/app/templates/components/console/log-command.hbs
+++ b/ui/app/templates/components/console/log-command.hbs
@@ -1,2 +1,2 @@
 {{!-- using Icon here instead of Chevron because two nested tagless components results in a rendered line break between the tags breaking the layout in the <pre> --}}
-<pre class="console-ui-command"><Icon @glyph="chevron-right" aria-hidden="true" />{{content}}</pre>
+<pre class="console-ui-command"><Icon @name="chevron-right" />{{content}}</pre>
diff --git a/ui/app/templates/components/console/log-error-with-html.hbs b/ui/app/templates/components/console/log-error-with-html.hbs
index 45e0c4540..bff73bf39 100644
--- a/ui/app/templates/components/console/log-error-with-html.hbs
+++ b/ui/app/templates/components/console/log-error-with-html.hbs
@@ -1,5 +1,5 @@
 {{! template-lint-disable no-triple-curlies}}
 <div class="console-ui-alert has-text-danger">
-  <Icon @glyph="cancel-circle-fill" aria-hidden="true" />
+  <Icon @name="x-circle-fill" />
   <pre>{{{content}}}</pre>
 </div>
diff --git a/ui/app/templates/components/console/log-error.hbs b/ui/app/templates/components/console/log-error.hbs
index 11cd2647b..60a2dad42 100644
--- a/ui/app/templates/components/console/log-error.hbs
+++ b/ui/app/templates/components/console/log-error.hbs
@@ -1,4 +1,4 @@
 <div class="console-ui-alert has-text-danger">
-  <Icon @glyph="cancel-circle-fill" aria-hidden="true" />
+  <Icon @name="x-circle-fill" />
   <pre>{{content}}</pre>
 </div>
diff --git a/ui/app/templates/components/console/log-help.hbs b/ui/app/templates/components/console/log-help.hbs
index 6d9aa8419..09e6c3cb1 100644
--- a/ui/app/templates/components/console/log-help.hbs
+++ b/ui/app/templates/components/console/log-help.hbs
@@ -1,5 +1,5 @@
 <div class="console-ui-alert has-text-grey">
-<Icon @glyph="info-circle-fill" aria-hidden="true" />
+<Icon @name="info" />
 <pre>Usage: vault &lt;command&gt; [args]
 
 Commands:
diff --git a/ui/app/templates/components/console/log-success.hbs b/ui/app/templates/components/console/log-success.hbs
index d5bcaa7b0..5c0bb8a0b 100644
--- a/ui/app/templates/components/console/log-success.hbs
+++ b/ui/app/templates/components/console/log-success.hbs
@@ -1,4 +1,4 @@
 <div class="console-ui-alert has-text-success">
-  <Icon @glyph="check-circle-fill" aria-hidden="true" />
+  <Icon @name="check-circle-fill" />
   <pre>{{content}}</pre>
 </div>
diff --git a/ui/app/templates/components/console/ui-panel.hbs b/ui/app/templates/components/console/ui-panel.hbs
index 8af5abaa0..fae0f8f58 100644
--- a/ui/app/templates/components/console/ui-panel.hbs
+++ b/ui/app/templates/components/console/ui-panel.hbs
@@ -1,5 +1,5 @@
 <button type="button" class="button is-ghost console-close-button" {{action "closeConsole"}}>
-  <Icon @glyph="cancel-plain" aria-label="Close console" />
+  <Icon @name="x" aria-label="Close console" />
 </button>
 <div class="console-ui-panel-content">
   <div class="content">
diff --git a/ui/app/templates/components/control-group.hbs b/ui/app/templates/components/control-group.hbs
index fc5ff421e..04ea9b0f0 100644
--- a/ui/app/templates/components/control-group.hbs
+++ b/ui/app/templates/components/control-group.hbs
@@ -2,7 +2,7 @@
   <MessageError @model={{model}} />
   <div class="control-group-header {{if isSuccess 'is-success'}}">
     <p>
-      <Icon @glyph={{if isSuccess "check-circle-fill" "lock-closed"}} />
+      <Icon @name={{if isSuccess "check-circle-fill" "lock-fill"}} />
       <strong data-test-banner-prefix>{{bannerPrefix}}</strong>
       <span data-test-banner-text>{{bannerText}}</span>
     </p>
@@ -42,7 +42,7 @@
       <div class="authorizations" data-test-authorizations>
         {{#if (gt model.authorizations.length 0)}}
         <span class="has-text-success">
-          <Icon @glyph="check-circle-outline" />
+          <Icon @name="check-circle" />
         </span>
           Already approved by
           {{#each model.authorizations as |authorization index|}}
@@ -54,7 +54,7 @@
           {{/each}}
         {{else}}
           <span class="has-text-grey">
-            <Icon @glyph="check-circle-outline" />
+            <Icon @name="check-circle" />
           </span>
           Awaiting authorization.
         {{/if}}
diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index 97c671e3f..04974abed 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/ui/app/templates/components/database-connection.hbs
@@ -304,7 +304,7 @@
   <EmptyState
     @title="Database type unavailable"
     @subTitle="Not supported in the UI"
-    @icon="disabled"
+    @icon="skip"
     @message="This database type cannot be viewed in the UI. You will have to use the API or CLI to perform actions here."
     @bottomBorder={{true}}
   >
diff --git a/ui/app/templates/components/file-to-array-buffer.hbs b/ui/app/templates/components/file-to-array-buffer.hbs
index 46d742423..96a0eae4c 100644
--- a/ui/app/templates/components/file-to-array-buffer.hbs
+++ b/ui/app/templates/components/file-to-array-buffer.hbs
@@ -9,7 +9,7 @@
       <label class="file-label">
         <input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input>
         <span class="file-cta button">
-          <Icon @glyph="upload" class="has-light-grey-text" />
+          <Icon @name="upload" class="has-light-grey-text" />
           Choose a file…
         </span>
         <span class="file-name has-text-grey-dark" data-test-text-file-input-label=true>
@@ -17,7 +17,7 @@
         </span>
         {{#if this.fileName}}
           <button type="button" class="file-delete-button" {{action 'clearFile'}} data-test-text-clear>
-            <Icon @glyph="cancel-circle-outline" />
+            <Icon @name="x-circle" />
           </button>
         {{/if}}
       </label>
diff --git a/ui/app/templates/components/generate-credentials-database.hbs b/ui/app/templates/components/generate-credentials-database.hbs
index 1ce449d1c..6b004c821 100644
--- a/ui/app/templates/components/generate-credentials-database.hbs
+++ b/ui/app/templates/components/generate-credentials-database.hbs
@@ -24,7 +24,7 @@
     <EmptyState
       @title={{errorTitle}}
       @subTitle="Error {{@model.errorHttpStatus}}"
-      @icon="alert-circle-outline"
+      @icon="alert-circle"
       @bottomBorder={{true}}
       @message={{@model.errorMessage}}
     >
diff --git a/ui/app/templates/components/generated-item-list.hbs b/ui/app/templates/components/generated-item-list.hbs
index efce37864..35004958e 100644
--- a/ui/app/templates/components/generated-item-list.hbs
+++ b/ui/app/templates/components/generated-item-list.hbs
@@ -68,7 +68,7 @@
     <ListItem @linkParams={{array "vault.cluster.access.method.item.show"
       itemType list.item.id}} as |Item|>
       <Item.content>
-        <Icon @glyph="folder-outline" class="has-text-grey-light" @size="l" />{{list.item.id}}
+        <Icon @name="folder" class="has-text-grey-light" />{{list.item.id}}
       </Item.content>
       <Item.menu as |Menu|>
         <li class="action">
diff --git a/ui/app/templates/components/hover-copy-button.hbs b/ui/app/templates/components/hover-copy-button.hbs
index 9e6023ffb..cc0098e1e 100644
--- a/ui/app/templates/components/hover-copy-button.hbs
+++ b/ui/app/templates/components/hover-copy-button.hbs
@@ -6,7 +6,7 @@
       @clipboardText={{copyValue}}
       @success={{action (mut tooltipText) "Copied!"}}
     >
-      <Icon @glyph="copy-action" aria-label="Copy" />
+      <Icon @name="clipboard-copy" aria-label="Copy" />
     </CopyButton>
   </T.trigger>
   <T.content @class="tool-tip">
diff --git a/ui/app/templates/components/identity/item-aliases.hbs b/ui/app/templates/components/identity/item-aliases.hbs
index 30a6f2216..7e98c59db 100644
--- a/ui/app/templates/components/identity/item-aliases.hbs
+++ b/ui/app/templates/components/identity/item-aliases.hbs
@@ -7,10 +7,10 @@
   }}
     <div class="columns is-mobile">
       <div class="column is-10">
-        <LinkTo @route="vault.cluster.access.identity.aliases.show" @models={{array item.id "details"}} class="has-text-black has-text-weight-semibold"><Icon
-              @glyph="user-square-outline"
-              class="has-text-grey-light"
-            /><span class="has-text-weight-semibold">{{item.name}}</span></LinkTo>
+        <LinkTo @route="vault.cluster.access.identity.aliases.show" @models={{array item.id "details"}} class="has-text-black has-text-weight-semibold">
+          <Icon @name="user" class="has-text-grey-light" />
+          <span class="has-text-weight-semibold">{{item.name}}</span>
+        </LinkTo>
         <div class="has-text-grey">
           {{item.id}}
         </div>
diff --git a/ui/app/templates/components/identity/item-groups.hbs b/ui/app/templates/components/identity/item-groups.hbs
index 5db288a02..cb8248528 100644
--- a/ui/app/templates/components/identity/item-groups.hbs
+++ b/ui/app/templates/components/identity/item-groups.hbs
@@ -2,7 +2,7 @@
   {{#each @model.directGroupIds as |gid|}}
     <LinkTo @route="vault.cluster.access.identity.show" @models={{array "groups" gid "details"}} class="list-item-row">
       <Icon
-        @glyph="folder-outline"
+        @name="folder"
         class="has-text-grey-light"
       />{{gid}}
     </LinkTo>
@@ -14,7 +14,7 @@
     }}
       <LinkTo @route="vault.cluster.access.identity.show" @models={{array "groups" gid "details"}} class="has-text-black">
         <Icon
-          @glyph="folder-outline"
+          @name="folder"
           class="has-text-grey-light"
         />{{gid}}
       </LinkTo>
diff --git a/ui/app/templates/components/identity/item-members.hbs b/ui/app/templates/components/identity/item-members.hbs
index c5f6e3e3d..3cdb71cce 100644
--- a/ui/app/templates/components/identity/item-members.hbs
+++ b/ui/app/templates/components/identity/item-members.hbs
@@ -9,10 +9,9 @@
     }}
       <div class="columns is-mobile">
         <div class="column is-10">
-          <LinkTo @route="vault.cluster.access.identity.show" @models={{array "groups" gid "details"}} class="is-block has-text-black has-text-weight-semibold"><Icon
-              @glyph="folder-outline"
-              class="has-text-grey-light"
-            />{{gid}}</LinkTo>
+          <LinkTo @route="vault.cluster.access.identity.show" @models={{array "groups" gid "details"}} class="is-block has-text-black has-text-weight-semibold">
+            <Icon @name="folder" class="has-text-grey-light" />{{gid}}
+          </LinkTo>
         </div>
         <div class="column has-text-right">
           {{#if @model.canEdit}}
@@ -36,10 +35,7 @@
             @route="vault.cluster.access.identity.show"
             @models={{array "entities" gid "details"}}
             class="is-block has-text-black has-text-weight-semibold">
-              <Icon
-                @glyph="user-square-outline"
-                class="has-text-grey-light"
-              />{{gid}}
+              <Icon @name="user" class="has-text-grey-light" />{{gid}}
           </LinkTo>
         </div>
         <div class="column has-text-right">
diff --git a/ui/app/templates/components/identity/item-parent-groups.hbs b/ui/app/templates/components/identity/item-parent-groups.hbs
index fabc4879e..562dd1527 100644
--- a/ui/app/templates/components/identity/item-parent-groups.hbs
+++ b/ui/app/templates/components/identity/item-parent-groups.hbs
@@ -10,10 +10,7 @@
       <div class="columns is-mobile">
         <div class="column is-10">
           <LinkTo @route="vault.cluster.access.identity.show" @models={{array "groups" gid "details"}} class="is-block has-text-black has-text-weight-semibold">
-            <Icon
-              @glyph="folder-outline"
-              class="has-text-grey-light"
-            />{{gid}}
+            <Icon @name="folder" class="has-text-grey-light" />{{gid}}
           </LinkTo>
         </div>
         <div class="column has-text-right">
diff --git a/ui/app/templates/components/json-editor.hbs b/ui/app/templates/components/json-editor.hbs
index 78e72c042..58e8ad703 100644
--- a/ui/app/templates/components/json-editor.hbs
+++ b/ui/app/templates/components/json-editor.hbs
@@ -13,7 +13,7 @@
 					<div class="toolbar-separator"></div>
 					<CopyButton class="button is-transparent" @clipboardText={{@value}}
 						@buttonType="button" @success={{action (set-flash-message 'Data copied!')}}>
-						<Icon @glyph="copy-action" aria-label="Copy" />
+						<Icon @name="clipboard-copy" aria-label="Copy" />
 					</CopyButton>
 				</ToolbarActions>
 			</Toolbar>
@@ -33,4 +33,4 @@
 			<p class="sub-text">{{ @helpText }}</p>
 		</div>
 	{{/if}}
-</div>
+</div>
\ No newline at end of file
diff --git a/ui/app/templates/components/kv-object-editor.hbs b/ui/app/templates/components/kv-object-editor.hbs
index 7e323cf4e..6214f43ba 100644
--- a/ui/app/templates/components/kv-object-editor.hbs
+++ b/ui/app/templates/components/kv-object-editor.hbs
@@ -35,7 +35,6 @@
         @change={{action "updateRow" row index}}
         @value={{row.value}}
         @wrap="off"
-        class="input"
         placeholder="value"
         @rows={{1}}
         onkeyup={{action
@@ -57,7 +56,7 @@
           aria-label="Delete row"
           data-test-kv-delete-row
         >
-        <Icon @glyph="trash" @size="l" />
+        <Icon @name="trash" />
         </button>
       {{/if}}
     </div>
diff --git a/ui/app/templates/components/license-info.hbs b/ui/app/templates/components/license-info.hbs
index 16eb41a96..45f632ba8 100644
--- a/ui/app/templates/components/license-info.hbs
+++ b/ui/app/templates/components/license-info.hbs
@@ -16,7 +16,10 @@
           Autoloaded
         {{else}}
           Stored
-          <Icon @glyph="alert-triangle" class="has-text-highlight" /> <span class="is-size-8">Stored licenses will be deprecated in a future version of Vault. We recommend autoloading your license. Read more <a href="https://www.vaultproject.io/docs/enterprise/license" rel="noreferrer noopener" target="_blank" >here</a>.</span>
+          <Icon @name="alert-triangle-fill" class="has-text-highlight" />
+          <span class="is-size-8">
+            Stored licenses will be deprecated in a future version of Vault. We recommend autoloading your license. Read more <a href="https://www.vaultproject.io/docs/enterprise/license" rel="noreferrer noopener" target="_blank" >here</a>.
+          </span>
         {{/if}}
         </InfoTableRow>
     </div>
@@ -28,20 +31,13 @@
     {{#each this.featuresInfo as |info|}}
       <InfoTableRow @label={{info.name}} @value={{if info.active "Active" "Not Active"}} @data-test-feature-row="data-test-feature-row">
         {{#if info.active}}
-        <Icon
-          @glyph="check-circle-outline"
-          @size="l"
-          class="icon-true"
-          aria-hidden="true"
-        /><span data-test-feature-status>Active {{#if info.count}}&mdash;
-         {{info.count}} standby nodes allotted{{/if}}</span>
+          <Icon @name="check-circle" class="icon-true" />
+          <span data-test-feature-status>
+            Active {{#if info.count}}&mdash; {{info.count}} standby nodes allotted{{/if}}
+          </span>
         {{else}}
-          <Icon
-            @glyph="cancel-circle-outline"
-            @size="l"
-            class="icon-false"
-            aria-hidden="true"
-          /><span data-test-feature-status>Not Active</span>
+          <Icon @name="x-circle" class="icon-false" />
+          <span data-test-feature-status>Not Active</span>
         {{/if}}
       </InfoTableRow>
     {{/each}}
diff --git a/ui/app/templates/components/menu-sidebar.hbs b/ui/app/templates/components/menu-sidebar.hbs
index 9581c4590..c34e30293 100644
--- a/ui/app/templates/components/menu-sidebar.hbs
+++ b/ui/app/templates/components/menu-sidebar.hbs
@@ -10,11 +10,11 @@
   <div class="menu-toggle">
     {{#if isActive}}
       <button type="button" class="button is-ghost" {{action "closeMenu"}}>
-        <Icon @glyph="cancel-plain" aria-label="Close menu" />
+        <Icon @name="x" aria-label="Close menu" />
       </button>
     {{else}}
       <button type="button" class="button is-ghost has-text-grey-light" {{action "openMenu"}}>
-        <Icon @glyph="more-vertical" aria-label="Open menu" />
+        <Icon @name="more-vertical" aria-label="Open menu" />
       </button>
     {{/if}}
   </div>
diff --git a/ui/app/templates/components/mount-backend-form.hbs b/ui/app/templates/components/mount-backend-form.hbs
index bb1f01689..fc2e9e90d 100644
--- a/ui/app/templates/components/mount-backend-form.hbs
+++ b/ui/app/templates/components/mount-backend-form.hbs
@@ -4,8 +4,7 @@
       {{#if showEnable}}
         {{#with (find-by "type" mountModel.type mountTypes) as |typeInfo|}}
           <Icon
-            @glyph={{or typeInfo.glyph typeInfo.type}}
-            @size="l"
+            @name={{or typeInfo.glyph typeInfo.type}}
             class="has-text-grey-light"
            />
 
diff --git a/ui/app/templates/components/namespace-picker.hbs b/ui/app/templates/components/namespace-picker.hbs
index 87eb8461b..2aba42ae0 100644
--- a/ui/app/templates/components/namespace-picker.hbs
+++ b/ui/app/templates/components/namespace-picker.hbs
@@ -40,7 +40,7 @@
               <div class="level is-mobile namespace-link">
                 <span class="level-left" data-test-current-namespace>{{if namespacePath (concat namespacePath "/") "root"}}</span>
                 <span class="level-right">
-                  <Icon @glyph="check-circle-outline" class="has-text-success" />
+                  <Icon @name="check-circle" class="has-text-success" />
                 </span>
               </div>
             </header>
@@ -85,7 +85,7 @@
                     <span class="level-left">Manage namespaces</span>
                     <span class="level-right">
                       <button type="button" class="button is-ghost icon" onclick={{action "refreshNamespaceList"}}>
-                        <Icon @glyph="refresh-default" class="has-text-grey" />
+                        <Icon @name="reload" class="has-text-grey" />
                       </button>
                     </span>
                   </div>
diff --git a/ui/app/templates/components/nav-header.hbs b/ui/app/templates/components/nav-header.hbs
index 8a60fecdc..88f529971 100644
--- a/ui/app/templates/components/nav-header.hbs
+++ b/ui/app/templates/components/nav-header.hbs
@@ -4,8 +4,9 @@
   </div>
 
   {{#unless navDrawerOpen}}
-  <button type="button" class="navbar-drawer-toggle is-hidden-tablet" {{action "toggleNavDrawer"}}>
-      <Icon @glyph="more-vertical" /> Menu
+    <button type="button" class="navbar-drawer-toggle is-hidden-tablet" {{action "toggleNavDrawer"}}>
+      <Icon @name="more-vertical" />
+      Menu
     </button>
   {{/unless}}
 
@@ -30,7 +31,7 @@
 
       {{#if navDrawerOpen}}
         <button class=" navbar-drawer-toggle is-hidden-tablet" type="button" {{action "toggleNavDrawer" false}}>
-          <Icon @glyph="cancel-plain" />
+          <Icon @name="x" />
         </button>
       {{/if}}
     </div>
diff --git a/ui/app/templates/components/pgp-file.hbs b/ui/app/templates/components/pgp-file.hbs
index e8ee3c7f0..4d5811d38 100644
--- a/ui/app/templates/components/pgp-file.hbs
+++ b/ui/app/templates/components/pgp-file.hbs
@@ -48,7 +48,7 @@
           <input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-pgp-file-input=true>
           <span class="file-cta is-fullwidth">
             <span class="file-icon has-text-grey-dark">
-              <Icon @glyph="file-outline" />
+              <Icon @name="file" />
             </span>
             <span class="file-label has-text-grey-dark" data-test-pgp-file-input-label=true>
               {{#if key.fileName}}
@@ -59,10 +59,7 @@
             </span>
             {{#if key.fileName}}
               <button type="button" class="file-delete-button" {{action 'clearKey'}} data-test-pgp-clear=true>
-                <Icon
-                  @glyph="cancel-plain"
-                  @aria-label="Close"
-                />
+                <Icon @name="x" aria-label="Close" />
               </button>
             {{/if}}
           </span>
diff --git a/ui/app/templates/components/raft-storage-overview.hbs b/ui/app/templates/components/raft-storage-overview.hbs
index 4a75006b4..20a605278 100644
--- a/ui/app/templates/components/raft-storage-overview.hbs
+++ b/ui/app/templates/components/raft-storage-overview.hbs
@@ -69,17 +69,15 @@
 
       {{#if server.voter}}
         <Icon
+          @name="check-circle"
           aria-label="Yes"
           class="icon-true has-text-success"
-          @size="l"
-          @glyph="check-circle-outline"
         />
       {{else}}
         <Icon
+          @name="x-square"
           aria-label="No"
           class="icon-false"
-          @size="l"
-          @glyph="cancel-square-outline"
         />
       {{/if}}
             </td>
diff --git a/ui/app/templates/components/secret-create-or-update.hbs b/ui/app/templates/components/secret-create-or-update.hbs
index 965a40393..bfccd5fb7 100644
--- a/ui/app/templates/components/secret-create-or-update.hbs
+++ b/ui/app/templates/components/secret-create-or-update.hbs
@@ -88,8 +88,7 @@
                 aria-label="Delete row"
               >
                 <Icon
-                  @glyph="trash"
-                  @size="l"
+                  @name="trash"
                   class="has-text-grey-light"
                 />
               </button>
@@ -220,8 +219,7 @@
                   aria-label="Delete row"
                 >
                   <Icon
-                    @glyph="trash"
-                    @size="l"
+                    @name="trash"
                     class="has-text-grey-light"
                   />
                 </button>
diff --git a/ui/app/templates/components/secret-form-show.hbs b/ui/app/templates/components/secret-form-show.hbs
index 3f0c3eb76..0d992f988 100644
--- a/ui/app/templates/components/secret-form-show.hbs
+++ b/ui/app/templates/components/secret-form-show.hbs
@@ -67,14 +67,14 @@
           {{#if secret.value}}
             <MaskedInput @value={{secret.value}} @displayOnly={{true}} @allowCopy={{true}}/>
           {{else}}
-            <Icon @size="s" @glyph="minus-plain"/>
+            <Icon @name="minus" />
           {{/if}}
         </InfoTableRow>
       {{/each}}
     {{else}}
     {{!-- In the case of no key or value <InfoTableRow> will still render --}}
       <InfoTableRow @label="" @value="" @alwaysRender={{true}}>
-        <Icon @size="s" @glyph="minus-plain"/>
+        <Icon @name="minus" />
       </InfoTableRow>
     {{/if}}
   {{/if}}
diff --git a/ui/app/templates/components/secret-list-header.hbs b/ui/app/templates/components/secret-list-header.hbs
index 25aca00c0..6a8b12948 100644
--- a/ui/app/templates/components/secret-list-header.hbs
+++ b/ui/app/templates/components/secret-list-header.hbs
@@ -14,7 +14,7 @@
     </p.top>
     <p.levelLeft>
       <h1 class="title is-3">
-        <Icon @glyph={{or @model.engineType "secrets"}} @size="xl" class="has-text-grey-light" />
+        <Icon @name={{or @model.engineType "secrets"}} @size="24" class="has-text-grey-light" />
         {{@model.id}}
         {{#if this.isKV}}
           <span class="tag" data-test-kv-version-badge>
diff --git a/ui/app/templates/components/secret-list/aws-role-item.hbs b/ui/app/templates/components/secret-list/aws-role-item.hbs
index d013fd95d..c5d4361b6 100644
--- a/ui/app/templates/components/secret-list/aws-role-item.hbs
+++ b/ui/app/templates/components/secret-list/aws-role-item.hbs
@@ -13,7 +13,7 @@
     <div class="column is-10">
       <LinkTo @route={{concat "vault.cluster.secrets.backend." "credentials" (unless @item.id "-root") }} @model={{@item.id}} class="has-text-black has-text-weight-semibold">
         <Icon
-          @glyph="user-square-outline"
+          @name="user"
           class="has-text-grey-light is-pulled-left"
         />
         <div class="role-item-details">
diff --git a/ui/app/templates/components/secret-list/database-list-item.hbs b/ui/app/templates/components/secret-list/database-list-item.hbs
index 3f1c3da9d..9808f5702 100644
--- a/ui/app/templates/components/secret-list/database-list-item.hbs
+++ b/ui/app/templates/components/secret-list/database-list-item.hbs
@@ -15,7 +15,7 @@
         class="has-text-black has-text-weight-semibold"
       >
         <Icon
-          @glyph="user-square-outline"
+          @name="user"
           class="has-text-grey-light is-pulled-left"
         />
         <div class="role-item-details">
diff --git a/ui/app/templates/components/secret-list/item.hbs b/ui/app/templates/components/secret-list/item.hbs
index 36bf9baef..6e5661063 100644
--- a/ui/app/templates/components/secret-list/item.hbs
+++ b/ui/app/templates/components/secret-list/item.hbs
@@ -18,9 +18,9 @@
         @queryParams={{if (eq @backendModel.type "transit") (query-params tab="actions") ""}}
         @class="has-text-black has-text-weight-semibold">
           {{#if (eq @backendModel.type "transit")}}
-            <Icon @glyph="key" @class="has-text-grey-light"/>
+            <Icon @name="key" class="has-text-grey-light" />
           {{else}}
-            <Icon @glyph={{if @item.isFolder 'folder-outline' 'file-outline' }} @class="has-text-grey-light"/>
+            <Icon @name={{if @item.isFolder 'folder' 'file'}} class="has-text-grey-light" />
           {{/if}}
         {{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}
       </SecretLink>
diff --git a/ui/app/templates/components/secret-list/pki-cert-item.hbs b/ui/app/templates/components/secret-list/pki-cert-item.hbs
index bcea13c12..799a11680 100644
--- a/ui/app/templates/components/secret-list/pki-cert-item.hbs
+++ b/ui/app/templates/components/secret-list/pki-cert-item.hbs
@@ -14,7 +14,7 @@
     <div class="column is-10">
       <LinkTo @route={{concat "vault.cluster.secrets.backend." "show" (unless @item.id "-root") }} @model={{@item.idForNav}} class="has-text-black has-text-weight-semibold">
       <Icon
-        @glyph="file-outline"
+        @name="file"
         class="has-text-grey-light is-pulled-left"
       />
       <div class="role-item-details">
diff --git a/ui/app/templates/components/secret-list/pki-role-item.hbs b/ui/app/templates/components/secret-list/pki-role-item.hbs
index 985255c18..fef744578 100644
--- a/ui/app/templates/components/secret-list/pki-role-item.hbs
+++ b/ui/app/templates/components/secret-list/pki-role-item.hbs
@@ -16,7 +16,7 @@
     <div class="column is-10">
       <LinkTo @route={{concat "vault.cluster.secrets.backend." "credentials" (unless @item.id "-root") }} @model={{@item.id}} @query={{hash action="issue"}} class="has-text-black has-text-weight-semibold">
       <Icon
-        @glyph="user-square-outline"
+        @name="user"
         class="has-text-grey-light is-pulled-left"
       />
       <div class="role-item-details">
diff --git a/ui/app/templates/components/secret-list/ssh-role-item.hbs b/ui/app/templates/components/secret-list/ssh-role-item.hbs
index f64793f93..db34a7699 100644
--- a/ui/app/templates/components/secret-list/ssh-role-item.hbs
+++ b/ui/app/templates/components/secret-list/ssh-role-item.hbs
@@ -13,7 +13,7 @@
     <div class="column is-10">
       <LinkTo @route={{concat "vault.cluster.secrets.backend." (if (eq @item.keyType "ca") "sign" "credentials") (unless @item.id "-root") }} @model={{@item.id}} class="has-text-black has-text-weight-semibold">
         <Icon
-          @glyph="user-square-outline"
+          @name="user"
           class="has-text-grey-light is-pulled-left"
         />
         <div class="role-item-details">
diff --git a/ui/app/templates/components/secret-list/transform-list-item.hbs b/ui/app/templates/components/secret-list/transform-list-item.hbs
index bb0574ad2..5fc3d4c2c 100644
--- a/ui/app/templates/components/secret-list/transform-list-item.hbs
+++ b/ui/app/templates/components/secret-list/transform-list-item.hbs
@@ -13,10 +13,9 @@
         @mode="show"
         @secret={{@itemPath}}
         @queryParams={{query-params type=@modelType}}
-        @class="has-text-black has-text-weight-semibold">
-        <Icon
-          @glyph='file-outline'
-          @class="has-text-grey-light"/>
+        @class="has-text-black has-text-weight-semibold"
+      >
+        <Icon @name="file" class="has-text-grey-light" />
         {{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}
       </SecretLink>
     </div>
@@ -56,9 +55,7 @@
   <div class="list-item-row" data-test-view-only-list-item>
     <div class="columns is-mobile">
       <div class="column is-12 has-text-grey has-text-weight-semibold">
-        <Icon
-          @glyph='file-outline'
-          @class="has-text-grey-light"/>
+        <Icon @name="file" class="has-text-grey-light" />
         {{#if this.isBuiltin}}
           <ToolTip
             @verticalPosition="above"
diff --git a/ui/app/templates/components/secret-list/transform-transformation-item.hbs b/ui/app/templates/components/secret-list/transform-transformation-item.hbs
index 619c034ac..288164d07 100644
--- a/ui/app/templates/components/secret-list/transform-transformation-item.hbs
+++ b/ui/app/templates/components/secret-list/transform-transformation-item.hbs
@@ -14,10 +14,9 @@
         @mode="show"
         @secret={{@item.id}}
         @queryParams={{if (eq @backendModel.type "transform") (query-params tab="actions") ""}}
-        @class="has-text-black has-text-weight-semibold">
-        <Icon
-          @glyph='file-outline'
-          @class="has-text-grey-light"/>
+        @class="has-text-black has-text-weight-semibold"
+      >
+        <Icon @name="file" class="has-text-grey-light" />
         {{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}
       </SecretLink>
     </div>
@@ -65,9 +64,7 @@
   <div class="list-item-row">
     <div class="columns is-mobile">
       <div class="column is-12 has-text-grey has-text-weight-semibold">
-        <Icon
-          @glyph='file-outline'
-          @class="has-text-grey-light"/>
+        <Icon @name="file" class="has-text-grey-light" />
         {{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}
       </div>
     </div>
diff --git a/ui/app/templates/components/secret-version-menu.hbs b/ui/app/templates/components/secret-version-menu.hbs
index 2867800e8..5c560ce79 100644
--- a/ui/app/templates/components/secret-version-menu.hbs
+++ b/ui/app/templates/components/secret-version-menu.hbs
@@ -23,11 +23,11 @@
                 <LinkTo class="link" @params={{array (query-params version=secretVersion.version)}} @invokeAction={{action D.actions.close}} >
                   Version {{secretVersion.version}}
                   {{#if (and (eq secretVersion.version @model.currentVersion) (not secretVersion.destroyed) (not secretVersion.deleted))}}
-                    <Icon @glyph="check-circle-outline" class="has-text-success is-pulled-right" />
+                    <Icon @name="check-circle" class="has-text-success is-pulled-right" />
                   {{else if secretVersion.destroyed}}
-                      <Icon @glyph="cancel-square-fill" class="has-text-danger is-pulled-right" />
+                    <Icon @name="x-square-fill" class="has-text-danger is-pulled-right" />
                   {{else if secretVersion.deleted}}
-                      <Icon @glyph="cancel-square-fill" class="has-text-grey is-pulled-right" />
+                    <Icon @name="x-square-fill" class="has-text-grey is-pulled-right" />
                   {{/if}}
                 </LinkTo>
               </li>
diff --git a/ui/app/templates/components/selectable-card.hbs b/ui/app/templates/components/selectable-card.hbs
index 8062781d8..9080e691c 100644
--- a/ui/app/templates/components/selectable-card.hbs
+++ b/ui/app/templates/components/selectable-card.hbs
@@ -26,7 +26,9 @@
           data-test-action-text={{actionText}}
         >
           {{actionText}}
-          {{#if actionText}}<Icon @glyph="chevron-right" />{{/if}}
+          {{#if actionText}}
+            <Icon @name="chevron-right" />
+          {{/if}}
         </LinkTo>
       </div>
         <p class="has-text-grey is-size-8">{{subText}}</p>
diff --git a/ui/app/templates/components/status-menu.hbs b/ui/app/templates/components/status-menu.hbs
index 85b9a52f1..b2d3a1408 100644
--- a/ui/app/templates/components/status-menu.hbs
+++ b/ui/app/templates/components/status-menu.hbs
@@ -1,6 +1,6 @@
 <BasicDropdown @horizontalPosition="auto-left" @verticalPosition="below" @renderInPlace={{media.isMobile}} as |d|>
   <d.trigger @tagName={{if (eq type "replication") "span" "button"}} @class={{if (eq type "replication") "" "button is-transparent"}}>
-    <Icon @glyph={{glyphName}} @size="l" aria-label={{ariaLabel}} />
+    <Icon @name={{glyphName}} aria-label={{ariaLabel}} />
     <div class="status-menu-label">
       {{label}}
     </div>
diff --git a/ui/app/templates/components/text-file.hbs b/ui/app/templates/components/text-file.hbs
index fab1724a0..94dce03cb 100644
--- a/ui/app/templates/components/text-file.hbs
+++ b/ui/app/templates/components/text-file.hbs
@@ -47,7 +47,7 @@
         type="button"
         class="{{if (eq value "") "has-text-grey"}} masked-input-toggle button {{if displayOnly "is-compact"}}"
         data-test-button>
-        <Icon @glyph={{if showValue "visibility-show" "visibility-hide"}} aria-hidden="true" />
+        <Icon @name={{if showValue "eye" "eye-off"}} />
       </button>
     </div>
     <p class="help has-text-grey">
@@ -59,7 +59,7 @@
         <label class="file-label">
           <input class="file-input" type="file" {{on 'change' this.pickedFile}} data-test-text-file-input=true>
           <span class="file-cta button">
-            <Icon @glyph="upload" class="has-light-grey-text" />
+            <Icon @name="upload" class="has-light-grey-text" />
             Choose a file…
           </span>
           <span class="file-name has-text-grey-dark" data-test-text-file-input-label=true>
@@ -71,7 +71,7 @@
           </span>
           {{#if @file.fileName}}
             <button type="button" class="file-delete-button" {{on 'click' this.clearFile}} data-test-text-clear=true>
-              <Icon @glyph="cancel-circle-outline" />
+              <Icon @name="x-circle" />
             </button>
           {{/if}}
         </label>
diff --git a/ui/app/templates/components/tool-unwrap.hbs b/ui/app/templates/components/tool-unwrap.hbs
index fc5f2ae22..dc61f27b2 100644
--- a/ui/app/templates/components/tool-unwrap.hbs
+++ b/ui/app/templates/components/tool-unwrap.hbs
@@ -31,10 +31,11 @@
         {{#each-in @details as |key detail|}}
           <InfoTableRow @label={{key}} @value={{key}}>
             {{#if (or (eq detail "No") (eq detail "None"))}}
-              <Icon class="has-text-grey" @glyph="cancel-square-outline" /> {{detail}}
+              <Icon @name="x-circle" class="has-text-grey" />
+              {{detail}}
             {{else}}
               {{#if (eq detail "Yes") }}
-                <Icon class="has-text-success" @glyph="check-circle-outline" />
+                <Icon @name="check-circle" class="has-text-success" />
               {{/if}}
               {{detail}}
             {{/if}}
diff --git a/ui/app/templates/components/toolbar-secret-link.hbs b/ui/app/templates/components/toolbar-secret-link.hbs
index f406edc0f..ce4100950 100644
--- a/ui/app/templates/components/toolbar-secret-link.hbs
+++ b/ui/app/templates/components/toolbar-secret-link.hbs
@@ -14,5 +14,5 @@
   @data-test-transit-key-actions-link={{data-test-transit-key-actions-link}}
 >
   {{yield}}
-  <Icon @glyph={{glyph}} />
+  <Icon @name={{glyph}} />
 </SecretLink>
diff --git a/ui/app/templates/components/transform-show-transformation.hbs b/ui/app/templates/components/transform-show-transformation.hbs
index 5d989c52b..18f6d8df4 100644
--- a/ui/app/templates/components/transform-show-transformation.hbs
+++ b/ui/app/templates/components/transform-show-transformation.hbs
@@ -24,7 +24,7 @@
         <code>vault write {{model.backend}}/encode/{{cliCommand}}</code>
         <CopyButton class="button is-transparent level-right" @clipboardText={{copyEncodeCommand}}
           @buttonType="button" @success={{action (set-flash-message 'Command copied!')}}>
-          <Icon @size='l' @glyph="copy-action" aria-label="Copy" />
+          <Icon @name="clipboard-copy" aria-label="Copy" />
         </CopyButton>
       {{/let}}
     </div>
@@ -41,7 +41,7 @@
         <code>vault write {{model.backend}}/decode/{{cliCommand}}</code>
         <CopyButton class="button is-transparent level-right" @clipboardText={{copyDecodeCommand}}
           @buttonType="button" @success={{action (set-flash-message 'Command copied!')}}>
-          <Icon @size='l' @glyph="copy-action" aria-label="Copy" />
+          <Icon @name="clipboard-copy" aria-label="Copy" />
         </CopyButton>
       {{/let}}
     </div>
diff --git a/ui/app/templates/components/transit-form-show.hbs b/ui/app/templates/components/transit-form-show.hbs
index 56c7f3e3c..89f53c49a 100644
--- a/ui/app/templates/components/transit-form-show.hbs
+++ b/ui/app/templates/components/transit-form-show.hbs
@@ -59,10 +59,10 @@
       }}
         <div class="transit-icon">
           <Icon
-            @glyph={{supportedAction.glyph}}
-            @size="l"
+            @name={{supportedAction.glyph}}
             class="has-text-grey auto-width"
-            aria-label={{concat @backend.path " options"}} />
+            aria-label={{concat @backend.path " options"}}
+          />
         </div>
         <div class="transit-description">
           <h2 class="title is-6" data-test-transit-action-title={{supportedAction.name}}>
@@ -91,7 +91,10 @@
         <div class="columns is-mobile">
           <div class="column is-3">
             <div class="level level-left">
-              <Icon @glyph="history" class="has-text-grey-light is-padded" @size="l" />
+              <Icon
+                @name="history"
+                class="has-text-grey-light is-padded"
+              />
               <strong class="has-padding is-size-5">Version {{version}}</strong>
             </div>
           </div>
@@ -106,7 +109,7 @@
             <div class="td is-borderless">
               {{#if (coerce-eq @key.minDecryptionVersion version)}}
                 <p class="help level level-left">
-                  <Icon @glyph="check-circle-fill" class="has-text-success" />
+                  <Icon @name="check-circle-fill" class="has-text-success" />
                   Current minimum decryption version
                 </p>
               {{/if}}
@@ -121,7 +124,10 @@
         <div class="columns is-mobile">
           <div class="column is-3">
             <div class="level level-left">
-              <Icon @glyph="history" class="has-text-grey-light is-padded" @size="l" />
+              <Icon
+                @name="history"
+                class="has-text-grey-light is-padded"
+              />
               <strong class="has-padding is-size-5">Version {{version}}</strong>
             </div>
           </div>
@@ -136,7 +142,7 @@
             <div class="td is-borderless">
               {{#if (coerce-eq @key.minDecryptionVersion version)}}
                 <p class="help level level-left">
-                  <Icon @glyph="check-circle-fill" class="has-text-success" />
+                  <Icon @name="check-circle-fill" class="has-text-success" />
                   Current minimum decryption version
                 </p>
               {{/if}}
diff --git a/ui/app/templates/components/transit-key-action/datakey.hbs b/ui/app/templates/components/transit-key-action/datakey.hbs
index fcd96e6fc..9312b7b29 100644
--- a/ui/app/templates/components/transit-key-action/datakey.hbs
+++ b/ui/app/templates/components/transit-key-action/datakey.hbs
@@ -86,7 +86,7 @@
           <code class="level-left">{{@plaintext}}</code>
           <CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy"
             @clipboardText={{@plaintext}} @buttonType="button" @success={{action (set-flash-message 'Plaintext copied!')}}>
-            <Icon @glyph="copy-action" aria-label="Copy" />
+            <Icon @name="clipboard-copy" aria-label="Copy" />
           </CopyButton>
         </div>
         <p class="help has-bottom-margin-m">Plaintext is base64 encoded</p>
@@ -95,7 +95,7 @@
           <code class="level-left">{{@ciphertext}}</code>
           <CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy"
             @clipboardText={{@ciphertext}} @buttonType="button" @success={{action (set-flash-message 'Ciphertext copied!')}}>
-            <Icon @glyph="copy-action" aria-label="Copy" />
+            <Icon @name="clipboard-copy" aria-label="Copy" />
           </CopyButton>
         </div>
         <CopyButton class="button is-primary" data-test-button="modal-copy-close" @clipboardText={{@plaintext}}
@@ -113,7 +113,7 @@
           <code class="level-left">{{@ciphertext}}</code>
           <CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy"
             @clipboardText={{@ciphertext}} @buttonType="button" @success={{action (set-flash-message 'Ciphertext copied!')}}>
-            <Icon @glyph="copy-action" aria-label="Copy" />
+            <Icon @name="clipboard-copy" aria-label="Copy" />
           </CopyButton>
         </div>
         <CopyButton class="button is-primary copy-close" data-test-button="modal-copy-close" @clipboardText={{@ciphertext}}
diff --git a/ui/app/templates/components/transit-key-action/decrypt.hbs b/ui/app/templates/components/transit-key-action/decrypt.hbs
index 804a863e3..4ccc84e7c 100644
--- a/ui/app/templates/components/transit-key-action/decrypt.hbs
+++ b/ui/app/templates/components/transit-key-action/decrypt.hbs
@@ -60,7 +60,7 @@
         <code class="level-left" data-test-encrypted-value="plaintext">{{@plaintext}}</code>
         <CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy" @clipboardText={{@plaintext}}
           @buttonType="button" @success={{action (set-flash-message 'Plaintext copied!')}}>
-          <Icon @glyph="copy-action" aria-label="Copy" />
+          <Icon @name="clipboard-copy" aria-label="Copy" />
         </CopyButton>
       </div>
       <p class="help">Plaintext is base64 encoded</p>
diff --git a/ui/app/templates/components/transit-key-action/encrypt.hbs b/ui/app/templates/components/transit-key-action/encrypt.hbs
index 1293fe9cc..5dfab7bbd 100644
--- a/ui/app/templates/components/transit-key-action/encrypt.hbs
+++ b/ui/app/templates/components/transit-key-action/encrypt.hbs
@@ -75,7 +75,7 @@
           @clipboardText={{@ciphertext}}
           @buttonType="button"
           @success={{action (set-flash-message 'Ciphertext copied!')}}>
-          <Icon @glyph="copy-action" aria-label="Copy" />
+          <Icon @name="clipboard-copy" aria-label="Copy" />
         </CopyButton>
       </div>
     </div>
diff --git a/ui/app/templates/components/transit-key-action/export.hbs b/ui/app/templates/components/transit-key-action/export.hbs
index 9c137aedd..c9dcd1b79 100644
--- a/ui/app/templates/components/transit-key-action/export.hbs
+++ b/ui/app/templates/components/transit-key-action/export.hbs
@@ -73,7 +73,7 @@
         <pre data-test-encrypted-value="export" class="level-left">{{if this.wrapTTL @wrappedToken (stringify @keys)}}</pre>
         <CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy"
           @clipboardText={{if this.wrapTTL @wrappedToken (stringify @keys)}} @buttonType="button" @success={{action (set-flash-message 'Token copied!')}}>
-          <Icon @glyph="copy-action" aria-label="Copy" />
+          <Icon @name="clipboard-copy" aria-label="Copy" />
         </CopyButton>
       </div>
     </div>
diff --git a/ui/app/templates/components/transit-key-action/hmac.hbs b/ui/app/templates/components/transit-key-action/hmac.hbs
index edc606024..25ed773a2 100644
--- a/ui/app/templates/components/transit-key-action/hmac.hbs
+++ b/ui/app/templates/components/transit-key-action/hmac.hbs
@@ -55,7 +55,7 @@
         <code class="level-left" data-test-encrypted-value="hmac">{{@hmac}}</code>
         <CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy"
           @clipboardText={{@hmac}} @buttonType="button" @success={{action (set-flash-message 'HMAC copied!')}}>
-          <Icon @glyph="copy-action" aria-label="Copy" />
+          <Icon @name="clipboard-copy" aria-label="Copy" />
         </CopyButton>
       </div>
     </div>
diff --git a/ui/app/templates/components/transit-key-action/rewrap.hbs b/ui/app/templates/components/transit-key-action/rewrap.hbs
index 26b0f39d4..f0abf4a0b 100644
--- a/ui/app/templates/components/transit-key-action/rewrap.hbs
+++ b/ui/app/templates/components/transit-key-action/rewrap.hbs
@@ -66,7 +66,7 @@
         <code class="level-left" data-test-encrypted-value="ciphertext">{{@ciphertext}}</code>
         <CopyButton class="button is-compact is-transparent level-right" data-test-button="modal-copy"
           @clipboardText={{@ciphertext}} @buttonType="button" @success={{action (set-flash-message 'Ciphertext copied!')}}>
-          <Icon @glyph="copy-action" aria-label="Copy" />
+          <Icon @name="clipboard-copy" aria-label="Copy" />
         </CopyButton>
       </div>
     </div>
diff --git a/ui/app/templates/components/transit-key-action/sign.hbs b/ui/app/templates/components/transit-key-action/sign.hbs
index 7917be963..aa9da07d8 100644
--- a/ui/app/templates/components/transit-key-action/sign.hbs
+++ b/ui/app/templates/components/transit-key-action/sign.hbs
@@ -110,7 +110,7 @@
           @clipboardText={{@signature}}
           @buttonType="button"
           @success={{action (set-flash-message 'Signature copied!')}}>
-          <Icon @glyph="copy-action" aria-label="Copy" />
+          <Icon @name="clipboard-copy" aria-label="Copy" />
         </CopyButton>
       </div>
     </div>
diff --git a/ui/app/templates/components/wizard-content.hbs b/ui/app/templates/components/wizard-content.hbs
index 1637c1ac0..62cb90706 100644
--- a/ui/app/templates/components/wizard-content.hbs
+++ b/ui/app/templates/components/wizard-content.hbs
@@ -13,7 +13,7 @@
     </PopupMenu>
   {{/unless}}
   <h1 class="title is-5">
-    <Icon @glyph={{glyph}} @size="l"/> {{headerText}}
+    <Icon @name={{glyph}} /> {{headerText}}
   </h1>
   {{#if showProgress}}
     <ToolTip @verticalPosition="below" as |T|>
diff --git a/ui/app/templates/components/wizard-progress.hbs b/ui/app/templates/components/wizard-progress.hbs
index e4de36e03..e0879fcce 100644
--- a/ui/app/templates/components/wizard-progress.hbs
+++ b/ui/app/templates/components/wizard-progress.hbs
@@ -6,7 +6,10 @@
         <span class="feature-progress" style={{bar.style}} {{! template-lint-disable }}></span>
       </span>
       {{#if bar.showIcon}}
-        <Icon class="feature-check {{if bar.completed 'completed-check' 'incomplete-check'}}" @glyph="check-circle-fill" />
+        <Icon
+          @name="check-circle-fill"
+          class="feature-check {{if bar.completed 'completed-check' 'incomplete-check'}}"
+        />
       {{/if}}
     </div>
   {{/each}}
diff --git a/ui/app/templates/components/wizard-section.hbs b/ui/app/templates/components/wizard-section.hbs
index 987143242..20f2166f4 100644
--- a/ui/app/templates/components/wizard-section.hbs
+++ b/ui/app/templates/components/wizard-section.hbs
@@ -1,7 +1,7 @@
 <div class="wizard-section {{class}}">
   <h2 class="title is-6">
     {{#if headerIcon}}
-      <Icon @glyph={{headerIcon}} @size="l" aria-hidden="true" />
+      <Icon @name={{headerIcon}} aria-hidden="true" />
     {{/if}}
     {{headerText}}
   </h2>
@@ -14,7 +14,7 @@
   {{/if}}
   {{#if docText}}
     <DocLink @path={{docPath}}>
-      <Icon @glyph="learn" aria-hidden="true" /> {{docText}}
+      <Icon @name="learn-link" /> {{docText}}
     </DocLink>
   {{/if}}
 </div>
diff --git a/ui/app/templates/components/wizard/ad-engine.hbs b/ui/app/templates/components/wizard/ad-engine.hbs
index 027e078c7..492b51a4e 100644
--- a/ui/app/templates/components/wizard/ad-engine.hbs
+++ b/ui/app/templates/components/wizard/ad-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Active Directory"
-  @headerIcon="azure"
+  @headerIcon="azure-color"
   @docText="Docs: Active Directory Secrets"
   @docPath="/docs/secrets/ad/index.html"
 >
diff --git a/ui/app/templates/components/wizard/alicloud-engine.hbs b/ui/app/templates/components/wizard/alicloud-engine.hbs
index 41e25e764..bf23863f1 100644
--- a/ui/app/templates/components/wizard/alicloud-engine.hbs
+++ b/ui/app/templates/components/wizard/alicloud-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="AliCloud"
-  @headerIcon="alicloud"
+  @headerIcon="alibaba"
   @docText="Docs: Google Cloud Secrets"
   @docPath="/docs/secrets/alicloud/index.html"
 >
diff --git a/ui/app/templates/components/wizard/alicloud-method.hbs b/ui/app/templates/components/wizard/alicloud-method.hbs
index 0f4c92c23..383f059ca 100644
--- a/ui/app/templates/components/wizard/alicloud-method.hbs
+++ b/ui/app/templates/components/wizard/alicloud-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="AliCloud"
-  @headerIcon="alicloud"
+  @headerIcon="alibaba"
   @docText="Docs: AliCloud Authentication"
   @docPath="/docs/auth/alicloud.html"
 >
diff --git a/ui/app/templates/components/wizard/approle-method.hbs b/ui/app/templates/components/wizard/approle-method.hbs
index c47898c68..a058962dc 100644
--- a/ui/app/templates/components/wizard/approle-method.hbs
+++ b/ui/app/templates/components/wizard/approle-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="AppRole"
-  @headerIcon="approle"
+  @headerIcon="cpu"
   @docText="Docs: AppRole Authentication"
   @docPath="/docs/auth/approle.html"
 >
diff --git a/ui/app/templates/components/wizard/auth-details.hbs b/ui/app/templates/components/wizard/auth-details.hbs
index d0514a48e..061fc631e 100644
--- a/ui/app/templates/components/wizard/auth-details.hbs
+++ b/ui/app/templates/components/wizard/auth-details.hbs
@@ -12,7 +12,7 @@
   @class="wizard-details"
 >
   <button type="button" class="button next-feature-step" {{action @onReset}}>
-    Enable another Auth Method <Icon @glyph="loop" class="hs-icon-button-right" />
+    Enable another Auth Method <Icon @name="sync" class="hs-icon-button-right" />
   </button>
   <button type="button"  class="button next-feature-step" {{action @onAdvance}}>
     {{@nextFeature}} <Chevron @isButton={{true}} />
diff --git a/ui/app/templates/components/wizard/aws-engine.hbs b/ui/app/templates/components/wizard/aws-engine.hbs
index 61306c7dc..8524fbc5b 100644
--- a/ui/app/templates/components/wizard/aws-engine.hbs
+++ b/ui/app/templates/components/wizard/aws-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="AWS"
-  @headerIcon="aws"
+  @headerIcon="aws-color"
   @docText="Docs: AWS Secrets"
   @docPath="/docs/secrets/aws/index.html"
 >
diff --git a/ui/app/templates/components/wizard/aws-method.hbs b/ui/app/templates/components/wizard/aws-method.hbs
index 2877a37e4..70ca72a3b 100644
--- a/ui/app/templates/components/wizard/aws-method.hbs
+++ b/ui/app/templates/components/wizard/aws-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="AWS"
-  @headerIcon="aws"
+  @headerIcon="aws-color"
   @docText="Docs: AWS Authentication"
   @docPath="/docs/auth/aws.html"
 >
diff --git a/ui/app/templates/components/wizard/azure-engine.hbs b/ui/app/templates/components/wizard/azure-engine.hbs
index e4029fa89..18d2d945a 100644
--- a/ui/app/templates/components/wizard/azure-engine.hbs
+++ b/ui/app/templates/components/wizard/azure-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Azure"
-  @headerIcon="azure"
+  @headerIcon="azure-color"
   @docText="Docs: Azure Secrets"
   @docPath="/docs/secrets/azure/index.html"
 >
diff --git a/ui/app/templates/components/wizard/azure-method.hbs b/ui/app/templates/components/wizard/azure-method.hbs
index 6d652b242..e72e0b53b 100644
--- a/ui/app/templates/components/wizard/azure-method.hbs
+++ b/ui/app/templates/components/wizard/azure-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Azure"
-  @headerIcon="azure"
+  @headerIcon="azure-color"
   @docText="Docs: Azure Authentication"
   @docPath="/docs/auth/azure.html"
 >
diff --git a/ui/app/templates/components/wizard/cert-method.hbs b/ui/app/templates/components/wizard/cert-method.hbs
index ea797aa45..80b1f028e 100644
--- a/ui/app/templates/components/wizard/cert-method.hbs
+++ b/ui/app/templates/components/wizard/cert-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="TLS Certificates"
-  @headerIcon="cert"
+  @headerIcon="certificate"
   @docText="Docs: TLS Certificates Authentication"
   @docPath="/docs/auth/cert.html"
 >
diff --git a/ui/app/templates/components/wizard/features-selection.hbs b/ui/app/templates/components/wizard/features-selection.hbs
index 331728151..f8cc4ded1 100644
--- a/ui/app/templates/components/wizard/features-selection.hbs
+++ b/ui/app/templates/components/wizard/features-selection.hbs
@@ -4,7 +4,7 @@
   </h2>
   <p>You did it! You now have access to your Vault and can start entering your data. We can help you get started with any of the options below.</p>
   <div class="access-information">
-    <Icon @glyph="info-circle-fill" class="has-text-info"/>
+    <Icon @name="info" class="has-text-info"/>
     <p>Vault only shows links to pages that you have access to based on your policies. Contact your administrator if you need access changes.</p>
   </div>
   {{#if (or (has-feature "Performance Replication") (has-feature "DR Replication")) }}
@@ -58,7 +58,9 @@
         Start
       </button>
       {{#if selectedFeatures}}
-        <span class="time-estimate"><Icon @glyph="stopwatch" class="has-text-grey" aria-hidden="true" />About {{estimatedTime}} minutes</span>
+        <span class="time-estimate">
+          <Icon @name="clock" class="has-text-grey" />About {{estimatedTime}} minutes
+        </span>
       {{/if}}
     </span>
   </form>
diff --git a/ui/app/templates/components/wizard/gcp-engine.hbs b/ui/app/templates/components/wizard/gcp-engine.hbs
index e61ced1f4..89cf14d8d 100644
--- a/ui/app/templates/components/wizard/gcp-engine.hbs
+++ b/ui/app/templates/components/wizard/gcp-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Google Cloud"
-  @headerIcon="gcp"
+  @headerIcon="gcp-color"
   @docText="Docs: Google Cloud Secrets"
   @docPath="/docs/secrets/gcp/index.html"
 >
diff --git a/ui/app/templates/components/wizard/gcp-method.hbs b/ui/app/templates/components/wizard/gcp-method.hbs
index 36869babc..625b7c957 100644
--- a/ui/app/templates/components/wizard/gcp-method.hbs
+++ b/ui/app/templates/components/wizard/gcp-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Google Cloud"
-  @headerIcon="gcp"
+  @headerIcon="gcp-color"
   @docText="Docs: Google Cloud Authentication"
   @docPath="/docs/auth/gcp.html"
 >
diff --git a/ui/app/templates/components/wizard/gcpkms-engine.hbs b/ui/app/templates/components/wizard/gcpkms-engine.hbs
index 18fc84819..6004b65e7 100644
--- a/ui/app/templates/components/wizard/gcpkms-engine.hbs
+++ b/ui/app/templates/components/wizard/gcpkms-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Google Cloud KMS"
-  @headerIcon="gcpkms"
+  @headerIcon="gcp-color"
   @docText="Docs: Google Cloud Secrets"
   @docPath="/docs/secrets/gcpkms/index.html"
 >
diff --git a/ui/app/templates/components/wizard/kmip-engine.hbs b/ui/app/templates/components/wizard/kmip-engine.hbs
index aed2bc6a7..3c743c6f4 100644
--- a/ui/app/templates/components/wizard/kmip-engine.hbs
+++ b/ui/app/templates/components/wizard/kmip-engine.hbs
@@ -1,4 +1,4 @@
-<WizardSection @headerText="KMIP" @headerIcon="kmip" @docText="Docs: KMIP Secrets Engine"
+<WizardSection @headerText="KMIP" @headerIcon="unlock" @docText="Docs: KMIP Secrets Engine"
   @docPath="/docs/secrets/kmip/index.html">
   <p>
     The KMIP secrets engine allows Vault to act as a KMIP server provider and handle the lifecycle of KMIP managed
diff --git a/ui/app/templates/components/wizard/kubernetes-method.hbs b/ui/app/templates/components/wizard/kubernetes-method.hbs
index fe39cec59..2fa1cc349 100644
--- a/ui/app/templates/components/wizard/kubernetes-method.hbs
+++ b/ui/app/templates/components/wizard/kubernetes-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Kubernetes"
-  @headerIcon="kubernetes"
+  @headerIcon="kubernetes-color"
   @docText="Docs: Kubernetes Authentication"
   @docPath="/docs/auth/kubernetes.html"
 >
diff --git a/ui/app/templates/components/wizard/kv-engine.hbs b/ui/app/templates/components/wizard/kv-engine.hbs
index c03a8d17c..ed73c82b8 100644
--- a/ui/app/templates/components/wizard/kv-engine.hbs
+++ b/ui/app/templates/components/wizard/kv-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Key/Value"
-  @headerIcon="kv"
+  @headerIcon="list"
   @docText="Docs: Key/Value Secrets"
   @docPath="/docs/secrets/kv/index.html"
 >
diff --git a/ui/app/templates/components/wizard/ldap-method.hbs b/ui/app/templates/components/wizard/ldap-method.hbs
index 1855694d5..356720b04 100644
--- a/ui/app/templates/components/wizard/ldap-method.hbs
+++ b/ui/app/templates/components/wizard/ldap-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="LDAP"
-  @headerIcon="ldap"
+  @headerIcon="user"
   @docText="Docs: LDAP Authentication"
   @docPath="/docs/auth/ldap.html"
 >
diff --git a/ui/app/templates/components/wizard/okta-method.hbs b/ui/app/templates/components/wizard/okta-method.hbs
index 1440bebe5..b61ec473a 100644
--- a/ui/app/templates/components/wizard/okta-method.hbs
+++ b/ui/app/templates/components/wizard/okta-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Okta"
-  @headerIcon="okta"
+  @headerIcon="okta-color"
   @docText="Docs: Okta Authentication"
   @docPath="/docs/auth/okta.html"
 >
diff --git a/ui/app/templates/components/wizard/pki-engine.hbs b/ui/app/templates/components/wizard/pki-engine.hbs
index 73a9d2129..f847aa46e 100644
--- a/ui/app/templates/components/wizard/pki-engine.hbs
+++ b/ui/app/templates/components/wizard/pki-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="PKI"
-  @headerIcon="pki"
+  @headerIcon="file-text"
   @docText="Docs: PKI Secrets"
   @docPath="/docs/secrets/pki/index.html"
 >
diff --git a/ui/app/templates/components/wizard/radius-method.hbs b/ui/app/templates/components/wizard/radius-method.hbs
index 6df40fab1..cb0d5b9ff 100644
--- a/ui/app/templates/components/wizard/radius-method.hbs
+++ b/ui/app/templates/components/wizard/radius-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="RADIUS"
-  @headerIcon="radius"
+  @headerIcon="user"
   @docText="Docs: RADIUS Authentication"
   @docPath="/docs/auth/radius.html"
 >
diff --git a/ui/app/templates/components/wizard/replication-setup.hbs b/ui/app/templates/components/wizard/replication-setup.hbs
index 449ac22b0..1e9b1944e 100644
--- a/ui/app/templates/components/wizard/replication-setup.hbs
+++ b/ui/app/templates/components/wizard/replication-setup.hbs
@@ -10,11 +10,12 @@
     </p>
 
     <LearnLink @path="/vault/operations/ops-replication">
-      <Icon @glyph="learn" aria-hidden="true" />Learn: Setting Up Performance Replication
+      <Icon @name="learn-link" />
+      Learn: Setting Up Performance Replication
     </LearnLink>
 
     <LearnLink @path="/vault/operations/ops-disaster-recovery">
-      <Icon @glyph="learn" aria-hidden="true" />
+      <Icon @name="learn-link" />
       Learn: Setting up Disaster Recovery
     </LearnLink>
 
diff --git a/ui/app/templates/components/wizard/secrets-display.hbs b/ui/app/templates/components/wizard/secrets-display.hbs
index fa895b5f5..a907ca56e 100644
--- a/ui/app/templates/components/wizard/secrets-display.hbs
+++ b/ui/app/templates/components/wizard/secrets-display.hbs
@@ -26,11 +26,11 @@
 >
   {{#if @isSupported}}
     <button type="button" class="button next-feature-step" {{action @onRepeat}}>
-      Create another {{unless @needsEncryption @mountName}} {{@nextStep}} {{if @needsEncryption "key"}} <Icon @glyph="loop" class="hs-icon-button-right" aria-hidden="true" />
+      Create another {{unless @needsEncryption @mountName}} {{@nextStep}} {{if @needsEncryption "key"}} <Icon @name="sync" class="hs-icon-button-right" />
     </button>
   {{/if}}
   <button type="button"  class="button next-feature-step" {{action @onReset}}>
-    Enable another Secrets Engine <Icon @glyph="loop" class="hs-icon-button-right" aria-hidden="true" />
+    Enable another Secrets Engine<Icon @name="sync" class="hs-icon-button-right" />
   </button>
   <button type="button" class="button next-feature-step" {{action @onDone}}>
     {{@nextFeature}} <Chevron @isButton={{true}} />
diff --git a/ui/app/templates/components/wizard/ssh-engine.hbs b/ui/app/templates/components/wizard/ssh-engine.hbs
index b17e0a7b2..46d3b545b 100644
--- a/ui/app/templates/components/wizard/ssh-engine.hbs
+++ b/ui/app/templates/components/wizard/ssh-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="SSH"
-  @headerIcon="ssh"
+  @headerIcon="terminal-screen"
   @docText="Docs: SSH Secrets"
   @docPath="/docs/secrets/ssh/index.html"
 >
diff --git a/ui/app/templates/components/wizard/totp-engine.hbs b/ui/app/templates/components/wizard/totp-engine.hbs
index 46ccd0aa7..9a2047cfe 100644
--- a/ui/app/templates/components/wizard/totp-engine.hbs
+++ b/ui/app/templates/components/wizard/totp-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="TOTP"
-  @headerIcon="totp"
+  @headerIcon="history"
   @docText="Docs: TOTP Secrets"
   @docPath="/docs/secrets/totp/index.html"
 >
diff --git a/ui/app/templates/components/wizard/transit-engine.hbs b/ui/app/templates/components/wizard/transit-engine.hbs
index 4bc593e8c..ebb46bb86 100644
--- a/ui/app/templates/components/wizard/transit-engine.hbs
+++ b/ui/app/templates/components/wizard/transit-engine.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Transit"
-  @headerIcon="transit"
+  @headerIcon="swap-horizontal"
   @docText="Docs: Transit Secrets"
   @docPath="/docs/secrets/transit/index.html"
 >
diff --git a/ui/app/templates/components/wizard/tutorial-complete.hbs b/ui/app/templates/components/wizard/tutorial-complete.hbs
index fdc43af84..3170c85cc 100644
--- a/ui/app/templates/components/wizard/tutorial-complete.hbs
+++ b/ui/app/templates/components/wizard/tutorial-complete.hbs
@@ -4,7 +4,7 @@
   </p>
   <div class="box wizard-divider-box">
     <button type="button" class="button is-transparent has-icon-left has-text-white" {{action onDismiss}}>
-      <Icon @glyph="cancel-plain" aria-hidden="true" />
+      <Icon @name="x" />
       Close
     </button>
   </div>
diff --git a/ui/app/templates/components/wizard/tutorial-error.hbs b/ui/app/templates/components/wizard/tutorial-error.hbs
index 12291f863..fa5d1974b 100644
--- a/ui/app/templates/components/wizard/tutorial-error.hbs
+++ b/ui/app/templates/components/wizard/tutorial-error.hbs
@@ -7,7 +7,7 @@
 </WizardSection>
 <WizardSection>
   <button type="button" class="button next-feature-step" {{action @onReset}}>
-    Go Back <Icon @glyph="reply" />
+    Go Back <Icon @name="corner-up-left" />
   </button>
   <button type="button" class="button next-feature-step" {{action @onAdvance}}>
     {{@nextFeature}} <Chevron @isButton={{true}} />
diff --git a/ui/app/templates/components/wizard/tutorial-idle.hbs b/ui/app/templates/components/wizard/tutorial-idle.hbs
index eb9a8e963..49a72575c 100644
--- a/ui/app/templates/components/wizard/tutorial-idle.hbs
+++ b/ui/app/templates/components/wizard/tutorial-idle.hbs
@@ -5,7 +5,7 @@
   @hidePopup={{true}}
 >
   <button type="button" class="button is-transparent icon dismiss-collapsed" {{action @onDismiss}}>
-    <Icon @glyph="cancel-plain" aria-label="Close" />
+    <Icon @name="x" aria-label="Close" />
   </button>
   <p>Want a tour? Our helpful guide will introduce you to the Vault Web UI.</p>
   <div class="box wizard-divider-box">
diff --git a/ui/app/templates/components/wizard/tutorial-paused.hbs b/ui/app/templates/components/wizard/tutorial-paused.hbs
index b8f912384..1088b3f99 100644
--- a/ui/app/templates/components/wizard/tutorial-paused.hbs
+++ b/ui/app/templates/components/wizard/tutorial-paused.hbs
@@ -5,7 +5,7 @@
   @hidePopup={{true}}
 >
   <button type="button" class="button is-transparent dismiss-collapsed" {{action @onDismiss}}>
-    <Icon @glyph="cancel-plain" aria-label="Close"/>
+    <Icon @name="x" aria-label="Close" />
   </button>
   <p>Feel free to explore Vault. Click below to get back to the guide or close this window.</p>
   <div class="box wizard-divider-box">
diff --git a/ui/app/templates/components/wizard/userpass-method.hbs b/ui/app/templates/components/wizard/userpass-method.hbs
index df11cf564..d10bc573a 100644
--- a/ui/app/templates/components/wizard/userpass-method.hbs
+++ b/ui/app/templates/components/wizard/userpass-method.hbs
@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Username & Password"
-  @headerIcon="userpass"
+  @headerIcon="identity-user"
   @docText="Docs: Userpass Authentication"
   @docPath="/docs/auth/userpass.html"
 >
diff --git a/ui/app/templates/vault.hbs b/ui/app/templates/vault.hbs
index e9e36f179..f30203ba9 100644
--- a/ui/app/templates/vault.hbs
+++ b/ui/app/templates/vault.hbs
@@ -3,10 +3,10 @@
   <footer class="footer has-text-grey has-text-centered">
     <span class="is-inline-block">
       <Icon
-        @glyph="hashicorp"
-        @size="l"
+        @name="hashicorp"
         aria-hidden="true"
-        class="has-text-grey-light" />
+        class="has-text-grey-light"
+      />
       &copy; {{date-format (now) "yyyy"}} HashiCorp
     </span>
     <span>
@@ -32,7 +32,7 @@
   {{#if (eq env "development") }}
     <div class="env-banner level development">
       <div class="level-item notification">
-        <Icon @glyph="git-branch" /><Icon @glyph="edit" /> Local development <Icon @glyph="edit" /><Icon @glyph="git-branch" />
+        <Icon @name="git-branch" /><Icon @name="pencil-tool" /> Local development <Icon @name="pencil-tool" /><Icon @name="git-branch" />
       </div>
     </div>
   {{/if}}
diff --git a/ui/app/templates/vault/cluster.hbs b/ui/app/templates/vault/cluster.hbs
index ab20e6f0a..0e2deb1e8 100644
--- a/ui/app/templates/vault/cluster.hbs
+++ b/ui/app/templates/vault/cluster.hbs
@@ -3,7 +3,7 @@
     as |Nav|>
     <Nav.home>
       <HomeLink @class="navbar-item has-text-white has-current-color-fill">
-        <Icon @glyph="vault-logo" @size="l" />
+        <Icon @name="vault-logo" />
       </HomeLink>
     </Nav.home>
     <Nav.main>
@@ -89,7 +89,7 @@
       <div class="navbar-item">
         <button type="button" class="button is-transparent nav-console-button{{if consoleOpen " popup-open"}}"
           {{action (queue (action 'toggleConsole') (action Nav.closeDrawer))}} data-test-console-toggle>
-          <Icon @glyph="console" @size="l" />
+          <Icon @name="terminal-screen" />
           <div class="status-menu-label">
             Console
           </div>
diff --git a/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs b/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs
index be3135455..8b31e447c 100644
--- a/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs
@@ -10,10 +10,10 @@
       }}
       <div class="columns is-mobile">
         <div class="column is-10">
-          <LinkTo @route="vault.cluster.access.identity.aliases.show" @models={{array item.id "details"}} class="is-block has-text-black has-text-weight-semibold" data-test-identity-link={{item.id}}><Icon
-              @glyph="user-square-outline"
-              class="has-text-grey-light"
-            /><span class="has-text-weight-semibold">{{item.name}}</span></LinkTo>
+          <LinkTo @route="vault.cluster.access.identity.aliases.show" @models={{array item.id "details"}} class="is-block has-text-black has-text-weight-semibold" data-test-identity-link={{item.id}}>
+            <Icon @name="user" class="has-text-grey-light" />
+            <span class="has-text-weight-semibold">{{item.name}}</span>
+          </LinkTo>
           <div class="has-text-grey">
             {{item.id}}
           </div>
diff --git a/ui/app/templates/vault/cluster/access/identity/index.hbs b/ui/app/templates/vault/cluster/access/identity/index.hbs
index b3b8a1b7e..12151c45a 100644
--- a/ui/app/templates/vault/cluster/access/identity/index.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/index.hbs
@@ -10,10 +10,10 @@
       }}
       <div class="columns is-mobile">
         <div class="column is-7-tablet is-10-mobile">
-          <LinkTo @route="vault.cluster.access.identity.show" @models={{array item.id "details"}} class="is-block has-text-black has-text-weight-semibold" data-test-identity-link={{true}}><Icon
-              @glyph="user-square-outline"
-              class="has-text-grey-light"
-            /><span class="has-text-weight-semibold">{{item.name}}</span></LinkTo>
+          <LinkTo @route="vault.cluster.access.identity.show" @models={{array item.id "details"}} class="is-block has-text-black has-text-weight-semibold" data-test-identity-link={{true}}>
+            <Icon @name="user" class="has-text-grey-light" />
+            <span class="has-text-weight-semibold">{{item.name}}</span>
+          </LinkTo>
           <div class="has-text-grey is-size-8">
             {{item.id}}
           </div>
diff --git a/ui/app/templates/vault/cluster/access/leases/list.hbs b/ui/app/templates/vault/cluster/access/leases/list.hbs
index 7a276c3c5..476bded8a 100644
--- a/ui/app/templates/vault/cluster/access/leases/list.hbs
+++ b/ui/app/templates/vault/cluster/access/leases/list.hbs
@@ -75,10 +75,10 @@
 
 {{#if model.meta.total}}
   {{#each model as |item|}}
-    <LinkTo @route={{if item.isFolder "vault.cluster.access.leases.list" "vault.cluster.access.leases.show" }} @model={{item.id}} class="list-item-row" data-test-lease-link={{item.id}}><Icon
-      @glyph={{if item.isFolder 'folder-outline' 'file-outline'}}
-      class="has-text-grey-light"
-    /><span class="has-text-weight-semibold">{{or item.keyWithoutParent item.id}}</span></LinkTo>
+    <LinkTo @route={{if item.isFolder "vault.cluster.access.leases.list" "vault.cluster.access.leases.show" }} @model={{item.id}} class="list-item-row" data-test-lease-link={{item.id}}>
+      <Icon @name={{if item.isFolder 'folder' 'file'}} class="has-text-grey-light" />
+      <span class="has-text-weight-semibold">{{or item.keyWithoutParent item.id}}</span>
+    </LinkTo>
   {{else}}
     <EmptyState
       @title="There are no leases matching &quot;{{this.filter}}&quot;"
diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs
index 313600eed..1e09026df 100644
--- a/ui/app/templates/vault/cluster/access/methods.hbs
+++ b/ui/app/templates/vault/cluster/access/methods.hbs
@@ -25,14 +25,16 @@
         <div>
           <ToolTip @horizontalPosition="left" as |T|>
             <T.trigger>
-              <Icon @size="l" class="has-text-grey-light" 
-                @glyph={{if
-                (or
-                  (find-by "type" method.methodType (mountable-auth-methods))
-                  (eq method.methodType "token")
-                )
-                method.methodType
-                "auth"}} 
+              <Icon
+                @name={{if
+                  (or
+                    (find-by "type" method.methodType (mountable-auth-methods))
+                    (eq method.methodType "token")
+                  )
+                  method.methodType
+                  "auth"
+                }}
+                class="has-text-grey-light"
               />
             </T.trigger>
             <T.content @class="tool-tip">
diff --git a/ui/app/templates/vault/cluster/init.hbs b/ui/app/templates/vault/cluster/init.hbs
index 49d2024e4..26b2ea595 100644
--- a/ui/app/templates/vault/cluster/init.hbs
+++ b/ui/app/templates/vault/cluster/init.hbs
@@ -102,7 +102,7 @@
             @class="button is-ghost"
             @stringify={{true}}
           >
-            <Icon @glyph="download" /> Download keys
+            <Icon @name="download" /> Download keys
           </DownloadButton>
         </div>
       </div>
diff --git a/ui/app/templates/vault/cluster/policies/index.hbs b/ui/app/templates/vault/cluster/policies/index.hbs
index dfa08c967..6fd60e117 100644
--- a/ui/app/templates/vault/cluster/policies/index.hbs
+++ b/ui/app/templates/vault/cluster/policies/index.hbs
@@ -52,11 +52,7 @@
     {{#each model as |item|}}
       {{#if (eq item.id "root")}}
         <div class="list-item-row is-flex" data-test-policy-item>
-          <Icon
-            aria-hidden="true"
-            class="has-text-grey-light"
-            @glyph="file-outline"
-          />
+          <Icon @name="file" class="has-text-grey-light" />
           <div>
             <span class="has-text-weight-semibold has-text-grey" data-test-policy-name>
               {{item.id}}
@@ -77,11 +73,9 @@
         }}
           <div class="columns is-mobile">
             <div class="column is-10">
-              <LinkTo @route="vault.cluster.policy.show" @models={{array policyType item.id}} class="has-text-black has-text-weight-semibold" data-test-policy-item={{true}}><Icon
-                  aria-hidden="true"
-                  class="has-text-grey-light"
-                  @glyph="file-outline"
-                /><span class="is-underline" data-test-policy-name>{{item.id}}</span>
+              <LinkTo @route="vault.cluster.policy.show" @models={{array policyType item.id}} class="has-text-black has-text-weight-semibold" data-test-policy-item={{true}}>
+                <Icon @name="file" class="has-text-grey-light" />
+                <span class="is-underline" data-test-policy-name>{{item.id}}</span>
               </LinkTo>
             </div>
             <div class="column has-text-right">
diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
index 52715ba72..5bd8bb2e9 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
@@ -8,7 +8,7 @@
         <EmptyState
           @title="Disaster Recovery secondary not set up"
           @message={{Page.message}}
-          @icon="alert-circle-outline"
+          @icon="alert-circle"
           @bottomBorder={{true}}
         >
           <nav class="breadcrumb">
diff --git a/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs b/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
index 6de984bfb..23f00fb93 100644
--- a/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
+++ b/ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
@@ -8,7 +8,7 @@
         <EmptyState
           @title="Disaster Recovery secondary not set up"
           @message={{Page.message}}
-          @icon="alert-circle-outline"
+          @icon="alert-circle"
           @bottomBorder={{true}}
         >
           <nav class="breadcrumb">
diff --git a/ui/app/templates/vault/cluster/secrets/backend/transit-actions-layout.hbs b/ui/app/templates/vault/cluster/secrets/backend/transit-actions-layout.hbs
index 4ff7fd54f..547201c69 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/transit-actions-layout.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/transit-actions-layout.hbs
@@ -7,7 +7,7 @@
       <p.levelLeft>
         <h1 class="title is-3">
           <SecretLink @class="is-inline has-text-info" @secret={{model.id}} @mode="show" @replace={{true}} @queryParams={{query-params tab='actions'}} @data-test-transit-link="actions">
-            <Icon @glyph="arrow-left" />
+            <Icon @name="arrow-left" />
           </SecretLink>
           Key Actions
         </h1>
diff --git a/ui/app/templates/vault/cluster/secrets/backend/versions.hbs b/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
index f5d9cbb5b..06e5b3ce3 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
@@ -27,27 +27,27 @@
     <Item.content>
       <div class="columns is-flex-1">
         <div>
-          <Icon @glyph="history" class="has-text-grey" />
+          <Icon @name="history" class="has-text-grey" />
           Version {{list.item.version}}
         </div>
         {{#if (eq list.item.version model.currentVersion)}}
           <div class="column is-1">
             <span class="has-text-success is-size-9">
-              <Icon @glyph="check-circle-fill" />Current
+              <Icon @name="check-circle-fill" />Current
             </span>
           </div>
         {{/if}}
         {{#if list.item.deleted}}
           <div class="column is-1">
             <span class="has-text-grey is-size-8">
-              <Icon @glyph="cancel-square-fill" />Deleted
+              <Icon @name="x-square-fill" />Deleted
             </span>
           </div>
         {{/if}}
         {{#if list.item.destroyed}}
           <div class="column is-1">
             <span class="has-text-danger is-size-8">
-              <Icon @glyph="cancel-square-fill" />Destroyed
+              <Icon @name="x-square-fill" />Destroyed
             </span>      
           </div>
         {{/if}}
@@ -77,7 +77,11 @@
           @class={{concat "toolbar-link" (if D.isOpen " is-active")}}
           @tagName="button"
         >
-          <Icon aria-label="More options" @glyph="more-horizontal" class="has-text-black auto-width" />
+          <Icon
+            @name="more-horizontal"
+            aria-label="More options"
+            class="has-text-black auto-width" 
+          />
         </D.trigger>
         <D.content @class="popup-menu-content ">
           <nav class="box menu">
diff --git a/ui/app/templates/vault/cluster/unseal.hbs b/ui/app/templates/vault/cluster/unseal.hbs
index 89b32a233..7289b73ed 100644
--- a/ui/app/templates/vault/cluster/unseal.hbs
+++ b/ui/app/templates/vault/cluster/unseal.hbs
@@ -17,7 +17,7 @@
         class="empty-state-transparent"
         @title="License required"
         @subTitle="Vault license has terminated"
-        @icon="disabled"
+        @icon="skip"
         @bottomBorder={{true}}
         @message="Your Vault license has terminated and Vault is sealed. To unseal, add a current license to your configuration and restart Vault."
       >
diff --git a/ui/app/templates/vault/not-found.hbs b/ui/app/templates/vault/not-found.hbs
index 4974a69a0..1185580c0 100644
--- a/ui/app/templates/vault/not-found.hbs
+++ b/ui/app/templates/vault/not-found.hbs
@@ -2,7 +2,7 @@
   <nav class="navbar is-grouped-split">
     <div class="navbar-brand">
       <HomeLink @class="navbar-item has-text-white has-current-color-fill">
-        <Icon @glyph="vault-logo" @size="l" />
+        <Icon @name="vault-logo" />
       </HomeLink>
     </div>
   </nav>
diff --git a/ui/ember-cli-build.js b/ui/ember-cli-build.js
index a04d6256e..73ca8d85d 100644
--- a/ui/ember-cli-build.js
+++ b/ui/ember-cli-build.js
@@ -32,7 +32,7 @@ module.exports = function(defaults) {
       keyMaps: ['sublime'],
     },
     babel: {
-      plugins: ['@babel/plugin-proposal-object-rest-spread'],
+      plugins: ['@babel/plugin-proposal-object-rest-spread', ['inline-json-import', {}]],
     },
     'ember-cli-babel': {
       includePolyfill: isTest || isProd || isCI,
diff --git a/ui/lib/core/addon/components/icon.js b/ui/lib/core/addon/components/icon.js
index eae63b0cc..ad17bda74 100644
--- a/ui/lib/core/addon/components/icon.js
+++ b/ui/lib/core/addon/components/icon.js
@@ -1,36 +1,39 @@
-/**
- * @module Icon
- * `Icon` components are glyphs used to indicate important information.
- *
- * @example
- * ```js
- * <Icon @glyph="cancel-square-outline" />
- * ```
- * @param glyph=null {String} - The name of the SVG to render inline.
- * @param [size='m'] {String} - The size of the Icon, can be one of 's', 'm', 'l', 'xlm', 'xl', 'xxl'. The default is 'm'.
- *
- */
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { assert } from '@ember/debug';
 import layout from '../templates/components/icon';
-
-const SIZES = ['s', 'm', 'l', 'xlm', 'xl', 'xxl'];
-
+import flightIconMap from '@hashicorp/flight-icons/catalog.json';
+const flightIconNames = flightIconMap.assets.mapBy('iconName').uniq();
+/**
+ * @module Icon
+ * `Icon` components are glyphs used to indicate important information.
+ *
+ * Flight icon documentation at https://flight-hashicorp.vercel.app/
+ *
+ * @example
+ * ```js
+ * <Icon @name="cancel-square-outline" @size="24" />
+ * ```
+ * @param {string} name=null - The name of the SVG to render inline.
+ * @param {string} [size=16] - size for flight icon, can be 16 or 24
+ *
+ */
 export default Component.extend({
   tagName: '',
   layout,
-  glyph: null,
-  size: 'm',
-  sizeClass: computed('size', function() {
-    let { size } = this;
-    assert(
-      `The size property of ${this.toString()} must be one of the following: ${SIZES.join(', ')}`,
-      SIZES.includes(size)
-    );
-    if (size === 'm') {
-      return '';
-    }
-    return `hs-icon-${size}`;
+  name: null,
+  size: '16',
+
+  init() {
+    this._super(...arguments);
+    assert('Icon component size argument must be either "16" or "24"', ['16', '24'].includes(this.size));
+  },
+
+  // favor flight icon set and fall back to structure icons if not found
+  isFlightIcon: computed('name', function() {
+    return this.name ? flightIconNames.includes(this.name) : false;
+  }),
+  hsIconClass: computed('size', function() {
+    return this.size === '24' ? 'hs-icon-xl' : 'hs-icon-l';
   }),
 });
diff --git a/ui/lib/core/addon/components/toolbar-filters.js b/ui/lib/core/addon/components/toolbar-filters.js
index 7a7bc3a02..400ca6d13 100644
--- a/ui/lib/core/addon/components/toolbar-filters.js
+++ b/ui/lib/core/addon/components/toolbar-filters.js
@@ -9,7 +9,7 @@
  *   <ToolbarFilters>
  *     <div class="control has-icons-left">
  *       <input class="filter input" placeholder="Filter keys" type="text">
- *       <Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
+ *       <Icon @name="search" @size="24" class="search-icon has-text-grey-light" />
  *     </div>
  *   </ToolbarFilters>
  * </Toolbar>
diff --git a/ui/lib/core/addon/components/toolbar-link.js b/ui/lib/core/addon/components/toolbar-link.js
index 48745acb3..7dfb0ab07 100644
--- a/ui/lib/core/addon/components/toolbar-link.js
+++ b/ui/lib/core/addon/components/toolbar-link.js
@@ -32,10 +32,6 @@ export default Component.extend({
   disabled: false,
   disabledTooltip: null,
   glyph: computed('type', function() {
-    if (this.type == 'add') {
-      return 'plus-plain';
-    } else {
-      return 'chevron-right';
-    }
+    return this.type == 'add' ? 'plus' : 'chevron-right';
   }),
 });
diff --git a/ui/lib/core/addon/helpers/cluster-states.js b/ui/lib/core/addon/helpers/cluster-states.js
index 6b149af36..014e5d224 100644
--- a/ui/lib/core/addon/helpers/cluster-states.js
+++ b/ui/lib/core/addon/helpers/cluster-states.js
@@ -6,47 +6,47 @@ import { helper as buildHelper } from '@ember/component/helper';
 
 export const CLUSTER_STATES = {
   running: {
-    glyph: 'check-circle-outline',
+    glyph: 'check-circle',
     isOk: true,
     isSyncing: false,
   },
   ready: {
-    glyph: 'check-circle-outline',
+    glyph: 'check-circle',
     isOk: true,
     isSyncing: false,
   },
   'stream-wals': {
-    glyph: 'check-circle-outline',
+    glyph: 'check-circle',
     isOk: true,
     isSyncing: false,
   },
   'merkle-diff': {
-    glyph: 'android-sync',
+    glyph: 'sync-reverse',
     isOk: true,
     isSyncing: true,
   },
   connecting: {
-    glyph: 'android-sync',
+    glyph: 'sync-reverse',
     isOk: true,
     isSyncing: true,
   },
   'merkle-sync': {
-    glyph: 'android-sync',
+    glyph: 'sync-reverse',
     isOk: true,
     isSyncing: true,
   },
   idle: {
-    glyph: 'cancel-square-outline',
+    glyph: 'x-square',
     isOk: false,
     isSyncing: false,
   },
   transient_failure: {
-    glyph: 'cancel-circle-outline',
+    glyph: 'x-circle',
     isOk: false,
     isSyncing: false,
   },
   shutdown: {
-    glyph: 'cancel-circle-outline',
+    glyph: 'x-circle',
     isOk: false,
     isSyncing: false,
   },
diff --git a/ui/lib/core/addon/helpers/message-types.js b/ui/lib/core/addon/helpers/message-types.js
index 76958e95e..a3416dee2 100644
--- a/ui/lib/core/addon/helpers/message-types.js
+++ b/ui/lib/core/addon/helpers/message-types.js
@@ -4,7 +4,7 @@ export const MESSAGE_TYPES = {
   info: {
     class: 'is-info',
     glyphClass: 'has-text-info',
-    glyph: 'info-circle-fill',
+    glyph: 'info',
     text: 'Info',
   },
   success: {
@@ -16,13 +16,13 @@ export const MESSAGE_TYPES = {
   danger: {
     class: 'is-danger',
     glyphClass: 'has-text-danger',
-    glyph: 'cancel-square-fill',
+    glyph: 'x-square-fill',
     text: 'Error',
   },
   warning: {
     class: 'is-highlight',
     glyphClass: 'has-text-highlight',
-    glyph: 'alert-triangle',
+    glyph: 'alert-triangle-fill',
     text: 'Warning',
   },
   loading: {
diff --git a/ui/lib/core/addon/templates/components/alert-banner.hbs b/ui/lib/core/addon/templates/components/alert-banner.hbs
index 6e9e64f54..cb815a701 100644
--- a/ui/lib/core/addon/templates/components/alert-banner.hbs
+++ b/ui/lib/core/addon/templates/components/alert-banner.hbs
@@ -2,11 +2,10 @@
   <div class="columns is-mobile is-variable is-1">
     <div class="column is-narrow message-icon">
       <Icon
-        @size="l"
-        class="{{alertType.glyphClass}}"
+        class={{alertType.glyphClass}}
         aria-hidden="true"
-        @glyph={{alertType.glyph}}
-        />
+        @name={{alertType.glyph}}
+      />
     </div>
     {{#if @yieldWithoutColumn}}
       {{yield}}
@@ -16,10 +15,9 @@
           {{or @title this.alertType.text}}
           {{#if @secondIconType}}
             <Icon
-              @size="l"
               class="{{secondAlertType.glyphClass}}"
               aria-hidden="true"
-              @glyph={{secondAlertType.glyph}}
+              @name={{secondAlertType.glyph}}
             />
           {{/if}}
           {{#if @progressBar}}
diff --git a/ui/lib/core/addon/templates/components/alert-inline.hbs b/ui/lib/core/addon/templates/components/alert-inline.hbs
index 973623816..7f150079b 100644
--- a/ui/lib/core/addon/templates/components/alert-inline.hbs
+++ b/ui/lib/core/addon/templates/components/alert-inline.hbs
@@ -1,5 +1,5 @@
 <Icon
-  @glyph={{this.alertType.glyph}}
+  @name={{this.alertType.glyph}}
   class={{this.alertType.glyphClass}}
 />
 <p class="{{this.textClass}}" data-test-inline-error-message>
diff --git a/ui/lib/core/addon/templates/components/box-radio.hbs b/ui/lib/core/addon/templates/components/box-radio.hbs
index 946ca9a94..99bf0a92e 100644
--- a/ui/lib/core/addon/templates/components/box-radio.hbs
+++ b/ui/lib/core/addon/templates/components/box-radio.hbs
@@ -12,8 +12,8 @@
         data-test-mount-type={{@type}}
       >
         <Icon
-          @glyph={{@glyph}}
-          @size="xl"
+          @name={{@glyph}}
+          @size="24"
           class="has-text-grey-light"
         />
         {{@displayName}}
@@ -45,8 +45,8 @@
     data-test-mount-type={{@type}}
   >
     <Icon
-      @glyph={{@glyph}}
-      @size="xl"
+      @name={{@glyph}}
+      @size="24"
       class="has-text-grey-light"
     />
     {{@displayName}}
diff --git a/ui/lib/core/addon/templates/components/chevron.hbs b/ui/lib/core/addon/templates/components/chevron.hbs
index 526f6a042..e82ad669d 100644
--- a/ui/lib/core/addon/templates/components/chevron.hbs
+++ b/ui/lib/core/addon/templates/components/chevron.hbs
@@ -1,6 +1,5 @@
 <Icon
-  aria-hidden="true"
+  @name={{this.glyph}}
   class="{{class}} {{if (and @isButton (eq this.direction 'right')) 'hs-icon-button-right'}}"
-  @glyph={{this.glyph}}
   ...attributes
 />
diff --git a/ui/lib/core/addon/templates/components/confirm-action.hbs b/ui/lib/core/addon/templates/components/confirm-action.hbs
index 4c3993675..d1a8ea5d4 100644
--- a/ui/lib/core/addon/templates/components/confirm-action.hbs
+++ b/ui/lib/core/addon/templates/components/confirm-action.hbs
@@ -23,7 +23,7 @@
       <div class="box confirm-action-message">
         <div class="message is-highlight">
           <div class="message-title">
-            <Icon @glyph="alert-triangle" />
+            <Icon @name="alert-triangle-fill" />
             {{confirmTitle}}
           </div>
           <p>
diff --git a/ui/lib/core/addon/templates/components/confirm/message.hbs b/ui/lib/core/addon/templates/components/confirm/message.hbs
index 2c7067edc..30ce7ff96 100644
--- a/ui/lib/core/addon/templates/components/confirm/message.hbs
+++ b/ui/lib/core/addon/templates/components/confirm/message.hbs
@@ -3,7 +3,7 @@
     <div class="confirm-action-message">
       <div class="message is-highlight">
         <div class="message-title">
-          <Icon @glyph="alert-triangle" />
+          <Icon @name="alert-triangle-fill" />
           {{title}}
         </div>
         <p>
diff --git a/ui/lib/core/addon/templates/components/empty-state.hbs b/ui/lib/core/addon/templates/components/empty-state.hbs
index 8d3996680..5c921ed68 100644
--- a/ui/lib/core/addon/templates/components/empty-state.hbs
+++ b/ui/lib/core/addon/templates/components/empty-state.hbs
@@ -2,7 +2,7 @@
   <div class="empty-state-content">
     {{#if icon}}
       <div class="empty-state-icon">
-        <Icon @glyph={{icon}} @size="xxl" />
+        <Icon @name={{icon}} @size="24" />
         <h3 class="empty-state-title" data-test-empty-state-title>
           {{title}}
         </h3>
diff --git a/ui/lib/core/addon/templates/components/form-error.hbs b/ui/lib/core/addon/templates/components/form-error.hbs
index d24397763..3b8c1647e 100644
--- a/ui/lib/core/addon/templates/components/form-error.hbs
+++ b/ui/lib/core/addon/templates/components/form-error.hbs
@@ -1,10 +1,8 @@
 <div class="has-top-margin-s is-flex is-flex-center" data-test-form-error>
   <div class="is-narrow message-icon">
     <Icon
-      @size="s"
+      @name="x-square-fill"
       class="has-text-danger"
-      aria-hidden=true
-      @glyph="cancel-square-fill"
     />
   </div>
   <div class="has-text-danger">
diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs
index e705fdd82..bb3000bba 100644
--- a/ui/lib/core/addon/templates/components/form-field.hbs
+++ b/ui/lib/core/addon/templates/components/form-field.hbs
@@ -257,7 +257,7 @@
             data-test-json-clear-button
           >
             Clear
-            <Icon @glyph="refresh-default" aria-hidden="true" />
+            <Icon @name="reload" />
           </button>
         {{/if}}
       </JsonEditor>
diff --git a/ui/lib/core/addon/templates/components/icon.hbs b/ui/lib/core/addon/templates/components/icon.hbs
index 84b9ea8e8..a26f937b7 100644
--- a/ui/lib/core/addon/templates/components/icon.hbs
+++ b/ui/lib/core/addon/templates/components/icon.hbs
@@ -1,3 +1,11 @@
-<span class="hs-icon {{sizeClass}} {{class}}" ...attributes>
-  {{svg-jar @glyph}}
-</span>
\ No newline at end of file
+{{#if this.isFlightIcon}}
+  <FlightIcon
+    @name={{@name}}
+    @size={{@size}}
+    ...attributes
+  />
+{{else}}
+  <span class="hs-icon {{this.hsIconClass}}" ...attributes>
+    {{svg-jar @name}}
+  </span>
+{{/if}}
\ No newline at end of file
diff --git a/ui/lib/core/addon/templates/components/info-table-row.hbs b/ui/lib/core/addon/templates/components/info-table-row.hbs
index 07455f776..19c7ee9fa 100644
--- a/ui/lib/core/addon/templates/components/info-table-row.hbs
+++ b/ui/lib/core/addon/templates/components/info-table-row.hbs
@@ -24,7 +24,7 @@
         </div>
       {{/if}}
     {{else}}
-      <Icon @size="s" @glyph="minus-plain"/>
+      <Icon @name="minus" />
     {{/if}}
   </div>
   <div class="column is-flex" data-test-value-div="{{label}}">
@@ -33,25 +33,21 @@
     {{else if valueIsBoolean}}
       {{#if value}}
         <Icon
-          aria-hidden="true"
           class="icon-true"
-          @size="l"
-          @glyph="check-circle-outline"
+          @name="check-circle"
           data-test-boolean-true
         /> Yes
       {{else}}
         <Icon
-          aria-hidden="true"
+          @name="x-square"
           class="icon-false"
-          @size="l"
-          @glyph="cancel-square-outline"
         /> No
       {{/if}}
     {{!-- alwaysRender is still true --}}
     {{else if (and (not value) defaultShown)}}
       <span data-test-row-value="{{label}}">{{defaultShown}}</span>
     {{else if valueIsEmpty}} 
-      <Icon @size="s" @glyph="minus-plain"/>
+      <Icon @name="minus" />
     {{else}}
       {{#if (eq type 'array')}}
         <InfoTableItemArray
diff --git a/ui/lib/core/addon/templates/components/info-tooltip.hbs b/ui/lib/core/addon/templates/components/info-tooltip.hbs
index e725a577b..5fa0d8407 100644
--- a/ui/lib/core/addon/templates/components/info-tooltip.hbs
+++ b/ui/lib/core/addon/templates/components/info-tooltip.hbs
@@ -1,6 +1,7 @@
 {{#tool-tip as |d|}}
   {{#d.trigger tagName="button" type="button" class="tool-tip-trigger button is-ghost is-compact" data-test-tool-tip-trigger=true}}
-    <Icon @glyph="info-circle-outline"
+    <Icon
+      @name="info"
       class="auto-width"
       aria-label="help"
     />
diff --git a/ui/lib/core/addon/templates/components/linkable-item/content.hbs b/ui/lib/core/addon/templates/components/linkable-item/content.hbs
index 088742be7..c89cdcc83 100644
--- a/ui/lib/core/addon/templates/components/linkable-item/content.hbs
+++ b/ui/lib/core/addon/templates/components/linkable-item/content.hbs
@@ -4,8 +4,7 @@
       <ToolTip @horizontalPosition="left" as |T|>
         <T.trigger>
           <Icon
-            @glyph={{@glyph}}
-            @size="l"
+            @name={{@glyph}}
             class="has-text-grey-light"
             data-test-linkable-item-glyph
           />
diff --git a/ui/lib/core/addon/templates/components/masked-input.hbs b/ui/lib/core/addon/templates/components/masked-input.hbs
index 50dee850d..dd1bbc413 100644
--- a/ui/lib/core/addon/templates/components/masked-input.hbs
+++ b/ui/lib/core/addon/templates/components/masked-input.hbs
@@ -32,7 +32,7 @@
       @success={{action (set-flash-message 'Data copied!')}}
       class="copy-button button {{if displayOnly "is-compact"}}"
         data-test-copy-button>
-      <Icon @glyph="copy-action" aria-hidden="Copy value" />
+      <Icon @name="clipboard-copy" aria-hidden="Copy value" />
     </CopyButton>
   {{/if}}
   <button 
@@ -40,6 +40,6 @@
     type="button"
     class="{{if (eq value "") "has-text-grey"}} masked-input-toggle button"
     data-test-button>
-    <Icon @glyph={{if showValue "visibility-show" "visibility-hide"}} aria-hidden="true" />
+    <Icon @name={{if showValue "eye" "eye-off"}} />
   </button>
 </div>
diff --git a/ui/lib/core/addon/templates/components/modal.hbs b/ui/lib/core/addon/templates/components/modal.hbs
index de836e797..ef491ffd0 100644
--- a/ui/lib/core/addon/templates/components/modal.hbs
+++ b/ui/lib/core/addon/templates/components/modal.hbs
@@ -6,10 +6,9 @@
           <h2 class="modal-card-title title is-5" data-test-modal-title>
             {{#if glyph}}
               <Icon
-                @size="l"
                 class="{{glyph.glyphClass}}"
                 aria-hidden="true"
-                @glyph={{glyph.glyph}}
+                @name={{glyph.glyph}}
                 data-test-modal-glyph={{glyph.glyph}}
               />
             {{/if}}
diff --git a/ui/lib/core/addon/templates/components/navigate-input.hbs b/ui/lib/core/addon/templates/components/navigate-input.hbs
index b5493c948..8c03d5393 100644
--- a/ui/lib/core/addon/templates/components/navigate-input.hbs
+++ b/ui/lib/core/addon/templates/components/navigate-input.hbs
@@ -14,6 +14,6 @@
     onfocus={{action "setFilterFocused" true}}
     onblur={{action "setFilterFocused" false}}
    />
-    <Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
+    <Icon @name="search" class="search-icon has-text-grey-light" />
   </p>
 </div>
diff --git a/ui/lib/core/addon/templates/components/popup-menu.hbs b/ui/lib/core/addon/templates/components/popup-menu.hbs
index 2c8821824..6ac776950 100644
--- a/ui/lib/core/addon/templates/components/popup-menu.hbs
+++ b/ui/lib/core/addon/templates/components/popup-menu.hbs
@@ -1,7 +1,7 @@
 {{#basic-dropdown class="popup-menu" horizontalPosition="auto-right" verticalPosition="below" onOpen=onOpen as |d|}}
   {{#d.trigger tagName="button" class=(concat "popup-menu-trigger button is-ghost" (if d.isOpen " is-active")) data-test-popup-menu-trigger=true}}
     <Icon
-      @glyph="more-horizontal"
+      @name="more-horizontal"
       class="has-text-black auto-width"
       aria-label="More options"
     />
diff --git a/ui/lib/core/addon/templates/components/replication-dashboard.hbs b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
index feeb6222b..5bb4c6ab5 100644
--- a/ui/lib/core/addon/templates/components/replication-dashboard.hbs
+++ b/ui/lib/core/addon/templates/components/replication-dashboard.hbs
@@ -21,7 +21,11 @@
       {{/unless}}
       <h2 class="title is-3" data-test-summary-state>{{summaryState}}
         {{#if (get (cluster-states summaryState) "isOk")}}
-          <Icon @glyph={{get (cluster-states summaryState) "glyph"}} class="{{if (get (cluster-states summaryState) "isOk") "has-text-success" "has-text-danger"}}" data-test-icon />
+          <Icon
+            @name={{get (cluster-states summaryState) "glyph"}}
+            class="{{if (get (cluster-states summaryState) "isOk") "has-text-success" "has-text-danger"}}"
+            data-test-icon
+          />
         {{/if}}
       </h2>
     </div>
diff --git a/ui/lib/core/addon/templates/components/replication-mode-summary.hbs b/ui/lib/core/addon/templates/components/replication-mode-summary.hbs
index 014897c33..7a9c79f9d 100644
--- a/ui/lib/core/addon/templates/components/replication-mode-summary.hbs
+++ b/ui/lib/core/addon/templates/components/replication-mode-summary.hbs
@@ -34,10 +34,7 @@
       {{#if replicationEnabled}}
         {{#if (cluster-states modeState)}}
           <span class="{{if (get (cluster-states modeState) "isOk") "has-text-success" "has-text-danger"}}">
-            <Icon
-              aria-hidden="true"
-              @glyph={{get (cluster-states modeState) "glyph"}}
-            />
+            <Icon @name={{get (cluster-states modeState) "glyph"}} />
           </span>
         {{else if syncProgress}}
           <progress value="{{syncProgressPercent}}" max="100" class="progress is-small is-narrow is-info">
@@ -46,8 +43,8 @@
         {{/if}}
       {{else}}
         <Icon
+          @name="minus-circle"
           aria-label="Replication not enabled"
-          @glyph="minus-circle-outline"
           class="has-text-grey-light"
         />
       {{/if}}
diff --git a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
index 22cebdb79..d906e0800 100644
--- a/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
+++ b/ui/lib/core/addon/templates/components/replication-secondary-card.hbs
@@ -53,7 +53,7 @@
       {{#if inSyncState}}
         <ToolTip @verticalPosition="above" as |T|>
           <T.trigger>
-            <Icon @glyph={{'check-circle-outline'}} @size="m" class={{'has-text-success'}} data-test-glyph />
+            <Icon @name="check-circle" class="has-text-success" data-test-glyph />
           </T.trigger>
           <T.content @class="tool-tip">
             <div class="box">
@@ -87,7 +87,7 @@
         <div class="grid-item-top-right">
           <a href={{concat primaryUiUrl '/ui/'}} class="toolbar-link" data-test-primary-link>
             View primary cluster
-            <Icon @glyph='chevron-right' />
+            <Icon @name="chevron-right" />
           </a>
         </div>
       {{/if}}
diff --git a/ui/lib/core/addon/templates/components/search-select-placeholder.hbs b/ui/lib/core/addon/templates/components/search-select-placeholder.hbs
index 6a5c308c8..e13e318b8 100644
--- a/ui/lib/core/addon/templates/components/search-select-placeholder.hbs
+++ b/ui/lib/core/addon/templates/components/search-select-placeholder.hbs
@@ -1,6 +1,6 @@
 <div class="field">
   <p class="control has-icons-left has-icons-right">
     <span class="input has-text-grey-light">Search</span>
-    <Icon @glyph="search" class="search-icon has-text-grey-light" aria-hidden="true" />
+    <Icon @name="search" class="search-icon has-text-grey-light" />
   </p>
 </div>
diff --git a/ui/lib/core/addon/templates/components/search-select.hbs b/ui/lib/core/addon/templates/components/search-select.hbs
index 6cccd18d2..787a0d3f5 100644
--- a/ui/lib/core/addon/templates/components/search-select.hbs
+++ b/ui/lib/core/addon/templates/components/search-select.hbs
@@ -67,7 +67,7 @@
         <div class="control">
           <button type="button" class="button is-ghost" data-test-selected-list-button="delete"
             {{action "discardSelection" selected}}>
-            <Icon @glyph="trash" class="has-text-grey" />
+            <Icon @name="trash" class="has-text-grey" />
           </button>
         </div>
       </li>
diff --git a/ui/lib/core/addon/templates/components/string-list.hbs b/ui/lib/core/addon/templates/components/string-list.hbs
index 536778e72..1e3eb4880 100644
--- a/ui/lib/core/addon/templates/components/string-list.hbs
+++ b/ui/lib/core/addon/templates/components/string-list.hbs
@@ -39,7 +39,7 @@
           data-test-string-list-button="delete"
           {{action "removeInput" index}}
         >
-          <Icon @glyph="trash" @size="l" />
+          <Icon @name="trash" />
         </button>
       {{/if}}
     </div>
diff --git a/ui/lib/core/addon/templates/components/toggle-button.hbs b/ui/lib/core/addon/templates/components/toggle-button.hbs
index 529a4b317..9894156de 100644
--- a/ui/lib/core/addon/templates/components/toggle-button.hbs
+++ b/ui/lib/core/addon/templates/components/toggle-button.hbs
@@ -1,5 +1,5 @@
 {{#if isOpen}}
-  <Icon @glyph="chevron-up" />{{openLabel}}
+  <Icon @name="chevron-up" />{{openLabel}}
 {{else}}
-  <Icon @glyph="chevron-down" />{{closedLabel}}
+  <Icon @name="chevron-down" />{{closedLabel}}
 {{/if}}
diff --git a/ui/lib/core/addon/templates/components/toolbar-link.hbs b/ui/lib/core/addon/templates/components/toolbar-link.hbs
index 50d3e7995..c00a50f43 100644
--- a/ui/lib/core/addon/templates/components/toolbar-link.hbs
+++ b/ui/lib/core/addon/templates/components/toolbar-link.hbs
@@ -19,7 +19,7 @@
     <ToolTip @verticalPosition="above" as |T|>
       <T.trigger tabindex="-1">
         <LinkToComponent ...attributes>
-          {{yield}} <Icon @glyph={{glyph}} data-test-icon={{glyph}} />
+          {{yield}} <Icon @name={{glyph}} data-test-icon={{glyph}} />
         </LinkToComponent>
       </T.trigger>
       <T.content @class="tool-tip smaller-font">
@@ -30,7 +30,7 @@
     </ToolTip>
   {{else}}
     <LinkToComponent ...attributes>
-      {{yield}} <Icon @glyph={{glyph}} data-test-icon={{glyph}} />
+      {{yield}} <Icon @name={{glyph}} data-test-icon={{glyph}} />
     </LinkToComponent>
   {{/if}}
 {{/let}}
diff --git a/ui/lib/core/addon/templates/components/ttl-form.hbs b/ui/lib/core/addon/templates/components/ttl-form.hbs
index 391023d47..38fd76eb1 100644
--- a/ui/lib/core/addon/templates/components/ttl-form.hbs
+++ b/ui/lib/core/addon/templates/components/ttl-form.hbs
@@ -26,12 +26,7 @@
 {{#if errorMessage}}
   <div class="columns is-mobile is-variable is-1 ttl-value-error">
     <div class="is-narrow message-icon">
-      <Icon
-        @size="s"
-        class="has-text-danger"
-        aria-hidden=true
-        @glyph="cancel-square-fill"
-      />
+      <Icon @name="x-square-fill" class="has-text-danger" />
     </div>
     <div class="has-text-danger">
       {{errorMessage}}
diff --git a/ui/lib/core/addon/templates/components/ttl-picker2.hbs b/ui/lib/core/addon/templates/components/ttl-picker2.hbs
index 5bb299fb3..252d74924 100644
--- a/ui/lib/core/addon/templates/components/ttl-picker2.hbs
+++ b/ui/lib/core/addon/templates/components/ttl-picker2.hbs
@@ -12,7 +12,7 @@
     {{#if description}}
       <ToolTip @verticalPosition="below" as |T|>
         <T.trigger data-test-tooltip-trigger tabindex="-1">
-          <Icon @glyph="info-circle-outline" aria-label="description" />
+          <Icon @name="info" aria-label="description" />
         </T.trigger>
         <T.content @class="tool-tip">
           <div class="box" data-test-hover-copy-tooltip-text>
@@ -53,10 +53,8 @@
       <div class="columns is-mobile is-variable is-1 ttl-value-error">
         <div class="is-narrow message-icon">
           <Icon
-            @size="s"
+            @name="x-square-fill"
             class="has-text-danger"
-            aria-hidden=true
-            @glyph="cancel-square-fill"
           />
         </div>
         <div class="has-text-danger">
diff --git a/ui/lib/core/icon-mappings.js b/ui/lib/core/icon-mappings.js
new file mode 100644
index 000000000..021cbb30b
--- /dev/null
+++ b/ui/lib/core/icon-mappings.js
@@ -0,0 +1,222 @@
+// icons that exist in the public folder which are not part of the Structure set
+// values represent match to icon in Flight set with null representing no match
+export const localIconMap = {
+  hashicorp: null,
+  loop: 'sync',
+  reply: 'corner-up-left',
+  console: 'terminal-screen',
+  pki: 'file-text',
+  replication: 'replication-direct',
+  'perf-replication': 'replication-perf',
+  'status-indicator': 'circle-dot',
+  tour: null,
+  approle: 'cpu',
+  cert: 'certificate',
+  consul: null,
+  gcpkms: 'gcp-color',
+  kmip: 'unlock',
+  kv: 'key-values',
+  ldap: 'user',
+  okta: 'okta-color',
+  radius: 'user',
+  ssh: 'terminal-screen',
+  totp: 'history',
+  transit: 'swap-horizontal',
+  userpass: 'identity-user',
+  stopwatch: 'clock',
+  'vault-logo': null,
+  auth: 'user',
+  'android-sync': 'sync-reverse',
+};
+// complete list of Structure icons mapped to their Flight counterpart
+// null values represent no direct correlation to icon in Flight set
+// Flight icon lookup @ https://flight-hashicorp.vercel.app/
+export const structureIconMap = {
+  'alert-circle-fill': 'alert-circle-fill',
+  'alert-circle-outline': 'alert-circle',
+  'alert-triangle': 'alert-triangle-fill',
+  'arrow-down': 'arrow-down',
+  'arrow-left': 'arrow-left',
+  'arrow-right': 'arrow-right',
+  'arrow-up': 'arrow-up',
+  bolt: 'zap',
+  'box-check-fill': 'check-square-fill',
+  'box-outline': 'square',
+  broadcast: 'radio',
+  bug: 'bug',
+  calendar: 'calendar',
+  'cancel-circle-fill': 'x-circle-fill',
+  'cancel-circle-outline': 'x-circle',
+  'cancel-plain': 'x',
+  'cancel-square-fill': 'x-square-fill',
+  'cancel-square-outline': 'x-square',
+  'caret-down': null,
+  'caret-up': null,
+  'check-circle-fill': 'check-circle-fill',
+  'check-circle-outline': 'check-circle',
+  'check-plain': 'check',
+  'chevron-down': 'chevron-down',
+  'chevron-left': 'chevron-left',
+  'chevron-right': 'chevron-right',
+  'chevron-up': 'chevron-up',
+  'clock-fill': null,
+  'clock-outline': 'clock',
+  'cloud-fail': 'cloud-x',
+  code: 'code',
+  console: 'terminal',
+  'copy-action': 'clipboard-copy',
+  'copy-success': 'clipboard-checked',
+  database: 'database',
+  delay: 'delay',
+  'deny-alt': null,
+  'deny-default': null,
+  disabled: 'skip',
+  docs: 'docs-link',
+  dot: 'circle-fill',
+  download: 'download',
+  edit: 'pencil-tool',
+  'envelope-sealed-fill': null,
+  'envelope-sealed-outline': 'mail',
+  'envelope-unsealed--outline': 'mail-open',
+  'envelope-unsealed-fill': null,
+  exit: 'external-link',
+  'expand-less': 'minimize',
+  'expand-more': 'maximize',
+  'file-error': 'file-x',
+  'file-fill': 'file-text',
+  'file-outline': 'file',
+  'file-success': 'file-check',
+  filter: 'filter',
+  flag: 'flag',
+  'folder-fill': 'folder-fill',
+  'folder-outline': 'folder',
+  gateway: 'gateway',
+  'gift-fill': null,
+  'gift-outline': 'gift',
+  'git-branch': 'git-branch',
+  'git-commit': 'git-commit',
+  'git-pull-request': 'git-pull-request',
+  'git-repository': 'git-repo',
+  guide: 'guide',
+  health: 'activity',
+  'help-circle-fill': null,
+  'help-circle-outline': 'help',
+  history: 'history',
+  'info-circle-fill': null,
+  'info-circle-outline': 'info',
+  key: 'key',
+  layers: 'layers',
+  leader: 'star-circle',
+  learn: 'learn-link',
+  link: 'link',
+  loading: '',
+  'lock-closed-fill': 'lock-fill',
+  'lock-closed-outline': 'lock',
+  'lock-closed': 'lock-fill',
+  'lock-disabled': 'lock-disabled',
+  'lock-open-outline': 'unlock',
+  'lock-open': 'unlock',
+  'logo-aws-color': 'aws-color',
+  'logo-aws-monochrome': 'aws',
+  'logo-alicloud-color': 'alibaba-color',
+  'logo-alicloud-monochrome': 'alibaba',
+  'logo-auth0-color': 'auth0-color',
+  'logo-auth0-monochrome': 'auth0',
+  'logo-azure-color': 'azure-color',
+  'logo-azure-monochrome': 'azure',
+  'logo-azure-dev-ops-color': 'azure-devops-color',
+  'logo-azure-dev-ops-monochrome': 'azure-devops',
+  'logo-bitbucket-color': 'bitbucket-color',
+  'logo-bitbucket-monochrome': 'bitbucket',
+  'logo-f5-color': 'f5-color',
+  'logo-f5-monochrome': 'f5',
+  'logo-gcp-color': 'gcp-color',
+  'logo-gcp-monochrome': 'gcp',
+  'logo-github-color': 'github-color',
+  'logo-github-monochrome': 'github',
+  'logo-gitlab-color': 'gitlab-color',
+  'logo-gitlab-monochrome': 'gitlab',
+  'logo-google-color': 'google-color',
+  'logo-google-monochrome': 'google',
+  'logo-kubernetes-color': 'kubernetes-color',
+  'logo-kubernetes-monochrome': 'kubernetes',
+  'logo-microsoft-color': 'microsoft-color',
+  'logo-microsoft-monochrome': 'microsoft',
+  'logo-okta-color': 'okta-color',
+  'logo-okta-monochrome': 'okta',
+  'logo-oracle-color': 'oracle-color',
+  'logo-oracle-monochrome': 'oracle',
+  'logo-slack-color': 'slack-color',
+  'logo-slack-monochrome': 'slack',
+  'logo-vmware-color': 'vmware-color',
+  'logo-vmware-monochrome': 'vmware',
+  menu: 'menu',
+  mesh: 'mesh',
+  'message-fill': 'message-square-fill',
+  'message-outline': 'message-square-fill',
+  message: 'message-square-fill',
+  'minus-circle-fill': null,
+  'minus-circle-outline': 'minus-circle',
+  'minus-plain': 'minus',
+  'minus-square-fill': 'minus-square',
+  module: 'module',
+  'more-horizontal': 'more-horizontal',
+  'more-vertical': 'more-vertical',
+  network: 'network',
+  'notification-disabled': 'notification-disabled',
+  'notification-fill': 'notification-fill',
+  'notification-outline': 'bell',
+  outline: 'outline',
+  'page-outline': 'outline',
+  path: 'path',
+  'play-fill': 'play-circle',
+  'play-outline': 'play-circle',
+  'play-plain': 'play',
+  'plus-circle-fill': null,
+  'plus-circle-outline': 'plus-circle',
+  'plus-plain': 'plus',
+  'plus-square-fill': 'plus-square',
+  provider: 'provider',
+  'public-default': 'globe',
+  'public-locked': 'globe-private',
+  queue: 'queue',
+  'radio-button-checked': 'circle-dot',
+  'radio-button-unchecked': 'circle',
+  random: 'random',
+  redirect: 'redirect',
+  'refresh-alert': 'refresh-alert',
+  'refresh-default': 'reload',
+  remix: 'shuffle',
+  ribbon: 'award',
+  run: '',
+  search: 'search',
+  server: 'server',
+  settings: 'settings',
+  sort: 'sort-desc',
+  'source-file': 'file-source',
+  'star-fill': 'star-fill',
+  'star-outline': 'star',
+  'sub-left': 'corner-down-left',
+  'sub-right': 'corner-down-right',
+  support: 'support',
+  'swap-horizontal': 'swap-horizontal',
+  'swap-vertical': 'swap-vertical',
+  syncing: 'syncing',
+  tag: 'tag',
+  tokens: 'token',
+  trash: 'trash',
+  tune: 'sliders',
+  'unfold-less': 'unfold-close',
+  'unfold-more': 'unfold-open',
+  upload: 'upload',
+  'user-add': 'user-plus',
+  'user-organization': 'org',
+  'user-plain': 'user',
+  'user-square-fill': 'user-circle-fill',
+  'user-square-outline': 'user-circle',
+  'user-team': 'users',
+  'visibility-hide': 'eye-off',
+  'visibility-show': 'eye',
+  webhook: 'webhook',
+  partner: 'users',
+};
diff --git a/ui/lib/core/package.json b/ui/lib/core/package.json
index 38f8f4cb1..b0ddc13f6 100644
--- a/ui/lib/core/package.json
+++ b/ui/lib/core/package.json
@@ -24,6 +24,8 @@
     "ember-svg-jar": "*",
     "ember-truth-helpers": "*",
     "ember-wormhole": "^0.5.5",
-    "escape-string-regexp": "*"
+    "escape-string-regexp": "*",
+    "@hashicorp/ember-flight-icons": "*",
+    "@hashicorp/flight-icons": "*"
   }
 }
diff --git a/ui/lib/core/stories/icon.md b/ui/lib/core/stories/icon.md
index 52cf72045..56187c9dd 100644
--- a/ui/lib/core/stories/icon.md
+++ b/ui/lib/core/stories/icon.md
@@ -3,17 +3,19 @@
 ## Icon
 `Icon` components are glyphs used to indicate important information.
 
+Flight icon documentation at https://flight-hashicorp.vercel.app/
+
 **Params**
 
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
-| glyph | <code>String</code> | <code></code> | The name of the SVG to render inline. |
-| [size] | <code>String</code> | <code>&#x27;m&#x27;</code> | The size of the Icon, can be one of 's', 'm', 'l', 'xlm', 'xl', 'xxl'. The default is 'm'. |
+| name | <code>string</code> | <code>null</code> | The name of the SVG to render inline. |
+| [size] | <code>string</code> | <code>16</code> | size for flight icon, can be 16 or 24 |
 
 **Example**
   
 ```js
-<Icon @glyph="cancel-square-outline" />
+<Icon @name="cancel-square-outline" @size="24" />
 ```
 
 **See**
diff --git a/ui/lib/core/stories/icon.stories.js b/ui/lib/core/stories/icon.stories.js
index eed77a9f7..929e042ee 100644
--- a/ui/lib/core/stories/icon.stories.js
+++ b/ui/lib/core/stories/icon.stories.js
@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/ember';
 import notes from './icon.md';
 import icons from '../../../node_modules/@hashicorp/structure-icons/dist/index.js';
 import { withKnobs, select } from '@storybook/addon-knobs';
+import { structureIconMap, localIconMap } from '../icon-mappings';
 
 storiesOf('Icon', module)
   .addParameters({ options: { showPanel: true } })
@@ -11,31 +12,96 @@ storiesOf('Icon', module)
     'Icon',
     () => ({
       template: hbs`
-      <h5 class="title is-5">Icons from HashiCorp Structure</h5>
+      <h5 class="title is-5">HashiCorp Flight Icons</h5>
+      <a href="https://flight-hashicorp.vercel.app/">https://flight-hashicorp.vercel.app/</a>
+
+      <h5 class="title is-5 has-top-margin-l">
+        HashiCorp Structure Icons with Flight Mappings
+      </h5>
       <table class="table">
         <thead>
           <tr>
-            <th>Glyph title</th>
-            <th>Glyph</th>
+            <th>Structure Icon Name</th>
+            <th>Structure Glyph</th>
+            <th>Flight Icon Name</th>
+            <th>Flight Glyph></th>
           </tr>
         </thead>
         <tbody>
           {{#each types as |type|}}
             <tr>
               <td>
-                <h5>{{humanize type}}</h5>
+                {{type}}
               </td>
               <td>
-                <Icon @glyph={{type}} @size={{size}} />
+                <Icon @name={{type}} @size={{size}} />
               </td>
+              {{#let (get structureIconMap type) as |flightIcon|}}
+                <td>
+                  {{#if flightIcon}}
+                    {{flightIcon}}
+                  {{else}}
+                    &mdash;
+                  {{/if}}
+                </td>
+                <td>
+                  {{#if flightIcon}}
+                    <Icon @name={{flightIcon}} @size={{size}} />
+                  {{else}}
+                    &mdash;
+                  {{/if}}
+                </td>
+              {{/let}}
             </tr>
           {{/each}}
         </tbody>
       </table>
+
+      <h5 class="title is-5 has-top-margin-l">
+        Local Icons with Flight Mappings
+      </h5>
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Local Icon Name</th>
+            <th>Glyph</th>
+            <th>Flight Icon Name</th>
+            <th>Flight Glyph</th>
+          </tr>
+        </thead>
+        <tbody>
+          {{#each-in localIconMap as |localIcon flightIcon|}}
+            <tr>
+              <td>
+                {{localIcon}}
+              </td>
+              <td>
+                <Icon @name={{localIcon}} @size={{size}} />
+              </td>
+              <td>
+                {{#if flightIcon}}
+                  {{flightIcon}}
+                {{else}}
+                  &mdash;
+                {{/if}}
+              </td>
+              <td>
+                {{#if flightIcon}}
+                  <Icon @name={{flightIcon}} @size={{size}} />
+                {{else}}
+                  &mdash;
+                {{/if}}
+              </td>
+            </tr>
+          {{/each-in}}
+        </tbody>
+      </table>
       `,
       context: {
         types: icons,
-        size: select('Size', ['s', 'm', 'l', 'xl', 'xxl'], 'm'),
+        structureIconMap,
+        localIconMap,
+        size: select('Size', ['16', '24'], '16'),
       },
     }),
     { notes }
diff --git a/ui/lib/core/stories/toolbar/toolbar-filters.md b/ui/lib/core/stories/toolbar/toolbar-filters.md
index 6f95cc3d1..5c8e8be4b 100644
--- a/ui/lib/core/stories/toolbar/toolbar-filters.md
+++ b/ui/lib/core/stories/toolbar/toolbar-filters.md
@@ -1,9 +1,10 @@
-<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in app/components/toolbar-filters.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-filters" to re-generate the content.-->
+<!--THIS FILE IS AUTO GENERATED. This file is generated from JSDoc comments in lib/core/addon/components/toolbar-filters.js. To make changes, first edit that file and run "yarn gen-story-md toolbar-filters" to re-generate the content.-->
 
 ## ToolbarFilters
 `ToolbarFilters` components are containers for Toolbar filters and toggles.
 It should only be used inside of `Toolbar`.
 
+**Params**
 **Example**
   
 ```js
@@ -11,7 +12,7 @@ It should only be used inside of `Toolbar`.
   <ToolbarFilters>
     <div class="control has-icons-left">
       <input class="filter input" placeholder="Filter keys" type="text">
-      <Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
+      <Icon @name="search" @size="24" class="search-icon has-text-grey-light" />
     </div>
   </ToolbarFilters>
 </Toolbar>
@@ -20,6 +21,6 @@ It should only be used inside of `Toolbar`.
 **See**
 
 - [Uses of ToolbarFilters](https://github.com/hashicorp/vault/search?l=Handlebars&q=ToolbarFilters+OR+toolbar-filters)
-- [ToolbarFilters Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/toolbar-filters.js)
+- [ToolbarFilters Source Code](https://github.com/hashicorp/vault/blob/master/ui/lib/core/addon/components/toolbar-filters.js)
 
 ---
diff --git a/ui/lib/core/stories/toolbar/toolbar-filters.stories.js b/ui/lib/core/stories/toolbar/toolbar-filters.stories.js
index a790bd6b1..f9165161c 100644
--- a/ui/lib/core/stories/toolbar/toolbar-filters.stories.js
+++ b/ui/lib/core/stories/toolbar/toolbar-filters.stories.js
@@ -15,7 +15,7 @@ storiesOf('Toolbar', module)
           <ToolbarFilters>
             <div class="control has-icons-left">
               <input class="filter input" placeholder="Filter keys" type="text">
-              <Icon @glyph="search" @size="l" class="search-icon has-text-grey-light" />
+              <Icon @name="search" class="search-icon has-text-grey-light" />
             </div>
             <div class="toolbar-separator"/>
             <div class="control">
diff --git a/ui/lib/core/stories/toolbar/toolbar.stories.js b/ui/lib/core/stories/toolbar/toolbar.stories.js
index 18bdc7299..72ef73462 100644
--- a/ui/lib/core/stories/toolbar/toolbar.stories.js
+++ b/ui/lib/core/stories/toolbar/toolbar.stories.js
@@ -17,7 +17,7 @@ storiesOf('Toolbar', module)
           <ToolbarFilters>
             <div class="control has-icons-left">
               <input class="filter input" placeholder="Filter keys" type="text">
-              <Icon @glyph="search" class="search-icon has-text-grey-light hs-icon-l" />
+              <Icon @name="search" class="search-icon has-text-grey-light hs-icon-l" />
             </div>
           </ToolbarFilters>
           <ToolbarActions>
diff --git a/ui/lib/kmip/addon/templates/components/header-scope.hbs b/ui/lib/kmip/addon/templates/components/header-scope.hbs
index 24191dc92..4261ffdc1 100644
--- a/ui/lib/kmip/addon/templates/components/header-scope.hbs
+++ b/ui/lib/kmip/addon/templates/components/header-scope.hbs
@@ -5,8 +5,8 @@
   <p.levelLeft>
     <h1 class="title is-3">
       <Icon
-        @glyph="secrets"
-        @size="xl"
+        @name="secrets"
+        @size="24"
         class="has-text-grey-light"
       />
       {{this.secretMountPath.currentPath}}
diff --git a/ui/lib/kmip/addon/templates/components/operation-field-display.hbs b/ui/lib/kmip/addon/templates/components/operation-field-display.hbs
index b41f2d074..735b52182 100644
--- a/ui/lib/kmip/addon/templates/components/operation-field-display.hbs
+++ b/ui/lib/kmip/addon/templates/components/operation-field-display.hbs
@@ -12,7 +12,7 @@
           <Icon
             aria-hidden="true"
             class={{compute (action "iconClass") model field}}
-            @glyph={{compute (action "iconGlyph") model field}}
+            @name={{compute (action "iconGlyph") model field}}
             /> {{field.options.label}}
           <br />
         {{/each}}
diff --git a/ui/lib/kmip/addon/templates/configure.hbs b/ui/lib/kmip/addon/templates/configure.hbs
index 304e72430..49c8ffa81 100644
--- a/ui/lib/kmip/addon/templates/configure.hbs
+++ b/ui/lib/kmip/addon/templates/configure.hbs
@@ -5,8 +5,8 @@
     <p.levelLeft>
       <h1 class="title is-3">
         <Icon
-          @glyph="secrets"
-          @size="xl"
+          @name="secrets"
+          @size="24"
           class="has-text-grey-light"
         />
         Configure KMIP secrets engine
diff --git a/ui/lib/kmip/addon/templates/credentials/index.hbs b/ui/lib/kmip/addon/templates/credentials/index.hbs
index 83cc564ce..4ef1b3b02 100644
--- a/ui/lib/kmip/addon/templates/credentials/index.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/index.hbs
@@ -52,7 +52,7 @@
   {{else if list.item}}
   <ListItem @linkPrefix={{this.mountPoint}} @linkParams={{array "credentials.show" this.scope this.role list.item.id}} as |Item|>
       <Item.content>
-        <Icon @glyph="pki" class="has-text-grey-light" @size="l" />{{list.item.id}}
+        <Icon @name="file-text" class="has-text-grey-light" />{{list.item.id}}
       </Item.content>
       <Item.menu as |m|>
         <li class="action">
diff --git a/ui/lib/kmip/addon/templates/scope/roles.hbs b/ui/lib/kmip/addon/templates/scope/roles.hbs
index 7c96a9514..e67cdc987 100644
--- a/ui/lib/kmip/addon/templates/scope/roles.hbs
+++ b/ui/lib/kmip/addon/templates/scope/roles.hbs
@@ -62,7 +62,7 @@
   {{else if list.item}}
     <ListItem @linkPrefix={{this.mountPoint}} @linkParams={{array "credentials" this.scope list.item.id}} as |Item|>
       <Item.content>
-        <Icon @glyph="user-plain" class="has-text-grey-light" @size="l" />{{list.item.id}}
+        <Icon @name="user" class="has-text-grey-light" />{{list.item.id}}
       </Item.content>
       <Item.menu as |m|>
         <li class="action">
diff --git a/ui/lib/kmip/addon/templates/scopes/index.hbs b/ui/lib/kmip/addon/templates/scopes/index.hbs
index d3ad6afff..15b03f571 100644
--- a/ui/lib/kmip/addon/templates/scopes/index.hbs
+++ b/ui/lib/kmip/addon/templates/scopes/index.hbs
@@ -52,7 +52,7 @@
     {{else if list.item}}
     <ListItem @linkPrefix={{this.mountPoint}} @linkParams={{array "scope.roles" list.item.id}} as |Item|>
         <Item.content>
-          <Icon @glyph="folder-outline" class="has-text-grey-light" @size="l" />{{list.item.id}}
+          <Icon @name="folder" class="has-text-grey-light" />{{list.item.id}}
         </Item.content>
         <Item.menu as |m|>
           <li class="action">
diff --git a/ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs b/ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs
index 4a53706d5..4a4f340aa 100644
--- a/ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs
+++ b/ui/lib/open-api-explorer/addon/templates/components/swagger-ui.hbs
@@ -2,9 +2,8 @@
   <p.levelLeft>
     <h1 class="title is-3">
       <Icon
-        @glyph="code"
-        @size="l"
-        class="has-text-grey-light"
+        @name="code"
+				class="has-text-grey-light"
        />
       Vault API explorer
     </h1>
@@ -23,9 +22,8 @@
           data-test-filter-input
 				/>
 				<Icon
-          @glyph="search"
-				  @size="l"
-          class="search-icon has-text-grey-light"
+          @name="search"
+					class="search-icon has-text-grey-light"
         />
 			</p>
 		</div>
diff --git a/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs b/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs
index 15ddfe8f7..80f1709b7 100644
--- a/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs
+++ b/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs
@@ -9,10 +9,10 @@
   >
     <div class="radio-card-row">
       <Icon
-        @glyph="file-fill"
-        @size="xlm"
+        @name="file-text"
+        @size="24"
         class="radio-card-icon"
-       />
+      />
       <div class="radio-card-message">
         <h5 class="radio-card-message-title">
           Include everything
@@ -43,10 +43,10 @@
   >
     <div class="radio-card-row">
       <Icon
-        @glyph="file-success"
-        @size="xlm"
+        @name="file-check"
+        @size="24"
         class="radio-card-icon"
-       />
+      />
       <div class="radio-card-message">
         <h5 class="radio-card-message-title">
           Allow
@@ -77,8 +77,8 @@
   >
     <div class="radio-card-row">
       <Icon
-        @glyph="file-error"
-        @size="xlm"
+        @name="file-x"
+        @size="24"
         class="radio-card-icon"
        />
       <div class="radio-card-message">
diff --git a/ui/lib/replication/addon/templates/components/replication-primary-card.hbs b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
index 413df111d..94e48914d 100644
--- a/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
@@ -14,7 +14,7 @@
         unknown
       {{/if}}
       {{#if (and glyph (not hasError))}}
-        <Icon @glyph={{glyph}} class="has-text-success" data-test-icon />
+        <Icon @name={{glyph}} class="has-text-success" data-test-cluster-state-icon />
       {{/if}}
     </h3>
   </div>
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index 1a4ae7b05..2bb5bf912 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -36,7 +36,7 @@
       {{#if initialReplicationMode}}
         {{#if (eq initialReplicationMode 'dr')}}
           <h3 class="title is-flex-center is-5 is-marginless">
-            <Icon @size="xl" aria-hidden="true" @glyph="replication" />
+            <Icon @size="24" @name="replication-direct" />
             Disaster Recovery (DR) Replication
           </h3>
           <p class="help has-text-grey-dark">
@@ -44,7 +44,7 @@
           </p>
         {{else if (eq initialReplicationMode 'performance')}}
           <h3 class="title is-flex-center is-5 is-marginless">
-            <Icon @size="xl" aria-hidden="true" @glyph="perf-replication" />
+            <Icon @size="24" @name="replication-perf" />
             Performance Replication
           </h3>
           {{#unless (has-feature "Performance Replication")}}
@@ -70,7 +70,7 @@
             <label for="dr" class="box-label is-column {{if (eq replicationMode 'dr') 'is-selected'}}">
               <div>
                 <h3 class="box-label-header title is-6">
-                  <Icon @size="xl" aria-hidden="true" @glyph="replication" />
+                  <Icon @size="24" @name="replication-direct" />
                   Disaster Recovery (DR)
                 </h3>
                 <p class="help has-text-grey-dark">
@@ -93,7 +93,7 @@
               class="box-label is-column {{if (eq replicationMode 'performance') 'is-selected'}}">
               <div>
                 <h3 class="box-label-header title is-6">
-                  <Icon @size="xl" aria-hidden="true" @glyph="perf-replication" />
+                  <Icon @size="24" @name="replication-perf" />
                   Performance
                 </h3>
                 {{#if (not (has-feature "Performance Replication"))}}
@@ -286,7 +286,7 @@
   {{else}}
     <div class="box is-sideless is-fullwidth is-marginless">
       <h3 class="title is-flex-center is-5 is-marginless">
-        <Icon @size="xl" aria-hidden="true" @glyph="replication" />
+        <Icon @size="24" @name="replication-direct" />
         Disaster Recovery (DR)
       </h3>
       {{#if cluster.dr.replicationEnabled}}
@@ -316,7 +316,7 @@
       {{#unless (and submit.isRunning (eq cluster.dr.mode "bootstrapping"))}}
       <div class="box is-bottomless is-fullwidth is-marginless">
         <h3 class="title is-flex-center is-5 is-marginless">
-          <Icon @size="xl" aria-hidden="true" @glyph="perf-replication" />
+          <Icon @size="24" @name="replication-perf" />
           Performance
         </h3>
           {{#link-to
diff --git a/ui/package.json b/ui/package.json
index 768d300e9..08d4e1ecd 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -47,12 +47,14 @@
     "@ember/render-modifiers": "^1.0.2",
     "@glimmer/component": "^1.0.2",
     "@glimmer/tracking": "^1.0.2",
+    "@hashicorp/ember-flight-icons": "^1.1.0",
     "@hashicorp/structure-icons": "^1.3.0",
     "@icholy/duration": "^5.1.0",
     "@storybook/cli": "^6.3.10",
     "@storybook/ember-cli-storybook": "^0.4.0",
     "autosize": "^4.0.0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-inline-json-import": "^0.3.2",
     "base64-js": "^1.3.1",
     "broccoli-asset-rev": "^3.0.0",
     "broccoli-sri-hash": "meirish/broccoli-sri-hash#rooturl",
@@ -190,7 +192,8 @@
     "yargs-parser": "^13.1.2",
     "underscore": "^1.12.1",
     "trim": "^0.0.3",
-    "xmlhttprequest-ssl": "^1.6.2"
+    "xmlhttprequest-ssl": "^1.6.2",
+    "@hashicorp/ember-flight-icons": "^1.1.0"
   },
   "engines": {
     "node": "14.*"
diff --git a/ui/scripts/codemods/icon-transform.js b/ui/scripts/codemods/icon-transform.js
new file mode 100644
index 000000000..512fdabb3
--- /dev/null
+++ b/ui/scripts/codemods/icon-transform.js
@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+/* eslint-env node */
+/**
+ * Codemod to transform Icon component to new API to accomodate FlightIcon
+ * example execution from ui directory -> npx ember-template-recast ./templates -t ./scripts/codemods/icon-transform.js
+ * above will run transform on all files in templates directory
+ */
+
+module.exports = env => {
+  const {
+    syntax: { builders },
+  } = env;
+  const hsSizes = ['s', 'm', 'l', 'xlm', 'xl', 'xxl'];
+
+  // find attribute by name
+  const findAttribute = (attrs, name) => {
+    for (let i = 0; i < attrs.length; i++) {
+      if (attrs[i].name === name) {
+        return [attrs[i], i, attrs[i].value.chars];
+      }
+    }
+    return [];
+  };
+
+  // possibly a bug with ember-template-recast for multi line components with attributes on their own lines
+  // when removing an attribute the one on the line below will jump to the same line as the previous one
+  // this does not happen when removing the first attribute -- doing so may add unnecessary quotes to the first shifted attribute
+  // example: class="{{foo}}" -> class=""{{foo}}""
+  const preserveFormatting = (attributes, removeIndex) => {
+    if (removeIndex > 0) {
+      // shift the location of the attributes that appear after the one being removed to preserve formatting
+      for (let i = attributes.length - 1; i > removeIndex; i--) {
+        attributes[i].loc = attributes[i - 1].loc;
+      }
+    }
+  };
+
+  // transform structure icon size letter to flight icon supported size
+  const transformSize = (attributes, attrName) => {
+    const [attr, attrIndex, value] = findAttribute(attributes, attrName);
+
+    if (hsSizes.includes(value)) {
+      if (['s', 'm', 'l'].includes(value)) {
+        // before removing attribute set the location of the remaining attributes
+        preserveFormatting(attributes, attrIndex);
+        // since 16 is the default in the component we can remove the attribute
+        attributes.splice(attrIndex, 1);
+      } else {
+        attr.value = builders.text('24');
+        // rename attribute
+        if (attrName === '@sizeClass') {
+          attr.name = '@size';
+        }
+      }
+    }
+  };
+
+  return {
+    ElementNode(node) {
+      if (node.tag === 'Icon') {
+        const { attributes } = node;
+        // the inital refactor of the component introduced a sizeClass attribute
+        // this can now be mapped to size and removed
+        transformSize(attributes, '@sizeClass');
+        // check for old component instances that may still have a letter for size value
+        transformSize(attributes, '@size');
+      }
+    },
+  };
+};
diff --git a/ui/tests/integration/components/chevron-test.js b/ui/tests/integration/components/chevron-test.js
index 6b42a46a8..2934e96f4 100644
--- a/ui/tests/integration/components/chevron-test.js
+++ b/ui/tests/integration/components/chevron-test.js
@@ -12,13 +12,13 @@ module('Integration | Component | chevron', function(hooks) {
     // Handle any actions with this.set('myAction', function(val) { ... });
 
     await render(hbs`<Chevron />`);
-    assert.dom('.hs-icon').exists('renders');
+    assert.dom('.flight-icon').exists('renders');
 
     await render(hbs`<Chevron @isButton={{true}} />`);
-    assert.dom('.hs-icon').hasClass('hs-icon-button-right', 'renders');
+    assert.dom('.flight-icon').hasClass('hs-icon-button-right', 'renders');
 
     await render(hbs`<Chevron @direction='left' @isButton={{true}} />`);
-    assert.dom('.hs-icon').doesNotHaveClass('hs-icon-button-right', 'renders');
+    assert.dom('.flight-icon').doesNotHaveClass('hs-icon-button-right', 'renders');
 
     let promise = waitForError();
     render(hbs`<Chevron @direction='lol' />`);
diff --git a/ui/tests/integration/components/icon-test.js b/ui/tests/integration/components/icon-test.js
index 837e0bfdd..aad30ae0a 100644
--- a/ui/tests/integration/components/icon-test.js
+++ b/ui/tests/integration/components/icon-test.js
@@ -11,8 +11,9 @@ module('Integration | Component | icon', function(hooks) {
     await render(hbs`<Icon class="i-con" />`);
     assert.dom('.i-con').exists('renders');
 
-    await render(hbs`<Icon @glyph="vault-logo" />`);
+    await render(hbs`<Icon @name="vault-logo" />`);
     assert.dom('.vault-logo').exists('inlines the SVG');
+    assert.dom('.hs-icon').hasClass('hs-icon-l', 'Default hs class applied');
 
     await render(hbs`<Icon class="ah" aria-hidden="true" />`);
     assert.dom('.ah').hasAttribute('aria-hidden', 'true', 'renders aria-hidden');
@@ -20,12 +21,36 @@ module('Integration | Component | icon', function(hooks) {
     await render(hbs`<Icon class="al" aria-label="Testing" />`);
     assert.dom('.al').hasAttribute('aria-label', 'Testing', 'renders aria-label');
 
-    await render(hbs`<Icon @glyph="vault-logo" @size="s"/>`);
-    assert.dom('.hs-icon').hasClass('hs-icon-s', 'adds the size class');
+    await render(hbs`<Icon @name="vault-logo" @size="24"/>`);
+    assert.dom('.hs-icon').hasClass('hs-icon-xl', 'adds the larger size class');
 
     let promise = waitForError();
-    render(hbs`<Icon @glyph="vault-logo" @size="no"/>`);
+    render(hbs`<Icon @name="vault-logo" @size="12"/>`);
     let err = await promise;
-    assert.ok(err.message.includes('The size property of'), "errors when passed a size that's not allowed");
+    assert.equal(
+      err.message,
+      'Assertion Failed: Icon component size argument must be either "16" or "24"',
+      'Error is thrown when supported size is not provided'
+    );
+  });
+
+  test('it should render FlightIcon', async function(assert) {
+    assert.expect(4);
+
+    await render(hbs`<Icon @name="x" />`);
+    assert.dom('.flight-icon').exists('FlightIcon renders when provided name of icon in set');
+    assert.dom('.flight-icon').hasAttribute('width', '16', 'Default size applied svg');
+
+    await render(hbs`<Icon @name="x" @size="24" />`);
+    assert.dom('.flight-icon').hasAttribute('width', '24', 'Size applied to svg');
+
+    const promise = waitForError();
+    render(hbs`<Icon @name="x" @size="12"/>`);
+    const err = await promise;
+    assert.equal(
+      err.message,
+      'Assertion Failed: Icon component size argument must be either "16" or "24"',
+      'Error is thrown when supported size is not provided'
+    );
   });
 });
diff --git a/ui/tests/integration/components/info-table-row-test.js b/ui/tests/integration/components/info-table-row-test.js
index d59761720..b7c682da2 100644
--- a/ui/tests/integration/components/info-table-row-test.js
+++ b/ui/tests/integration/components/info-table-row-test.js
@@ -87,7 +87,9 @@ module('Integration | Component | InfoTableRow', function(hooks) {
     await triggerEvent('[data-test-value-div="test label"] .ember-basic-dropdown-trigger', 'mouseenter');
     await settled();
     assert.dom('[data-test-tooltip-copy]').hasAttribute('disabled', '', 'Tooltip copy button is disabled');
-    assert.dom('[data-test-tooltip-copy]').doesNotHaveClass('has-pointer', 'Pointer class not applied when disabled');
+    assert
+      .dom('[data-test-tooltip-copy]')
+      .doesNotHaveClass('has-pointer', 'Pointer class not applied when disabled');
     this.set('isCopyable', true);
     assert.dom('[data-test-tooltip-copy]').doesNotHaveAttribute('disabled', 'Tooltip copy button is enabled');
     assert.dom('[data-test-tooltip-copy]').hasClass('has-pointer', 'Pointer class applied to copy button');
@@ -127,17 +129,17 @@ module('Integration | Component | InfoTableRow', function(hooks) {
       @defaultShown={{default}}
     />`);
 
-    assert.dom('div.column span').hasClass('hs-icon-s', 'Renders a dash (-) for the label');
+    assert.dom('div.column.is-one-quarter .flight-icon').exists('Renders a dash (-) for the label');
 
     this.set('value', '');
     this.set('label', LABEL);
-    assert.dom('div.column.is-flex span').hasClass('hs-icon-s', 'Renders a dash (-) for empty string value');
+    assert.dom('div.column.is-flex .flight-icon').exists('Renders a dash (-) for empty string value');
 
     this.set('value', null);
-    assert.dom('div.column.is-flex span').hasClass('hs-icon-s', 'Renders a dash (-) for null value');
+    assert.dom('div.column.is-flex .flight-icon').exists('Renders a dash (-) for null value');
 
     this.set('value', undefined);
-    assert.dom('div.column.is-flex span').hasClass('hs-icon-s', 'Renders a dash (-) for undefined value');
+    assert.dom('div.column.is-flex .flight-icon').exists('Renders a dash (-) for undefined value');
 
     this.set('default', DEFAULT);
     assert.dom('[data-test-value-div]').hasText(DEFAULT, 'Renders default text if value is empty');
@@ -145,7 +147,7 @@ module('Integration | Component | InfoTableRow', function(hooks) {
     this.set('value', '');
     this.set('label', '');
     this.set('default', '');
-    let dashCount = document.querySelectorAll('.hs-icon-s').length;
+    let dashCount = document.querySelectorAll('.flight-icon').length;
     assert.equal(dashCount, 2, 'Renders dash (-) when both label and value do not exist (and no defaults)');
   });
 
diff --git a/ui/tests/integration/components/replication-primary-card-test.js b/ui/tests/integration/components/replication-primary-card-test.js
index 2345657b9..8ae83da34 100644
--- a/ui/tests/integration/components/replication-primary-card-test.js
+++ b/ui/tests/integration/components/replication-primary-card-test.js
@@ -45,10 +45,10 @@ module('Integration | Component | replication-primary-card', function(hooks) {
 
       if (CLUSTER_STATES[state].isOk) {
         assert.dom('[data-test-hasError]').doesNotExist();
-        assert.dom('[data-test-icon]').exists('shows an icon if state is ok');
+        assert.dom('[data-test-cluster-state-icon]').exists('shows an icon if state is ok');
       } else {
         assert.dom('[data-test-hasError]').exists('shows an error if the cluster state is not ok');
-        assert.dom('[data-test-icon]').doesNotExist('does not show an icon if state is not ok');
+        assert.dom('[data-test-cluster-state-icon]').doesNotExist('does not show an icon if state is not ok');
       }
     });
   });
diff --git a/ui/tests/integration/components/toolbar-link-test.js b/ui/tests/integration/components/toolbar-link-test.js
index 5d7dd4a24..b61bede68 100644
--- a/ui/tests/integration/components/toolbar-link-test.js
+++ b/ui/tests/integration/components/toolbar-link-test.js
@@ -29,7 +29,7 @@ module('Integration | Component | toolbar-link', function(hooks) {
 
     assert.dom('[data-test-icon="chevron-right"]').exists('Default chevron right icon renders');
     this.set('type', 'add');
-    assert.dom('[data-test-icon="plus-plain"]').exists('Icon can be overriden to show plus sign');
+    assert.dom('[data-test-icon="plus"]').exists('Icon can be overriden to show plus sign');
   });
 
   test('it should disable and show tooltip if provided', async function(assert) {
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 4b537a4b9..dab9d9ca5 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -2496,6 +2496,20 @@
   resolved "https://registry.yarnpkg.com/@handlebars/parser/-/parser-1.1.0.tgz#d6dbc7574774b238114582410e8fee0dc3532bdf"
   integrity sha512-rR7tJoSwJ2eooOpYGxGGW95sLq6GXUaS1UtWvN7pei6n2/okYvCGld9vsUTvkl2migxbkszsycwtMf/GEc1k1A==
 
+"@hashicorp/ember-flight-icons@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@hashicorp/ember-flight-icons/-/ember-flight-icons-1.1.0.tgz#0305cce3e6538d20c1433a900cb448f9eefcf9a7"
+  integrity sha512-qJCpGYmsXqsjMZNA+AJO6xhCWM0lk2uRGrDhJX7qzZ3OjLvp7eFCy/jrMVYYRSt1DT0X/etc2Ta4AbxmkWzduA==
+  dependencies:
+    "@hashicorp/flight-icons" "^1.2.0"
+    ember-cli-babel "^7.26.6"
+    ember-cli-htmlbars "^5.7.1"
+
+"@hashicorp/flight-icons@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@hashicorp/flight-icons/-/flight-icons-1.2.0.tgz#b3b61a24f7a7921d20ce4c3c49a2f63956f05f80"
+  integrity sha512-gMsPGbDXSBWe4v7sFjG+ZlQdc8ipNLi5w98muaKU5tUNG027b5XNy5chkiT1/gsygi5ZlKXU0klgC0JHZ44B8A==
+
 "@hashicorp/structure-icons@^1.3.0":
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/@hashicorp/structure-icons/-/structure-icons-1.8.1.tgz#d29945df2b41dcb317b141e51a26bd4be796a164"
@@ -4985,6 +4999,13 @@ babel-plugin-htmlbars-inline-precompile@^5.0.0:
     parse-static-imports "^1.1.0"
     string.prototype.matchall "^4.0.4"
 
+babel-plugin-inline-json-import@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-inline-json-import/-/babel-plugin-inline-json-import-0.3.2.tgz#fdec1a59364d632895d421aec4c9435ccbbcadd3"
+  integrity sha512-QNNJx08KjmMT25Cw7rAPQ6dlREDPiZGDyApHL8KQ9vrQHbrr4PTi7W8g1tMMZPz0jEMd39nx/eH7xjnDNxq5sA==
+  dependencies:
+    decache "^4.5.1"
+
 babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
@@ -6823,6 +6844,11 @@ call-me-maybe@^1.0.1:
   resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
   integrity sha1-JtII6onje1y95gJQoV8DHBak1ms=
 
+callsite@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+  integrity sha1-KAOY5dZkvXQDi28JBRU+borxvCA=
+
 callsites@^3.0.0, callsites@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -8347,6 +8373,13 @@ debug@~4.1.0:
   dependencies:
     ms "^2.1.1"
 
+decache@^4.5.1:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/decache/-/decache-4.6.0.tgz#87026bc6e696759e82d57a3841c4e251a30356e8"
+  integrity sha512-PppOuLiz+DFeaUvFXEYZjLxAkKiMYH/do/b/MxpDe/8AgKBi5GhZxridoVIbBq72GDbL36e4p0Ce2jTGUwwU+w==
+  dependencies:
+    callsite "^1.0.0"
+
 decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -9028,7 +9061,7 @@ ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.10.0, ember-cli-babel@^6.16.0,
     ember-cli-version-checker "^2.1.2"
     semver "^5.5.0"
 
-ember-cli-babel@^7.10.0:
+ember-cli-babel@^7.10.0, ember-cli-babel@^7.26.6:
   version "7.26.6"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.26.6.tgz#322fbbd3baad9dd99e3276ff05bc6faef5e54b39"
   integrity sha512-040svtfj2RC35j/WMwdWJFusZaXmNoytLAMyBDGLMSlRvznudTxZjGlPV6UupmtTBApy58cEF8Fq4a+COWoEmQ==