Rename frontend icon component (#982)

2024-11-06 08:55:24 +00:00 · 2021-06-06 18:56:30 -07:00 · 2021-06-06 18:56:30 -07:00 · d82560f7d6
commit d82560f7d6
parent 6013194c1d
45 changed files with 195 additions and 196 deletions
--- a/assets/fonts/fleeticons/fleeticons.woff
+++ b/assets/fonts/fleeticons/fleeticons.woff
--- a/assets/fonts/fleeticons/fleeticons.woff2
+++ b/assets/fonts/fleeticons/fleeticons.woff2
--- a/frontend/components/Pagination/Pagination.jsx
+++ b/frontend/components/Pagination/Pagination.jsx
@ -2,7 +2,7 @@ import React, { PureComponent } from "react";
 import PropTypes from "prop-types";

 import Button from "components/buttons/Button";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";

 const baseClass = "pagination";

@ -37,14 +37,14 @@ class Pagination extends PureComponent {
          disabled={this.disablePrev()}
          onClick={() => onPaginationChange(currentPage - 1)}
        >
-          <KolideIcon name="chevronleft" /> Prev
+          <FleetIcon name="chevronleft" /> Prev
        </Button>
        <Button
          variant="unstyled"
          disabled={this.disableNext()}
          onClick={() => onPaginationChange(currentPage + 1)}
        >
-          Next <KolideIcon name="chevronright" />
+          Next <FleetIcon name="chevronright" />
        </Button>
      </div>
    );
--- a/frontend/components/Pagination/_style.scss
+++ b/frontend/components/Pagination/_style.scss
@ -11,11 +11,11 @@
      color: $core-vibrant-blue;
      padding: 6px;

-      .kolidecon-chevronleft {
+      .fleeticon-chevronleft {
        margin-right: $pad-small;
      }

-      .kolidecon-chevronright {
+      .fleeticon-chevronright {
        margin-left: $pad-small;
      }
    }
--- a/frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.jsx
+++ b/frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.jsx
@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { Link } from "react-router";
 import classnames from "classnames";

-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";

 const baseClass = "stacked-white-boxes";

@ -80,7 +80,7 @@ class StackedWhiteBoxes extends Component {
          className={`${baseClass}__back-link`}
          onClick={nowLeaving}
        >
-          <KolideIcon name="x" />
+          <FleetIcon name="x" />
        </Link>
      </div>
    );
--- a/frontend/components/TableContainer/_styles.scss
+++ b/frontend/components/TableContainer/_styles.scss
@ -50,7 +50,7 @@
      width: 100%;
    }

-    .kolidecon {
+    .fleeticon {
      position: absolute;
      top: 10px;
      left: 12px;
--- a/frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx
+++ b/frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx
@ -5,7 +5,7 @@ import FileSaver from "file-saver";
 import Button from "components/buttons/Button";
 import enrollSecretInterface from "interfaces/enroll_secret";
 import InputField from "components/forms/fields/InputField";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import { stringToClipboard } from "utilities/copy_text";
 import EyeIcon from "../../../../assets/images/icon-eye-16x16@2x.png";
 import DownloadIcon from "../../../../assets/images/icon-download-12x12@2x.png";
@ -72,7 +72,7 @@ class EnrollSecretRow extends Component {
            className={`${baseClass}__secret-copy-icon`}
            onClick={onCopySecret}
          >
-            <KolideIcon name="clipboard" />
+            <FleetIcon name="clipboard" />
          </Button>
          <a
            href="#showSecret"
--- a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
+++ b/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import classnames from "classnames";

 import notificationInterface from "interfaces/notification";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import Button from "components/buttons/Button";

 const baseClass = "flash-message";
@ -29,7 +29,7 @@ const FlashMessage = ({
  return (
    <div className={klass}>
      <div className={`${baseClass}__content`}>
-        <KolideIcon name={alertIcon} /> <span>{message}</span>
+        <FleetIcon name={alertIcon} /> <span>{message}</span>
        {undoAction && (
          <Button
            className={`${baseClass}__undo`}
@ -46,7 +46,7 @@ const FlashMessage = ({
          variant="unstyled"
          onClick={onRemoveFlash}
        >
-          <KolideIcon name="x" />
+          <FleetIcon name="x" />
        </Button>
      </div>
    </div>
--- a/frontend/components/flash_messages/FlashMessage/_styles.scss
+++ b/frontend/components/flash_messages/FlashMessage/_styles.scss
@ -25,13 +25,13 @@
  }

  &--success {
-    .kolidecon {
+    .fleeticon {
      color: $ui-success;
    }
  }

  &--error {
-    .kolidecon {
+    .fleeticon {
      color: $ui-error;
    }
  }
@ -45,7 +45,7 @@
      margin-right: 15px;
    }

-    .kolidecon {
+    .fleeticon {
      font-size: $large;
    }
  }
@ -64,7 +64,7 @@
    text-align: center;
    margin-left: 15px;

-    .kolidecon {
+    .fleeticon {
      transition: color 150ms ease-in-out;
      color: $core-fleet-blue;
      font-size: $large;
--- a/frontend/components/flash_messages/PersistentFlash/PersistentFlash.jsx
+++ b/frontend/components/flash_messages/PersistentFlash/PersistentFlash.jsx
@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";

-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";

 const baseClass = "persistent-flash";

@ -12,7 +12,7 @@ const PersistentFlash = ({ message }) => {
  return (
    <div className={klass}>
      <div className={`${baseClass}__content`}>
-        <KolideIcon name="warning-filled" /> <span>{message}</span>
+        <FleetIcon name="warning-filled" /> <span>{message}</span>
      </div>
    </div>
  );
--- a/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
+++ b/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
@ -28,7 +28,7 @@
  }

  &__fields {
-    .kolidecon {
+    .fleeticon {
      margin-right: 6px;
      margin-left: 6px;
    }
--- a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
+++ b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";

-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import InputField from "../InputField";

 const baseClass = "input-icon-field";
@ -90,7 +90,7 @@ class InputFieldWithIcon extends InputField {
          type={type}
          value={value}
        />
-        {iconName && <KolideIcon name={iconName} className={iconClasses} />}
+        {iconName && <FleetIcon name={iconName} className={iconClasses} />}
        {renderHint()}
      </div>
    );
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
@ -5,7 +5,7 @@ import AceEditor from "react-ace";
 import classnames from "classnames";

 import { humanHostMemory } from "fleet/helpers";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import PlatformIcon from "components/icons/PlatformIcon";
 import targetInterface from "interfaces/target";

@ -66,23 +66,23 @@ class TargetDetails extends Component {
          className={`button button--unstyled ${hostBaseClass}__back`}
          onClick={handleBackToResults}
        >
-          <KolideIcon name="chevronleft" />
+          <FleetIcon name="chevronleft" />
          Back
        </button>

        <p className={`${hostBaseClass}__display-text`}>
-          <KolideIcon name="single-host" className={`${hostBaseClass}__icon`} />
+          <FleetIcon name="single-host" className={`${hostBaseClass}__icon`} />
          <span>{displayText}</span>
        </p>
        <p className={statusClassName}>
          {isOnline && (
-            <KolideIcon
+            <FleetIcon
              name="success-check"
              className={`${hostBaseClass}__icon ${hostBaseClass}__icon--online`}
            />
          )}
          {isOffline && (
-            <KolideIcon
+            <FleetIcon
              name="offline"
              className={`${hostBaseClass}__icon ${hostBaseClass}__icon--offline`}
            />
@ -150,11 +150,11 @@ class TargetDetails extends Component {
          className={`button button--unstyled ${labelBaseClass}__back`}
          onClick={handleBackToResults}
        >
-          <KolideIcon name="chevronleft" /> Back
+          <FleetIcon name="chevronleft" /> Back
        </button>

        <p className={`${labelBaseClass}__display-text`}>
-          <KolideIcon name="label" fw className={`${labelBaseClass}__icon`} />
+          <FleetIcon name="label" fw className={`${labelBaseClass}__icon`} />
          <span>{displayText}</span>
        </p>

--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.tests.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.tests.jsx
@ -48,9 +48,9 @@ describe("TargetDetails - component", () => {
      it("renders a success check icon when the target is online", () => {
        const target = { ...Test.Stubs.hostStub, status: "online" };
        const Component = mount(<TargetDetails target={target} />);
-        const KolideIcon = Component.find("KolideIcon");
-        const onlineIcon = KolideIcon.find(".host-target__icon--online");
-        const offlineIcon = KolideIcon.find(".host-target__icon--offline");
+        const FleetIcon = Component.find("FleetIcon");
+        const onlineIcon = FleetIcon.find(".host-target__icon--online");
+        const offlineIcon = FleetIcon.find(".host-target__icon--offline");

        expect(onlineIcon.length).toBeGreaterThan(
          0,
@ -65,9 +65,9 @@ describe("TargetDetails - component", () => {
      it("renders a offline icon when the target is offline", () => {
        const target = { ...Test.Stubs.hostStub, status: "offline" };
        const Component = mount(<TargetDetails target={target} />);
-        const KolideIcon = Component.find("KolideIcon");
-        const onlineIcon = KolideIcon.find(".host-target__icon--online");
-        const offlineIcon = KolideIcon.find(".host-target__icon--offline");
+        const FleetIcon = Component.find("FleetIcon");
+        const onlineIcon = FleetIcon.find(".host-target__icon--online");
+        const offlineIcon = FleetIcon.find(".host-target__icon--offline");

        expect(onlineIcon.length).toEqual(
          0,
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx
@ -1,7 +1,7 @@
 import React from "react";
 import classnames from "classnames";

-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import targetInterface from "interfaces/target";

 const baseClass = "target-option";
@ -24,7 +24,7 @@ const TargetIcon = ({ target }) => {
    `${baseClass}__icon--${status}`
  );

-  return <KolideIcon name={iconName()} className={targetClasses} />;
+  return <FleetIcon name={iconName()} className={targetClasses} />;
 };

 TargetIcon.propTypes = { target: targetInterface.isRequired };
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.tests.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.tests.jsx
@ -23,7 +23,7 @@ describe("TargetOption - component", () => {
      />
    );
    expect(component.find(".is-host").length).toEqual(1);
-    expect(component.find("i.kolidecon-windows").length).toEqual(1);
+    expect(component.find("i.fleeticon-windows").length).toEqual(1);
    expect(component.text()).toContain(hostStub.primary_ip);
  });

--- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
@ -135,7 +135,7 @@
      position: relative;

      &::after {
-        @extend %kolidecon;
+        @extend %fleeticon;
        content: "\f03c";
        font-size: 150px;
        position: absolute;
--- a/frontend/components/icons/KolideIcon/KolideIcon.jsx
+++ b/frontend/components/icons/KolideIcon/KolideIcon.jsx
@ -2,9 +2,9 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";

-const baseClass = "kolidecon";
+const baseClass = "fleeticon";

-export class KolideIcon extends Component {
+export class FleetIcon extends Component {
  static propTypes = {
    className: PropTypes.string,
    fw: PropTypes.bool,
@ -29,4 +29,4 @@ export class KolideIcon extends Component {
  }
 }

-export default KolideIcon;
+export default FleetIcon;
--- a/frontend/components/icons/FleetIcon/FleetIcon.tests.jsx
+++ b/frontend/components/icons/FleetIcon/FleetIcon.tests.jsx
@ -0,0 +1,10 @@
+import React from "react";
+import { mount } from "enzyme";
+
+import FleetIcon from "./FleetIcon";
+
+describe("FleetIcon - component", () => {
+  it("renders", () => {
+    expect(mount(<FleetIcon name="success-check" />)).toBeTruthy();
+  });
+});
--- a/frontend/components/icons/FleetIcon/index.js
+++ b/frontend/components/icons/FleetIcon/index.js
@ -0,0 +1 @@
+export { default } from "./FleetIcon";
--- a/frontend/components/icons/KolideIcon/KolideIcon.tests.jsx
+++ b/frontend/components/icons/KolideIcon/KolideIcon.tests.jsx
@ -1,10 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-
-import KolideIcon from "./KolideIcon";
-
-describe("KolideIcon - component", () => {
-  it("renders", () => {
-    expect(mount(<KolideIcon name="success-check" />)).toBeTruthy();
-  });
-});
--- a/frontend/components/icons/KolideIcon/index.js
+++ b/frontend/components/icons/KolideIcon/index.js
@ -1 +0,0 @@
-export { default } from "./KolideIcon";
--- a/frontend/components/icons/PlatformIcon/PlatformIcon.jsx
+++ b/frontend/components/icons/PlatformIcon/PlatformIcon.jsx
@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";

-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import platformIconClass from "utilities/platform_icon_class";

 const baseClass = "platform-icon";
@ -26,7 +26,7 @@ export class PlatformIcon extends Component {
    }

    return (
-      <KolideIcon
+      <FleetIcon
        className={iconClasses}
        fw={fw}
        name={iconName}
--- a/frontend/components/icons/PlatformIcon/PlatformIcon.tests.jsx
+++ b/frontend/components/icons/PlatformIcon/PlatformIcon.tests.jsx
@ -11,6 +11,6 @@ describe("PlatformIcon - component", () => {
  it("renders text if no icon", () => {
    const component = mount(<PlatformIcon name="All" />);

-    expect(component.find(".kolidecon-single-host").length).toEqual(1);
+    expect(component.find(".fleeticon-single-host").length).toEqual(1);
  });
 });
--- a/frontend/components/packs/EditPackFormWrapper/_styles.scss
+++ b/frontend/components/packs/EditPackFormWrapper/_styles.scss
@ -6,7 +6,7 @@
  &__title {
    @include ellipsis(80%);

-    .kolidecon {
+    .fleeticon {
      color: $ui-gray;
    }
  }
--- a/frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx
+++ b/frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx
@ -6,7 +6,7 @@ import { keys, omit } from "lodash";
 import Button from "components/buttons/Button";
 import campaignInterface from "interfaces/campaign";
 import filterArrayByHash from "utilities/filter_array_by_hash";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import InputField from "components/forms/fields/InputField";
 import QueryResultsRow from "components/queries/QueryResultsTable/QueryResultsRow";
 import QueryProgressDetails from "components/queries/QueryProgressDetails";
@ -68,7 +68,7 @@ class QueryResultsTable extends Component {
    return (
      <th key={`query-results-table-header-${index}`}>
        <span>
-          <KolideIcon className={filterIconClassName} name="filter" />
+          <FleetIcon className={filterIconClassName} name="filter" />
          {column}
        </span>
        <InputField
@ -202,7 +202,7 @@ class QueryResultsTable extends Component {
            onClick={onToggleQueryFullScreen}
            variant="grey"
          >
-            <KolideIcon name={isQueryFullScreen ? "windowed" : "fullscreen"} />
+            <FleetIcon name={isQueryFullScreen ? "windowed" : "fullscreen"} />
          </Button>
          {!hasNoResults && !queryIsRunning && (
            <Button
--- a/frontend/components/queries/QueryResultsTable/_styles.scss
+++ b/frontend/components/queries/QueryResultsTable/_styles.scss
@ -96,7 +96,7 @@
      span {
        white-space: nowrap;

-        .kolidecon {
+        .fleeticon {
          margin-right: 5px;
        }
      }
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.jsx
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.jsx
@ -4,7 +4,7 @@ import classnames from "classnames";
 import { includes, sortBy, size } from "lodash";

 import queryInterface from "interfaces/query";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import QueriesListItem from "components/queries/ScheduledQueriesList/ScheduledQueriesListItem";
 import Checkbox from "components/forms/fields/Checkbox";

@ -108,20 +108,19 @@ class ScheduledQueriesList extends Component {
            <ul>
              <li>
                <strong>
-                  <KolideIcon name="plus-minus" /> Differential:
+                  <FleetIcon name="plus-minus" /> Differential:
                </strong>{" "}
                show only what’s added from last run
              </li>
              <li>
                <strong>
-                  <KolideIcon name="bold-plus" /> Differential (ignore
-                  removals):
+                  <FleetIcon name="bold-plus" /> Differential (ignore removals):
                </strong>{" "}
                show only what’s been added since the last run
              </li>
              <li>
                <strong>
-                  <KolideIcon name="camera" /> Snapshot:
+                  <FleetIcon name="camera" /> Snapshot:
                </strong>{" "}
                show everything in its current state
              </li>
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
@ -4,7 +4,7 @@ import classnames from "classnames";

 import Checkbox from "components/forms/fields/Checkbox";
 import ClickableTableRow from "components/ClickableTableRow";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import { isEqual, find } from "lodash";
 import scheduledQueryInterface from "interfaces/scheduled_query";

@ -130,7 +130,7 @@ class ScheduledQueriesListItem extends Component {
        <td>{version ? `${version}+` : "Any"}</td>
        <td>{shard}</td>
        <td>
-          <KolideIcon name={loggingTypeString()} />
+          <FleetIcon name={loggingTypeString()} />
        </td>
      </ClickableTableRow>
    );
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx
@ -114,33 +114,33 @@ describe("ScheduledQueriesListItem - component", () => {
    const props = { ...defaultProps, scheduledQuery: query };
    let component = shallow(<ScheduledQueriesListItem {...props} />);

-    expect(component.find("KolideIcon").last().props().name).toEqual("camera");
+    expect(component.find("FleetIcon").last().props().name).toEqual("camera");

    query.snapshot = false;
    query.removed = false;
    component = shallow(<ScheduledQueriesListItem {...props} />);
-    expect(component.find("KolideIcon").last().props().name).toEqual(
+    expect(component.find("FleetIcon").last().props().name).toEqual(
      "bold-plus"
    );

    query.snapshot = false;
    query.removed = null;
    component = shallow(<ScheduledQueriesListItem {...props} />);
-    expect(component.find("KolideIcon").last().props().name).toEqual(
+    expect(component.find("FleetIcon").last().props().name).toEqual(
      "plus-minus"
    );

    query.snapshot = false;
    query.removed = true;
    component = shallow(<ScheduledQueriesListItem {...props} />);
-    expect(component.find("KolideIcon").last().props().name).toEqual(
+    expect(component.find("FleetIcon").last().props().name).toEqual(
      "plus-minus"
    );

    query.snapshot = null;
    query.removed = true;
    component = shallow(<ScheduledQueriesListItem {...props} />);
-    expect(component.find("KolideIcon").last().props().name).toEqual(
+    expect(component.find("FleetIcon").last().props().name).toEqual(
      "plus-minus"
    );
  });
--- a/frontend/components/queries/ScheduledQueriesList/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesList/_styles.scss
@ -108,7 +108,7 @@
          text-align: left;
          color: $core-fleet-black;

-          .kolidecon {
+          .fleeticon {
            font-size: 18px;
          }
        }
--- a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
@ -6,7 +6,7 @@
    margin: 0;
    font-size: $small;

-    .kolidecon {
+    .fleeticon {
      color: $core-fleet-blue;
      margin-right: 6px;
    }
--- a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx
+++ b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx
@ -6,7 +6,7 @@ import IconToolTip from "components/IconToolTip";
 import osqueryTableInterface from "interfaces/osquery_table";
 import { osqueryTableNames } from "utilities/osquery_tables";
 import Dropdown from "components/forms/fields/Dropdown";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import SecondarySidePanelContainer from "../SecondarySidePanelContainer";

 import displayTypeForDataType from "./helpers";
@ -103,13 +103,13 @@ class QuerySidePanel extends Component {
              if (platform === "all") {
                return (
                  <li key={platform}>
-                    <KolideIcon name="hosts" /> {platform}
+                    <FleetIcon name="hosts" /> {platform}
                  </li>
                );
              } else if (platform === "freebsd") {
                return (
                  <li key={platform}>
-                    <KolideIcon name="single-host" /> {platform}
+                    <FleetIcon name="single-host" /> {platform}
                  </li>
                );
              }
--- a/frontend/components/side_panels/QuerySidePanel/_styles.scss
+++ b/frontend/components/side_panels/QuerySidePanel/_styles.scss
@ -34,7 +34,7 @@
    margin: 0 0 $pad-large;
    padding: 0;

-    .kolidecon {
+    .fleeticon {
      font-size: 18px;
      margin-right: $pad-medium;
    }
--- a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx
@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import AceEditor from "react-ace";
 import { isEqual, sortBy } from "lodash";

-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import queryInterface from "interfaces/query";
 import Dropdown from "components/forms/fields/Dropdown";

@ -59,7 +59,7 @@ class SearchPackQuery extends Component {
    if (selectedQuery) {
      return (
        <h1 className={`${baseClass}__title`}>
-          <KolideIcon name="query" /> {selectedQuery.name}
+          <FleetIcon name="query" /> {selectedQuery.name}
        </h1>
      );
    }
--- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
+++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
@ -33,7 +33,7 @@
    }

    &::after {
-      @extend %kolidecon;
+      @extend %fleeticon;
      @include size(24px);
      background-color: transparent;
      display: block;
--- a/frontend/pages/UserSettingsPage/UserSettingsPage.jsx
+++ b/frontend/pages/UserSettingsPage/UserSettingsPage.jsx
@ -17,7 +17,7 @@ import Button from "components/buttons/Button";
 import ChangeEmailForm from "components/forms/ChangeEmailForm";
 import ChangePasswordForm from "components/forms/ChangePasswordForm";
 import deepDifference from "utilities/deep_difference";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import InputField from "components/forms/fields/InputField";
 import { logoutUser, updateUser } from "redux/nodes/auth/actions";
 import Modal from "components/modals/Modal";
@ -278,7 +278,7 @@ export class UserSettingsPage extends Component {
            className={`${baseClass}__secret-copy-icon`}
            onClick={onCopySecret(`.${baseClass}__secret-input`)}
          >
-            <KolideIcon name="clipboard" />
+            <FleetIcon name="clipboard" />
          </Button>
        </div>
        <div className={`${baseClass}__button-wrap`}>
--- a/frontend/pages/UserSettingsPage/_styles.scss
+++ b/frontend/pages/UserSettingsPage/_styles.scss
@ -64,7 +64,7 @@
  &__more-info-detail {
    color: $core-fleet-black;

-    .kolidecon {
+    .fleeticon {
      color: $ui-gray;
      font-size: 18px;
      margin-right: 11px;
--- a/frontend/pages/admin/AppSettingsPage/_styles.scss
+++ b/frontend/pages/admin/AppSettingsPage/_styles.scss
@ -19,7 +19,7 @@
      text-decoration: none;
    }

-    .kolidecon {
+    .fleeticon {
      font-size: 8px;
      margin: 0 20px;
      vertical-align: 4px;
--- a/frontend/pages/hosts/HostDetailsPage/SelectQueryModal/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/SelectQueryModal/_styles.scss
@ -80,7 +80,7 @@
      padding-left: 44px;
    }

-    .kolidecon {
+    .fleeticon {
      position: absolute;
      top: 10px;
      left: 10px;
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@ -22,20 +22,20 @@
  &__title {
    font-size: $large;

-    .kolidecon {
+    .fleeticon {
      color: $core-fleet-blue;
      margin-right: 15px;
    }

-    .kolidecon-success-check {
+    .fleeticon-success-check {
      color: $ui-success;
    }

-    .kolidecon-offline {
+    .fleeticon-offline {
      color: $ui-error;
    }

-    .kolidecon-mia {
+    .fleeticon-mia {
      color: $core-fleet-black;
    }
  }
@ -67,7 +67,7 @@
  }

  &__toggle-view {
-    .kolidecon {
+    .fleeticon {
      width: 24px;
      height: 24px;
      margin-left: 12px;
@ -75,7 +75,7 @@
    }

    &--active {
-      .kolidecon {
+      .fleeticon {
        fill: $core-fleet-purple;
      }
    }
--- a/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/AddHostModal.jsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/AddHostModal.jsx
@ -9,7 +9,7 @@ import teamInterface from "interfaces/team";
 import enrollSecretInterface from "interfaces/enroll_secret";
 import permissionUtils from "utilities/permissions";
 import EnrollSecretTable from "components/config/EnrollSecretTable";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import Dropdown from "components/forms/fields/Dropdown";
 import DownloadIcon from "../../../../../../assets/images/icon-download-12x12@2x.png";

@ -157,7 +157,7 @@ class AddHostModal extends Component {
                target="_blank"
                rel="noopener noreferrer"
              >
-                Add Hosts Documentation <KolideIcon name="external-link" />
+                Add Hosts Documentation <FleetIcon name="external-link" />
              </a>
            </h4>
          </div>
--- a/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/AddHostModal/_styles.scss
@ -21,7 +21,7 @@
      margin: 0;
    }

-    .kolidecon {
+    .fleeticon {
      float: left;
      font-size: 44px;
      color: #48c586;
@ -35,7 +35,7 @@
      font-weight: $bold;
      margin: $pad-xlarge 0 0;

-      .kolidecon {
+      .fleeticon {
        margin-left: 5px;
        font-size: 18px;
      }
--- a/frontend/styles/global/_fonts.scss
+++ b/frontend/styles/global/_fonts.scss
@ -36,9 +36,9 @@
 }

@font-face {
-  font-family: "kolidecons";
-  src: url("../assets/fonts/kolidecons/kolidecons.woff2") format("woff2"),
-    url("../assets/fonts/kolidecons/kolidecons.woff") format("woff");
+  font-family: "fleeticons";
+  src: url("../assets/fonts/fleeticons/fleeticons.woff2") format("woff2"),
+    url("../assets/fonts/fleeticons/fleeticons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
 }
--- a/frontend/styles/global/_icons.scss
+++ b/frontend/styles/global/_icons.scss
@ -1,378 +1,378 @@
-%kolidecon {
+%fleeticon {
  display: inline-block;
-  font: normal normal normal 14px/1 "kolidecons";
+  font: normal normal normal 14px/1 "fleeticons";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

-[class^="kolidecon-"],
-[class*=" kolidecon-"],
-.kolidecon {
-  @extend %kolidecon;
+[class^="fleeticon-"],
+[class*=" fleeticon-"],
+.fleeticon {
+  @extend %fleeticon;
 }

-.kolidecon-lg {
+.fleeticon-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
 }

-.kolidecon-2x {
+.fleeticon-2x {
  font-size: 2em;
 }

-.kolidecon-3x {
+.fleeticon-3x {
  font-size: 3em;
 }

-.kolidecon-4x {
+.fleeticon-4x {
  font-size: 4em;
 }

-.kolidecon-5x {
+.fleeticon-5x {
  font-size: 5em;
 }

-.kolidecon-fw {
+.fleeticon-fw {
  width: 1.28571429em;
  text-align: center;
 }

-.kolidecon-kolide-logo-flat:before {
+.fleeticon-kolide-logo-flat:before {
  content: "\f000";
 }

-.kolidecon-chevrondown:before {
+.fleeticon-chevrondown:before {
  content: "\f004";
 }

-.kolidecon-chevronleft:before {
+.fleeticon-chevronleft:before {
  content: "\f006";
 }

-.kolidecon-chevronright:before {
+.fleeticon-chevronright:before {
  content: "\f008";
 }

-.kolidecon-chevronup:before {
+.fleeticon-chevronup:before {
  content: "\f00a";
 }

-.kolidecon-cpu:before {
+.fleeticon-cpu:before {
  content: "\f00c";
 }

-.kolidecon-downcarat:before {
+.fleeticon-downcarat:before {
  content: "\f00d";
 }

-.kolidecon-filter:before {
+.fleeticon-filter:before {
  content: "\f00f";
 }

-.kolidecon-mac:before {
+.fleeticon-mac:before {
  content: "\f012";
 }

-.kolidecon-memory:before {
+.fleeticon-memory:before {
  content: "\f013";
 }

-.kolidecon-storage:before {
+.fleeticon-storage:before {
  content: "\f019";
 }

-.kolidecon-upcarat:before {
+.fleeticon-upcarat:before {
  content: "\f01b";
 }

-.kolidecon-uptime:before {
+.fleeticon-uptime:before {
  content: "\f01c";
 }

-.kolidecon-world:before {
+.fleeticon-world:before {
  content: "\f01d";
 }

-.kolidecon-osquery:before {
+.fleeticon-osquery:before {
  content: "\f021";
 }

-.kolidecon-join:before {
+.fleeticon-join:before {
  content: "\f022";
 }

-.kolidecon-add-button:before {
+.fleeticon-add-button:before {
  content: "\f029";
 }

-.kolidecon-packs:before {
+.fleeticon-packs:before {
  content: "\f02f";
 }

-.kolidecon-help:before {
+.fleeticon-help:before {
  content: "\f030";
 }

-.kolidecon-admin:before {
+.fleeticon-admin:before {
  content: "\f031";
 }

-.kolidecon-config:before {
+.fleeticon-config:before {
  content: "\f032";
 }

-.kolidecon-mia:before {
+.fleeticon-mia:before {
  content: "\f034";
 }

-.kolidecon-success-check:before {
+.fleeticon-success-check:before {
  content: "\f035";
 }

-.kolidecon-offline:before {
+.fleeticon-offline:before {
  content: "\f036";
 }

-.kolidecon-windows-original:before {
+.fleeticon-windows-original:before {
  content: "\f037";
 }

-.kolidecon-centos-original:before {
+.fleeticon-centos-original:before {
  content: "\f038";
 }

-.kolidecon-ubuntu-original:before {
+.fleeticon-ubuntu-original:before {
  content: "\f039";
 }

-.kolidecon-apple-original:before {
+.fleeticon-apple-original:before {
  content: "\f03a";
 }

-.kolidecon-search:before {
+.fleeticon-search:before {
  content: "\f03b";
 }

-.kolidecon-all-hosts:before {
+.fleeticon-all-hosts:before {
  content: "\f03c";
 }

-.kolidecon-alerts:before {
+.fleeticon-alerts:before {
  content: "\f03e";
 }

-.kolidecon-logout:before {
+.fleeticon-logout:before {
  content: "\f03f";
 }

-.kolidecon-user-settings:before {
+.fleeticon-user-settings:before {
  content: "\f040";
 }

-.kolidecon-clipboard:before {
+.fleeticon-clipboard:before {
  content: "\f043";
 }

-.kolidecon-list-select:before {
+.fleeticon-list-select:before {
  content: "\f044";
 }

-.kolidecon-grid-select:before {
+.fleeticon-grid-select:before {
  content: "\f045";
 }

-.kolidecon-label:before {
+.fleeticon-label:before {
  content: "\f033";
 }

-.kolidecon-docker:before {
+.fleeticon-docker:before {
  content: "\f046";
 }

-.kolidecon-cloud:before {
+.fleeticon-cloud:before {
  content: "\f047";
 }

-.kolidecon-self-hosted:before {
+.fleeticon-self-hosted:before {
  content: "\f048";
 }

-.kolidecon-help-solid:before {
+.fleeticon-help-solid:before {
  content: "\f049";
 }

-.kolidecon-help-stroke:before {
+.fleeticon-help-stroke:before {
  content: "\f04a";
 }

-.kolidecon-warning-filled:before {
+.fleeticon-warning-filled:before {
  content: "\f04b";
 }

-.kolidecon-delete-cloud:before {
+.fleeticon-delete-cloud:before {
  content: "\f04c";
 }

-.kolidecon-pdf:before {
+.fleeticon-pdf:before {
  content: "\f04d";
 }

-.kolidecon-credit-card-small:before {
+.fleeticon-credit-card-small:before {
  content: "\f04e";
 }

-.kolidecon-billing-card:before {
+.fleeticon-billing-card:before {
  content: "\f04f";
 }

-.kolidecon-lock-big:before {
+.fleeticon-lock-big:before {
  content: "\f050";
 }

-.kolidecon-link-big:before {
+.fleeticon-link-big:before {
  content: "\f051";
 }

-.kolidecon-briefcase:before {
+.fleeticon-briefcase:before {
  content: "\f052";
 }

-.kolidecon-name-card:before {
+.fleeticon-name-card:before {
  content: "\f053";
 }

-.kolidecon-kolide-logo:before {
+.fleeticon-kolide-logo:before {
  content: "\f054";
 }

-.kolidecon-business:before {
+.fleeticon-business:before {
  content: "\f055";
 }

-.kolidecon-clock:before {
+.fleeticon-clock:before {
  content: "\f056";
 }

-.kolidecon-host-large:before {
+.fleeticon-host-large:before {
  content: "\f057";
 }

-.kolidecon-single-host:before {
+.fleeticon-single-host:before {
  content: "\f03d";
 }

-.kolidecon-username:before {
+.fleeticon-username:before {
  content: "\f02a";
 }

-.kolidecon-password:before {
+.fleeticon-password:before {
  content: "\f02b";
 }

-.kolidecon-email:before {
+.fleeticon-email:before {
  content: "\f02c";
 }

-.kolidecon-hosts:before {
+.fleeticon-hosts:before {
  content: "\f02e";
 }

-.kolidecon-query:before {
+.fleeticon-query:before {
  content: "\f02d";
 }

-.kolidecon-import:before {
+.fleeticon-import:before {
  content: "\f058";
 }

-.kolidecon-pencil:before {
+.fleeticon-pencil:before {
  content: "\f059";
 }

-.kolidecon-add-plus:before {
+.fleeticon-add-plus:before {
  content: "\f05a";
 }

-.kolidecon-x:before {
+.fleeticon-x:before {
  content: "\f05b";
 }

-.kolidecon-kill-kolide:before {
+.fleeticon-kill-kolide:before {
  content: "\f05c";
 }

-.kolidecon-right-arrow:before {
+.fleeticon-right-arrow:before {
  content: "\f05d";
 }

-.kolidecon-camera:before {
+.fleeticon-camera:before {
  content: "\f05e";
 }

-.kolidecon-plus-minus:before {
+.fleeticon-plus-minus:before {
  content: "\f05f";
 }

-.kolidecon-bold-plus:before {
+.fleeticon-bold-plus:before {
  content: "\f060";
 }

-.kolidecon-linux-original:before {
+.fleeticon-linux-original:before {
  content: "\f061";
 }

-.kolidecon-clock2:before {
+.fleeticon-clock2:before {
  content: "\f063";
 }

-.kolidecon-trash:before {
+.fleeticon-trash:before {
  content: "\f064";
 }

-.kolidecon-laptop-plus:before {
+.fleeticon-laptop-plus:before {
  content: "\f066";
 }

-.kolidecon-wrench-hand:before {
+.fleeticon-wrench-hand:before {
  content: "\f067";
 }

-.kolidecon-external-link:before {
+.fleeticon-external-link:before {
  content: "\f068";
 }

-.kolidecon-fullscreen:before {
+.fleeticon-fullscreen:before {
  content: "\f069";
 }

-.kolidecon-windowed:before {
+.fleeticon-windowed:before {
  content: "\f06a";
 }

-.kolidecon-heroku:before {
+.fleeticon-heroku:before {
  content: "\f06b";
 }

-.kolidecon-ubuntu:before {
+.fleeticon-ubuntu:before {
  content: "\f06c";
 }

-.kolidecon-windows:before {
+.fleeticon-windows:before {
  content: "\f06d";
 }

-.kolidecon-centos:before {
+.fleeticon-centos:before {
  content: "\f06e";
 }

-.kolidecon-apple:before {
+.fleeticon-apple:before {
  content: "\f06f";
 }

-.kolidecon-linux:before {
+.fleeticon-linux:before {
  content: "\f070";
 }