Merge pull request #720 from hashicorp/chore-flight-icons-npm

Consume Flight icons from NPM

addons/core/addon/components/doc-link/index.hbs

@@ -4,5 +4,5 @@
   target="_blank"
   rel="noreferrer noopener"
   title={{t "actions.get-topic-help"}}>
-  <Rose::Icon @name="help-circle-outline" @size={{@iconSize}} />
+  <Rose::Icon @name="flight-icons/help-24" @size={{@iconSize}} />
 </a>

addons/core/addon/components/error/message/index.js

@@ -27,13 +27,12 @@ export default class ErrorMessageComponent extends MessageComponent {
   @computed('args.status')
   get icon() {
     switch (this.args.status) {
+      case '404':
+        return 'flight-icons/help-16';
       case '401':
       case '403':
-        return 'disabled';
-      case '404':
-        return 'help-circle-outline';
       default:
-        return 'alert-circle-outline';
+        return 'flight-icons/alert-circle-16';
     }
   }
 

addons/core/index.js

@@ -1,4 +1,41 @@
 'use strict';
+
+var path = require('path');
+
 module.exports = {
   name: require('./package').name,
+
+  included(app) {
+    this._super.included.apply(this, arguments);
+    this.includePublic(app);
+    this.setupSVGO(app);
+  },
+
+  /**
+   * Finds the public folder and includes it into the ember-inline-svg addon.
+   */
+  includePublic(app) {
+    const publicPath = path.resolve('public');
+    const dummyPublicPath = path.resolve('tests/dummy/public');
+
+    app.options.svg = app.options.svg || {};
+    app.options.svg.paths = app.options.svg.paths || [];
+
+    app.options.svg.paths.push(publicPath);
+    if (this.isDevelopingAddon()) app.options.svg.paths.push(dummyPublicPath);
+
+    this.addons.forEach((addon) => {
+      if (addon.name === 'ember-inline-svg') addon.included(app);
+    });
+  },
+
+  /**
+   * Adjust SVG optimizer defaults (used by ember-inline-svg).
+   */
+  setupSVGO(app) {
+    app.options.svg = app.options.svg || {};
+    app.options.svg.optimize = app.options.svg.optimize || {};
+    app.options.svg.optimize.plugins = app.options.svg.optimize.plugins || [];
+    app.options.svg.optimize.plugins.push({ removeViewBox: false });
+  },
 };

addons/core/public/app-icons/global.svg

@@ -1,3 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.97503 7.25H10.0232C9.83952 5.33678 9.13836 3.52559 7.99998 2.00183C6.85742 3.53084 6.15589 5.3466 5.97503 7.25ZM10.025 8.75C9.84413 10.6534 9.14259 12.4692 8.00003 13.9982C6.86166 12.4744 6.16049 10.6632 5.97679 8.75H10.025ZM11.5309 8.75H14.4572C14.1478 11.4433 12.1921 13.6359 9.62187 14.296C10.707 12.6405 11.3662 10.7347 11.5309 8.75ZM14.4572 7.25H11.5293C11.3619 5.25743 10.7034 3.35494 9.62165 1.70392C12.192 2.36401 14.1478 4.55661 14.4572 7.25ZM4.46913 7.25H1.5428C1.85224 4.55668 3.80789 2.36413 6.37814 1.70397C5.29298 3.35946 4.63378 5.2653 4.46913 7.25ZM4.47076 8.75H1.5428C1.85224 11.4434 3.808 13.636 6.37836 14.2961C5.29662 12.6451 4.63811 10.7426 4.47076 8.75ZM0 8C0 3.58172 3.58172 0 8 0L8.00195 3.05531e-06C12.4193 0.00105872 16 3.58237 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8Z" fill="currentColor"/>
+ <g transform="translate(0, 0)">
-</svg>
+  <path d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM6.1281 1.77359C3.76051 2.48438 1.96114 4.50867 1.57645 7L4.06861 7C4.28628 5.12647 4.99696 3.33655 6.1281 1.77359ZM9.8719 1.77359C11.003 3.33655 11.7137 5.12647 11.9314 7L14.4236 7C14.0389 4.50867 12.2395 2.48438 9.8719 1.77359ZM10.4196 7C10.1652 5.12363 9.33287 3.33469 8 1.8356C6.66712 3.33469 5.83478 5.12363 5.58044 7L10.4196 7ZM5.52655 8.5L10.4734 8.5C10.3086 10.5575 9.45081 12.5327 8 14.1644C6.54919 12.5327 5.6914 10.5575 5.52655 8.5ZM4.02241 8.5L1.51894 8.5C1.7257 11.2179 3.60398 13.4686 6.1281 14.2264C4.89671 12.5249 4.16361 10.5545 4.02241 8.5ZM9.8719 14.2264C11.1033 12.5249 11.8364 10.5545 11.9776 8.5L14.4811 8.5C14.2743 11.2179 12.396 13.4686 9.8719 14.2264Z" fill-rule="EVENODD"></path>
+ </g>
+</svg>

addons/core/public/app-icons/org.svg

@@ -1,3 +1,12 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15625 12.1875H5V16H0V0H12V5.125H15.5V16H12H10.5H7.15625V12.1875ZM10.5 14.5H8.65625V10.6875H3.5V14.5H1.5V1.5H10.5V5.125V14.5ZM12 14.5H14V6.625H12V14.5ZM3 3H4.88235V5H3V3ZM4.88235 7H3V9H4.88235V7ZM7 3H8.88235V5H7V3ZM8.88235 7H7V9H8.88235V7Z" fill="currentColor"/>
+ <g transform="translate(1, 1)">
-</svg>
+  <path d="M0 2.25C0 1.00736 1.00736 0 2.25 0L8.75 0C9.99264 0 11 1.00736 11 2.25L11 4.36218L13.0506 5.81469C13.6461 6.23651 14.0001 6.92096 14.0001 7.65074L14.0001 12.7501C14.0001 13.4404 13.4404 14.0001 12.7501 14.0001L10.2501 14.0001C10.0421 14.0001 9.85396 13.9154 9.71811 13.7788C9.5833 13.6432 9.5 13.4563 9.5 13.25L9.5 2.25C9.5 1.83579 9.16421 1.5 8.75 1.5L2.25 1.5C1.83579 1.5 1.5 1.83579 1.5 2.25L1.5 13.25C1.5 13.6642 1.16421 14 0.75 14C0.335786 14 0 13.6642 0 13.25L0 2.25ZM11 12.5001L11 6.20036L12.1836 7.03872C12.3821 7.17933 12.5001 7.40748 12.5001 7.65074L12.5001 12.5001L11 12.5001Z" fill-rule="EVENODD"></path>
+  <path d="M3.75005 9.5498C3.36345 9.5498 3.05005 9.8632 3.05005 10.2498L3.05005 13.2498C3.05005 13.6364 3.36345 13.9498 3.75005 13.9498C4.13665 13.9498 4.45005 13.6364 4.45005 13.2498L4.45005 10.9498L6.55005 10.9498L6.55005 13.2498C6.55005 13.6364 6.86345 13.9498 7.25005 13.9498C7.63665 13.9498 7.95005 13.6364 7.95005 13.2498L7.95005 10.2498C7.95005 9.8632 7.63665 9.5498 7.25005 9.5498L3.75005 9.5498Z" fill-rule="NONZERO"></path>
+  <path d="M3.25 3.75C3.25 3.33579 3.58579 3 4 3L4.25 3C4.66421 3 5 3.33579 5 3.75C5 4.16421 4.66421 4.5 4.25 4.5L4 4.5C3.58579 4.5 3.25 4.16421 3.25 3.75Z" fill-rule="NONZERO"></path>
+  <path d="M6.75 3C6.33579 3 6 3.33579 6 3.75C6 4.16421 6.33579 4.5 6.75 4.5L7 4.5C7.41421 4.5 7.75 4.16421 7.75 3.75C7.75 3.33579 7.41421 3 7 3L6.75 3Z" fill-rule="NONZERO"></path>
+  <path d="M3.25 5.75C3.25 5.33579 3.58579 5 4 5L4.25 5C4.66421 5 5 5.33579 5 5.75C5 6.16421 4.66421 6.5 4.25 6.5L4 6.5C3.58579 6.5 3.25 6.16421 3.25 5.75Z" fill-rule="NONZERO"></path>
+  <path d="M6.75 5C6.33579 5 6 5.33579 6 5.75C6 6.16421 6.33579 6.5 6.75 6.5L7 6.5C7.41421 6.5 7.75 6.16421 7.75 5.75C7.75 5.33579 7.41421 5 7 5L6.75 5Z" fill-rule="NONZERO"></path>
+  <path d="M3.25 7.75C3.25 7.33579 3.58579 7 4 7L4.25 7C4.66421 7 5 7.33579 5 7.75C5 8.16421 4.66421 8.5 4.25 8.5L4 8.5C3.58579 8.5 3.25 8.16421 3.25 7.75Z" fill-rule="NONZERO"></path>
+  <path d="M6.75 7C6.33579 7 6 7.33579 6 7.75C6 8.16421 6.33579 8.5 6.75 8.5L7 8.5C7.41421 8.5 7.75 8.16421 7.75 7.75C7.75 7.33579 7.41421 7 7 7L6.75 7Z" fill-rule="NONZERO"></path>
+ </g>
+</svg>

addons/core/public/app-icons/project.svg

@@ -1,3 +1,8 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 1.5H5.50461V5.63615H1.5V1.5ZM0 7.13615V0H7.00461V7.13615H0ZM1.5 10.3639H5.50461V14.5H1.5V10.3639ZM0 16V8.86386H7.00461V16H0ZM14.5 1.5H10.4954V5.63615H14.5V1.5ZM8.99536 0V7.13615H16V0H8.99536ZM10.4954 10.3639H14.5V14.5H10.4954V10.3639ZM8.99536 16V8.86386H16V16H8.99536Z" fill="currentColor"/>
+ <g transform="translate(1, 1)">
-</svg>
+  <path d="M1.25 0C0.559644 0 0 0.559644 0 1.25L0 4.75C0 5.44036 0.559644 6 1.25 6L4.75 6C5.44036 6 6 5.44036 6 4.75L6 1.25C6 0.559644 5.44036 0 4.75 0L1.25 0ZM1.5 4.5L1.5 1.5L4.5 1.5L4.5 4.5L1.5 4.5Z" fill-rule="EVENODD"></path>
+  <path d="M9.25 0C8.55964 0 8 0.559644 8 1.25L8 4.75C8 5.44036 8.55964 6 9.25 6L12.75 6C13.4404 6 14 5.44036 14 4.75L14 1.25C14 0.559644 13.4404 0 12.75 0L9.25 0ZM9.5 4.5L9.5 1.5L12.5 1.5L12.5 4.5L9.5 4.5Z" fill-rule="EVENODD"></path>
+  <path d="M8 9.25C8 8.55964 8.55964 8 9.25 8L12.75 8C13.4404 8 14 8.55964 14 9.25L14 12.75C14 13.4404 13.4404 14 12.75 14L9.25 14C8.55964 14 8 13.4404 8 12.75L8 9.25ZM9.5 9.5L9.5 12.5L12.5 12.5L12.5 9.5L9.5 9.5Z" fill-rule="EVENODD"></path>
+  <path d="M1.25 8C0.559644 8 0 8.55964 0 9.25L0 12.75C0 13.4404 0.559644 14 1.25 14L4.75 14C5.44036 14 6 13.4404 6 12.75L6 9.25C6 8.55964 5.44036 8 4.75 8L1.25 8ZM1.5 12.5L1.5 9.5L4.5 9.5L4.5 12.5L1.5 12.5Z" fill-rule="EVENODD"></path>
+ </g>
+</svg>

addons/rose/addon/components/rose/badge/index.stories.mdx

@@ -13,7 +13,7 @@ When style definition isn't supplied, a default style will be supplied.
 Styles: outline, dark, informational, informational-outline, success, success-outline, error, error-outline, warning, warning-outline, alert, alert-outline
 
 ```html
-<Rose::Badge @style="outline" @icon="user-organization">Badge</Rose::Badge>
+<Rose::Badge @style="outline" @icon="flight-icons/org-16">Badge</Rose::Badge>
 ```
 
 <Preview>
@@ -43,11 +43,9 @@ Styles: outline, dark, informational, informational-outline, success, success-ou
         'none'
       ),
       icon: select('icon', {
-          'user-organization': 'user-organization',
+          'flight-icons/org-16': 'flight-icons/org-16',
-          'partner': 'partner',
-          'gift-fill': 'gift-fill',
         },
-        'user-organization'
+        'flight-icons/org-16'
       ),
     }
   }}</Story>
