diff --git a/ui/packages/consul-ui/app/styles/base/icons/README.mdx b/ui/packages/consul-ui/app/styles/base/icons/README.mdx
index fe79e18004..4193e40fc3 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/README.mdx
+++ b/ui/packages/consul-ui/app/styles/base/icons/README.mdx
@@ -1,5 +1,12 @@
 # Iconography
 
+_We recently started adopting the [@hashicorp/ember-flight-icons](https://flight-hashicorp.vercel.app/) package, in particular the
+usage of the `<FlightIcon>` component to render icons. This enables us to use all the
+icons listed [on the flight icons page](https://flight-hashicorp.vercel.app/). If an icon is not present in the flight-icons package,
+you may resort to the techniques listed below._
+
+---
+
 All our iconography uses native CSS properties for adding iconography from The
 Outside. You can also add icons using the same properties within `style=""`
 attributes, but you should think twice before adding decorative content into
@@ -29,14 +36,14 @@ selectors.
 
 ```css
 .selector::before {
-  --icon-name: icon-aws-color;
+  --icon-name: icon-alert-circle;
   content: '';
 }
 ```
 
 ```css
 .selector::after {
-  --icon-name: icon-aws;
+  --icon-name: icon-alert-circle;
   --icon-color: rgb(var(---white));
   content: '';
 }
@@ -48,7 +55,7 @@ icons in HTML using these CSS properties.
 ```hbs preview-template
 <h2
   style={{style-map
-    (array '--icon-name-start' 'icon-consul')
+    (array '--icon-name-start' 'icon-alert-circle')
     (array '--icon-color-start' 'rgb(var(--tone-strawberry-500))')
     (array '--icon-name-end' 'icon-vault')
     (array '--icon-color-end' 'var(--color-vault-500)')
@@ -64,9 +71,7 @@ following. Under different circumstances this would give us an option that works
 
 ```hbs
 <span
-  class={{class-map
-    'visually-hidden'
-  }}
+  class={{class-map 'visually-hidden'}}
   style={{style-map
     (array '--icon-name-start' @name)
     (array '--icon-color' @color)
@@ -75,11 +80,9 @@ following. Under different circumstances this would give us an option that works
   ...attributes
 >{{yield}}</span>
 
-
-<Icon @name="icon-name" @color="#FF0000" @size="icon-300" />
+<Icon @name='icon-name' @color='#FF0000' @size='icon-300' />
 ```
 
-
 ## Deprecated
 
 Please prefer our Constructable `%placeholder` styles over singular CSS
@@ -111,65 +114,56 @@ use `-mask`, use `-icon` instead:
 
 ```css
 .selector::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
+  @extend %with-alert-circle-icon, %as-pseudo;
 }
 ```
 
 ```hbs preview-template
 <figure>
-    <select
-      onchange={{action (mut this.type) value="target.value"}}
-    >
-      <option>colored</option>
-      <option>monochrome</option>
-    </select>
-    <select
-      onchange={{action (mut this.theme) value="target.value"}}
-    >
-      <option>light</option>
-      <option>dark</option>
-    </select>
-    <input
-      oninput={{action (mut this.size) value="target.value"}}
-      type="range" min="100" max="900" step="100"
-    />
-    {{this.size}}
+  <select onchange={{action (mut this.type) value='target.value'}}>
+    <option>colored</option>
+    <option>monochrome</option>
+  </select>
+  <select onchange={{action (mut this.theme) value='target.value'}}>
+    <option>light</option>
+    <option>dark</option>
+  </select>
+  <input
+    oninput={{action (mut this.size) value='target.value'}}
+    type='range'
+    min='100'
+    max='900'
+    step='100'
+  />
+  {{this.size}}
 </figure>
 <ul
-  {{css-props (set this 'icons')
-    prefix='icon-'
-  }}
-  class={{class-map
-    (concat 'theme-' (or this.theme 'light'))
-  }}
+  {{css-props (set this 'icons') prefix='icon-'}}
+  class={{class-map (concat 'theme-' (or this.theme 'light'))}}
   style={{style-map
     (array '--icon-color' (if (eq this.type 'monochrome') 'rgb(var(--black))'))
     (array '--icon-size' (concat 'icon-' (or this.size '500')))
     (array '--icon-resolution' (if (gt this.size 500) '.5' '1'))
   }}
 >
-{{#each-in this.icons as |prop value|}}
-{{#if (and
-    (not (includes prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
-    (not (string-includes prop '-24'))
-  )
-}}
-{{#let
-  (string-replace (string-replace prop '-16' '') '--' '')
-as |name|}}
-  <li>
-    <figure
-      {{with-copyable (concat '--icon-name: ' name ';content: "";')}}
-      style={{style-map
-        (array '--icon-name-start' name)
-      }}
-    >
-      <figcaption>{{name}}</figcaption>
-    </figure>
-  </li>
-{{/let}}
-{{/if}}
-{{/each-in}}
+  {{#each-in this.icons as |prop value|}}
+    {{#if
+      (and
+        (not (includes prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
+        (not (string-includes prop '-24'))
+      )
+    }}
+      {{#let (string-replace (string-replace prop '-16' '') '--' '') as |name|}}
+        <li>
+          <figure
+            {{with-copyable (concat '--icon-name: ' name ';content: "";')}}
+            style={{style-map (array '--icon-name-start' name)}}
+          >
+            <figcaption>{{name}}</figcaption>
+          </figure>
+        </li>
+      {{/let}}
+    {{/if}}
+  {{/each-in}}
 </ul>
 ```
-