@@ -58,7 +56,7 @@ Styles: outline, dark, informational, informational-outline, success, success-ou
     template: hbs`
     <Rose::Badge>default style</Rose::Badge>
     <Rose::Badge @style="outline">outline</Rose::Badge>
-    <Rose::Badge @icon="user-organization">default style with icon</Rose::Badge>
+    <Rose::Badge @icon="flight-icons/org-16">default style with icon</Rose::Badge>
     <Rose::Badge @style="dark">dark</Rose::Badge>
     <Rose::Badge @style="informational">informational</Rose::Badge>
     <Rose::Badge @style="informational-outline">informational-outline</Rose::Badge>

addons/rose/addon/components/rose/button/index.stories.mdx

@@ -12,7 +12,7 @@ to trigger actions or to submit forms.  Avoid using buttons as simple links to
 other routes.  For accessibility, use links instead.
 
 ```htmlbars
-<Rose::Button @style="primary" @iconRight="chevron-right">
+<Rose::Button @style="primary" @iconRight="flight-icons/entry-point-16">
   Action
 </Rose::Button>
 ```
@@ -49,23 +49,18 @@ other routes.  For accessibility, use links instead.
       iconLeft: select(
         'iconLeft',
         {
-          'check-circle-outline': 'check-circle-outline',
+          'flight-icons/check-circle-16': 'flight-icons/check-circle-16',
-          'copy-action': 'copy-action',
+          'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-          'unfold-more': 'unfold-more',
-          'unfold-less': 'unfold-less',
         },
-        'check-circle-outline'
+        'flight-icons/check-circle-16'
       ),
       iconRight: select(
         'iconRight',
         {
-          'check-circle-outline': 'check-circle-outline',
+          'flight-icons/check-circle-16': 'flight-icons/check-circle-16',
-          'copy-action': 'chevron-right',
+          'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-          'copy-action': 'copy-action',
-          'unfold-more': 'unfold-more',
-          'unfold-less': 'unfold-less',
         },
-        'chevron-right'
+        'flight-icons/clipboard-copy-16'
       ),
       onClick: action('clicked'),
     },
@@ -86,12 +81,10 @@ button in this case for accessibility.
       iconOnly: select(
         'iconOnly',
         {
-          'check-circle-outline': 'check-circle-outline',
+          'flight-icons/check-circle-16': 'flight-icons/check-circle-16',
-          'copy-action': 'copy-action',
+          'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-          'unfold-more': 'unfold-more',
-          'unfold-less': 'unfold-less',
         },
-        'check-circle-outline'
+        'flight-icons/check-circle-16'
       ),
     },
   }}</Story>

addons/rose/addon/components/rose/card/link/index.stories.mdx

@@ -13,7 +13,7 @@ Card link component wraps content with `LinkTo` component. Supports title and de
   @title='Card title'
   @description='Card description'
   @id='resource_id_1234'
-  @icon='user-organization'
+  @icon='flight-icons/org-16'
   @route='about'/>
 ```
 
@@ -32,11 +32,9 @@ Card link component wraps content with `LinkTo` component. Supports title and de
       description: text('description', 'Card description'),
       id: text('id', 'resource_id_1234'),
       icon: select('icon', {
-          'user-organization': 'user-organization',
+          'flight-icons/org-16': 'flight-icons/org-16',
-          'partner': 'partner',
-          'gift-fill': 'gift-fill',
         },
-        'user-organization'
+        'flight-icons/org-16'
       ),
     },
   }}</Story>

addons/rose/addon/components/rose/cards/index.stories.mdx

@@ -18,35 +18,35 @@ A set of cards arranged side-by-side.
           @title="Card Title"
           @description="Description"
           @id="resource_id_1234"
-          @icon="user-organization"
+          @icon="flight-icons/org-16"
         />
         <cards.link
           @route="index"
           @title="Card Title"
           @description="Description"
           @id="resource_id_1234"
-          @icon="user-organization"
+          @icon="flight-icons/org-16"
         />
         <cards.link
           @route="index"
           @title="Card Title"
           @description="Description"
           @id="resource_id_1234"
-          @icon="user-organization"
+          @icon="flight-icons/org-16"
         />
         <cards.link
           @route="index"
           @title="Card Title"
           @description="Description"
           @id="resource_id_1234"
-          @icon="user-organization"
+          @icon="flight-icons/org-16"
         />
         <cards.link
           @route="index"
           @title="Card Title"
           @description="Description"
           @id="resource_id_1234"
-          @icon="user-organization"
+          @icon="flight-icons/org-16"
         />
       </Rose::Cards>
     `,
@@ -62,14 +62,14 @@ A set of cards arranged side-by-side.
     @title="Card Title"
     @description="Description"
     @id="resource_id_1234"
-    @icon="user-organization"
+    @icon="flight-icons/org-16"
   />
   <cards.link
     @route="index"
     @title="Card Title"
     @description="Description"
     @id="resource_id_1234"
-    @icon="user-organization"
+    @icon="flight-icons/org-16"
   />
 </Rose::Cards>
 ```

addons/rose/addon/components/rose/dialog/index.hbs

@@ -27,7 +27,7 @@
         title={{@dismissButtonText}}
         {{on "click" (fn this.dismiss @dismiss)}}
       >
-        <Rose::Icon @name="cancel-plain" @size="small" />
+        <Rose::Icon @name="flight-icons/x-16" @size="small" />
       </button>
 
     </header>
@@ -62,7 +62,7 @@
           title={{@dismissButtonText}}
           {{on "click" (fn this.dismiss @dismiss)}}
         >
-          <Rose::Icon @name="cancel-plain" @size="small" />
+          <Rose::Icon @name="flight-icons/x-16" @size="small" />
         </button>
 
       </header>

addons/rose/addon/components/rose/dialog/index.stories.mdx

@@ -36,12 +36,10 @@ A dialog component with optional modal capabilities.
       icon: select(
         'icon',
         {
-          'check-circle-outline': 'check-circle-outline',
+          'flight-icons/check-circle-16': 'flight-icons/check-circle-16',
-          'copy-action': 'copy-action',
+          'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-          'unfold-more': 'unfold-more',
-          'unfold-less': 'unfold-less'
         },
-        'check-circle-outline'
+        'flight-icons/check-circle-16'
       ),
       style: select(
         'style',
@@ -60,7 +58,7 @@ A dialog component with optional modal capabilities.
 <Rose::Dialog
   @modal={{true}}
   @dismiss={{@dismissFn}}
-  @icon="check-circle-outline"
+  @icon="flight-icons/check-circle-16"
   @heading="Heading"
   @dismissButtonText="Dismiss"
 as |dialog|>

addons/rose/addon/components/rose/dropdown/index.stories.mdx

@@ -11,7 +11,7 @@ A simple dropdown component with support for links and buttons.
 <Preview>
   <Story name="Basic Dropdown" height="7rem">{{
     template: hbs`
-      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" @showCaret={{showCaret}} as |dropdown|>
+      <Rose::Dropdown @text="Choose One&hellip;" @icon="flight-icons/org-16" @showCaret={{showCaret}} as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
         <dropdown.separator />
@@ -31,7 +31,7 @@ A simple dropdown component with support for links and buttons.
 <Preview>
   <Story name="Icon-only Dropdown" height="5rem">{{
     template: hbs`
-      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" @iconOnly={{true}} as |dropdown|>
+      <Rose::Dropdown @text="Choose One&hellip;" @icon="flight-icons/org-16" @iconOnly={{true}} as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
         <dropdown.separator />
@@ -117,7 +117,7 @@ Dropdown supports `danger` styling through `style` attribute.
 Dropdown indicator can be hidden using `showCaret` attribute.
 
 ```html
-<Rose::Dropdown @showCaret={{true}} @icon="more-horizontal" as |dropdown|>
+<Rose::Dropdown @showCaret={{true}} @icon="flight-icons/more-horizontal-16" as |dropdown|>
     <dropdown.link @route="index">Menu item</dropdown.link>
     <dropdown.button>Button menu item</dropdown.button>
 </Rose::Dropdown>

addons/rose/addon/components/rose/form/errors/message/index.hbs

@@ -1,4 +1,4 @@
 <p class="rose-form-error-message" ...attributes>
-  <Rose::Icon @name="cancel-square-fill" @size="medium" />
+  <Rose::Icon @name="flight-icons/x-square-16" @size="medium" />
   {{yield}}
 </p>

addons/rose/addon/components/rose/form/radio/group/index.stories.mdx

@@ -68,12 +68,10 @@ Renders a form radiofield group.
     firstFieldIcon: select(
       'first icon',
       {
-        'user-organization': 'user-organization',
+        'flight-icons/org-16': 'flight-icons/org-16',
-        'copy-action': 'copy-action',
+        'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-        'unfold-more': 'unfold-more',
-        'unfold-less': 'unfold-less',
       },
-      'user-organization'
+      'flight-icons/org-16'
     ),
     secondFieldLabel: text('second label', 'Maybe'),
     secondFieldValue: text('second value', 'maybe'),

addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx

@@ -44,10 +44,8 @@ Renders a form radiofield.
         'icon',
         {
           'none': null,
-          'user-organization': 'user-organization',
+          'flight-icons/org-16': 'flight-icons/org-16',
-          'copy-action': 'copy-action',
+          'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-          'unfold-more': 'unfold-more',
-          'unfold-less': 'unfold-less',
         },
         null
       ),
@@ -111,14 +109,12 @@ Renders a form radiofield.
         'icon',
         {
           'none': null,
-          'user-organization': 'user-organization',
+          'flight-icons/org-16': 'flight-icons/org-16',
-          'copy-action': 'copy-action',
+          'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-          'unfold-more': 'unfold-more',
-          'unfold-less': 'unfold-less',
         },
         null
       ),
       inline: boolean('inline', false)
     }
   }}</Story>
-</Preview>
+</Preview>

addons/rose/addon/components/rose/header/index.stories.mdx

@@ -27,7 +27,7 @@ A header component that allows three distinct sections to be configured: brand,
     <utilities.dropdown
       @text="user@example.net"
       @iconOnly={{true}}
-      @icon="user-square-fill" as |dropdown|
+      @icon="flight-icons/user-circle-16" as |dropdown|
     >
       <dropdown.link @route="index">Menu item</dropdown.link>
       <dropdown.link @route="about">Menu item</dropdown.link>
@@ -69,13 +69,11 @@ A header component that allows three distinct sections to be configured: brand,
       dropdownIcon: select(
         'dropdownIcon',
         {
-          'user-square-fill': 'user-square-fill',
+          'flight-icons/user-circle-16': 'flight-icons/user-circle-16',
-          'check-circle-outline': 'check-circle-outline',
+          'flight-icons/check-circle-16': 'flight-icons/check-circle-16',
-          'copy-action': 'copy-action',
+          'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-          'unfold-more': 'unfold-more',
-          'unfold-less': 'unfold-less',
         },
-        'user-square-fill'
+        'flight-icons/user-circle-16'
       ),
     },
   }}</Story>

addons/rose/addon/components/rose/icon/index.stories.mdx

@@ -7,9 +7,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 # Icon
 
-Renders a simple icon from [Structure Icons][structure-icons].
+Renders a simple icon.
-
-[structure-icons]: https://github.com/hashicorp/structure-icons
 
 ```htmlbars
 <Rose::Icon @name={{name}} @size={{size}} />
@@ -24,12 +22,10 @@ Renders a simple icon from [Structure Icons][structure-icons].
       name: select(
         'name',
         {
-          'check-circle-outline': 'check-circle-outline',
+          'flight-icons/check-circle-16': 'flight-icons/check-circle-16',
-          'copy-action': 'copy-action',
+          'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-          'unfold-more': 'unfold-more',
-          'unfold-less': 'unfold-less',
         },
-        'check-circle-outline'
+        'flight-icons/check-circle-16'
       ),
     }
   }}</Story>

addons/rose/addon/components/rose/link-button/index.stories.mdx

@@ -12,7 +12,7 @@ Styles supported: primary, secondary, warning, and ghost.
 Disabling link button is not supported as it is an action on form components only.
 
 ```html
-<Rose::LinkButton @route="index" @style="primary" @iconRight="chevron-right">
+<Rose::LinkButton @route="index" @style="primary" @iconRight="flight-icons/entry-point-16">
   Content
 </Rose::LinkButton>
 ```
@@ -45,21 +45,18 @@ Disabling link button is not supported as it is an action on form components onl
       iconLeft: select(
         'iconLeft',
         {
-          'check-circle-outline': 'check-circle-outline',
+          'flight-icons/check-circle-16': 'flight-icons/check-circle-16',
-          'copy-action': 'copy-action',
+          'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-          'unfold-more': 'unfold-more',
         },
-        'copy-action'
+        'flight-icons/clipboard-copy-16'
       ),
       iconRight: select(
         'iconRight',
         {
-          'check-circle-outline': 'check-circle-outline',
+          'flight-icons/check-circle-16': 'flight-icons/check-circle-16',
-          'chevron-right': 'chevron-right',
+          'flight-icons/clipboard-copy-16': 'flight-icons/clipboard-copy-16',
-          'copy-action': 'copy-action',
-          'search': 'search',
         },
-        'chevron-right'
+        'flight-icons/clipboard-copy-16'
       ),
     },
   }}</Story>
@@ -68,7 +65,7 @@ Disabling link button is not supported as it is an action on form components onl
 Similar to `Rose::Button`, icon only link button is supported.
 
 ```html
-<Rose::LinkButton @route="index" @style="primary" @iconOnly="help-circle-outline" />
+<Rose::LinkButton @route="index" @style="primary" @iconOnly="flight-icons/help-16" />
 ```
 
 <Preview>
@@ -91,12 +88,10 @@ Similar to `Rose::Button`, icon only link button is supported.
       iconOnly: select(
         'iconOnly',
         {
-          'check-circle-outline': 'check-circle-outline',
+          'flight-icons/check-circle-16': 'flight-icons/check-circle-16',
-          'help-circle-outline': 'help-circle-outline',
+          'flight-icons/help-16': 'flight-icons/help-16',
-          'plus-circle-fill': 'plus-circle-fill',
-          'user-square-outline': 'user-square-outline',
         },
-        'help-circle-outline'
+        'flight-icons/help-16'
       ),
     },
   }}</Story>

addons/rose/addon/components/rose/list/key-value/index.stories.mdx

@@ -46,7 +46,7 @@ A simple key/value list with support for embedded form fields and buttons.
             <input.field />
           </item.cell>
           <item.cell>
-            <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+            <Rose::Button @style="secondary" @iconOnly="flight-icons/trash-16" title="Remove">Remove</Rose::Button>
           </item.cell>
         </list.item>
       </Rose::Form::Input>
@@ -94,7 +94,7 @@ A simple key/value list with support for embedded form fields and buttons.
         <input.field />
       </item.cell>
       <item.cell>
-        <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+        <Rose::Button @style="secondary" @iconOnly="flight-icons/trash-16" title="Remove">Remove</Rose::Button>
       </item.cell>
     </list.item>
   </Rose::Form::Input>

addons/rose/addon/components/rose/message/index.stories.mdx

@@ -18,7 +18,7 @@ Title can be configured with optional icon and subtitle.
         {{description}}
       </message.description>
       <message.link @route="index">
-        <Rose::Icon @name="chevron-left" />
+        <Rose::Icon @name="flight-icons/chevron-left-16" />
         Go back
       </message.link>
       <message.link @route="index">
@@ -33,24 +33,23 @@ Title can be configured with optional icon and subtitle.
       icon: select(
         'icon',
         {
-          'alert-circle-outline': 'alert-circle-outline',
+          'flight-icons/alert-circle-16': 'flight-icons/alert-circle-16',
-          'help-circle-outline': 'help-circle-outline',
+          'flight-icons/help-16': 'flight-icons/help-16',
-          'disabled': 'disabled',
         },
-        'help-circle-outline'
+        'flight-icons/help-16'
       ),
     },
   }}</Story>
 </Preview>
 
 ```html
-<Rose::Message @title="Page not found" @subtitle="Error 404" @icon="disabled" as |message|>
+<Rose::Message @title="Page not found" @subtitle="Error 404" @icon="flight-icons/alert-circle-16" as |message|>
   <message.description>
       You must be granted permissions to view this data. Ask your administrator
       if you think you should have access.
   </message.description>
   <message.link @route="index">
-    <Rose::Icon @name="chevron-left" />
+    <Rose::Icon @name="flight-icons/chevron-left-16" />
     Go back
   </message.link>
   <message.link @route="index">Need help?</message.link>

addons/rose/addon/components/rose/notification/index.hbs

@@ -26,7 +26,7 @@
       {{on "click" @dismiss}}
     >
       <Rose::Icon
-        @name="cancel-plain"
+        @name="flight-icons/x-16"
         @size="medium" />
       <span class="rose-notification-dismiss-text">
         {{@dismissText}}

addons/rose/addon/components/rose/notification/index.js

@@ -8,17 +8,17 @@ export default class RoseNotificationComponent extends Component {
    */
   @computed('style')
   get icon() {
-    let icon = 'info-circle-fill';
+    let icon = 'flight-icons/info-16';
 
     switch (this.style) {
       case 'error':
-        icon = 'cancel-square-fill';
+        icon = 'flight-icons/x-square-16';
         break;
       case 'success':
-        icon = 'check-circle-fill';
+        icon = 'flight-icons/check-circle-16';
         break;
       case 'warning':
-        icon = 'alert-triangle';
+        icon = 'flight-icons/alert-triangle-16';
         break;
     }
 

addons/rose/addon/components/rose/table/index.stories.mdx

@@ -122,7 +122,7 @@ Cell shrink should be applied to all the cells in a row. Otherwise the bigger ce
               </Rose::Form::Input>
             </row.cell>
             <row.cell @shrink={{true}} @alignRight={{true}}>
-              <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+              <Rose::Button @style="secondary" @iconOnly="flight-icons/trash-16" title="Remove">Remove</Rose::Button>
             </row.cell>
           </body.row>
           <body.row as |row|>

addons/rose/index.js

@@ -10,7 +10,7 @@ module.exports = {
     this._super.included.apply(this, arguments);
 
     this.includeStyles(app);
-    this.includeIcons(app);
+    this.includeFlightIcons(app);
     this.includePublic(app);
     this.setupSVGO(app);
   },
@@ -45,8 +45,10 @@ module.exports = {
    * Finds the structure-icons folder and includes it into the
    * ember-inline-svg addon.
    */
-  includeIcons(app) {
+  includeFlightIcons(app) {
-    const iconPackagePath = require.resolve('@hashicorp/structure-icons');
+    const iconPackagePath = path.resolve(
+      '../../node_modules/@hashicorp/flight-icons'
+    );
     const iconsPath = path.resolve(iconPackagePath, '..');
 
     app.options.svg = app.options.svg || {};

addons/rose/package.json

@@ -43,7 +43,7 @@
     "@ember/test-helpers": "^2.2.8",
     "@glimmer/component": "^1.0.3",
     "@glimmer/tracking": "^1.0.3",
-    "@hashicorp/structure-icons": "^1.9.0-0",
+    "@hashicorp/flight-icons": "0.0.6-beta",
     "@storybook/addon-actions": "^6.3.1",
     "@storybook/addon-docs": "^6.3.1",
     "@storybook/addon-knobs": "^6.3.0",

addons/rose/tests/dummy/app/templates/playground.hbs

@@ -19,7 +19,7 @@
         <utilities.dropdown
           @text="user@example.net"
           @iconOnly={{true}}
-          @icon="user-square-fill" as |dropdown|
+          @icon="flight-icons/user-circle-16" as |dropdown|
         >
           <dropdown.link @route="index">Menu item</dropdown.link>
           <dropdown.link @route="about">Menu item</dropdown.link>
@@ -82,7 +82,7 @@
                 <input.field />
               </item.cell>
               <item.cell>
-                <Rose::Button @style="secondary" @iconOnly="trash" title="Remove">Remove</Rose::Button>
+                <Rose::Button @style="secondary" @iconOnly="flight-icons/trash-16" title="Remove">Remove</Rose::Button>
               </item.cell>
             </list.item>
           </Rose::Form::Input>

addons/rose/tests/integration/components/rose/badge-test.js

@@ -17,7 +17,7 @@ module('Integration | Component | rose/badge', function (hooks) {
   });
 
   test('it renders an icon using @icon', async function (assert) {
-    await render(hbs`<Rose::Badge @icon="chevron-right" />`);
+    await render(hbs`<Rose::Badge @icon="flight-icons/entry-point-16" />`);
     assert.ok(find('.rose-icon'));
   });
 

addons/rose/tests/integration/components/rose/button-test.js

@@ -34,14 +34,20 @@ module('Integration | Component | rose/button', function (hooks) {
   });
 
   test('it supports left and right icons', async function (assert) {
-    await render(hbs`<Rose::Button @iconLeft="chevron-left" />`);
+    await render(
+      hbs`<Rose::Button @iconLeft="flight-icons/chevron-left-16" />`
+    );
     assert.ok(find('.has-icon-left .rose-icon'));
-    await render(hbs`<Rose::Button @iconRight="chevron-left" />`);
+    await render(
+      hbs`<Rose::Button @iconRight="flight-icons/chevron-left-16" />`
+    );
     assert.ok(find('.has-icon-right .rose-icon'));
   });
 
   test('it supports an icon-only type', async function (assert) {
-    await render(hbs`<Rose::Button @iconOnly="chevron-left" />`);
+    await render(
+      hbs`<Rose::Button @iconOnly="flight-icons/chevron-left-16" />`
+    );
     assert.ok(find('.has-icon-only .rose-icon'));
   });
 });

addons/rose/tests/integration/components/rose/card/link-test.js

@@ -42,7 +42,7 @@ module('Integration | Component | rose/card/link', function (hooks) {
 
   test('it renders with @icon', async function (assert) {
     await render(
-      hbs`<Rose::Card::Link @title="foo" @icon="alert-circle-outline" />`
+      hbs`<Rose::Card::Link @title="foo" @icon="flight-icons/alert-circle-16" />`
     );
     assert.ok(find('.rose-icon'));
   });

addons/rose/tests/integration/components/rose/dropdown-test.js

@@ -24,7 +24,7 @@ module('Integration | Component | rose/dropdown', function (hooks) {
   });
 
   test('it supports an icon', async function (assert) {
-    await render(hbs`<Rose::Dropdown @icon="user-square-fill" />`);
+    await render(hbs`<Rose::Dropdown @icon="flight-icons/user-circle-16" />`);
     assert.ok(find('svg'));
   });
 

addons/rose/tests/integration/components/rose/dropdown/button-test.js

@@ -32,7 +32,9 @@ module('Integration | Component | rose/dropdown/button', function (hooks) {
   });
 
   test('it supports an icon-only type', async function (assert) {
-    await render(hbs`<Rose::Dropdown::Button @iconOnly="chevron-left" />`);
+    await render(
+      hbs`<Rose::Dropdown::Button @iconOnly="flight-icons/chevron-left-16" />`
+    );
     assert.ok(find('.has-icon-only .rose-icon'));
   });
 });

addons/rose/tests/integration/components/rose/form/radio/radio-test.js

@@ -18,7 +18,9 @@ module('Integration | Component | rose/form/radio/radio', function (hooks) {
   });
 
   test('it supports an icon', async function (assert) {
-    await render(hbs`<Rose::Form::Radio::Radio @icon="user-square-fill" />`);
+    await render(
+      hbs`<Rose::Form::Radio::Radio @icon="flight-icons/user-circle-16" />`
+    );
     assert.ok(find('svg'));
   });
 

addons/rose/tests/integration/components/rose/icon-test.js

@@ -7,12 +7,14 @@ module('Integration | Component | rose/icon', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Rose::Icon @name="unfold-more" />`);
+    await render(hbs`<Rose::Icon @name="flight-icons/globe-16" />`);
     assert.ok(find('svg'));
   });
 
   test('it supports optional @size', async function (assert) {
-    await render(hbs`<Rose::Icon @name="unfold-more" @size="small" />`);
+    await render(
+      hbs`<Rose::Icon @name="flight-icons/globe-16" @size="small" />`
+    );
     assert.ok(find('.small'));
   });
 });

addons/rose/tests/integration/components/rose/link-button-test.js

@@ -35,7 +35,7 @@ module('Integration | Component | rose/link-button', function (hooks) {
 
   test('it supports left icon with @iconLeft', async function (assert) {
     await render(
-      hbs`<Rose::LinkButton @route="index" @iconLeft="chevron-left" />`
+      hbs`<Rose::LinkButton @route="index" @iconLeft="flight-icons/chevron-left-16" />`
     );
     assert.ok(find('.rose-icon'));
     assert.ok(find('.has-icon-left'));
@@ -43,7 +43,7 @@ module('Integration | Component | rose/link-button', function (hooks) {
 
   test('it supports left icon with @iconRight', async function (assert) {
     await render(
-      hbs`<Rose::LinkButton @route="index" @iconRight="chevron-right" />`
+      hbs`<Rose::LinkButton @route="index" @iconRight="flight-icons/entry-point-16" />`
     );
     assert.ok(find('.rose-icon'));
     assert.ok(find('.has-icon-right'));
@@ -51,7 +51,7 @@ module('Integration | Component | rose/link-button', function (hooks) {
 
   test('it supports only icon with @iconOnly', async function (assert) {
     await render(
-      hbs`<Rose::LinkButton @route="index" @iconOnly="help-circle-outline" />`
+      hbs`<Rose::LinkButton @route="index" @iconOnly="flight-icons/help-16" />`
     );
     assert.ok(find('.rose-icon'));
     assert.ok(find('.has-icon-only'));

ui/admin/app/components/copyable/index.js

@@ -12,8 +12,8 @@ export default class CopyableComponent extends Component {
   id = generateComponentID();
   copyableButtonId = `copyable-button-${this.id}`;
 
-  actionIcon = 'copy-action';
+  actionIcon = 'flight-icons/clipboard-copy-16';
-  successIcon = 'copy-success';
+  successIcon = 'flight-icons/clipboard-checked-16';
   actionText = this.args.buttonText;
   successText = this.args.acknowledgeText;
 

ui/admin/app/components/form/auth-method/oidc/index.hbs

@@ -177,7 +177,7 @@
               <row.cell @shrink={{true}}>
                 <Rose::Button
                   @style='warning'
-                  @iconOnly='trash'
+                  @iconOnly='flight-icons/trash-16'
                   title={{t 'actions.remove'}}
                   @disabled={{if
                     @model.isNew
@@ -278,7 +278,7 @@
               <row.cell @shrink={{true}}>
                 <Rose::Button
                   @style='warning'
-                  @iconOnly='trash'
+                  @iconOnly='flight-icons/trash-16'
                   title={{t 'actions.remove'}}
                   @disabled={{if
                     @model.isNew
@@ -368,7 +368,7 @@
               <row.cell @shrink={{true}}>
                 <Rose::Button
                   @style='warning'
-                  @iconOnly='trash'
+                  @iconOnly='flight-icons/trash-16'
                   title={{t 'actions.remove'}}
                   @disabled={{if
                     @model.isNew
@@ -477,7 +477,7 @@
               <row.cell @shrink={{true}}>
                 <Rose::Button
                   @style='warning'
-                  @iconOnly='trash'
+                  @iconOnly='flight-icons/trash-16'
                   title={{t 'actions.remove'}}
                   @disabled={{if
                     @model.isNew
@@ -578,7 +578,7 @@
               <row.cell @shrink={{true}}>
                 <Rose::Button
                   @style='warning'
-                  @iconOnly='trash'
+                  @iconOnly='flight-icons/trash-16'
                   title={{t 'actions.remove'}}
                   @disabled={{if
                     @model.isNew

ui/admin/app/components/form/group/add-members/index.hbs

@@ -49,7 +49,7 @@
         {{t 'resources.group.messages.no-members.description'}}
       </message.description>
       <message.link @route='scopes.scope.groups.group.members'>
-        <Rose::Icon @name='chevron-left' />
+        <Rose::Icon @name='flight-icons/chevron-left-16' />
         {{t 'actions.back'}}
       </message.link>
     </Rose::Message>

ui/admin/app/components/form/host-set/add-hosts/index.hbs

@@ -55,7 +55,7 @@
       <message.link
         @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts'
       >
-        <Rose::Icon @name='chevron-left' />
+        <Rose::Icon @name='flight-icons/chevron-left-16' />
         {{t 'actions.back'}}
       </message.link>
     </Rose::Message>

ui/admin/app/components/form/role/add-principals/index.hbs

@@ -58,7 +58,7 @@
         {{t 'resources.role.principal.messages.none.description'}}
       </message.description>
       <message.link @route='scopes.scope.roles.role.principals'>
-        <Rose::Icon @name='chevron-left' />
+        <Rose::Icon @name='flight-icons/chevron-left-16' />
         {{t 'actions.back'}}
       </message.link>
     </Rose::Message>

ui/admin/app/components/form/role/grants/index.hbs

@@ -74,7 +74,7 @@
         <item.cell>
           <Rose::Button
             @style='secondary'
-            @iconOnly='trash'
+            @iconOnly='flight-icons/trash-16'
             title={{t 'actions.remove'}}
             {{on 'click' (fn @removeGrant grant.value)}}
           >

ui/admin/app/components/form/role/index.hbs

@@ -69,9 +69,11 @@
           @text={{this.selectedGrantScope.displayName}}
           @icon={{if
             this.selectedGrantScope.isProject
-            'app-icons/project'
+            'flight-icons/grid-16'
             (if
-              this.selectedGrantScope.isOrg 'app-icons/org' 'app-icons/global'
+              this.selectedGrantScope.isOrg
+              'flight-icons/org-16'
+              'flight-icons/globe-16'
             )
           }}
           as |dropdown|

ui/admin/app/components/form/target/add-credential-libraries/index.hbs

@@ -55,7 +55,7 @@
         {{t 'resources.target.credential-library.messages.none.description'}}
       </message.description>
       <message.link @route='scopes.scope.targets.target.credential-libraries'>
-        <Rose::Icon @name='chevron-left' />
+        <Rose::Icon @name='flight-icons/chevron-left-16' />
         {{t 'actions.back'}}
       </message.link>
     </Rose::Message>

ui/admin/app/components/form/target/add-host-sets/index.hbs

@@ -59,7 +59,7 @@
         {{t 'resources.target.host-set.messages.none.description'}}
       </message.description>
       <message.link @route='scopes.scope.targets.target.host-sets'>
-        <Rose::Icon @name='chevron-left' />
+        <Rose::Icon @name='flight-icons/chevron-left-16' />
         {{t 'actions.back'}}
       </message.link>
     </Rose::Message>

ui/admin/app/components/form/user/add-accounts/index.hbs

@@ -59,7 +59,7 @@
         {{t 'resources.user.messages.no-accounts.description'}}
       </message.description>
       <message.link @route='scopes.scope.users.user.accounts'>
-        <Rose::Icon @name='chevron-left' />
+        <Rose::Icon @name='flight-icons/chevron-left-16' />
         {{t 'actions.back'}}
       </message.link>
     </Rose::Message>

ui/admin/app/styles/app.scss

@@ -189,14 +189,6 @@
   }
 }
 
-.doc-link {
-  .large {
-    svg {
-      transform: scale(0.8);
-    }
-  }
-}
-
 [class*='session-status-'] {
   color: var(--ui-gray-subtler-2);
 }

ui/admin/app/templates/application.hbs

@@ -16,7 +16,7 @@
         <header.utilities as |utilities|>
           <utilities.dropdown
             @text={{this.session.data.authenticated.username}}
-            @icon='app-icons/user-profile'
+            @icon='flight-icons/user-circle-16'
             as |dropdown|
           >
             <dropdown.link @route='account.change-password'>
@@ -100,7 +100,7 @@
     <Rose::Dialog
       @heading={{t 'titles.abandon-confirm'}}
       @dismissButtonText={{t 'actions.cancel'}}
-      @icon='alert-triangle'
+      @icon='flight-icons/alert-triangle-16'
       @style='warning'
       @modal={{true}}
       @dismiss={{deny}}
@@ -126,7 +126,7 @@
         (t 'actions.confirm')
       }}
       @dismissButtonText={{t 'actions.cancel'}}
-      @icon='alert-triangle'
+      @icon='flight-icons/alert-triangle-16'
       @style='warning'
       @modal={{true}}
       @dismiss={{deny}}

ui/admin/app/templates/scopes/index.hbs

@@ -8,7 +8,7 @@
         <Rose::Layout::Centered>
           <Rose::Message
             @title={{t 'auth.titles.no-scopes'}}
-            @icon='alert-circle-outline'
+            @icon='flight-icons/alert-circle-16'
             as |message|
           >
             <message.description>

ui/admin/app/templates/scopes/scope.hbs

@@ -18,7 +18,7 @@
       {{#if @model.isGlobal}}
         <Rose::Nav::Sidebar @title={{t 'titles.general'}} as |nav|>
           <nav.link @route='scopes.scope.scopes'>
-            <Rose::Icon @name='app-icons/org' @size='medium' />
+            <Rose::Icon @name='flight-icons/org-16' @size='medium' />
             {{t 'resources.org.title_plural'}}
           </nav.link>
         </Rose::Nav::Sidebar>
@@ -28,12 +28,12 @@
         <Rose::Nav::Sidebar @title={{t 'titles.general'}} as |nav|>
           {{#if this.session.data.authenticated.isGlobal}}
             <nav.link @route='scopes.scope.scopes' @model='global'>
-              <Rose::Icon @name='app-icons/org' @size='medium' />
+              <Rose::Icon @name='flight-icons/org-16' @size='medium' />
               {{t 'resources.org.title_plural'}}
             </nav.link>
           {{/if}}
           <nav.link @route='scopes.scope.scopes'>
-            <Rose::Icon @name='app-icons/project' @size='medium' />
+            <Rose::Icon @name='flight-icons/grid-16' @size='medium' />
             {{t 'resources.project.title_plural'}}
           </nav.link>
         </Rose::Nav::Sidebar>
@@ -43,12 +43,12 @@
         <Rose::Nav::Sidebar @title={{t 'titles.general'}} as |nav|>
           {{#if this.session.data.authenticated.isGlobal}}
             <nav.link @route='scopes.scope.scopes' @model='global'>
-              <Rose::Icon @name='app-icons/org' @size='medium' />
+              <Rose::Icon @name='flight-icons/org-16' @size='medium' />
               {{t 'resources.org.title_plural'}}
             </nav.link>
           {{/if}}
           <nav.link @route='scopes.scope.scopes' @model={{@model.scopeID}}>
-            <Rose::Icon @name='app-icons/project' @size='medium' />
+            <Rose::Icon @name='flight-icons/grid-16' @size='medium' />
             {{t 'resources.project.title_plural'}}
           </nav.link>
         </Rose::Nav::Sidebar>
@@ -58,13 +58,13 @@
         <Rose::Nav::Sidebar @title={{t "titles.iam"}} as |nav|>
           <nav.link @route="scopes.scope.groups">
             <Rose::Icon
-              @name="app-icons/group"
+              @name="flight-icons/folder-users-16"
               @size="medium" />
             {{t "resources.group.title_plural"}}
           </nav.link>
           <nav.link @route="scopes.scope.roles">
             <Rose::Icon
-              @name="app-icons/roles"
+              @name="flight-icons/identity-user-16"
               @size="medium" />
             {{t "resources.role.title_plural"}}
           </nav.link>
@@ -72,20 +72,20 @@
         --}}
         <Rose::Nav::Sidebar @title={{t 'titles.resources'}} as |nav|>
           <nav.link @route='scopes.scope.sessions'>
-            <Rose::Icon @name='app-icons/action-session' @size='medium' />
+            <Rose::Icon @name='flight-icons/entry-point-16' @size='medium' />
             {{t 'resources.session.title_plural'}}
           </nav.link>
           <nav.link @route='scopes.scope.targets'>
-            <Rose::Icon @name='app-icons/target' @size='medium' />
+            <Rose::Icon @name='flight-icons/crosshair-16' @size='medium' />
             {{t 'resources.target.title_plural'}}
           </nav.link>
           <nav.link @route='scopes.scope.host-catalogs'>
-            <Rose::Icon @name='app-icons/host-catalogs' @size='medium' />
+            <Rose::Icon @name='flight-icons/collections-16' @size='medium' />
             {{t 'resources.host-catalog.title_plural'}}
           </nav.link>
           {{#if (feature-flag 'credential-store')}}
             <nav.link @route='scopes.scope.credential-stores'>
-              <Rose::Icon @name='app-icons/credentials' @size='medium' />
+              <Rose::Icon @name='flight-icons/key-16' @size='medium' />
               {{t 'resources.credential-store.title_plural'}}
             </nav.link>
           {{/if}}
@@ -95,19 +95,19 @@
       {{#unless @model.isProject}}
         <Rose::Nav::Sidebar @title={{t 'titles.iam'}} as |nav|>
           <nav.link @route='scopes.scope.users'>
-            <Rose::Icon @name='app-icons/users' @size='medium' />
+            <Rose::Icon @name='flight-icons/users-16' @size='medium' />
             {{t 'resources.user.title_plural'}}
           </nav.link>
           <nav.link @route='scopes.scope.groups'>
-            <Rose::Icon @name='app-icons/group' @size='medium' />
+            <Rose::Icon @name='flight-icons/folder-users-16' @size='medium' />
             {{t 'resources.group.title_plural'}}
           </nav.link>
           <nav.link @route='scopes.scope.roles'>
-            <Rose::Icon @name='app-icons/roles' @size='medium' />
+            <Rose::Icon @name='flight-icons/identity-user-16' @size='medium' />
             {{t 'resources.role.title_plural'}}
           </nav.link>
           <nav.link @route='scopes.scope.auth-methods'>
-            <Rose::Icon @name='app-icons/auth-method' @size='medium' />
+            <Rose::Icon @name='flight-icons/lock-16' @size='medium' />
             {{t 'resources.auth-method.title_plural'}}
           </nav.link>
         </Rose::Nav::Sidebar>

ui/admin/app/templates/scopes/scope/-header-nav.hbs

@@ -2,8 +2,8 @@
   @text={{this.scopes.selectedOrg.displayName}}
   @icon={{if
     this.scopes.selectedOrg.isGlobal
-    'app-icons/global'
+    'flight-icons/globe-16'
-    'app-icons/org'
+    'flight-icons/org-16'
   }}
   as |dropdown|
 >
@@ -23,7 +23,7 @@
 {{#if this.scopes.selectedProject}}
   <Rose::Dropdown
     @text={{this.scopes.selectedProject.displayName}}
-    @icon='app-icons/project'
+    @icon='flight-icons/grid-16'
     as |dropdown|
   >
     {{#each this.scopes.projects as |scope|}}

ui/admin/app/templates/scopes/scope/-sidebar.hbs

@@ -1,18 +1,18 @@
 <Rose::Nav::Sidebar @title={{t 'titles.iam'}} as |nav|>
   <nav.link @route='scopes.scope.users'>
-    <Rose::Icon @name='app-icons/users' @size='medium' />
+    <Rose::Icon @name='flight-icons/users-16' @size='medium' />
     {{t 'resources.user.title_plural'}}
   </nav.link>
   <nav.link @route='scopes.scope.groups'>
-    <Rose::Icon @name='app-icons/group' @size='medium' />
+    <Rose::Icon @name='flight-icons/folder-users-16' @size='medium' />
     {{t 'resources.group.title_plural'}}
   </nav.link>
   <nav.link @route='scopes.scope.roles'>
-    <Rose::Icon @name='app-icons/roles' @size='medium' />
+    <Rose::Icon @name='flight-icons/identity-user-16' @size='medium' />
     {{t 'resources.role.title_plural'}}
   </nav.link>
   <nav.link @route='scopes.scope.auth-methods'>
-    <Rose::Icon @name='app-icons/auth-method' @size='medium' />
+    <Rose::Icon @name='flight-icons/lock-16' @size='medium' />
     {{t 'resources.auth-method.title_plural'}}
   </nav.link>
 </Rose::Nav::Sidebar>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/-actions.hbs

@@ -3,8 +3,10 @@
     @text={{t (concat 'states.' @model.attributes.state)}}
     @icon={{if
       @model.isInactive
-      'disabled'
+      'flight-icons/x-circle-16'
-      (if @model.isPrivate 'lock-closed-outline' 'check-circle-outline')
+      (if
+        @model.isPrivate 'flight-icons/lock-16' 'flight-icons/check-circle-16'
+      )
     }}
     @dropdownRight={{true}}
     as |dropdown|

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs

@@ -115,7 +115,7 @@
         {{t 'resources.account.messages.welcome.description'}}
       </message.description>
       <message.link @route='scopes.scope.auth-methods.auth-method.accounts.new'>
-        <Rose::Icon @name='plus-circle-outline' />
+        <Rose::Icon @name='flight-icons/plus-circle-16' />
         {{t 'resources.account.actions.create'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/auth-methods/index.hbs

@@ -129,7 +129,7 @@
                     @dropdownRight={{true}}
                     @iconOnly={{true}}
                     @showCaret={{false}}
-                    @icon='more-horizontal'
+                    @icon='flight-icons/more-horizontal-16'
                     as |dropdown|
                   >
                     {{#unless authMethod.isPrimary}}
@@ -171,7 +171,7 @@
             @route='scopes.scope.auth-methods.new'
             @query={{hash type='password'}}
           >
-            <Rose::Icon @name='plus-circle-outline' />
+            <Rose::Icon @name='flight-icons/plus-circle-16' />
             {{t 'titles.new'}}
           </message.link>
         </Rose::Message>

ui/admin/app/templates/scopes/scope/authenticate.hbs

@@ -16,7 +16,7 @@
             }}</p>
           <Rose::Dropdown
             @text={{t 'actions.choose-different-org'}}
-            @icon='user-organization'
+            @icon='flight-icons/org-16'
             as |dropdown|
           >
             <dropdown.link @route='scopes.scope.authenticate' @model='global'>
@@ -79,7 +79,7 @@
             <Rose::Layout::Centered>
               <Rose::Message
                 @title={{t 'resources.auth-method.messages.none.title'}}
-                @icon='alert-circle-outline'
+                @icon='flight-icons/alert-circle-16'
                 as |message|
               >
                 <message.description>

ui/admin/app/templates/scopes/scope/authenticate/index.hbs

@@ -2,7 +2,7 @@
   <Rose::Layout::Centered>
     <Rose::Message
       @title={{t 'resources.auth-method.messages.none.title'}}
-      @icon='alert-circle-outline'
+      @icon='flight-icons/alert-circle-16'
       as |message|
     >
       <message.description>

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/index.hbs

@@ -58,7 +58,7 @@
       <message.link
         @route='scopes.scope.credential-stores.credential-store.credential-libraries.new'
       >
-        <Rose::Icon @name='plus-circle-outline' />
+        <Rose::Icon @name='flight-icons/plus-circle-16' />
         {{t 'titles.new'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/credential-stores/index.hbs

@@ -82,7 +82,7 @@
             {{t 'resources.credential-store.description'}}
           </message.description>
           <message.link @route='scopes.scope.credential-stores.new'>
-            <Rose::Icon @name='plus-circle-outline' />
+            <Rose::Icon @name='flight-icons/plus-circle-16' />
             {{t 'titles.new'}}
           </message.link>
         </Rose::Message>

ui/admin/app/templates/scopes/scope/groups/group/members.hbs

@@ -27,7 +27,7 @@
           </row.cell>
           <row.cell>
             <Rose::Dropdown
-              @icon='more-horizontal'
+              @icon='flight-icons/more-horizontal-16'
               @iconOnly={{true}}
               @showCaret={{false}}
               @dropdownRight={{true}}
@@ -58,7 +58,7 @@
         {{t 'resources.group.messages.members.description'}}
       </message.description>
       <message.link @route='scopes.scope.groups.group.add-members'>
-        <Rose::Icon @name='plus-circle-outline' />
+        <Rose::Icon @name='flight-icons/plus-circle-16' />
         {{t 'resources.group.actions.add-members'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/groups/index.hbs

@@ -72,7 +72,7 @@
             {{t 'resources.group.description'}}
           </message.description>
           <message.link @route='scopes.scope.groups.new'>
-            <Rose::Icon @name='plus-circle-outline' />
+            <Rose::Icon @name='flight-icons/plus-circle-16' />
             {{t 'titles.new'}}
           </message.link>
         </Rose::Message>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs

@@ -37,7 +37,7 @@
           </row.cell>
           <row.cell>
             <Rose::Dropdown
-              @icon='more-horizontal'
+              @icon='flight-icons/more-horizontal-16'
               @iconOnly={{true}}
               @showCaret={{false}}
               @dropdownRight={{true}}
@@ -70,7 +70,7 @@
       </message.description>
       {{!--
       <message.link @route="scopes.scope.host-catalogs.host-catalog.host-sets.host-set.create-and-add-host">
-        <Rose::Icon @name="plus-circle-outline" />
+        <Rose::Icon @name="flight-icons/plus-circle-16" />
         {{t "resources.host-set.actions.create-and-add-host"}}
       </message.link>
       --}}

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/index.hbs

@@ -56,7 +56,7 @@
       <message.link
         @route='scopes.scope.host-catalogs.host-catalog.host-sets.new'
       >
-        <Rose::Icon @name='plus-circle-outline' />
+        <Rose::Icon @name='flight-icons/plus-circle-16' />
         {{t 'titles.new'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/hosts/index.hbs

@@ -58,7 +58,7 @@
         {{t 'resources.host.description'}}
       </message.description>
       <message.link @route='scopes.scope.host-catalogs.host-catalog.hosts.new'>
-        <Rose::Icon @name='plus-circle-outline' />
+        <Rose::Icon @name='flight-icons/plus-circle-16' />
         {{t 'titles.new'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/host-catalogs/index.hbs

@@ -85,7 +85,7 @@
             {{t 'resources.host-catalog.description'}}
           </message.description>
           <message.link @route='scopes.scope.host-catalogs.new'>
-            <Rose::Icon @name='plus-circle-outline' />
+            <Rose::Icon @name='flight-icons/plus-circle-16' />
             {{t 'titles.new'}}
           </message.link>
         </Rose::Message>

ui/admin/app/templates/scopes/scope/roles/index.hbs

@@ -71,7 +71,7 @@
             {{t 'resources.role.description'}}
           </message.description>
           <message.link @route='scopes.scope.roles.new'>
-            <Rose::Icon @name='plus-circle-outline' />
+            <Rose::Icon @name='flight-icons/plus-circle-16' />
             {{t 'titles.new'}}
           </message.link>
         </Rose::Message>

ui/admin/app/templates/scopes/scope/roles/role/principals.hbs

@@ -31,7 +31,7 @@
           </row.cell>
           <row.cell>
             <Rose::Dropdown
-              @icon='more-horizontal'
+              @icon='flight-icons/more-horizontal-16'
               @iconOnly={{true}}
               @showCaret={{false}}
               @dropdownRight={{true}}
@@ -62,7 +62,7 @@
         {{t 'resources.role.principal.messages.welcome.description'}}
       </message.description>
       <message.link @route='scopes.scope.roles.role.add-principals'>
-        <Rose::Icon @name='plus-circle-outline' />
+        <Rose::Icon @name='flight-icons/plus-circle-16' />
         {{t 'resources.role.principal.actions.add-principals'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/scopes/index.hbs

@@ -43,7 +43,11 @@
             @title={{scope.name}}
             @description={{scope.description}}
             @id={{scope.id}}
-            @icon={{if scope.isOrg 'app-icons/org' 'app-icons/project'}}
+            @icon={{if
+              scope.isOrg
+              'flight-icons/org-16'
+              'flight-icons/grid-16'
+            }}
             @route='scopes.scope'
             @model={{scope.id}}
           />
@@ -62,7 +66,7 @@
               {{t 'resources.org.description'}}
             </message.description>
             <message.link @route='scopes.scope.new'>
-              <Rose::Icon @name='plus-circle-outline' />
+              <Rose::Icon @name='flight-icons/plus-circle-16' />
               {{t 'titles.new'}}
             </message.link>
           </Rose::Message>
@@ -79,7 +83,7 @@
               {{t 'resources.project.description'}}
             </message.description>
             <message.link @route='scopes.scope.new'>
-              <Rose::Icon @name='plus-circle-outline' />
+              <Rose::Icon @name='flight-icons/plus-circle-16' />
               {{t 'titles.new'}}
             </message.link>
           </Rose::Message>

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -36,7 +36,7 @@
                     'session-status-'
                     sessionAggregate.session.status
                   }}
-                  @name='app-icons/action-session'
+                  @name='flight-icons/entry-point-16'
                   @size='medium'
                 />
                 <Copyable

ui/admin/app/templates/scopes/scope/targets/index.hbs

@@ -82,7 +82,7 @@
             {{t 'resources.target.description'}}
           </message.description>
           <message.link @route='scopes.scope.targets.new'>
-            <Rose::Icon @name='plus-circle-outline' />
+            <Rose::Icon @name='flight-icons/plus-circle-16' />
             {{t 'titles.new'}}
           </message.link>
         </Rose::Message>

ui/admin/app/templates/scopes/scope/targets/target/add-credential-libraries.hbs

@@ -19,7 +19,7 @@
         {{t 'resources.target.credential-library.messages.none.description'}}
       </message.description>
       <message.link @route='scopes.scope.targets.target.credential-libraries'>
-        <Rose::Icon @name='chevron-left' />
+        <Rose::Icon @name='flight-icons/chevron-left-16' />
         {{t 'actions.back'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/targets/target/add-host-sets.hbs

@@ -20,7 +20,7 @@
         {{t 'resources.target.host-set.messages.none.description'}}
       </message.description>
       <message.link @route='scopes.scope.targets.target.host-sets'>
-        <Rose::Icon @name='chevron-left' />
+        <Rose::Icon @name='flight-icons/chevron-left-16' />
         {{t 'actions.back'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/targets/target/credential-libraries.hbs

@@ -44,7 +44,7 @@
           </row.cell>
           <row.cell>
             <Rose::Dropdown
-              @icon='more-horizontal'
+              @icon='flight-icons/more-horizontal-16'
               @iconOnly={{true}}
               @showCaret={{false}}
               @dropdownRight={{true}}
@@ -82,7 +82,7 @@
       <message.link
         @route='scopes.scope.targets.target.add-credential-libraries'
       >
-        <Rose::Icon @name='plus-circle-outline' />
+        <Rose::Icon @name='flight-icons/plus-circle-16' />
         {{t 'resources.target.actions.add-credential-libraries'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/targets/target/host-sets.hbs

@@ -34,7 +34,7 @@
           </row.cell>
           <row.cell>
             <Rose::Dropdown
-              @icon='more-horizontal'
+              @icon='flight-icons/more-horizontal-16'
               @iconOnly={{true}}
               @showCaret={{false}}
               @dropdownRight={{true}}
@@ -68,7 +68,7 @@
         {{t 'resources.target.host-set.messages.welcome.description'}}
       </message.description>
       <message.link @route='scopes.scope.targets.target.add-host-sets'>
-        <Rose::Icon @name='plus-circle-outline' />
+        <Rose::Icon @name='flight-icons/plus-circle-16' />
         {{t 'resources.target.actions.add-host-sets'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/users/index.hbs

@@ -71,7 +71,7 @@
             {{t 'resources.user.description'}}
           </message.description>
           <message.link @route='scopes.scope.users.new'>
-            <Rose::Icon @name='plus-circle-outline' />
+            <Rose::Icon @name='flight-icons/plus-circle-16' />
             {{t 'titles.new'}}
           </message.link>
         </Rose::Message>

ui/admin/app/templates/scopes/scope/users/user/accounts.hbs

@@ -34,7 +34,7 @@
           </row.cell>
           <row.cell>
             <Rose::Dropdown
-              @icon='more-horizontal'
+              @icon='flight-icons/more-horizontal-16'
               @iconOnly={{true}}
               @showCaret={{false}}
               @dropdownRight={{true}}
@@ -68,7 +68,7 @@
         {{t 'resources.user.messages.accounts.description'}}
       </message.description>
       <message.link @route='scopes.scope.users.user.add-accounts'>
-        <Rose::Icon @name='plus-circle-outline' />
+        <Rose::Icon @name='flight-icons/plus-circle-16' />
         {{t 'resources.user.actions.add-accounts'}}
       </message.link>
     </Rose::Message>

ui/admin/app/templates/scopes/scope/users/user/add-accounts.hbs

@@ -20,7 +20,7 @@
         {{t 'resources.user.messages.no-accounts.description'}}
       </message.description>
       <message.link @route='scopes.scope.users.user.accounts'>
-        <Rose::Icon @name='chevron-left' />
+        <Rose::Icon @name='flight-icons/chevron-left-16' />
         {{t 'actions.back'}}
       </message.link>
     </Rose::Message>

ui/desktop/app/components/copyable/index.js

@@ -13,8 +13,8 @@ export default class CopyableComponent extends Component {
   id = generateComponentID();
   copyableButtonId = `copyable-button-${this.id}`;
 
-  actionIcon = 'copy-action';
+  actionIcon = 'flight-icons/clipboard-copy-16';
-  successIcon = 'copy-success';
+  successIcon = 'flight-icons/clipboard-checked-16';
   actionText = this.args.buttonText;
   successText = this.args.acknowledgeText;
 

ui/desktop/app/components/hidden-secret/index.hbs

@@ -1,7 +1,11 @@
 <div class='hidden-secret'>
   <Rose::Button
     @style='ghost'
-    @iconOnly={{if this.isHidden 'visibility-show' 'visibility-hide'}}
+    @iconOnly={{if
+      this.isHidden
+      'flight-icons/eye-16'
+      'flight-icons/eye-off-16'
+    }}
     {{on 'click' this.toggleSecretVisibility}}
   >
     {{t 'actions.toggle-secret'}}

ui/desktop/app/styles/app.scss

@@ -233,14 +233,6 @@
   }
 }
 
-.doc-link {
-  .large {
-    svg {
-      transform: scale(0.8);
-    }
-  }
-}
-
 [class*='session-status-'] {
   color: var(--ui-gray-subtler-2);
 }

ui/desktop/app/templates/application.hbs

@@ -21,7 +21,7 @@
       <header.utilities as |utilities|>
         {{#if this.isWindowsOS}}
           <Rose::Button
-            @iconOnly='cancel-plain'
+            @iconOnly='flight-icons/x-16'
             @style='warning'
             class='button-window-close'
             {{on 'click' (route-action 'close')}}
@@ -43,7 +43,7 @@
         {{#if this.session.isAuthenticated}}
           <utilities.dropdown
             @text={{this.session.data.authenticated.username}}
-            @icon='app-icons/user-profile'
+            @icon='flight-icons/user-circle-16'
             as |dropdown|
           >
             <dropdown.button {{on 'click' (route-action 'invalidateSession')}}>
@@ -107,7 +107,7 @@
     <Rose::Dialog
       @heading={{t 'states.error'}}
       @dismissButtonText={{t 'actions.ok'}}
-      @icon='cancel-square-fill'
+      @icon='flight-icons/x-square-16'
       @style='error'
       @modal={{true}}
       @dismiss={{deny}}
@@ -134,7 +134,7 @@
     <Rose::Dialog
       @heading={{t 'actions.confirm'}}
       @dismissButtonText={{t 'actions.cancel'}}
-      @icon='alert-triangle'
+      @icon='flight-icons/alert-triangle-16'
       @style='warning'
       @modal={{true}}
       @dismiss={{deny}}

ui/desktop/app/templates/scopes/scope/-header-nav.hbs

@@ -2,8 +2,8 @@
   @text={{this.scopes.selectedOrg.displayName}}
   @icon={{if
     this.scopes.selectedOrg.isGlobal
-    'app-icons/global'
+    'flight-icons/globe-16'
-    'app-icons/org'
+    'flight-icons/org-16'
   }}
   as |dropdown|
 >

ui/desktop/app/templates/scopes/scope/authenticate.hbs

@@ -11,7 +11,7 @@
 
     <Rose::Dropdown
       @text={{t 'actions.choose-different-org'}}
-      @icon='user-organization'
+      @icon='flight-icons/org-16'
       as |dropdown|
     >
       <dropdown.link @route='scopes.scope.authenticate' @model='global'>
@@ -67,7 +67,7 @@
       <Rose::Layout::Centered>
         <Rose::Message
           @title={{t 'resources.auth-method.messages.none.title'}}
-          @icon='alert-circle-outline'
+          @icon='flight-icons/alert-circle-16'
           as |message|
         >
           <message.description>

ui/desktop/app/templates/scopes/scope/authenticate/index.hbs

@@ -2,7 +2,7 @@
   <Rose::Layout::Centered>
     <Rose::Message
       @title={{t 'resources.auth-method.messages.none.title'}}
-      @icon='alert-circle-outline'
+      @icon='flight-icons/alert-circle-16'
       as |message|
     >
       <message.description>

ui/desktop/app/templates/scopes/scope/projects.hbs

@@ -2,12 +2,12 @@
   <sidebarLayout.sidebar>
     <Rose::Nav::Sidebar as |nav|>
       <nav.link @route='scopes.scope.projects.targets'>
-        <Rose::Icon @name='app-icons/target' @size='medium' />
+        <Rose::Icon @name='flight-icons/crosshair-16' @size='medium' />
         {{t 'resources.target.title_plural'}}
       </nav.link>
 
       <nav.link @route='scopes.scope.projects.sessions'>
-        <Rose::Icon @name='app-icons/action-session' @size='medium' />
+        <Rose::Icon @name='flight-icons/entry-point-16' @size='medium' />
         {{t 'resources.session.title_plural'}}
       </nav.link>
     </Rose::Nav::Sidebar>

ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs

@@ -29,7 +29,7 @@
               <row.headerCell class='nowrap'>
                 <Rose::Icon
                   class={{concat 'session-status-' model.status}}
-                  @name='app-icons/action-session'
+                  @name='flight-icons/entry-point-16'
                   @size='medium'
                 />
                 <Copyable

ui/desktop/app/templates/scopes/scope/projects/targets.hbs

@@ -44,7 +44,7 @@
                     credential.library.name
                     (concat ' (' credential.library.name ')')
                   }}'
-                  @icon='app-icons/credential'
+                  @icon='flight-icons/key-16'
                 >
                   <:header>
                     <Rose::Dropdown

ui/desktop/app/templates/scopes/scope/projects/targets/target/sessions.hbs

@@ -17,7 +17,7 @@
           <row.cell class='nowrap'>
             <Rose::Icon
               class={{concat 'session-status-' session.status}}
-              @name='app-icons/action-session'
+              @name='flight-icons/entry-point-16'
               @size='medium'
             />
             <Copyable

ui/desktop/tests/integration/components/card-test.js

@@ -30,7 +30,7 @@ module('Integration | Component | card', function (hooks) {
     await render(hbs`
       <Card
         @heading='This is a heading test'
-        @icon='key'>
+        @icon='flight-icons/key-16'>
         <:header></:header>
         <:body></:body>
         <:footer></:footer>

yarn.lock

@@ -2066,10 +2066,10 @@
   resolved "https://registry.yarnpkg.com/@handlebars/parser/-/parser-1.1.0.tgz#d6dbc7574774b238114582410e8fee0dc3532bdf"
   integrity sha512-rR7tJoSwJ2eooOpYGxGGW95sLq6GXUaS1UtWvN7pei6n2/okYvCGld9vsUTvkl2migxbkszsycwtMf/GEc1k1A==
 
-"@hashicorp/structure-icons@^1.9.0-0":
+"@hashicorp/flight-icons@0.0.6-beta":
-  version "1.9.2"
+  version "0.0.6-beta"
-  resolved "https://registry.yarnpkg.com/@hashicorp/structure-icons/-/structure-icons-1.9.2.tgz#c75f955b2eec414ecb92f3926c79b4ca01731d3c"
+  resolved "https://registry.yarnpkg.com/@hashicorp/flight-icons/-/flight-icons-0.0.6-beta.tgz#49da48d4966c13ef0636a9853dc208fccc8d5c88"
-  integrity sha512-AffJv0V9npr1EWlM1XrpaKPG9PzddV48OE+jspqy7aRoFZB5++oNnPx4MZQKmFInOljnzNwfktVRkJiQHy7haw==
+  integrity sha512-GJHFPig7n26mMyMDPuUiD2Szp8wEskkcLKxWGAx0wyCGASYotLgAYHAGfa4uLlUOsIkibxKjc/7Y/0ttQeN9hQ==
 
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"