From 5ab7e488628242da3f7d4e4afccb0bbbf89b55fa Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Tue, 15 Mar 2022 12:54:14 +0000
Subject: [PATCH] ui: Native CSS Icon Composition (#12461)

This commit/PR beings to move away from using CSS preprocessing for our icons and towards using native CSS via native CSS property composition
---
 .changelog/12461.txt                          |     3 +
 .../app/components/composite-row/index.scss   |     2 +-
 .../app/components/copy-button/skin.scss      |    12 +-
 .../app/components/csv-list/index.scss        |     1 +
 .../app/components/freetext-filter/skin.scss  |     7 +-
 .../components/main-nav-horizontal/skin.scss  |    19 +-
 .../app/components/modal-dialog/layout.scss   |     3 +-
 .../app/components/modal-dialog/skin.scss     |     8 +-
 .../app/components/oidc-select/index.hbs      |     2 +-
 .../consul-ui/app/components/pill/index.scss  |    12 +
 .../consul-ui/app/components/pill/layout.scss |     3 +-
 .../app/components/progress/README.mdx        |    17 +-
 .../app/components/progress/index.hbs         |     1 +
 .../app/components/progress/layout.scss       |     4 -
 .../app/components/progress/skin.scss         |    15 +-
 .../app/components/secret-button/index.scss   |     3 +-
 .../topology-metrics/card/index.scss          |    12 +-
 .../topology-metrics/popover/index.scss       |     6 +-
 .../topology-metrics/status/index.scss        |     4 +-
 .../consul-ui/app/modifiers/css-props.js      |    10 +-
 .../app/styles/base/icons/README.mdx          |   161 +-
 .../app/styles/base/icons/base-keyframes.scss |    89 +
 .../styles/base/icons/base-placeholders.scss  |    17 -
 .../app/styles/base/icons/base-variables.scss |  4471 ------
 .../styles/base/icons/icon-placeholders.scss  | 11179 ----------------
 .../base/icons/icons/activity/index.scss      |     6 +
 .../base/icons/icons/activity/keyframes.scss  |    15 +
 .../icons/icons/activity/placeholders.scss    |    10 +
 .../icons/icons/activity/property-16.scss     |     3 +
 .../icons/icons/activity/property-24.scss     |     3 +
 .../icons/icons/alert-circle-fill/index.scss  |     6 +
 .../icons/alert-circle-fill/keyframes.scss    |    15 +
 .../icons/alert-circle-fill/placeholders.scss |    10 +
 .../icons/alert-circle-fill/property-16.scss  |     3 +
 .../icons/alert-circle-fill/property-24.scss  |     3 +
 .../icons/alert-circle-outline/index.scss     |     6 +
 .../icons/alert-circle-outline/keyframes.scss |    15 +
 .../alert-circle-outline/placeholders.scss    |    10 +
 .../base/icons/icons/alert-circle/index.scss  |     6 +
 .../icons/icons/alert-circle/keyframes.scss   |    15 +
 .../icons/alert-circle/placeholders.scss      |    10 +
 .../icons/icons/alert-circle/property-16.scss |     3 +
 .../icons/icons/alert-circle/property-24.scss |     3 +
 .../icons/icons/alert-octagon-fill/index.scss |     6 +
 .../icons/alert-octagon-fill/keyframes.scss   |    15 +
 .../alert-octagon-fill/placeholders.scss      |    10 +
 .../icons/alert-octagon-fill/property-16.scss |     3 +
 .../icons/alert-octagon-fill/property-24.scss |     3 +
 .../base/icons/icons/alert-octagon/index.scss |     6 +
 .../icons/icons/alert-octagon/keyframes.scss  |    15 +
 .../icons/alert-octagon/placeholders.scss     |    10 +
 .../icons/alert-octagon/property-16.scss      |     3 +
 .../icons/alert-octagon/property-24.scss      |     3 +
 .../icons/alert-triangle-fill/index.scss      |     6 +
 .../icons/alert-triangle-fill/keyframes.scss  |    15 +
 .../alert-triangle-fill/placeholders.scss     |    10 +
 .../alert-triangle-fill/property-16.scss      |     3 +
 .../alert-triangle-fill/property-24.scss      |     3 +
 .../icons/icons/alert-triangle/index.scss     |     6 +
 .../icons/icons/alert-triangle/keyframes.scss |    15 +
 .../icons/alert-triangle/placeholders.scss    |    10 +
 .../icons/alert-triangle/property-16.scss     |     3 +
 .../icons/alert-triangle/property-24.scss     |     3 +
 .../base/icons/icons/alibaba-color/index.scss |     6 +
 .../icons/icons/alibaba-color/keyframes.scss  |     9 +
 .../icons/alibaba-color/placeholders.scss     |    10 +
 .../icons/alibaba-color/property-16.scss      |     3 +
 .../icons/alibaba-color/property-24.scss      |     3 +
 .../base/icons/icons/alibaba/index.scss       |     6 +
 .../base/icons/icons/alibaba/keyframes.scss   |    15 +
 .../icons/icons/alibaba/placeholders.scss     |    10 +
 .../base/icons/icons/alibaba/property-16.scss |     3 +
 .../base/icons/icons/alibaba/property-24.scss |     3 +
 .../base/icons/icons/align-center/index.scss  |     6 +
 .../icons/icons/align-center/keyframes.scss   |    15 +
 .../icons/align-center/placeholders.scss      |    10 +
 .../icons/icons/align-center/property-16.scss |     3 +
 .../icons/icons/align-center/property-24.scss |     3 +
 .../base/icons/icons/align-justify/index.scss |     6 +
 .../icons/icons/align-justify/keyframes.scss  |    15 +
 .../icons/align-justify/placeholders.scss     |    10 +
 .../icons/align-justify/property-16.scss      |     3 +
 .../icons/align-justify/property-24.scss      |     3 +
 .../base/icons/icons/align-left/index.scss    |     6 +
 .../icons/icons/align-left/keyframes.scss     |    15 +
 .../icons/icons/align-left/placeholders.scss  |    10 +
 .../icons/icons/align-left/property-16.scss   |     3 +
 .../icons/icons/align-left/property-24.scss   |     3 +
 .../base/icons/icons/align-right/index.scss   |     6 +
 .../icons/icons/align-right/keyframes.scss    |    15 +
 .../icons/icons/align-right/placeholders.scss |    10 +
 .../icons/icons/align-right/property-16.scss  |     3 +
 .../icons/icons/align-right/property-24.scss  |     3 +
 .../icons/icons/amazon-eks-color/index.scss   |     6 +
 .../icons/amazon-eks-color/keyframes.scss     |     9 +
 .../icons/amazon-eks-color/placeholders.scss  |    10 +
 .../icons/amazon-eks-color/property-16.scss   |     3 +
 .../icons/amazon-eks-color/property-24.scss   |     3 +
 .../base/icons/icons/amazon-eks/index.scss    |     6 +
 .../icons/icons/amazon-eks/keyframes.scss     |    15 +
 .../icons/icons/amazon-eks/placeholders.scss  |    10 +
 .../icons/icons/amazon-eks/property-16.scss   |     3 +
 .../icons/icons/amazon-eks/property-24.scss   |     3 +
 .../base/icons/icons/apple-color/index.scss   |     6 +
 .../icons/icons/apple-color/keyframes.scss    |     9 +
 .../icons/icons/apple-color/placeholders.scss |    10 +
 .../icons/icons/apple-color/property-16.scss  |     3 +
 .../icons/icons/apple-color/property-24.scss  |     3 +
 .../styles/base/icons/icons/apple/index.scss  |     6 +
 .../base/icons/icons/apple/keyframes.scss     |    15 +
 .../base/icons/icons/apple/placeholders.scss  |    10 +
 .../base/icons/icons/apple/property-16.scss   |     3 +
 .../base/icons/icons/apple/property-24.scss   |     3 +
 .../base/icons/icons/archive/index.scss       |     6 +
 .../base/icons/icons/archive/keyframes.scss   |    15 +
 .../icons/icons/archive/placeholders.scss     |    10 +
 .../base/icons/icons/archive/property-16.scss |     3 +
 .../base/icons/icons/archive/property-24.scss |     3 +
 .../icons/icons/arrow-down-circle/index.scss  |     6 +
 .../icons/arrow-down-circle/keyframes.scss    |    15 +
 .../icons/arrow-down-circle/placeholders.scss |    10 +
 .../icons/arrow-down-circle/property-16.scss  |     3 +
 .../icons/arrow-down-circle/property-24.scss  |     3 +
 .../icons/icons/arrow-down-left/index.scss    |     6 +
 .../icons/arrow-down-left/keyframes.scss      |    15 +
 .../icons/arrow-down-left/placeholders.scss   |    10 +
 .../icons/arrow-down-left/property-16.scss    |     3 +
 .../icons/arrow-down-left/property-24.scss    |     3 +
 .../icons/icons/arrow-down-right/index.scss   |     6 +
 .../icons/arrow-down-right/keyframes.scss     |    15 +
 .../icons/arrow-down-right/placeholders.scss  |    10 +
 .../icons/arrow-down-right/property-16.scss   |     3 +
 .../icons/arrow-down-right/property-24.scss   |     3 +
 .../base/icons/icons/arrow-down/index.scss    |     6 +
 .../icons/icons/arrow-down/keyframes.scss     |    15 +
 .../icons/icons/arrow-down/placeholders.scss  |    10 +
 .../icons/icons/arrow-down/property-16.scss   |     3 +
 .../icons/icons/arrow-down/property-24.scss   |     3 +
 .../icons/icons/arrow-left-circle/index.scss  |     6 +
 .../icons/arrow-left-circle/keyframes.scss    |    15 +
 .../icons/arrow-left-circle/placeholders.scss |    10 +
 .../icons/arrow-left-circle/property-16.scss  |     3 +
 .../icons/arrow-left-circle/property-24.scss  |     3 +
 .../base/icons/icons/arrow-left/index.scss    |     6 +
 .../icons/icons/arrow-left/keyframes.scss     |    15 +
 .../icons/icons/arrow-left/placeholders.scss  |    10 +
 .../icons/icons/arrow-left/property-16.scss   |     3 +
 .../icons/icons/arrow-left/property-24.scss   |     3 +
 .../icons/icons/arrow-right-circle/index.scss |     6 +
 .../icons/arrow-right-circle/keyframes.scss   |    15 +
 .../arrow-right-circle/placeholders.scss      |    10 +
 .../icons/arrow-right-circle/property-16.scss |     3 +
 .../icons/arrow-right-circle/property-24.scss |     3 +
 .../base/icons/icons/arrow-right/index.scss   |     6 +
 .../icons/icons/arrow-right/keyframes.scss    |    15 +
 .../icons/icons/arrow-right/placeholders.scss |    10 +
 .../icons/icons/arrow-right/property-16.scss  |     3 +
 .../icons/icons/arrow-right/property-24.scss  |     3 +
 .../icons/icons/arrow-up-circle/index.scss    |     6 +
 .../icons/arrow-up-circle/keyframes.scss      |    15 +
 .../icons/arrow-up-circle/placeholders.scss   |    10 +
 .../icons/arrow-up-circle/property-16.scss    |     3 +
 .../icons/arrow-up-circle/property-24.scss    |     3 +
 .../base/icons/icons/arrow-up-left/index.scss |     6 +
 .../icons/icons/arrow-up-left/keyframes.scss  |    15 +
 .../icons/arrow-up-left/placeholders.scss     |    10 +
 .../icons/arrow-up-left/property-16.scss      |     3 +
 .../icons/arrow-up-left/property-24.scss      |     3 +
 .../icons/icons/arrow-up-right/index.scss     |     6 +
 .../icons/icons/arrow-up-right/keyframes.scss |    15 +
 .../icons/arrow-up-right/placeholders.scss    |    10 +
 .../icons/arrow-up-right/property-16.scss     |     3 +
 .../icons/arrow-up-right/property-24.scss     |     3 +
 .../base/icons/icons/arrow-up/index.scss      |     6 +
 .../base/icons/icons/arrow-up/keyframes.scss  |    15 +
 .../icons/icons/arrow-up/placeholders.scss    |    10 +
 .../icons/icons/arrow-up/property-16.scss     |     3 +
 .../icons/icons/arrow-up/property-24.scss     |     3 +
 .../base/icons/icons/at-sign/index.scss       |     6 +
 .../base/icons/icons/at-sign/keyframes.scss   |    15 +
 .../icons/icons/at-sign/placeholders.scss     |    10 +
 .../base/icons/icons/at-sign/property-16.scss |     3 +
 .../base/icons/icons/at-sign/property-24.scss |     3 +
 .../base/icons/icons/auth0-color/index.scss   |     6 +
 .../icons/icons/auth0-color/keyframes.scss    |     9 +
 .../icons/icons/auth0-color/placeholders.scss |    10 +
 .../icons/icons/auth0-color/property-16.scss  |     3 +
 .../icons/icons/auth0-color/property-24.scss  |     3 +
 .../styles/base/icons/icons/auth0/index.scss  |     6 +
 .../base/icons/icons/auth0/keyframes.scss     |    15 +
 .../base/icons/icons/auth0/placeholders.scss  |    10 +
 .../base/icons/icons/auth0/property-16.scss   |     3 +
 .../base/icons/icons/auth0/property-24.scss   |     3 +
 .../base/icons/icons/auto-apply/index.scss    |     6 +
 .../icons/icons/auto-apply/keyframes.scss     |    15 +
 .../icons/icons/auto-apply/placeholders.scss  |    10 +
 .../icons/icons/auto-apply/property-16.scss   |     3 +
 .../icons/icons/auto-apply/property-24.scss   |     3 +
 .../styles/base/icons/icons/award/index.scss  |     6 +
 .../base/icons/icons/award/keyframes.scss     |    15 +
 .../base/icons/icons/award/placeholders.scss  |    10 +
 .../base/icons/icons/award/property-16.scss   |     3 +
 .../base/icons/icons/award/property-24.scss   |     3 +
 .../base/icons/icons/aws-color/index.scss     |     6 +
 .../base/icons/icons/aws-color/keyframes.scss |     9 +
 .../icons/icons/aws-color/placeholders.scss   |    10 +
 .../icons/icons/aws-color/property-16.scss    |     3 +
 .../icons/icons/aws-color/property-24.scss    |     3 +
 .../base/icons/icons/aws-ec2-color/index.scss |     6 +
 .../icons/icons/aws-ec2-color/keyframes.scss  |     9 +
 .../icons/aws-ec2-color/placeholders.scss     |    10 +
 .../icons/aws-ec2-color/property-16.scss      |     3 +
 .../icons/aws-ec2-color/property-24.scss      |     3 +
 .../base/icons/icons/aws-ec2/index.scss       |     6 +
 .../base/icons/icons/aws-ec2/keyframes.scss   |    15 +
 .../icons/icons/aws-ec2/placeholders.scss     |    10 +
 .../base/icons/icons/aws-ec2/property-16.scss |     3 +
 .../base/icons/icons/aws-ec2/property-24.scss |     3 +
 .../styles/base/icons/icons/aws/index.scss    |     6 +
 .../base/icons/icons/aws/keyframes.scss       |    15 +
 .../base/icons/icons/aws/placeholders.scss    |    10 +
 .../base/icons/icons/aws/property-16.scss     |     3 +
 .../base/icons/icons/aws/property-24.scss     |     3 +
 .../base/icons/icons/azure-color/index.scss   |     6 +
 .../icons/icons/azure-color/keyframes.scss    |     9 +
 .../icons/icons/azure-color/placeholders.scss |    10 +
 .../icons/icons/azure-color/property-16.scss  |     3 +
 .../icons/icons/azure-color/property-24.scss  |     3 +
 .../icons/icons/azure-devops-color/index.scss |     6 +
 .../icons/azure-devops-color/keyframes.scss   |     9 +
 .../azure-devops-color/placeholders.scss      |    10 +
 .../icons/azure-devops-color/property-16.scss |     3 +
 .../icons/azure-devops-color/property-24.scss |     3 +
 .../base/icons/icons/azure-devops/index.scss  |     6 +
 .../icons/icons/azure-devops/keyframes.scss   |    15 +
 .../icons/azure-devops/placeholders.scss      |    10 +
 .../icons/icons/azure-devops/property-16.scss |     3 +
 .../icons/icons/azure-devops/property-24.scss |     3 +
 .../styles/base/icons/icons/azure/index.scss  |     6 +
 .../base/icons/icons/azure/keyframes.scss     |    15 +
 .../base/icons/icons/azure/placeholders.scss  |    10 +
 .../base/icons/icons/azure/property-16.scss   |     3 +
 .../base/icons/icons/azure/property-24.scss   |     3 +
 .../base/icons/icons/bank-vault/index.scss    |     6 +
 .../icons/icons/bank-vault/keyframes.scss     |    15 +
 .../icons/icons/bank-vault/placeholders.scss  |    10 +
 .../icons/icons/bank-vault/property-16.scss   |     3 +
 .../icons/icons/bank-vault/property-24.scss   |     3 +
 .../base/icons/icons/bar-chart-alt/index.scss |     6 +
 .../icons/icons/bar-chart-alt/keyframes.scss  |    15 +
 .../icons/bar-chart-alt/placeholders.scss     |    10 +
 .../icons/bar-chart-alt/property-16.scss      |     3 +
 .../icons/bar-chart-alt/property-24.scss      |     3 +
 .../base/icons/icons/bar-chart/index.scss     |     6 +
 .../base/icons/icons/bar-chart/keyframes.scss |    15 +
 .../icons/icons/bar-chart/placeholders.scss   |    10 +
 .../icons/icons/bar-chart/property-16.scss    |     3 +
 .../icons/icons/bar-chart/property-24.scss    |     3 +
 .../icons/icons/battery-charging/index.scss   |     6 +
 .../icons/battery-charging/keyframes.scss     |    15 +
 .../icons/battery-charging/placeholders.scss  |    10 +
 .../icons/battery-charging/property-16.scss   |     3 +
 .../icons/battery-charging/property-24.scss   |     3 +
 .../base/icons/icons/battery/index.scss       |     6 +
 .../base/icons/icons/battery/keyframes.scss   |    15 +
 .../icons/icons/battery/placeholders.scss     |    10 +
 .../base/icons/icons/battery/property-16.scss |     3 +
 .../base/icons/icons/battery/property-24.scss |     3 +
 .../styles/base/icons/icons/beaker/index.scss |     6 +
 .../base/icons/icons/beaker/keyframes.scss    |    15 +
 .../base/icons/icons/beaker/placeholders.scss |    10 +
 .../base/icons/icons/beaker/property-16.scss  |     3 +
 .../base/icons/icons/beaker/property-24.scss  |     3 +
 .../icons/icons/bell-active-fill/index.scss   |     6 +
 .../icons/bell-active-fill/keyframes.scss     |    15 +
 .../icons/bell-active-fill/placeholders.scss  |    10 +
 .../icons/bell-active-fill/property-16.scss   |     3 +
 .../icons/bell-active-fill/property-24.scss   |     3 +
 .../base/icons/icons/bell-active/index.scss   |     6 +
 .../icons/icons/bell-active/keyframes.scss    |    15 +
 .../icons/icons/bell-active/placeholders.scss |    10 +
 .../icons/icons/bell-active/property-16.scss  |     3 +
 .../icons/icons/bell-active/property-24.scss  |     3 +
 .../base/icons/icons/bell-off/index.scss      |     6 +
 .../base/icons/icons/bell-off/keyframes.scss  |    15 +
 .../icons/icons/bell-off/placeholders.scss    |    10 +
 .../icons/icons/bell-off/property-16.scss     |     3 +
 .../icons/icons/bell-off/property-24.scss     |     3 +
 .../styles/base/icons/icons/bell/index.scss   |     6 +
 .../base/icons/icons/bell/keyframes.scss      |    15 +
 .../base/icons/icons/bell/placeholders.scss   |    10 +
 .../base/icons/icons/bell/property-16.scss    |     3 +
 .../base/icons/icons/bell/property-24.scss    |     3 +
 .../icons/icons/bitbucket-color/index.scss    |     6 +
 .../icons/bitbucket-color/keyframes.scss      |     9 +
 .../icons/bitbucket-color/placeholders.scss   |    10 +
 .../icons/bitbucket-color/property-16.scss    |     3 +
 .../icons/bitbucket-color/property-24.scss    |     3 +
 .../base/icons/icons/bitbucket/index.scss     |     6 +
 .../base/icons/icons/bitbucket/keyframes.scss |    15 +
 .../icons/icons/bitbucket/placeholders.scss   |    10 +
 .../icons/icons/bitbucket/property-16.scss    |     3 +
 .../icons/icons/bitbucket/property-24.scss    |     3 +
 .../styles/base/icons/icons/bolt/index.scss   |     6 +
 .../base/icons/icons/bolt/keyframes.scss      |    15 +
 .../base/icons/icons/bolt/placeholders.scss   |    10 +
 .../icons/icons/bookmark-add-fill/index.scss  |     6 +
 .../icons/bookmark-add-fill/keyframes.scss    |    15 +
 .../icons/bookmark-add-fill/placeholders.scss |    10 +
 .../icons/bookmark-add-fill/property-16.scss  |     3 +
 .../icons/bookmark-add-fill/property-24.scss  |     3 +
 .../base/icons/icons/bookmark-add/index.scss  |     6 +
 .../icons/icons/bookmark-add/keyframes.scss   |    15 +
 .../icons/bookmark-add/placeholders.scss      |    10 +
 .../icons/icons/bookmark-add/property-16.scss |     3 +
 .../icons/icons/bookmark-add/property-24.scss |     3 +
 .../base/icons/icons/bookmark-fill/index.scss |     6 +
 .../icons/icons/bookmark-fill/keyframes.scss  |    15 +
 .../icons/bookmark-fill/placeholders.scss     |    10 +
 .../icons/bookmark-fill/property-16.scss      |     3 +
 .../icons/bookmark-fill/property-24.scss      |     3 +
 .../icons/bookmark-remove-fill/index.scss     |     6 +
 .../icons/bookmark-remove-fill/keyframes.scss |    15 +
 .../bookmark-remove-fill/placeholders.scss    |    10 +
 .../bookmark-remove-fill/property-16.scss     |     3 +
 .../bookmark-remove-fill/property-24.scss     |     3 +
 .../icons/icons/bookmark-remove/index.scss    |     6 +
 .../icons/bookmark-remove/keyframes.scss      |    15 +
 .../icons/bookmark-remove/placeholders.scss   |    10 +
 .../icons/bookmark-remove/property-16.scss    |     3 +
 .../icons/bookmark-remove/property-24.scss    |     3 +
 .../base/icons/icons/bookmark/index.scss      |     6 +
 .../base/icons/icons/bookmark/keyframes.scss  |    15 +
 .../icons/icons/bookmark/placeholders.scss    |    10 +
 .../icons/icons/bookmark/property-16.scss     |     3 +
 .../icons/icons/bookmark/property-24.scss     |     3 +
 .../styles/base/icons/icons/bottom/index.scss |     6 +
 .../base/icons/icons/bottom/keyframes.scss    |    15 +
 .../base/icons/icons/bottom/placeholders.scss |    10 +
 .../base/icons/icons/bottom/property-16.scss  |     3 +
 .../base/icons/icons/bottom/property-24.scss  |     3 +
 .../icons/icons/boundary-color/index.scss     |     6 +
 .../icons/icons/boundary-color/keyframes.scss |     9 +
 .../icons/boundary-color/placeholders.scss    |    10 +
 .../icons/boundary-color/property-16.scss     |     3 +
 .../icons/boundary-color/property-24.scss     |     3 +
 .../base/icons/icons/boundary/index.scss      |     6 +
 .../base/icons/icons/boundary/keyframes.scss  |    15 +
 .../icons/icons/boundary/placeholders.scss    |    10 +
 .../icons/icons/boundary/property-16.scss     |     3 +
 .../icons/icons/boundary/property-24.scss     |     3 +
 .../icons/icons/box-check-fill/index.scss     |     6 +
 .../icons/icons/box-check-fill/keyframes.scss |    15 +
 .../icons/box-check-fill/placeholders.scss    |    10 +
 .../base/icons/icons/box-outline/index.scss   |     6 +
 .../icons/icons/box-outline/keyframes.scss    |    15 +
 .../icons/icons/box-outline/placeholders.scss |    10 +
 .../styles/base/icons/icons/box/index.scss    |     6 +
 .../base/icons/icons/box/keyframes.scss       |    15 +
 .../base/icons/icons/box/placeholders.scss    |    10 +
 .../base/icons/icons/box/property-16.scss     |     3 +
 .../base/icons/icons/box/property-24.scss     |     3 +
 .../base/icons/icons/briefcase/index.scss     |     6 +
 .../base/icons/icons/briefcase/keyframes.scss |    15 +
 .../icons/icons/briefcase/placeholders.scss   |    10 +
 .../icons/icons/briefcase/property-16.scss    |     3 +
 .../icons/icons/briefcase/property-24.scss    |     3 +
 .../base/icons/icons/broadcast/index.scss     |     6 +
 .../base/icons/icons/broadcast/keyframes.scss |    15 +
 .../icons/icons/broadcast/placeholders.scss   |    10 +
 .../styles/base/icons/icons/bug/index.scss    |     6 +
 .../base/icons/icons/bug/keyframes.scss       |    15 +
 .../base/icons/icons/bug/placeholders.scss    |    10 +
 .../base/icons/icons/bug/property-16.scss     |     3 +
 .../base/icons/icons/bug/property-24.scss     |     3 +
 .../styles/base/icons/icons/build/index.scss  |     6 +
 .../base/icons/icons/build/keyframes.scss     |    15 +
 .../base/icons/icons/build/placeholders.scss  |    10 +
 .../base/icons/icons/build/property-16.scss   |     3 +
 .../base/icons/icons/build/property-24.scss   |     3 +
 .../styles/base/icons/icons/bulb/index.scss   |     6 +
 .../base/icons/icons/bulb/keyframes.scss      |    15 +
 .../base/icons/icons/bulb/placeholders.scss   |    10 +
 .../base/icons/icons/bulb/property-16.scss    |     3 +
 .../base/icons/icons/bulb/property-24.scss    |     3 +
 .../base/icons/icons/calendar/index.scss      |     6 +
 .../base/icons/icons/calendar/keyframes.scss  |    15 +
 .../icons/icons/calendar/placeholders.scss    |    10 +
 .../icons/icons/calendar/property-16.scss     |     3 +
 .../icons/icons/calendar/property-24.scss     |     3 +
 .../base/icons/icons/camera-off/index.scss    |     6 +
 .../icons/icons/camera-off/keyframes.scss     |    15 +
 .../icons/icons/camera-off/placeholders.scss  |    10 +
 .../icons/icons/camera-off/property-16.scss   |     3 +
 .../icons/icons/camera-off/property-24.scss   |     3 +
 .../styles/base/icons/icons/camera/index.scss |     6 +
 .../base/icons/icons/camera/keyframes.scss    |    15 +
 .../base/icons/icons/camera/placeholders.scss |    10 +
 .../base/icons/icons/camera/property-16.scss  |     3 +
 .../base/icons/icons/camera/property-24.scss  |     3 +
 .../icons/icons/cancel-circle-fill/index.scss |     6 +
 .../icons/cancel-circle-fill/keyframes.scss   |    15 +
 .../cancel-circle-fill/placeholders.scss      |    10 +
 .../icons/cancel-circle-outline/index.scss    |     6 +
 .../cancel-circle-outline/keyframes.scss      |    15 +
 .../cancel-circle-outline/placeholders.scss   |    10 +
 .../base/icons/icons/cancel-plain/index.scss  |     6 +
 .../icons/icons/cancel-plain/keyframes.scss   |    15 +
 .../icons/cancel-plain/placeholders.scss      |    10 +
 .../icons/icons/cancel-square-fill/index.scss |     6 +
 .../icons/cancel-square-fill/keyframes.scss   |    15 +
 .../cancel-square-fill/placeholders.scss      |    10 +
 .../icons/cancel-square-outline/index.scss    |     6 +
 .../cancel-square-outline/keyframes.scss      |    15 +
 .../cancel-square-outline/placeholders.scss   |    10 +
 .../base/icons/icons/caret-down/index.scss    |     6 +
 .../icons/icons/caret-down/keyframes.scss     |    15 +
 .../icons/icons/caret-down/placeholders.scss  |    10 +
 .../base/icons/icons/caret-up/index.scss      |     6 +
 .../base/icons/icons/caret-up/keyframes.scss  |    15 +
 .../icons/icons/caret-up/placeholders.scss    |    10 +
 .../styles/base/icons/icons/caret/index.scss  |     6 +
 .../base/icons/icons/caret/keyframes.scss     |    15 +
 .../base/icons/icons/caret/placeholders.scss  |    10 +
 .../base/icons/icons/caret/property-16.scss   |     3 +
 .../base/icons/icons/caret/property-24.scss   |     3 +
 .../styles/base/icons/icons/cast/index.scss   |     6 +
 .../base/icons/icons/cast/keyframes.scss      |    15 +
 .../base/icons/icons/cast/placeholders.scss   |    10 +
 .../base/icons/icons/cast/property-16.scss    |     3 +
 .../base/icons/icons/cast/property-24.scss    |     3 +
 .../base/icons/icons/certificate/index.scss   |     6 +
 .../icons/icons/certificate/keyframes.scss    |    15 +
 .../icons/icons/certificate/placeholders.scss |    10 +
 .../icons/icons/certificate/property-16.scss  |     3 +
 .../icons/icons/certificate/property-24.scss  |     3 +
 .../base/icons/icons/change-circle/index.scss |     6 +
 .../icons/icons/change-circle/keyframes.scss  |    15 +
 .../icons/change-circle/placeholders.scss     |    10 +
 .../icons/change-circle/property-16.scss      |     3 +
 .../icons/change-circle/property-24.scss      |     3 +
 .../base/icons/icons/change-square/index.scss |     6 +
 .../icons/icons/change-square/keyframes.scss  |    15 +
 .../icons/change-square/placeholders.scss     |    10 +
 .../icons/change-square/property-16.scss      |     3 +
 .../icons/change-square/property-24.scss      |     3 +
 .../styles/base/icons/icons/change/index.scss |     6 +
 .../base/icons/icons/change/keyframes.scss    |    15 +
 .../base/icons/icons/change/placeholders.scss |    10 +
 .../base/icons/icons/change/property-16.scss  |     3 +
 .../base/icons/icons/change/property-24.scss  |     3 +
 .../icons/icons/check-circle-fill/index.scss  |     6 +
 .../icons/check-circle-fill/keyframes.scss    |    15 +
 .../icons/check-circle-fill/placeholders.scss |    10 +
 .../icons/check-circle-fill/property-16.scss  |     3 +
 .../icons/check-circle-fill/property-24.scss  |     3 +
 .../icons/check-circle-outline/index.scss     |     6 +
 .../icons/check-circle-outline/keyframes.scss |    15 +
 .../check-circle-outline/placeholders.scss    |    10 +
 .../base/icons/icons/check-circle/index.scss  |     6 +
 .../icons/icons/check-circle/keyframes.scss   |    15 +
 .../icons/check-circle/placeholders.scss      |    10 +
 .../icons/icons/check-circle/property-16.scss |     3 +
 .../icons/icons/check-circle/property-24.scss |     3 +
 .../icons/icons/check-diamond-fill/index.scss |     6 +
 .../icons/check-diamond-fill/keyframes.scss   |    15 +
 .../check-diamond-fill/placeholders.scss      |    10 +
 .../icons/check-diamond-fill/property-16.scss |     3 +
 .../icons/check-diamond-fill/property-24.scss |     3 +
 .../base/icons/icons/check-diamond/index.scss |     6 +
 .../icons/icons/check-diamond/keyframes.scss  |    15 +
 .../icons/check-diamond/placeholders.scss     |    10 +
 .../icons/check-diamond/property-16.scss      |     3 +
 .../icons/check-diamond/property-24.scss      |     3 +
 .../icons/icons/check-hexagon-fill/index.scss |     6 +
 .../icons/check-hexagon-fill/keyframes.scss   |    15 +
 .../check-hexagon-fill/placeholders.scss      |    10 +
 .../icons/check-hexagon-fill/property-16.scss |     3 +
 .../icons/check-hexagon-fill/property-24.scss |     3 +
 .../base/icons/icons/check-hexagon/index.scss |     6 +
 .../icons/icons/check-hexagon/keyframes.scss  |    15 +
 .../icons/check-hexagon/placeholders.scss     |    10 +
 .../icons/check-hexagon/property-16.scss      |     3 +
 .../icons/check-hexagon/property-24.scss      |     3 +
 .../base/icons/icons/check-plain/index.scss   |     6 +
 .../icons/icons/check-plain/keyframes.scss    |    15 +
 .../icons/icons/check-plain/placeholders.scss |    10 +
 .../icons/icons/check-square-fill/index.scss  |     6 +
 .../icons/check-square-fill/keyframes.scss    |    15 +
 .../icons/check-square-fill/placeholders.scss |    10 +
 .../icons/check-square-fill/property-16.scss  |     3 +
 .../icons/check-square-fill/property-24.scss  |     3 +
 .../base/icons/icons/check-square/index.scss  |     6 +
 .../icons/icons/check-square/keyframes.scss   |    15 +
 .../icons/check-square/placeholders.scss      |    10 +
 .../icons/icons/check-square/property-16.scss |     3 +
 .../icons/icons/check-square/property-24.scss |     3 +
 .../styles/base/icons/icons/check/index.scss  |     6 +
 .../base/icons/icons/check/keyframes.scss     |    15 +
 .../base/icons/icons/check/placeholders.scss  |    10 +
 .../base/icons/icons/check/property-16.scss   |     3 +
 .../base/icons/icons/check/property-24.scss   |     3 +
 .../base/icons/icons/chevron-down/index.scss  |     6 +
 .../icons/icons/chevron-down/keyframes.scss   |    15 +
 .../icons/chevron-down/placeholders.scss      |    10 +
 .../icons/icons/chevron-down/property-16.scss |     3 +
 .../icons/icons/chevron-down/property-24.scss |     3 +
 .../base/icons/icons/chevron-left/index.scss  |     6 +
 .../icons/icons/chevron-left/keyframes.scss   |    15 +
 .../icons/chevron-left/placeholders.scss      |    10 +
 .../icons/icons/chevron-left/property-16.scss |     3 +
 .../icons/icons/chevron-left/property-24.scss |     3 +
 .../base/icons/icons/chevron-right/index.scss |     6 +
 .../icons/icons/chevron-right/keyframes.scss  |    15 +
 .../icons/chevron-right/placeholders.scss     |    10 +
 .../icons/chevron-right/property-16.scss      |     3 +
 .../icons/chevron-right/property-24.scss      |     3 +
 .../base/icons/icons/chevron-up/index.scss    |     6 +
 .../icons/icons/chevron-up/keyframes.scss     |    15 +
 .../icons/icons/chevron-up/placeholders.scss  |    10 +
 .../icons/icons/chevron-up/property-16.scss   |     3 +
 .../icons/icons/chevron-up/property-24.scss   |     3 +
 .../base/icons/icons/chevrons-down/index.scss |     6 +
 .../icons/icons/chevrons-down/keyframes.scss  |    15 +
 .../icons/chevrons-down/placeholders.scss     |    10 +
 .../icons/chevrons-down/property-16.scss      |     3 +
 .../icons/chevrons-down/property-24.scss      |     3 +
 .../base/icons/icons/chevrons-left/index.scss |     6 +
 .../icons/icons/chevrons-left/keyframes.scss  |    15 +
 .../icons/chevrons-left/placeholders.scss     |    10 +
 .../icons/chevrons-left/property-16.scss      |     3 +
 .../icons/chevrons-left/property-24.scss      |     3 +
 .../icons/icons/chevrons-right/index.scss     |     6 +
 .../icons/icons/chevrons-right/keyframes.scss |    15 +
 .../icons/chevrons-right/placeholders.scss    |    10 +
 .../icons/chevrons-right/property-16.scss     |     3 +
 .../icons/chevrons-right/property-24.scss     |     3 +
 .../base/icons/icons/chevrons-up/index.scss   |     6 +
 .../icons/icons/chevrons-up/keyframes.scss    |    15 +
 .../icons/icons/chevrons-up/placeholders.scss |    10 +
 .../icons/icons/chevrons-up/property-16.scss  |     3 +
 .../icons/icons/chevrons-up/property-24.scss  |     3 +
 .../base/icons/icons/circle-dot/index.scss    |     6 +
 .../icons/icons/circle-dot/keyframes.scss     |    15 +
 .../icons/icons/circle-dot/placeholders.scss  |    10 +
 .../icons/icons/circle-dot/property-16.scss   |     3 +
 .../icons/icons/circle-dot/property-24.scss   |     3 +
 .../base/icons/icons/circle-fill/index.scss   |     6 +
 .../icons/icons/circle-fill/keyframes.scss    |    15 +
 .../icons/icons/circle-fill/placeholders.scss |    10 +
 .../icons/icons/circle-fill/property-16.scss  |     3 +
 .../icons/icons/circle-fill/property-24.scss  |     3 +
 .../base/icons/icons/circle-half/index.scss   |     6 +
 .../icons/icons/circle-half/keyframes.scss    |    15 +
 .../icons/icons/circle-half/placeholders.scss |    10 +
 .../icons/icons/circle-half/property-16.scss  |     3 +
 .../icons/icons/circle-half/property-24.scss  |     3 +
 .../styles/base/icons/icons/circle/index.scss |     6 +
 .../base/icons/icons/circle/keyframes.scss    |    15 +
 .../base/icons/icons/circle/placeholders.scss |    10 +
 .../base/icons/icons/circle/property-16.scss  |     3 +
 .../base/icons/icons/circle/property-24.scss  |     3 +
 .../icons/icons/clipboard-checked/index.scss  |     6 +
 .../icons/clipboard-checked/keyframes.scss    |    15 +
 .../icons/clipboard-checked/placeholders.scss |    10 +
 .../icons/clipboard-checked/property-16.scss  |     3 +
 .../icons/clipboard-checked/property-24.scss  |     3 +
 .../icons/icons/clipboard-copy/index.scss     |     6 +
 .../icons/icons/clipboard-copy/keyframes.scss |    15 +
 .../icons/clipboard-copy/placeholders.scss    |    10 +
 .../icons/clipboard-copy/property-16.scss     |     3 +
 .../icons/clipboard-copy/property-24.scss     |     3 +
 .../base/icons/icons/clipboard/index.scss     |     6 +
 .../base/icons/icons/clipboard/keyframes.scss |    15 +
 .../icons/icons/clipboard/placeholders.scss   |    10 +
 .../icons/icons/clipboard/property-16.scss    |     3 +
 .../icons/icons/clipboard/property-24.scss    |     3 +
 .../base/icons/icons/clock-fill/index.scss    |     6 +
 .../icons/icons/clock-fill/keyframes.scss     |    15 +
 .../icons/icons/clock-fill/placeholders.scss  |    10 +
 .../base/icons/icons/clock-outline/index.scss |     6 +
 .../icons/icons/clock-outline/keyframes.scss  |    15 +
 .../icons/clock-outline/placeholders.scss     |    10 +
 .../styles/base/icons/icons/clock/index.scss  |     6 +
 .../base/icons/icons/clock/keyframes.scss     |    15 +
 .../base/icons/icons/clock/placeholders.scss  |    10 +
 .../base/icons/icons/clock/property-16.scss   |     3 +
 .../base/icons/icons/clock/property-24.scss   |     3 +
 .../base/icons/icons/cloud-check/index.scss   |     6 +
 .../icons/icons/cloud-check/keyframes.scss    |    15 +
 .../icons/icons/cloud-check/placeholders.scss |    10 +
 .../icons/icons/cloud-check/property-16.scss  |     3 +
 .../icons/icons/cloud-check/property-24.scss  |     3 +
 .../base/icons/icons/cloud-cross/index.scss   |     6 +
 .../icons/icons/cloud-cross/keyframes.scss    |    15 +
 .../icons/icons/cloud-cross/placeholders.scss |    10 +
 .../icons/icons/cloud-cross/property-16.scss  |     3 +
 .../icons/icons/cloud-cross/property-24.scss  |     3 +
 .../icons/icons/cloud-download/index.scss     |     6 +
 .../icons/icons/cloud-download/keyframes.scss |    15 +
 .../icons/cloud-download/placeholders.scss    |    10 +
 .../icons/cloud-download/property-16.scss     |     3 +
 .../icons/cloud-download/property-24.scss     |     3 +
 .../icons/icons/cloud-lightning/index.scss    |     6 +
 .../icons/cloud-lightning/keyframes.scss      |    15 +
 .../icons/cloud-lightning/placeholders.scss   |    10 +
 .../icons/cloud-lightning/property-16.scss    |     3 +
 .../icons/cloud-lightning/property-24.scss    |     3 +
 .../base/icons/icons/cloud-lock/index.scss    |     6 +
 .../icons/icons/cloud-lock/keyframes.scss     |    15 +
 .../icons/icons/cloud-lock/placeholders.scss  |    10 +
 .../icons/icons/cloud-lock/property-16.scss   |     3 +
 .../icons/icons/cloud-lock/property-24.scss   |     3 +
 .../base/icons/icons/cloud-off/index.scss     |     6 +
 .../base/icons/icons/cloud-off/keyframes.scss |    15 +
 .../icons/icons/cloud-off/placeholders.scss   |    10 +
 .../icons/icons/cloud-off/property-16.scss    |     3 +
 .../icons/icons/cloud-off/property-24.scss    |     3 +
 .../base/icons/icons/cloud-upload/index.scss  |     6 +
 .../icons/icons/cloud-upload/keyframes.scss   |    15 +
 .../icons/cloud-upload/placeholders.scss      |    10 +
 .../icons/icons/cloud-upload/property-16.scss |     3 +
 .../icons/icons/cloud-upload/property-24.scss |     3 +
 .../base/icons/icons/cloud-x/index.scss       |     6 +
 .../base/icons/icons/cloud-x/keyframes.scss   |    15 +
 .../icons/icons/cloud-x/placeholders.scss     |    10 +
 .../base/icons/icons/cloud-x/property-16.scss |     3 +
 .../base/icons/icons/cloud-x/property-24.scss |     3 +
 .../styles/base/icons/icons/cloud/index.scss  |     6 +
 .../base/icons/icons/cloud/keyframes.scss     |    15 +
 .../base/icons/icons/cloud/placeholders.scss  |    10 +
 .../base/icons/icons/cloud/property-16.scss   |     3 +
 .../base/icons/icons/cloud/property-24.scss   |     3 +
 .../styles/base/icons/icons/code/index.scss   |     6 +
 .../base/icons/icons/code/keyframes.scss      |    15 +
 .../base/icons/icons/code/placeholders.scss   |    10 +
 .../base/icons/icons/code/property-16.scss    |     3 +
 .../base/icons/icons/code/property-24.scss    |     3 +
 .../base/icons/icons/codepen-color/index.scss |     6 +
 .../icons/icons/codepen-color/keyframes.scss  |     9 +
 .../icons/codepen-color/placeholders.scss     |    10 +
 .../icons/codepen-color/property-16.scss      |     3 +
 .../icons/codepen-color/property-24.scss      |     3 +
 .../base/icons/icons/codepen/index.scss       |     6 +
 .../base/icons/icons/codepen/keyframes.scss   |    15 +
 .../icons/icons/codepen/placeholders.scss     |    10 +
 .../base/icons/icons/codepen/property-16.scss |     3 +
 .../base/icons/icons/codepen/property-24.scss |     3 +
 .../base/icons/icons/collections/index.scss   |     6 +
 .../icons/icons/collections/keyframes.scss    |    15 +
 .../icons/icons/collections/placeholders.scss |    10 +
 .../icons/icons/collections/property-16.scss  |     3 +
 .../icons/icons/collections/property-24.scss  |     3 +
 .../base/icons/icons/command/index.scss       |     6 +
 .../base/icons/icons/command/keyframes.scss   |    15 +
 .../icons/icons/command/placeholders.scss     |    10 +
 .../base/icons/icons/command/property-16.scss |     3 +
 .../base/icons/icons/command/property-24.scss |     3 +
 .../base/icons/icons/compass/index.scss       |     6 +
 .../base/icons/icons/compass/keyframes.scss   |    15 +
 .../icons/icons/compass/placeholders.scss     |    10 +
 .../base/icons/icons/compass/property-16.scss |     3 +
 .../base/icons/icons/compass/property-24.scss |     3 +
 .../icons/icons/connection-gateway/index.scss |     6 +
 .../icons/connection-gateway/keyframes.scss   |    15 +
 .../connection-gateway/placeholders.scss      |    10 +
 .../icons/connection-gateway/property-16.scss |     3 +
 .../icons/connection-gateway/property-24.scss |     3 +
 .../base/icons/icons/connection/index.scss    |     6 +
 .../icons/icons/connection/keyframes.scss     |    15 +
 .../icons/icons/connection/placeholders.scss  |    10 +
 .../icons/icons/connection/property-16.scss   |     3 +
 .../icons/icons/connection/property-24.scss   |     3 +
 .../base/icons/icons/console/index.scss       |     6 +
 .../base/icons/icons/console/keyframes.scss   |    15 +
 .../icons/icons/console/placeholders.scss     |    10 +
 .../base/icons/icons/consul-color/index.scss  |     6 +
 .../icons/icons/consul-color/keyframes.scss   |     9 +
 .../icons/consul-color/placeholders.scss      |    10 +
 .../icons/icons/consul-color/property-16.scss |     3 +
 .../icons/icons/consul-color/property-24.scss |     3 +
 .../styles/base/icons/icons/consul/index.scss |     6 +
 .../base/icons/icons/consul/keyframes.scss    |    15 +
 .../base/icons/icons/consul/placeholders.scss |    10 +
 .../base/icons/icons/consul/property-16.scss  |     3 +
 .../base/icons/icons/consul/property-24.scss  |     3 +
 .../base/icons/icons/copy-action/index.scss   |     6 +
 .../icons/icons/copy-action/keyframes.scss    |    15 +
 .../icons/icons/copy-action/placeholders.scss |    10 +
 .../base/icons/icons/copy-success/index.scss  |     6 +
 .../icons/icons/copy-success/keyframes.scss   |    15 +
 .../icons/copy-success/placeholders.scss      |    10 +
 .../icons/icons/corner-down-left/index.scss   |     6 +
 .../icons/corner-down-left/keyframes.scss     |    15 +
 .../icons/corner-down-left/placeholders.scss  |    10 +
 .../icons/corner-down-left/property-16.scss   |     3 +
 .../icons/corner-down-left/property-24.scss   |     3 +
 .../icons/icons/corner-down-right/index.scss  |     6 +
 .../icons/corner-down-right/keyframes.scss    |    15 +
 .../icons/corner-down-right/placeholders.scss |    10 +
 .../icons/corner-down-right/property-16.scss  |     3 +
 .../icons/corner-down-right/property-24.scss  |     3 +
 .../icons/icons/corner-left-down/index.scss   |     6 +
 .../icons/corner-left-down/keyframes.scss     |    15 +
 .../icons/corner-left-down/placeholders.scss  |    10 +
 .../icons/corner-left-down/property-16.scss   |     3 +
 .../icons/corner-left-down/property-24.scss   |     3 +
 .../icons/icons/corner-left-up/index.scss     |     6 +
 .../icons/icons/corner-left-up/keyframes.scss |    15 +
 .../icons/corner-left-up/placeholders.scss    |    10 +
 .../icons/corner-left-up/property-16.scss     |     3 +
 .../icons/corner-left-up/property-24.scss     |     3 +
 .../icons/icons/corner-right-down/index.scss  |     6 +
 .../icons/corner-right-down/keyframes.scss    |    15 +
 .../icons/corner-right-down/placeholders.scss |    10 +
 .../icons/corner-right-down/property-16.scss  |     3 +
 .../icons/corner-right-down/property-24.scss  |     3 +
 .../icons/icons/corner-right-up/index.scss    |     6 +
 .../icons/corner-right-up/keyframes.scss      |    15 +
 .../icons/corner-right-up/placeholders.scss   |    10 +
 .../icons/corner-right-up/property-16.scss    |     3 +
 .../icons/corner-right-up/property-24.scss    |     3 +
 .../icons/icons/corner-up-left/index.scss     |     6 +
 .../icons/icons/corner-up-left/keyframes.scss |    15 +
 .../icons/corner-up-left/placeholders.scss    |    10 +
 .../icons/corner-up-left/property-16.scss     |     3 +
 .../icons/corner-up-left/property-24.scss     |     3 +
 .../icons/icons/corner-up-right/index.scss    |     6 +
 .../icons/corner-up-right/keyframes.scss      |    15 +
 .../icons/corner-up-right/placeholders.scss   |    10 +
 .../icons/corner-up-right/property-16.scss    |     3 +
 .../icons/corner-up-right/property-24.scss    |     3 +
 .../styles/base/icons/icons/cpu/index.scss    |     6 +
 .../base/icons/icons/cpu/keyframes.scss       |    15 +
 .../base/icons/icons/cpu/placeholders.scss    |    10 +
 .../base/icons/icons/cpu/property-16.scss     |     3 +
 .../base/icons/icons/cpu/property-24.scss     |     3 +
 .../base/icons/icons/credit-card/index.scss   |     6 +
 .../icons/icons/credit-card/keyframes.scss    |    15 +
 .../icons/icons/credit-card/placeholders.scss |    10 +
 .../icons/icons/credit-card/property-16.scss  |     3 +
 .../icons/icons/credit-card/property-24.scss  |     3 +
 .../styles/base/icons/icons/crop/index.scss   |     6 +
 .../base/icons/icons/crop/keyframes.scss      |    15 +
 .../base/icons/icons/crop/placeholders.scss   |    10 +
 .../base/icons/icons/crop/property-16.scss    |     3 +
 .../base/icons/icons/crop/property-24.scss    |     3 +
 .../base/icons/icons/crosshair/index.scss     |     6 +
 .../base/icons/icons/crosshair/keyframes.scss |    15 +
 .../icons/icons/crosshair/placeholders.scss   |    10 +
 .../icons/icons/crosshair/property-16.scss    |     3 +
 .../icons/icons/crosshair/property-24.scss    |     3 +
 .../base/icons/icons/dashboard/index.scss     |     6 +
 .../base/icons/icons/dashboard/keyframes.scss |    15 +
 .../icons/icons/dashboard/placeholders.scss   |    10 +
 .../icons/icons/dashboard/property-16.scss    |     3 +
 .../icons/icons/dashboard/property-24.scss    |     3 +
 .../base/icons/icons/database/index.scss      |     6 +
 .../base/icons/icons/database/keyframes.scss  |    15 +
 .../icons/icons/database/placeholders.scss    |    10 +
 .../icons/icons/database/property-16.scss     |     3 +
 .../icons/icons/database/property-24.scss     |     3 +
 .../styles/base/icons/icons/delay/index.scss  |     6 +
 .../base/icons/icons/delay/keyframes.scss     |    15 +
 .../base/icons/icons/delay/placeholders.scss  |    10 +
 .../base/icons/icons/delay/property-16.scss   |     3 +
 .../base/icons/icons/delay/property-24.scss   |     3 +
 .../styles/base/icons/icons/delete/index.scss |     6 +
 .../base/icons/icons/delete/keyframes.scss    |    15 +
 .../base/icons/icons/delete/placeholders.scss |    10 +
 .../base/icons/icons/delete/property-16.scss  |     3 +
 .../base/icons/icons/delete/property-24.scss  |     3 +
 .../base/icons/icons/deny-alt/index.scss      |     6 +
 .../base/icons/icons/deny-alt/keyframes.scss  |    15 +
 .../icons/icons/deny-alt/placeholders.scss    |    10 +
 .../base/icons/icons/deny-color/index.scss    |     6 +
 .../icons/icons/deny-color/keyframes.scss     |     9 +
 .../icons/icons/deny-color/placeholders.scss  |    10 +
 .../icons/icons/deny-color/property-16.scss   |     3 +
 .../icons/icons/deny-color/property-24.scss   |     3 +
 .../base/icons/icons/deny-default/index.scss  |     6 +
 .../icons/icons/deny-default/keyframes.scss   |    15 +
 .../icons/deny-default/placeholders.scss      |    10 +
 .../base/icons/icons/diamond-fill/index.scss  |     6 +
 .../icons/icons/diamond-fill/keyframes.scss   |    15 +
 .../icons/diamond-fill/placeholders.scss      |    10 +
 .../icons/icons/diamond-fill/property-16.scss |     3 +
 .../icons/icons/diamond-fill/property-24.scss |     3 +
 .../base/icons/icons/diamond/index.scss       |     6 +
 .../base/icons/icons/diamond/keyframes.scss   |    15 +
 .../icons/icons/diamond/placeholders.scss     |    10 +
 .../base/icons/icons/diamond/property-16.scss |     3 +
 .../base/icons/icons/diamond/property-24.scss |     3 +
 .../base/icons/icons/disabled/index.scss      |     6 +
 .../base/icons/icons/disabled/keyframes.scss  |    15 +
 .../icons/icons/disabled/placeholders.scss    |    10 +
 .../styles/base/icons/icons/disc/index.scss   |     6 +
 .../base/icons/icons/disc/keyframes.scss      |    15 +
 .../base/icons/icons/disc/placeholders.scss   |    10 +
 .../base/icons/icons/disc/property-16.scss    |     3 +
 .../base/icons/icons/disc/property-24.scss    |     3 +
 .../icons/icons/discussion-circle/index.scss  |     6 +
 .../icons/discussion-circle/keyframes.scss    |    15 +
 .../icons/discussion-circle/placeholders.scss |    10 +
 .../icons/discussion-circle/property-16.scss  |     3 +
 .../icons/discussion-circle/property-24.scss  |     3 +
 .../icons/icons/discussion-square/index.scss  |     6 +
 .../icons/discussion-square/keyframes.scss    |    15 +
 .../icons/discussion-square/placeholders.scss |    10 +
 .../icons/discussion-square/property-16.scss  |     3 +
 .../icons/discussion-square/property-24.scss  |     3 +
 .../base/icons/icons/docker-color/index.scss  |     6 +
 .../icons/icons/docker-color/keyframes.scss   |     9 +
 .../icons/docker-color/placeholders.scss      |    10 +
 .../icons/icons/docker-color/property-16.scss |     3 +
 .../icons/icons/docker-color/property-24.scss |     3 +
 .../styles/base/icons/icons/docker/index.scss |     6 +
 .../base/icons/icons/docker/keyframes.scss    |    15 +
 .../base/icons/icons/docker/placeholders.scss |    10 +
 .../base/icons/icons/docker/property-16.scss  |     3 +
 .../base/icons/icons/docker/property-24.scss  |     3 +
 .../base/icons/icons/docs-download/index.scss |     6 +
 .../icons/icons/docs-download/keyframes.scss  |    15 +
 .../icons/docs-download/placeholders.scss     |    10 +
 .../icons/docs-download/property-16.scss      |     3 +
 .../icons/docs-download/property-24.scss      |     3 +
 .../base/icons/icons/docs-link/index.scss     |     6 +
 .../base/icons/icons/docs-link/keyframes.scss |    15 +
 .../icons/icons/docs-link/placeholders.scss   |    10 +
 .../icons/icons/docs-link/property-16.scss    |     3 +
 .../icons/icons/docs-link/property-24.scss    |     3 +
 .../styles/base/icons/icons/docs/index.scss   |     6 +
 .../base/icons/icons/docs/keyframes.scss      |    15 +
 .../base/icons/icons/docs/placeholders.scss   |    10 +
 .../base/icons/icons/docs/property-16.scss    |     3 +
 .../base/icons/icons/docs/property-24.scss    |     3 +
 .../base/icons/icons/dollar-sign/index.scss   |     6 +
 .../icons/icons/dollar-sign/keyframes.scss    |    15 +
 .../icons/icons/dollar-sign/placeholders.scss |    10 +
 .../icons/icons/dollar-sign/property-16.scss  |     3 +
 .../icons/icons/dollar-sign/property-24.scss  |     3 +
 .../base/icons/icons/dot-half/index.scss      |     6 +
 .../base/icons/icons/dot-half/keyframes.scss  |    15 +
 .../icons/icons/dot-half/placeholders.scss    |    10 +
 .../icons/icons/dot-half/property-16.scss     |     3 +
 .../icons/icons/dot-half/property-24.scss     |     3 +
 .../styles/base/icons/icons/dot/index.scss    |     6 +
 .../base/icons/icons/dot/keyframes.scss       |    15 +
 .../base/icons/icons/dot/placeholders.scss    |    10 +
 .../base/icons/icons/dot/property-16.scss     |     3 +
 .../base/icons/icons/dot/property-24.scss     |     3 +
 .../base/icons/icons/download/index.scss      |     6 +
 .../base/icons/icons/download/keyframes.scss  |    15 +
 .../icons/icons/download/placeholders.scss    |    10 +
 .../icons/icons/download/property-16.scss     |     3 +
 .../icons/icons/download/property-24.scss     |     3 +
 .../base/icons/icons/droplet/index.scss       |     6 +
 .../base/icons/icons/droplet/keyframes.scss   |    15 +
 .../icons/icons/droplet/placeholders.scss     |    10 +
 .../base/icons/icons/droplet/property-16.scss |     3 +
 .../base/icons/icons/droplet/property-24.scss |     3 +
 .../base/icons/icons/duplicate/index.scss     |     6 +
 .../base/icons/icons/duplicate/keyframes.scss |    15 +
 .../icons/icons/duplicate/placeholders.scss   |    10 +
 .../icons/icons/duplicate/property-16.scss    |     3 +
 .../icons/icons/duplicate/property-24.scss    |     3 +
 .../styles/base/icons/icons/edit/index.scss   |     6 +
 .../base/icons/icons/edit/keyframes.scss      |    15 +
 .../base/icons/icons/edit/placeholders.scss   |    10 +
 .../base/icons/icons/edit/property-16.scss    |     3 +
 .../base/icons/icons/edit/property-24.scss    |     3 +
 .../base/icons/icons/enterprise/index.scss    |     6 +
 .../icons/icons/enterprise/keyframes.scss     |    15 +
 .../icons/icons/enterprise/placeholders.scss  |    10 +
 .../icons/icons/enterprise/property-16.scss   |     3 +
 .../icons/icons/enterprise/property-24.scss   |     3 +
 .../base/icons/icons/entry-point/index.scss   |     6 +
 .../icons/icons/entry-point/keyframes.scss    |    15 +
 .../icons/icons/entry-point/placeholders.scss |    10 +
 .../icons/icons/entry-point/property-16.scss  |     3 +
 .../icons/icons/entry-point/property-24.scss  |     3 +
 .../icons/envelope-sealed-fill/index.scss     |     6 +
 .../icons/envelope-sealed-fill/keyframes.scss |    15 +
 .../envelope-sealed-fill/placeholders.scss    |    10 +
 .../icons/envelope-sealed-outline/index.scss  |     6 +
 .../envelope-sealed-outline/keyframes.scss    |    15 +
 .../envelope-sealed-outline/placeholders.scss |    10 +
 .../envelope-unsealed--outline/index.scss     |     6 +
 .../envelope-unsealed--outline/keyframes.scss |    15 +
 .../placeholders.scss                         |    10 +
 .../icons/envelope-unsealed-fill/index.scss   |     6 +
 .../envelope-unsealed-fill/keyframes.scss     |    15 +
 .../envelope-unsealed-fill/placeholders.scss  |    10 +
 .../styles/base/icons/icons/event/index.scss  |     6 +
 .../base/icons/icons/event/keyframes.scss     |    15 +
 .../base/icons/icons/event/placeholders.scss  |    10 +
 .../base/icons/icons/event/property-16.scss   |     3 +
 .../base/icons/icons/event/property-24.scss   |     3 +
 .../base/icons/icons/exit-point/index.scss    |     6 +
 .../icons/icons/exit-point/keyframes.scss     |    15 +
 .../icons/icons/exit-point/placeholders.scss  |    10 +
 .../icons/icons/exit-point/property-16.scss   |     3 +
 .../icons/icons/exit-point/property-24.scss   |     3 +
 .../styles/base/icons/icons/exit/index.scss   |     6 +
 .../base/icons/icons/exit/keyframes.scss      |    15 +
 .../base/icons/icons/exit/placeholders.scss   |    10 +
 .../base/icons/icons/expand-less/index.scss   |     6 +
 .../icons/icons/expand-less/keyframes.scss    |    15 +
 .../icons/icons/expand-less/placeholders.scss |    10 +
 .../base/icons/icons/expand-more/index.scss   |     6 +
 .../icons/icons/expand-more/keyframes.scss    |    15 +
 .../icons/icons/expand-more/placeholders.scss |    10 +
 .../base/icons/icons/external-link/index.scss |     6 +
 .../icons/icons/external-link/keyframes.scss  |    15 +
 .../icons/external-link/placeholders.scss     |    10 +
 .../icons/external-link/property-16.scss      |     3 +
 .../icons/external-link/property-24.scss      |     3 +
 .../base/icons/icons/eye-off/index.scss       |     6 +
 .../base/icons/icons/eye-off/keyframes.scss   |    15 +
 .../icons/icons/eye-off/placeholders.scss     |    10 +
 .../base/icons/icons/eye-off/property-16.scss |     3 +
 .../base/icons/icons/eye-off/property-24.scss |     3 +
 .../styles/base/icons/icons/eye/index.scss    |     6 +
 .../base/icons/icons/eye/keyframes.scss       |    15 +
 .../base/icons/icons/eye/placeholders.scss    |    10 +
 .../base/icons/icons/eye/property-16.scss     |     3 +
 .../base/icons/icons/eye/property-24.scss     |     3 +
 .../base/icons/icons/f5-color/index.scss      |     6 +
 .../base/icons/icons/f5-color/keyframes.scss  |     9 +
 .../icons/icons/f5-color/placeholders.scss    |    10 +
 .../icons/icons/f5-color/property-16.scss     |     3 +
 .../icons/icons/f5-color/property-24.scss     |     3 +
 .../app/styles/base/icons/icons/f5/index.scss |     6 +
 .../styles/base/icons/icons/f5/keyframes.scss |    15 +
 .../base/icons/icons/f5/placeholders.scss     |    10 +
 .../base/icons/icons/f5/property-16.scss      |     3 +
 .../base/icons/icons/f5/property-24.scss      |     3 +
 .../icons/icons/facebook-color/index.scss     |     6 +
 .../icons/icons/facebook-color/keyframes.scss |     9 +
 .../icons/facebook-color/placeholders.scss    |    10 +
 .../icons/facebook-color/property-16.scss     |     3 +
 .../icons/facebook-color/property-24.scss     |     3 +
 .../base/icons/icons/facebook/index.scss      |     6 +
 .../base/icons/icons/facebook/keyframes.scss  |    15 +
 .../icons/icons/facebook/placeholders.scss    |    10 +
 .../icons/icons/facebook/property-16.scss     |     3 +
 .../icons/icons/facebook/property-24.scss     |     3 +
 .../base/icons/icons/fast-forward/index.scss  |     6 +
 .../icons/icons/fast-forward/keyframes.scss   |    15 +
 .../icons/fast-forward/placeholders.scss      |    10 +
 .../icons/icons/fast-forward/property-16.scss |     3 +
 .../icons/icons/fast-forward/property-24.scss |     3 +
 .../base/icons/icons/file-change/index.scss   |     6 +
 .../icons/icons/file-change/keyframes.scss    |    15 +
 .../icons/icons/file-change/placeholders.scss |    10 +
 .../icons/icons/file-change/property-16.scss  |     3 +
 .../icons/icons/file-change/property-24.scss  |     3 +
 .../base/icons/icons/file-check/index.scss    |     6 +
 .../icons/icons/file-check/keyframes.scss     |    15 +
 .../icons/icons/file-check/placeholders.scss  |    10 +
 .../icons/icons/file-check/property-16.scss   |     3 +
 .../icons/icons/file-check/property-24.scss   |     3 +
 .../base/icons/icons/file-diff/index.scss     |     6 +
 .../base/icons/icons/file-diff/keyframes.scss |    15 +
 .../icons/icons/file-diff/placeholders.scss   |    10 +
 .../icons/icons/file-diff/property-16.scss    |     3 +
 .../icons/icons/file-diff/property-24.scss    |     3 +
 .../base/icons/icons/file-fill/index.scss     |     6 +
 .../base/icons/icons/file-fill/keyframes.scss |    15 +
 .../icons/icons/file-fill/placeholders.scss   |    10 +
 .../base/icons/icons/file-minus/index.scss    |     6 +
 .../icons/icons/file-minus/keyframes.scss     |    15 +
 .../icons/icons/file-minus/placeholders.scss  |    10 +
 .../icons/icons/file-minus/property-16.scss   |     3 +
 .../icons/icons/file-minus/property-24.scss   |     3 +
 .../base/icons/icons/file-outline/index.scss  |     6 +
 .../icons/icons/file-outline/keyframes.scss   |    15 +
 .../icons/file-outline/placeholders.scss      |    10 +
 .../base/icons/icons/file-plus/index.scss     |     6 +
 .../base/icons/icons/file-plus/keyframes.scss |    15 +
 .../icons/icons/file-plus/placeholders.scss   |    10 +
 .../icons/icons/file-plus/property-16.scss    |     3 +
 .../icons/icons/file-plus/property-24.scss    |     3 +
 .../base/icons/icons/file-source/index.scss   |     6 +
 .../icons/icons/file-source/keyframes.scss    |    15 +
 .../icons/icons/file-source/placeholders.scss |    10 +
 .../icons/icons/file-source/property-16.scss  |     3 +
 .../icons/icons/file-source/property-24.scss  |     3 +
 .../base/icons/icons/file-text/index.scss     |     6 +
 .../base/icons/icons/file-text/keyframes.scss |    15 +
 .../icons/icons/file-text/placeholders.scss   |    10 +
 .../icons/icons/file-text/property-16.scss    |     3 +
 .../icons/icons/file-text/property-24.scss    |     3 +
 .../styles/base/icons/icons/file-x/index.scss |     6 +
 .../base/icons/icons/file-x/keyframes.scss    |    15 +
 .../base/icons/icons/file-x/placeholders.scss |    10 +
 .../base/icons/icons/file-x/property-16.scss  |     3 +
 .../base/icons/icons/file-x/property-24.scss  |     3 +
 .../styles/base/icons/icons/file/index.scss   |     6 +
 .../base/icons/icons/file/keyframes.scss      |    15 +
 .../base/icons/icons/file/placeholders.scss   |    10 +
 .../base/icons/icons/file/property-16.scss    |     3 +
 .../base/icons/icons/file/property-24.scss    |     3 +
 .../styles/base/icons/icons/files/index.scss  |     6 +
 .../base/icons/icons/files/keyframes.scss     |    15 +
 .../base/icons/icons/files/placeholders.scss  |    10 +
 .../base/icons/icons/files/property-16.scss   |     3 +
 .../base/icons/icons/files/property-24.scss   |     3 +
 .../styles/base/icons/icons/film/index.scss   |     6 +
 .../base/icons/icons/film/keyframes.scss      |    15 +
 .../base/icons/icons/film/placeholders.scss   |    10 +
 .../base/icons/icons/film/property-16.scss    |     3 +
 .../base/icons/icons/film/property-24.scss    |     3 +
 .../base/icons/icons/filter-circle/index.scss |     6 +
 .../icons/icons/filter-circle/keyframes.scss  |    15 +
 .../icons/filter-circle/placeholders.scss     |    10 +
 .../icons/filter-circle/property-16.scss      |     3 +
 .../icons/filter-circle/property-24.scss      |     3 +
 .../base/icons/icons/filter-fill/index.scss   |     6 +
 .../icons/icons/filter-fill/keyframes.scss    |    15 +
 .../icons/icons/filter-fill/placeholders.scss |    10 +
 .../icons/icons/filter-fill/property-16.scss  |     3 +
 .../icons/icons/filter-fill/property-24.scss  |     3 +
 .../styles/base/icons/icons/filter/index.scss |     6 +
 .../base/icons/icons/filter/keyframes.scss    |    15 +
 .../base/icons/icons/filter/placeholders.scss |    10 +
 .../base/icons/icons/filter/property-16.scss  |     3 +
 .../base/icons/icons/filter/property-24.scss  |     3 +
 .../base/icons/icons/fingerprint/index.scss   |     6 +
 .../icons/icons/fingerprint/keyframes.scss    |    15 +
 .../icons/icons/fingerprint/placeholders.scss |    10 +
 .../icons/icons/fingerprint/property-16.scss  |     3 +
 .../icons/icons/fingerprint/property-24.scss  |     3 +
 .../styles/base/icons/icons/flag/index.scss   |     6 +
 .../base/icons/icons/flag/keyframes.scss      |    15 +
 .../base/icons/icons/flag/placeholders.scss   |    10 +
 .../base/icons/icons/flag/property-16.scss    |     3 +
 .../base/icons/icons/flag/property-24.scss    |     3 +
 .../base/icons/icons/folder-fill/index.scss   |     6 +
 .../icons/icons/folder-fill/keyframes.scss    |    15 +
 .../icons/icons/folder-fill/placeholders.scss |    10 +
 .../icons/icons/folder-fill/property-16.scss  |     3 +
 .../icons/icons/folder-fill/property-24.scss  |     3 +
 .../icons/icons/folder-minus-fill/index.scss  |     6 +
 .../icons/folder-minus-fill/keyframes.scss    |    15 +
 .../icons/folder-minus-fill/placeholders.scss |    10 +
 .../icons/folder-minus-fill/property-16.scss  |     3 +
 .../icons/folder-minus-fill/property-24.scss  |     3 +
 .../base/icons/icons/folder-minus/index.scss  |     6 +
 .../icons/icons/folder-minus/keyframes.scss   |    15 +
 .../icons/folder-minus/placeholders.scss      |    10 +
 .../icons/icons/folder-minus/property-16.scss |     3 +
 .../icons/icons/folder-minus/property-24.scss |     3 +
 .../icons/icons/folder-outline/index.scss     |     6 +
 .../icons/icons/folder-outline/keyframes.scss |    15 +
 .../icons/folder-outline/placeholders.scss    |    10 +
 .../icons/icons/folder-plus-fill/index.scss   |     6 +
 .../icons/folder-plus-fill/keyframes.scss     |    15 +
 .../icons/folder-plus-fill/placeholders.scss  |    10 +
 .../icons/folder-plus-fill/property-16.scss   |     3 +
 .../icons/folder-plus-fill/property-24.scss   |     3 +
 .../base/icons/icons/folder-plus/index.scss   |     6 +
 .../icons/icons/folder-plus/keyframes.scss    |    15 +
 .../icons/icons/folder-plus/placeholders.scss |    10 +
 .../icons/icons/folder-plus/property-16.scss  |     3 +
 .../icons/icons/folder-plus/property-24.scss  |     3 +
 .../base/icons/icons/folder-star/index.scss   |     6 +
 .../icons/icons/folder-star/keyframes.scss    |    15 +
 .../icons/icons/folder-star/placeholders.scss |    10 +
 .../icons/icons/folder-star/property-16.scss  |     3 +
 .../icons/icons/folder-star/property-24.scss  |     3 +
 .../base/icons/icons/folder-users/index.scss  |     6 +
 .../icons/icons/folder-users/keyframes.scss   |    15 +
 .../icons/folder-users/placeholders.scss      |    10 +
 .../icons/icons/folder-users/property-16.scss |     3 +
 .../icons/icons/folder-users/property-24.scss |     3 +
 .../styles/base/icons/icons/folder/index.scss |     6 +
 .../base/icons/icons/folder/keyframes.scss    |    15 +
 .../base/icons/icons/folder/placeholders.scss |    10 +
 .../base/icons/icons/folder/property-16.scss  |     3 +
 .../base/icons/icons/folder/property-24.scss  |     3 +
 .../styles/base/icons/icons/frown/index.scss  |     6 +
 .../base/icons/icons/frown/keyframes.scss     |    15 +
 .../base/icons/icons/frown/placeholders.scss  |    10 +
 .../base/icons/icons/frown/property-16.scss   |     3 +
 .../base/icons/icons/frown/property-24.scss   |     3 +
 .../base/icons/icons/gateway/index.scss       |     6 +
 .../base/icons/icons/gateway/keyframes.scss   |    15 +
 .../icons/icons/gateway/placeholders.scss     |    10 +
 .../base/icons/icons/gateway/property-16.scss |     3 +
 .../base/icons/icons/gateway/property-24.scss |     3 +
 .../base/icons/icons/gcp-color/index.scss     |     6 +
 .../base/icons/icons/gcp-color/keyframes.scss |     9 +
 .../icons/icons/gcp-color/placeholders.scss   |    10 +
 .../icons/icons/gcp-color/property-16.scss    |     3 +
 .../icons/icons/gcp-color/property-24.scss    |     3 +
 .../styles/base/icons/icons/gcp/index.scss    |     6 +
 .../base/icons/icons/gcp/keyframes.scss       |    15 +
 .../base/icons/icons/gcp/placeholders.scss    |    10 +
 .../base/icons/icons/gcp/property-16.scss     |     3 +
 .../base/icons/icons/gcp/property-24.scss     |     3 +
 .../base/icons/icons/gift-fill/index.scss     |     6 +
 .../base/icons/icons/gift-fill/keyframes.scss |    15 +
 .../icons/icons/gift-fill/placeholders.scss   |    10 +
 .../base/icons/icons/gift-outline/index.scss  |     6 +
 .../icons/icons/gift-outline/keyframes.scss   |    15 +
 .../icons/gift-outline/placeholders.scss      |    10 +
 .../styles/base/icons/icons/gift/index.scss   |     6 +
 .../base/icons/icons/gift/keyframes.scss      |    15 +
 .../base/icons/icons/gift/placeholders.scss   |    10 +
 .../base/icons/icons/gift/property-16.scss    |     3 +
 .../base/icons/icons/gift/property-24.scss    |     3 +
 .../base/icons/icons/git-branch/index.scss    |     6 +
 .../icons/icons/git-branch/keyframes.scss     |    15 +
 .../icons/icons/git-branch/placeholders.scss  |    10 +
 .../icons/icons/git-branch/property-16.scss   |     3 +
 .../icons/icons/git-branch/property-24.scss   |     3 +
 .../base/icons/icons/git-commit/index.scss    |     6 +
 .../icons/icons/git-commit/keyframes.scss     |    15 +
 .../icons/icons/git-commit/placeholders.scss  |    10 +
 .../icons/icons/git-commit/property-16.scss   |     3 +
 .../icons/icons/git-commit/property-24.scss   |     3 +
 .../base/icons/icons/git-merge/index.scss     |     6 +
 .../base/icons/icons/git-merge/keyframes.scss |    15 +
 .../icons/icons/git-merge/placeholders.scss   |    10 +
 .../icons/icons/git-merge/property-16.scss    |     3 +
 .../icons/icons/git-merge/property-24.scss    |     3 +
 .../icons/icons/git-pull-request/index.scss   |     6 +
 .../icons/git-pull-request/keyframes.scss     |    15 +
 .../icons/git-pull-request/placeholders.scss  |    10 +
 .../icons/git-pull-request/property-16.scss   |     3 +
 .../icons/git-pull-request/property-24.scss   |     3 +
 .../base/icons/icons/git-repo/index.scss      |     6 +
 .../base/icons/icons/git-repo/keyframes.scss  |    15 +
 .../icons/icons/git-repo/placeholders.scss    |    10 +
 .../icons/icons/git-repo/property-16.scss     |     3 +
 .../icons/icons/git-repo/property-24.scss     |     3 +
 .../icons/icons/git-repository/index.scss     |     6 +
 .../icons/icons/git-repository/keyframes.scss |    15 +
 .../icons/git-repository/placeholders.scss    |    10 +
 .../base/icons/icons/github-color/index.scss  |     6 +
 .../icons/icons/github-color/keyframes.scss   |     9 +
 .../icons/github-color/placeholders.scss      |    10 +
 .../icons/icons/github-color/property-16.scss |     3 +
 .../icons/icons/github-color/property-24.scss |     3 +
 .../styles/base/icons/icons/github/index.scss |     6 +
 .../base/icons/icons/github/keyframes.scss    |    15 +
 .../base/icons/icons/github/placeholders.scss |    10 +
 .../base/icons/icons/github/property-16.scss  |     3 +
 .../base/icons/icons/github/property-24.scss  |     3 +
 .../base/icons/icons/gitlab-color/index.scss  |     6 +
 .../icons/icons/gitlab-color/keyframes.scss   |     9 +
 .../icons/gitlab-color/placeholders.scss      |    10 +
 .../icons/icons/gitlab-color/property-16.scss |     3 +
 .../icons/icons/gitlab-color/property-24.scss |     3 +
 .../styles/base/icons/icons/gitlab/index.scss |     6 +
 .../base/icons/icons/gitlab/keyframes.scss    |    15 +
 .../base/icons/icons/gitlab/placeholders.scss |    10 +
 .../base/icons/icons/gitlab/property-16.scss  |     3 +
 .../base/icons/icons/gitlab/property-24.scss  |     3 +
 .../base/icons/icons/globe-private/index.scss |     6 +
 .../icons/icons/globe-private/keyframes.scss  |    15 +
 .../icons/globe-private/placeholders.scss     |    10 +
 .../icons/globe-private/property-16.scss      |     3 +
 .../icons/globe-private/property-24.scss      |     3 +
 .../styles/base/icons/icons/globe/index.scss  |     6 +
 .../base/icons/icons/globe/keyframes.scss     |    15 +
 .../base/icons/icons/globe/placeholders.scss  |    10 +
 .../base/icons/icons/globe/property-16.scss   |     3 +
 .../base/icons/icons/globe/property-24.scss   |     3 +
 .../base/icons/icons/google-color/index.scss  |     6 +
 .../icons/icons/google-color/keyframes.scss   |     9 +
 .../icons/google-color/placeholders.scss      |    10 +
 .../icons/icons/google-color/property-16.scss |     3 +
 .../icons/icons/google-color/property-24.scss |     3 +
 .../styles/base/icons/icons/google/index.scss |     6 +
 .../base/icons/icons/google/keyframes.scss    |    15 +
 .../base/icons/icons/google/placeholders.scss |    10 +
 .../base/icons/icons/google/property-16.scss  |     3 +
 .../base/icons/icons/google/property-24.scss  |     3 +
 .../base/icons/icons/grid-alt/index.scss      |     6 +
 .../base/icons/icons/grid-alt/keyframes.scss  |    15 +
 .../icons/icons/grid-alt/placeholders.scss    |    10 +
 .../icons/icons/grid-alt/property-16.scss     |     3 +
 .../icons/icons/grid-alt/property-24.scss     |     3 +
 .../styles/base/icons/icons/grid/index.scss   |     6 +
 .../base/icons/icons/grid/keyframes.scss      |    15 +
 .../base/icons/icons/grid/placeholders.scss   |    10 +
 .../base/icons/icons/grid/property-16.scss    |     3 +
 .../base/icons/icons/grid/property-24.scss    |     3 +
 .../base/icons/icons/guide-link/index.scss    |     6 +
 .../icons/icons/guide-link/keyframes.scss     |    15 +
 .../icons/icons/guide-link/placeholders.scss  |    10 +
 .../icons/icons/guide-link/property-16.scss   |     3 +
 .../icons/icons/guide-link/property-24.scss   |     3 +
 .../styles/base/icons/icons/guide/index.scss  |     6 +
 .../base/icons/icons/guide/keyframes.scss     |    15 +
 .../base/icons/icons/guide/placeholders.scss  |    10 +
 .../base/icons/icons/guide/property-16.scss   |     3 +
 .../base/icons/icons/guide/property-24.scss   |     3 +
 .../styles/base/icons/icons/hammer/index.scss |     6 +
 .../base/icons/icons/hammer/keyframes.scss    |    15 +
 .../base/icons/icons/hammer/placeholders.scss |    10 +
 .../base/icons/icons/hammer/property-16.scss  |     3 +
 .../base/icons/icons/hammer/property-24.scss  |     3 +
 .../base/icons/icons/handshake/index.scss     |     6 +
 .../base/icons/icons/handshake/keyframes.scss |    15 +
 .../icons/icons/handshake/placeholders.scss   |    10 +
 .../icons/icons/handshake/property-16.scss    |     3 +
 .../icons/icons/handshake/property-24.scss    |     3 +
 .../base/icons/icons/hard-drive/index.scss    |     6 +
 .../icons/icons/hard-drive/keyframes.scss     |    15 +
 .../icons/icons/hard-drive/placeholders.scss  |    10 +
 .../icons/icons/hard-drive/property-16.scss   |     3 +
 .../icons/icons/hard-drive/property-24.scss   |     3 +
 .../styles/base/icons/icons/hash/index.scss   |     6 +
 .../base/icons/icons/hash/keyframes.scss      |    15 +
 .../base/icons/icons/hash/placeholders.scss   |    10 +
 .../base/icons/icons/hash/property-16.scss    |     3 +
 .../base/icons/icons/hash/property-24.scss    |     3 +
 .../icons/icons/hashicorp-color/index.scss    |     6 +
 .../icons/hashicorp-color/keyframes.scss      |     9 +
 .../icons/hashicorp-color/placeholders.scss   |    10 +
 .../icons/hashicorp-color/property-16.scss    |     3 +
 .../icons/hashicorp-color/property-24.scss    |     3 +
 .../base/icons/icons/hashicorp/index.scss     |     6 +
 .../base/icons/icons/hashicorp/keyframes.scss |    15 +
 .../icons/icons/hashicorp/placeholders.scss   |    10 +
 .../icons/icons/hashicorp/property-16.scss    |     3 +
 .../icons/icons/hashicorp/property-24.scss    |     3 +
 .../base/icons/icons/hcp-color/index.scss     |     6 +
 .../base/icons/icons/hcp-color/keyframes.scss |     9 +
 .../icons/icons/hcp-color/placeholders.scss   |    10 +
 .../icons/icons/hcp-color/property-16.scss    |     3 +
 .../icons/icons/hcp-color/property-24.scss    |     3 +
 .../styles/base/icons/icons/hcp/index.scss    |     6 +
 .../base/icons/icons/hcp/keyframes.scss       |    15 +
 .../base/icons/icons/hcp/placeholders.scss    |    10 +
 .../base/icons/icons/hcp/property-16.scss     |     3 +
 .../base/icons/icons/hcp/property-24.scss     |     3 +
 .../base/icons/icons/headphones/index.scss    |     6 +
 .../icons/icons/headphones/keyframes.scss     |    15 +
 .../icons/icons/headphones/placeholders.scss  |    10 +
 .../icons/icons/headphones/property-16.scss   |     3 +
 .../icons/icons/headphones/property-24.scss   |     3 +
 .../styles/base/icons/icons/health/index.scss |     6 +
 .../base/icons/icons/health/keyframes.scss    |    15 +
 .../base/icons/icons/health/placeholders.scss |    10 +
 .../base/icons/icons/heart-fill/index.scss    |     6 +
 .../icons/icons/heart-fill/keyframes.scss     |    15 +
 .../icons/icons/heart-fill/placeholders.scss  |    10 +
 .../icons/icons/heart-fill/property-16.scss   |     3 +
 .../icons/icons/heart-fill/property-24.scss   |     3 +
 .../base/icons/icons/heart-off/index.scss     |     6 +
 .../base/icons/icons/heart-off/keyframes.scss |    15 +
 .../icons/icons/heart-off/placeholders.scss   |    10 +
 .../icons/icons/heart-off/property-16.scss    |     3 +
 .../icons/icons/heart-off/property-24.scss    |     3 +
 .../styles/base/icons/icons/heart/index.scss  |     6 +
 .../base/icons/icons/heart/keyframes.scss     |    15 +
 .../base/icons/icons/heart/placeholders.scss  |    10 +
 .../base/icons/icons/heart/property-16.scss   |     3 +
 .../base/icons/icons/heart/property-24.scss   |     3 +
 .../icons/icons/help-circle-fill/index.scss   |     6 +
 .../icons/help-circle-fill/keyframes.scss     |    15 +
 .../icons/help-circle-fill/placeholders.scss  |    10 +
 .../icons/help-circle-outline/index.scss      |     6 +
 .../icons/help-circle-outline/keyframes.scss  |    15 +
 .../help-circle-outline/placeholders.scss     |    10 +
 .../styles/base/icons/icons/help/index.scss   |     6 +
 .../base/icons/icons/help/keyframes.scss      |    15 +
 .../base/icons/icons/help/placeholders.scss   |    10 +
 .../base/icons/icons/help/property-16.scss    |     3 +
 .../base/icons/icons/help/property-24.scss    |     3 +
 .../base/icons/icons/hexagon-fill/index.scss  |     6 +
 .../icons/icons/hexagon-fill/keyframes.scss   |    15 +
 .../icons/hexagon-fill/placeholders.scss      |    10 +
 .../icons/icons/hexagon-fill/property-16.scss |     3 +
 .../icons/icons/hexagon-fill/property-24.scss |     3 +
 .../base/icons/icons/hexagon/index.scss       |     6 +
 .../base/icons/icons/hexagon/keyframes.scss   |    15 +
 .../icons/icons/hexagon/placeholders.scss     |    10 +
 .../base/icons/icons/hexagon/property-16.scss |     3 +
 .../base/icons/icons/hexagon/property-24.scss |     3 +
 .../base/icons/icons/history/index.scss       |     6 +
 .../base/icons/icons/history/keyframes.scss   |    15 +
 .../icons/icons/history/placeholders.scss     |    10 +
 .../base/icons/icons/history/property-16.scss |     3 +
 .../base/icons/icons/history/property-24.scss |     3 +
 .../styles/base/icons/icons/home/index.scss   |     6 +
 .../base/icons/icons/home/keyframes.scss      |    15 +
 .../base/icons/icons/home/placeholders.scss   |    10 +
 .../base/icons/icons/home/property-16.scss    |     3 +
 .../base/icons/icons/home/property-24.scss    |     3 +
 .../base/icons/icons/hourglass/index.scss     |     6 +
 .../base/icons/icons/hourglass/keyframes.scss |    15 +
 .../icons/icons/hourglass/placeholders.scss   |    10 +
 .../icons/icons/hourglass/property-16.scss    |     3 +
 .../icons/icons/hourglass/property-24.scss    |     3 +
 .../icons/icons/identity-service/index.scss   |     6 +
 .../icons/identity-service/keyframes.scss     |    15 +
 .../icons/identity-service/placeholders.scss  |    10 +
 .../icons/identity-service/property-16.scss   |     3 +
 .../icons/identity-service/property-24.scss   |     3 +
 .../base/icons/icons/identity-user/index.scss |     6 +
 .../icons/icons/identity-user/keyframes.scss  |    15 +
 .../icons/identity-user/placeholders.scss     |    10 +
 .../icons/identity-user/property-16.scss      |     3 +
 .../icons/identity-user/property-24.scss      |     3 +
 .../styles/base/icons/icons/image/index.scss  |     6 +
 .../base/icons/icons/image/keyframes.scss     |    15 +
 .../base/icons/icons/image/placeholders.scss  |    10 +
 .../base/icons/icons/image/property-16.scss   |     3 +
 .../base/icons/icons/image/property-24.scss   |     3 +
 .../styles/base/icons/icons/inbox/index.scss  |     6 +
 .../base/icons/icons/inbox/keyframes.scss     |    15 +
 .../base/icons/icons/inbox/placeholders.scss  |    10 +
 .../base/icons/icons/inbox/property-16.scss   |     3 +
 .../base/icons/icons/inbox/property-24.scss   |     3 +
 .../app/styles/base/icons/icons/index.scss    |   659 +
 .../icons/icons/info-circle-fill/index.scss   |     6 +
 .../icons/info-circle-fill/keyframes.scss     |    15 +
 .../icons/info-circle-fill/placeholders.scss  |    10 +
 .../icons/info-circle-outline/index.scss      |     6 +
 .../icons/info-circle-outline/keyframes.scss  |    15 +
 .../info-circle-outline/placeholders.scss     |    10 +
 .../styles/base/icons/icons/info/index.scss   |     6 +
 .../base/icons/icons/info/keyframes.scss      |    15 +
 .../base/icons/icons/info/placeholders.scss   |    10 +
 .../base/icons/icons/info/property-16.scss    |     3 +
 .../base/icons/icons/info/property-24.scss    |     3 +
 .../base/icons/icons/jump-link/index.scss     |     6 +
 .../base/icons/icons/jump-link/keyframes.scss |    15 +
 .../icons/icons/jump-link/placeholders.scss   |    10 +
 .../icons/icons/jump-link/property-16.scss    |     3 +
 .../icons/icons/jump-link/property-24.scss    |     3 +
 .../base/icons/icons/key-values/index.scss    |     6 +
 .../icons/icons/key-values/keyframes.scss     |    15 +
 .../icons/icons/key-values/placeholders.scss  |    10 +
 .../icons/icons/key-values/property-16.scss   |     3 +
 .../icons/icons/key-values/property-24.scss   |     3 +
 .../styles/base/icons/icons/key/index.scss    |     6 +
 .../base/icons/icons/key/keyframes.scss       |    15 +
 .../base/icons/icons/key/placeholders.scss    |    10 +
 .../base/icons/icons/key/property-16.scss     |     3 +
 .../base/icons/icons/key/property-24.scss     |     3 +
 .../base/icons/icons/keychain/index.scss      |     6 +
 .../base/icons/icons/keychain/keyframes.scss  |    15 +
 .../icons/icons/keychain/placeholders.scss    |    10 +
 .../icons/icons/keychain/property-16.scss     |     3 +
 .../icons/icons/keychain/property-24.scss     |     3 +
 .../icons/icons/kubernetes-color/index.scss   |     6 +
 .../icons/kubernetes-color/keyframes.scss     |     9 +
 .../icons/kubernetes-color/placeholders.scss  |    10 +
 .../icons/kubernetes-color/property-16.scss   |     3 +
 .../icons/kubernetes-color/property-24.scss   |     3 +
 .../base/icons/icons/kubernetes/index.scss    |     6 +
 .../icons/icons/kubernetes/keyframes.scss     |    15 +
 .../icons/icons/kubernetes/placeholders.scss  |    10 +
 .../icons/icons/kubernetes/property-16.scss   |     3 +
 .../icons/icons/kubernetes/property-24.scss   |     3 +
 .../base/icons/icons/labyrinth/index.scss     |     6 +
 .../base/icons/icons/labyrinth/keyframes.scss |    15 +
 .../icons/icons/labyrinth/placeholders.scss   |    10 +
 .../icons/icons/labyrinth/property-16.scss    |     3 +
 .../icons/icons/labyrinth/property-24.scss    |     3 +
 .../styles/base/icons/icons/layers/index.scss |     6 +
 .../base/icons/icons/layers/keyframes.scss    |    15 +
 .../base/icons/icons/layers/placeholders.scss |    10 +
 .../base/icons/icons/layers/property-16.scss  |     3 +
 .../base/icons/icons/layers/property-24.scss  |     3 +
 .../styles/base/icons/icons/layout/index.scss |     6 +
 .../base/icons/icons/layout/keyframes.scss    |    15 +
 .../base/icons/icons/layout/placeholders.scss |    10 +
 .../base/icons/icons/layout/property-16.scss  |     3 +
 .../base/icons/icons/layout/property-24.scss  |     3 +
 .../base/icons/icons/learn-link/index.scss    |     6 +
 .../icons/icons/learn-link/keyframes.scss     |    15 +
 .../icons/icons/learn-link/placeholders.scss  |    10 +
 .../icons/icons/learn-link/property-16.scss   |     3 +
 .../icons/icons/learn-link/property-24.scss   |     3 +
 .../styles/base/icons/icons/learn/index.scss  |     6 +
 .../base/icons/icons/learn/keyframes.scss     |    15 +
 .../base/icons/icons/learn/placeholders.scss  |    10 +
 .../base/icons/icons/learn/property-16.scss   |     3 +
 .../base/icons/icons/learn/property-24.scss   |     3 +
 .../base/icons/icons/line-chart-up/index.scss |     6 +
 .../icons/icons/line-chart-up/keyframes.scss  |    15 +
 .../icons/line-chart-up/placeholders.scss     |    10 +
 .../icons/line-chart-up/property-16.scss      |     3 +
 .../icons/line-chart-up/property-24.scss      |     3 +
 .../base/icons/icons/line-chart/index.scss    |     6 +
 .../icons/icons/line-chart/keyframes.scss     |    15 +
 .../icons/icons/line-chart/placeholders.scss  |    10 +
 .../icons/icons/line-chart/property-16.scss   |     3 +
 .../icons/icons/line-chart/property-24.scss   |     3 +
 .../styles/base/icons/icons/link/index.scss   |     6 +
 .../base/icons/icons/link/keyframes.scss      |    15 +
 .../base/icons/icons/link/placeholders.scss   |    10 +
 .../base/icons/icons/link/property-16.scss    |     3 +
 .../base/icons/icons/link/property-24.scss    |     3 +
 .../icons/icons/linkedin-color/index.scss     |     6 +
 .../icons/icons/linkedin-color/keyframes.scss |     9 +
 .../icons/linkedin-color/placeholders.scss    |    10 +
 .../icons/linkedin-color/property-16.scss     |     3 +
 .../icons/linkedin-color/property-24.scss     |     3 +
 .../base/icons/icons/linkedin/index.scss      |     6 +
 .../base/icons/icons/linkedin/keyframes.scss  |    15 +
 .../icons/icons/linkedin/placeholders.scss    |    10 +
 .../icons/icons/linkedin/property-16.scss     |     3 +
 .../icons/icons/linkedin/property-24.scss     |     3 +
 .../styles/base/icons/icons/list/index.scss   |     6 +
 .../base/icons/icons/list/keyframes.scss      |    15 +
 .../base/icons/icons/list/placeholders.scss   |    10 +
 .../base/icons/icons/list/property-16.scss    |     3 +
 .../base/icons/icons/list/property-24.scss    |     3 +
 .../base/icons/icons/load-balancer/index.scss |     6 +
 .../icons/icons/load-balancer/keyframes.scss  |    15 +
 .../icons/load-balancer/placeholders.scss     |    10 +
 .../icons/load-balancer/property-16.scss      |     3 +
 .../icons/load-balancer/property-24.scss      |     3 +
 .../icons/icons/loading-motion/index.scss     |     6 +
 .../icons/icons/loading-motion/keyframes.scss |    15 +
 .../icons/loading-motion/placeholders.scss    |    10 +
 .../icons/loading-motion/property-16.scss     |     3 +
 .../icons/loading-motion/property-24.scss     |     3 +
 .../base/icons/icons/loading/index.scss       |     6 +
 .../base/icons/icons/loading/keyframes.scss   |    15 +
 .../icons/icons/loading/placeholders.scss     |    10 +
 .../base/icons/icons/loading/property-16.scss |     3 +
 .../base/icons/icons/loading/property-24.scss |     3 +
 .../icons/icons/lock-closed-fill/index.scss   |     6 +
 .../icons/lock-closed-fill/keyframes.scss     |    15 +
 .../icons/lock-closed-fill/placeholders.scss  |    10 +
 .../icons/lock-closed-outline/index.scss      |     6 +
 .../icons/lock-closed-outline/keyframes.scss  |    15 +
 .../lock-closed-outline/placeholders.scss     |    10 +
 .../base/icons/icons/lock-closed/index.scss   |     6 +
 .../icons/icons/lock-closed/keyframes.scss    |    15 +
 .../icons/icons/lock-closed/placeholders.scss |    10 +
 .../base/icons/icons/lock-disabled/index.scss |     6 +
 .../icons/icons/lock-disabled/keyframes.scss  |    15 +
 .../icons/lock-disabled/placeholders.scss     |    10 +
 .../base/icons/icons/lock-fill/index.scss     |     6 +
 .../base/icons/icons/lock-fill/keyframes.scss |    15 +
 .../icons/icons/lock-fill/placeholders.scss   |    10 +
 .../icons/icons/lock-fill/property-16.scss    |     3 +
 .../icons/icons/lock-fill/property-24.scss    |     3 +
 .../base/icons/icons/lock-off/index.scss      |     6 +
 .../base/icons/icons/lock-off/keyframes.scss  |    15 +
 .../icons/icons/lock-off/placeholders.scss    |    10 +
 .../icons/icons/lock-off/property-16.scss     |     3 +
 .../icons/icons/lock-off/property-24.scss     |     3 +
 .../base/icons/icons/lock-open/index.scss     |     6 +
 .../base/icons/icons/lock-open/keyframes.scss |    15 +
 .../icons/icons/lock-open/placeholders.scss   |    10 +
 .../styles/base/icons/icons/lock/index.scss   |     6 +
 .../base/icons/icons/lock/keyframes.scss      |    15 +
 .../base/icons/icons/lock/placeholders.scss   |    10 +
 .../base/icons/icons/lock/property-16.scss    |     3 +
 .../base/icons/icons/lock/property-24.scss    |     3 +
 .../icons/logo-alicloud-color/index.scss      |     6 +
 .../icons/logo-alicloud-color/keyframes.scss  |     9 +
 .../logo-alicloud-color/placeholders.scss     |    10 +
 .../icons/logo-alicloud-monochrome/index.scss |     6 +
 .../logo-alicloud-monochrome/keyframes.scss   |    15 +
 .../placeholders.scss                         |    10 +
 .../icons/icons/logo-auth0-color/index.scss   |     6 +
 .../icons/logo-auth0-color/keyframes.scss     |     9 +
 .../icons/logo-auth0-color/placeholders.scss  |    10 +
 .../icons/icons/logo-aws-color/index.scss     |     6 +
 .../icons/icons/logo-aws-color/keyframes.scss |     9 +
 .../icons/logo-aws-color/placeholders.scss    |    10 +
 .../icons/logo-aws-monochrome/index.scss      |     6 +
 .../icons/logo-aws-monochrome/keyframes.scss  |    15 +
 .../logo-aws-monochrome/placeholders.scss     |    10 +
 .../icons/icons/logo-azure-color/index.scss   |     6 +
 .../icons/logo-azure-color/keyframes.scss     |     9 +
 .../icons/logo-azure-color/placeholders.scss  |    10 +
 .../icons/logo-azure-dev-ops-color/index.scss |     6 +
 .../logo-azure-dev-ops-color/keyframes.scss   |     9 +
 .../placeholders.scss                         |    10 +
 .../logo-azure-dev-ops-monochrome/index.scss  |     6 +
 .../keyframes.scss                            |    15 +
 .../placeholders.scss                         |    10 +
 .../icons/logo-azure-monochrome/index.scss    |     6 +
 .../logo-azure-monochrome/keyframes.scss      |    15 +
 .../logo-azure-monochrome/placeholders.scss   |    10 +
 .../icons/logo-bitbucket-color/index.scss     |     6 +
 .../icons/logo-bitbucket-color/keyframes.scss |     9 +
 .../logo-bitbucket-color/placeholders.scss    |    10 +
 .../logo-bitbucket-monochrome/index.scss      |     6 +
 .../logo-bitbucket-monochrome/keyframes.scss  |    15 +
 .../placeholders.scss                         |    10 +
 .../icons/icons/logo-consul-color/index.scss  |     6 +
 .../icons/logo-consul-color/keyframes.scss    |     9 +
 .../icons/logo-consul-color/placeholders.scss |    10 +
 .../icons/logo-ember-circle-color/index.scss  |     6 +
 .../logo-ember-circle-color/keyframes.scss    |     9 +
 .../logo-ember-circle-color/placeholders.scss |    10 +
 .../logo-ember-circle-color/property-16.scss  |     3 +
 .../logo-ember-circle-color/property-24.scss  |     3 +
 .../icons/icons/logo-gcp-color/index.scss     |     6 +
 .../icons/icons/logo-gcp-color/keyframes.scss |     9 +
 .../icons/logo-gcp-color/placeholders.scss    |    10 +
 .../icons/logo-gcp-monochrome/index.scss      |     6 +
 .../icons/logo-gcp-monochrome/keyframes.scss  |    15 +
 .../logo-gcp-monochrome/placeholders.scss     |    10 +
 .../icons/icons/logo-github-color/index.scss  |     6 +
 .../icons/logo-github-color/keyframes.scss    |     9 +
 .../icons/logo-github-color/placeholders.scss |    10 +
 .../icons/logo-github-monochrome/index.scss   |     6 +
 .../logo-github-monochrome/keyframes.scss     |    15 +
 .../logo-github-monochrome/placeholders.scss  |    10 +
 .../icons/icons/logo-gitlab-color/index.scss  |     6 +
 .../icons/logo-gitlab-color/keyframes.scss    |     9 +
 .../icons/logo-gitlab-color/placeholders.scss |    10 +
 .../icons/logo-gitlab-monochrome/index.scss   |     6 +
 .../logo-gitlab-monochrome/keyframes.scss     |    15 +
 .../logo-gitlab-monochrome/placeholders.scss  |    10 +
 .../icons/icons/logo-glimmer-color/index.scss |     6 +
 .../icons/logo-glimmer-color/keyframes.scss   |     9 +
 .../logo-glimmer-color/placeholders.scss      |    10 +
 .../icons/logo-glimmer-color/property-16.scss |     3 +
 .../icons/logo-glimmer-color/property-24.scss |     3 +
 .../icons/icons/logo-google-color/index.scss  |     6 +
 .../icons/logo-google-color/keyframes.scss    |     9 +
 .../icons/logo-google-color/placeholders.scss |    10 +
 .../icons/logo-google-monochrome/index.scss   |     6 +
 .../logo-google-monochrome/keyframes.scss     |    15 +
 .../logo-google-monochrome/placeholders.scss  |    10 +
 .../icons/logo-hashicorp-color/index.scss     |     6 +
 .../icons/logo-hashicorp-color/keyframes.scss |     9 +
 .../logo-hashicorp-color/placeholders.scss    |    10 +
 .../logo-hashicorp-color/property-16.scss     |     3 +
 .../logo-hashicorp-color/property-24.scss     |     3 +
 .../icons/icons/logo-jwt-color/index.scss     |     6 +
 .../icons/icons/logo-jwt-color/keyframes.scss |     9 +
 .../icons/logo-jwt-color/placeholders.scss    |    10 +
 .../icons/logo-jwt-color/property-16.scss     |     3 +
 .../icons/logo-jwt-color/property-24.scss     |     3 +
 .../icons/logo-kubernetes-color/index.scss    |     6 +
 .../logo-kubernetes-color/keyframes.scss      |     9 +
 .../logo-kubernetes-color/placeholders.scss   |    10 +
 .../logo-kubernetes-monochrome/index.scss     |     6 +
 .../logo-kubernetes-monochrome/keyframes.scss |    15 +
 .../placeholders.scss                         |    10 +
 .../icons/logo-microsoft-color/index.scss     |     6 +
 .../icons/logo-microsoft-color/keyframes.scss |     9 +
 .../logo-microsoft-color/placeholders.scss    |    10 +
 .../icons/icons/logo-nomad-color/index.scss   |     6 +
 .../icons/logo-nomad-color/keyframes.scss     |     9 +
 .../icons/logo-nomad-color/placeholders.scss  |    10 +
 .../icons/icons/logo-oidc-color/index.scss    |     6 +
 .../icons/logo-oidc-color/keyframes.scss      |     9 +
 .../icons/logo-oidc-color/placeholders.scss   |    10 +
 .../icons/logo-oidc-color/property-16.scss    |     3 +
 .../icons/logo-oidc-color/property-24.scss    |     3 +
 .../icons/icons/logo-okta-color/index.scss    |     6 +
 .../icons/logo-okta-color/keyframes.scss      |     9 +
 .../icons/logo-okta-color/placeholders.scss   |    10 +
 .../icons/icons/logo-oracle-color/index.scss  |     6 +
 .../icons/logo-oracle-color/keyframes.scss    |     9 +
 .../icons/logo-oracle-color/placeholders.scss |    10 +
 .../icons/logo-oracle-monochrome/index.scss   |     6 +
 .../logo-oracle-monochrome/keyframes.scss     |    15 +
 .../logo-oracle-monochrome/placeholders.scss  |    10 +
 .../icons/icons/logo-slack-color/index.scss   |     6 +
 .../icons/logo-slack-color/keyframes.scss     |     9 +
 .../icons/logo-slack-color/placeholders.scss  |    10 +
 .../icons/logo-slack-monochrome/index.scss    |     6 +
 .../logo-slack-monochrome/keyframes.scss      |    15 +
 .../logo-slack-monochrome/placeholders.scss   |    10 +
 .../icons/logo-terraform-color/index.scss     |     6 +
 .../icons/logo-terraform-color/keyframes.scss |     9 +
 .../logo-terraform-color/placeholders.scss    |    10 +
 .../icons/icons/logo-vault-color/index.scss   |     6 +
 .../icons/logo-vault-color/keyframes.scss     |     9 +
 .../icons/logo-vault-color/placeholders.scss  |    10 +
 .../icons/logo-vault-color/property-16.scss   |     3 +
 .../icons/logo-vault-color/property-24.scss   |     3 +
 .../icons/icons/logo-vmware-color/index.scss  |     6 +
 .../icons/logo-vmware-color/keyframes.scss    |     9 +
 .../icons/logo-vmware-color/placeholders.scss |    10 +
 .../icons/logo-vmware-monochrome/index.scss   |     6 +
 .../logo-vmware-monochrome/keyframes.scss     |    15 +
 .../logo-vmware-monochrome/placeholders.scss  |    10 +
 .../base/icons/icons/mail-open/index.scss     |     6 +
 .../base/icons/icons/mail-open/keyframes.scss |    15 +
 .../icons/icons/mail-open/placeholders.scss   |    10 +
 .../icons/icons/mail-open/property-16.scss    |     3 +
 .../icons/icons/mail-open/property-24.scss    |     3 +
 .../styles/base/icons/icons/mail/index.scss   |     6 +
 .../base/icons/icons/mail/keyframes.scss      |    15 +
 .../base/icons/icons/mail/placeholders.scss   |    10 +
 .../base/icons/icons/mail/property-16.scss    |     3 +
 .../base/icons/icons/mail/property-24.scss    |     3 +
 .../base/icons/icons/mainframe/index.scss     |     6 +
 .../base/icons/icons/mainframe/keyframes.scss |    15 +
 .../icons/icons/mainframe/placeholders.scss   |    10 +
 .../icons/icons/mainframe/property-16.scss    |     3 +
 .../icons/icons/mainframe/property-24.scss    |     3 +
 .../base/icons/icons/map-pin/index.scss       |     6 +
 .../base/icons/icons/map-pin/keyframes.scss   |    15 +
 .../icons/icons/map-pin/placeholders.scss     |    10 +
 .../base/icons/icons/map-pin/property-16.scss |     3 +
 .../base/icons/icons/map-pin/property-24.scss |     3 +
 .../styles/base/icons/icons/map/index.scss    |     6 +
 .../base/icons/icons/map/keyframes.scss       |    15 +
 .../base/icons/icons/map/placeholders.scss    |    10 +
 .../base/icons/icons/map/property-16.scss     |     3 +
 .../base/icons/icons/map/property-24.scss     |     3 +
 .../base/icons/icons/maximize-alt/index.scss  |     6 +
 .../icons/icons/maximize-alt/keyframes.scss   |    15 +
 .../icons/maximize-alt/placeholders.scss      |    10 +
 .../icons/icons/maximize-alt/property-16.scss |     3 +
 .../icons/icons/maximize-alt/property-24.scss |     3 +
 .../base/icons/icons/maximize/index.scss      |     6 +
 .../base/icons/icons/maximize/keyframes.scss  |    15 +
 .../icons/icons/maximize/placeholders.scss    |    10 +
 .../icons/icons/maximize/property-16.scss     |     3 +
 .../icons/icons/maximize/property-24.scss     |     3 +
 .../styles/base/icons/icons/meh/index.scss    |     6 +
 .../base/icons/icons/meh/keyframes.scss       |    15 +
 .../base/icons/icons/meh/placeholders.scss    |    10 +
 .../base/icons/icons/meh/property-16.scss     |     3 +
 .../base/icons/icons/meh/property-24.scss     |     3 +
 .../styles/base/icons/icons/menu/index.scss   |     6 +
 .../base/icons/icons/menu/keyframes.scss      |    15 +
 .../base/icons/icons/menu/placeholders.scss   |    10 +
 .../base/icons/icons/menu/property-16.scss    |     3 +
 .../base/icons/icons/menu/property-24.scss    |     3 +
 .../styles/base/icons/icons/mesh/index.scss   |     6 +
 .../base/icons/icons/mesh/keyframes.scss      |    15 +
 .../base/icons/icons/mesh/placeholders.scss   |    10 +
 .../base/icons/icons/mesh/property-16.scss    |     3 +
 .../base/icons/icons/mesh/property-24.scss    |     3 +
 .../icons/message-circle-fill/index.scss      |     6 +
 .../icons/message-circle-fill/keyframes.scss  |    15 +
 .../message-circle-fill/placeholders.scss     |    10 +
 .../message-circle-fill/property-16.scss      |     3 +
 .../message-circle-fill/property-24.scss      |     3 +
 .../icons/icons/message-circle/index.scss     |     6 +
 .../icons/icons/message-circle/keyframes.scss |    15 +
 .../icons/message-circle/placeholders.scss    |    10 +
 .../icons/message-circle/property-16.scss     |     3 +
 .../icons/message-circle/property-24.scss     |     3 +
 .../icons/message-square-fill/index.scss      |     6 +
 .../icons/message-square-fill/keyframes.scss  |    15 +
 .../message-square-fill/placeholders.scss     |    10 +
 .../message-square-fill/property-16.scss      |     3 +
 .../message-square-fill/property-24.scss      |     3 +
 .../icons/icons/message-square/index.scss     |     6 +
 .../icons/icons/message-square/keyframes.scss |    15 +
 .../icons/message-square/placeholders.scss    |    10 +
 .../icons/message-square/property-16.scss     |     3 +
 .../icons/message-square/property-24.scss     |     3 +
 .../base/icons/icons/message/index.scss       |     6 +
 .../base/icons/icons/message/keyframes.scss   |    15 +
 .../icons/icons/message/placeholders.scss     |    10 +
 .../base/icons/icons/mic-off/index.scss       |     6 +
 .../base/icons/icons/mic-off/keyframes.scss   |    15 +
 .../icons/icons/mic-off/placeholders.scss     |    10 +
 .../base/icons/icons/mic-off/property-16.scss |     3 +
 .../base/icons/icons/mic-off/property-24.scss |     3 +
 .../styles/base/icons/icons/mic/index.scss    |     6 +
 .../base/icons/icons/mic/keyframes.scss       |    15 +
 .../base/icons/icons/mic/placeholders.scss    |    10 +
 .../base/icons/icons/mic/property-16.scss     |     3 +
 .../base/icons/icons/mic/property-24.scss     |     3 +
 .../icons/icons/microsoft-color/index.scss    |     6 +
 .../icons/microsoft-color/keyframes.scss      |     9 +
 .../icons/microsoft-color/placeholders.scss   |    10 +
 .../icons/microsoft-color/property-16.scss    |     3 +
 .../icons/microsoft-color/property-24.scss    |     3 +
 .../base/icons/icons/microsoft/index.scss     |     6 +
 .../base/icons/icons/microsoft/keyframes.scss |    15 +
 .../icons/icons/microsoft/placeholders.scss   |    10 +
 .../icons/icons/microsoft/property-16.scss    |     3 +
 .../icons/icons/microsoft/property-24.scss    |     3 +
 .../base/icons/icons/migrate/index.scss       |     6 +
 .../base/icons/icons/migrate/keyframes.scss   |    15 +
 .../icons/icons/migrate/placeholders.scss     |    10 +
 .../base/icons/icons/migrate/property-16.scss |     3 +
 .../base/icons/icons/migrate/property-24.scss |     3 +
 .../base/icons/icons/minimize-alt/index.scss  |     6 +
 .../icons/icons/minimize-alt/keyframes.scss   |    15 +
 .../icons/minimize-alt/placeholders.scss      |    10 +
 .../icons/icons/minimize-alt/property-16.scss |     3 +
 .../icons/icons/minimize-alt/property-24.scss |     3 +
 .../base/icons/icons/minimize/index.scss      |     6 +
 .../base/icons/icons/minimize/keyframes.scss  |    15 +
 .../icons/icons/minimize/placeholders.scss    |    10 +
 .../icons/icons/minimize/property-16.scss     |     3 +
 .../icons/icons/minimize/property-24.scss     |     3 +
 .../icons/icons/minus-circle-fill/index.scss  |     6 +
 .../icons/minus-circle-fill/keyframes.scss    |    15 +
 .../icons/minus-circle-fill/placeholders.scss |    10 +
 .../icons/minus-circle-outline/index.scss     |     6 +
 .../icons/minus-circle-outline/keyframes.scss |    15 +
 .../minus-circle-outline/placeholders.scss    |    10 +
 .../base/icons/icons/minus-circle/index.scss  |     6 +
 .../icons/icons/minus-circle/keyframes.scss   |    15 +
 .../icons/minus-circle/placeholders.scss      |    10 +
 .../icons/icons/minus-circle/property-16.scss |     3 +
 .../icons/icons/minus-circle/property-24.scss |     3 +
 .../base/icons/icons/minus-plain/index.scss   |     6 +
 .../icons/icons/minus-plain/keyframes.scss    |    15 +
 .../icons/icons/minus-plain/placeholders.scss |    10 +
 .../icons/icons/minus-plus-circle/index.scss  |     6 +
 .../icons/minus-plus-circle/keyframes.scss    |    15 +
 .../icons/minus-plus-circle/placeholders.scss |    10 +
 .../icons/minus-plus-circle/property-16.scss  |     3 +
 .../icons/minus-plus-circle/property-24.scss  |     3 +
 .../icons/icons/minus-plus-square/index.scss  |     6 +
 .../icons/minus-plus-square/keyframes.scss    |    15 +
 .../icons/minus-plus-square/placeholders.scss |    10 +
 .../icons/minus-plus-square/property-16.scss  |     3 +
 .../icons/minus-plus-square/property-24.scss  |     3 +
 .../base/icons/icons/minus-plus/index.scss    |     6 +
 .../icons/icons/minus-plus/keyframes.scss     |    15 +
 .../icons/icons/minus-plus/placeholders.scss  |    10 +
 .../icons/icons/minus-plus/property-16.scss   |     3 +
 .../icons/icons/minus-plus/property-24.scss   |     3 +
 .../icons/icons/minus-square-fill/index.scss  |     6 +
 .../icons/minus-square-fill/keyframes.scss    |    15 +
 .../icons/minus-square-fill/placeholders.scss |    10 +
 .../base/icons/icons/minus-square/index.scss  |     6 +
 .../icons/icons/minus-square/keyframes.scss   |    15 +
 .../icons/minus-square/placeholders.scss      |    10 +
 .../icons/icons/minus-square/property-16.scss |     3 +
 .../icons/icons/minus-square/property-24.scss |     3 +
 .../styles/base/icons/icons/minus/index.scss  |     6 +
 .../base/icons/icons/minus/keyframes.scss     |    15 +
 .../base/icons/icons/minus/placeholders.scss  |    10 +
 .../base/icons/icons/minus/property-16.scss   |     3 +
 .../base/icons/icons/minus/property-24.scss   |     3 +
 .../styles/base/icons/icons/module/index.scss |     6 +
 .../base/icons/icons/module/keyframes.scss    |    15 +
 .../base/icons/icons/module/placeholders.scss |    10 +
 .../base/icons/icons/module/property-16.scss  |     3 +
 .../base/icons/icons/module/property-24.scss  |     3 +
 .../base/icons/icons/monitor/index.scss       |     6 +
 .../base/icons/icons/monitor/keyframes.scss   |    15 +
 .../icons/icons/monitor/placeholders.scss     |    10 +
 .../base/icons/icons/monitor/property-16.scss |     3 +
 .../base/icons/icons/monitor/property-24.scss |     3 +
 .../styles/base/icons/icons/moon/index.scss   |     6 +
 .../base/icons/icons/moon/keyframes.scss      |    15 +
 .../base/icons/icons/moon/placeholders.scss   |    10 +
 .../base/icons/icons/moon/property-16.scss    |     3 +
 .../base/icons/icons/moon/property-24.scss    |     3 +
 .../icons/icons/more-horizontal/index.scss    |     6 +
 .../icons/more-horizontal/keyframes.scss      |    15 +
 .../icons/more-horizontal/placeholders.scss   |    10 +
 .../icons/more-horizontal/property-16.scss    |     3 +
 .../icons/more-horizontal/property-24.scss    |     3 +
 .../base/icons/icons/more-vertical/index.scss |     6 +
 .../icons/icons/more-vertical/keyframes.scss  |    15 +
 .../icons/more-vertical/placeholders.scss     |    10 +
 .../icons/more-vertical/property-16.scss      |     3 +
 .../icons/more-vertical/property-24.scss      |     3 +
 .../base/icons/icons/mouse-pointer/index.scss |     6 +
 .../icons/icons/mouse-pointer/keyframes.scss  |    15 +
 .../icons/mouse-pointer/placeholders.scss     |    10 +
 .../icons/mouse-pointer/property-16.scss      |     3 +
 .../icons/mouse-pointer/property-24.scss      |     3 +
 .../styles/base/icons/icons/move/index.scss   |     6 +
 .../base/icons/icons/move/keyframes.scss      |    15 +
 .../base/icons/icons/move/placeholders.scss   |    10 +
 .../base/icons/icons/move/property-16.scss    |     3 +
 .../base/icons/icons/move/property-24.scss    |     3 +
 .../styles/base/icons/icons/music/index.scss  |     6 +
 .../base/icons/icons/music/keyframes.scss     |    15 +
 .../base/icons/icons/music/placeholders.scss  |    10 +
 .../base/icons/icons/music/property-16.scss   |     3 +
 .../base/icons/icons/music/property-24.scss   |     3 +
 .../icons/icons/navigation-alt/index.scss     |     6 +
 .../icons/icons/navigation-alt/keyframes.scss |    15 +
 .../icons/navigation-alt/placeholders.scss    |    10 +
 .../icons/navigation-alt/property-16.scss     |     3 +
 .../icons/navigation-alt/property-24.scss     |     3 +
 .../base/icons/icons/navigation/index.scss    |     6 +
 .../icons/icons/navigation/keyframes.scss     |    15 +
 .../icons/icons/navigation/placeholders.scss  |    10 +
 .../icons/icons/navigation/property-16.scss   |     3 +
 .../icons/icons/navigation/property-24.scss   |     3 +
 .../base/icons/icons/network-alt/index.scss   |     6 +
 .../icons/icons/network-alt/keyframes.scss    |    15 +
 .../icons/icons/network-alt/placeholders.scss |    10 +
 .../icons/icons/network-alt/property-16.scss  |     3 +
 .../icons/icons/network-alt/property-24.scss  |     3 +
 .../base/icons/icons/network/index.scss       |     6 +
 .../base/icons/icons/network/keyframes.scss   |    15 +
 .../icons/icons/network/placeholders.scss     |    10 +
 .../base/icons/icons/network/property-16.scss |     3 +
 .../base/icons/icons/network/property-24.scss |     3 +
 .../base/icons/icons/newspaper/index.scss     |     6 +
 .../base/icons/icons/newspaper/keyframes.scss |    15 +
 .../icons/icons/newspaper/placeholders.scss   |    10 +
 .../icons/icons/newspaper/property-16.scss    |     3 +
 .../icons/icons/newspaper/property-24.scss    |     3 +
 .../styles/base/icons/icons/node/index.scss   |     6 +
 .../base/icons/icons/node/keyframes.scss      |    15 +
 .../base/icons/icons/node/placeholders.scss   |    10 +
 .../base/icons/icons/node/property-16.scss    |     3 +
 .../base/icons/icons/node/property-24.scss    |     3 +
 .../base/icons/icons/nomad-color/index.scss   |     6 +
 .../icons/icons/nomad-color/keyframes.scss    |     9 +
 .../icons/icons/nomad-color/placeholders.scss |    10 +
 .../icons/icons/nomad-color/property-16.scss  |     3 +
 .../icons/icons/nomad-color/property-24.scss  |     3 +
 .../styles/base/icons/icons/nomad/index.scss  |     6 +
 .../base/icons/icons/nomad/keyframes.scss     |    15 +
 .../base/icons/icons/nomad/placeholders.scss  |    10 +
 .../base/icons/icons/nomad/property-16.scss   |     3 +
 .../base/icons/icons/nomad/property-24.scss   |     3 +
 .../icons/notification-disabled/index.scss    |     6 +
 .../notification-disabled/keyframes.scss      |    15 +
 .../notification-disabled/placeholders.scss   |    10 +
 .../icons/icons/notification-fill/index.scss  |     6 +
 .../icons/notification-fill/keyframes.scss    |    15 +
 .../icons/notification-fill/placeholders.scss |    10 +
 .../icons/notification-outline/index.scss     |     6 +
 .../icons/notification-outline/keyframes.scss |    15 +
 .../notification-outline/placeholders.scss    |    10 +
 .../base/icons/icons/octagon/index.scss       |     6 +
 .../base/icons/icons/octagon/keyframes.scss   |    15 +
 .../icons/icons/octagon/placeholders.scss     |    10 +
 .../base/icons/icons/octagon/property-16.scss |     3 +
 .../base/icons/icons/octagon/property-24.scss |     3 +
 .../base/icons/icons/okta-color/index.scss    |     6 +
 .../icons/icons/okta-color/keyframes.scss     |     9 +
 .../icons/icons/okta-color/placeholders.scss  |    10 +
 .../icons/icons/okta-color/property-16.scss   |     3 +
 .../icons/icons/okta-color/property-24.scss   |     3 +
 .../styles/base/icons/icons/okta/index.scss   |     6 +
 .../base/icons/icons/okta/keyframes.scss      |    15 +
 .../base/icons/icons/okta/placeholders.scss   |    10 +
 .../base/icons/icons/okta/property-16.scss    |     3 +
 .../base/icons/icons/okta/property-24.scss    |     3 +
 .../base/icons/icons/oracle-color/index.scss  |     6 +
 .../icons/icons/oracle-color/keyframes.scss   |     9 +
 .../icons/oracle-color/placeholders.scss      |    10 +
 .../icons/icons/oracle-color/property-16.scss |     3 +
 .../icons/icons/oracle-color/property-24.scss |     3 +
 .../styles/base/icons/icons/oracle/index.scss |     6 +
 .../base/icons/icons/oracle/keyframes.scss    |    15 +
 .../base/icons/icons/oracle/placeholders.scss |    10 +
 .../base/icons/icons/oracle/property-16.scss  |     3 +
 .../base/icons/icons/oracle/property-24.scss  |     3 +
 .../styles/base/icons/icons/org/index.scss    |     6 +
 .../base/icons/icons/org/keyframes.scss       |    15 +
 .../base/icons/icons/org/placeholders.scss    |    10 +
 .../base/icons/icons/org/property-16.scss     |     3 +
 .../base/icons/icons/org/property-24.scss     |     3 +
 .../base/icons/icons/outline/index.scss       |     6 +
 .../base/icons/icons/outline/keyframes.scss   |    15 +
 .../icons/icons/outline/placeholders.scss     |    10 +
 .../base/icons/icons/outline/property-16.scss |     3 +
 .../base/icons/icons/outline/property-24.scss |     3 +
 .../base/icons/icons/pack-color/index.scss    |     6 +
 .../icons/icons/pack-color/keyframes.scss     |     9 +
 .../icons/icons/pack-color/placeholders.scss  |    10 +
 .../icons/icons/pack-color/property-16.scss   |     3 +
 .../icons/icons/pack-color/property-24.scss   |     3 +
 .../styles/base/icons/icons/pack/index.scss   |     6 +
 .../base/icons/icons/pack/keyframes.scss      |    15 +
 .../base/icons/icons/pack/placeholders.scss   |    10 +
 .../base/icons/icons/pack/property-16.scss    |     3 +
 .../base/icons/icons/pack/property-24.scss    |     3 +
 .../base/icons/icons/package/index.scss       |     6 +
 .../base/icons/icons/package/keyframes.scss   |    15 +
 .../icons/icons/package/placeholders.scss     |    10 +
 .../base/icons/icons/package/property-16.scss |     3 +
 .../base/icons/icons/package/property-24.scss |     3 +
 .../base/icons/icons/packer-color/index.scss  |     6 +
 .../icons/icons/packer-color/keyframes.scss   |     9 +
 .../icons/packer-color/placeholders.scss      |    10 +
 .../icons/icons/packer-color/property-16.scss |     3 +
 .../icons/icons/packer-color/property-24.scss |     3 +
 .../styles/base/icons/icons/packer/index.scss |     6 +
 .../base/icons/icons/packer/keyframes.scss    |    15 +
 .../base/icons/icons/packer/placeholders.scss |    10 +
 .../base/icons/icons/packer/property-16.scss  |     3 +
 .../base/icons/icons/packer/property-24.scss  |     3 +
 .../base/icons/icons/page-outline/index.scss  |     6 +
 .../icons/icons/page-outline/keyframes.scss   |    15 +
 .../icons/page-outline/placeholders.scss      |    10 +
 .../base/icons/icons/paperclip/index.scss     |     6 +
 .../base/icons/icons/paperclip/keyframes.scss |    15 +
 .../icons/icons/paperclip/placeholders.scss   |    10 +
 .../icons/icons/paperclip/property-16.scss    |     3 +
 .../icons/icons/paperclip/property-24.scss    |     3 +
 .../base/icons/icons/partner/index.scss       |     6 +
 .../base/icons/icons/partner/keyframes.scss   |    15 +
 .../icons/icons/partner/placeholders.scss     |    10 +
 .../styles/base/icons/icons/path/index.scss   |     6 +
 .../base/icons/icons/path/keyframes.scss      |    15 +
 .../base/icons/icons/path/placeholders.scss   |    10 +
 .../base/icons/icons/path/property-16.scss    |     3 +
 .../base/icons/icons/path/property-24.scss    |     3 +
 .../base/icons/icons/pause-circle/index.scss  |     6 +
 .../icons/icons/pause-circle/keyframes.scss   |    15 +
 .../icons/pause-circle/placeholders.scss      |    10 +
 .../icons/icons/pause-circle/property-16.scss |     3 +
 .../icons/icons/pause-circle/property-24.scss |     3 +
 .../styles/base/icons/icons/pause/index.scss  |     6 +
 .../base/icons/icons/pause/keyframes.scss     |    15 +
 .../base/icons/icons/pause/placeholders.scss  |    10 +
 .../base/icons/icons/pause/property-16.scss   |     3 +
 .../base/icons/icons/pause/property-24.scss   |     3 +
 .../base/icons/icons/pen-tool/index.scss      |     6 +
 .../base/icons/icons/pen-tool/keyframes.scss  |    15 +
 .../icons/icons/pen-tool/placeholders.scss    |    10 +
 .../icons/icons/pen-tool/property-16.scss     |     3 +
 .../icons/icons/pen-tool/property-24.scss     |     3 +
 .../base/icons/icons/pencil-tool/index.scss   |     6 +
 .../icons/icons/pencil-tool/keyframes.scss    |    15 +
 .../icons/icons/pencil-tool/placeholders.scss |    10 +
 .../icons/icons/pencil-tool/property-16.scss  |     3 +
 .../icons/icons/pencil-tool/property-24.scss  |     3 +
 .../base/icons/icons/phone-call/index.scss    |     6 +
 .../icons/icons/phone-call/keyframes.scss     |    15 +
 .../icons/icons/phone-call/placeholders.scss  |    10 +
 .../icons/icons/phone-call/property-16.scss   |     3 +
 .../icons/icons/phone-call/property-24.scss   |     3 +
 .../base/icons/icons/phone-off/index.scss     |     6 +
 .../base/icons/icons/phone-off/keyframes.scss |    15 +
 .../icons/icons/phone-off/placeholders.scss   |    10 +
 .../icons/icons/phone-off/property-16.scss    |     3 +
 .../icons/icons/phone-off/property-24.scss    |     3 +
 .../styles/base/icons/icons/phone/index.scss  |     6 +
 .../base/icons/icons/phone/keyframes.scss     |    15 +
 .../base/icons/icons/phone/placeholders.scss  |    10 +
 .../base/icons/icons/phone/property-16.scss   |     3 +
 .../base/icons/icons/phone/property-24.scss   |     3 +
 .../base/icons/icons/pie-chart/index.scss     |     6 +
 .../base/icons/icons/pie-chart/keyframes.scss |    15 +
 .../icons/icons/pie-chart/placeholders.scss   |    10 +
 .../icons/icons/pie-chart/property-16.scss    |     3 +
 .../icons/icons/pie-chart/property-24.scss    |     3 +
 .../styles/base/icons/icons/pin/index.scss    |     6 +
 .../base/icons/icons/pin/keyframes.scss       |    15 +
 .../base/icons/icons/pin/placeholders.scss    |    10 +
 .../base/icons/icons/pin/property-16.scss     |     3 +
 .../base/icons/icons/pin/property-24.scss     |     3 +
 .../base/icons/icons/play-circle/index.scss   |     6 +
 .../icons/icons/play-circle/keyframes.scss    |    15 +
 .../icons/icons/play-circle/placeholders.scss |    10 +
 .../icons/icons/play-circle/property-16.scss  |     3 +
 .../icons/icons/play-circle/property-24.scss  |     3 +
 .../base/icons/icons/play-fill/index.scss     |     6 +
 .../base/icons/icons/play-fill/keyframes.scss |    15 +
 .../icons/icons/play-fill/placeholders.scss   |    10 +
 .../base/icons/icons/play-outline/index.scss  |     6 +
 .../icons/icons/play-outline/keyframes.scss   |    15 +
 .../icons/play-outline/placeholders.scss      |    10 +
 .../base/icons/icons/play-plain/index.scss    |     6 +
 .../icons/icons/play-plain/keyframes.scss     |    15 +
 .../icons/icons/play-plain/placeholders.scss  |    10 +
 .../styles/base/icons/icons/play/index.scss   |     6 +
 .../base/icons/icons/play/keyframes.scss      |    15 +
 .../base/icons/icons/play/placeholders.scss   |    10 +
 .../base/icons/icons/play/property-16.scss    |     3 +
 .../base/icons/icons/play/property-24.scss    |     3 +
 .../icons/icons/plus-circle-fill/index.scss   |     6 +
 .../icons/plus-circle-fill/keyframes.scss     |    15 +
 .../icons/plus-circle-fill/placeholders.scss  |    10 +
 .../icons/plus-circle-outline/index.scss      |     6 +
 .../icons/plus-circle-outline/keyframes.scss  |    15 +
 .../plus-circle-outline/placeholders.scss     |    10 +
 .../base/icons/icons/plus-circle/index.scss   |     6 +
 .../icons/icons/plus-circle/keyframes.scss    |    15 +
 .../icons/icons/plus-circle/placeholders.scss |    10 +
 .../icons/icons/plus-circle/property-16.scss  |     3 +
 .../icons/icons/plus-circle/property-24.scss  |     3 +
 .../base/icons/icons/plus-plain/index.scss    |     6 +
 .../icons/icons/plus-plain/keyframes.scss     |    15 +
 .../icons/icons/plus-plain/placeholders.scss  |    10 +
 .../icons/icons/plus-square-fill/index.scss   |     6 +
 .../icons/plus-square-fill/keyframes.scss     |    15 +
 .../icons/plus-square-fill/placeholders.scss  |    10 +
 .../base/icons/icons/plus-square/index.scss   |     6 +
 .../icons/icons/plus-square/keyframes.scss    |    15 +
 .../icons/icons/plus-square/placeholders.scss |    10 +
 .../icons/icons/plus-square/property-16.scss  |     3 +
 .../icons/icons/plus-square/property-24.scss  |     3 +
 .../styles/base/icons/icons/plus/index.scss   |     6 +
 .../base/icons/icons/plus/keyframes.scss      |    15 +
 .../base/icons/icons/plus/placeholders.scss   |    10 +
 .../base/icons/icons/plus/property-16.scss    |     3 +
 .../base/icons/icons/plus/property-24.scss    |     3 +
 .../styles/base/icons/icons/port/index.scss   |     6 +
 .../base/icons/icons/port/keyframes.scss      |    15 +
 .../base/icons/icons/port/placeholders.scss   |    10 +
 .../base/icons/icons/port/property-16.scss    |     3 +
 .../base/icons/icons/port/property-24.scss    |     3 +
 .../styles/base/icons/icons/power/index.scss  |     6 +
 .../base/icons/icons/power/keyframes.scss     |    15 +
 .../base/icons/icons/power/placeholders.scss  |    10 +
 .../base/icons/icons/power/property-16.scss   |     3 +
 .../base/icons/icons/power/property-24.scss   |     3 +
 .../base/icons/icons/printer/index.scss       |     6 +
 .../base/icons/icons/printer/keyframes.scss   |    15 +
 .../icons/icons/printer/placeholders.scss     |    10 +
 .../base/icons/icons/printer/property-16.scss |     3 +
 .../base/icons/icons/printer/property-24.scss |     3 +
 .../base/icons/icons/protocol/index.scss      |     6 +
 .../base/icons/icons/protocol/keyframes.scss  |    15 +
 .../icons/icons/protocol/placeholders.scss    |    10 +
 .../icons/icons/protocol/property-16.scss     |     3 +
 .../icons/icons/protocol/property-24.scss     |     3 +
 .../base/icons/icons/provider/index.scss      |     6 +
 .../base/icons/icons/provider/keyframes.scss  |    15 +
 .../icons/icons/provider/placeholders.scss    |    10 +
 .../icons/icons/provider/property-16.scss     |     3 +
 .../icons/icons/provider/property-24.scss     |     3 +
 .../icons/icons/public-default/index.scss     |     6 +
 .../icons/icons/public-default/keyframes.scss |    15 +
 .../icons/public-default/placeholders.scss    |    10 +
 .../base/icons/icons/public-locked/index.scss |     6 +
 .../icons/icons/public-locked/keyframes.scss  |    15 +
 .../icons/public-locked/placeholders.scss     |    10 +
 .../styles/base/icons/icons/queue/index.scss  |     6 +
 .../base/icons/icons/queue/keyframes.scss     |    15 +
 .../base/icons/icons/queue/placeholders.scss  |    10 +
 .../base/icons/icons/queue/property-16.scss   |     3 +
 .../base/icons/icons/queue/property-24.scss   |     3 +
 .../icons/radio-button-checked/index.scss     |     6 +
 .../icons/radio-button-checked/keyframes.scss |    15 +
 .../radio-button-checked/placeholders.scss    |    10 +
 .../icons/radio-button-unchecked/index.scss   |     6 +
 .../radio-button-unchecked/keyframes.scss     |    15 +
 .../radio-button-unchecked/placeholders.scss  |    10 +
 .../styles/base/icons/icons/radio/index.scss  |     6 +
 .../base/icons/icons/radio/keyframes.scss     |    15 +
 .../base/icons/icons/radio/placeholders.scss  |    10 +
 .../base/icons/icons/radio/property-16.scss   |     3 +
 .../base/icons/icons/radio/property-24.scss   |     3 +
 .../styles/base/icons/icons/random/index.scss |     6 +
 .../base/icons/icons/random/keyframes.scss    |    15 +
 .../base/icons/icons/random/placeholders.scss |    10 +
 .../base/icons/icons/random/property-16.scss  |     3 +
 .../base/icons/icons/random/property-24.scss  |     3 +
 .../base/icons/icons/redirect/index.scss      |     6 +
 .../base/icons/icons/redirect/keyframes.scss  |    15 +
 .../icons/icons/redirect/placeholders.scss    |    10 +
 .../icons/icons/redirect/property-16.scss     |     3 +
 .../icons/icons/redirect/property-24.scss     |     3 +
 .../base/icons/icons/refresh-alert/index.scss |     6 +
 .../icons/icons/refresh-alert/keyframes.scss  |    15 +
 .../icons/refresh-alert/placeholders.scss     |    10 +
 .../icons/icons/refresh-default/index.scss    |     6 +
 .../icons/refresh-default/keyframes.scss      |    15 +
 .../icons/refresh-default/placeholders.scss   |    10 +
 .../styles/base/icons/icons/reload/index.scss |     6 +
 .../base/icons/icons/reload/keyframes.scss    |    15 +
 .../base/icons/icons/reload/placeholders.scss |    10 +
 .../base/icons/icons/reload/property-16.scss  |     3 +
 .../base/icons/icons/reload/property-24.scss  |     3 +
 .../styles/base/icons/icons/remix/index.scss  |     6 +
 .../base/icons/icons/remix/keyframes.scss     |    15 +
 .../base/icons/icons/remix/placeholders.scss  |    10 +
 .../styles/base/icons/icons/repeat/index.scss |     6 +
 .../base/icons/icons/repeat/keyframes.scss    |    15 +
 .../base/icons/icons/repeat/placeholders.scss |    10 +
 .../base/icons/icons/repeat/property-16.scss  |     3 +
 .../base/icons/icons/repeat/property-24.scss  |     3 +
 .../icons/icons/replication-direct/index.scss |     6 +
 .../icons/replication-direct/keyframes.scss   |    15 +
 .../replication-direct/placeholders.scss      |    10 +
 .../icons/replication-direct/property-16.scss |     3 +
 .../icons/replication-direct/property-24.scss |     3 +
 .../icons/icons/replication-perf/index.scss   |     6 +
 .../icons/replication-perf/keyframes.scss     |    15 +
 .../icons/replication-perf/placeholders.scss  |    10 +
 .../icons/replication-perf/property-16.scss   |     3 +
 .../icons/replication-perf/property-24.scss   |     3 +
 .../styles/base/icons/icons/rewind/index.scss |     6 +
 .../base/icons/icons/rewind/keyframes.scss    |    15 +
 .../base/icons/icons/rewind/placeholders.scss |    10 +
 .../base/icons/icons/rewind/property-16.scss  |     3 +
 .../base/icons/icons/rewind/property-24.scss  |     3 +
 .../styles/base/icons/icons/ribbon/index.scss |     6 +
 .../base/icons/icons/ribbon/keyframes.scss    |    15 +
 .../base/icons/icons/ribbon/placeholders.scss |    10 +
 .../styles/base/icons/icons/rocket/index.scss |     6 +
 .../base/icons/icons/rocket/keyframes.scss    |    15 +
 .../base/icons/icons/rocket/placeholders.scss |    10 +
 .../base/icons/icons/rocket/property-16.scss  |     3 +
 .../base/icons/icons/rocket/property-24.scss  |     3 +
 .../base/icons/icons/rotate-ccw/index.scss    |     6 +
 .../icons/icons/rotate-ccw/keyframes.scss     |    15 +
 .../icons/icons/rotate-ccw/placeholders.scss  |    10 +
 .../icons/icons/rotate-ccw/property-16.scss   |     3 +
 .../icons/icons/rotate-ccw/property-24.scss   |     3 +
 .../base/icons/icons/rotate-cw/index.scss     |     6 +
 .../base/icons/icons/rotate-cw/keyframes.scss |    15 +
 .../icons/icons/rotate-cw/placeholders.scss   |    10 +
 .../icons/icons/rotate-cw/property-16.scss    |     3 +
 .../icons/icons/rotate-cw/property-24.scss    |     3 +
 .../styles/base/icons/icons/rss/index.scss    |     6 +
 .../base/icons/icons/rss/keyframes.scss       |    15 +
 .../base/icons/icons/rss/placeholders.scss    |    10 +
 .../base/icons/icons/rss/property-16.scss     |     3 +
 .../base/icons/icons/rss/property-24.scss     |     3 +
 .../styles/base/icons/icons/run/index.scss    |     6 +
 .../base/icons/icons/run/keyframes.scss       |    15 +
 .../base/icons/icons/run/placeholders.scss    |    10 +
 .../base/icons/icons/run/property-16.scss     |     3 +
 .../base/icons/icons/run/property-24.scss     |     3 +
 .../base/icons/icons/running/index.scss       |     6 +
 .../base/icons/icons/running/keyframes.scss   |    15 +
 .../icons/icons/running/placeholders.scss     |    10 +
 .../base/icons/icons/running/property-16.scss |     3 +
 .../base/icons/icons/running/property-24.scss |     3 +
 .../styles/base/icons/icons/save/index.scss   |     6 +
 .../base/icons/icons/save/keyframes.scss      |    15 +
 .../base/icons/icons/save/placeholders.scss   |    10 +
 .../base/icons/icons/save/property-16.scss    |     3 +
 .../base/icons/icons/save/property-24.scss    |     3 +
 .../base/icons/icons/scissors/index.scss      |     6 +
 .../base/icons/icons/scissors/keyframes.scss  |    15 +
 .../icons/icons/scissors/placeholders.scss    |    10 +
 .../icons/icons/scissors/property-16.scss     |     3 +
 .../icons/icons/scissors/property-24.scss     |     3 +
 .../base/icons/icons/search-color/index.scss  |     6 +
 .../icons/icons/search-color/keyframes.scss   |     9 +
 .../icons/search-color/placeholders.scss      |    10 +
 .../icons/icons/search-color/property-16.scss |     3 +
 .../icons/icons/search-color/property-24.scss |     3 +
 .../styles/base/icons/icons/search/index.scss |     6 +
 .../base/icons/icons/search/keyframes.scss    |    15 +
 .../base/icons/icons/search/placeholders.scss |    10 +
 .../base/icons/icons/search/property-16.scss  |     3 +
 .../base/icons/icons/search/property-24.scss  |     3 +
 .../styles/base/icons/icons/send/index.scss   |     6 +
 .../base/icons/icons/send/keyframes.scss      |    15 +
 .../base/icons/icons/send/placeholders.scss   |    10 +
 .../base/icons/icons/send/property-16.scss    |     3 +
 .../base/icons/icons/send/property-24.scss    |     3 +
 .../icons/icons/server-cluster/index.scss     |     6 +
 .../icons/icons/server-cluster/keyframes.scss |    15 +
 .../icons/server-cluster/placeholders.scss    |    10 +
 .../icons/server-cluster/property-16.scss     |     3 +
 .../icons/server-cluster/property-24.scss     |     3 +
 .../styles/base/icons/icons/server/index.scss |     6 +
 .../base/icons/icons/server/keyframes.scss    |    15 +
 .../base/icons/icons/server/placeholders.scss |    10 +
 .../base/icons/icons/server/property-16.scss  |     3 +
 .../base/icons/icons/server/property-24.scss  |     3 +
 .../base/icons/icons/serverless/index.scss    |     6 +
 .../icons/icons/serverless/keyframes.scss     |    15 +
 .../icons/icons/serverless/placeholders.scss  |    10 +
 .../icons/icons/serverless/property-16.scss   |     3 +
 .../icons/icons/serverless/property-24.scss   |     3 +
 .../base/icons/icons/settings/index.scss      |     6 +
 .../base/icons/icons/settings/keyframes.scss  |    15 +
 .../icons/icons/settings/placeholders.scss    |    10 +
 .../icons/icons/settings/property-16.scss     |     3 +
 .../icons/icons/settings/property-24.scss     |     3 +
 .../styles/base/icons/icons/share/index.scss  |     6 +
 .../base/icons/icons/share/keyframes.scss     |    15 +
 .../base/icons/icons/share/placeholders.scss  |    10 +
 .../base/icons/icons/share/property-16.scss   |     3 +
 .../base/icons/icons/share/property-24.scss   |     3 +
 .../base/icons/icons/shield-alert/index.scss  |     6 +
 .../icons/icons/shield-alert/keyframes.scss   |    15 +
 .../icons/shield-alert/placeholders.scss      |    10 +
 .../icons/icons/shield-alert/property-16.scss |     3 +
 .../icons/icons/shield-alert/property-24.scss |     3 +
 .../base/icons/icons/shield-check/index.scss  |     6 +
 .../icons/icons/shield-check/keyframes.scss   |    15 +
 .../icons/shield-check/placeholders.scss      |    10 +
 .../icons/icons/shield-check/property-16.scss |     3 +
 .../icons/icons/shield-check/property-24.scss |     3 +
 .../base/icons/icons/shield-off/index.scss    |     6 +
 .../icons/icons/shield-off/keyframes.scss     |    15 +
 .../icons/icons/shield-off/placeholders.scss  |    10 +
 .../icons/icons/shield-off/property-16.scss   |     3 +
 .../icons/icons/shield-off/property-24.scss   |     3 +
 .../base/icons/icons/shield-x/index.scss      |     6 +
 .../base/icons/icons/shield-x/keyframes.scss  |    15 +
 .../icons/icons/shield-x/placeholders.scss    |    10 +
 .../icons/icons/shield-x/property-16.scss     |     3 +
 .../icons/icons/shield-x/property-24.scss     |     3 +
 .../styles/base/icons/icons/shield/index.scss |     6 +
 .../base/icons/icons/shield/keyframes.scss    |    15 +
 .../base/icons/icons/shield/placeholders.scss |    10 +
 .../base/icons/icons/shield/property-16.scss  |     3 +
 .../base/icons/icons/shield/property-24.scss  |     3 +
 .../base/icons/icons/shopping-bag/index.scss  |     6 +
 .../icons/icons/shopping-bag/keyframes.scss   |    15 +
 .../icons/shopping-bag/placeholders.scss      |    10 +
 .../icons/icons/shopping-bag/property-16.scss |     3 +
 .../icons/icons/shopping-bag/property-24.scss |     3 +
 .../base/icons/icons/shopping-cart/index.scss |     6 +
 .../icons/icons/shopping-cart/keyframes.scss  |    15 +
 .../icons/shopping-cart/placeholders.scss     |    10 +
 .../icons/shopping-cart/property-16.scss      |     3 +
 .../icons/shopping-cart/property-24.scss      |     3 +
 .../base/icons/icons/shuffle/index.scss       |     6 +
 .../base/icons/icons/shuffle/keyframes.scss   |    15 +
 .../icons/icons/shuffle/placeholders.scss     |    10 +
 .../base/icons/icons/shuffle/property-16.scss |     3 +
 .../base/icons/icons/shuffle/property-24.scss |     3 +
 .../base/icons/icons/sidebar-hide/index.scss  |     6 +
 .../icons/icons/sidebar-hide/keyframes.scss   |    15 +
 .../icons/sidebar-hide/placeholders.scss      |    10 +
 .../icons/icons/sidebar-hide/property-16.scss |     3 +
 .../icons/icons/sidebar-hide/property-24.scss |     3 +
 .../base/icons/icons/sidebar-show/index.scss  |     6 +
 .../icons/icons/sidebar-show/keyframes.scss   |    15 +
 .../icons/sidebar-show/placeholders.scss      |    10 +
 .../icons/icons/sidebar-show/property-16.scss |     3 +
 .../icons/icons/sidebar-show/property-24.scss |     3 +
 .../base/icons/icons/sidebar/index.scss       |     6 +
 .../base/icons/icons/sidebar/keyframes.scss   |    15 +
 .../icons/icons/sidebar/placeholders.scss     |    10 +
 .../base/icons/icons/sidebar/property-16.scss |     3 +
 .../base/icons/icons/sidebar/property-24.scss |     3 +
 .../base/icons/icons/sign-in/index.scss       |     6 +
 .../base/icons/icons/sign-in/keyframes.scss   |    15 +
 .../icons/icons/sign-in/placeholders.scss     |    10 +
 .../base/icons/icons/sign-in/property-16.scss |     3 +
 .../base/icons/icons/sign-in/property-24.scss |     3 +
 .../base/icons/icons/sign-out/index.scss      |     6 +
 .../base/icons/icons/sign-out/keyframes.scss  |    15 +
 .../icons/icons/sign-out/placeholders.scss    |    10 +
 .../icons/icons/sign-out/property-16.scss     |     3 +
 .../icons/icons/sign-out/property-24.scss     |     3 +
 .../base/icons/icons/skip-back/index.scss     |     6 +
 .../base/icons/icons/skip-back/keyframes.scss |    15 +
 .../icons/icons/skip-back/placeholders.scss   |    10 +
 .../icons/icons/skip-back/property-16.scss    |     3 +
 .../icons/icons/skip-back/property-24.scss    |     3 +
 .../base/icons/icons/skip-forward/index.scss  |     6 +
 .../icons/icons/skip-forward/keyframes.scss   |    15 +
 .../icons/skip-forward/placeholders.scss      |    10 +
 .../icons/icons/skip-forward/property-16.scss |     3 +
 .../icons/icons/skip-forward/property-24.scss |     3 +
 .../styles/base/icons/icons/skip/index.scss   |     6 +
 .../base/icons/icons/skip/keyframes.scss      |    15 +
 .../base/icons/icons/skip/placeholders.scss   |    10 +
 .../base/icons/icons/skip/property-16.scss    |     3 +
 .../base/icons/icons/skip/property-24.scss    |     3 +
 .../base/icons/icons/slack-color/index.scss   |     6 +
 .../icons/icons/slack-color/keyframes.scss    |     9 +
 .../icons/icons/slack-color/placeholders.scss |    10 +
 .../icons/icons/slack-color/property-16.scss  |     3 +
 .../icons/icons/slack-color/property-24.scss  |     3 +
 .../styles/base/icons/icons/slack/index.scss  |     6 +
 .../base/icons/icons/slack/keyframes.scss     |    15 +
 .../base/icons/icons/slack/placeholders.scss  |    10 +
 .../base/icons/icons/slack/property-16.scss   |     3 +
 .../base/icons/icons/slack/property-24.scss   |     3 +
 .../base/icons/icons/slash-square/index.scss  |     6 +
 .../icons/icons/slash-square/keyframes.scss   |    15 +
 .../icons/slash-square/placeholders.scss      |    10 +
 .../icons/icons/slash-square/property-16.scss |     3 +
 .../icons/icons/slash-square/property-24.scss |     3 +
 .../styles/base/icons/icons/slash/index.scss  |     6 +
 .../base/icons/icons/slash/keyframes.scss     |    15 +
 .../base/icons/icons/slash/placeholders.scss  |    10 +
 .../base/icons/icons/slash/property-16.scss   |     3 +
 .../base/icons/icons/slash/property-24.scss   |     3 +
 .../base/icons/icons/sliders/index.scss       |     6 +
 .../base/icons/icons/sliders/keyframes.scss   |    15 +
 .../icons/icons/sliders/placeholders.scss     |    10 +
 .../base/icons/icons/sliders/property-16.scss |     3 +
 .../base/icons/icons/sliders/property-24.scss |     3 +
 .../base/icons/icons/smartphone/index.scss    |     6 +
 .../icons/icons/smartphone/keyframes.scss     |    15 +
 .../icons/icons/smartphone/placeholders.scss  |    10 +
 .../icons/icons/smartphone/property-16.scss   |     3 +
 .../icons/icons/smartphone/property-24.scss   |     3 +
 .../styles/base/icons/icons/smile/index.scss  |     6 +
 .../base/icons/icons/smile/keyframes.scss     |    15 +
 .../base/icons/icons/smile/placeholders.scss  |    10 +
 .../base/icons/icons/smile/property-16.scss   |     3 +
 .../base/icons/icons/smile/property-24.scss   |     3 +
 .../styles/base/icons/icons/socket/index.scss |     6 +
 .../base/icons/icons/socket/keyframes.scss    |    15 +
 .../base/icons/icons/socket/placeholders.scss |    10 +
 .../base/icons/icons/socket/property-16.scss  |     3 +
 .../base/icons/icons/socket/property-24.scss  |     3 +
 .../base/icons/icons/sort-asc/index.scss      |     6 +
 .../base/icons/icons/sort-asc/keyframes.scss  |    15 +
 .../icons/icons/sort-asc/placeholders.scss    |    10 +
 .../icons/icons/sort-asc/property-16.scss     |     3 +
 .../icons/icons/sort-asc/property-24.scss     |     3 +
 .../base/icons/icons/sort-desc/index.scss     |     6 +
 .../base/icons/icons/sort-desc/keyframes.scss |    15 +
 .../icons/icons/sort-desc/placeholders.scss   |    10 +
 .../icons/icons/sort-desc/property-16.scss    |     3 +
 .../icons/icons/sort-desc/property-24.scss    |     3 +
 .../styles/base/icons/icons/sort/index.scss   |     6 +
 .../base/icons/icons/sort/keyframes.scss      |    15 +
 .../base/icons/icons/sort/placeholders.scss   |    10 +
 .../base/icons/icons/source-file/index.scss   |     6 +
 .../icons/icons/source-file/keyframes.scss    |    15 +
 .../icons/icons/source-file/placeholders.scss |    10 +
 .../base/icons/icons/speaker/index.scss       |     6 +
 .../base/icons/icons/speaker/keyframes.scss   |    15 +
 .../icons/icons/speaker/placeholders.scss     |    10 +
 .../base/icons/icons/speaker/property-16.scss |     3 +
 .../base/icons/icons/speaker/property-24.scss |     3 +
 .../base/icons/icons/square-fill/index.scss   |     6 +
 .../icons/icons/square-fill/keyframes.scss    |    15 +
 .../icons/icons/square-fill/placeholders.scss |    10 +
 .../icons/icons/square-fill/property-16.scss  |     3 +
 .../icons/icons/square-fill/property-24.scss  |     3 +
 .../styles/base/icons/icons/square/index.scss |     6 +
 .../base/icons/icons/square/keyframes.scss    |    15 +
 .../base/icons/icons/square/placeholders.scss |    10 +
 .../base/icons/icons/square/property-16.scss  |     3 +
 .../base/icons/icons/square/property-24.scss  |     3 +
 .../base/icons/icons/star-circle/index.scss   |     6 +
 .../icons/icons/star-circle/keyframes.scss    |    15 +
 .../icons/icons/star-circle/placeholders.scss |    10 +
 .../icons/icons/star-circle/property-16.scss  |     3 +
 .../icons/icons/star-circle/property-24.scss  |     3 +
 .../base/icons/icons/star-fill/index.scss     |     6 +
 .../base/icons/icons/star-fill/keyframes.scss |    15 +
 .../icons/icons/star-fill/placeholders.scss   |    10 +
 .../icons/icons/star-fill/property-16.scss    |     3 +
 .../icons/icons/star-fill/property-24.scss    |     3 +
 .../base/icons/icons/star-off/index.scss      |     6 +
 .../base/icons/icons/star-off/keyframes.scss  |    15 +
 .../icons/icons/star-off/placeholders.scss    |    10 +
 .../icons/icons/star-off/property-16.scss     |     3 +
 .../icons/icons/star-off/property-24.scss     |     3 +
 .../base/icons/icons/star-outline/index.scss  |     6 +
 .../icons/icons/star-outline/keyframes.scss   |    15 +
 .../icons/star-outline/placeholders.scss      |    10 +
 .../styles/base/icons/icons/star/index.scss   |     6 +
 .../base/icons/icons/star/keyframes.scss      |    15 +
 .../base/icons/icons/star/placeholders.scss   |    10 +
 .../base/icons/icons/star/property-16.scss    |     3 +
 .../base/icons/icons/star/property-24.scss    |     3 +
 .../base/icons/icons/stop-circle/index.scss   |     6 +
 .../icons/icons/stop-circle/keyframes.scss    |    15 +
 .../icons/icons/stop-circle/placeholders.scss |    10 +
 .../icons/icons/stop-circle/property-16.scss  |     3 +
 .../icons/icons/stop-circle/property-24.scss  |     3 +
 .../base/icons/icons/sub-left/index.scss      |     6 +
 .../base/icons/icons/sub-left/keyframes.scss  |    15 +
 .../icons/icons/sub-left/placeholders.scss    |    10 +
 .../base/icons/icons/sub-right/index.scss     |     6 +
 .../base/icons/icons/sub-right/keyframes.scss |    15 +
 .../icons/icons/sub-right/placeholders.scss   |    10 +
 .../styles/base/icons/icons/sun/index.scss    |     6 +
 .../base/icons/icons/sun/keyframes.scss       |    15 +
 .../base/icons/icons/sun/placeholders.scss    |    10 +
 .../base/icons/icons/sun/property-16.scss     |     3 +
 .../base/icons/icons/sun/property-24.scss     |     3 +
 .../base/icons/icons/support/index.scss       |     6 +
 .../base/icons/icons/support/keyframes.scss   |    15 +
 .../icons/icons/support/placeholders.scss     |    10 +
 .../base/icons/icons/support/property-16.scss |     3 +
 .../base/icons/icons/support/property-24.scss |     3 +
 .../icons/icons/swap-horizontal/index.scss    |     6 +
 .../icons/swap-horizontal/keyframes.scss      |    15 +
 .../icons/swap-horizontal/placeholders.scss   |    10 +
 .../icons/swap-horizontal/property-16.scss    |     3 +
 .../icons/swap-horizontal/property-24.scss    |     3 +
 .../base/icons/icons/swap-vertical/index.scss |     6 +
 .../icons/icons/swap-vertical/keyframes.scss  |    15 +
 .../icons/swap-vertical/placeholders.scss     |    10 +
 .../icons/swap-vertical/property-16.scss      |     3 +
 .../icons/swap-vertical/property-24.scss      |     3 +
 .../base/icons/icons/switcher/index.scss      |     6 +
 .../base/icons/icons/switcher/keyframes.scss  |    15 +
 .../icons/icons/switcher/placeholders.scss    |    10 +
 .../icons/icons/switcher/property-16.scss     |     3 +
 .../icons/icons/switcher/property-24.scss     |     3 +
 .../base/icons/icons/sync-alert/index.scss    |     6 +
 .../icons/icons/sync-alert/keyframes.scss     |    15 +
 .../icons/icons/sync-alert/placeholders.scss  |    10 +
 .../icons/icons/sync-alert/property-16.scss   |     3 +
 .../icons/icons/sync-alert/property-24.scss   |     3 +
 .../base/icons/icons/sync-reverse/index.scss  |     6 +
 .../icons/icons/sync-reverse/keyframes.scss   |    15 +
 .../icons/sync-reverse/placeholders.scss      |    10 +
 .../icons/icons/sync-reverse/property-16.scss |     3 +
 .../icons/icons/sync-reverse/property-24.scss |     3 +
 .../styles/base/icons/icons/sync/index.scss   |     6 +
 .../base/icons/icons/sync/keyframes.scss      |    15 +
 .../base/icons/icons/sync/placeholders.scss   |    10 +
 .../base/icons/icons/sync/property-16.scss    |     3 +
 .../base/icons/icons/sync/property-24.scss    |     3 +
 .../styles/base/icons/icons/tablet/index.scss |     6 +
 .../base/icons/icons/tablet/keyframes.scss    |    15 +
 .../base/icons/icons/tablet/placeholders.scss |    10 +
 .../base/icons/icons/tablet/property-16.scss  |     3 +
 .../base/icons/icons/tablet/property-24.scss  |     3 +
 .../styles/base/icons/icons/tag/index.scss    |     6 +
 .../base/icons/icons/tag/keyframes.scss       |    15 +
 .../base/icons/icons/tag/placeholders.scss    |    10 +
 .../base/icons/icons/tag/property-16.scss     |     3 +
 .../base/icons/icons/tag/property-24.scss     |     3 +
 .../styles/base/icons/icons/target/index.scss |     6 +
 .../base/icons/icons/target/keyframes.scss    |    15 +
 .../base/icons/icons/target/placeholders.scss |    10 +
 .../base/icons/icons/target/property-16.scss  |     3 +
 .../base/icons/icons/target/property-24.scss  |     3 +
 .../icons/icons/terminal-screen/index.scss    |     6 +
 .../icons/terminal-screen/keyframes.scss      |    15 +
 .../icons/terminal-screen/placeholders.scss   |    10 +
 .../icons/terminal-screen/property-16.scss    |     3 +
 .../icons/terminal-screen/property-24.scss    |     3 +
 .../base/icons/icons/terminal/index.scss      |     6 +
 .../base/icons/icons/terminal/keyframes.scss  |    15 +
 .../icons/icons/terminal/placeholders.scss    |    10 +
 .../icons/icons/terminal/property-16.scss     |     3 +
 .../icons/icons/terminal/property-24.scss     |     3 +
 .../icons/icons/terraform-color/index.scss    |     6 +
 .../icons/terraform-color/keyframes.scss      |     9 +
 .../icons/terraform-color/placeholders.scss   |    10 +
 .../icons/terraform-color/property-16.scss    |     3 +
 .../icons/terraform-color/property-24.scss    |     3 +
 .../base/icons/icons/terraform/index.scss     |     6 +
 .../base/icons/icons/terraform/keyframes.scss |    15 +
 .../icons/icons/terraform/placeholders.scss   |    10 +
 .../icons/icons/terraform/property-16.scss    |     3 +
 .../icons/icons/terraform/property-24.scss    |     3 +
 .../base/icons/icons/thumbs-down/index.scss   |     6 +
 .../icons/icons/thumbs-down/keyframes.scss    |    15 +
 .../icons/icons/thumbs-down/placeholders.scss |    10 +
 .../icons/icons/thumbs-down/property-16.scss  |     3 +
 .../icons/icons/thumbs-down/property-24.scss  |     3 +
 .../base/icons/icons/thumbs-up/index.scss     |     6 +
 .../base/icons/icons/thumbs-up/keyframes.scss |    15 +
 .../icons/icons/thumbs-up/placeholders.scss   |    10 +
 .../icons/icons/thumbs-up/property-16.scss    |     3 +
 .../icons/icons/thumbs-up/property-24.scss    |     3 +
 .../base/icons/icons/toggle-left/index.scss   |     6 +
 .../icons/icons/toggle-left/keyframes.scss    |    15 +
 .../icons/icons/toggle-left/placeholders.scss |    10 +
 .../icons/icons/toggle-left/property-16.scss  |     3 +
 .../icons/icons/toggle-left/property-24.scss  |     3 +
 .../base/icons/icons/toggle-right/index.scss  |     6 +
 .../icons/icons/toggle-right/keyframes.scss   |    15 +
 .../icons/toggle-right/placeholders.scss      |    10 +
 .../icons/icons/toggle-right/property-16.scss |     3 +
 .../icons/icons/toggle-right/property-24.scss |     3 +
 .../styles/base/icons/icons/token/index.scss  |     6 +
 .../base/icons/icons/token/keyframes.scss     |    15 +
 .../base/icons/icons/token/placeholders.scss  |    10 +
 .../base/icons/icons/token/property-16.scss   |     3 +
 .../base/icons/icons/token/property-24.scss   |     3 +
 .../styles/base/icons/icons/tools/index.scss  |     6 +
 .../base/icons/icons/tools/keyframes.scss     |    15 +
 .../base/icons/icons/tools/placeholders.scss  |    10 +
 .../base/icons/icons/tools/property-16.scss   |     3 +
 .../base/icons/icons/tools/property-24.scss   |     3 +
 .../styles/base/icons/icons/top/index.scss    |     6 +
 .../base/icons/icons/top/keyframes.scss       |    15 +
 .../base/icons/icons/top/placeholders.scss    |    10 +
 .../base/icons/icons/top/property-16.scss     |     3 +
 .../base/icons/icons/top/property-24.scss     |     3 +
 .../styles/base/icons/icons/trash/index.scss  |     6 +
 .../base/icons/icons/trash/keyframes.scss     |    15 +
 .../base/icons/icons/trash/placeholders.scss  |    10 +
 .../base/icons/icons/trash/property-16.scss   |     3 +
 .../base/icons/icons/trash/property-24.scss   |     3 +
 .../base/icons/icons/trend-down/index.scss    |     6 +
 .../icons/icons/trend-down/keyframes.scss     |    15 +
 .../icons/icons/trend-down/placeholders.scss  |    10 +
 .../icons/icons/trend-down/property-16.scss   |     3 +
 .../icons/icons/trend-down/property-24.scss   |     3 +
 .../base/icons/icons/trend-up/index.scss      |     6 +
 .../base/icons/icons/trend-up/keyframes.scss  |    15 +
 .../icons/icons/trend-up/placeholders.scss    |    10 +
 .../icons/icons/trend-up/property-16.scss     |     3 +
 .../icons/icons/trend-up/property-24.scss     |     3 +
 .../base/icons/icons/triangle-fill/index.scss |     6 +
 .../icons/icons/triangle-fill/keyframes.scss  |    15 +
 .../icons/triangle-fill/placeholders.scss     |    10 +
 .../icons/triangle-fill/property-16.scss      |     3 +
 .../icons/triangle-fill/property-24.scss      |     3 +
 .../base/icons/icons/triangle/index.scss      |     6 +
 .../base/icons/icons/triangle/keyframes.scss  |    15 +
 .../icons/icons/triangle/placeholders.scss    |    10 +
 .../icons/icons/triangle/property-16.scss     |     3 +
 .../icons/icons/triangle/property-24.scss     |     3 +
 .../styles/base/icons/icons/truck/index.scss  |     6 +
 .../base/icons/icons/truck/keyframes.scss     |    15 +
 .../base/icons/icons/truck/placeholders.scss  |    10 +
 .../base/icons/icons/truck/property-16.scss   |     3 +
 .../base/icons/icons/truck/property-24.scss   |     3 +
 .../styles/base/icons/icons/tune/index.scss   |     6 +
 .../base/icons/icons/tune/keyframes.scss      |    15 +
 .../base/icons/icons/tune/placeholders.scss   |    10 +
 .../app/styles/base/icons/icons/tv/index.scss |     6 +
 .../styles/base/icons/icons/tv/keyframes.scss |    15 +
 .../base/icons/icons/tv/placeholders.scss     |    10 +
 .../base/icons/icons/tv/property-16.scss      |     3 +
 .../base/icons/icons/tv/property-24.scss      |     3 +
 .../base/icons/icons/twitch-color/index.scss  |     6 +
 .../icons/icons/twitch-color/keyframes.scss   |     9 +
 .../icons/twitch-color/placeholders.scss      |    10 +
 .../icons/icons/twitch-color/property-16.scss |     3 +
 .../icons/icons/twitch-color/property-24.scss |     3 +
 .../styles/base/icons/icons/twitch/index.scss |     6 +
 .../base/icons/icons/twitch/keyframes.scss    |    15 +
 .../base/icons/icons/twitch/placeholders.scss |    10 +
 .../base/icons/icons/twitch/property-16.scss  |     3 +
 .../base/icons/icons/twitch/property-24.scss  |     3 +
 .../base/icons/icons/twitter-color/index.scss |     6 +
 .../icons/icons/twitter-color/keyframes.scss  |     9 +
 .../icons/twitter-color/placeholders.scss     |    10 +
 .../icons/twitter-color/property-16.scss      |     3 +
 .../icons/twitter-color/property-24.scss      |     3 +
 .../base/icons/icons/twitter/index.scss       |     6 +
 .../base/icons/icons/twitter/keyframes.scss   |    15 +
 .../icons/icons/twitter/placeholders.scss     |    10 +
 .../base/icons/icons/twitter/property-16.scss |     3 +
 .../base/icons/icons/twitter/property-24.scss |     3 +
 .../styles/base/icons/icons/type/index.scss   |     6 +
 .../base/icons/icons/type/keyframes.scss      |    15 +
 .../base/icons/icons/type/placeholders.scss   |    10 +
 .../base/icons/icons/type/property-16.scss    |     3 +
 .../base/icons/icons/type/property-24.scss    |     3 +
 .../base/icons/icons/unfold-close/index.scss  |     6 +
 .../icons/icons/unfold-close/keyframes.scss   |    15 +
 .../icons/unfold-close/placeholders.scss      |    10 +
 .../icons/icons/unfold-close/property-16.scss |     3 +
 .../icons/icons/unfold-close/property-24.scss |     3 +
 .../base/icons/icons/unfold-less/index.scss   |     6 +
 .../icons/icons/unfold-less/keyframes.scss    |    15 +
 .../icons/icons/unfold-less/placeholders.scss |    10 +
 .../base/icons/icons/unfold-more/index.scss   |     6 +
 .../icons/icons/unfold-more/keyframes.scss    |    15 +
 .../icons/icons/unfold-more/placeholders.scss |    10 +
 .../base/icons/icons/unfold-open/index.scss   |     6 +
 .../icons/icons/unfold-open/keyframes.scss    |    15 +
 .../icons/icons/unfold-open/placeholders.scss |    10 +
 .../icons/icons/unfold-open/property-16.scss  |     3 +
 .../icons/icons/unfold-open/property-24.scss  |     3 +
 .../styles/base/icons/icons/union/index.scss  |     6 +
 .../base/icons/icons/union/keyframes.scss     |    15 +
 .../base/icons/icons/union/placeholders.scss  |    10 +
 .../base/icons/icons/union/property-16.scss   |     3 +
 .../base/icons/icons/union/property-24.scss   |     3 +
 .../styles/base/icons/icons/unlock/index.scss |     6 +
 .../base/icons/icons/unlock/keyframes.scss    |    15 +
 .../base/icons/icons/unlock/placeholders.scss |    10 +
 .../base/icons/icons/unlock/property-16.scss  |     3 +
 .../base/icons/icons/unlock/property-24.scss  |     3 +
 .../styles/base/icons/icons/upload/index.scss |     6 +
 .../base/icons/icons/upload/keyframes.scss    |    15 +
 .../base/icons/icons/upload/placeholders.scss |    10 +
 .../base/icons/icons/upload/property-16.scss  |     3 +
 .../base/icons/icons/upload/property-24.scss  |     3 +
 .../base/icons/icons/user-add/index.scss      |     6 +
 .../base/icons/icons/user-add/keyframes.scss  |    15 +
 .../icons/icons/user-add/placeholders.scss    |    10 +
 .../base/icons/icons/user-check/index.scss    |     6 +
 .../icons/icons/user-check/keyframes.scss     |    15 +
 .../icons/icons/user-check/placeholders.scss  |    10 +
 .../icons/icons/user-check/property-16.scss   |     3 +
 .../icons/icons/user-check/property-24.scss   |     3 +
 .../icons/icons/user-circle-fill/index.scss   |     6 +
 .../icons/user-circle-fill/keyframes.scss     |    15 +
 .../icons/user-circle-fill/placeholders.scss  |    10 +
 .../icons/user-circle-fill/property-16.scss   |     3 +
 .../icons/user-circle-fill/property-24.scss   |     3 +
 .../base/icons/icons/user-circle/index.scss   |     6 +
 .../icons/icons/user-circle/keyframes.scss    |    15 +
 .../icons/icons/user-circle/placeholders.scss |    10 +
 .../icons/icons/user-circle/property-16.scss  |     3 +
 .../icons/icons/user-circle/property-24.scss  |     3 +
 .../base/icons/icons/user-minus/index.scss    |     6 +
 .../icons/icons/user-minus/keyframes.scss     |    15 +
 .../icons/icons/user-minus/placeholders.scss  |    10 +
 .../icons/icons/user-minus/property-16.scss   |     3 +
 .../icons/icons/user-minus/property-24.scss   |     3 +
 .../icons/icons/user-organization/index.scss  |     6 +
 .../icons/user-organization/keyframes.scss    |    15 +
 .../icons/user-organization/placeholders.scss |    10 +
 .../base/icons/icons/user-plain/index.scss    |     6 +
 .../icons/icons/user-plain/keyframes.scss     |    15 +
 .../icons/icons/user-plain/placeholders.scss  |    10 +
 .../base/icons/icons/user-plus/index.scss     |     6 +
 .../base/icons/icons/user-plus/keyframes.scss |    15 +
 .../icons/icons/user-plus/placeholders.scss   |    10 +
 .../icons/icons/user-plus/property-16.scss    |     3 +
 .../icons/icons/user-plus/property-24.scss    |     3 +
 .../icons/icons/user-square-fill/index.scss   |     6 +
 .../icons/user-square-fill/keyframes.scss     |    15 +
 .../icons/user-square-fill/placeholders.scss  |    10 +
 .../icons/user-square-outline/index.scss      |     6 +
 .../icons/user-square-outline/keyframes.scss  |    15 +
 .../user-square-outline/placeholders.scss     |    10 +
 .../base/icons/icons/user-team/index.scss     |     6 +
 .../base/icons/icons/user-team/keyframes.scss |    15 +
 .../icons/icons/user-team/placeholders.scss   |    10 +
 .../styles/base/icons/icons/user-x/index.scss |     6 +
 .../base/icons/icons/user-x/keyframes.scss    |    15 +
 .../base/icons/icons/user-x/placeholders.scss |    10 +
 .../base/icons/icons/user-x/property-16.scss  |     3 +
 .../base/icons/icons/user-x/property-24.scss  |     3 +
 .../styles/base/icons/icons/user/index.scss   |     6 +
 .../base/icons/icons/user/keyframes.scss      |    15 +
 .../base/icons/icons/user/placeholders.scss   |    10 +
 .../base/icons/icons/user/property-16.scss    |     3 +
 .../base/icons/icons/user/property-24.scss    |     3 +
 .../styles/base/icons/icons/users/index.scss  |     6 +
 .../base/icons/icons/users/keyframes.scss     |    15 +
 .../base/icons/icons/users/placeholders.scss  |    10 +
 .../base/icons/icons/users/property-16.scss   |     3 +
 .../base/icons/icons/users/property-24.scss   |     3 +
 .../base/icons/icons/vagrant-color/index.scss |     6 +
 .../icons/icons/vagrant-color/keyframes.scss  |     9 +
 .../icons/vagrant-color/placeholders.scss     |    10 +
 .../icons/vagrant-color/property-16.scss      |     3 +
 .../icons/vagrant-color/property-24.scss      |     3 +
 .../base/icons/icons/vagrant/index.scss       |     6 +
 .../base/icons/icons/vagrant/keyframes.scss   |    15 +
 .../icons/icons/vagrant/placeholders.scss     |    10 +
 .../base/icons/icons/vagrant/property-16.scss |     3 +
 .../base/icons/icons/vagrant/property-24.scss |     3 +
 .../base/icons/icons/vault-color/index.scss   |     6 +
 .../icons/icons/vault-color/keyframes.scss    |     9 +
 .../icons/icons/vault-color/placeholders.scss |    10 +
 .../icons/icons/vault-color/property-16.scss  |     3 +
 .../icons/icons/vault-color/property-24.scss  |     3 +
 .../styles/base/icons/icons/vault/index.scss  |     6 +
 .../base/icons/icons/vault/keyframes.scss     |    15 +
 .../base/icons/icons/vault/placeholders.scss  |    10 +
 .../base/icons/icons/vault/property-16.scss   |     3 +
 .../base/icons/icons/vault/property-24.scss   |     3 +
 .../base/icons/icons/verified/index.scss      |     6 +
 .../base/icons/icons/verified/keyframes.scss  |    15 +
 .../icons/icons/verified/placeholders.scss    |    10 +
 .../icons/icons/verified/property-16.scss     |     3 +
 .../icons/icons/verified/property-24.scss     |     3 +
 .../base/icons/icons/video-off/index.scss     |     6 +
 .../base/icons/icons/video-off/keyframes.scss |    15 +
 .../icons/icons/video-off/placeholders.scss   |    10 +
 .../icons/icons/video-off/property-16.scss    |     3 +
 .../icons/icons/video-off/property-24.scss    |     3 +
 .../styles/base/icons/icons/video/index.scss  |     6 +
 .../base/icons/icons/video/keyframes.scss     |    15 +
 .../base/icons/icons/video/placeholders.scss  |    10 +
 .../base/icons/icons/video/property-16.scss   |     3 +
 .../base/icons/icons/video/property-24.scss   |     3 +
 .../icons/icons/visibility-hide/index.scss    |     6 +
 .../icons/visibility-hide/keyframes.scss      |    15 +
 .../icons/visibility-hide/placeholders.scss   |    10 +
 .../icons/icons/visibility-show/index.scss    |     6 +
 .../icons/visibility-show/keyframes.scss      |    15 +
 .../icons/visibility-show/placeholders.scss   |    10 +
 .../base/icons/icons/vmware-color/index.scss  |     6 +
 .../icons/icons/vmware-color/keyframes.scss   |     9 +
 .../icons/vmware-color/placeholders.scss      |    10 +
 .../icons/icons/vmware-color/property-16.scss |     3 +
 .../icons/icons/vmware-color/property-24.scss |     3 +
 .../styles/base/icons/icons/vmware/index.scss |     6 +
 .../base/icons/icons/vmware/keyframes.scss    |    15 +
 .../base/icons/icons/vmware/placeholders.scss |    10 +
 .../base/icons/icons/vmware/property-16.scss  |     3 +
 .../base/icons/icons/vmware/property-24.scss  |     3 +
 .../base/icons/icons/volume-2/index.scss      |     6 +
 .../base/icons/icons/volume-2/keyframes.scss  |    15 +
 .../icons/icons/volume-2/placeholders.scss    |    10 +
 .../icons/icons/volume-2/property-16.scss     |     3 +
 .../icons/icons/volume-2/property-24.scss     |     3 +
 .../base/icons/icons/volume-down/index.scss   |     6 +
 .../icons/icons/volume-down/keyframes.scss    |    15 +
 .../icons/icons/volume-down/placeholders.scss |    10 +
 .../icons/icons/volume-down/property-16.scss  |     3 +
 .../icons/icons/volume-down/property-24.scss  |     3 +
 .../base/icons/icons/volume-x/index.scss      |     6 +
 .../base/icons/icons/volume-x/keyframes.scss  |    15 +
 .../icons/icons/volume-x/placeholders.scss    |    10 +
 .../icons/icons/volume-x/property-16.scss     |     3 +
 .../icons/icons/volume-x/property-24.scss     |     3 +
 .../styles/base/icons/icons/volume/index.scss |     6 +
 .../base/icons/icons/volume/keyframes.scss    |    15 +
 .../base/icons/icons/volume/placeholders.scss |    10 +
 .../base/icons/icons/volume/property-16.scss  |     3 +
 .../base/icons/icons/volume/property-24.scss  |     3 +
 .../styles/base/icons/icons/wall/index.scss   |     6 +
 .../base/icons/icons/wall/keyframes.scss      |    15 +
 .../base/icons/icons/wall/placeholders.scss   |    10 +
 .../base/icons/icons/wall/property-16.scss    |     3 +
 .../base/icons/icons/wall/property-24.scss    |     3 +
 .../styles/base/icons/icons/wand/index.scss   |     6 +
 .../base/icons/icons/wand/keyframes.scss      |    15 +
 .../base/icons/icons/wand/placeholders.scss   |    10 +
 .../base/icons/icons/wand/property-16.scss    |     3 +
 .../base/icons/icons/wand/property-24.scss    |     3 +
 .../styles/base/icons/icons/watch/index.scss  |     6 +
 .../base/icons/icons/watch/keyframes.scss     |    15 +
 .../base/icons/icons/watch/placeholders.scss  |    10 +
 .../base/icons/icons/watch/property-16.scss   |     3 +
 .../base/icons/icons/watch/property-24.scss   |     3 +
 .../icons/icons/waypoint-color/index.scss     |     6 +
 .../icons/icons/waypoint-color/keyframes.scss |     9 +
 .../icons/waypoint-color/placeholders.scss    |    10 +
 .../icons/waypoint-color/property-16.scss     |     3 +
 .../icons/waypoint-color/property-24.scss     |     3 +
 .../base/icons/icons/waypoint/index.scss      |     6 +
 .../base/icons/icons/waypoint/keyframes.scss  |    15 +
 .../icons/icons/waypoint/placeholders.scss    |    10 +
 .../icons/icons/waypoint/property-16.scss     |     3 +
 .../icons/icons/waypoint/property-24.scss     |     3 +
 .../base/icons/icons/webhook/index.scss       |     6 +
 .../base/icons/icons/webhook/keyframes.scss   |    15 +
 .../icons/icons/webhook/placeholders.scss     |    10 +
 .../base/icons/icons/webhook/property-16.scss |     3 +
 .../base/icons/icons/webhook/property-24.scss |     3 +
 .../base/icons/icons/wifi-off/index.scss      |     6 +
 .../base/icons/icons/wifi-off/keyframes.scss  |    15 +
 .../icons/icons/wifi-off/placeholders.scss    |    10 +
 .../icons/icons/wifi-off/property-16.scss     |     3 +
 .../icons/icons/wifi-off/property-24.scss     |     3 +
 .../styles/base/icons/icons/wifi/index.scss   |     6 +
 .../base/icons/icons/wifi/keyframes.scss      |    15 +
 .../base/icons/icons/wifi/placeholders.scss   |    10 +
 .../base/icons/icons/wifi/property-16.scss    |     3 +
 .../base/icons/icons/wifi/property-24.scss    |     3 +
 .../styles/base/icons/icons/wrench/index.scss |     6 +
 .../base/icons/icons/wrench/keyframes.scss    |    15 +
 .../base/icons/icons/wrench/placeholders.scss |    10 +
 .../base/icons/icons/wrench/property-16.scss  |     3 +
 .../base/icons/icons/wrench/property-24.scss  |     3 +
 .../base/icons/icons/x-circle-fill/index.scss |     6 +
 .../icons/icons/x-circle-fill/keyframes.scss  |    15 +
 .../icons/x-circle-fill/placeholders.scss     |    10 +
 .../icons/x-circle-fill/property-16.scss      |     3 +
 .../icons/x-circle-fill/property-24.scss      |     3 +
 .../base/icons/icons/x-circle/index.scss      |     6 +
 .../base/icons/icons/x-circle/keyframes.scss  |    15 +
 .../icons/icons/x-circle/placeholders.scss    |    10 +
 .../icons/icons/x-circle/property-16.scss     |     3 +
 .../icons/icons/x-circle/property-24.scss     |     3 +
 .../icons/icons/x-diamond-fill/index.scss     |     6 +
 .../icons/icons/x-diamond-fill/keyframes.scss |    15 +
 .../icons/x-diamond-fill/placeholders.scss    |    10 +
 .../icons/x-diamond-fill/property-16.scss     |     3 +
 .../icons/x-diamond-fill/property-24.scss     |     3 +
 .../base/icons/icons/x-diamond/index.scss     |     6 +
 .../base/icons/icons/x-diamond/keyframes.scss |    15 +
 .../icons/icons/x-diamond/placeholders.scss   |    10 +
 .../icons/icons/x-diamond/property-16.scss    |     3 +
 .../icons/icons/x-diamond/property-24.scss    |     3 +
 .../icons/icons/x-hexagon-fill/index.scss     |     6 +
 .../icons/icons/x-hexagon-fill/keyframes.scss |    15 +
 .../icons/x-hexagon-fill/placeholders.scss    |    10 +
 .../icons/x-hexagon-fill/property-16.scss     |     3 +
 .../icons/x-hexagon-fill/property-24.scss     |     3 +
 .../base/icons/icons/x-hexagon/index.scss     |     6 +
 .../base/icons/icons/x-hexagon/keyframes.scss |    15 +
 .../icons/icons/x-hexagon/placeholders.scss   |    10 +
 .../icons/icons/x-hexagon/property-16.scss    |     3 +
 .../icons/icons/x-hexagon/property-24.scss    |     3 +
 .../base/icons/icons/x-square-fill/index.scss |     6 +
 .../icons/icons/x-square-fill/keyframes.scss  |    15 +
 .../icons/x-square-fill/placeholders.scss     |    10 +
 .../icons/x-square-fill/property-16.scss      |     3 +
 .../icons/x-square-fill/property-24.scss      |     3 +
 .../base/icons/icons/x-square/index.scss      |     6 +
 .../base/icons/icons/x-square/keyframes.scss  |    15 +
 .../icons/icons/x-square/placeholders.scss    |    10 +
 .../icons/icons/x-square/property-16.scss     |     3 +
 .../icons/icons/x-square/property-24.scss     |     3 +
 .../app/styles/base/icons/icons/x/index.scss  |     6 +
 .../styles/base/icons/icons/x/keyframes.scss  |    15 +
 .../base/icons/icons/x/placeholders.scss      |    10 +
 .../base/icons/icons/x/property-16.scss       |     3 +
 .../base/icons/icons/x/property-24.scss       |     3 +
 .../base/icons/icons/youtube-color/index.scss |     6 +
 .../icons/icons/youtube-color/keyframes.scss  |     9 +
 .../icons/youtube-color/placeholders.scss     |    10 +
 .../icons/youtube-color/property-16.scss      |     3 +
 .../icons/youtube-color/property-24.scss      |     3 +
 .../base/icons/icons/youtube/index.scss       |     6 +
 .../base/icons/icons/youtube/keyframes.scss   |    15 +
 .../icons/icons/youtube/placeholders.scss     |    10 +
 .../base/icons/icons/youtube/property-16.scss |     3 +
 .../base/icons/icons/youtube/property-24.scss |     3 +
 .../base/icons/icons/zap-off/index.scss       |     6 +
 .../base/icons/icons/zap-off/keyframes.scss   |    15 +
 .../icons/icons/zap-off/placeholders.scss     |    10 +
 .../base/icons/icons/zap-off/property-16.scss |     3 +
 .../base/icons/icons/zap-off/property-24.scss |     3 +
 .../styles/base/icons/icons/zap/index.scss    |     6 +
 .../base/icons/icons/zap/keyframes.scss       |    15 +
 .../base/icons/icons/zap/placeholders.scss    |    10 +
 .../base/icons/icons/zap/property-16.scss     |     3 +
 .../base/icons/icons/zap/property-24.scss     |     3 +
 .../base/icons/icons/zoom-in/index.scss       |     6 +
 .../base/icons/icons/zoom-in/keyframes.scss   |    15 +
 .../icons/icons/zoom-in/placeholders.scss     |    10 +
 .../base/icons/icons/zoom-in/property-16.scss |     3 +
 .../base/icons/icons/zoom-in/property-24.scss |     3 +
 .../base/icons/icons/zoom-out/index.scss      |     6 +
 .../base/icons/icons/zoom-out/keyframes.scss  |    15 +
 .../icons/icons/zoom-out/placeholders.scss    |    10 +
 .../icons/icons/zoom-out/property-16.scss     |     3 +
 .../icons/icons/zoom-out/property-24.scss     |     3 +
 .../app/styles/base/icons/index.scss          |     4 +-
 ui/packages/consul-ui/app/styles/debug.scss   |     3 +-
 ui/packages/consul-ui/app/styles/icons.scss   |    84 +-
 2808 files changed, 22227 insertions(+), 15797 deletions(-)
 create mode 100644 .changelog/12461.txt
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss
 delete mode 100644 ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
 delete mode 100644 ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/activity/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/activity/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/activity/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-center/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-center/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-center/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-left/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-left/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-left/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-right/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-right/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-right/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/apple/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/apple/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/apple/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/apple/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/apple/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/archive/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/archive/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/archive/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/archive/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/archive/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auth0/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auth0/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auth0/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auth0/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auth0/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/award/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/award/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/award/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/award/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/award/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/azure/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/battery/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/battery/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/battery/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/battery/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/battery/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/beaker/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/beaker/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/beaker/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/beaker/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/beaker/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bell/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bolt/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bolt/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bolt/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bottom/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bottom/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bottom/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bottom/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bottom/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/boundary/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/boundary/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/boundary/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/boundary/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/boundary/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/box/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bug/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bug/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bug/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bug/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bug/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/build/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/build/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/build/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/build/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/build/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bulb/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bulb/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bulb/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bulb/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/bulb/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/calendar/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/calendar/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/calendar/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/calendar/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/calendar/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/camera/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/camera/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/camera/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/camera/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/camera/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/caret/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cast/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cast/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cast/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cast/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cast/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/certificate/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/certificate/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/certificate/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/certificate/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/certificate/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change-square/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change-square/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change-square/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change-square/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change-square/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/change/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-square/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-square/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-square/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-square/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check-square/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/check/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/clock/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cloud/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/code/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/code/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/code/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/code/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/code/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/codepen/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/codepen/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/codepen/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/codepen/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/codepen/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/collections/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/collections/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/collections/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/collections/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/collections/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/command/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/command/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/command/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/command/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/command/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/compass/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/compass/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/compass/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/compass/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/compass/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/connection/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/connection/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/connection/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/connection/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/connection/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/console/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/console/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/console/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/consul/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/consul/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/consul/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cpu/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cpu/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cpu/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cpu/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/cpu/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/crop/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/crop/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/crop/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/crop/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/crop/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/database/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/database/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/database/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/database/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/database/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/delay/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/delay/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/delay/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/delay/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/delay/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/delete/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/delete/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/delete/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/delete/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/delete/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/diamond/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/diamond/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/diamond/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/diamond/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/diamond/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/disabled/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/disabled/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/disabled/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/disc/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/disc/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/disc/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/disc/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/disc/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docker/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docker/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docker/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docker/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docker/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/docs/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dot/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dot/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dot/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dot/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/dot/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/download/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/download/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/download/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/download/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/download/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/droplet/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/droplet/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/droplet/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/droplet/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/droplet/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/edit/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/edit/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/edit/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/edit/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/edit/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/event/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/event/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/event/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/event/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/event/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/exit/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/exit/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/exit/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/external-link/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/external-link/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/external-link/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/external-link/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/external-link/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/eye/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/eye/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/eye/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/eye/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/eye/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/f5/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/f5/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/f5/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/f5/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/f5/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/facebook/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/facebook/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/facebook/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/facebook/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/facebook/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-change/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-change/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-change/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-change/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-change/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-check/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-check/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-check/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-check/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-check/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-source/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-source/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-source/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-source/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-source/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-text/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-text/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-text/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-text/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-text/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-x/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-x/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-x/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-x/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file-x/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/file/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/files/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/files/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/files/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/files/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/files/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/film/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/film/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/film/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/film/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/film/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/filter/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/flag/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/flag/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/flag/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/flag/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/flag/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/folder/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/frown/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/frown/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/frown/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/frown/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/frown/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gateway/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gateway/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gateway/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gateway/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gateway/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gcp/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gcp/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gcp/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gcp/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gcp/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gift/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/github-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/github-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/github-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/github-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/github-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/github/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/github/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/github/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/github/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/github/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/globe/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/globe/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/globe/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/globe/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/globe/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/google-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/google-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/google-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/google-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/google-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/google/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/google/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/google/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/google/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/google/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/grid/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/grid/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/grid/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/grid/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/grid/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/guide/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/guide/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/guide/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/guide/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/guide/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hammer/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hammer/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hammer/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hammer/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hammer/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/handshake/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/handshake/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/handshake/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/handshake/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/handshake/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hash/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hash/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hash/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hash/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hash/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hcp/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hcp/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hcp/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hcp/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hcp/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/headphones/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/headphones/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/headphones/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/headphones/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/headphones/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/health/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/health/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/health/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/heart/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/help/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/history/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/history/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/history/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/history/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/history/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/home/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/home/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/home/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/home/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/home/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/image/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/image/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/image/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/image/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/image/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/inbox/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/inbox/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/inbox/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/inbox/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/inbox/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/info/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/key-values/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/key-values/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/key-values/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/key-values/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/key-values/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/key/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/key/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/key/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/key/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/key/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/keychain/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/keychain/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/keychain/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/keychain/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/keychain/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/layers/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/layers/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/layers/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/layers/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/layers/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/layout/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/layout/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/layout/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/layout/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/layout/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/learn/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/learn/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/learn/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/learn/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/learn/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/link/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/link/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/link/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/link/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/link/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/list/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/list/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/list/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/list/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/list/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/loading/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/loading/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/loading/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/loading/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/loading/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/lock/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mail/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mail/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mail/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mail/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mail/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/map/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/map/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/map/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/map/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/map/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/maximize/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/maximize/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/maximize/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/maximize/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/maximize/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/meh/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/meh/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/meh/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/meh/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/meh/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/menu/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/menu/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/menu/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/menu/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/menu/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mesh/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mesh/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mesh/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mesh/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mesh/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-square/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-square/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-square/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-square/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message-square/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/message/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mic/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mic/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mic/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mic/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mic/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/migrate/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/migrate/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/migrate/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/migrate/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/migrate/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minimize/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minimize/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minimize/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minimize/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minimize/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/minus/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/module/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/module/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/module/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/module/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/module/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/monitor/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/monitor/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/monitor/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/monitor/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/monitor/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/moon/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/moon/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/moon/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/moon/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/moon/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/move/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/move/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/move/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/move/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/move/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/music/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/music/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/music/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/music/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/music/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/navigation/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/navigation/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/navigation/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/navigation/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/navigation/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/network/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/network/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/network/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/network/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/network/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/node/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/node/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/node/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/node/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/node/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/nomad/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/nomad/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/nomad/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/nomad/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/nomad/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/octagon/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/octagon/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/octagon/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/octagon/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/octagon/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/okta/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/okta/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/okta/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/okta/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/okta/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/oracle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/oracle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/oracle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/oracle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/oracle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/org/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/org/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/org/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/org/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/org/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/outline/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/outline/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pack/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pack/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pack/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pack/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pack/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/package/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/package/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/package/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/package/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/package/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/packer/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/packer/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/packer/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/packer/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/packer/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/partner/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/partner/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/partner/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/path/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/path/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/path/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/path/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/path/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pause/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pause/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pause/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pause/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pause/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/phone/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pin/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pin/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pin/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pin/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/pin/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/play/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/plus/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/port/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/port/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/port/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/port/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/port/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/power/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/power/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/power/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/power/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/power/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/printer/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/printer/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/printer/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/printer/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/printer/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/protocol/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/protocol/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/protocol/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/protocol/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/protocol/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/provider/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/provider/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/provider/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/provider/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/provider/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/public-default/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/public-default/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/public-default/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/queue/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/queue/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/queue/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/queue/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/queue/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/radio/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/random/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/random/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/random/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/random/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/random/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/redirect/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/redirect/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/redirect/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/redirect/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/redirect/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/reload/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/reload/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/reload/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/reload/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/reload/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/remix/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/remix/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/remix/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/repeat/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/repeat/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/repeat/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/repeat/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/repeat/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rewind/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rewind/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rewind/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rewind/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rewind/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rocket/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rocket/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rocket/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rocket/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rocket/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rss/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rss/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rss/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rss/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/rss/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/run/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/run/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/run/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/run/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/run/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/running/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/running/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/running/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/running/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/running/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/save/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/save/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/save/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/save/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/save/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/scissors/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/scissors/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/scissors/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/scissors/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/scissors/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/search-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/search-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/search-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/search-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/search-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/search/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/search/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/search/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/search/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/search/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/send/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/send/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/send/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/send/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/send/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/server/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/server/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/server/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/server/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/server/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/serverless/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/serverless/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/serverless/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/serverless/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/serverless/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/settings/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/settings/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/settings/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/settings/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/settings/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/share/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/share/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/share/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/share/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/share/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shield/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/skip/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slack/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slack/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slack/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slack/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slack/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slash/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slash/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slash/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slash/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/slash/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sliders/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sliders/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sliders/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sliders/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sliders/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/smile/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/smile/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/smile/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/smile/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/smile/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/socket/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/socket/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/socket/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/socket/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/socket/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sort/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/source-file/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/source-file/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/source-file/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/speaker/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/speaker/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/speaker/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/speaker/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/speaker/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/square/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/square/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/square/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/square/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/square/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/star/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sun/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sun/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sun/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sun/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sun/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/support/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/support/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/support/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/support/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/support/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/switcher/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/switcher/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/switcher/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/switcher/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/switcher/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/sync/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tablet/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tablet/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tablet/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tablet/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tablet/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tag/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tag/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tag/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tag/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tag/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/target/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/target/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/target/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/target/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/target/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terminal/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terminal/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terminal/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terminal/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terminal/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terraform/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terraform/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terraform/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terraform/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/terraform/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/token/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/token/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/token/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/token/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/token/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tools/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tools/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tools/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tools/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tools/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/top/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/top/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/top/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/top/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/top/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trash/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trash/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trash/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trash/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trash/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/triangle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/triangle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/triangle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/triangle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/triangle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/truck/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/truck/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/truck/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/truck/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/truck/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tune/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tune/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tune/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tv/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tv/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tv/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tv/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/tv/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitch/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitch/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitch/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitch/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitch/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitter/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitter/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitter/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitter/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/twitter/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/type/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/type/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/type/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/type/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/type/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/union/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/union/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/union/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/union/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/union/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unlock/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unlock/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unlock/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unlock/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/unlock/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/upload/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/upload/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/upload/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/upload/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/upload/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-add/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-add/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-add/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-check/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-check/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-check/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-check/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-check/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-team/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-team/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-team/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-x/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-x/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-x/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-x/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user-x/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/user/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/users/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/users/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/users/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/users/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/users/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vault/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vault/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vault/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vault/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vault/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/verified/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/verified/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/verified/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/verified/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/verified/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/video-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/video-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/video-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/video-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/video-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/video/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/video/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/video/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/video/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/video/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vmware/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vmware/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vmware/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vmware/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/vmware/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/volume/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wall/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wall/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wall/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wall/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wall/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wand/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wand/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wand/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wand/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wand/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/watch/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/watch/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/watch/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/watch/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/watch/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/webhook/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/webhook/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/webhook/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/webhook/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/webhook/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wifi/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wifi/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wifi/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wifi/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wifi/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wrench/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wrench/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wrench/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wrench/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/wrench/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-square/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-square/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-square/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-square/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x-square/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/x/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/youtube/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/youtube/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/youtube/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/youtube/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/youtube/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zap/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zap/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zap/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zap/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zap/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/property-24.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/index.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/keyframes.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/placeholders.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/property-16.scss
 create mode 100644 ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/property-24.scss

diff --git a/.changelog/12461.txt b/.changelog/12461.txt
new file mode 100644
index 0000000000..ef40fdb125
--- /dev/null
+++ b/.changelog/12461.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Move icons away from depending on a CSS preprocessor
+```
diff --git a/ui/packages/consul-ui/app/components/composite-row/index.scss b/ui/packages/consul-ui/app/components/composite-row/index.scss
index 2612d0ca12..bd66491a7f 100644
--- a/ui/packages/consul-ui/app/components/composite-row/index.scss
+++ b/ui/packages/consul-ui/app/components/composite-row/index.scss
@@ -108,5 +108,5 @@
 %composite-row-header .policy-management dd::before,
 %composite-row-detail .policy-management::before {
   @extend %with-star-fill-mask, %as-pseudo;
-  background-color: rgb(var(--tone-brand-600));
+  --icon-color: rgb(var(--tone-brand-600));
 }
diff --git a/ui/packages/consul-ui/app/components/copy-button/skin.scss b/ui/packages/consul-ui/app/components/copy-button/skin.scss
index 214b197ab8..89988852c3 100644
--- a/ui/packages/consul-ui/app/components/copy-button/skin.scss
+++ b/ui/packages/consul-ui/app/components/copy-button/skin.scss
@@ -1,22 +1,22 @@
 %copy-button {
   color: rgb(var(--tone-blue-500));
-  background-color: var(--transparent);
+  --icon-color: var(--transparent);
 }
 %copy-button::before {
   @extend %with-copy-action-mask, %as-pseudo;
-  background-color: rgb(var(--tone-gray-500));
+  --icon-color: rgb(var(--tone-gray-500));
 }
 %copy-button::after {
-  background-color: rgb(var(--tone-gray-050));
+  --icon-color: rgb(var(--tone-gray-050));
 }
 %copy-button:hover:not(:disabled):not(:active),
 %copy-button:focus {
   color: rgb(var(--tone-blue-500));
-  background-color: rgb(var(--tone-gray-050));
+  --icon-color: rgb(var(--tone-gray-050));
 }
 %copy-button:hover::before {
-  background-color: rgb(var(--tone-blue-500));
+  --icon-color: rgb(var(--tone-blue-500));
 }
 %copy-button:active {
-  background-color: rgb(var(--tone-gray-200));
+  --icon-color: rgb(var(--tone-gray-200));
 }
diff --git a/ui/packages/consul-ui/app/components/csv-list/index.scss b/ui/packages/consul-ui/app/components/csv-list/index.scss
index 504b252899..4c64a7c876 100644
--- a/ui/packages/consul-ui/app/components/csv-list/index.scss
+++ b/ui/packages/consul-ui/app/components/csv-list/index.scss
@@ -12,5 +12,6 @@
 %csv:not(:last-child)::after {
   display: inline;
   content: var(--csv-list-separator);
+  vertical-align: initial;
   margin-right: 0.3em;
 }
diff --git a/ui/packages/consul-ui/app/components/freetext-filter/skin.scss b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
index dae3d356a2..c26ea34d9c 100644
--- a/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
+++ b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
@@ -23,7 +23,9 @@
     border: none;
   }
   &_label::after {
-    @extend %as-pseudo;
+    visibility: visible;
+    --icon-name: icon-search;
+    content: '';
     position: absolute;
     top: 50%;
     left: 50%;
@@ -32,9 +34,6 @@
     margin-left: -8px;
     margin-top: -8px;
   }
-  &_label::after {
-    @extend %with-search-mask;
-  }
   .popover-menu {
     background-color: rgb(var(--tone-gray-050));
     color: rgb(var(--tone-gray-800));
diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
index e39505058c..ab564cbb04 100644
--- a/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
@@ -6,27 +6,22 @@
   color: inherit;
 }
 %main-nav-horizontal-popover-menu-trigger::after {
-  @extend %with-chevron-down-mask, %as-pseudo;
-  width: 16px;
-  height: 16px;
-  position: relative;
+  --icon-name: icon-chevron-down;
+  content: '';
 }
 %main-nav-horizontal-popover-menu-trigger[aria-expanded='true']::after {
-  @extend %with-chevron-up-mask;
+  transform: scaleY(-100%);
 }
-/**/
-/* reduced size hamburger menu */
+
 %main-nav-horizontal-toggle {
   display: none;
 }
 %main-nav-horizontal-toggle-button::before {
-  @extend %with-menu-mask, %as-pseudo;
-  font-size: 1.2em;
+  --icon-name: icon-menu;
+  --icon-color: rgb(var(--tone-gray-800));
+  content: '';
   cursor: pointer;
 }
-%main-nav-horizontal-toggle-button::before {
-  background-color: rgb(var(--tone-gray-800));
-}
 %main-nav-horizontal-action,
 %main-nav-horizontal-action-intent,
 %main-nav-horizontal-action-active {
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/layout.scss b/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
index 313ac1e6d0..f82dd73c23 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
@@ -61,9 +61,8 @@
 %modal-window > header {
   position: relative;
 }
-%modal-window > header [data-a11y-dialog-hide] {
+%modal-window > header button {
   float: right;
-  text-indent: -9000px;
   width: 24px;
   height: 24px;
   margin-top: -3px;
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
index 1172121c7a..79ca00f18e 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
@@ -47,8 +47,7 @@
   border-width: 1px;
 }
 
-%modal-window > header [data-a11y-dialog-hide] {
-  @extend %with-cancel-plain-icon;
+%modal-window > header button {
   cursor: pointer;
   border: var(--decor-border-100);
   /*%frame-gray-050??*/
@@ -56,3 +55,8 @@
   border-color: rgb(var(--tone-gray-300));
   border-radius: var(--decor-radius-100);
 }
+%modal-window > header button::before {
+  @extend %with-cancel-plain-icon, %as-pseudo;
+  margin-left: -7px;
+  margin-top: -3px;
+}
diff --git a/ui/packages/consul-ui/app/components/oidc-select/index.hbs b/ui/packages/consul-ui/app/components/oidc-select/index.hbs
index 526a3e5166..1a3ef815c2 100644
--- a/ui/packages/consul-ui/app/components/oidc-select/index.hbs
+++ b/ui/packages/consul-ui/app/components/oidc-select/index.hbs
@@ -75,7 +75,7 @@ as |chart|}}
   </StateChart>
 
   <State @matches="loading">
-    <Progress />
+    <Progress aria-label="Loading" />
   </State>
 
   <State @matches="loaded">
diff --git a/ui/packages/consul-ui/app/components/pill/index.scss b/ui/packages/consul-ui/app/components/pill/index.scss
index f5a7642f2c..d7da1f0a54 100644
--- a/ui/packages/consul-ui/app/components/pill/index.scss
+++ b/ui/packages/consul-ui/app/components/pill/index.scss
@@ -20,3 +20,15 @@ span.policy-node-identity::before {
 span.policy-service-identity::before {
   content: 'Service Identity: ';
 }
+%pill.leader::before {
+  @extend %with-star-outline-mask, %as-pseudo;
+}
+%pill.jwt::before {
+  @extend %with-logo-jwt-color-icon, %as-pseudo;
+}
+%pill.oidc::before {
+  @extend %with-logo-oidc-color-icon, %as-pseudo;
+}
+%pill.kubernetes::before {
+  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
+}
diff --git a/ui/packages/consul-ui/app/components/pill/layout.scss b/ui/packages/consul-ui/app/components/pill/layout.scss
index 60b15f82ba..11830acd66 100644
--- a/ui/packages/consul-ui/app/components/pill/layout.scss
+++ b/ui/packages/consul-ui/app/components/pill/layout.scss
@@ -6,12 +6,11 @@
 }
 %pill::before {
   margin-right: 4px;
-  width: 0.75rem !important; /* 12px */
-  height: 0.75rem !important; /* 12px */
 }
 %pill-200 {
   @extend %pill;
   padding: 0 8px;
+  --icon-size: icon-200;
 }
 %pill-500 {
   @extend %pill;
diff --git a/ui/packages/consul-ui/app/components/progress/README.mdx b/ui/packages/consul-ui/app/components/progress/README.mdx
index c5baa5b43b..f39d264976 100644
--- a/ui/packages/consul-ui/app/components/progress/README.mdx
+++ b/ui/packages/consul-ui/app/components/progress/README.mdx
@@ -1,8 +1,21 @@
 # Progress
 
 Simple Progress component in lieu of a reliable/styleable cross browser
-`<progress />`.
+`<progress />`. Please consider making use of `aria-label` or `aria-labelled-by`.
 
 ```hbs preview-template
-<Progress />
+<Progress
+  aria-label="Loading"
+/>
+```
+
+The animated icon also automatically supports a `prefers-reduced-motion` class/setting. The example below uses a local class just for illustration purposes in these docs. You do not need to add this class anywhere, please use the above class-less example instead.
+
+```hbs preview-template
+<Progress
+  class={{class-map
+    'prefers-reduced-motion'
+  }}
+  aria-label="Loading"
+/>
 ```
diff --git a/ui/packages/consul-ui/app/components/progress/index.hbs b/ui/packages/consul-ui/app/components/progress/index.hbs
index 1be25cee92..a8c373aae5 100644
--- a/ui/packages/consul-ui/app/components/progress/index.hbs
+++ b/ui/packages/consul-ui/app/components/progress/index.hbs
@@ -1,4 +1,5 @@
 <div
   class="progress indeterminate"
+  role="progressbar"
   ...attributes
 ></div>
diff --git a/ui/packages/consul-ui/app/components/progress/layout.scss b/ui/packages/consul-ui/app/components/progress/layout.scss
index 53c7f73982..dc2c252718 100644
--- a/ui/packages/consul-ui/app/components/progress/layout.scss
+++ b/ui/packages/consul-ui/app/components/progress/layout.scss
@@ -7,7 +7,3 @@
 %progress-native::-webkit-progress-value {
   display: none;
 }
-%progress-indeterminate {
-  height: 24px;
-  width: 24px;
-}
diff --git a/ui/packages/consul-ui/app/components/progress/skin.scss b/ui/packages/consul-ui/app/components/progress/skin.scss
index cc040da502..fb9f433d0b 100644
--- a/ui/packages/consul-ui/app/components/progress/skin.scss
+++ b/ui/packages/consul-ui/app/components/progress/skin.scss
@@ -1,7 +1,12 @@
 %progress-indeterminate {
-  @extend %loading-svg-prop;
-  background-image: var(--loading-svg);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-color: transparent;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --icon-size: icon-700; /* 24px */
+  --icon-name: var(--icon-loading);
+  --icon-color: rgb(var(--tone-gray-500));
+}
+%progress-indeterminate::before {
+  content: '';
 }
diff --git a/ui/packages/consul-ui/app/components/secret-button/index.scss b/ui/packages/consul-ui/app/components/secret-button/index.scss
index 11e153b839..aafd0b9423 100644
--- a/ui/packages/consul-ui/app/components/secret-button/index.scss
+++ b/ui/packages/consul-ui/app/components/secret-button/index.scss
@@ -9,13 +9,14 @@
 %secret-button span {
   visibility: hidden;
   position: absolute;
+  --icon-color: rgb(var(--tone-gray-500));
 }
 %secret-button em {
   margin-left: 22px;
 }
 %secret-button span::before {
   @extend %with-visibility-show-mask, %as-pseudo;
-  background-color: rgb(var(--tone-gray-500));
+  visibility: visible;
 }
 %secret-button input:checked + span::before {
   @extend %with-visibility-hide-mask;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
index 0335b76e53..6148f41a75 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
@@ -56,23 +56,23 @@
     .partition dt::before,
     .nspace dt::before,
     .health dt::before {
-      background-color: rgb(var(--tone-gray-500));
+      --icon-color: rgb(var(--tone-gray-500));
     }
     .passing::before {
       @extend %with-check-circle-fill-mask, %as-pseudo;
-      background-color: rgb(var(--tone-green-500));
+      --icon-color: rgb(var(--tone-green-500));
     }
     .warning::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: rgb(var(--tone-orange-500));
+      --icon-color: rgb(var(--tone-orange-500));
     }
     .critical::before {
       @extend %with-cancel-square-fill-mask, %as-pseudo;
-      background-color: rgb(var(--tone-red-500));
+      --icon-color: rgb(var(--tone-red-500));
     }
     .empty::before {
       @extend %with-minus-square-fill-mask, %as-pseudo;
-      color: rgb(var(--tone-gray-500));
+      --icon-color: rgb(var(--tone-gray-500));
     }
   }
   .details {
@@ -96,7 +96,7 @@
       span::before {
         margin-right: 0px;
         @extend %with-union-mask, %as-pseudo;
-        background-color: rgb(var(--tone-gray-500));
+        --icon-color: rgb(var(--tone-gray-500));
       }
       dl:first-child {
         grid-area: partition;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
index bef40bb814..230bfa1144 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
@@ -21,16 +21,16 @@
   &.deny > button::before,
   &.deny .tippy-arrow::after {
     @extend %with-cancel-square-fill-mask, %as-pseudo;
-    background-color: rgb(var(--tone-red-500));
+    --icon-color: rgb(var(--tone-red-500));
   }
   &.l7 > button::before,
   &.l7 .tippy-arrow::after {
     @extend %with-layers-mask, %as-pseudo;
-    background-color: rgb(var(--tone-gray-300));
+    --icon-color: rgb(var(--tone-gray-300));
   }
   &.not-defined > button::before,
   &.not-defined .tippy-arrow::after {
     @extend %with-alert-triangle-mask, %as-pseudo;
-    color: rgb(var(--tone-yellow-500));
+    --icon-color: rgb(var(--tone-yellow-500));
   }
 }
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
index 287925d5eb..fdf7f23fbf 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
@@ -14,5 +14,7 @@
 }
 
 span.topology-metrics-status-loader::after {
-  @extend %with-loading-icon, %as-pseudo;
+  --icon-name: var(--icon-loading);
+  content: '';
+  margin-left: 0.5rem; /* 8px */
 }
diff --git a/ui/packages/consul-ui/app/modifiers/css-props.js b/ui/packages/consul-ui/app/modifiers/css-props.js
index 7ed02b4330..adca9383ae 100644
--- a/ui/packages/consul-ui/app/modifiers/css-props.js
+++ b/ui/packages/consul-ui/app/modifiers/css-props.js
@@ -29,10 +29,14 @@ export default modifier(function($element, [returns], hash) {
         if (prop.charAt(prop.length - 1) === '-') {
           prop = prop.substr(0, prop.length - 1);
         }
-        if (typeof obj[prop] === 'undefined') {
-          obj[prop] = {};
+        if(hash.group) {
+          if (typeof obj[prop] === 'undefined') {
+            obj[prop] = {};
+          }
+          obj[prop][key] = value;
+        } else {
+          obj[key] = value;
         }
-        obj[prop][key] = value;
       }
     });
     returns(obj);
diff --git a/ui/packages/consul-ui/app/styles/base/icons/README.mdx b/ui/packages/consul-ui/app/styles/base/icons/README.mdx
index 8c8791353b..7da27e565d 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/README.mdx
+++ b/ui/packages/consul-ui/app/styles/base/icons/README.mdx
@@ -1,5 +1,87 @@
 # Iconography
 
+All our iconography uses native CSS properties for adding iconography from The
+Outside. You can also add icons using the same properties within `style=""`
+attributes, but you should think twice before adding decorative content into
+HTML and only do so if you have a good reason/have tried everything else.
+
+Available icons properties are:
+
+- `--icon-name`: See below for available names
+- `--icon-color`: By default our icons are set to be monochrome, using
+  `--icon-color` will color the icon, you can also use `currentColor`
+- `--icon-size`: Set the size of the icon, see below for available values. Our
+  values use a `icon-000` naming scheme similar to all our ther naming scales (and
+  `font-weight`). We default this to `icon-300` i.e. `1rem`/`16px` and `icon-000`
+  means 'use the font-size'
+- `--icon-resolution`: Set the resolution of the icon. Currently you can set
+  either `1` or `.5` here `resolution` happens to mean the thickness of the lines
+  used in the icon. 1 equals thicker lines and should be used at sizes lower than
+  `icon-500`. `.5` equals thinner lines and should be used at sizes larger than
+  `icon-500`.
+
+All of the above properties can be suffixed with `-start` or `-end`, these are
+mainly used for specifying icons using `style=""` attributes. Here `start` and
+`end` refer to either the `::before` or `::after` pseudo element to use to
+display the icon. If you are not using the `style=""` attribute (which you
+probably aren't) consider just using normal `::before` and `::after` CSS
+selectors.
+
+```css
+.selector::before {
+  --icon-name: icon-aws-color;
+  content: '';
+}
+```
+
+```css
+.selector::after {
+  --icon-name: icon-aws;
+  --icon-color: rgb(var(---white));
+  content: '';
+}
+```
+
+If you cannot use CSS or have a good reason to do so, you can very easily add
+icons in HTML using these CSS properties.
+
+```hbs preview-template
+<h2
+  style={{style-map
+    (array '--icon-name-start' 'icon-consul')
+    (array '--icon-color-start' 'rgb(var(--tone-strawberry-500))')
+    (array '--icon-name-end' 'icon-vault')
+    (array '--icon-color-end' 'var(--color-vault-500)')
+  }}
+>
+  Header Name
+</h2>
+```
+
+It's probably worth noting that we could make an icon component using the
+following. Under different circumstances this would give us an option that works
+"For Everyone, Everywhere" (in Every Framework as it's just native CSS).
+
+```hbs
+<span
+  class={{class-map
+    'visually-hidden'
+  }}
+  style={{style-map
+    (array '--icon-name-start' @name)
+    (array '--icon-color' @color)
+    (array '--icon-size' @size)
+  }}
+  ...attributes
+>{{yield}}</span>
+
+
+<Icon @name="icon-name" @color="#FF0000" @size="icon-300" />
+```
+
+
+## Deprecated
+
 Please prefer our Constructable `%placeholder` styles over singular CSS
 properties. If you need to drop back, to something not covered there then you
 can also use CSS properties directly.
@@ -9,12 +91,6 @@ All icons use a `%with-` prefix for example `%with-alert-circle-fill-icon` or
 the `%as-pseudo` placeholder to tell CSS that we are using the background on a
 pseudo element:
 
-```css
-.selector::before {
-  @extend %with-alert-circle-fill-mask, %as-pseudo;
-}
-```
-
 If you are not using a pseudo element for whatever reason, then you do not need
 to use `%as-pseudo`.
 
@@ -39,36 +115,61 @@ use `-mask`, use `-icon` instead:
 }
 ```
 
-## Structure Icons + Consul Specific Icons
-
 ```hbs preview-template
-<ul>
-{{#each (icons-debug 'structure') as |prop|}}
+<figure>
+    <select
+      onchange={{action (mut this.type) value="target.value"}}
+    >
+      <option>colored</option>
+      <option>monochrome</option>
+    </select>
+    <select
+      onchange={{action (mut this.theme) value="target.value"}}
+    >
+      <option>light</option>
+      <option>dark</option>
+    </select>
+    <input
+      oninput={{action (mut this.size) value="target.value"}}
+      type="range" min="100" max="900" step="100"
+    />
+    {{this.size}}
+</figure>
+<ul
+  {{css-props (set this 'icons')
+    prefix='icon-'
+  }}
+  class={{class-map
+    (concat 'theme-' (or this.theme 'light'))
+  }}
+  style={{style-map
+    (array '--icon-color' (if (eq this.type 'monochrome') 'rgb(var(--black))'))
+    (array '--icon-size' (concat 'icon-' (or this.size '500')))
+    (array '--icon-resolution' (if (gt this.size 500) '.5' '1'))
+  }}
+>
+{{#each-in this.icons as |prop value|}}
+{{#if (and
+    (not (contains prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
+    (not (string-includes prop '-24'))
+  )
+}}
+{{#let
+  (string-replace (string-replace prop '-16' '') '--' '')
+as |name|}}
   <li>
     <figure
-      {{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
-      class={{concat 'debug-' prop.placeholder '-before'}}
+      {{with-copyable (concat '--icon-name: ' name ';content: "";')}}
+      style={{style-map
+        (array '--icon-name-start' name)
+      }}
     >
-      <figcaption>{{prop.name}}</figcaption>
+      <figcaption>{{name}}</figcaption>
     </figure>
   </li>
-{{/each}}
+{{/let}}
+{{/if}}
+{{/each-in}}
 </ul>
 ```
 
-## Flight Icons
-
-```hbs preview-template
-<ul>
-{{#each (icons-debug 'flight') as |prop|}}
-  <li>
-    <figure
-      {{with-copyable (concat "@extend %" prop.placeholder ", %as-pseudo;")}}
-      class={{concat 'debug-' prop.placeholder '-before'}}
-    >
-      <figcaption>{{prop.name}}</figcaption>
-    </figure>
-  </li>
-{{/each}}
-</ul>
-```
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss
new file mode 100644
index 0000000000..dab94ecee2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss
@@ -0,0 +1,89 @@
+*::before, *::after {
+  display: inline-block;
+  animation-play-state: paused;
+  animation-fill-mode: forwards;
+  animation-iteration-count: var(--icon-resolution, 1);
+  vertical-align: text-top;
+}
+*::before {
+  animation-name: var(--icon-name-start, var(--icon-name)),
+                  var(--icon-size-start, var(--icon-size, icon-000));
+  background-color: var(--icon-color-start, var(--icon-color));
+}
+*::after {
+  animation-name: var(--icon-name-end, var(--icon-name)),
+                  var(--icon-size-end, var(--icon-size, icon-000));
+  background-color: var(--icon-color-end, var(--icon-color));
+}
+
+[style*='--icon-color-start']::before {
+  color: var(--icon-color-start);
+}
+[style*='--icon-color-end']::after {
+  color: var(--icon-color-end);
+}
+[style*='--icon-name-start']::before,
+[style*='--icon-name-end']::after {
+  content: '';
+}
+
+@keyframes icon-000 {
+  100% {
+    width: 1.2em;
+    height: 1.2em;
+  }
+}
+@keyframes icon-100 {
+  100% {
+    width: 0.625rem; /* 10px */
+    height: 0.625rem; /* 10px */
+  }
+}
+@keyframes icon-200 {
+  100% {
+    width: 0.75rem; /* 12px */
+    height: 0.75rem; /* 12px */
+  }
+}
+@keyframes icon-300 {
+  100% {
+    width: 1rem; /* 16px */
+    height: 1rem; /* 16px */
+  }
+}
+@keyframes icon-400 {
+  100% {
+    width: 1.125rem; /* 18px */
+    height: 1.125rem; /* 18px */
+  }
+}
+@keyframes icon-500 {
+  100% {
+    width: 1.250rem; /* 20px */
+    height: 1.250rem; /* 20px */
+  }
+}
+@keyframes icon-600 {
+  100% {
+    width: 1.375rem; /* 22px */
+    height: 1.375rem; /* 22px */
+  }
+}
+@keyframes icon-700 {
+  100% {
+    width: 1.500rem; /* 24px */
+    height: 1.500rem; /* 24px */
+  }
+}
+@keyframes icon-800 {
+  100% {
+    width: 1.625rem; /* 26px */
+    height: 1.625rem; /* 26px */
+  }
+}
+@keyframes icon-900 {
+  100% {
+    width: 1.750rem; /* 28px */
+    height: 1.750rem; /* 28px */
+  }
+}
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
index e15efe3aa5..2e101b44a4 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
@@ -6,17 +6,6 @@
   --theme-dark-none: initial;
   --theme-light-none: ;
 }
-%with-icon {
-  background-repeat: no-repeat;
-  background-position: center;
-}
-%with-mask {
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  background-color: currentColor;
-}
 %with-glyph-icon {
   font-weight: var(--typo-weight-normal);
   background-color: rgb(var(--tone-gray-100));
@@ -24,13 +13,7 @@
   padding: 0 4px;
 }
 %as-pseudo {
-  display: inline-block;
   content: '';
-  visibility: visible;
-  background-size: contain;
-  width: 1rem; /* 16px */
-  height: 1rem; /* 16px */
-  vertical-align: text-top;
 }
 %led-icon {
   position: relative;
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
deleted file mode 100644
index 764798c2d4..0000000000
--- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
+++ /dev/null
@@ -1,4471 +0,0 @@
-%activity-16-svg-prop {
-  --activity-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.016 1a.75.75 0 01.698.521l3.306 10.33 1.47-4.341A.75.75 0 0112.2 7H15a.75.75 0 010 1.5h-2.262l-2.028 5.99a.75.75 0 01-1.424-.011L5.952 4.06 4.504 8.008A.75.75 0 013.8 8.5H1A.75.75 0 111 7h2.276l2.02-5.508c.11-.301.4-.499.72-.492z" clip-rule="evenodd"/></svg>');
-}
-
-%activity-24-svg-prop {
-  --activity-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.003 2a.75.75 0 01.71.519l5.278 16.27 2.294-7.265A.75.75 0 0118 11h4a.75.75 0 010 1.5h-3.45l-2.835 8.976a.75.75 0 01-1.428.005L8.99 5.151l-2.278 6.836A.75.75 0 016 12.5H2A.75.75 0 012 11h3.46l2.828-8.487A.75.75 0 019.003 2z" clip-rule="evenodd"/></svg>');
-}
-
-%alert-circle-16-svg-prop {
-  --alert-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zM8 10a1 1 0 100 2h.007a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%alert-circle-24-svg-prop {
-  --alert-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%alert-circle-fill-16-svg-prop {
-  --alert-circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 6a1 1 0 100 2h.007a1 1 0 100-2H8z" clip-rule="evenodd"/></svg>');
-}
-
-%alert-circle-fill-24-svg-prop {
-  --alert-circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm-.75 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
-}
-
-%alert-circle-fill-svg-prop {
-  @extend %alert-circle-16-svg-prop;
-}
-
-%alert-circle-outline-svg-prop {
-  @extend %alert-circle-16-svg-prop;
-}
-
-%alert-octagon-16-svg-prop {
-  --alert-octagon-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/><path fill-rule="evenodd" d="M3.882.805A2.75 2.75 0 015.827 0h4.346c.73 0 1.429.29 1.945.805l3.076 3.077A2.75 2.75 0 0116 5.827v4.346c0 .73-.29 1.429-.806 1.945l-3.076 3.076a2.75 2.75 0 01-1.945.806H5.827a2.75 2.75 0 01-1.945-.806L.805 12.118A2.75 2.75 0 010 10.173V5.827c0-.73.29-1.429.805-1.945L3.882.805zm1.945.695c-.332 0-.65.132-.884.366L1.866 4.943a1.25 1.25 0 00-.366.884v4.346c0 .332.132.65.366.884l3.077 3.077c.234.234.552.366.884.366h4.346c.332 0 .65-.132.884-.366l3.077-3.077a1.25 1.25 0 00.366-.884V5.827c0-.332-.132-.65-.366-.884l-3.077-3.077a1.25 1.25 0 00-.884-.366H5.827z" clip-rule="evenodd"/></g></svg>');
-}
-
-%alert-octagon-24-svg-prop {
-  --alert-octagon-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM12.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M6.64 1.805A2.75 2.75 0 018.585 1h6.83c.73 0 1.429.29 1.945.805l4.835 4.835A2.75 2.75 0 0123 8.585v6.83c0 .73-.29 1.429-.805 1.945l-4.835 4.835a2.75 2.75 0 01-1.945.805h-6.83a2.75 2.75 0 01-1.945-.805L1.805 17.36A2.75 2.75 0 011 15.415v-6.83c0-.73.29-1.429.805-1.945L6.64 1.805zm1.945.695c-.332 0-.65.132-.884.366L2.866 7.701a1.25 1.25 0 00-.366.884v6.83c0 .332.132.65.366.884l4.835 4.835c.234.234.552.366.884.366h6.83c.332 0 .65-.132.884-.366l4.835-4.835a1.25 1.25 0 00.366-.884v-6.83c0-.332-.132-.65-.366-.884l-4.835-4.835a1.25 1.25 0 00-.884-.366h-6.83z" clip-rule="evenodd"/></g></svg>');
-}
-
-%alert-octagon-fill-16-svg-prop {
-  --alert-octagon-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.882.805A2.75 2.75 0 015.827 0h4.346c.73 0 1.429.29 1.945.805l3.076 3.077A2.75 2.75 0 0116 5.827v4.346c0 .73-.29 1.429-.806 1.945l-3.076 3.076a2.75 2.75 0 01-1.945.806H5.827a2.75 2.75 0 01-1.945-.806L.805 12.118A2.75 2.75 0 010 10.173V5.827c0-.73.29-1.429.805-1.945L3.882.805zM7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zm1.75-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z" clip-rule="evenodd"/></svg>');
-}
-
-%alert-octagon-fill-24-svg-prop {
-  --alert-octagon-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.585 1c-.73 0-1.429.29-1.945.805L1.805 6.64A2.75 2.75 0 001 8.585v6.83c0 .73.29 1.429.805 1.945l4.835 4.835A2.75 2.75 0 008.585 23h6.83c.73 0 1.429-.29 1.945-.805l4.835-4.835A2.75 2.75 0 0023 15.415v-6.83c0-.73-.29-1.429-.805-1.945L17.36 1.805A2.75 2.75 0 0015.415 1h-6.83zm2.665 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
-}
-
-%alert-triangle-16-svg-prop {
-  --alert-triangle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 5.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/><path fill-rule="evenodd" d="M6.953 1.273a2.143 2.143 0 012.874.751l.002.004 5.884 9.774a2.126 2.126 0 01-.768 2.905c-.322.188-.687.289-1.06.293H2.115a2.143 2.143 0 01-1.833-1.074 2.125 2.125 0 01.006-2.124l.006-.01 5.878-9.764.002-.004c.191-.313.46-.571.78-.75zm.502 1.53l-.001.002-5.872 9.754a.626.626 0 00.231.853.644.644 0 00.314.088h11.746a.643.643 0 00.544-.32.626.626 0 000-.62l-5.87-9.755-.002-.001A.635.635 0 008 2.5a.643.643 0 00-.545.304z" clip-rule="evenodd"/></g></svg>');
-}
-
-%alert-triangle-24-svg-prop {
-  --alert-triangle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11 17a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM12.75 8.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M10.658 2.366a2.651 2.651 0 012.684 0c.407.239.745.581.984.99l.002.004 8.315 14.46a2.86 2.86 0 01.008 2.758 2.757 2.757 0 01-.976 1.03c-.41.25-.877.386-1.357.392H3.682a2.653 2.653 0 01-1.357-.393 2.757 2.757 0 01-.975-1.029 2.86 2.86 0 01.007-2.758l.006-.01 8.31-14.45.001-.004a2.75 2.75 0 01.984-.99zm.313 1.744v.001L2.665 18.552a1.36 1.36 0 000 1.306c.108.198.262.36.443.47.18.11.382.169.586.172h16.61c.204-.003.406-.061.586-.172.181-.11.335-.272.444-.47a1.361 1.361 0 00-.001-1.306L13.03 4.112l-.001-.002a1.25 1.25 0 00-.446-.45 1.151 1.151 0 00-1.166 0 1.25 1.25 0 00-.446.45z" clip-rule="evenodd"/></g></svg>');
-}
-
-%alert-triangle-fill-16-svg-prop {
-  --alert-triangle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1a2.143 2.143 0 00-1.827 1.024l-5.88 9.768a2.125 2.125 0 00.762 2.915c.322.188.687.289 1.06.293h11.77a2.143 2.143 0 001.834-1.074 2.126 2.126 0 00-.006-2.124L9.829 2.028A2.149 2.149 0 008 1zM7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zm1.75-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z" clip-rule="evenodd"/></svg>');
-}
-
-%alert-triangle-fill-24-svg-prop {
-  --alert-triangle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2c-.472 0-.934.127-1.342.366a2.75 2.75 0 00-.984.99L1.363 17.81l-.006.01a2.86 2.86 0 00-.007 2.758c.23.423.566.778.975 1.03.41.25.877.386 1.357.392h16.637c.479-.006.947-.142 1.356-.393.41-.25.744-.606.976-1.029a2.86 2.86 0 00-.008-2.758L14.328 3.36l-.002-.004a2.75 2.75 0 00-.984-.99A2.651 2.651 0 0012 2zm-.75 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 17a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
-}
-
-%alert-triangle-svg-prop {
-  @extend %alert-triangle-16-svg-prop;
-}
-
-%alibaba-16-svg-prop {
-  --alibaba-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
-}
-
-%alibaba-24-svg-prop {
-  --alibaba-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15.21 11.248H8.805v1.44h6.405v-1.44z"/><path d="M18.405 6h-4.233l1.022 1.456 3.1.944c.574.176.942.72.926 1.28v4.64a1.34 1.34 0 01-.927 1.28l-3.082.944L14.171 18h4.233a3.196 3.196 0 003.195-3.2V9.2c.016-1.76-1.422-3.2-3.195-3.2zM5.595 6h4.232L8.805 7.456 5.722 8.4c-.575.176-.942.72-.926 1.28v4.64c0 .576.367 1.104.926 1.28l3.083.944L9.827 18H5.595A3.207 3.207 0 012.4 14.8V9.2C2.4 7.44 3.838 6 5.595 6z"/></g></svg>');
-}
-
-%alibaba-color-16-svg-prop {
-  --alibaba-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23ED6B1E"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
-}
-
-%alibaba-color-24-svg-prop {
-  --alibaba-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23ED6B1E"><path d="M15.21 11.248H8.805v1.44h6.405v-1.44z"/><path d="M18.405 6h-4.233l1.022 1.456 3.1.944c.574.176.942.72.926 1.28v4.64a1.34 1.34 0 01-.927 1.28l-3.082.944L14.171 18h4.233a3.196 3.196 0 003.195-3.2V9.2c.016-1.76-1.422-3.2-3.195-3.2zM5.595 6h4.232L8.805 7.456 5.722 8.4c-.575.176-.942.72-.926 1.28v4.64c0 .576.367 1.104.926 1.28l3.083.944L9.827 18H5.595A3.207 3.207 0 012.4 14.8V9.2C2.4 7.44 3.838 6 5.595 6z"/></g></svg>');
-}
-
-%align-center-16-svg-prop {
-  --align-center-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM3.75 6a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM3.75 12a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"/></g></svg>');
-}
-
-%align-center-24-svg-prop {
-  --align-center-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM5.75 9a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H5.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM5.75 17a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H5.75z"/></g></svg>');
-}
-
-%align-justify-16-svg-prop {
-  --align-justify-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1.75 6a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM1.75 12a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75z"/></g></svg>');
-}
-
-%align-justify-24-svg-prop {
-  --align-justify-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2.75 9a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
-}
-
-%align-left-16-svg-prop {
-  --align-left-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1.75 6a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM1.75 12a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
-}
-
-%align-left-24-svg-prop {
-  --align-left-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2.75 9a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H2.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
-}
-
-%align-right-16-svg-prop {
-  --align-right-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM4.75 6a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM4.75 12a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
-}
-
-%align-right-24-svg-prop {
-  --align-right-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM6.75 9a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H6.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM6.75 17a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H6.75z"/></g></svg>');
-}
-
-%amazon-eks-16-svg-prop {
-  --amazon-eks-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.088 12.098l3.185-1.81a.178.178 0 01.176 0l2.843 1.615a.172.172 0 010 .3l-6.204 3.524a.178.178 0 01-.176 0L1.088 11.85A.173.173 0 011 11.7V3.947c0-.061.033-.118.088-.15L7.292.274a.176.176 0 01.264.15v3.23a.172.172 0 01-.088.15l-3.186 1.81a.173.173 0 00-.088.149v4.124c0 .062.034.119.088.15l3.63 2.062c.054.03.122.03.176 0z"/><path d="M8.532 3.803l3.186 1.81a.173.173 0 01.088.149v3.62c0 .06.033.118.088.149l2.842 1.615a.176.176 0 00.264-.15V3.947a.173.173 0 00-.088-.15L8.708.274a.176.176 0 00-.264.15v3.23c0 .062.034.119.088.15z"/><path d="M6.381 10.148h.897V8.121l1.837 2.027h1.164L7.997 7.642l2.168-2.195H8.963L7.278 7.146V5.447h-.897v4.701z"/></g></svg>');
-}
-
-%amazon-eks-24-svg-prop {
-  --amazon-eks-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.126 17.948l4.55-2.626a.25.25 0 01.251 0l4.061 2.344a.251.251 0 010 .435l-8.862 5.115a.25.25 0 01-.252 0L2.125 17.59A.251.251 0 012 17.372V6.117c0-.09.048-.172.125-.217L10.988.784a.251.251 0 01.377.217V5.69a.25.25 0 01-.126.217L6.69 8.534a.252.252 0 00-.126.217v5.987c0 .09.048.172.126.217l5.185 2.993a.25.25 0 00.252 0z"/><path d="M12.76 5.907l4.551 2.627a.252.252 0 01.126.217v5.254c0 .09.048.172.125.217l4.061 2.344A.251.251 0 0022 16.35V6.117a.251.251 0 00-.125-.217L13.012.784a.251.251 0 00-.377.217V5.69c0 .09.048.172.126.217z"/><path d="M9.866 8.473h.924v2.725l2.661-2.725h1.22l-2.92 3.002 3.104 3.465h-1.182l-2.883-3.233v3.233h-.924V8.473z"/></g></svg>');
-}
-
-%amazon-eks-color-16-svg-prop {
-  --amazon-eks-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="url(%23amazon-eks-color-16__paint0_linear_879_141)" fill-rule="evenodd" d="M6.381 10.148h.897V8.121l1.837 2.027h1.164L7.997 7.642l2.169-2.195H8.963L7.278 7.146V5.447h-.897v4.701z" clip-rule="evenodd"/><path fill="url(%23amazon-eks-color-16__paint1_linear_879_141)" d="M8.532 3.803l3.186 1.81a.173.173 0 01.088.149v3.62c0 .06.033.118.088.149l2.842 1.615a.176.176 0 00.264-.15V3.947a.173.173 0 00-.088-.15L8.708.274a.176.176 0 00-.264.15v3.23c0 .062.034.119.088.15z"/><path fill="url(%23amazon-eks-color-16__paint2_linear_879_141)" d="M11.273 10.288l-3.185 1.81a.178.178 0 01-.176 0l-3.63-2.062a.173.173 0 01-.088-.15V5.762c0-.062.034-.119.088-.15l3.186-1.81a.172.172 0 00.088-.15V.424a.176.176 0 00-.264-.15L1.088 3.798a.173.173 0 00-.088.15V11.7c0 .061.033.118.088.15l6.824 3.876c.054.03.122.03.176 0l6.204-3.524a.172.172 0 000-.3l-2.843-1.615a.178.178 0 00-.176 0z"/><defs><linearGradient id="amazon-eks-color-16__paint0_linear_879_141" x1="10.691" x2="8.521" y1="9.879" y2="4.634" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-16__paint1_linear_879_141" x1="15.693" x2="9.546" y1="10.544" y2="-.213" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-16__paint2_linear_879_141" x1="9.433" x2="2.732" y1="14.904" y2="2.88" gradientUnits="userSpaceOnUse"><stop stop-color="%232775FF"/><stop offset="1" stop-color="%23188DFF"/></linearGradient></defs></svg>');
-}
-
-%amazon-eks-color-24-svg-prop {
-  --amazon-eks-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="url(%23amazon-eks-color-24__paint0_linear_879_136)" d="M9.866 8.473h.924v2.725l2.661-2.725h1.22l-2.92 3.002 3.105 3.465h-1.183l-2.883-3.233v3.233h-.924V8.473z"/><path fill="url(%23amazon-eks-color-24__paint1_linear_879_136)" d="M12.76 5.907l4.551 2.627a.252.252 0 01.126.217v5.254c0 .09.048.172.125.217l4.061 2.344A.251.251 0 0022 16.35V6.117a.251.251 0 00-.125-.217L13.012.784a.251.251 0 00-.377.217V5.69c0 .09.048.172.126.217z"/><path fill="url(%23amazon-eks-color-24__paint2_linear_879_136)" d="M16.676 15.322l-4.55 2.626a.25.25 0 01-.252 0L6.69 14.955a.252.252 0 01-.126-.217V8.75c0-.09.048-.172.126-.217l4.55-2.627a.25.25 0 00.126-.217V1a.251.251 0 00-.377-.217L2.125 5.9A.251.251 0 002 6.117v11.255c0 .09.048.172.125.217l9.75 5.627a.25.25 0 00.25 0l8.863-5.115a.251.251 0 000-.435l-4.06-2.344a.25.25 0 00-.252 0z"/><defs><linearGradient id="amazon-eks-color-24__paint0_linear_879_136" x1="15.383" x2="12.246" y1="14.57" y2="7.514" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-24__paint1_linear_879_136" x1="22.99" x2="13.995" y1="15.694" y2=".202" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-24__paint2_linear_879_136" x1="14.046" x2="4.239" y1="22.021" y2="4.702" gradientUnits="userSpaceOnUse"><stop stop-color="%232775FF"/><stop offset="1" stop-color="%23188DFF"/></linearGradient></defs></svg>');
-}
-
-%apple-16-svg-prop {
-  --apple-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M10.167 3.242c.435-.523.742-1.24.742-1.958 0-.105-.008-.202-.03-.284-.704.03-1.55.47-2.06 1.069-.397.448-.772 1.173-.772 1.891 0 .112.023.217.03.254.045.008.12.015.188.015.636 0 1.43-.419 1.902-.987zm.495 1.144c-1.057 0-1.918.643-2.465.643-.591 0-1.355-.606-2.284-.606C4.168 4.423 2.4 5.866 2.4 8.58c0 1.697.652 3.491 1.46 4.642C4.557 14.193 5.164 15 6.04 15c.869 0 1.251-.575 2.33-.575 1.093 0 1.333.56 2.292.56.95 0 1.587-.867 2.18-1.727.673-.986.95-1.943.958-1.988-.053-.015-1.873-.755-1.873-2.833 0-1.794 1.431-2.6 1.513-2.66-.943-1.354-2.381-1.391-2.778-1.391z"/></svg>');
-}
-
-%apple-24-svg-prop {
-  --apple-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M15.073 5.203c.62-.747 1.057-1.772 1.057-2.797 0-.15-.01-.289-.042-.406-1.004.043-2.21.673-2.937 1.527-.566.64-1.1 1.676-1.1 2.702 0 .16.032.31.043.363.064.01.17.02.267.02.908 0 2.04-.597 2.712-1.409zm.705 1.634c-1.506 0-2.734.918-3.513.918-.844 0-1.933-.864-3.257-.864C6.52 6.89 4 8.95 4 12.828c0 2.424.929 4.986 2.082 6.63C7.075 20.848 7.94 22 9.19 22c1.238 0 1.783-.822 3.32-.822 1.56 0 1.901.8 3.268.8 1.356 0 2.264-1.238 3.107-2.466.961-1.41 1.356-2.776 1.367-2.84-.075-.022-2.67-1.079-2.67-4.047 0-2.563 2.04-3.716 2.157-3.802-1.345-1.932-3.395-1.986-3.961-1.986z"/></svg>');
-}
-
-%apple-color-16-svg-prop {
-  --apple-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M10.167 3.242c.435-.523.742-1.24.742-1.958 0-.105-.008-.202-.03-.284-.704.03-1.55.47-2.06 1.069-.397.448-.772 1.173-.772 1.891 0 .112.023.217.03.254.045.008.12.015.188.015.636 0 1.43-.419 1.902-.987zm.495 1.144c-1.057 0-1.918.643-2.465.643-.591 0-1.355-.606-2.284-.606C4.168 4.423 2.4 5.866 2.4 8.58c0 1.697.652 3.49 1.46 4.642C4.557 14.193 5.164 15 6.04 15c.869 0 1.251-.575 2.33-.575 1.093 0 1.333.56 2.292.56.95 0 1.587-.867 2.18-1.727.673-.986.95-1.943.958-1.988-.053-.015-1.873-.755-1.873-2.833 0-1.794 1.431-2.6 1.513-2.66-.943-1.354-2.381-1.391-2.778-1.391z"/></svg>');
-}
-
-%apple-color-24-svg-prop {
-  --apple-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M15.073 5.203c.62-.747 1.057-1.772 1.057-2.797 0-.15-.01-.289-.042-.406-1.004.043-2.21.673-2.937 1.527-.566.64-1.1 1.676-1.1 2.702 0 .16.032.31.043.363.064.01.17.02.267.02.908 0 2.04-.597 2.712-1.409zm.705 1.634c-1.506 0-2.734.918-3.513.918-.844 0-1.933-.864-3.257-.864C6.52 6.89 4 8.95 4 12.828c0 2.424.929 4.986 2.082 6.63C7.075 20.848 7.94 22 9.19 22c1.238 0 1.783-.822 3.32-.822 1.56 0 1.901.8 3.268.8 1.356 0 2.264-1.238 3.107-2.466.961-1.41 1.356-2.776 1.367-2.84-.075-.022-2.67-1.079-2.67-4.047 0-2.563 2.04-3.716 2.157-3.802-1.345-1.932-3.395-1.986-3.961-1.986z"/></svg>');
-}
-
-%archive-16-svg-prop {
-  --archive-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.75 8a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"/><path fill-rule="evenodd" d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v1.5c0 .698-.409 1.3-1 1.582v6.918A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75V5.832A1.75 1.75 0 010 4.25v-1.5zm13.5 10V6h-11v6.75c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75zm1-8.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-1.5a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v1.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%archive-24-svg-prop {
-  --archive-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.75 11a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/><path fill-rule="evenodd" d="M1 4.25A2.25 2.25 0 013.25 2h17.5A2.25 2.25 0 0123 4.25v1.5c0 .78-.397 1.467-1 1.871V19.25A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V7.621A2.248 2.248 0 011 5.75v-1.5zM3.5 8h17v11.25c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V8zm-.25-4.5a.75.75 0 00-.75.75v1.5c0 .414.336.75.75.75h17.5a.75.75 0 00.75-.75v-1.5a.75.75 0 00-.75-.75H3.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%arrow-down-16-svg-prop {
-  --arrow-down-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8.5 2.75a.75.75 0 00-1.5 0v8.614L4.045 8.235a.75.75 0 00-1.09 1.03l4.248 4.498a.862.862 0 00.025.026.747.747 0 00.51.21L7.75 14h.012a.747.747 0 00.533-.235l4.25-4.5a.75.75 0 00-1.09-1.03L8.5 11.364V2.75z"/></svg>');
-}
-
-%arrow-down-24-svg-prop {
-  --arrow-down-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12.5 3.75a.75.75 0 00-1.5 0v14.645l-5.96-6.166a.75.75 0 00-1.08 1.042l7.25 7.5a.75.75 0 001.08 0l7.25-7.5a.75.75 0 10-1.08-1.042l-5.96 6.166V3.75z"/></svg>');
-}
-
-%arrow-down-circle-16-svg-prop {
-  --arrow-down-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/><path d="M5.755 8.195a.75.75 0 00-1.01 1.11l2.75 2.5a.748.748 0 001.01 0l2.75-2.5a.75.75 0 10-1.01-1.11L8.75 9.555V4.75a.75.75 0 00-1.5 0v4.805l-1.495-1.36z"/></g></svg>');
-}
-
-%arrow-down-circle-24-svg-prop {
-  --arrow-down-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 6a.75.75 0 01.75.75v8.614l2.955-3.129a.75.75 0 011.09 1.03l-4.25 4.5a.541.541 0 01-.068.064.747.747 0 01-.465.17L12 18h-.012a.748.748 0 01-.535-.237l-4.248-4.498a.75.75 0 011.09-1.03l2.955 3.129V6.75A.75.75 0 0112 6z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%arrow-down-left-16-svg-prop {
-  --arrow-down-left-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.78 4.28a.75.75 0 00-1.06-1.06L4.5 10.44V6.75a.75.75 0 00-1.5 0v5.5a.748.748 0 00.75.75h5.5a.75.75 0 000-1.5H5.56l7.22-7.22z"/></svg>');
-}
-
-%arrow-down-left-24-svg-prop {
-  --arrow-down-left-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M18.78 6.28a.75.75 0 00-1.06-1.06L6.5 16.44V8.75a.75.75 0 00-1.5 0v9.5a.748.748 0 00.218.529l.002.001.001.002A.748.748 0 005.75 19h9.5a.75.75 0 000-1.5H7.56L18.78 6.28z"/></svg>');
-}
-
-%arrow-down-right-16-svg-prop {
-  --arrow-down-right-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M3.22 4.28a.75.75 0 011.06-1.06l7.22 7.22V6.75a.75.75 0 011.5 0v5.5a.747.747 0 01-.75.75h-5.5a.75.75 0 010-1.5h3.69L3.22 4.28z"/></svg>');
-}
-
-%arrow-down-right-24-svg-prop {
-  --arrow-down-right-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M5.22 7.28a.75.75 0 011.06-1.06L17.5 17.44V9.75a.75.75 0 011.5 0v9.5a.747.747 0 01-.75.75h-9.5a.75.75 0 010-1.5h7.69L5.22 7.28z"/></svg>');
-}
-
-%arrow-down-svg-prop {
-  @extend %arrow-down-16-svg-prop;
-}
-
-%arrow-left-16-svg-prop {
-  --arrow-left-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M7.765 4.045a.75.75 0 10-1.03-1.09L2.237 7.203a.748.748 0 00-.001 1.093l4.499 4.25a.75.75 0 001.03-1.091L4.636 8.5h8.614a.75.75 0 000-1.5H4.636l3.129-2.955z"/></svg>');
-}
-
-%arrow-left-24-svg-prop {
-  --arrow-left-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M11.771 5.04a.75.75 0 00-1.042-1.08l-7.5 7.25a.75.75 0 000 1.08l7.5 7.25a.75.75 0 101.042-1.08L5.605 12.5H20.25a.75.75 0 000-1.5H5.605l6.166-5.96z"/></svg>');
-}
-
-%arrow-left-circle-16-svg-prop {
-  --arrow-left-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.755 4.695a.75.75 0 01.05 1.06L6.445 7.25h4.805a.75.75 0 010 1.5H6.445l1.36 1.495a.75.75 0 01-1.11 1.01l-2.499-2.75A.747.747 0 014 8.003v-.004c0-.195.075-.372.197-.505l2.498-2.748a.75.75 0 011.06-.05z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%arrow-left-circle-24-svg-prop {
-  --arrow-left-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.636 11.25l3.129-2.955a.75.75 0 00-1.03-1.09l-4.498 4.248a.748.748 0 00-.007 1.088M6.236 12.546l4.499 4.25a.75.75 0 001.03-1.091L8.636 12.75h8.614a.75.75 0 000-1.5H8.636"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%arrow-left-svg-prop {
-  @extend %arrow-left-16-svg-prop;
-}
-
-%arrow-right-16-svg-prop {
-  --arrow-right-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8.235 4.045a.75.75 0 111.03-1.09l4.5 4.25a.75.75 0 010 1.09l-4.5 4.25a.75.75 0 01-1.03-1.09L11.364 8.5H2.75a.75.75 0 010-1.5h8.614L8.235 4.045z"/></svg>');
-}
-
-%arrow-right-24-svg-prop {
-  --arrow-right-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12.229 5.04a.75.75 0 011.042-1.08l7.5 7.25a.75.75 0 010 1.08l-7.5 7.25a.75.75 0 11-1.042-1.08l6.166-5.96H3.75a.75.75 0 010-1.5h14.645l-6.166-5.96z"/></svg>');
-}
-
-%arrow-right-circle-16-svg-prop {
-  --arrow-right-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.245 4.695a.75.75 0 00-.05 1.06l1.36 1.495H4.75a.75.75 0 000 1.5h4.805l-1.36 1.495a.75.75 0 001.11 1.01l2.5-2.75a.75.75 0 000-1.01l-2.5-2.75a.75.75 0 00-1.06-.05z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%arrow-right-circle-24-svg-prop {
-  --arrow-right-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6 12a.75.75 0 01.75-.75h8.614l-3.129-2.955a.75.75 0 011.03-1.09l4.5 4.25a.75.75 0 010 1.09l-4.5 4.25a.75.75 0 01-1.03-1.09l3.129-2.955H6.75A.75.75 0 016 12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%arrow-right-svg-prop {
-  @extend %arrow-right-16-svg-prop;
-}
-
-%arrow-up-16-svg-prop {
-  --arrow-up-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M4.045 7.765a.75.75 0 11-1.09-1.03l4.25-4.5a.75.75 0 011.09 0l4.25 4.5a.75.75 0 01-1.09 1.03L8.5 4.636v8.614a.75.75 0 01-1.5 0V4.636L4.045 7.765z"/></svg>');
-}
-
-%arrow-up-24-svg-prop {
-  --arrow-up-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M5.04 10.771A.75.75 0 013.96 9.73l7.25-7.5a.75.75 0 011.08 0l7.25 7.5a.75.75 0 11-1.08 1.042L12.5 4.605V20.25a.75.75 0 01-1.5 0V4.605l-5.96 6.166z"/></svg>');
-}
-
-%arrow-up-circle-16-svg-prop {
-  --arrow-up-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.695 7.755a.75.75 0 001.06.05l1.495-1.36v4.805a.75.75 0 001.5 0V6.445l1.495 1.36a.75.75 0 001.01-1.11l-2.75-2.5a.75.75 0 00-1.01 0l-2.75 2.5a.75.75 0 00-.05 1.06z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%arrow-up-circle-24-svg-prop {
-  --arrow-up-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.75 8.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 001.09 1.03l2.955-3.129v8.614a.75.75 0 001.5 0V8.636z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%arrow-up-left-16-svg-prop {
-  --arrow-up-left-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M3.057 3.463A.748.748 0 013.75 3h5.5a.75.75 0 010 1.5H5.56l7.22 7.22a.75.75 0 11-1.06 1.06L4.5 5.56v3.69a.75.75 0 01-1.5 0v-5.5c0-.102.02-.199.057-.287z"/></svg>');
-}
-
-%arrow-up-left-24-svg-prop {
-  --arrow-up-left-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M6.5 15.25a.75.75 0 01-1.5 0v-9.5c0-.206.083-.393.218-.529l.002-.001.001-.002A.748.748 0 015.75 5h9.5a.75.75 0 010 1.5H7.56l11.22 11.22a.75.75 0 11-1.06 1.06L6.5 7.56v7.69z"/></svg>');
-}
-
-%arrow-up-right-16-svg-prop {
-  --arrow-up-right-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.943 3.463A.748.748 0 0012.25 3h-5.5a.75.75 0 000 1.5h3.69l-7.22 7.22a.75.75 0 101.06 1.06l7.22-7.22v3.69a.75.75 0 001.5 0v-5.5a.747.747 0 00-.057-.287z"/></svg>');
-}
-
-%arrow-up-right-24-svg-prop {
-  --arrow-up-right-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M18.943 5.463a.748.748 0 00-.161-.242l-.002-.001-.001-.002A.748.748 0 0018.25 5h-9.5a.75.75 0 000 1.5h7.69L5.22 17.72a.75.75 0 101.06 1.06L17.5 7.56v7.69a.75.75 0 001.5 0v-9.5a.747.747 0 00-.057-.287z"/></svg>');
-}
-
-%arrow-up-svg-prop {
-  @extend %arrow-up-16-svg-prop;
-}
-
-%at-sign-16-svg-prop {
-  --at-sign-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.818.21a8 8 0 103.046 14.141.75.75 0 10-.912-1.19A6.5 6.5 0 1114.5 8v1c0 .908-.54 1.5-1.25 1.5-.4 0-.691-.157-.894-.399C12.142 9.847 12 9.463 12 9V4.75a.75.75 0 00-1.5 0v.127a4 4 0 10.449 5.825c.076.128.162.25.258.364.484.577 1.194.934 2.043.934C15.04 12 16 10.461 16 9V8A8 8 0 009.818.21zM10.5 8a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0z" clip-rule="evenodd"/></svg>');
-}
-
-%at-sign-24-svg-prop {
-  --at-sign-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M14.5 1.288a11 11 0 104.188 19.445.75.75 0 10-.912-1.19 9.5 9.5 0 113.724-7.544v1.025c0 1.258-.995 2.476-2.325 2.476-1.288 0-2.175-1.142-2.175-2.476V7.75a.75.75 0 00-1.5 0v.68a5 5 0 10.488 6.587c.58 1.12 1.666 1.983 3.187 1.983C21.495 17 23 14.94 23 13.024V12a11 11 0 00-8.5-10.711zM15.5 12a3.5 3.5 0 10-7 0 3.5 3.5 0 007 0z" clip-rule="evenodd"/></svg>');
-}
-
-%auth0-16-svg-prop {
-  --auth0-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.549 1h-4.55l1.407 4.38h4.548l-3.68 2.61 1.406 4.405c2.37-1.725 3.143-4.336 2.274-7.016L12.55 1zM2.045 5.38h4.55L8 1H3.45L2.045 5.38c-.868 2.68-.094 5.29 2.275 7.015L5.725 7.99l-3.68-2.612zm2.275 7.015L8 15l3.68-2.605L8 9.745l-3.68 2.65z"/></svg>');
-}
-
-%auth0-24-svg-prop {
-  --auth0-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M17.849 3H12l1.807 5.63h5.849l-4.732 3.358 1.808 5.663c3.046-2.218 4.041-5.575 2.924-9.02L17.849 3zM4.344 8.63h5.849L12 3H6.152L4.344 8.63c-1.117 3.446-.122 6.802 2.924 9.02l1.808-5.662-4.732-3.357zm2.924 9.02L12 21l4.732-3.35L12 14.244 7.268 17.65z"/></svg>');
-}
-
-%auth0-color-16-svg-prop {
-  --auth0-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.549 1h-4.55l1.407 4.38h4.548l-3.68 2.61 1.406 4.405c2.37-1.725 3.143-4.336 2.274-7.016L12.55 1zM2.045 5.38h4.55L8 1H3.45L2.045 5.38c-.868 2.68-.094 5.29 2.275 7.015L5.725 7.99l-3.68-2.612zm2.275 7.015L8 15l3.68-2.605L8 9.745l-3.68 2.65z"/></svg>');
-}
-
-%auth0-color-24-svg-prop {
-  --auth0-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M17.848 3H12l1.807 5.63h5.849l-4.732 3.358 1.807 5.663c3.046-2.218 4.042-5.575 2.925-9.02L17.848 3zM4.344 8.63h5.848L12 3H6.15L4.344 8.63c-1.117 3.446-.122 6.802 2.924 9.02l1.808-5.662-4.732-3.357zm2.924 9.02L12 21l4.731-3.35L12 14.244 7.268 17.65z"/></svg>');
-}
-
-%auto-apply-16-svg-prop {
-  --auto-apply-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M7.734 4.192C6.572 3.402 5 4.234 5 5.64v4.722c0 1.405 1.572 2.237 2.734 1.447l3.472-2.36a1.75 1.75 0 000-2.895l-3.472-2.36zM6.5 5.64c0-.2.225-.32.39-.206l3.472 2.36a.25.25 0 010 .414l-3.471 2.36a.25.25 0 01-.391-.206V5.639z"/><path d="M7.25 0A1.75 1.75 0 005.5 1.728a6.715 6.715 0 00-.167.07 1.75 1.75 0 00-2.46.015l-1.06 1.06a1.75 1.75 0 00-.015 2.46 6.712 6.712 0 00-.07.167A1.75 1.75 0 000 7.25v1.5c0 .96.772 1.738 1.728 1.75l.07.167a1.75 1.75 0 00.015 2.46l1.06 1.06a1.75 1.75 0 002.46.015l.167.07A1.75 1.75 0 007.25 16h1.5a1.75 1.75 0 001.75-1.728l.167-.07a1.75 1.75 0 002.46-.015l1.06-1.06a1.75 1.75 0 00.015-2.46l.07-.167A1.75 1.75 0 0016 8.75v-1.5a1.75 1.75 0 00-1.728-1.75 6.185 6.185 0 00-.07-.167 1.75 1.75 0 00-.015-2.46l-1.06-1.06a1.75 1.75 0 00-2.46-.015 6.794 6.794 0 00-.167-.07A1.75 1.75 0 008.75 0h-1.5zM7 1.75a.25.25 0 01.25-.25h1.5a.25.25 0 01.25.25v.51c0 .33.216.62.532.717.326.1.64.23.936.388a.75.75 0 00.884-.131l.36-.36a.25.25 0 01.354 0l1.06 1.06a.25.25 0 010 .354l-.36.36a.75.75 0 00-.131.884c.158.296.289.61.388.936a.75.75 0 00.718.532h.509a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25h-.51a.75.75 0 00-.717.532c-.1.326-.23.64-.388.936a.75.75 0 00.131.884l.36.36a.25.25 0 010 .354l-1.06 1.06a.25.25 0 01-.354 0l-.36-.36a.75.75 0 00-.884-.131c-.296.158-.61.289-.936.388a.75.75 0 00-.532.718v.509a.25.25 0 01-.25.25h-1.5a.25.25 0 01-.25-.25v-.51a.75.75 0 00-.532-.717c-.326-.1-.64-.23-.936-.388a.75.75 0 00-.884.131l-.36.36a.25.25 0 01-.354 0l-1.06-1.06a.25.25 0 010-.354l.36-.36a.75.75 0 00.131-.884 5.213 5.213 0 01-.388-.936A.75.75 0 002.259 9H1.75a.25.25 0 01-.25-.25v-1.5A.25.25 0 011.75 7h.51a.75.75 0 00.717-.532c.1-.326.23-.64.388-.936a.75.75 0 00-.131-.884l-.36-.36a.25.25 0 010-.354l1.06-1.06a.25.25 0 01.354 0l.36.36a.75.75 0 00.884.131c.296-.158.61-.289.936-.388A.75.75 0 007 2.259V1.75z"/></g></svg>');
-}
-
-%auto-apply-24-svg-prop {
-  --auto-apply-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.23 6.684c-1.162-.786-2.73.047-2.73 1.45v7.732c0 1.403 1.568 2.236 2.73 1.45l5.716-3.866a1.75 1.75 0 000-2.9L11.23 6.684zM10 8.134c0-.2.224-.32.39-.207l5.715 3.866a.25.25 0 010 .414l-5.715 3.866a.25.25 0 01-.39-.207V8.134z"/><path d="M11.305 0a2.25 2.25 0 00-2.25 2.25v.395a9.747 9.747 0 00-1.587.658l-.28-.28a2.25 2.25 0 00-3.182 0l-.983.983a2.25 2.25 0 000 3.182l.28.28a9.748 9.748 0 00-.658 1.587H2.25A2.25 2.25 0 000 11.305v1.39a2.25 2.25 0 002.25 2.25h.395c.174.552.395 1.082.658 1.587l-.28.28a2.25 2.25 0 000 3.182l.983.983a2.25 2.25 0 003.182 0l.28-.28a9.744 9.744 0 001.587.658v.395a2.25 2.25 0 002.25 2.25h1.39a2.25 2.25 0 002.25-2.25v-.395a9.743 9.743 0 001.587-.658l.28.28a2.25 2.25 0 003.182 0l.983-.983a2.25 2.25 0 000-3.182l-.28-.28a9.742 9.742 0 00.658-1.587h.395a2.25 2.25 0 002.25-2.25v-1.39a2.25 2.25 0 00-2.25-2.25h-.395a9.744 9.744 0 00-.658-1.587l.28-.28a2.25 2.25 0 000-3.182l-.983-.983a2.25 2.25 0 00-3.182 0l-.28.28a9.748 9.748 0 00-1.587-.658V2.25A2.25 2.25 0 0012.695 0h-1.39zm-.75 2.25a.75.75 0 01.75-.75h1.39a.75.75 0 01.75.75v.963a.75.75 0 00.569.728c.806.2 1.566.52 2.26.937a.75.75 0 00.917-.113l.681-.681a.75.75 0 011.061 0l.983.983a.75.75 0 010 1.06l-.681.682a.75.75 0 00-.113.917c.418.694.736 1.454.937 2.26a.75.75 0 00.728.569h.963a.75.75 0 01.75.75v1.39a.75.75 0 01-.75.75h-.963a.75.75 0 00-.728.569 8.25 8.25 0 01-.937 2.26.75.75 0 00.113.917l.681.681a.75.75 0 010 1.061l-.983.983a.75.75 0 01-1.06 0l-.682-.681a.75.75 0 00-.917-.113 8.253 8.253 0 01-2.26.937.75.75 0 00-.569.728v.963a.75.75 0 01-.75.75h-1.39a.75.75 0 01-.75-.75v-.963a.75.75 0 00-.569-.728 8.253 8.253 0 01-2.26-.937.75.75 0 00-.917.113l-.681.681a.75.75 0 01-1.061 0l-.983-.983a.75.75 0 010-1.06l.681-.682a.75.75 0 00.113-.917 8.251 8.251 0 01-.937-2.26.75.75 0 00-.728-.569H2.25a.75.75 0 01-.75-.75v-1.39a.75.75 0 01.75-.75h.963a.75.75 0 00.728-.569c.2-.806.52-1.566.937-2.26a.75.75 0 00-.113-.917l-.681-.681a.75.75 0 010-1.061l.983-.983a.75.75 0 011.06 0l.682.681a.75.75 0 00.917.113 8.251 8.251 0 012.26-.937.75.75 0 00.569-.728V2.25z"/></g></svg>');
-}
-
-%award-16-svg-prop {
-  --award-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a6 6 0 00-4.214 10.27.756.756 0 00-.027.113l-.75 4.75a.75.75 0 00.99.824L8 14.545l4 1.412a.75.75 0 00.99-.824l-.75-4.75a.764.764 0 00-.026-.112A6 6 0 008 0zM3.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zm7.363 5.274A5.974 5.974 0 018 12a5.973 5.973 0 01-2.863-.726l-.45 2.85 3.063-1.081a.75.75 0 01.5 0l3.063 1.08-.45-2.849z" clip-rule="evenodd"/></svg>');
-}
-
-%award-24-svg-prop {
-  --award-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1a8 8 0 00-4.751 14.437l-1.236 6.676a.75.75 0 001.004.838L12 21.053l4.983 1.898a.75.75 0 001.005-.838l-1.237-6.676A8 8 0 0012 1zM5.5 9a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm9.877 7.254A7.97 7.97 0 0112 17a7.97 7.97 0 01-3.377-.746l-.892 4.82 4.002-1.525a.75.75 0 01.534 0l4.003 1.525-.893-4.82z" clip-rule="evenodd"/></svg>');
-}
-
-%aws-16-svg-prop {
-  --aws-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.164-.315c-.416.491-.937.737-1.565.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.192-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.617.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.048-.214c0-.085.042-.133.127-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.101-.208a.365.365 0 01.213-.053h.426c.1 0 .17.016.212.053.043.032.08.107.102.208l.84 3.578.92-3.578a.459.459 0 01.107-.208.347.347 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.768.768 0 01-.038.133l-1.283 4.127c-.031.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.38.38 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.461.461 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.428 2.428 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.435 1.435 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><path fill-rule="evenodd" d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.217-.1.212-.53.686-1.72.462-2.003z" clip-rule="evenodd"/></g></svg>');
-}
-
-%aws-24-svg-prop {
-  --aws-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.895 10.085c0 .288.031.521.086.692.062.172.14.359.249.561a.338.338 0 01.054.18c0 .077-.047.155-.148.233l-.49.327a.373.373 0 01-.202.07c-.078 0-.156-.039-.234-.11a2.407 2.407 0 01-.28-.365 6.028 6.028 0 01-.241-.46c-.607.717-1.37 1.075-2.288 1.075-.654 0-1.176-.187-1.557-.56-.381-.374-.576-.873-.576-1.495 0-.662.234-1.2.708-1.605.475-.404 1.105-.607 1.907-.607.265 0 .537.023.825.062.288.04.584.102.895.172v-.569c0-.591-.125-1.004-.366-1.246-.249-.24-.67-.358-1.268-.358a3.54 3.54 0 00-.84.102 6.2 6.2 0 00-.841.264 2.232 2.232 0 01-.273.101.477.477 0 01-.124.024c-.11 0-.164-.078-.164-.242V5.95c0-.125.016-.218.055-.273A.583.583 0 012 5.514c.272-.14.599-.257.98-.35a4.716 4.716 0 011.214-.148c.926 0 1.604.21 2.04.63.427.42.645 1.06.645 1.916v2.522h.016zm-3.16 1.183c.257 0 .522-.047.802-.14.28-.094.529-.265.74-.498.124-.148.217-.312.264-.499.046-.187.078-.412.078-.677v-.327a6.493 6.493 0 00-.716-.133 5.86 5.86 0 00-.732-.046c-.521 0-.903.1-1.16.311-.256.21-.381.506-.381.896 0 .366.093.638.288.825.187.195.46.288.817.288zm6.25.841c-.14 0-.234-.023-.296-.078-.062-.047-.117-.156-.164-.304L7.696 5.71a1.365 1.365 0 01-.07-.312c0-.124.063-.195.187-.195h.763c.148 0 .249.024.303.078.063.047.11.156.156.304l1.308 5.155 1.214-5.155c.039-.156.085-.257.147-.304a.535.535 0 01.312-.078h.622c.148 0 .25.024.312.078.062.047.117.156.148.304l1.23 5.217 1.346-5.217c.046-.156.1-.257.155-.304a.508.508 0 01.304-.078h.724c.124 0 .194.063.194.195 0 .039-.008.078-.015.125a1.104 1.104 0 01-.055.194l-1.876 6.02c-.046.155-.1.256-.163.303a.497.497 0 01-.296.078h-.669c-.148 0-.249-.024-.311-.078-.063-.055-.117-.156-.148-.312l-1.206-5.022-1.199 5.015c-.039.155-.085.257-.148.311-.062.055-.171.078-.311.078h-.67zm10 .21a5.15 5.15 0 01-1.198-.14c-.39-.093-.693-.195-.895-.311-.125-.07-.21-.148-.242-.218a.55.55 0 01-.046-.218v-.398c0-.163.062-.24.179-.24a.44.44 0 01.14.022c.047.016.117.047.194.078.265.117.553.21.857.273.31.062.614.093.926.093.49 0 .871-.085 1.136-.257a.839.839 0 00.405-.74.758.758 0 00-.21-.544c-.14-.148-.405-.28-.787-.405l-1.128-.35c-.568-.18-.988-.445-1.245-.795a1.856 1.856 0 01-.39-1.129c0-.327.07-.615.21-.864.14-.25.328-.467.561-.639a2.47 2.47 0 01.81-.405 3.39 3.39 0 01.98-.132c.171 0 .35.008.521.031.18.024.343.055.506.086.156.039.304.078.444.124.14.047.249.094.327.14a.673.673 0 01.233.195.42.42 0 01.07.257V6.2c0 .164-.062.25-.179.25a.81.81 0 01-.295-.094 3.559 3.559 0 00-1.495-.304c-.443 0-.793.07-1.035.218-.241.148-.365.374-.365.693 0 .218.077.405.233.553.156.148.444.296.856.428l1.105.35c.56.18.965.429 1.207.748.24.32.358.685.358 1.09 0 .335-.07.639-.203.903-.14.265-.327.499-.568.686-.241.194-.53.335-.864.436a3.7 3.7 0 01-1.113.163z"/><path fill-rule="evenodd" d="M21.456 16.103c-2.56 1.892-6.28 2.897-9.48 2.897-4.482 0-8.522-1.659-11.572-4.415-.242-.218-.024-.514.264-.343 3.3 1.916 7.37 3.076 11.58 3.076 2.841 0 5.962-.592 8.834-1.806.428-.195.794.28.374.591z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M22.522 14.889c-.327-.42-2.164-.203-2.996-.101-.25.03-.288-.187-.063-.35 1.463-1.029 3.868-.733 4.148-.39.28.35-.077 2.756-1.447 3.909-.21.179-.413.085-.32-.148.312-.771 1.005-2.508.678-2.92z" clip-rule="evenodd"/></g></svg>');
-}
-
-%aws-color-16-svg-prop {
-  --aws-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23252F3E" d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.165-.315c-.415.491-.936.737-1.564.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.191-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.618.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.049-.214c0-.085.043-.133.128-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.1-.208a.365.365 0 01.214-.053h.425c.102 0 .17.016.213.053.043.032.08.107.101.208l.841 3.578.92-3.578a.458.458 0 01.107-.208.346.346 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.76.76 0 01-.038.133l-1.283 4.127c-.032.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.378.378 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.46.46 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.427 2.427 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.436 1.436 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><g fill="%23F90" fill-rule="evenodd" clip-rule="evenodd"><path d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z"/><path d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.218-.1.213-.53.687-1.72.463-2.003z"/></g></svg>');
-}
-
-%aws-color-24-svg-prop {
-  --aws-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23252F3E" d="M6.895 10.085c0 .288.031.521.085.692.063.172.14.359.25.561a.338.338 0 01.054.18c0 .077-.047.155-.148.233l-.49.327a.373.373 0 01-.203.07c-.077 0-.155-.039-.233-.11a2.408 2.408 0 01-.28-.365 6.031 6.031 0 01-.241-.46c-.607.717-1.37 1.075-2.288 1.075-.654 0-1.176-.187-1.557-.56-.381-.374-.576-.873-.576-1.495 0-.662.234-1.2.708-1.605.475-.404 1.105-.607 1.907-.607.265 0 .537.023.825.062.288.04.584.102.895.172v-.569c0-.591-.125-1.004-.366-1.246-.249-.24-.67-.358-1.268-.358a3.54 3.54 0 00-.84.102 6.2 6.2 0 00-.841.264 2.234 2.234 0 01-.273.101.477.477 0 01-.124.024c-.11 0-.164-.078-.164-.242V5.95c0-.125.016-.218.055-.273A.583.583 0 012 5.514c.272-.14.599-.257.98-.35a4.716 4.716 0 011.214-.148c.926 0 1.604.21 2.04.63.427.42.645 1.06.645 1.916v2.522h.016zm-3.16 1.183c.257 0 .522-.047.802-.14.28-.094.529-.265.74-.498.124-.148.217-.312.264-.499.046-.187.078-.412.078-.677v-.327a6.494 6.494 0 00-.716-.133 5.86 5.86 0 00-.732-.046c-.521 0-.903.1-1.16.311-.256.21-.381.506-.381.896 0 .366.093.638.288.825.187.195.46.288.817.288zm6.25.841c-.14 0-.234-.023-.296-.078-.062-.047-.117-.156-.164-.304L7.696 5.71a1.364 1.364 0 01-.07-.312c0-.124.063-.195.187-.195h.763c.148 0 .249.024.303.078.063.047.11.156.156.304l1.308 5.155 1.214-5.155c.039-.156.085-.257.147-.304a.535.535 0 01.312-.078h.622c.148 0 .25.024.312.078.062.047.117.156.148.304l1.23 5.217 1.346-5.217c.046-.156.1-.257.155-.304a.508.508 0 01.304-.078h.724c.124 0 .194.063.194.195 0 .039-.008.078-.015.125a1.104 1.104 0 01-.055.194l-1.876 6.02c-.046.155-.1.256-.163.303a.497.497 0 01-.296.078h-.669c-.148 0-.249-.024-.311-.078-.063-.055-.117-.156-.148-.312l-1.206-5.022-1.199 5.015c-.039.155-.086.257-.148.311-.062.055-.171.078-.311.078h-.67zm10 .21a5.15 5.15 0 01-1.198-.14c-.39-.093-.693-.195-.895-.311-.125-.07-.21-.148-.242-.218a.55.55 0 01-.046-.218v-.398c0-.163.062-.24.179-.24a.44.44 0 01.14.022c.047.016.117.047.194.078.265.117.553.21.857.273.31.062.614.093.926.093.49 0 .871-.085 1.136-.257a.838.838 0 00.404-.74.758.758 0 00-.21-.544c-.14-.148-.404-.28-.786-.405l-1.128-.35c-.568-.18-.988-.445-1.245-.795a1.856 1.856 0 01-.39-1.129c0-.327.07-.615.21-.864.14-.25.328-.467.561-.639a2.47 2.47 0 01.81-.405 3.39 3.39 0 01.98-.132c.171 0 .35.008.521.031.18.024.343.055.506.086.156.039.304.078.444.124.14.047.249.094.327.14a.673.673 0 01.233.195.42.42 0 01.07.257V6.2c0 .164-.062.25-.179.25a.81.81 0 01-.295-.094 3.559 3.559 0 00-1.495-.304c-.443 0-.793.07-1.035.218-.241.148-.365.374-.365.693 0 .218.077.405.233.553.156.148.444.296.856.428l1.105.35c.56.18.965.429 1.207.748.24.32.358.685.358 1.09 0 .335-.07.639-.203.903-.14.265-.327.499-.568.686-.241.194-.53.335-.864.436a3.7 3.7 0 01-1.113.163z"/><g fill="%23F90" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.456 16.103c-2.56 1.892-6.28 2.897-9.48 2.897-4.482 0-8.522-1.659-11.572-4.415-.242-.218-.024-.514.264-.343 3.3 1.916 7.37 3.076 11.58 3.076 2.841 0 5.962-.592 8.834-1.806.428-.195.794.28.374.591z"/><path d="M22.522 14.889c-.327-.42-2.164-.203-2.996-.101-.25.03-.288-.187-.063-.35 1.463-1.029 3.868-.733 4.148-.39.28.35-.077 2.756-1.447 3.909-.21.179-.413.085-.32-.148.312-.771 1.005-2.508.678-2.92z"/></g></svg>');
-}
-
-%aws-ec2-16-svg-prop {
-  --aws-ec2-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.602.66L7.998 0 15 3.314v9.372L7.998 16l-1.396-.66V.66zM5.38 1.238L4.3 1.75v12.502l1.08.51V1.239zM2.476 2.612l.863-.406v11.588l-.863-.406V2.612zM1.7 2.98V13.02l-.7-.332V3.312l.7-.33z"/></g></svg>');
-}
-
-%aws-ec2-24-svg-prop {
-  --aws-ec2-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10.002.991l1.995-.99L22 4.97v14.058L11.997 24l-1.995-.99V.99zM8.257 1.857l-1.543.767v18.752l1.543.767V1.857zM4.11 3.918L5.34 3.31v17.382l-1.232-.61V3.919zM3 4.471v15.058l-1-.497V4.968l1-.497z"/></g></svg>');
-}
-
-%aws-ec2-color-16-svg-prop {
-  --aws-ec2-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%239D5025" d="M1.702 2.98L1 3.312v9.376l.702.332 2.842-4.777L1.702 2.98z"/><path fill="%23F58536" d="M3.339 12.657l-1.637.363V2.98l1.637.353v9.324z"/><path fill="%239D5025" d="M2.476 2.612l.863-.406 4.096 6.216-4.096 5.372-.863-.406V2.612z"/><path fill="%23F58536" d="M5.38 13.248l-2.041.546V2.206l2.04.548v10.494z"/><path fill="%239D5025" d="M4.3 1.75l1.08-.512 6.043 7.864-6.043 5.66-1.08-.511V1.749z"/><path fill="%23F58536" d="M7.998 13.856l-2.618.906V1.238l2.618.908v11.71z"/><path fill="%239D5025" d="M6.602.66L7.998 0l6.538 8.453L7.998 16l-1.396-.66V.66z"/><path fill="%23F58536" d="M15 12.686L7.998 16V0L15 3.314v9.372z"/></svg>');
-}
-
-%aws-ec2-color-24-svg-prop {
-  --aws-ec2-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%239D5025" d="M3.003 4.47L2 4.967v14.064l1.003.499 4.06-7.167-4.06-7.895z"/><path fill="%23F58536" d="M5.341 18.985l-2.338.546V4.469L5.341 5v13.985z"/><path fill="%239D5025" d="M4.11 3.918L5.34 3.31l5.852 9.324-5.852 8.058-1.232-.61V3.919z"/><path fill="%23F58536" d="M8.257 19.872l-2.916.819V3.309l2.916.822v15.74z"/><path fill="%239D5025" d="M6.714 2.624l1.543-.767 8.633 11.796-8.633 8.49-1.543-.767V2.624z"/><path fill="%23F58536" d="M11.997 20.784l-3.74 1.359V1.857l3.74 1.362v17.565z"/><path fill="%239D5025" d="M10.002.991L11.997 0l9.34 12.68L11.997 24l-1.995-.991V.99z"/><path fill="%23F58536" d="M22 19.03L11.997 24V0L22 4.97v14.06z"/></svg>');
-}
-
-%azure-16-svg-prop {
-  --azure-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.47 12.412l3.348-.592.031-.007-1.722-2.049a291.474 291.474 0 01-1.723-2.058c0-.01 1.779-4.909 1.789-4.926a788.95 788.95 0 012.934 5.066l2.95 5.115.023.039-10.948-.001 3.317-.587zM.9 11.788c0-.003.811-1.412 1.803-3.131L4.507 5.53l2.102-1.764C7.765 2.797 8.714 2 8.717 2a.37.37 0 01-.033.085L6.4 6.981 4.16 11.789l-1.63.002c-.897.001-1.63 0-1.63-.003z"/></g></svg>');
-}
-
-%azure-24-svg-prop {
-  --azure-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.275 18.199l4.575-.808.043-.01-2.353-2.793a400.617 400.617 0 01-2.353-2.808c0-.013 2.43-6.693 2.443-6.717.004-.008 1.658 2.842 4.008 6.908 2.2 3.807 4.015 6.946 4.031 6.976L21.7 19l-14.957-.002 4.532-.8zM2.3 17.347c0-.004 1.109-1.925 2.464-4.27l2.464-4.262 2.871-2.406A1076.68 1076.68 0 0112.98 4a.504.504 0 01-.046.116l-3.118 6.676-3.062 6.557-2.227.002c-1.225.002-2.227 0-2.227-.004z"/></g></svg>');
-}
-
-%azure-color-16-svg-prop {
-  --azure-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%230089D6"><path d="M7.47 12.412l3.348-.592.031-.007-1.722-2.049a291.474 291.474 0 01-1.723-2.058c0-.01 1.779-4.909 1.789-4.926a788.95 788.95 0 012.934 5.066l2.95 5.115.023.039-10.948-.001 3.317-.587zM.9 11.788c0-.003.811-1.412 1.803-3.131L4.507 5.53l2.102-1.764C7.765 2.797 8.714 2 8.717 2a.37.37 0 01-.033.085L6.4 6.981 4.16 11.789l-1.63.002c-.897.001-1.63 0-1.63-.003z"/></g></svg>');
-}
-
-%azure-color-24-svg-prop {
-  --azure-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%230089D6"><path d="M11.275 18.199l4.575-.808.043-.01-2.353-2.793a400.617 400.617 0 01-2.353-2.808c0-.013 2.43-6.693 2.443-6.717.004-.008 1.658 2.842 4.008 6.908 2.2 3.807 4.015 6.946 4.031 6.976L21.7 19l-14.957-.002 4.532-.8zM2.3 17.347c0-.004 1.109-1.925 2.464-4.27l2.464-4.262 2.871-2.406A1076.68 1076.68 0 0112.98 4a.504.504 0 01-.046.116l-3.118 6.676-3.062 6.557-2.227.002c-1.225.002-2.227 0-2.227-.004z"/></g></svg>');
-}
-
-%azure-devops-16-svg-prop {
-  --azure-devops-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M15 3.622v8.512L11.5 15l-5.425-1.975v1.958L3.004 10.97l8.951.7V4.005L15 3.622zm-2.984.428L6.994 1v2.001L2.382 4.356 1 6.13v4.029l1.978.873V5.869l9.038-1.818z"/></svg>');
-}
-
-%azure-devops-24-svg-prop {
-  --azure-devops-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M21 6.37v10.945L16.5 21l-6.975-2.54v2.518L5.576 15.82l11.509.9V6.864L21 6.371zm-3.836.551L10.706 3v2.573L4.778 7.315 3 9.595v5.18L5.543 15.9v-6.64l11.62-2.338z"/></svg>');
-}
-
-%azure-devops-color-16-svg-prop {
-  --azure-devops-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="url(%23azure-devops-color-16__paint0_linear_707_116)" d="M15 3.622v8.512L11.5 15l-5.425-1.975v1.958L3.004 10.97l8.951.7V4.005L15 3.622zm-2.984.428L6.994 1v2.001L2.382 4.356 1 6.13v4.029l1.978.873V5.869l9.038-1.818z"/><defs><linearGradient id="azure-devops-color-16__paint0_linear_707_116" x1="8" x2="8" y1="14.956" y2="1.026" gradientUnits="userSpaceOnUse"><stop stop-color="%230078D4"/><stop offset=".16" stop-color="%231380DA"/><stop offset=".53" stop-color="%233C91E5"/><stop offset=".82" stop-color="%23559CEC"/><stop offset="1" stop-color="%235EA0EF"/></linearGradient></defs></svg>');
-}
-
-%azure-devops-color-24-svg-prop {
-  --azure-devops-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="url(%23azure-devops-color-24__paint0_linear_707_113)" d="M21 6.37v10.945L16.5 21l-6.975-2.54v2.518L5.576 15.82l11.509.9V6.864L21 6.371zm-3.836.551L10.706 3v2.573L4.778 7.315 3 9.595v5.18L5.543 15.9v-6.64l11.62-2.338z"/><defs><linearGradient id="azure-devops-color-24__paint0_linear_707_113" x1="12" x2="12" y1="20.944" y2="3.034" gradientUnits="userSpaceOnUse"><stop stop-color="%230078D4"/><stop offset=".16" stop-color="%231380DA"/><stop offset=".53" stop-color="%233C91E5"/><stop offset=".82" stop-color="%23559CEC"/><stop offset="1" stop-color="%235EA0EF"/></linearGradient></defs></svg>');
-}
-
-%bank-vault-16-svg-prop {
-  --bank-vault-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6.035 3.974A4.978 4.978 0 019 3c1.11 0 2.136.362 2.965.974l.005-.004a.75.75 0 111.06 1.06l-.004.005C13.638 5.865 14 6.89 14 8c0 1.11-.362 2.136-.974 2.965l.004.005a.75.75 0 11-1.06 1.06l-.005-.004A4.978 4.978 0 019 13a4.978 4.978 0 01-2.965-.974l-.005.004a.75.75 0 01-1.06-1.06l.004-.005A4.977 4.977 0 014 8c0-1.11.362-2.136.974-2.965L4.97 5.03a.75.75 0 011.06-1.06l.005.004zm1.078 1.078A3.484 3.484 0 019 4.5c.695 0 1.343.203 1.887.552l-.917.918a.75.75 0 001.06 1.06l.918-.917c.35.544.552 1.192.552 1.887 0 .695-.203 1.343-.552 1.887l-.918-.917a.75.75 0 10-1.06 1.06l.917.918A3.484 3.484 0 019 11.5a3.483 3.483 0 01-1.887-.552l.917-.918a.75.75 0 10-1.06-1.06l-.918.917A3.484 3.484 0 015.5 8c0-.695.203-1.343.552-1.887l.918.917a.75.75 0 001.06-1.06l-.917-.918z" clip-rule="evenodd"/><path d="M2.75 3.25A.75.75 0 013.5 4v1.5a.75.75 0 01-1.5 0V4a.75.75 0 01.75-.75zM3.5 10.5a.75.75 0 00-1.5 0V12a.75.75 0 001.5 0v-1.5z"/><path fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15H3v.25a.75.75 0 001.5 0V15h7v.25a.75.75 0 001.5 0V15h.75A2.25 2.25 0 0016 12.75v-9.5A2.25 2.25 0 0013.75 1H2.25zm11.5 12.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75H2.25a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h11.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%bank-vault-24-svg-prop {
-  --bank-vault-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M8 12a6 6 0 1112 0 6 6 0 01-12 0zm2.332-2.607A4.48 4.48 0 009.5 12c0 .972.308 1.872.832 2.607l1.45-1.45A2.49 2.49 0 0111.5 12c0-.417.102-.81.283-1.156l-1.451-1.451zm1.06-1.061l1.452 1.45A2.49 2.49 0 0114 9.5c.417 0 .81.102 1.156.283l1.451-1.451A4.48 4.48 0 0014 7.5a4.48 4.48 0 00-2.607.832zm1.452 5.885l-1.451 1.451A4.48 4.48 0 0014 16.5a4.48 4.48 0 002.607-.832l-1.45-1.45A2.49 2.49 0 0114 14.5a2.49 2.49 0 01-1.156-.283zM18.5 12a4.48 4.48 0 01-.832 2.607l-1.45-1.45c.18-.346.282-.74.282-1.157 0-.417-.102-.81-.283-1.156l1.451-1.451A4.48 4.48 0 0118.5 12zM13 12a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"/><path d="M4.75 5a.75.75 0 01.75.75v2.5a.75.75 0 01-1.5 0v-2.5A.75.75 0 014.75 5zM5.5 15.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/><path fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h16.5A2.75 2.75 0 0123 4.75v14.5A2.75 2.75 0 0120.25 22h-.125v1a.875.875 0 01-1.75 0v-1H5.625v1a.875.875 0 01-1.75 0v-1H3.75A2.75 2.75 0 011 19.25V4.75zM3.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%bar-chart-16-svg-prop {
-  --bar-chart-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M12 2a1 1 0 011 1v10a1 1 0 11-2 0V3a1 1 0 011-1zM8 6a1 1 0 011 1v6a1 1 0 11-2 0V7a1 1 0 011-1zM5 10a1 1 0 00-2 0v3a1 1 0 102 0v-3z"/></g></svg>');
-}
-
-%bar-chart-24-svg-prop {
-  --bar-chart-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M18 3a1 1 0 011 1v16a1 1 0 11-2 0V4a1 1 0 011-1zM12 9a1 1 0 011 1v10a1 1 0 11-2 0V10a1 1 0 011-1zM7 16a1 1 0 10-2 0v4a1 1 0 102 0v-4z"/></g></svg>');
-}
-
-%bar-chart-alt-16-svg-prop {
-  --bar-chart-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 2a1 1 0 011 1v10a1 1 0 11-2 0V3a1 1 0 011-1zM12 6a1 1 0 011 1v6a1 1 0 11-2 0V7a1 1 0 011-1zM5 9a1 1 0 00-2 0v4a1 1 0 102 0V9z"/></g></svg>');
-}
-
-%bar-chart-alt-24-svg-prop {
-  --bar-chart-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3a1 1 0 011 1v16a1 1 0 11-2 0V4a1 1 0 011-1zM18 9a1 1 0 011 1v10a1 1 0 11-2 0V10a1 1 0 011-1zM7 14a1 1 0 10-2 0v6a1 1 0 102 0v-6z"/></g></svg>');
-}
-
-%battery-16-svg-prop {
-  --battery-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M2.25 3A2.25 2.25 0 000 5.25v5.5A2.25 2.25 0 002.25 13h8.5A2.25 2.25 0 0013 10.75v-5.5A2.25 2.25 0 0010.75 3h-8.5zM1.5 5.25a.75.75 0 01.75-.75h8.5a.75.75 0 01.75.75v5.5a.75.75 0 01-.75.75h-8.5a.75.75 0 01-.75-.75v-5.5z" clip-rule="evenodd"/><path d="M15.5 6.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/></g></svg>');
-}
-
-%battery-24-svg-prop {
-  --battery-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M3.75 5A2.75 2.75 0 001 7.75v8.5A2.75 2.75 0 003.75 19h14.5A2.75 2.75 0 0021 16.25v-8.5A2.75 2.75 0 0018.25 5H3.75zM2.5 7.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v8.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25v-8.5z" clip-rule="evenodd"/><path d="M23.5 10.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/></g></svg>');
-}
-
-%battery-charging-16-svg-prop {
-  --battery-charging-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.605 3.944a.75.75 0 10-1.21-.888l-2.75 3.75a.75.75 0 00.368 1.155l3.524 1.175-2.142 2.92a.75.75 0 101.21.888l2.75-3.75a.75.75 0 00-.368-1.156L5.463 6.864l2.142-2.92z"/><path d="M2.25 4.5a.75.75 0 00-.75.75v5.5c0 .414.336.75.75.75h.5a.75.75 0 010 1.5h-.5A2.25 2.25 0 010 10.75v-5.5A2.25 2.25 0 012.25 3h.5a.75.75 0 010 1.5h-.5zM9.5 3.75a.75.75 0 01.75-.75h.5A2.25 2.25 0 0113 5.25v5.5A2.25 2.25 0 0110.75 13h-.5a.75.75 0 010-1.5h.5a.75.75 0 00.75-.75v-5.5a.75.75 0 00-.75-.75h-.5a.75.75 0 01-.75-.75zM14.75 6a.75.75 0 01.75.75v2.5a.75.75 0 01-1.5 0v-2.5a.75.75 0 01.75-.75z"/></g></svg>');
-}
-
-%battery-charging-24-svg-prop {
-  --battery-charging-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M13.056 6.003a.75.75 0 10-1.112-1.006l-4.75 5.25a.75.75 0 00.335 1.22l5.428 1.67-4.035 4.885a.75.75 0 001.156.956l4.75-5.75a.75.75 0 00-.357-1.195L9.097 10.38l3.96-4.377z"/><path d="M3.75 6.5c-.69 0-1.25.56-1.25 1.25v8.5c0 .69.56 1.25 1.25 1.25h2.5a.75.75 0 010 1.5h-2.5A2.75 2.75 0 011 16.25v-8.5A2.75 2.75 0 013.75 5h4.5a.75.75 0 010 1.5h-4.5zM15 5.75a.75.75 0 01.75-.75h2.5A2.75 2.75 0 0121 7.75v8.5A2.75 2.75 0 0118.25 19h-4.5a.75.75 0 010-1.5h4.5c.69 0 1.25-.56 1.25-1.25v-8.5c0-.69-.56-1.25-1.25-1.25h-2.5a.75.75 0 01-.75-.75zM22.75 10a.75.75 0 01.75.75v2.5a.75.75 0 01-1.5 0v-2.5a.75.75 0 01.75-.75z"/></g></svg>');
-}
-
-%beaker-16-svg-prop {
-  --beaker-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.608 2H3.75a.75.75 0 000 1.5h.394l.987 2.154c.03.065.03.14.001.205l-2.949 6.685A1.75 1.75 0 003.784 15h8.432a1.75 1.75 0 001.6-2.456l-2.948-6.685a.25.25 0 01.001-.205l.987-2.154h.394a.75.75 0 000-1.5h-.858a.76.76 0 00-.033 0H4.64a.76.76 0 00-.033 0zm5.598 1.5H5.794l.7 1.529c.209.455.213.977.01 1.435L5.828 8h4.346l-.678-1.536a1.75 1.75 0 01.01-1.435l.701-1.529zm-6.65 9.65l1.61-3.65h5.669l1.61 3.65a.25.25 0 01-.23.35h-8.43a.25.25 0 01-.23-.35z" clip-rule="evenodd"/></svg>');
-}
-
-%beaker-24-svg-prop {
-  --beaker-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M6.75 4a.75.75 0 000 1.5h.662l1.441 2.883a.25.25 0 010 .226l-4.657 9.118C3.432 19.224 4.52 21 6.2 21h11.6c1.68 0 2.768-1.776 2.004-3.273l-4.656-9.118a.25.25 0 01-.001-.226L16.588 5.5h.662a.75.75 0 000-1.5H6.75zm8.162 1.5H9.088l1.106 2.213a1.75 1.75 0 01-.007 1.578L8.805 12h6.39l-1.383-2.709a1.75 1.75 0 01-.007-1.578L14.912 5.5zm-9.38 12.909L8.04 13.5h7.922l2.507 4.909A.75.75 0 0117.8 19.5H6.2a.75.75 0 01-.668-1.091z" clip-rule="evenodd"/></svg>');
-}
-
-%bell-16-svg-prop {
-  --bell-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M13 8.78c0 1.334.788 1.72 1.25 1.72a.75.75 0 010 1.5H1.75a.75.75 0 010-1.5c.462 0 1.25-.386 1.25-1.72V6.405C3 3.665 4.907 1 8 1s5 2.665 5 5.405V8.78zM4.5 6.405C4.5 4.275 5.938 2.5 8 2.5c2.062 0 3.5 1.776 3.5 3.905V8.78c0 .677.145 1.252.387 1.72H4.113c.242-.468.387-1.043.387-1.72V6.405z" clip-rule="evenodd"/><path d="M6.898 12.872a.75.75 0 00-1.296.756A2.773 2.773 0 008 15c1.023 0 1.918-.55 2.398-1.372a.75.75 0 00-1.296-.756c-.219.374-.63.628-1.102.628-.473 0-.883-.254-1.102-.628z"/></g></svg>');
-}
-
-%bell-24-svg-prop {
-  --bell-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M20 14.15c0 1.304 1.019 2.35 2.25 2.35a.75.75 0 010 1.5H1.75a.75.75 0 010-1.5C2.981 16.5 4 15.454 4 14.15V8.983C4 4.665 7.702 1 12 1s8 3.665 8 7.983v5.167zM5.5 8.983C5.5 5.5 8.524 2.5 12 2.5s6.5 3 6.5 6.483v5.167c0 .873.29 1.693.782 2.35H4.718a3.917 3.917 0 00.782-2.35V8.983z" clip-rule="evenodd"/><path d="M10.42 20.414a.75.75 0 00-1.34.672C9.63 22.188 10.703 23 12 23c1.296 0 2.369-.812 2.92-1.914a.75.75 0 10-1.34-.672c-.347.691-.953 1.086-1.58 1.086-.627 0-1.233-.395-1.58-1.086z"/></g></svg>');
-}
-
-%bell-active-16-svg-prop {
-  --bell-active-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 2.5c-2.062 0-3.5 1.776-3.5 3.905V8.78c0 .677-.145 1.252-.387 1.72h7.774c-.242-.468-.387-1.043-.387-1.72V6.781a.75.75 0 011.5 0V8.78c0 1.334.788 1.72 1.25 1.72a.75.75 0 010 1.5H1.75a.75.75 0 010-1.5c.462 0 1.25-.386 1.25-1.72V6.405C3 3.665 4.907 1 8 1c.2 0 .395.011.587.034a.75.75 0 01-.174 1.49A3.578 3.578 0 008 2.5z"/><path d="M14 3a2 2 0 11-4 0 2 2 0 014 0zM6.898 12.872a.75.75 0 00-1.296.756A2.773 2.773 0 008 15c1.023 0 1.918-.55 2.398-1.372a.75.75 0 00-1.296-.756c-.219.374-.63.628-1.102.628-.473 0-.883-.254-1.102-.628z"/></g></svg>');
-}
-
-%bell-active-24-svg-prop {
-  --bell-active-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 2.5c-3.476 0-6.5 3-6.5 6.483v5.167c0 .873-.29 1.693-.782 2.35h14.564a3.917 3.917 0 01-.782-2.35V8.983c0-.295-.022-.587-.064-.875a.75.75 0 011.485-.216c.052.357.079.722.079 1.091v5.167c0 1.304 1.019 2.35 2.25 2.35a.75.75 0 010 1.5H1.75a.75.75 0 010-1.5C2.981 16.5 4 15.454 4 14.15V8.983C4 4.665 7.702 1 12 1a7.631 7.631 0 012.389.385.75.75 0 11-.468 1.425A6.131 6.131 0 0012 2.5z"/><path d="M21 3.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10.42 20.414a.75.75 0 00-1.34.672C9.63 22.188 10.703 23 12 23c1.296 0 2.369-.812 2.92-1.914a.75.75 0 10-1.34-.672c-.347.691-.953 1.086-1.58 1.086-.627 0-1.233-.395-1.58-1.086z"/></g></svg>');
-}
-
-%bell-active-fill-16-svg-prop {
-  --bell-active-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M14.25 10.5c-.462 0-1.25-.386-1.25-1.72V6.742a.75.75 0 00-.8-.749 3 3 0 01-3.037-3.975.75.75 0 00-.63-.99A5.092 5.092 0 008 1C4.907 1 3 3.665 3 6.405V8.78c0 1.334-.788 1.72-1.25 1.72a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5z"/><path d="M12 5a2 2 0 100-4 2 2 0 000 4zM6.898 12.872a.75.75 0 00-1.296.756A2.773 2.773 0 008 15c1.023 0 1.918-.55 2.398-1.372a.75.75 0 00-1.296-.756c-.219.374-.63.628-1.102.628-.473 0-.883-.254-1.102-.628z"/></g></svg>');
-}
-
-%bell-active-fill-24-svg-prop {
-  --bell-active-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M22.25 16.5c-1.231 0-2.25-1.046-2.25-2.35V8.983a7.54 7.54 0 00-.05-.872.75.75 0 00-.856-.655 4 4 0 01-4.402-5.185.75.75 0 00-.499-.948A7.643 7.643 0 0012 1C7.702 1 4 4.665 4 8.983v5.167c0 1.304-1.019 2.35-2.25 2.35a.75.75 0 000 1.5h20.5a.75.75 0 000-1.5z"/><path d="M18.5 6a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM10.42 20.414a.75.75 0 00-1.34.672C9.63 22.188 10.703 23 12 23c1.296 0 2.369-.812 2.92-1.914a.75.75 0 10-1.34-.672c-.347.691-.953 1.086-1.58 1.086-.627 0-1.233-.395-1.58-1.086z"/></g></svg>');
-}
-
-%bell-off-16-svg-prop {
-  --bell-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 2.5c-.546 0-1.033.12-1.457.326a.75.75 0 01-.655-1.35A4.802 4.802 0 018 1c3.093 0 5 2.665 5 5.405v1.78a.75.75 0 01-1.5 0v-1.78C11.5 4.275 10.062 2.5 8 2.5z"/><path fill-rule="evenodd" d="M3.343 4.404L1.22 2.28a.75.75 0 011.06-1.06l12.5 12.5a.75.75 0 11-1.06 1.06L10.94 12H1.75a.75.75 0 010-1.5c.462 0 1.25-.386 1.25-1.72V6.405c0-.691.118-1.37.343-2.001zM9.44 10.5H4.113c.242-.468.387-1.043.387-1.72V6.405c0-.264.023-.524.067-.777L9.439 10.5z" clip-rule="evenodd"/><path d="M5.872 12.602a.75.75 0 011.026.27c.219.374.63.628 1.102.628.473 0 .883-.254 1.102-.628a.75.75 0 011.296.756A2.773 2.773 0 018 15a2.773 2.773 0 01-2.398-1.372.75.75 0 01.27-1.026z"/></g></svg>');
-}
-
-%bell-off-24-svg-prop {
-  --bell-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 2.5c-1.4 0-2.734.487-3.83 1.31a.75.75 0 01-.9-1.2C8.602 1.609 10.247 1 12 1c4.298 0 8 3.665 8 7.983v5.167c0 .173.018.341.052.504a.75.75 0 11-1.467.31 3.939 3.939 0 01-.085-.814V8.983C18.5 5.5 15.476 2.5 12 2.5z"/><path fill-rule="evenodd" d="M4.71 5.77L1.22 2.28a.75.75 0 011.06-1.06l20.5 20.5a.75.75 0 11-1.06 1.06L16.94 18H1.75a.75.75 0 010-1.5C2.981 16.5 4 15.454 4 14.15V8.983c0-1.136.257-2.225.71-3.212zM15.44 16.5H4.717a3.917 3.917 0 00.782-2.35V8.983c0-.714.127-1.408.36-2.062l9.58 9.579z" clip-rule="evenodd"/><path d="M9.414 20.08a.75.75 0 011.007.334c.346.691.952 1.086 1.579 1.086s1.233-.395 1.58-1.086a.75.75 0 111.34.672C14.37 22.188 13.297 23 12 23c-1.296 0-2.369-.812-2.92-1.914a.75.75 0 01.334-1.007z"/></g></svg>');
-}
-
-%bitbucket-16-svg-prop {
-  --bitbucket-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1.403 2.15A.43.43 0 011.73 2l12.54.002a.43.43 0 01.424.496l-1.81 11.135a.43.43 0 01-.425.36H3.693a.585.585 0 01-.568-.478l-1.82-11.02a.425.425 0 01.098-.345zm5.203 7.814H9.41l.677-3.93H5.859l.747 3.93z" clip-rule="evenodd"/></svg>');
-}
-
-%bitbucket-24-svg-prop {
-  --bitbucket-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2.153 3.225A.64.64 0 012.643 3l18.715.003a.64.64 0 01.634.744L19.289 20.45a.644.644 0 01-.634.54H5.572a.874.874 0 01-.847-.717L2.008 3.743a.64.64 0 01.145-.518zm7.765 11.722h4.187l1.011-5.897H8.804l1.114 5.897z" clip-rule="evenodd"/></svg>');
-}
-
-%bitbucket-color-16-svg-prop {
-  --bitbucket-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%232684FF" fill-rule="evenodd" d="M1.403 2.15A.43.43 0 011.73 2l12.54.002a.43.43 0 01.424.496l-1.81 11.135a.43.43 0 01-.425.36H3.693a.585.585 0 01-.568-.478l-1.82-11.02a.425.425 0 01.098-.345zm5.203 7.814H9.41l.677-3.93H5.859l.747 3.93z" clip-rule="evenodd"/><path fill="url(%23bitbucket-color-16__paint0_linear_707_135)" d="M14.122 6.033H10.1l-.67 3.931H6.604L3.317 13.86c.105.09.238.139.376.14h8.766a.43.43 0 00.425-.36l1.238-7.607z"/><defs><linearGradient id="bitbucket-color-16__paint0_linear_707_135" x1="11.544" x2="6.918" y1="4.676" y2="11.282" gradientUnits="userSpaceOnUse"><stop offset=".18" stop-color="%230052CC"/><stop offset="1" stop-color="%232684FF"/></linearGradient></defs></svg>');
-}
-
-%bitbucket-color-24-svg-prop {
-  --bitbucket-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%232684FF" fill-rule="evenodd" d="M2.153 3.225A.64.64 0 012.643 3l18.715.003a.64.64 0 01.634.744L19.289 20.45a.644.644 0 01-.634.54H5.572a.874.874 0 01-.847-.717L2.008 3.743a.64.64 0 01.145-.518zm7.765 11.722h4.187l1.011-5.897H8.804l1.114 5.897z" clip-rule="evenodd"/><path fill="url(%23bitbucket-color-24__paint0_linear_707_129)" d="M21.138 9.05h-6.005l-1.001 5.897H9.918L5.011 20.79a.871.871 0 00.56.21h13.085c.315 0 .583-.23.634-.54l1.848-11.41z"/><defs><linearGradient id="bitbucket-color-24__paint0_linear_707_129" x1="17.29" x2="10.339" y1="7.014" y2="16.89" gradientUnits="userSpaceOnUse"><stop offset=".18" stop-color="%230052CC"/><stop offset="1" stop-color="%232684FF"/></linearGradient></defs></svg>');
-}
-
-%bolt-svg-prop {
-  @extend %zap-16-svg-prop;
-}
-
-%bookmark-16-svg-prop {
-  --bookmark-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2 3.25A2.25 2.25 0 014.25 1h7.5A2.25 2.25 0 0114 3.25v10.83a1 1 0 01-1.478.878L8.12 12.564a.25.25 0 00-.238 0l-4.403 2.394A1 1 0 012 14.08V3.25zm2.25-.75a.75.75 0 00-.75.75v9.989l3.664-1.992a1.75 1.75 0 011.672 0l3.664 1.992V3.25a.75.75 0 00-.75-.75h-7.5z" clip-rule="evenodd"/></svg>');
-}
-
-%bookmark-24-svg-prop {
-  --bookmark-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4 4.75A2.75 2.75 0 016.75 2h10.5A2.75 2.75 0 0120 4.75v16.376a1 1 0 01-1.382.924l-6.522-2.699a.25.25 0 00-.192 0L5.382 22.05A1 1 0 014 21.126V4.75zM6.75 3.5c-.69 0-1.25.56-1.25 1.25v15.628l5.83-2.413a1.75 1.75 0 011.34 0l5.83 2.413V4.75c0-.69-.56-1.25-1.25-1.25H6.75z" clip-rule="evenodd"/></svg>');
-}
-
-%bookmark-add-16-svg-prop {
-  --bookmark-add-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 4a.75.75 0 01.75.75V6h1.25a.75.75 0 010 1.5H8.5v1.25a.75.75 0 01-1.5 0V7.5H5.75a.75.75 0 010-1.5H7V4.75A.75.75 0 017.75 4z"/><path fill-rule="evenodd" d="M2 3.25A2.25 2.25 0 014.25 1h7.5A2.25 2.25 0 0114 3.25v10.83a1 1 0 01-1.478.878L8.12 12.564a.25.25 0 00-.238 0l-4.403 2.394A1 1 0 012 14.08V3.25zm2.25-.75a.75.75 0 00-.75.75v9.989l3.664-1.992a1.75 1.75 0 011.672 0l3.664 1.992V3.25a.75.75 0 00-.75-.75h-7.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%bookmark-add-24-svg-prop {
-  --bookmark-add-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 7a.75.75 0 01.75.75V10h2.25a.75.75 0 010 1.5H12.5v2.25a.75.75 0 01-1.5 0V11.5H8.75a.75.75 0 010-1.5H11V7.75a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M4 4.75A2.75 2.75 0 016.75 2h10.5A2.75 2.75 0 0120 4.75v16.376a1 1 0 01-1.382.924l-6.522-2.699a.25.25 0 00-.192 0L5.382 22.05A1 1 0 014 21.126V4.75zM6.75 3.5c-.69 0-1.25.56-1.25 1.25v15.628l5.83-2.413a1.75 1.75 0 011.34 0l5.83 2.413V4.75c0-.69-.56-1.25-1.25-1.25H6.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%bookmark-add-fill-16-svg-prop {
-  --bookmark-add-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.25 1A2.25 2.25 0 002 3.25v10.83a1 1 0 001.478.878l4.403-2.394a.25.25 0 01.238 0l4.403 2.394A1 1 0 0014 14.08V3.25A2.25 2.25 0 0011.75 1h-7.5zM7 4.75a.75.75 0 011.5 0V6h1.25a.75.75 0 010 1.5H8.5v1.25a.75.75 0 01-1.5 0V7.5H5.75a.75.75 0 010-1.5H7V4.75z" clip-rule="evenodd"/></svg>');
-}
-
-%bookmark-add-fill-24-svg-prop {
-  --bookmark-add-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4 4.75A2.75 2.75 0 016.75 2h10.5A2.75 2.75 0 0120 4.75v16.376a1 1 0 01-1.382.924l-6.522-2.699a.25.25 0 00-.192 0L5.382 22.05A1 1 0 014 21.126V4.75zM11.75 7a.75.75 0 00-.75.75V10H8.75a.75.75 0 000 1.5H11v2.25a.75.75 0 001.5 0V11.5h2.25a.75.75 0 000-1.5H12.5V7.75a.75.75 0 00-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%bookmark-fill-16-svg-prop {
-  --bookmark-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M4.25 1A2.25 2.25 0 002 3.25v10.83a1 1 0 001.478.878l4.403-2.394a.25.25 0 01.238 0l4.403 2.394A1 1 0 0014 14.08V3.25A2.25 2.25 0 0011.75 1h-7.5z"/></svg>');
-}
-
-%bookmark-fill-24-svg-prop {
-  --bookmark-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M6.75 2A2.75 2.75 0 004 4.75v16.376a1 1 0 001.382.924l6.522-2.699a.25.25 0 01.192 0l6.522 2.699A1 1 0 0020 21.126V4.75A2.75 2.75 0 0017.25 2H6.75z"/></svg>');
-}
-
-%bookmark-remove-16-svg-prop {
-  --bookmark-remove-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.75 6a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z"/><path fill-rule="evenodd" d="M4.25 1A2.25 2.25 0 002 3.25v10.83a1 1 0 001.478.878l4.403-2.394a.25.25 0 01.238 0l4.403 2.394A1 1 0 0014 14.08V3.25A2.25 2.25 0 0011.75 1h-7.5zM3.5 3.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v9.989l-3.664-1.992a1.75 1.75 0 00-1.672 0L3.5 13.239V3.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%bookmark-remove-24-svg-prop {
-  --bookmark-remove-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.75 10a.75.75 0 000 1.5h6a.75.75 0 000-1.5h-6z"/><path fill-rule="evenodd" d="M6.75 2A2.75 2.75 0 004 4.75v16.376a1 1 0 001.382.924l6.522-2.699a.25.25 0 01.192 0l6.522 2.699A1 1 0 0020 21.126V4.75A2.75 2.75 0 0017.25 2H6.75zM5.5 4.75c0-.69.56-1.25 1.25-1.25h10.5c.69 0 1.25.56 1.25 1.25v15.628l-5.83-2.413a1.75 1.75 0 00-1.34 0L5.5 20.378V4.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%bookmark-remove-fill-16-svg-prop {
-  --bookmark-remove-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2 3.25A2.25 2.25 0 014.25 1h7.5A2.25 2.25 0 0114 3.25v10.83a1 1 0 01-1.478.878L8.12 12.564a.25.25 0 00-.238 0l-4.403 2.394A1 1 0 012 14.08V3.25zM5.75 6a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z" clip-rule="evenodd"/></svg>');
-}
-
-%bookmark-remove-fill-24-svg-prop {
-  --bookmark-remove-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4 4.75A2.75 2.75 0 016.75 2h10.5A2.75 2.75 0 0120 4.75v16.376a1 1 0 01-1.382.924l-6.522-2.699a.25.25 0 00-.192 0L5.382 22.05A1 1 0 014 21.126V4.75zM8.75 10a.75.75 0 000 1.5h6a.75.75 0 000-1.5h-6z" clip-rule="evenodd"/></svg>');
-}
-
-%bottom-16-svg-prop {
-  --bottom-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 1a.75.75 0 01.75.75v7.614l2.955-3.129a.75.75 0 011.09 1.03l-4.25 4.5a.747.747 0 01-.533.235h-.024a.747.747 0 01-.51-.211l-.004-.005a.862.862 0 01-.02-.02l-4.25-4.499a.75.75 0 011.091-1.03L7 9.364V1.75A.75.75 0 017.75 1zM2.5 13.5a.75.75 0 000 1.5H13a.75.75 0 000-1.5H2.5z"/></g></svg>');
-}
-
-%bottom-24-svg-prop {
-  --bottom-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 2a.75.75 0 01.75.75v12.638l4.96-5.158a.75.75 0 111.08 1.04l-6.25 6.5a.75.75 0 01-1.08 0l-6.25-6.5a.75.75 0 111.08-1.04L11 15.388V2.75a.75.75 0 01.75-.75zM3.5 20.5a.75.75 0 000 1.5H20a.75.75 0 000-1.5H3.5z"/></g></svg>');
-}
-
-%boundary-16-svg-prop {
-  --boundary-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.81 15v-1.085h2.25v-.67H5.968v-1.093h5.149L8.726 8l2.392-4.154H5.84v5.76H3V1h9.775l1.631 2.832L12.006 8l2.448 4.252L12.872 15H4.81z"/><path d="M5.248 12.152h-1.09v1.092h1.09v-1.092zM3 13.907h1.09v1.092H3v-1.092z"/></g></svg>');
-}
-
-%boundary-24-svg-prop {
-  --boundary-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.586 22v-1.55H9.8v-.958H8.241v-1.56h7.356L12.18 12l3.417-5.934H8.058v8.229H4V2h13.964l2.33 4.046L16.866 12l3.498 6.074L18.103 22H6.586z"/><path d="M7.21 17.932H5.656v1.56H7.21v-1.56zM4 20.438h1.556v1.56H4v-1.56z"/></g></svg>');
-}
-
-%boundary-color-16-svg-prop {
-  --boundary-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23F24C53"><path d="M4.81 15v-1.085h2.25v-.67H5.968v-1.093h5.149L8.726 8l2.392-4.154H5.84v5.76H3V1h9.775l1.631 2.832L12.006 8l2.448 4.252L12.872 15H4.81z"/><path d="M5.248 12.152h-1.09v1.092h1.09v-1.092zM4.09 13.907H3v1.092h1.09v-1.092z"/></g></svg>');
-}
-
-%boundary-color-24-svg-prop {
-  --boundary-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23F24C53"><path d="M6.586 22v-1.55H9.8v-.958H8.241v-1.56h7.356L12.18 12l3.417-5.934H8.058v8.229H4V2h13.964l2.33 4.046L16.866 12l3.498 6.074L18.103 22H6.586z"/><path d="M7.21 17.932H5.656v1.56H7.21v-1.56zM5.556 20.438H4v1.56h1.556v-1.56z"/></g></svg>');
-}
-
-%box-16-svg-prop {
-  --box-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.98.678a2.25 2.25 0 012.04 0l5.297 2.696c.42.214.683.644.683 1.114v6.717c0 .658-.37 1.261-.956 1.56L9.02 15.322a2.25 2.25 0 01-2.042 0l-5.023-2.557A1.75 1.75 0 011 11.205V4.488c0-.47.264-.9.683-1.114L6.979.678zm1.36 1.337a.75.75 0 00-.68 0L3.224 4.273 8 6.661l4.776-2.388L8.34 2.015zm-5.84 9.19V5.588l4.75 2.375v5.814l-4.613-2.35a.25.25 0 01-.137-.222zm6.25 2.572l4.613-2.35a.25.25 0 00.137-.222V5.588L8.75 7.963v5.814z" clip-rule="evenodd"/></svg>');
-}
-
-%box-24-svg-prop {
-  --box-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.206.754a2.75 2.75 0 00-2.412 0L1.983 5.052A1.75 1.75 0 001 6.625v9.902a2.75 2.75 0 001.496 2.448l8.25 4.226a2.75 2.75 0 002.508 0l8.25-4.226A2.75 2.75 0 0023 16.527V6.625a1.75 1.75 0 00-.983-1.573L13.206.754zm-1.754 1.348a1.25 1.25 0 011.096 0l8.11 3.956L12 10.17 3.343 6.058l8.109-3.956zM2.5 7.318v9.21c0 .468.263.898.68 1.112l8.07 4.133V11.474L2.5 7.318zm10.25 14.455l8.07-4.133a1.25 1.25 0 00.68-1.113v-9.21l-8.75 4.157v10.3z" clip-rule="evenodd"/></svg>');
-}
-
-%box-check-fill-svg-prop {
-  @extend %check-square-fill-16-svg-prop;
-}
-
-%box-outline-svg-prop {
-  @extend %square-16-svg-prop;
-}
-
-%briefcase-16-svg-prop {
-  --briefcase-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.75 1A1.75 1.75 0 004 2.75V4H2.25A2.25 2.25 0 000 6.25v6.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-6.5A2.25 2.25 0 0013.75 4H12V2.75A1.75 1.75 0 0010.25 1h-4.5zm6.75 12.5h1.25a.75.75 0 00.75-.75v-6.5a.75.75 0 00-.75-.75H12.5v8zm-1.5-8v8H5v-8h6zm-7.5 8v-8H2.25a.75.75 0 00-.75.75v6.5c0 .414.336.75.75.75H3.5zm7-9.5V2.75a.25.25 0 00-.25-.25h-4.5a.25.25 0 00-.25.25V4h5z" clip-rule="evenodd"/></svg>');
-}
-
-%briefcase-24-svg-prop {
-  --briefcase-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.75 2A2.75 2.75 0 007 4.75V6H3.75A2.75 2.75 0 001 8.75v10.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V8.75A2.75 2.75 0 0020.25 6H17V4.75A2.75 2.75 0 0014.25 2h-4.5zm6.75 5.5h-9v13h9v-13zm1.5 13v-13h2.25c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H18zM3.75 7.5H6v13H3.75c-.69 0-1.25-.56-1.25-1.25V8.75c0-.69.56-1.25 1.25-1.25zM15.5 6V4.75c0-.69-.56-1.25-1.25-1.25h-4.5c-.69 0-1.25.56-1.25 1.25V6h7z" clip-rule="evenodd"/></svg>');
-}
-
-%broadcast-svg-prop {
-  @extend %radio-16-svg-prop;
-}
-
-%bug-16-svg-prop {
-  --bug-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.136.803a.75.75 0 011.061 1.06l-.415.416C11.525 2.932 12 3.853 12 4.909c0 .103-.005.205-.014.306.094.016.173.03.238.045a.973.973 0 01.776.951V6.6l1.571-.629a.75.75 0 01.557 1.393L13 8.214v1.13l1.849.246a.75.75 0 11-.198 1.487l-1.659-.221a3.935 3.935 0 01-.426 1.555l2.364.887a.75.75 0 01-.527 1.404l-2.667-1a.752.752 0 01-.12-.058C10.687 14.491 9.384 15 8 15s-2.687-.509-3.616-1.356a.752.752 0 01-.12.058l-2.667 1a.75.75 0 11-.527-1.404l2.364-.887a3.935 3.935 0 01-.426-1.555l-1.659.22a.75.75 0 01-.198-1.486L3 9.343V8.174L.971 7.363a.75.75 0 01.557-1.393L3 6.56V6.21c0-.474.334-.854.776-.95.065-.015.144-.03.238-.046C4.004 5.114 4 5.012 4 4.909c0-1.056.475-1.977 1.218-2.63l-.415-.415A.75.75 0 015.863.803l.695.694a4.318 4.318 0 012.884 0l.694-.694zm-4.63 4.26C6.133 5.026 6.946 5 8 5c1.054 0 1.867.026 2.494.063.004-.051.006-.102.006-.154C10.5 3.793 9.461 2.75 8 2.75S5.5 3.793 5.5 4.91c0 .05.002.102.006.153zM4.5 7.652v-.994C5.043 6.586 6.093 6.5 8 6.5s2.957.086 3.5.158v3.949c0 1.494-1.454 2.893-3.5 2.893-2.046 0-3.5-1.4-3.5-2.893v-.59-2.335-.03z" clip-rule="evenodd"/></svg>');
-}
-
-%bug-24-svg-prop {
-  --bug-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M15.72 1.22a.75.75 0 111.06 1.06l-1.176 1.177a4.597 4.597 0 011.293 4.256c.612.071 1.008.147 1.258.208.54.133.845.61.845 1.089v1.408l2.987-1.12a.75.75 0 01.526 1.404L19 12.02v2.318l3.343.418a.75.75 0 11-.186 1.488L19 15.85v.4c0 .931-.195 1.816-.545 2.62l3.808 1.428a.75.75 0 01-.526 1.404l-4-1.5a.754.754 0 01-.046-.019C16.415 21.894 14.332 23 12 23s-4.415-1.106-5.69-2.817a.775.775 0 01-.047.02l-4 1.5a.75.75 0 11-.526-1.405l3.808-1.429A6.523 6.523 0 015 16.25v-.4l-3.157.394a.75.75 0 01-.186-1.488L5 14.338V12.02l-3.513-1.318a.75.75 0 01.526-1.404L5 10.418V9.01c0-.479.305-.956.845-1.089.25-.06.646-.137 1.258-.208a4.597 4.597 0 011.293-4.256L7.22 2.28a.75.75 0 011.06-1.06L9.63 2.568A5.196 5.196 0 0112 2c.852 0 1.661.205 2.371.568L15.72 1.22zM8.617 7.586A58.06 58.06 0 0112 7.5c1.4 0 2.508.035 3.383.086.076-.266.117-.547.117-.836 0-1.753-1.524-3.25-3.5-3.25S8.5 4.997 8.5 6.75c0 .29.04.57.117.836zM6.5 11.485v-2.17C7.198 9.188 8.772 9 12 9s4.802.187 5.5.316v6.934c0 2.87-2.433 5.25-5.5 5.25s-5.5-2.38-5.5-5.25v-1.234-3.5-.031z" clip-rule="evenodd"/></svg>');
-}
-
-%bug-svg-prop {
-  @extend %bug-16-svg-prop;
-}
-
-%build-16-svg-prop {
-  --build-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.603 2.549A4.251 4.251 0 005.47 8.696a1.076 1.076 0 01-.255 1.312l-3 2.374a.75.75 0 01-.93-1.176l2.701-2.139A5.75 5.75 0 019.47 1.004c.53.02.924.363 1.066.797.137.42.035.902-.306 1.243L8.75 4.523v1.596l1.13 1.13h1.597l1.48-1.479a1.22 1.22 0 011.241-.306c.435.142.778.537.798 1.066a5.75 5.75 0 01-7.978 5.52l-2.102 2.664a.75.75 0 01-1.177-.928l2.333-2.959a1.076 1.076 0 011.297-.265 4.251 4.251 0 006.082-3.165L12.41 8.438c-.199.2-.47.312-.75.312h-1.96c-.282 0-.552-.112-.751-.312L7.56 7.052c-.2-.2-.311-.47-.311-.751V4.34c0-.281.112-.551.311-.75l1.042-1.042z" clip-rule="evenodd"/></svg>');
-}
-
-%build-24-svg-prop {
-  --build-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M14.05 2.5a7.45 7.45 0 00-6.625 10.86 1.284 1.284 0 01-.29 1.556l-4.92 3.894a.75.75 0 01-.93-1.176l4.727-3.743a8.95 8.95 0 019.013-12.839c1.1.12 1.369 1.403.703 2.068L12.75 6.1v3.016l2.135 2.134H17.9l2.979-2.978c.665-.666 1.948-.396 2.067.703a8.95 8.95 0 01-12.704 9.078l-3.677 4.663a.75.75 0 01-1.178-.93l3.827-4.851a.763.763 0 01.059-.066 1.284 1.284 0 011.478-.236 7.45 7.45 0 0010.746-6.859l-2.606 2.607c-.237.236-.558.37-.893.37h-3.212c-.335 0-.657-.133-.893-.37l-2.274-2.274a1.262 1.262 0 01-.37-.893V6c0-.335.133-.656.37-.892l2.605-2.606a7.62 7.62 0 00-.175-.002z" clip-rule="evenodd"/></svg>');
-}
-
-%calendar-16-svg-prop {
-  --calendar-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z" clip-rule="evenodd"/></svg>');
-}
-
-%calendar-24-svg-prop {
-  --calendar-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M17 1a.75.75 0 00-1.5 0v1h-7V1A.75.75 0 007 1v1H4.75A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H17V1zm3.5 7V4.75c0-.69-.56-1.25-1.25-1.25H17V5a.75.75 0 01-1.5 0V3.5h-7V5A.75.75 0 017 5V3.5H4.75c-.69 0-1.25.56-1.25 1.25V8h17zm-17 1.5h17v9.75c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V9.5z" clip-rule="evenodd"/></svg>');
-}
-
-%calendar-svg-prop {
-  @extend %calendar-16-svg-prop;
-}
-
-%camera-16-svg-prop {
-  --camera-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3 6a1 1 0 011-1h.01a1 1 0 010 2H4a1 1 0 01-1-1z"/><path fill-rule="evenodd" d="M8 5a3 3 0 100 6 3 3 0 000-6zM6.5 8a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M5.056 1.696A1.25 1.25 0 016.176 1h3.648c.475 0 .91.27 1.12.696l.54 1.093 1.457.124A2.25 2.25 0 0115 5.155v6.595A2.25 2.25 0 0112.75 14h-9.5A2.25 2.25 0 011 11.75V5.155a2.25 2.25 0 012.059-2.242l1.456-.124.541-1.093zm1.276.804l-.66 1.333a.75.75 0 01-.608.414l-1.878.16a.75.75 0 00-.686.748v6.595c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V5.155a.75.75 0 00-.686-.748l-1.878-.16a.75.75 0 01-.608-.414L9.668 2.5H6.332z" clip-rule="evenodd"/></g></svg>');
-}
-
-%camera-24-svg-prop {
-  --camera-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M7 13a5 5 0 1110 0 5 5 0 01-10 0zm5-3.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z" clip-rule="evenodd"/><path d="M5 8a1 1 0 000 2h.01a1 1 0 000-2H5z"/><path fill-rule="evenodd" d="M7.557 2.912A1.75 1.75 0 019.094 2h5.812c.64 0 1.23.35 1.537.912l1.014 1.859 2.924.14A2.75 2.75 0 0123 7.656V19.25A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25V7.657A2.75 2.75 0 013.62 4.91l2.923-.14 1.014-1.858zm1.537.588a.25.25 0 00-.22.13L7.658 5.86a.75.75 0 01-.622.39l-3.345.158A1.25 1.25 0 002.5 7.657V19.25c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V7.657a1.25 1.25 0 00-1.19-1.249l-3.346-.159a.75.75 0 01-.622-.39L15.126 3.63a.25.25 0 00-.22-.13H9.094z" clip-rule="evenodd"/></g></svg>');
-}
-
-%camera-off-16-svg-prop {
-  --camera-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1.22 1.22a.75.75 0 011.06 0l12.5 12.5a.75.75 0 11-1.06 1.06l-.78-.78H3.25A2.25 2.25 0 011 11.75V5.155a2.25 2.25 0 011.138-1.957L1.22 2.28a.75.75 0 010-1.06zm8.304 9.364l1.915 1.916H3.25a.75.75 0 01-.75-.75V5.155a.75.75 0 01.686-.748l.148-.012 2.081 2.081a3 3 0 004.108 4.108zM8.389 9.45L6.55 7.611A1.5 1.5 0 008.389 9.45z" clip-rule="evenodd"/><path d="M5.866 1h3.958c.475 0 .91.27 1.12.696l.54 1.093 1.457.124A2.25 2.25 0 0115 5.155v5.595a.75.75 0 01-1.5 0V5.155a.75.75 0 00-.686-.748l-1.878-.16a.75.75 0 01-.608-.414L9.668 2.5H5.866a.75.75 0 010-1.5z"/></g></svg>');
-}
-
-%camera-off-24-svg-prop {
-  --camera-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5 8a1 1 0 000 2h.01a1 1 0 100-2H5z"/><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06l2.615 2.616-.221.01A2.75 2.75 0 001 7.654V19.25A2.75 2.75 0 003.75 22h17.19l.78.78a.75.75 0 101.06-1.06L2.28 1.22zM19.44 20.5l-3.935-3.934a5 5 0 01-7.07-7.07l-3.17-3.17-1.577.079A1.25 1.25 0 002.5 7.653V19.25c0 .69.56 1.25 1.25 1.25h15.69zm-9.945-9.944l4.95 4.949a3.5 3.5 0 01-4.95-4.95z" clip-rule="evenodd"/><path d="M9.094 2c-.64 0-1.23.35-1.537.912l-.421.773a.75.75 0 101.317.718l.421-.773a.25.25 0 01.22-.13h5.812a.25.25 0 01.22.13l1.216 2.23a.75.75 0 00.622.39l3.346.158a1.25 1.25 0 011.19 1.249V18.5a.75.75 0 001.5 0V7.657a2.75 2.75 0 00-2.62-2.747l-2.923-.14-1.014-1.858A1.75 1.75 0 0014.906 2H9.094z"/><path d="M12.345 8.698a.75.75 0 01.915-.538 5.007 5.007 0 013.58 3.58.75.75 0 01-1.452.377 3.507 3.507 0 00-2.505-2.505.75.75 0 01-.538-.914z"/></g></svg>');
-}
-
-%cancel-circle-fill-svg-prop {
-  @extend %x-circle-fill-16-svg-prop;
-}
-
-%cancel-circle-outline-svg-prop {
-  @extend %x-circle-16-svg-prop;
-}
-
-%cancel-plain-svg-prop {
-  @extend %x-16-svg-prop;
-}
-
-%cancel-square-fill-svg-prop {
-  @extend %x-square-fill-16-svg-prop;
-}
-
-%cancel-square-outline-svg-prop {
-  @extend %x-square-16-svg-prop;
-}
-
-%caret-16-svg-prop {
-  --caret-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.55 2.24a.75.75 0 00-1.1 0L4.2 5.74a.75.75 0 101.1 1.02L8 3.852l2.7 2.908a.75.75 0 101.1-1.02l-3.25-3.5zM7.45 13.76a.75.75 0 001.1 0l3.25-3.5a.75.75 0 10-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 00-1.1 1.02l3.25 3.5z"/></g></svg>');
-}
-
-%caret-24-svg-prop {
-  --caret-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.543 3.232a.75.75 0 00-1.085 0l-5.25 5.5a.75.75 0 101.085 1.036L12 4.836l4.707 4.932a.75.75 0 001.085-1.036l-5.25-5.5zM11.457 20.768a.75.75 0 001.085 0l5.25-5.5a.75.75 0 00-1.085-1.036L12 19.164l-4.707-4.932a.75.75 0 00-1.086 1.036l5.25 5.5z"/></g></svg>');
-}
-
-%caret-down-svg-prop {
-  @extend %caret-16-svg-prop;
-}
-
-%caret-up-svg-prop {
-  @extend %chevron-up-16-svg-prop;
-}
-
-%cast-16-svg-prop {
-  --cast-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.25 2A2.25 2.25 0 001 4.25v1.23a.75.75 0 001.5 0V4.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75H9.724a.75.75 0 000 1.5h3.026A2.25 2.25 0 0015 11.75v-7.5A2.25 2.25 0 0012.75 2h-9.5z"/><path d="M1.833 7.505a.75.75 0 10-.166 1.49 4.91 4.91 0 014.338 4.338.75.75 0 101.49-.166 6.41 6.41 0 00-5.662-5.662z"/><path d="M1.9 10.062a.75.75 0 00-.3 1.47A2.394 2.394 0 013.468 13.4a.75.75 0 101.47-.3A3.894 3.894 0 001.9 10.062z"/></g></svg>');
-}
-
-%cast-24-svg-prop {
-  --cast-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 3A2.75 2.75 0 001 5.75V8a.75.75 0 001.5 0V5.75c0-.69.56-1.25 1.25-1.25h16.5c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25H14a.75.75 0 000 1.5h6.25A2.75 2.75 0 0023 18.25V5.75A2.75 2.75 0 0020.25 3H3.75z"/><path d="M1.833 11.005a.75.75 0 10-.166 1.49 8.873 8.873 0 017.838 7.838.75.75 0 101.49-.166 10.373 10.373 0 00-9.162-9.162zM1.9 15.345a.75.75 0 00-.3 1.47A4.596 4.596 0 015.185 20.4a.75.75 0 001.47-.3A6.096 6.096 0 001.9 15.345z"/></g></svg>');
-}
-
-%certificate-16-svg-prop {
-  --certificate-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.25 3.25A.75.75 0 017 2.5h2A.75.75 0 019 4H7a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v9.5A2.25 2.25 0 003.25 14h1.67l-.115.913a.7.7 0 00.955.737L8 14.754l2.24.896a.7.7 0 00.955-.737L11.08 14h1.669A2.25 2.25 0 0015 11.75v-9.5A2.25 2.25 0 0012.75 0h-9.5zm7.643 12.5h1.857a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-9.5a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h1.857l.172-1.378a3.45 3.45 0 115.441 0l.173 1.378zm-1.456-.362c-.438.2-.924.312-1.437.312s-1-.112-1.437-.312l-.221 1.771 1.398-.559a.7.7 0 01.52 0l1.398.56-.221-1.772zM5.95 9a2.05 2.05 0 114.1 0 2.05 2.05 0 01-4.1 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%certificate-24-svg-prop {
-  --certificate-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10 5a.75.75 0 000 1.5h4A.75.75 0 0014 5h-4z"/><path fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v14.5A2.75 2.75 0 005.75 21h1.485l-.22 1.103a.75.75 0 001.054.826L12 21.079l3.93 1.85a.75.75 0 001.055-.826L16.765 21h1.485A2.75 2.75 0 0021 18.25V3.75A2.75 2.75 0 0018.25 1H5.75zm2.438 15.236L7.535 19.5H5.75c-.69 0-1.25-.56-1.25-1.25V3.75c0-.69.56-1.25 1.25-1.25h12.5c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25h-1.785l-.653-3.264a5 5 0 10-7.624 0zm6.219-.695a.75.75 0 01.135-.135 3.5 3.5 0 10-5.084 0c.051.04.096.085.135.135A3.488 3.488 0 0012 16.5c.932 0 1.78-.364 2.407-.959zM12 18a4.977 4.977 0 01-2.501-.67l-.722 3.608 2.904-1.367a.75.75 0 01.638 0l2.904 1.367-.722-3.608c-.736.426-1.59.67-2.501.67z" clip-rule="evenodd"/></g></svg>');
-}
-
-%change-16-svg-prop {
-  --change-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.721 8.453c-.27-.087-.658-.324-1.135-.921-.595-.745-1.211-1.21-1.852-1.414a2.434 2.434 0 00-1.743.094c-.472.206-.842.522-1.095.778a5.881 5.881 0 00-.382.427l-.025.029-.024.029a.75.75 0 001.064 1.057 3.3 3.3 0 00.2-.229c.065-.078.143-.166.233-.257.185-.188.399-.359.627-.458a.936.936 0 01.69-.04c.27.086.658.323 1.135.92.595.745 1.211 1.21 1.852 1.414a2.434 2.434 0 001.743-.094c.472-.206.841-.522 1.095-.778.129-.13.235-.252.313-.344l.069-.082a4.562 4.562 0 01.05-.059.75.75 0 00-1.065-1.057 3.292 3.292 0 00-.2.229 4.393 4.393 0 01-.233.257 2.102 2.102 0 01-.627.458.936.936 0 01-.69.04z" clip-rule="evenodd"/></svg>');
-}
-
-%change-24-svg-prop {
-  --change-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.534 12.224c-.082.104-.155.195-.219.269a.75.75 0 11-1.13-.986c.02-.023.053-.066.097-.123.308-.404 1.183-1.548 2.442-2.08a3.783 3.783 0 012.699-.106c1.003.324 2.05 1.056 3.142 2.31.98 1.122 1.81 1.652 2.473 1.866a2.285 2.285 0 001.654-.06c.837-.354 1.402-1.068 1.774-1.538.082-.104.155-.195.219-.269a.75.75 0 011.13.986c-.02.023-.053.066-.097.123-.308.404-1.183 1.548-2.442 2.08a3.783 3.783 0 01-2.699.106c-1.003-.324-2.05-1.056-3.142-2.31-.98-1.122-1.81-1.652-2.473-1.866a2.284 2.284 0 00-1.654.06c-.837.354-1.402 1.068-1.774 1.538z" clip-rule="evenodd"/></svg>');
-}
-
-%change-circle-16-svg-prop {
-  --change-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.586 7.532c.477.597.864.834 1.135.92a.936.936 0 00.69-.04c.228-.1.442-.27.627-.458.09-.09.168-.18.234-.257l.03-.036c.048-.058.12-.143.17-.193a.75.75 0 011.062 1.06l-.023.026-.025.03-.07.082a5.846 5.846 0 01-.312.344c-.253.256-.623.572-1.095.778a2.434 2.434 0 01-1.743.094c-.64-.204-1.257-.67-1.852-1.414-.477-.597-.864-.834-1.135-.92a.936.936 0 00-.69.04c-.228.1-.442.27-.627.458-.09.09-.168.18-.234.257l-.03.036a3.3 3.3 0 01-.17.193.75.75 0 01-1.063-1.057l.024-.03.025-.028.07-.083c.077-.092.183-.214.312-.344.253-.256.623-.572 1.095-.777a2.434 2.434 0 011.743-.095c.64.204 1.257.67 1.852 1.414z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%change-circle-24-svg-prop {
-  --change-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.071 12.486c.056-.065.116-.143.182-.229.284-.366.677-.874 1.264-1.128a1.5 1.5 0 011.117-.041c.46.152 1.064.539 1.795 1.398.84.988 1.66 1.583 2.465 1.85a2.998 2.998 0 002.185-.089c1.012-.438 1.715-1.388 1.933-1.682.028-.038.048-.066.06-.08a.75.75 0 00-1.143-.97 6.64 6.64 0 00-.182.227c-.284.367-.677.875-1.264 1.129a1.5 1.5 0 01-1.117.041c-.46-.152-1.064-.539-1.795-1.398-.84-.988-1.66-1.584-2.465-1.85a2.998 2.998 0 00-2.185.089c-1.012.438-1.715 1.388-1.933 1.682-.028.038-.048.066-.06.08a.75.75 0 101.143.97z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%change-square-16-svg-prop {
-  --change-square-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.586 7.532c.477.597.864.834 1.135.92a.936.936 0 00.69-.04c.228-.1.442-.27.627-.458.09-.09.168-.18.234-.257l.03-.036c.048-.058.12-.143.17-.193a.75.75 0 011.062 1.06l-.023.026-.025.03-.07.082a5.846 5.846 0 01-.312.344c-.253.256-.623.572-1.095.778a2.434 2.434 0 01-1.743.094c-.64-.204-1.257-.67-1.852-1.414-.477-.597-.864-.834-1.135-.92a.936.936 0 00-.69.04c-.228.1-.442.27-.627.458-.09.09-.168.18-.234.257l-.03.036a3.3 3.3 0 01-.17.193.75.75 0 01-1.063-1.057l.001-.002.023-.027.025-.03.07-.082c.077-.092.183-.214.312-.344.253-.256.623-.572 1.095-.777a2.434 2.434 0 011.743-.095c.64.204 1.257.67 1.852 1.414z"/><path fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zM2.5 3.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%change-square-24-svg-prop {
-  --change-square-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.071 12.486c.056-.065.116-.143.182-.229.284-.366.677-.874 1.264-1.128a1.5 1.5 0 011.117-.041c.46.152 1.064.539 1.795 1.398.84.988 1.66 1.583 2.465 1.85a2.998 2.998 0 002.185-.089c1.012-.438 1.715-1.388 1.933-1.682.028-.038.048-.066.06-.08a.75.75 0 00-1.143-.97 6.64 6.64 0 00-.182.227c-.284.367-.677.875-1.264 1.129a1.5 1.5 0 01-1.117.041c-.46-.152-1.064-.539-1.795-1.398-.84-.988-1.66-1.584-2.465-1.85a2.998 2.998 0 00-2.185.089c-1.012.438-1.715 1.388-1.933 1.682a2.056 2.056 0 01-.06.08.75.75 0 101.143.97z"/><path fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V4.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%check-16-svg-prop {
-  --check-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M14.78 4.28a.75.75 0 00-1.06-1.06l-7.97 7.97-3.47-3.47a.75.75 0 00-1.06 1.06l4 4a.75.75 0 001.06 0l8.5-8.5z"/></svg>');
-}
-
-%check-24-svg-prop {
-  --check-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M21.78 6.28a.75.75 0 00-1.06-1.06L8.75 17.19l-5.47-5.47a.75.75 0 00-1.06 1.06l6 6a.75.75 0 001.06 0l12.5-12.5z"/></svg>');
-}
-
-%check-circle-16-svg-prop {
-  --check-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.78 5.22a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%check-circle-24-svg-prop {
-  --check-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M17.78 8.22a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 6.97-6.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%check-circle-fill-16-svg-prop {
-  --check-circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm2.72 5.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97z" clip-rule="evenodd"/></svg>');
-}
-
-%check-circle-fill-24-svg-prop {
-  --check-circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm4.72 7.22a.75.75 0 111.06 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 6.97-6.97z" clip-rule="evenodd"/></svg>');
-}
-
-%check-circle-fill-svg-prop {
-  @extend %check-circle-fill-16-svg-prop;
-}
-
-%check-circle-outline-svg-prop {
-  @extend %check-circle-16-svg-prop;
-}
-
-%check-diamond-16-svg-prop {
-  --check-diamond-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.28 5.72a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.47-3.47a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M.75 6.41L6.407.752a2.25 2.25 0 013.182 0l5.657 5.656a2.25 2.25 0 010 3.182l-5.657 5.657a2.25 2.25 0 01-3.182 0L.75 9.591a2.25 2.25 0 010-3.182zm6.718-4.597L1.81 7.47a.75.75 0 000 1.06l5.657 5.657a.75.75 0 001.06 0l5.657-5.656a.75.75 0 000-1.061L8.528 1.813a.75.75 0 00-1.06 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%check-diamond-24-svg-prop {
-  --check-diamond-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.28 8.72a.75.75 0 010 1.06l-5.5 5.5a.75.75 0 01-1.06 0l-2.5-2.5a.75.75 0 011.06-1.06l1.97 1.97 4.97-4.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M1.884 10.056l8.171-8.172a2.75 2.75 0 013.89 0l8.171 8.172a2.75 2.75 0 010 3.889l-8.171 8.171a2.75 2.75 0 01-3.89 0l-8.171-8.171a2.75 2.75 0 010-3.89zm9.232-7.111l-8.172 8.171a1.25 1.25 0 000 1.768l8.172 8.172a1.25 1.25 0 001.768 0l8.171-8.172a1.25 1.25 0 000-1.768l-8.171-8.171a1.25 1.25 0 00-1.768 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%check-diamond-fill-16-svg-prop {
-  --check-diamond-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.57.752a2.25 2.25 0 00-3.183 0L.73 6.41a2.25 2.25 0 000 3.182l5.657 5.657a2.25 2.25 0 003.182 0l5.657-5.657a2.25 2.25 0 000-3.182L9.569.752zm1.71 6.028l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.47-3.47a.75.75 0 011.06 1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%check-diamond-fill-24-svg-prop {
-  --check-diamond-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.945 1.884a2.75 2.75 0 00-3.89 0l-8.171 8.172a2.75 2.75 0 000 3.889l8.171 8.171a2.75 2.75 0 003.89 0l8.171-8.171a2.75 2.75 0 000-3.89l-8.171-8.17zM16.28 9.78l-5.5 5.5a.75.75 0 01-1.06 0l-2.5-2.5a.75.75 0 111.06-1.06l1.97 1.97 4.97-4.97a.75.75 0 011.06 1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%check-hexagon-16-svg-prop {
-  --check-hexagon-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.28 5.72a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.47-3.47a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M6.834.33a2.25 2.25 0 012.332 0l5.25 3.182A2.25 2.25 0 0115.5 5.436v5.128a2.25 2.25 0 01-1.084 1.924l-5.25 3.182a2.25 2.25 0 01-2.332 0l-5.25-3.182A2.25 2.25 0 01.5 10.564V5.436a2.25 2.25 0 011.084-1.924L6.834.33zm1.555 1.283a.75.75 0 00-.778 0l-5.25 3.181A.75.75 0 002 5.436v5.128a.75.75 0 00.361.642l5.25 3.181a.75.75 0 00.778 0l5.25-3.181a.75.75 0 00.361-.642V5.436a.75.75 0 00-.361-.642l-5.25-3.181z" clip-rule="evenodd"/></g></svg>');
-}
-
-%check-hexagon-24-svg-prop {
-  --check-hexagon-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.28 8.72a.75.75 0 010 1.06l-5.5 5.5a.75.75 0 01-1.06 0l-2.5-2.5a.75.75 0 111.06-1.06l1.97 1.97 4.97-4.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M10.559 1.006a2.75 2.75 0 012.882 0l7.75 4.77A2.75 2.75 0 0122.5 8.118v7.764a2.75 2.75 0 01-1.309 2.342l-7.75 4.77a2.75 2.75 0 01-2.882 0l-7.75-4.77A2.75 2.75 0 011.5 15.882V8.118a2.75 2.75 0 011.309-2.342l7.75-4.77zm2.096 1.278a1.25 1.25 0 00-1.31 0l-7.75 4.77A1.25 1.25 0 003 8.117v7.764c0 .435.225.838.595 1.065l7.75 4.77a1.25 1.25 0 001.31 0l7.75-4.77c.37-.227.595-.63.595-1.065V8.118a1.25 1.25 0 00-.595-1.065l-7.75-4.77z" clip-rule="evenodd"/></g></svg>');
-}
-
-%check-hexagon-fill-16-svg-prop {
-  --check-hexagon-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.166.33a2.25 2.25 0 00-2.332 0l-5.25 3.182A2.25 2.25 0 00.5 5.436v5.128a2.25 2.25 0 001.084 1.924l5.25 3.182a2.25 2.25 0 002.332 0l5.25-3.182a2.25 2.25 0 001.084-1.924V5.436a2.25 2.25 0 00-1.084-1.924L9.166.33zm1.054 5.39a.75.75 0 111.06 1.06l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.47-3.47z" clip-rule="evenodd"/></svg>');
-}
-
-%check-hexagon-fill-24-svg-prop {
-  --check-hexagon-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.441 1.006a2.75 2.75 0 00-2.882 0l-7.75 4.77a2.75 2.75 0 00-1.31 2.342v7.764a2.75 2.75 0 001.31 2.342l7.75 4.77a2.75 2.75 0 002.882 0l7.75-4.77a2.75 2.75 0 001.309-2.342V8.118a2.75 2.75 0 00-1.309-2.342l-7.75-4.77zm2.84 8.774l-5.5 5.5a.75.75 0 01-1.061 0l-2.5-2.5a.75.75 0 111.06-1.06l1.97 1.97 4.97-4.97a.75.75 0 111.06 1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%check-plain-svg-prop {
-  @extend %check-16-svg-prop;
-}
-
-%check-square-16-svg-prop {
-  --check-square-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.78 5.22a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-9.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%check-square-24-svg-prop {
-  --check-square-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M17.78 8.22a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 6.97-6.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%check-square-fill-16-svg-prop {
-  --check-square-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zm7.47 4.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97z" clip-rule="evenodd"/></svg>');
-}
-
-%check-square-fill-24-svg-prop {
-  --check-square-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zm11.97 6.22a.75.75 0 111.06 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 6.97-6.97z" clip-rule="evenodd"/></svg>');
-}
-
-%chevron-down-16-svg-prop {
-  --chevron-down-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.235 5.205a.75.75 0 011.06.03L8 9.158l3.705-3.923a.75.75 0 011.09 1.03l-4.25 4.5a.75.75 0 01-1.09 0l-4.25-4.5a.75.75 0 01.03-1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%chevron-down-24-svg-prop {
-  --chevron-down-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.23 8.21a.75.75 0 011.06.02L12 14.168l5.71-5.938a.75.75 0 111.08 1.04l-6.25 6.5a.75.75 0 01-1.08 0l-6.25-6.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%chevron-down-svg-prop {
-  @extend %chevron-down-16-svg-prop;
-}
-
-%chevron-left-16-svg-prop {
-  --chevron-left-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.795 3.235a.75.75 0 01-.03 1.06L6.842 8l3.923 3.705a.75.75 0 01-1.03 1.09l-4.5-4.25a.75.75 0 010-1.09l4.5-4.25a.75.75 0 011.06.03z" clip-rule="evenodd"/></svg>');
-}
-
-%chevron-left-24-svg-prop {
-  --chevron-left-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M15.79 18.77a.75.75 0 00-.02-1.06L9.832 12l5.938-5.71a.75.75 0 10-1.04-1.08l-6.5 6.25a.75.75 0 000 1.08l6.5 6.25a.75.75 0 001.06-.02z" clip-rule="evenodd"/></svg>');
-}
-
-%chevron-left-svg-prop {
-  @extend %chevron-left-16-svg-prop;
-}
-
-%chevron-right-16-svg-prop {
-  --chevron-right-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.205 3.235a.75.75 0 00.03 1.06L9.158 8l-3.923 3.705a.75.75 0 001.03 1.09l4.5-4.25a.75.75 0 000-1.09l-4.5-4.25a.75.75 0 00-1.06.03z" clip-rule="evenodd"/></svg>');
-}
-
-%chevron-right-24-svg-prop {
-  --chevron-right-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.21 18.77a.75.75 0 01.02-1.06L14.168 12 8.23 6.29a.75.75 0 111.04-1.08l6.5 6.25a.75.75 0 010 1.08l-6.5 6.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/></svg>');
-}
-
-%chevron-right-svg-prop {
-  @extend %chevron-right-16-svg-prop;
-}
-
-%chevron-up-16-svg-prop {
-  --chevron-up-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.235 10.795a.75.75 0 001.06-.03L8 6.842l3.705 3.923a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 00.03 1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%chevron-up-24-svg-prop {
-  --chevron-up-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.23 15.79a.75.75 0 001.06-.02L12 9.832l5.71 5.938a.75.75 0 101.08-1.04l-6.25-6.5a.75.75 0 00-1.08 0l-6.25 6.5a.75.75 0 00.02 1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%chevron-up-svg-prop {
-  @extend %chevron-up-16-svg-prop;
-}
-
-%chevrons-down-16-svg-prop {
-  --chevrons-down-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.3 3.24a.75.75 0 00-1.1 1.02l3.25 3.5a.75.75 0 001.1 0l3.25-3.5a.75.75 0 10-1.1-1.02L8 6.148 5.3 3.24z"/><path d="M5.3 8.24a.75.75 0 10-1.1 1.02l3.25 3.5a.75.75 0 001.1 0l3.25-3.5a.75.75 0 10-1.1-1.02L8 11.148 5.3 8.24z"/></g></svg>');
-}
-
-%chevrons-down-24-svg-prop {
-  --chevrons-down-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.293 5.232a.75.75 0 00-1.086 1.036l5.25 5.5a.75.75 0 001.085 0l5.25-5.5a.75.75 0 10-1.085-1.036L12 10.164 7.293 5.232z"/><path d="M7.293 12.232a.75.75 0 00-1.086 1.036l5.25 5.5a.75.75 0 001.085 0l5.25-5.5a.75.75 0 00-1.085-1.036L12 17.164l-4.707-4.932z"/></g></svg>');
-}
-
-%chevrons-left-16-svg-prop {
-  --chevrons-left-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.76 5.3a.75.75 0 00-1.02-1.1l-3.5 3.25a.75.75 0 000 1.1l3.5 3.25a.75.75 0 101.02-1.1L4.852 8 7.76 5.3z"/><path d="M12.76 5.3a.75.75 0 10-1.02-1.1l-3.5 3.25a.75.75 0 000 1.1l3.5 3.25a.75.75 0 101.02-1.1L9.852 8l2.908-2.7z"/></g></svg>');
-}
-
-%chevrons-left-24-svg-prop {
-  --chevrons-left-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.768 16.707a.75.75 0 01-1.036 1.085l-5.5-5.25a.75.75 0 010-1.085l5.5-5.25a.75.75 0 011.036 1.086L6.836 12l4.932 4.707z"/><path d="M18.768 16.707a.75.75 0 01-1.036 1.085l-5.5-5.25a.75.75 0 010-1.085l5.5-5.25a.75.75 0 011.036 1.086L13.836 12l4.932 4.707z"/></g></svg>');
-}
-
-%chevrons-right-16-svg-prop {
-  --chevrons-right-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.24 5.3a.75.75 0 011.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1L6.148 8 3.24 5.3z"/><path d="M8.24 5.3a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1L11.148 8 8.24 5.3z"/></g></svg>');
-}
-
-%chevrons-right-24-svg-prop {
-  --chevrons-right-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5.232 16.707a.75.75 0 001.036 1.085l5.5-5.25a.75.75 0 000-1.085l-5.5-5.25a.75.75 0 00-1.036 1.086L10.164 12l-4.932 4.707z"/><path d="M12.232 16.707a.75.75 0 001.036 1.085l5.5-5.25a.75.75 0 000-1.085l-5.5-5.25a.75.75 0 00-1.036 1.086L17.164 12l-4.932 4.707z"/></g></svg>');
-}
-
-%chevrons-up-16-svg-prop {
-  --chevrons-up-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5a.75.75 0 011.1 0l3.25 3.5a.75.75 0 11-1.1 1.02L8 4.852 5.3 7.76z"/><path d="M5.3 12.76a.75.75 0 11-1.1-1.02l3.25-3.5a.75.75 0 011.1 0l3.25 3.5a.75.75 0 11-1.1 1.02L8 9.852 5.3 12.76z"/></g></svg>');
-}
-
-%chevrons-up-24-svg-prop {
-  --chevrons-up-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.293 11.768a.75.75 0 01-1.086-1.036l5.25-5.5a.75.75 0 011.085 0l5.25 5.5a.75.75 0 01-1.085 1.036L12 6.836l-4.707 4.932z"/><path d="M7.293 18.768a.75.75 0 01-1.086-1.036l5.25-5.5a.75.75 0 011.085 0l5.25 5.5a.75.75 0 01-1.085 1.036L12 13.836l-4.707 4.932z"/></g></svg>');
-}
-
-%circle-16-svg-prop {
-  --circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z" clip-rule="evenodd"/></svg>');
-}
-
-%circle-24-svg-prop {
-  --circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19zM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12z" clip-rule="evenodd"/></svg>');
-}
-
-%circle-dot-16-svg-prop {
-  --circle-dot-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 3a5 5 0 100 10A5 5 0 008 3z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%circle-dot-24-svg-prop {
-  --circle-dot-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 5a7 7 0 100 14 7 7 0 000-14z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%circle-fill-16-svg-prop {
-  --circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 0a8 8 0 100 16A8 8 0 008 0z"/></svg>');
-}
-
-%circle-fill-24-svg-prop {
-  --circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1z"/></svg>');
-}
-
-%circle-half-16-svg-prop {
-  --circle-half-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm0 1.5v13a6.5 6.5 0 100-13z" clip-rule="evenodd"/></svg>');
-}
-
-%circle-half-24-svg-prop {
-  --circle-half-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm0 1.5v19a9.5 9.5 0 000-19z" clip-rule="evenodd"/></svg>');
-}
-
-%clipboard-16-svg-prop {
-  --clipboard-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.975 1h.775A2.25 2.25 0 0115 3.25v10.5A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V3.25A2.25 2.25 0 013.25 1h.775c.116-.57.62-1 1.225-1h5.5c.605 0 1.11.43 1.225 1zM4 2.5h-.75a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V3.25a.75.75 0 00-.75-.75H12v.25C12 3.44 11.44 4 10.75 4h-5.5C4.56 4 4 3.44 4 2.75V2.5zm1.5 0v-1h5v1h-5z" clip-rule="evenodd"/></svg>');
-}
-
-%clipboard-24-svg-prop {
-  --clipboard-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.75 1A1.75 1.75 0 007 2.75V3H5.75A2.75 2.75 0 003 5.75v14.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V5.75A2.75 2.75 0 0018.25 3H17v-.25A1.75 1.75 0 0015.25 1h-6.5zm8.232 3.5A1.75 1.75 0 0115.25 6h-6.5a1.75 1.75 0 01-1.732-1.5H5.75c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25h-1.268zM8.5 2.75a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25v-1.5z" clip-rule="evenodd"/></svg>');
-}
-
-%clipboard-checked-16-svg-prop {
-  --clipboard-checked-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.975 1h.775A2.25 2.25 0 0115 3.25v10.5A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V3.25A2.25 2.25 0 013.25 1h.775c.116-.57.62-1 1.225-1h5.5c.605 0 1.11.43 1.225 1zM5.5 2.5v-1h5v1h-5zm6.28 3.72a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z" clip-rule="evenodd"/></svg>');
-}
-
-%clipboard-checked-24-svg-prop {
-  --clipboard-checked-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.75 1A1.75 1.75 0 007 2.75V3H5.75A2.75 2.75 0 003 5.75v14.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V5.75A2.75 2.75 0 0018.25 3H17v-.25A1.75 1.75 0 0015.25 1h-6.5zM8.5 2.75a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25v-1.5zm8.28 7.47a.75.75 0 00-1.06 0l-5.47 5.47-1.97-1.97a.75.75 0 00-1.06 1.06l2.5 2.5a.75.75 0 001.06 0l6-6a.75.75 0 000-1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%clipboard-copy-16-svg-prop {
-  --clipboard-copy-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M3.25 2.5H4v.25C4 3.44 4.56 4 5.25 4h5.5C11.44 4 12 3.44 12 2.75V2.5h.75a.75.75 0 01.75.75v3a.75.75 0 001.5 0v-3A2.25 2.25 0 0012.75 1h-.775c-.116-.57-.62-1-1.225-1h-5.5c-.605 0-1.11.43-1.225 1H3.25A2.25 2.25 0 001 3.25v10.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75v-1a.75.75 0 00-1.5 0v1a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V3.25a.75.75 0 01.75-.75zm2.25-1v1h5v-1h-5z" clip-rule="evenodd"/><path d="M4.75 5.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3zM4 12.25a.75.75 0 01.75-.75h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zM4.75 8.5a.75.75 0 000 1.5h2a.75.75 0 000-1.5h-2zM16 9.25a.75.75 0 01-.75.75h-4.19l1.22 1.22a.75.75 0 11-1.06 1.06l-2.5-2.5a.752.752 0 010-1.06l2.5-2.5a.75.75 0 111.06 1.06L11.06 8.5h4.19a.75.75 0 01.75.75z"/></g></svg>');
-}
-
-%clipboard-copy-24-svg-prop {
-  --clipboard-copy-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M8.75 1A1.75 1.75 0 007 2.75V3H5.75A2.75 2.75 0 003 5.75v14.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V5.75c0-.69.56-1.25 1.25-1.25h1.268c.121.848.85 1.5 1.732 1.5h6.5a1.75 1.75 0 001.732-1.5h1.268c.69 0 1.25.56 1.25 1.25v4.5a.75.75 0 001.5 0v-4.5A2.75 2.75 0 0018.25 3H17v-.25A1.75 1.75 0 0015.25 1h-6.5zM8.5 2.75a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25v-1.5z" clip-rule="evenodd"/><path d="M7 9.75A.75.75 0 017.75 9h4.5a.75.75 0 010 1.5h-4.5A.75.75 0 017 9.75zM7 17.75a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zM7.75 13a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5zM22.75 14a.75.75 0 01-.75.75h-6.34l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.747.747 0 01-.24-.533v-.034a.748.748 0 01.227-.521l.014-.013L16.74 10.2a.75.75 0 111.02 1.1l-2.1 1.95H22a.75.75 0 01.75.75z"/></g></svg>');
-}
-
-%clock-16-svg-prop {
-  --clock-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%clock-24-svg-prop {
-  --clock-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.5 5.75a.75.75 0 00-1.5 0V12c0 .284.16.544.415.67l4.5 2.25a.75.75 0 10.67-1.34L12.5 11.536V5.75z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%clock-fill-svg-prop {
-  @extend %clock-16-svg-prop;
-}
-
-%clock-outline-svg-prop {
-  @extend %clock-16-svg-prop;
-}
-
-%cloud-16-svg-prop {
-  --cloud-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.932 2.373a6.041 6.041 0 016.239 1.28 5.998 5.998 0 011.505 2.284h.28c1.071 0 2.1.424 2.858 1.18a4.025 4.025 0 010 5.703A4.051 4.051 0 0111.955 14H6.026a6.037 6.037 0 01-3.186-.906 6.008 6.008 0 01-2.223-2.448 5.982 5.982 0 01.644-6.32 6.02 6.02 0 012.67-1.953zm.526 1.405a4.52 4.52 0 00-2.013 1.47 4.488 4.488 0 001.186 6.572c.716.444 1.542.68 2.386.68h5.938c.676 0 1.324-.268 1.8-.742a2.524 2.524 0 000-3.578 2.551 2.551 0 00-1.8-.743h-.83a.75.75 0 01-.726-.561A4.496 4.496 0 009.14 4.74a4.541 4.541 0 00-4.681-.963z" clip-rule="evenodd"/></svg>');
-}
-
-%cloud-24-svg-prop {
-  --cloud-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.836 3.558a8.864 8.864 0 014.895-.373 8.906 8.906 0 014.356 2.297 9.009 9.009 0 012.325 3.705h.726a5.84 5.84 0 014.147 1.733A5.929 5.929 0 0124 15.094a5.929 5.929 0 01-1.715 4.174A5.84 5.84 0 0118.138 21H8.929a8.878 8.878 0 01-4.721-1.361 8.976 8.976 0 01-3.295-3.675 9.062 9.062 0 01.953-9.47 8.934 8.934 0 013.97-2.936zm.509 1.41a7.434 7.434 0 00-3.289 2.439 7.562 7.562 0 00-.795 7.9 7.475 7.475 0 002.745 3.062 7.378 7.378 0 003.93 1.131h9.202a4.34 4.34 0 003.082-1.288 4.429 4.429 0 001.28-3.118c0-1.17-.461-2.292-1.28-3.118a4.34 4.34 0 00-3.082-1.289h-1.289a.75.75 0 01-.726-.563 7.515 7.515 0 00-2.074-3.56 7.407 7.407 0 00-3.623-1.91 7.364 7.364 0 00-4.081.314z" clip-rule="evenodd"/></svg>');
-}
-
-%cloud-check-16-svg-prop {
-  --cloud-check-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.932 1.373a6.041 6.041 0 016.239 1.28 5.998 5.998 0 011.505 2.284h.28c1.071 0 2.1.424 2.858 1.18a4.025 4.025 0 01-.665 6.239.75.75 0 01-.812-1.262 2.524 2.524 0 00.418-3.914 2.551 2.551 0 00-1.8-.742h-.83a.75.75 0 01-.726-.562A4.496 4.496 0 009.14 3.74a4.541 4.541 0 00-4.688-.96 4.52 4.52 0 00-2.006 1.466 4.488 4.488 0 00.386 5.942.75.75 0 01-1.055 1.066 5.982 5.982 0 01-.515-7.928 6.02 6.02 0 012.67-1.954z"/><path d="M11.78 9.22a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 111.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z"/></g></svg>');
-}
-
-%cloud-check-24-svg-prop {
-  --cloud-check-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.026 1.046a8.87 8.87 0 014.152.57 8.932 8.932 0 013.436 2.412 9.017 9.017 0 011.802 3.16h.726a5.84 5.84 0 013.698 1.326 5.914 5.914 0 012.037 3.374 5.945 5.945 0 01-.528 3.91 5.882 5.882 0 01-2.858 2.705.75.75 0 01-.606-1.372 4.381 4.381 0 002.129-2.016c.46-.9.599-1.932.394-2.923a4.413 4.413 0 00-1.52-2.518 4.338 4.338 0 00-2.746-.987h-1.288a.75.75 0 01-.727-.564 7.521 7.521 0 00-1.639-3.104 7.431 7.431 0 00-2.859-2.008 7.37 7.37 0 00-6.734.692 7.472 7.472 0 00-2.4 2.549 7.55 7.55 0 00-.338 6.832 7.49 7.49 0 002.138 2.777.75.75 0 01-.941 1.168 8.99 8.99 0 01-2.566-3.333 9.06 9.06 0 01.404-8.189 8.971 8.971 0 012.883-3.06 8.888 8.888 0 013.951-1.4z"/><path d="M17.78 14.22a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 6.97-6.97a.75.75 0 011.06 0z"/></g></svg>');
-}
-
-%cloud-cross-svg-prop {
-  --cloud-cross-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 23 20" xmlns="http://www.w3.org/2000/svg"><path d="M12 13.586l3-3L16.414 12l-3 3 3 3L15 19.414l-3-3-3 3L7.586 18l3-3-2.75-2.75 1.414-1.414 2.75 2.75zM13.905.856c2.706.498 4.595 2.544 4.816 5.64l.234.066c2.46.754 3.884 2.79 3.5 5.036-.445 2.592-2.083 4.371-5.876 4.371v-2c5.054 0 4.868-5.46.23-6.152.242-2.277-1.278-4.628-3.267-4.995-1.789-.33-3.757.564-4.572 2.164-1.629-.727-2.605-.345-3.442.362-.836.706-.527 2.194-.225 2.823-1.089.915-1.901 2.013-2.152 2.987-.101.395-.091 1.014 0 1.212.428.928 1.016 1.6 4.403 1.6v2c-4.117 0-5.672-.96-6.448-2.874-.652-1.61.137-3.457 1.882-5.118-.544-1.734.01-3.297 1.391-4.267a4.89 4.89 0 013.689-.77C9.222 1.26 11.603.431 13.905.855z" fill="%236F7682" fill-rule="nonzero"/></svg>');
-}
-
-%cloud-download-16-svg-prop {
-  --cloud-download-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.235 1.123a6.041 6.041 0 00-3.303.25A6.02 6.02 0 001.26 3.326a5.988 5.988 0 00.515 7.929.75.75 0 001.055-1.066 4.482 4.482 0 01-.386-5.942A4.52 4.52 0 014.451 2.78a4.541 4.541 0 014.688.961 4.496 4.496 0 011.26 2.135.75.75 0 00.726.561h.83c.676 0 1.324.268 1.8.743a2.524 2.524 0 01-.418 3.914.75.75 0 00.812 1.262 4.024 4.024 0 00.665-6.239 4.051 4.051 0 00-2.859-1.18h-.28a5.998 5.998 0 00-1.504-2.285 6.028 6.028 0 00-2.936-1.529z"/><path d="M8 7.25a.75.75 0 01.75.75v4.44l1.47-1.47a.75.75 0 111.06 1.06l-2.75 2.75a.75.75 0 01-1.06 0l-2.75-2.75a.75.75 0 111.06-1.06l1.47 1.47V8A.75.75 0 018 7.25z"/></g></svg>');
-}
-
-%cloud-download-24-svg-prop {
-  --cloud-download-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.178 1.615a8.87 8.87 0 00-8.103.832 8.971 8.971 0 00-2.883 3.06 9.05 9.05 0 00-.404 8.189 8.99 8.99 0 002.566 3.333.75.75 0 10.94-1.168 7.49 7.49 0 01-2.137-2.777 7.56 7.56 0 01.338-6.832 7.472 7.472 0 012.4-2.549 7.37 7.37 0 016.734-.692 7.431 7.431 0 012.859 2.008 7.521 7.521 0 011.64 3.104.75.75 0 00.726.564h1.288c1 .001 1.97.35 2.746.987a4.413 4.413 0 011.52 2.518 4.444 4.444 0 01-.394 2.923c-.46.9-1.212 1.61-2.13 2.016a.75.75 0 00.607 1.372 5.882 5.882 0 002.858-2.705 5.945 5.945 0 00.527-3.91 5.914 5.914 0 00-2.036-3.374 5.84 5.84 0 00-3.698-1.327h-.726a9.017 9.017 0 00-1.802-3.159 8.932 8.932 0 00-3.436-2.413z"/><path d="M12 22h.012a.747.747 0 00.533-.235l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V12.75a.75.75 0 00-1.5 0v6.614l-2.955-3.129a.75.75 0 00-1.09 1.03l4.248 4.498a.748.748 0 00.535.237H12z"/></g></svg>');
-}
-
-%cloud-lightning-16-svg-prop {
-  --cloud-lightning-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.235 1.123a6.041 6.041 0 00-3.303.25A6.02 6.02 0 001.26 3.326a5.988 5.988 0 00.515 7.929.75.75 0 001.055-1.066 4.482 4.482 0 01-.386-5.942A4.52 4.52 0 014.451 2.78a4.541 4.541 0 014.688.961 4.496 4.496 0 011.26 2.135.75.75 0 00.726.561h.83c.676 0 1.324.268 1.8.743a2.524 2.524 0 01-.418 3.914.75.75 0 00.812 1.262 4.024 4.024 0 00.665-6.239 4.051 4.051 0 00-2.859-1.18h-.28a5.998 5.998 0 00-1.504-2.285 6.028 6.028 0 00-2.936-1.529z"/><path d="M9.053 7.257a.75.75 0 00-1.106-1.014l-2.75 3a.75.75 0 00.316 1.218l3.403 1.135-1.969 2.147a.75.75 0 001.106 1.014l2.75-3a.75.75 0 00-.316-1.218L7.084 9.404l1.969-2.147z"/></g></svg>');
-}
-
-%cloud-lightning-24-svg-prop {
-  --cloud-lightning-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.819 1.485a8.86 8.86 0 00-4.357-.363 8.892 8.892 0 00-4.004 1.765A8.99 8.99 0 00.766 6.353a9.065 9.065 0 00.649 8.509 8.958 8.958 0 003.187 3.01.75.75 0 00.731-1.309 7.457 7.457 0 01-2.653-2.507 7.565 7.565 0 01-.54-7.1A7.49 7.49 0 014.381 4.07 7.392 7.392 0 017.711 2.6a7.36 7.36 0 013.618.302 7.421 7.421 0 013.046 1.999 7.522 7.522 0 011.744 3.22.75.75 0 00.727.565c1.732 0 3.082.103 4.213 1.134a4.44 4.44 0 01.589 5.888 4.356 4.356 0 01-2.643 1.702.75.75 0 00.302 1.47 5.857 5.857 0 003.553-2.288 5.94 5.94 0 00-.79-7.88c-1.427-1.3-3.094-1.495-4.66-1.522a9.017 9.017 0 00-1.93-3.304 8.92 8.92 0 00-3.662-2.402z"/><path d="M14.031 11.03a.75.75 0 10-1.062-1.06l-4.75 4.77a.75.75 0 00.31 1.246l5.372 1.653-3.956 4.357a.75.75 0 001.11 1.008l4.75-5.23a.75.75 0 00-.334-1.222l-5.313-1.634 3.873-3.889z"/></g></svg>');
-}
-
-%cloud-lock-16-svg-prop {
-  --cloud-lock-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.235 1.123a6.041 6.041 0 00-3.303.25A6.02 6.02 0 001.26 3.326a5.988 5.988 0 00-.404 6.76.75.75 0 101.286-.774 4.49 4.49 0 01-.62-2.766 4.488 4.488 0 01.922-2.3A4.52 4.52 0 014.451 2.78a4.541 4.541 0 014.688.961 4.496 4.496 0 011.26 2.135.75.75 0 00.726.561h.83c.676 0 1.324.268 1.8.743a2.524 2.524 0 01.451 2.969.75.75 0 101.326.702 4.02 4.02 0 00-.718-4.734 4.051 4.051 0 00-2.859-1.18h-.28a5.998 5.998 0 00-1.504-2.285 6.028 6.028 0 00-2.936-1.529zM8.75 12.25a.75.75 0 00-1.5 0v.5a.75.75 0 001.5 0v-.5z"/><path fill-rule="evenodd" d="M5.518 9.012c.035-.627.13-1.235.366-1.738.174-.37.435-.704.816-.94C7.08 6.101 7.52 6 8 6c.48 0 .921.1 1.3.334.381.236.642.57.816.94.236.503.331 1.111.366 1.738A2.25 2.25 0 0112.5 11.25v2.5A2.25 2.25 0 0110.25 16h-4.5a2.25 2.25 0 01-2.25-2.25v-2.5a2.25 2.25 0 012.018-2.238zM7.022 9c.032-.481.102-.838.22-1.087a.662.662 0 01.245-.302c.09-.055.243-.111.513-.111s.423.056.513.111c.087.054.17.141.246.302.117.249.187.606.219 1.087H7.022zm3.228 1.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-2.5a.75.75 0 01.75-.75h4.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%cloud-lock-24-svg-prop {
-  --cloud-lock-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.178 1.615a8.87 8.87 0 00-8.103.832 8.971 8.971 0 00-2.883 3.06 9.05 9.05 0 00-.404 8.189c.386.863 1.302 2.042 1.848 2.665a.75.75 0 101.129-.987c-.533-.609-1.32-1.645-1.608-2.29a7.56 7.56 0 01.338-6.832 7.472 7.472 0 012.4-2.549 7.37 7.37 0 016.734-.692 7.431 7.431 0 012.859 2.008 7.521 7.521 0 011.64 3.104.75.75 0 00.726.564h1.288c1 .001 1.97.35 2.746.987a4.413 4.413 0 011.52 2.518 4.444 4.444 0 01-.394 2.923 4.394 4.394 0 01-1.37 1.585.75.75 0 00.867 1.224 5.895 5.895 0 001.838-2.126 5.945 5.945 0 00.527-3.91 5.914 5.914 0 00-2.036-3.374 5.84 5.84 0 00-3.698-1.327h-.726a9.017 9.017 0 00-1.802-3.159 8.932 8.932 0 00-3.436-2.413zM12.75 18.75a.75.75 0 00-1.5 0v.5a.75.75 0 001.5 0v-.5z"/><path fill-rule="evenodd" d="M8 14.014v-.93c0-1.078.417-2.114 1.165-2.881A3.96 3.96 0 0112 9a3.96 3.96 0 012.835 1.203A4.127 4.127 0 0116 13.083v.93a2.25 2.25 0 012 2.237v4.5A2.25 2.25 0 0115.75 23h-7.5A2.25 2.25 0 016 20.75v-4.5a2.25 2.25 0 012-2.236zM9.5 14v-.917c0-.69.268-1.35.739-1.833A2.46 2.46 0 0112 10.5c.657 0 1.29.267 1.761.75.471.483.739 1.142.739 1.833V14h-5zm6.25 1.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75v-4.5a.75.75 0 01.75-.75h7.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%cloud-off-16-svg-prop {
-  --cloud-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1.22 1.22a.75.75 0 011.06 0l12.5 12.5a.75.75 0 11-1.06 1.06l-1.11-1.11c-.258.053-.523.08-.791.08H6.094a5.907 5.907 0 01-3.085-.865A5.783 5.783 0 01.85 10.539a5.674 5.674 0 01-.57-3.117v-.004a5.701 5.701 0 011.196-2.943c.284-.361.61-.686.97-.968L1.22 2.28a.75.75 0 010-1.06zm2.297 3.357a4.299 4.299 0 00-.863.827 4.201 4.201 0 00-.882 2.165v.003a4.174 4.174 0 00.42 2.296c.356.713.91 1.315 1.6 1.737a4.407 4.407 0 002.298.645h5.099L3.517 4.577z" clip-rule="evenodd"/><path d="M6.38 2.954a.75.75 0 01.884-.586A5.87 5.87 0 0110.11 3.83 5.743 5.743 0 0111.564 6h.255a3.96 3.96 0 012.775 1.13 3.848 3.848 0 011.156 2.745c0 .409-.066.81-.19 1.193a.75.75 0 11-1.426-.468c.076-.232.116-.477.116-.725 0-.626-.253-1.228-.707-1.675a2.46 2.46 0 00-1.724-.7h-.802a.75.75 0 01-.725-.56 4.233 4.233 0 00-1.206-2.014 4.37 4.37 0 00-2.119-1.088.75.75 0 01-.587-.884z"/></g></svg>');
-}
-
-%cloud-off-24-svg-prop {
-  --cloud-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06l2.447 2.448a8.96 8.96 0 00-1.801 1.766 9.041 9.041 0 00-1.82 4.598v.003a9.064 9.064 0 00.867 4.87 8.975 8.975 0 003.294 3.674A8.873 8.873 0 008.934 21h9.2c.54 0 1.073-.075 1.585-.22l2 2a.75.75 0 101.061-1.06L2.28 1.22zm16.15 18.27L4.742 5.804c-.639.44-1.209.98-1.687 1.603a7.541 7.541 0 00-1.518 3.832v.003a7.564 7.564 0 00.723 4.066 7.475 7.475 0 002.744 3.06A7.374 7.374 0 008.923 19.5H18.133c.1 0 .198-.003.296-.01z" clip-rule="evenodd"/><path d="M9.702 3.003a.75.75 0 10-.133 1.494 7.394 7.394 0 014.16 1.757 7.51 7.51 0 012.387 3.867.75.75 0 00.727.566h.061c1.304 0 2.327 0 3.292.522.635.343 1.176.84 1.575 1.447a4.436 4.436 0 01.383 4.158.75.75 0 101.383.581 5.946 5.946 0 00-.512-5.563 5.879 5.879 0 00-2.116-1.943c-1.17-.632-2.393-.696-3.5-.701a9.005 9.005 0 00-2.704-4.072 8.894 8.894 0 00-5.003-2.113z"/></g></svg>');
-}
-
-%cloud-upload-16-svg-prop {
-  --cloud-upload-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.235 1.123a6.041 6.041 0 00-3.303.25A6.02 6.02 0 001.26 3.326a5.988 5.988 0 00.515 7.929.75.75 0 001.055-1.066 4.482 4.482 0 01-.386-5.942A4.52 4.52 0 014.451 2.78a4.541 4.541 0 014.688.961 4.496 4.496 0 011.26 2.135.75.75 0 00.726.561h.83c.676 0 1.324.268 1.8.743a2.524 2.524 0 01-.418 3.914.75.75 0 00.812 1.262 4.024 4.024 0 00.665-6.239 4.051 4.051 0 00-2.859-1.18h-.28a5.998 5.998 0 00-1.504-2.285 6.028 6.028 0 00-2.936-1.529z"/><path d="M4.72 11.28a.75.75 0 001.06 0l1.47-1.47v4.44a.75.75 0 001.5 0V9.81l1.47 1.47a.75.75 0 101.06-1.06L8.53 7.47l-.01-.01a.747.747 0 00-1.05.01l-2.75 2.75a.75.75 0 000 1.06z"/></g></svg>');
-}
-
-%cloud-upload-24-svg-prop {
-  --cloud-upload-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.178 1.615a8.87 8.87 0 00-8.103.832 8.971 8.971 0 00-2.883 3.06 9.05 9.05 0 00-.404 8.189 8.99 8.99 0 002.566 3.333.75.75 0 10.94-1.168 7.49 7.49 0 01-2.137-2.777 7.56 7.56 0 01.338-6.832 7.472 7.472 0 012.4-2.549 7.37 7.37 0 016.734-.692 7.431 7.431 0 012.859 2.008 7.521 7.521 0 011.64 3.104.75.75 0 00.726.564h1.288c1 .001 1.97.35 2.746.987a4.413 4.413 0 011.52 2.518 4.444 4.444 0 01-.394 2.923c-.46.9-1.212 1.61-2.13 2.016a.75.75 0 00.607 1.372 5.882 5.882 0 002.858-2.705 5.945 5.945 0 00.527-3.91 5.914 5.914 0 00-2.036-3.374 5.84 5.84 0 00-3.698-1.327h-.726a9.017 9.017 0 00-1.802-3.159 8.932 8.932 0 00-3.436-2.413z"/><path d="M7.235 17.795a.75.75 0 001.06-.03l2.955-3.129v6.614a.75.75 0 001.5 0v-6.614l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-.533-.235h-.024a.748.748 0 00-.535.237l-4.248 4.498a.75.75 0 00.03 1.06z"/></g></svg>');
-}
-
-%cloud-x-16-svg-prop {
-  --cloud-x-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.932 1.373a6.041 6.041 0 016.239 1.28 5.998 5.998 0 011.505 2.284h.28c1.071 0 2.1.424 2.858 1.18a4.025 4.025 0 01-.665 6.239.75.75 0 01-.812-1.262 2.524 2.524 0 00.418-3.914 2.551 2.551 0 00-1.8-.742h-.83a.75.75 0 01-.726-.562A4.496 4.496 0 009.14 3.74a4.541 4.541 0 00-4.688-.96 4.52 4.52 0 00-2.006 1.466 4.488 4.488 0 00.386 5.942.75.75 0 01-1.055 1.066 5.982 5.982 0 01-.515-7.928 6.02 6.02 0 012.67-1.954z"/><path d="M10.78 9.22a.75.75 0 010 1.06L9.06 12l1.72 1.72a.75.75 0 11-1.06 1.06L8 13.06l-1.72 1.72a.75.75 0 01-1.06-1.06L6.94 12l-1.72-1.72a.75.75 0 111.06-1.06L8 10.94l1.72-1.72a.75.75 0 011.06 0z"/></g></svg>');
-}
-
-%cloud-x-24-svg-prop {
-  --cloud-x-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.026 1.046a8.87 8.87 0 014.152.57 8.932 8.932 0 013.436 2.412 9.017 9.017 0 011.802 3.16h.726a5.84 5.84 0 013.698 1.326 5.914 5.914 0 012.037 3.374 5.945 5.945 0 01-.528 3.91 5.882 5.882 0 01-2.858 2.705.75.75 0 01-.606-1.372 4.381 4.381 0 002.129-2.016c.46-.9.599-1.932.394-2.923a4.413 4.413 0 00-1.52-2.518 4.338 4.338 0 00-2.746-.987h-1.288a.75.75 0 01-.727-.564 7.521 7.521 0 00-1.639-3.104 7.431 7.431 0 00-2.859-2.008 7.37 7.37 0 00-6.734.692 7.472 7.472 0 00-2.4 2.549 7.55 7.55 0 00-.338 6.832 7.49 7.49 0 002.138 2.777.75.75 0 01-.941 1.168 8.99 8.99 0 01-2.566-3.333 9.06 9.06 0 01.404-8.189 8.971 8.971 0 012.883-3.06 8.888 8.888 0 013.951-1.4z"/><path d="M8.22 14.22a.75.75 0 011.06 0L12 16.94l2.72-2.72a.75.75 0 111.06 1.06L13.06 18l2.72 2.72a.75.75 0 11-1.06 1.06L12 19.06l-2.72 2.72a.75.75 0 01-1.06-1.06L10.94 18l-2.72-2.72a.75.75 0 010-1.06z"/></g></svg>');
-}
-
-%code-16-svg-prop {
-  --code-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.424 2.02a.75.75 0 00-.904.556l-2.5 10.5a.75.75 0 001.46.348l2.5-10.5a.75.75 0 00-.556-.904zM11.2 4.24a.75.75 0 011.06-.04l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1L14.148 8 11.24 5.3a.75.75 0 01-.04-1.06zM4.76 5.3a.75.75 0 00-1.02-1.1L.24 7.45a.75.75 0 000 1.1l3.5 3.25a.75.75 0 101.02-1.1L1.852 8 4.76 5.3z"/></g></svg>');
-}
-
-%code-24-svg-prop {
-  --code-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.447 3.026a.75.75 0 00-.92.527l-4.5 16.5a.75.75 0 001.447.394l4.5-16.5a.75.75 0 00-.527-.92zM16.207 6.232a.75.75 0 011.06-.025l5.5 5.25a.75.75 0 010 1.085l-5.5 5.25a.75.75 0 01-1.035-1.085L21.164 12l-4.932-4.707a.75.75 0 01-.024-1.06zM7.768 7.293a.75.75 0 00-1.036-1.086l-5.5 5.25a.75.75 0 000 1.085l5.5 5.25a.75.75 0 101.036-1.085L2.836 12l4.932-4.707z"/></g></svg>');
-}
-
-%code-svg-prop {
-  @extend %code-16-svg-prop;
-}
-
-%codepen-16-svg-prop {
-  --codepen-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.416 7.378v1.244L5.346 8l-.93-.622zM7.627 6.473V4.738L4.712 6.683l1.302.87 1.613-1.08zM11.285 6.683L8.37 4.738v1.735l1.613 1.08 1.302-.87zM4.712 9.32l2.915 1.942V9.527l-1.613-1.08-1.302.873zM8.37 9.527v1.735l2.915-1.942-1.302-.873-1.613 1.08zM8 7.12L6.683 8 8 8.879 9.314 8 8 7.12z"/><path d="M8 1a7 7 0 10.001 14.001A7 7 0 008 1zm4.327 8.32c0 .018 0 .033-.003.047 0 .006-.003.012-.003.015l-.006.033c-.002.006-.002.012-.005.018l-.01.026-.008.018c-.003.009-.01.018-.012.024a.06.06 0 01-.012.017l-.015.024a.065.065 0 01-.012.015c-.005.006-.011.015-.017.02l-.015.015c-.006.006-.015.012-.02.018-.007.003-.013.009-.019.012-.003 0-.003.003-.005.006l-3.96 2.64a.377.377 0 01-.414 0L3.832 9.631c-.003 0-.003-.003-.006-.006l-.018-.012c-.006-.006-.015-.012-.02-.018l-.016-.014a.129.129 0 01-.017-.021c-.003-.006-.01-.012-.012-.015a.064.064 0 01-.015-.024.062.062 0 00-.012-.017l-.012-.024-.009-.018-.008-.026-.006-.018a.106.106 0 01-.006-.033c0-.006-.003-.012-.003-.015-.003-.014-.003-.032-.003-.047V6.686c0-.018 0-.033.003-.048 0-.005.003-.011.003-.014l.006-.033.006-.018.008-.026.01-.018c.002-.009.008-.018.011-.024a.062.062 0 01.012-.017l.015-.024a.065.065 0 01.012-.015c.006-.006.011-.015.017-.02l.015-.015c.006-.006.015-.012.02-.018.007-.003.013-.01.019-.012.003 0 .003-.003.006-.006L7.79 3.741a.372.372 0 01.411 0l3.958 2.637c.002 0 .002.003.005.006l.018.012.021.018.015.014c.006.006.012.012.018.021l.011.015a.065.065 0 01.015.024.06.06 0 00.012.017.087.087 0 01.012.024l.009.018.009.026c.003.006.003.012.005.018.004.009.006.02.006.033 0 .006.003.012.003.014a.251.251 0 01.003.048V9.32h.006z"/><path d="M11.584 8.622V7.378L10.652 8l.932.622z"/></g></svg>');
-}
-
-%codepen-24-svg-prop {
-  --codepen-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.368 11.023v1.954L7.828 12l-1.46-.977zM11.414 9.6V6.874L6.833 9.93l2.046 1.368L11.414 9.6zM17.163 9.93L12.58 6.874V9.6l2.535 1.698 2.047-1.368zM6.833 14.074l4.581 3.052V14.4l-2.535-1.698-2.046 1.372zM12.581 14.4v2.726l4.582-3.052-2.047-1.372-2.535 1.698zM12 10.619L9.93 12 12 13.381 14.065 12 12 10.619z"/><path d="M12 1C5.926 1 1 5.926 1 12s4.926 11 11 11 11-4.926 11-11S18.074 1 12 1zm6.8 13.074c0 .028 0 .052-.005.075 0 .01-.004.018-.004.023-.005.019-.005.033-.01.051-.004.01-.004.019-.009.028l-.014.042-.014.028c-.005.014-.014.028-.018.037-.005.01-.01.019-.019.028-.01.014-.014.023-.023.037a.097.097 0 01-.019.024c-.01.009-.018.023-.028.032l-.023.023c-.01.01-.023.019-.033.028-.009.005-.018.014-.027.019-.005 0-.005.005-.01.01l-6.223 4.148a.592.592 0 01-.651 0L5.45 14.563c-.004 0-.004-.005-.01-.01-.008-.004-.018-.014-.027-.018-.01-.01-.023-.019-.033-.028l-.023-.023c-.01-.01-.018-.019-.028-.033-.004-.01-.014-.018-.018-.023a.102.102 0 01-.024-.037.097.097 0 00-.018-.028c-.01-.014-.014-.028-.019-.037l-.014-.028-.014-.042c-.004-.01-.004-.019-.01-.028a.167.167 0 01-.008-.051c0-.01-.005-.019-.005-.024-.005-.023-.005-.05-.005-.074V9.935c0-.028 0-.051.005-.075 0-.009.005-.018.005-.023.004-.018.004-.032.009-.051.005-.01.005-.019.01-.028l.013-.042.014-.028c.005-.014.014-.028.019-.037a.097.097 0 01.018-.028l.024-.037c.004-.01.014-.019.018-.023.01-.01.019-.023.028-.033l.023-.023c.01-.01.024-.019.033-.028.01-.005.019-.014.028-.019.005 0 .005-.004.01-.009l6.218-4.144a.584.584 0 01.646 0l6.219 4.144c.005 0 .005.005.01.01.008.004.018.013.027.018.01.01.023.019.033.028l.023.023c.01.01.018.019.028.033.01.01.014.018.018.023.01.01.019.023.024.037.004.01.009.019.018.028a.14.14 0 01.019.037l.014.028.014.042c.004.01.004.019.01.028.004.014.008.033.008.051 0 .01.005.019.005.023.005.024.005.052.005.075v4.14h.009z"/><path d="M17.633 12.977v-1.954L16.166 12l1.465.977z"/></g></svg>');
-}
-
-%codepen-color-16-svg-prop {
-  --codepen-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.416 7.378v1.244L5.346 8l-.93-.622zM7.627 6.473V4.738L4.712 6.683l1.302.87 1.613-1.08zM11.285 6.683L8.37 4.738v1.735l1.613 1.08 1.302-.87zM4.712 9.32l2.915 1.942V9.527l-1.613-1.08-1.302.873zM8.37 9.527v1.735l2.915-1.942-1.302-.873-1.613 1.08zM8 7.12L6.683 8 8 8.879 9.314 8 8 7.12z"/><path d="M8 1a7 7 0 10.001 14.001A7 7 0 008 1zm4.327 8.32c0 .018 0 .033-.003.047 0 .006-.003.012-.003.015l-.006.033c-.002.006-.002.012-.005.018l-.01.026-.008.018c-.003.009-.01.018-.012.024a.06.06 0 01-.012.017l-.015.024a.065.065 0 01-.012.015c-.005.006-.011.015-.017.02l-.015.015c-.006.006-.015.012-.02.018-.007.003-.013.009-.019.012-.003 0-.003.003-.005.006l-3.96 2.64a.377.377 0 01-.414 0L3.832 9.631c-.003 0-.003-.003-.006-.006l-.018-.012c-.006-.006-.015-.012-.02-.018l-.016-.014a.129.129 0 01-.017-.021c-.003-.006-.01-.012-.012-.015a.064.064 0 01-.015-.024.062.062 0 00-.012-.017l-.012-.024-.009-.018-.008-.026-.006-.018a.106.106 0 01-.006-.033c0-.006-.003-.012-.003-.015-.003-.014-.003-.032-.003-.047V6.686c0-.018 0-.033.003-.048 0-.005.003-.011.003-.014l.006-.033.006-.018.008-.026.01-.018c.002-.009.008-.018.011-.024a.062.062 0 01.012-.017l.015-.024a.065.065 0 01.012-.015c.006-.006.011-.015.017-.02l.015-.015c.006-.006.015-.012.02-.018.007-.003.013-.01.019-.012.003 0 .003-.003.006-.006L7.79 3.741a.372.372 0 01.411 0l3.958 2.637c.002 0 .002.003.005.006l.018.012.021.018.015.014c.006.006.012.012.018.021l.011.015a.065.065 0 01.015.024.06.06 0 00.012.017.087.087 0 01.012.024l.009.018.009.026c.003.006.003.012.005.018.004.009.006.02.006.033 0 .006.003.012.003.014a.251.251 0 01.003.048V9.32h.006z"/><path d="M11.584 8.622V7.378L10.652 8l.932.622z"/></g><path fill="%23fff" fill-rule="evenodd" d="M12.327 9.32c0 .018 0 .033-.003.047 0 .004 0 .007-.002.01v.005a.14.14 0 00-.004.017c0 .003 0 .007-.002.011v.005a.044.044 0 00-.004.009c0 .002 0 .004-.002.006v.003l-.01.026-.008.018-.009.018-.003.006a.06.06 0 01-.012.017l-.003.005-.004.007a.322.322 0 01-.02.027.129.129 0 00-.008.01l-.01.01-.014.015a.137.137 0 01-.01.01.118.118 0 00-.01.008l-.01.006-.009.006-.003.003-.003.003-3.96 2.64a.377.377 0 01-.414 0L3.832 9.631l-.003-.003-.002-.003a.062.062 0 01-.01-.006.062.062 0 00-.008-.006.13.13 0 00-.01-.009.127.127 0 01-.01-.009l-.016-.014a.129.129 0 01-.017-.021.065.065 0 00-.012-.015.064.064 0 01-.015-.024c-.003-.006-.006-.011-.012-.017l-.009-.018-.003-.006-.009-.018-.009-.026-.003-.01a.042.042 0 00-.002-.008.106.106 0 01-.006-.033l-.002-.01-.001-.005c-.003-.014-.003-.032-.003-.047V6.686c0-.018 0-.033.003-.048l.001-.01.002-.004a.153.153 0 00.003-.017c0-.003 0-.007.002-.012v-.004l.003-.009.003-.009.01-.026.008-.018a.104.104 0 01.009-.018l.003-.006a.275.275 0 00.02-.03l.007-.011a.065.065 0 01.012-.015l.008-.01a.129.129 0 01.01-.01l.014-.015.01-.01c.004-.002.008-.005.01-.008l.004-.002.006-.004a.06.06 0 01.009-.006l.003-.003.002-.003L7.79 3.741a.371.371 0 01.411 0l3.957 2.637.004.003.002.003.01.006.005.004.003.002a.089.089 0 00.006.005l.005.004.01.009.015.014.017.021.008.01.004.005a.065.065 0 01.015.024.06.06 0 00.012.017.087.087 0 01.012.024l.009.018.008.026c.002.003.003.006.003.01l.003.008c.003.009.006.02.006.033l.002.01.001.004c.003.015.003.033.003.048V9.32h.006zm-7.911-.698V7.378L5.345 8l-.93.622zm3.211-3.884v1.735l-1.613 1.08-1.302-.87 2.915-1.945zm.743 0l2.915 1.945-1.302.87-1.613-1.08V4.738zm-.743 6.524L4.712 9.32l1.302-.873 1.613 1.08v1.735zm.743 0V9.527l1.613-1.08 1.302.873-2.915 1.942zM8 8.879L6.683 8 8 7.12 9.314 8 8 8.879zm3.584-1.5v1.243L10.652 8l.932-.622z" clip-rule="evenodd"/></svg>');
-}
-
-%codepen-color-24-svg-prop {
-  --codepen-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.368 11.023v1.954L7.828 12l-1.46-.977zM11.414 9.6V6.874L6.833 9.93l2.046 1.368L11.414 9.6zM17.163 9.93L12.58 6.874V9.6l2.535 1.698 2.047-1.368zM6.833 14.074l4.581 3.052V14.4l-2.535-1.698-2.046 1.372zM12.581 14.4v2.726l4.582-3.052-2.047-1.372-2.535 1.698zM12 10.619L9.93 12 12 13.381 14.065 12 12 10.619z"/><path d="M12 1C5.926 1 1 5.926 1 12s4.926 11 11 11 11-4.926 11-11S18.074 1 12 1zm6.8 13.074c0 .028 0 .052-.005.075 0 .01-.004.018-.004.023-.005.019-.005.033-.01.051-.004.01-.004.019-.009.028l-.014.042-.014.028c-.005.014-.014.028-.018.037-.005.01-.01.019-.019.028-.01.014-.014.023-.023.037a.097.097 0 01-.019.024c-.01.009-.018.023-.028.032l-.023.023c-.01.01-.023.019-.033.028-.009.005-.018.014-.027.019-.005 0-.005.005-.01.01l-6.223 4.148a.592.592 0 01-.651 0L5.45 14.563c-.004 0-.004-.005-.01-.01-.008-.004-.018-.014-.027-.018-.01-.01-.023-.019-.033-.028l-.023-.023c-.01-.01-.018-.019-.028-.033-.004-.01-.014-.018-.018-.023a.102.102 0 01-.024-.037.097.097 0 00-.018-.028c-.01-.014-.014-.028-.019-.037l-.014-.028-.014-.042c-.004-.01-.004-.019-.01-.028a.167.167 0 01-.008-.051c0-.01-.005-.019-.005-.024-.005-.023-.005-.05-.005-.074V9.935c0-.028 0-.051.005-.075 0-.009.005-.018.005-.023.004-.018.004-.032.009-.051.005-.01.005-.019.01-.028l.013-.042.014-.028c.005-.014.014-.028.019-.037a.097.097 0 01.018-.028l.024-.037c.004-.01.014-.019.018-.023.01-.01.019-.023.028-.033l.023-.023c.01-.01.024-.019.033-.028.01-.005.019-.014.028-.019.005 0 .005-.004.01-.009l6.218-4.144a.584.584 0 01.646 0l6.219 4.144c.005 0 .005.005.01.01.008.004.018.013.027.018.01.01.023.019.033.028l.023.023c.01.01.018.019.028.033.01.01.014.018.018.023.01.01.019.023.024.037.004.01.009.019.018.028a.14.14 0 01.019.037l.014.028.014.042c.004.01.004.019.01.028.004.014.008.033.008.051 0 .01.005.019.005.023.005.024.005.052.005.075v4.14h.009z"/><path d="M17.633 12.977v-1.954L16.166 12l1.465.977z"/></g><path fill="%23fff" fill-rule="evenodd" d="M18.8 14.074c0 .028 0 .052-.005.075 0 .01-.004.018-.004.023-.005.019-.005.033-.01.051-.004.01-.004.019-.009.028l-.014.042-.014.028c-.005.014-.014.028-.018.037a.096.096 0 01-.02.028l-.022.037c-.005.01-.014.019-.019.024-.01.009-.018.023-.028.032l-.023.023c-.01.01-.023.019-.033.028-.009.005-.018.014-.027.019-.005 0-.005.005-.01.01l-6.223 4.148a.593.593 0 01-.651 0L5.45 14.563c-.005 0-.005-.005-.01-.01-.008-.004-.018-.014-.027-.018-.01-.01-.023-.019-.033-.028l-.023-.023c-.01-.01-.018-.019-.028-.033a.1.1 0 00-.018-.023.102.102 0 01-.024-.037c-.004-.01-.009-.019-.018-.028-.01-.014-.014-.028-.019-.037l-.014-.028-.014-.042c-.004-.01-.004-.019-.01-.028a.168.168 0 01-.008-.051c0-.01-.005-.019-.005-.024-.005-.023-.005-.05-.005-.074V9.935c0-.028 0-.051.005-.075 0-.009.005-.018.005-.023.004-.018.004-.032.009-.051.005-.01.005-.019.01-.028l.013-.042.014-.028c.005-.014.014-.028.019-.037.004-.01.009-.018.018-.028l.024-.037a.101.101 0 01.018-.023c.01-.01.019-.023.028-.033l.023-.023c.01-.01.024-.019.033-.028.01-.005.019-.014.028-.019.004 0 .004-.004.01-.009l6.218-4.144a.584.584 0 01.646 0l6.219 4.144c.005 0 .005.005.01.01.008.004.018.013.027.018.01.01.023.019.033.028l.023.023c.01.01.018.019.028.033.01.01.014.018.018.023a.1.1 0 01.024.037c.004.01.009.019.018.028.01.014.014.023.019.037l.014.028.014.042c.004.01.004.019.01.028.004.014.008.033.008.051 0 .01.005.019.005.023.005.024.005.052.005.075v4.14h.009zM6.367 12.977v-1.954L7.829 12l-1.46.977zm5.047-6.103V9.6l-2.535 1.698L6.833 9.93l4.581-3.056zm1.167 0l4.582 3.056-2.047 1.368L12.581 9.6V6.874zm-1.167 10.252l-4.581-3.052 2.046-1.372 2.535 1.698v2.726zm1.167 0V14.4l2.535-1.698 2.047 1.372-4.582 3.052zM9.931 12L12 10.618 14.065 12 12 13.38 9.93 12zm7.701-.977v1.954L16.167 12l1.465-.977z" clip-rule="evenodd"/></svg>');
-}
-
-%collections-16-svg-prop {
-  --collections-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.05 4.75a.7.7 0 01.7-.7h3.5a.7.7 0 110 1.4h-3.5a.7.7 0 01-.7-.7zM3.75 7.05a.7.7 0 100 1.4h2.5a.7.7 0 100-1.4h-2.5z"/><path fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h6.5c.883 0 1.648.51 2.016 1.25h.984c.698 0 1.3.409 1.582 1h.918c.966 0 1.75.784 1.75 1.75v6a1.75 1.75 0 01-1.75 1.75h-.918c-.281.591-.884 1-1.582 1h-.984A2.25 2.25 0 018.75 15h-6.5A2.25 2.25 0 010 12.75v-9.5zm13.5 8h.75a.25.25 0 00.25-.25V5a.25.25 0 00-.25-.25h-.75v6.5zm-2.5 1v-8.5h.75A.25.25 0 0112 4v8a.25.25 0 01-.25.25H11zM2.25 2.5a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-6.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%collections-24-svg-prop {
-  --collections-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5 6.75A.75.75 0 015.75 6h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 015 6.75zM5.75 9a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/><path fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h10.5c.854 0 1.617.39 2.121 1h.879c.854 0 1.617.39 2.121 1h.879A2.75 2.75 0 0123 6.75v10.5A2.75 2.75 0 0120.25 20h-.879c-.504.61-1.267 1-2.121 1h-.879c-.504.61-1.267 1-2.121 1H3.75A2.75 2.75 0 011 19.25V4.75zM19.989 18.5h.261c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25h-.261c.007.082.011.166.011.25v12.5c0 .084-.004.168-.011.25zM17 4.75c0-.084-.004-.168-.011-.25h.261c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25h-.261c.007-.082.011-.166.011-.25V4.75zM3.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%command-16-svg-prop {
-  --command-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.5 3.75V5h3V3.75a2.75 2.75 0 112.75 2.75H11v3h1.25a2.75 2.75 0 11-2.75 2.75V11h-3v1.25A2.75 2.75 0 113.75 9.5H5v-3H3.75A2.75 2.75 0 116.5 3.75zM3.75 2.5a1.25 1.25 0 100 2.5H5V3.75c0-.69-.56-1.25-1.25-1.25zM11 11v1.25A1.25 1.25 0 1012.25 11H11zM9.5 9.5v-3h-3v3h3zM3.75 11H5v1.25A1.25 1.25 0 113.75 11zM11 5h1.25A1.25 1.25 0 1011 3.75V5z" clip-rule="evenodd"/></svg>');
-}
-
-%command-24-svg-prop {
-  --command-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.5 5.75V8h5V5.75a3.75 3.75 0 113.75 3.75H16v5h2.25a3.75 3.75 0 11-3.75 3.75V16h-5v2.25a3.75 3.75 0 11-3.75-3.75H8v-5H5.75A3.75 3.75 0 119.5 5.75zM5.75 3.5a2.25 2.25 0 000 4.5H8V5.75A2.25 2.25 0 005.75 3.5zM16 16v2.25A2.25 2.25 0 1018.25 16H16zm-1.5-1.5v-5h-5v5h5zM5.75 16H8v2.25A2.25 2.25 0 115.75 16zM16 8h2.25A2.25 2.25 0 1016 5.75V8z" clip-rule="evenodd"/></svg>');
-}
-
-%compass-16-svg-prop {
-  --compass-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.914 4.971a.7.7 0 00-.885-.885L6.154 5.71a.7.7 0 00-.443.443l-1.625 4.875a.7.7 0 00.885.885l4.875-1.625a.7.7 0 00.443-.443l1.625-4.875zm-6.057 5.172l1.071-3.215 3.215-1.071-1.071 3.215-3.215 1.071z"/><path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/></g></svg>');
-}
-
-%compass-24-svg-prop {
-  --compass-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M16.951 7.997a.75.75 0 00-.948-.948l-6.36 2.12a.75.75 0 00-.474.474l-2.12 6.36a.75.75 0 00.948.948l6.36-2.12a.75.75 0 00.475-.474l2.12-6.36zm-8.005 7.057l1.527-4.581 4.581-1.527-1.527 4.581-4.581 1.527z"/><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></g></svg>');
-}
-
-%connection-16-svg-prop {
-  --connection-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 7.75A3 3 0 015.905 7h4.19a3.001 3.001 0 110 1.5h-4.19A3.001 3.001 0 010 7.75zm3-1.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm10 0a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd"/></svg>');
-}
-
-%connection-24-svg-prop {
-  --connection-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 11.75A3.5 3.5 0 017.92 11h8.16a3.501 3.501 0 016.92.75 3.5 3.5 0 01-6.92.75H7.92A3.501 3.501 0 011 11.75zm3.5-2a2 2 0 100 4 2 2 0 000-4zm15 0a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd"/></svg>');
-}
-
-%connection-gateway-16-svg-prop {
-  --connection-gateway-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M13.75.5a2.25 2.25 0 00-1.847 3.536l-.933.934a.752.752 0 00-.11.14c-.19-.071-.396-.11-.61-.11h-2.5A1.75 1.75 0 006 6.75v.5H4.372a2.25 2.25 0 100 1.5H6v.5c0 .966.784 1.75 1.75 1.75h2.5c.214 0 .42-.039.61-.11.03.05.067.097.11.14l.933.934a2.25 2.25 0 101.24-.881L12.03 9.97a.75.75 0 00-.14-.11c.071-.19.11-.396.11-.61v-2.5c0-.214-.039-.42-.11-.61a.75.75 0 00.14-.11l1.113-1.113A2.252 2.252 0 0016 2.75 2.25 2.25 0 0013.75.5zM13 2.75a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM7.75 6.5a.25.25 0 00-.25.25v2.5c0 .138.112.25.25.25h2.5a.25.25 0 00.25-.25v-2.5a.25.25 0 00-.25-.25h-2.5zm6 6a.75.75 0 100 1.5.75.75 0 000-1.5zM1.5 8A.75.75 0 113 8a.75.75 0 01-1.5 0z" clip-rule="evenodd"/></svg>');
-}
-
-%connection-gateway-24-svg-prop {
-  --connection-gateway-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M20.5 1.75a3 3 0 00-2.665 4.378l-2.441 2.184A2.24 2.24 0 0014.25 8h-3A2.25 2.25 0 009 10.25V11H6.405a3.001 3.001 0 00-5.905.75 3 3 0 005.905.75H9v.75a2.25 2.25 0 002.25 2.25h3a2.24 2.24 0 001.144-.312l2.44 2.184a3 3 0 101-1.118l-2.476-2.216c.092-.245.142-.51.142-.788v-3c0-.277-.05-.543-.142-.788l2.477-2.216A3 3 0 1020.5 1.75zm-1.5 3a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM11.25 9.5a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-3zm9.25 7.75a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM2 11.75a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/></svg>');
-}
-
-%console-svg-prop {
-  @extend %terminal-16-svg-prop;
-}
-
-%consul-16-svg-prop {
-  --consul-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.737 14.193A7 7 0 008.006 15a6.98 6.98 0 004.735-1.847l-1.66-1.737a4.6 4.6 0 110-6.828l1.66-1.738a7 7 0 10-8.004 11.343zM13.32 11.402a.573.573 0 10.637-.953.573.573 0 00-.637.953z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM13.978 9.447a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM13.978 7.514a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.353 5.585a.574.574 0 10.635-.956.574.574 0 00-.635.956z"/></g></svg>');
-}
-
-%consul-24-svg-prop {
-  --consul-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.872 21.731A11 11 0 0012.009 23a10.97 10.97 0 007.442-2.902l-2.61-2.73a7.229 7.229 0 110-10.73l2.61-2.73A11 11 0 106.87 21.73zM20.36 17.346a.901.901 0 101.001-1.498.901.901 0 00-1.001 1.498z"/><path d="M11.939 14.383a2.383 2.383 0 11-.02-4.766 2.383 2.383 0 01.02 4.766zM21.394 14.274a.902.902 0 101.002-1.5.902.902 0 00-1.002 1.5zM19.214 14.313a.902.902 0 110-1.804.902.902 0 010 1.804zM21.394 11.236a.901.901 0 101.001-1.5.901.901 0 00-1.001 1.5zM19.214 11.49a.901.901 0 110-1.803.901.901 0 010 1.803zM20.411 8.204a.901.901 0 10.999-1.5.901.901 0 00-.999 1.5z"/></g></svg>');
-}
-
-%consul-color-16-svg-prop {
-  --consul-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23E03875"><path d="M8.006 15A7 7 0 1112.74 2.85l-1.66 1.738a4.6 4.6 0 100 6.828l1.66 1.737A6.98 6.98 0 018.006 15zM13.638 11.499a.573.573 0 110-1.147.573.573 0 010 1.147z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM14.296 9.544a.574.574 0 110-1.148.574.574 0 010 1.148zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM14.296 7.61a.574.574 0 110-1.147.574.574 0 010 1.147zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.672 5.68a.574.574 0 11-.003-1.147.574.574 0 01.003 1.148z"/></g></svg>');
-}
-
-%consul-color-24-svg-prop {
-  --consul-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23E03875"><path d="M12.009 23a11 11 0 117.442-19.092l-2.61 2.73a7.229 7.229 0 100 10.73l2.61 2.73A10.97 10.97 0 0112.009 23zM20.86 17.498a.901.901 0 110-1.802.901.901 0 010 1.802z"/><path d="M11.939 14.383a2.383 2.383 0 11-.02-4.766 2.383 2.383 0 01.02 4.766zM21.895 14.426a.902.902 0 110-1.805.902.902 0 010 1.805zM19.214 14.313a.902.902 0 110-1.804.902.902 0 010 1.804zM21.895 11.387a.901.901 0 110-1.802.901.901 0 010 1.802zM19.214 11.49a.901.901 0 110-1.803.901.901 0 010 1.803zM20.913 8.355a.901.901 0 11-.004-1.803.901.901 0 01.004 1.803z"/></g></svg>');
-}
-
-%copy-action-svg-prop {
-  @extend %clipboard-copy-16-svg-prop;
-}
-
-%copy-success-svg-prop {
-  @extend %clipboard-checked-16-svg-prop;
-}
-
-%corner-down-left-16-svg-prop {
-  --corner-down-left-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.5 2.75a.75.75 0 00-1.5 0v4.5A1.75 1.75 0 0110.25 9H4.56l2.22-2.22a.75.75 0 00-1.06-1.06l-3.5 3.5a.748.748 0 000 1.06l3.5 3.5a.75.75 0 001.06-1.06L4.56 10.5h5.69a3.25 3.25 0 003.25-3.25v-4.5z"/></svg>');
-}
-
-%corner-down-left-24-svg-prop {
-  --corner-down-left-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M21.5 3.75a.75.75 0 00-1.5 0v7c0 .847-.357 1.669-1.009 2.282A3.639 3.639 0 0116.5 14H5.622l4.146-3.957a.75.75 0 10-1.036-1.086l-5.498 5.25a.748.748 0 00-.002 1.085l5.5 5.25a.75.75 0 101.036-1.085L5.622 15.5H16.5c1.312 0 2.578-.49 3.52-1.375a4.634 4.634 0 001.48-3.375v-7z"/></svg>');
-}
-
-%corner-down-right-16-svg-prop {
-  --corner-down-right-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M2.5 2.75a.75.75 0 011.5 0v4.5A1.75 1.75 0 005.75 9h5.69L9.22 6.78a.75.75 0 011.06-1.06l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06l2.22-2.22H5.75A3.25 3.25 0 012.5 7.25v-4.5z"/></svg>');
-}
-
-%corner-down-right-24-svg-prop {
-  --corner-down-right-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M2.5 3.75a.75.75 0 011.5 0v7c0 .847.357 1.669 1.009 2.282A3.639 3.639 0 007.5 14h10.878l-4.146-3.957a.75.75 0 011.036-1.086l5.498 5.25a.748.748 0 01.002 1.085l-5.5 5.25a.75.75 0 01-1.036-1.085l4.146-3.957H7.5a5.139 5.139 0 01-3.52-1.375A4.634 4.634 0 012.5 10.75v-7z"/></svg>');
-}
-
-%corner-left-down-16-svg-prop {
-  --corner-left-down-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.25 2.5a.75.75 0 010 1.5h-4.5A1.75 1.75 0 007 5.75v5.69l2.22-2.22a.75.75 0 111.06 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 111.06-1.06l2.22 2.22V5.75A3.25 3.25 0 018.75 2.5h4.5z"/></svg>');
-}
-
-%corner-left-down-24-svg-prop {
-  --corner-left-down-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M20.25 2.5a.75.75 0 010 1.5h-7c-.847 0-1.669.357-2.282 1.009A3.639 3.639 0 0010 7.5v10.878l3.957-4.146a.75.75 0 011.085 1.036l-5.25 5.5a.75.75 0 01-1.085 0l-5.25-5.5a.75.75 0 011.086-1.036L8.5 18.378V7.5c0-1.312.49-2.579 1.375-3.52A4.634 4.634 0 0113.25 2.5h7z"/></svg>');
-}
-
-%corner-left-up-16-svg-prop {
-  --corner-left-up-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M9.22 6.78a.75.75 0 101.06-1.06l-3.5-3.5a.75.75 0 00-1.06 0l-3.5 3.5a.75.75 0 001.06 1.06L5.5 4.56v5.69a3.25 3.25 0 003.25 3.25h4.5a.75.75 0 000-1.5h-4.5A1.75 1.75 0 017 10.25V4.56l2.22 2.22z"/></svg>');
-}
-
-%corner-left-up-24-svg-prop {
-  --corner-left-up-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M13.957 9.768a.75.75 0 001.085-1.036l-5.25-5.5a.75.75 0 00-1.085 0l-5.25 5.5a.75.75 0 001.086 1.036L8.5 5.622V16.5c0 1.312.49 2.578 1.375 3.52.887.942 2.1 1.48 3.375 1.48h7a.75.75 0 000-1.5h-7a3.135 3.135 0 01-2.282-1.009A3.639 3.639 0 0110 16.5V5.622l3.957 4.146z"/></svg>');
-}
-
-%corner-right-down-16-svg-prop {
-  --corner-right-down-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M2.75 2.5a.75.75 0 000 1.5h4.5A1.75 1.75 0 019 5.75v5.69L6.78 9.22a.75.75 0 00-1.06 1.06l3.5 3.5a.75.75 0 001.06 0l3.5-3.5a.75.75 0 10-1.06-1.06l-2.22 2.22V5.75A3.25 3.25 0 007.25 2.5h-4.5z"/></svg>');
-}
-
-%corner-right-down-24-svg-prop {
-  --corner-right-down-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M3.75 2.5a.75.75 0 000 1.5h7c.847 0 1.669.357 2.282 1.009.615.653.968 1.549.968 2.491v10.878l-3.957-4.146a.75.75 0 00-1.086 1.036l5.25 5.5a.75.75 0 001.085 0l5.25-5.5a.75.75 0 00-1.085-1.036L15.5 18.378V7.5c0-1.312-.49-2.579-1.375-3.52A4.634 4.634 0 0010.75 2.5h-7z"/></svg>');
-}
-
-%corner-right-up-16-svg-prop {
-  --corner-right-up-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M6.78 6.78a.75.75 0 01-1.06-1.06l3.5-3.5a.75.75 0 011.06 0l3.5 3.5a.75.75 0 01-1.06 1.06L10.5 4.56v5.69a3.25 3.25 0 01-3.25 3.25h-4.5a.75.75 0 010-1.5h4.5A1.75 1.75 0 009 10.25V4.56L6.78 6.78z"/></svg>');
-}
-
-%corner-right-up-24-svg-prop {
-  --corner-right-up-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M10.043 9.768a.75.75 0 11-1.086-1.036l5.25-5.5a.75.75 0 011.085 0l5.25 5.5a.75.75 0 11-1.085 1.036L15.5 5.622V16.5c0 1.312-.49 2.578-1.375 3.52a4.634 4.634 0 01-3.375 1.48h-7a.75.75 0 010-1.5h7c.847 0 1.669-.357 2.282-1.009A3.639 3.639 0 0014 16.5V5.622l-3.957 4.146z"/></svg>');
-}
-
-%corner-up-left-16-svg-prop {
-  --corner-up-left-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M6.78 9.22a.75.75 0 11-1.06 1.06l-3.5-3.5a.75.75 0 010-1.06l3.5-3.5a.75.75 0 011.06 1.06L4.56 5.5h5.69a3.25 3.25 0 013.25 3.25v4.5a.75.75 0 01-1.5 0v-4.5A1.75 1.75 0 0010.25 7H4.56l2.22 2.22z"/></svg>');
-}
-
-%corner-up-left-24-svg-prop {
-  --corner-up-left-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M9.768 13.957a.75.75 0 01-1.036 1.085l-5.5-5.25a.75.75 0 010-1.085l5.5-5.25a.75.75 0 011.036 1.086L5.622 8.5H16.5c1.312 0 2.578.49 3.52 1.375.942.887 1.48 2.1 1.48 3.375v7a.75.75 0 01-1.5 0v-7c0-.847-.357-1.669-1.009-2.282A3.639 3.639 0 0016.5 10H5.622l4.146 3.957z"/></svg>');
-}
-
-%corner-up-right-16-svg-prop {
-  --corner-up-right-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M9.22 9.22a.75.75 0 101.06 1.06l3.5-3.5a.75.75 0 000-1.06l-3.5-3.5a.75.75 0 10-1.06 1.06l2.22 2.22H5.75A3.25 3.25 0 002.5 8.75v4.5a.75.75 0 001.5 0v-4.5A1.75 1.75 0 015.75 7h5.69L9.22 9.22z"/></svg>');
-}
-
-%corner-up-right-24-svg-prop {
-  --corner-up-right-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M14.232 13.957a.75.75 0 001.036 1.085l5.5-5.25a.75.75 0 000-1.085l-5.5-5.25a.75.75 0 00-1.036 1.086L18.378 8.5H7.5c-1.312 0-2.579.49-3.52 1.375A4.634 4.634 0 002.5 13.25v7a.75.75 0 001.5 0v-7c0-.847.357-1.669 1.009-2.282A3.639 3.639 0 017.5 10h10.878l-4.146 3.957z"/></svg>');
-}
-
-%cpu-16-svg-prop {
-  --cpu-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M6.25 5C5.56 5 5 5.56 5 6.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C11 5.56 10.44 5 9.75 5h-3.5zm.25 4.5v-3h3v3h-3z"/><path d="M6.25.05a.7.7 0 01.7.7V2h2.1V.75a.7.7 0 111.4 0V2h1.3A2.25 2.25 0 0114 4.25v1.3h1.25a.7.7 0 110 1.4H14v2.1h1.25a.7.7 0 110 1.4H14v1.3A2.25 2.25 0 0111.75 14h-1.3v1.25a.7.7 0 11-1.4 0V14h-2.1v1.25a.7.7 0 11-1.4 0V14h-1.3A2.25 2.25 0 012 11.75v-1.3H.75a.7.7 0 110-1.4H2v-2.1H.75a.7.7 0 110-1.4H2v-1.3A2.25 2.25 0 014.25 2h1.3V.75a.7.7 0 01.7-.7zM3.5 4.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75v-7.5z"/></g></svg>');
-}
-
-%cpu-24-svg-prop {
-  --cpu-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M9.75 8A1.75 1.75 0 008 9.75v4.5c0 .966.784 1.75 1.75 1.75h4.5A1.75 1.75 0 0016 14.25v-4.5A1.75 1.75 0 0014.25 8h-4.5zM9.5 9.75a.25.25 0 01.25-.25h4.5a.25.25 0 01.25.25v4.5a.25.25 0 01-.25.25h-4.5a.25.25 0 01-.25-.25v-4.5z"/><path d="M9.25 0a.75.75 0 01.75.75V3h4V.75a.75.75 0 011.5 0V3h2.75A2.75 2.75 0 0121 5.75V8.5h2.25a.75.75 0 010 1.5H21v3h2.25a.75.75 0 010 1.5H21v3.75A2.75 2.75 0 0118.25 21H15.5v2.25a.75.75 0 01-1.5 0V21h-4v2.25a.75.75 0 01-1.5 0V21H5.75A2.75 2.75 0 013 18.25V14.5H.75a.75.75 0 010-1.5H3v-3H.75a.75.75 0 010-1.5H3V5.75A2.75 2.75 0 015.75 3H8.5V.75A.75.75 0 019.25 0zM4.5 18.25c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25H5.75c-.69 0-1.25.56-1.25 1.25v12.5z"/></g></svg>');
-}
-
-%credit-card-16-svg-prop {
-  --credit-card-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.75 9a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5z"/><path fill-rule="evenodd" d="M0 4.25A2.25 2.25 0 012.25 2h11.5A2.25 2.25 0 0116 4.25v7.5A2.25 2.25 0 0113.75 14H2.25A2.25 2.25 0 010 11.75v-7.5zm14.5 0V5h-13v-.75a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75zm0 2.75h-13v4.75c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75V7z" clip-rule="evenodd"/></g></svg>');
-}
-
-%credit-card-24-svg-prop {
-  --credit-card-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M4.75 15a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"/><path fill-rule="evenodd" d="M0 5.75A2.75 2.75 0 012.75 3h18.5A2.75 2.75 0 0124 5.75v12.5A2.75 2.75 0 0121.25 21H2.75A2.75 2.75 0 010 18.25V5.75zm22.5 0V8h-21V5.75c0-.69.56-1.25 1.25-1.25h18.5c.69 0 1.25.56 1.25 1.25zm0 5.25h-21v7.25c0 .69.56 1.25 1.25 1.25h18.5c.69 0 1.25-.56 1.25-1.25V11z" clip-rule="evenodd"/></g></svg>');
-}
-
-%crop-16-svg-prop {
-  --crop-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.5 1.25a.75.75 0 00-1.5 0V3H1.25a.75.75 0 000 1.5H3v6.456A2.044 2.044 0 005.044 13H11.5v1.75a.75.75 0 001.5 0V13h1.75a.75.75 0 000-1.5H13V5.044A2.044 2.044 0 0010.956 3H4.5V1.25zm0 3.25v6.456a.544.544 0 00.544.544H11.5V5.044a.544.544 0 00-.544-.544H4.5z" clip-rule="evenodd"/></svg>');
-}
-
-%crop-24-svg-prop {
-  --crop-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M6.5 1.25a.75.75 0 00-1.5 0V5H1.25a.75.75 0 000 1.5H5v9.75A2.75 2.75 0 007.75 19h9.75v3.75a.75.75 0 001.5 0V19h3.75a.75.75 0 000-1.5H19V7.75A2.75 2.75 0 0016.25 5H6.5V1.25zm0 5.25v9.75a1.25 1.25 0 001.25 1.25h9.75V7.75a1.25 1.25 0 00-1.25-1.25H6.5z" clip-rule="evenodd"/></svg>');
-}
-
-%crosshair-16-svg-prop {
-  --crosshair-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8.75 6.457V12.75a.75.75 0 00-1.5 0v1.707A6.503 6.503 0 011.543 8.75H3.25a.75.75 0 000-1.5H1.543A6.503 6.503 0 017.25 1.543V3.25a.75.75 0 001.5 0V1.543a6.503 6.503 0 015.707 5.707H12.75a.75.75 0 000 1.5h1.707a6.503 6.503 0 01-5.707 5.707z" clip-rule="evenodd"/></svg>');
-}
-
-%crosshair-24-svg-prop {
-  --crosshair-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11.75 9.47v-2.72a.75.75 0 00-1.5 0v2.72a9.502 9.502 0 01-8.72-8.72h2.72a.75.75 0 000-1.5H2.53a9.502 9.502 0 018.72-8.72v2.72a.75.75 0 001.5 0V2.53a9.502 9.502 0 018.72 8.72h-2.72a.75.75 0 000 1.5h2.72a9.502 9.502 0 01-8.72 8.72z" clip-rule="evenodd"/></svg>');
-}
-
-%dashboard-16-svg-prop {
-  --dashboard-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M1 2.25C1 1.56 1.56 1 2.25 1h3.5C6.44 1 7 1.56 7 2.25v11.5C7 14.44 6.44 15 5.75 15h-3.5C1.56 15 1 14.44 1 13.75V2.25zm1.5.25v11h3v-11h-3zM9 2.25C9 1.56 9.56 1 10.25 1h3.5c.69 0 1.25.56 1.25 1.25v3.5C15 6.44 14.44 7 13.75 7h-3.5C9.56 7 9 6.44 9 5.75v-3.5zm1.5.25v3h3v-3h-3zM10.25 9C9.56 9 9 9.56 9 10.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C15 9.56 14.44 9 13.75 9h-3.5zm.25 4.5v-3h3v3h-3z"/></g></svg>');
-}
-
-%dashboard-24-svg-prop {
-  --dashboard-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2 3.75C2 2.784 2.784 2 3.75 2h5.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 019.25 22h-5.5A1.75 1.75 0 012 20.25V3.75zm1.75-.25a.25.25 0 00-.25.25v16.5c0 .138.112.25.25.25h5.5a.25.25 0 00.25-.25V3.75a.25.25 0 00-.25-.25h-5.5zM13 3.75c0-.966.784-1.75 1.75-1.75h5.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0120.25 11h-5.5A1.75 1.75 0 0113 9.25v-5.5zm1.75-.25a.25.25 0 00-.25.25v5.5c0 .138.112.25.25.25h5.5a.25.25 0 00.25-.25v-5.5a.25.25 0 00-.25-.25h-5.5zM14.75 13A1.75 1.75 0 0013 14.75v5.5c0 .966.784 1.75 1.75 1.75h5.5A1.75 1.75 0 0022 20.25v-5.5A1.75 1.75 0 0020.25 13h-5.5zm-.25 1.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-5.5a.25.25 0 01-.25-.25v-5.5z"/></g></svg>');
-}
-
-%database-16-svg-prop {
-  --database-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.352 1.621C4.575 1.23 6.218 1 8 1c1.782 0 3.425.23 4.648.621.607.195 1.153.442 1.563.752.398.301.789.76.789 1.377v8.5c0 .616-.386 1.074-.784 1.376-.41.311-.954.559-1.56.753C11.435 14.771 9.791 15 8 15c-1.791 0-3.435-.23-4.656-.62-.606-.195-1.15-.443-1.56-.754-.398-.302-.784-.76-.784-1.376v-8.5c0-.618.39-1.076.789-1.377.41-.31.956-.557 1.563-.752zM2.509 3.75a.738.738 0 01.185-.18c.222-.169.591-.352 1.115-.52C4.848 2.718 6.33 2.5 8 2.5c1.67 0 3.152.218 4.19.55.524.168.894.351 1.116.52a.74.74 0 01.185.18.74.74 0 01-.185.18c-.222.169-.591.352-1.115.52C11.152 4.782 9.67 5 8 5c-1.67 0-3.152-.218-4.19-.55-.525-.168-.894-.351-1.116-.52a.738.738 0 01-.185-.18zM2.5 9.723v2.511c.01.021.049.09.192.198.22.168.588.351 1.11.519 1.035.332 2.517.549 4.198.549 1.681 0 3.162-.217 4.198-.55.522-.166.89-.35 1.11-.518.143-.109.183-.177.192-.198V9.723c-.272.113-.57.21-.88.292-1.215.322-2.848.485-4.62.485-1.772 0-3.405-.163-4.62-.485a6.903 6.903 0 01-.88-.292zm11-1.746a.591.591 0 01-.163.145c-.213.146-.575.303-1.102.443C11.192 8.841 9.7 9 8 9c-1.7 0-3.192-.159-4.235-.435-.527-.14-.889-.297-1.102-.443a.59.59 0 01-.163-.145v-2.43c.263.125.55.235.852.332C4.575 6.27 6.218 6.5 8 6.5c1.782 0 3.425-.23 4.648-.621.302-.097.59-.207.852-.331v2.429z" clip-rule="evenodd"/></svg>');
-}
-
-%database-24-svg-prop {
-  --database-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M22 5.75c0-.751-.47-1.34-1.02-1.763-.563-.43-1.329-.787-2.208-1.072C17.005 2.342 14.611 2 12 2c-2.61 0-5.005.342-6.772.915-.88.285-1.646.641-2.207 1.072C2.469 4.41 2 5 2 5.75v12.412c0 .752.454 1.352 1.006 1.79.56.445 1.325.812 2.204 1.106 1.766.59 4.163.942 6.79.942s5.024-.352 6.79-.942c.88-.294 1.644-.66 2.204-1.105.552-.439 1.006-1.039 1.006-1.791V5.75zM3.933 5.177c-.385.296-.433.496-.433.573 0 .077.048.277.433.573.374.286.963.577 1.758.835C7.27 7.67 9.502 8 12 8s4.729-.33 6.31-.842c.794-.258 1.383-.549 1.757-.835.385-.296.433-.496.433-.573 0-.077-.048-.277-.433-.573-.375-.286-.963-.577-1.758-.835C16.73 3.83 14.498 3.5 12 3.5s-4.729.33-6.31.842c-.794.258-1.383.549-1.757.835zM20.5 7.835c-.49.29-1.078.539-1.728.75-1.767.573-4.161.915-6.772.915-2.61 0-5.005-.342-6.772-.915-.65-.211-1.238-.46-1.728-.75v3.915c0 .08.05.281.43.575.372.287.957.577 1.75.834C7.256 13.671 9.486 14 12 14c2.514 0 4.744-.329 6.32-.84.793-.258 1.378-.549 1.75-.835.38-.294.43-.495.43-.575V7.835zm0 6.005c-.486.288-1.07.536-1.716.746-1.764.573-4.159.914-6.784.914s-5.02-.341-6.784-.914c-.646-.21-1.23-.458-1.716-.746v4.322c0 .102.06.315.439.616.371.295.956.593 1.747.857 1.574.527 3.802.865 6.314.865s4.74-.338 6.314-.865c.791-.264 1.376-.563 1.747-.857.379-.3.439-.514.439-.616V13.84z" clip-rule="evenodd"/></svg>');
-}
-
-%database-svg-prop {
-  @extend %database-16-svg-prop;
-}
-
-%delay-16-svg-prop {
-  --delay-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.5 8a6.5 6.5 0 016.744-6.496.75.75 0 10.055-1.499 8 8 0 107.036 11.193.75.75 0 00-1.375-.6 6.722 6.722 0 01-.22.453A6.5 6.5 0 011.5 8zM10.726 1.238a.75.75 0 011.013-.312c.177.094.35.194.518.3a.75.75 0 01-.799 1.27 6.512 6.512 0 00-.42-.244.75.75 0 01-.312-1.014zM13.74 3.508a.75.75 0 011.034.235c.106.168.206.34.3.518a.75.75 0 11-1.326.702 6.452 6.452 0 00-.243-.421.75.75 0 01.235-1.034zM15.217 6.979a.75.75 0 01.777.722 8.034 8.034 0 01.002.552.75.75 0 01-1.5-.047 6.713 6.713 0 000-.45.75.75 0 01.721-.777z"/><path d="M7.75 3a.75.75 0 01.75.75v3.786l2.085 1.043a.75.75 0 11-.67 1.342l-2.5-1.25A.75.75 0 017 8V3.75A.75.75 0 017.75 3z"/></g></svg>');
-}
-
-%delay-24-svg-prop {
-  --delay-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 2.5a9.5 9.5 0 100 19 9.5 9.5 0 008.747-5.788.75.75 0 111.382.583c-.072.17-.148.338-.23.506v.002A11 11 0 0112 23C5.925 23 1 18.075 1 12S5.925 1 12 1c.186 0 .371.005.555.014a.75.75 0 01-.079 1.498A9.14 9.14 0 0012 2.5zM14.822 2.136a.75.75 0 01.971-.427c.346.135.683.287 1.01.455a.75.75 0 01-.687 1.334 9.08 9.08 0 00-.866-.39.75.75 0 01-.428-.972zM18.414 4.112a.75.75 0 011.06-.011c.263.257.513.527.749.807a.75.75 0 11-1.147.966 10.025 10.025 0 00-.651-.702.75.75 0 01-.01-1.06zM20.977 7.315a.75.75 0 01.99.381c.149.335.282.677.398 1.026a.75.75 0 11-1.422.476c-.102-.303-.218-.601-.347-.893a.75.75 0 01.38-.99zM22.174 11.239a.75.75 0 01.768.73c.01.368 0 .737-.029 1.107a.75.75 0 01-1.495-.118c.025-.317.033-.634.025-.95a.75.75 0 01.73-.77z"/><path d="M12.5 5.75a.75.75 0 00-1.5 0V12c0 .284.16.544.415.67l4.5 2.25a.75.75 0 10.67-1.34L12.5 11.536V5.75z"/></g></svg>');
-}
-
-%delay-svg-prop {
-  @extend %delay-16-svg-prop;
-}
-
-%delete-16-svg-prop {
-  --delete-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.78 5.22a.75.75 0 010 1.06L10.06 8l1.72 1.72a.75.75 0 11-1.06 1.06L9 9.06l-1.72 1.72a.75.75 0 11-1.06-1.06L7.94 8 6.22 6.28a.75.75 0 011.06-1.06L9 6.94l1.72-1.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M4.393 2.61A1.75 1.75 0 015.72 2h8.03A2.25 2.25 0 0116 4.25v7.5A2.25 2.25 0 0113.75 14H5.72a1.75 1.75 0 01-1.327-.61L.181 8.49a.75.75 0 010-.978L4.393 2.61zm1.327.89a.25.25 0 00-.19.087L1.74 8l3.792 4.413a.25.25 0 00.19.087h8.029a.75.75 0 00.75-.75v-7.5a.75.75 0 00-.75-.75H5.72z" clip-rule="evenodd"/></g></svg>');
-}
-
-%delete-24-svg-prop {
-  --delete-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.22 8.22a.75.75 0 011.06 0L15 10.94l2.72-2.72a.75.75 0 111.06 1.06L16.06 12l2.72 2.72a.75.75 0 11-1.06 1.06L15 13.06l-2.72 2.72a.75.75 0 11-1.06-1.06L13.94 12l-2.72-2.72a.75.75 0 010-1.06z"/><path fill-rule="evenodd" d="M6.579 3.97A2.75 2.75 0 018.676 3H21.25A2.75 2.75 0 0124 5.75v12.5A2.75 2.75 0 0121.25 21H8.676a2.75 2.75 0 01-2.097-.97l-6.4-7.545a.75.75 0 010-.97l6.4-7.544zm2.097.53a1.25 1.25 0 00-.953.441L1.733 12l5.99 7.059c.237.28.586.441.953.441H21.25c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25H8.676z" clip-rule="evenodd"/></g></svg>');
-}
-
-%deny-alt-svg-prop {
-  @extend %skip-16-svg-prop;
-}
-
-%deny-color-svg-prop {
-  --deny-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 16 " xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
-}
-
-%deny-default-svg-prop {
-  @extend %skip-16-svg-prop;
-}
-
-%diamond-16-svg-prop {
-  --diamond-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.468 1.813L1.81 7.47a.75.75 0 000 1.06l5.657 5.657a.75.75 0 001.06 0l5.657-5.656a.75.75 0 000-1.061L8.528 1.813a.75.75 0 00-1.06 0zM.75 6.41L6.407.753a2.25 2.25 0 013.182 0l5.657 5.656a2.25 2.25 0 010 3.182l-5.657 5.657a2.25 2.25 0 01-3.182 0L.75 9.591a2.25 2.25 0 010-3.182z" clip-rule="evenodd"/></svg>');
-}
-
-%diamond-24-svg-prop {
-  --diamond-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M11.116 2.985l-8.131 8.132a1.25 1.25 0 000 1.767l8.131 8.132a1.25 1.25 0 001.768 0l8.132-8.132a1.25 1.25 0 000-1.768l-8.132-8.131a1.25 1.25 0 00-1.768 0zm-9.192 7.07l8.132-8.13a2.75 2.75 0 013.889 0l8.131 8.13a2.75 2.75 0 010 3.89l-8.131 8.131a2.75 2.75 0 01-3.89 0l-8.131-8.131a2.75 2.75 0 010-3.89z" clip-rule="evenodd"/></svg>');
-}
-
-%diamond-fill-16-svg-prop {
-  --diamond-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M6.407.753L.75 6.409a2.25 2.25 0 000 3.182l5.657 5.657a2.25 2.25 0 003.182 0l5.657-5.657a2.25 2.25 0 000-3.182L9.589.753a2.25 2.25 0 00-3.182 0z"/></svg>');
-}
-
-%diamond-fill-24-svg-prop {
-  --diamond-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M10.056 1.924l-8.132 8.132a2.75 2.75 0 000 3.889l8.132 8.131a2.75 2.75 0 003.889 0l8.131-8.131a2.75 2.75 0 000-3.89l-8.131-8.13a2.75 2.75 0 00-3.89 0z"/></svg>');
-}
-
-%disabled-svg-prop {
-  @extend %skip-16-svg-prop;
-}
-
-%disc-16-svg-prop {
-  --disc-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 5.05a2.95 2.95 0 100 5.9 2.95 2.95 0 000-5.9zM6.45 8a1.55 1.55 0 113.1 0 1.55 1.55 0 01-3.1 0z"/><path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/></g></svg>');
-}
-
-%disc-24-svg-prop {
-  --disc-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm-2.5 4a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"/><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></g></svg>');
-}
-
-%discussion-circle-16-svg-prop {
-  --discussion-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.302 3.288A3.633 3.633 0 002.756 7.76c.124.237.112.49.102.61a2.984 2.984 0 01-.084.468 7.853 7.853 0 01-.2.655c.26-.09.52-.17.75-.223a.7.7 0 11.312 1.365c-.34.078-.837.258-1.278.434a23.211 23.211 0 00-.701.295l-.042.018-.01.005-.003.001a.7.7 0 01-.925-.927v-.001l.002-.004.008-.018.03-.07a21.252 21.252 0 00.43-1.047c.113-.3.211-.592.27-.822.021-.09.034-.157.041-.205a5.033 5.033 0 017.74-6.082.7.7 0 01-.896 1.076zM1.463 8.226v0z"/><path d="M4.75 9.333a5.083 5.083 0 119.657 2.221c.006.033.015.077.029.133.05.197.14.453.248.734.087.223.178.443.262.646l.06.146c.049.118.094.23.131.326.03.082.074.2.097.306a.75.75 0 01-.734.905c-.169 0-.332-.04-.447-.072a4.867 4.867 0 01-.394-.134c-.188-.072-.402-.162-.606-.248l-.216-.09a7.634 7.634 0 00-.705-.265 1.739 1.739 0 00-.095-.026A5.083 5.083 0 014.75 9.333zm1.5 0a3.583 3.583 0 116.763 1.654c-.124.239-.12.485-.11.614.01.155.043.313.08.456.054.214.132.448.216.676a7.37 7.37 0 00-.643-.231 2.456 2.456 0 00-.443-.093 1.113 1.113 0 00-.626.104 3.583 3.583 0 01-5.237-3.18zm8.15 2.16l-.001-.012v.013z"/></g></svg>');
-}
-
-%discussion-circle-24-svg-prop {
-  --discussion-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M13.02 4.827a5.75 5.75 0 00-8.777 7.077c.144.275.134.58.12.751a4.183 4.183 0 01-.118.655 13.903 13.903 0 01-.512 1.557c.563-.214 1.188-.429 1.694-.545a.75.75 0 11.335 1.463c-.535.122-1.3.401-1.961.666a34.515 34.515 0 00-1.062.445l-.064.029-.016.007-.004.002h-.001a.75.75 0 01-.99-.994v-.002l.003-.006.012-.027a21.137 21.137 0 00.214-.49c.137-.322.316-.755.484-1.204.17-.453.323-.903.413-1.265.046-.183.07-.32.078-.413l.001-.022a7.25 7.25 0 0111.11-8.837.75.75 0 11-.959 1.153z"/><path d="M21.781 20.78a.75.75 0 00.152-.84l-.004-.008-.012-.027a18.62 18.62 0 01-.214-.49 30.259 30.259 0 01-.484-1.204 12.45 12.45 0 01-.413-1.265 2.734 2.734 0 01-.077-.414l-.002-.021a7.25 7.25 0 10-3.22 3.219h.018c.092.009.23.033.413.08.363.09.814.243 1.268.413a31.27 31.27 0 011.701.695l.027.012.008.004a.75.75 0 00.84-.155zM8.5 13.25a5.75 5.75 0 1110.853 2.653c-.144.276-.134.58-.12.752.018.208.063.434.118.655a13.92 13.92 0 00.512 1.557 14.298 14.298 0 00-1.56-.512c-.218-.056-.443-.101-.649-.119-.167-.014-.474-.028-.75.117A5.75 5.75 0 018.5 13.25z"/></g></svg>');
-}
-
-%discussion-square-16-svg-prop {
-  --discussion-square-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.25 1a.75.75 0 010 1.5h-9a.75.75 0 00-.75.75v6.531l.706-.51a.75.75 0 01.88 1.214L1.19 11.858A.75.75 0 010 11.25v-8A2.25 2.25 0 012.25 1h9z"/><path fill-rule="evenodd" d="M6.25 4A2.25 2.25 0 004 6.25v4.534a2.25 2.25 0 002.25 2.25h6.041l2.52 1.824A.75.75 0 0016 14.25v-8A2.25 2.25 0 0013.75 4h-7.5zM5.5 6.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v6.531l-1.526-1.104a.75.75 0 00-.44-.143H6.25a.75.75 0 01-.75-.75V6.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%discussion-square-24-svg-prop {
-  --discussion-square-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.25 2A2.75 2.75 0 0117 4.75v.5a.75.75 0 01-1.5 0v-.5c0-.69-.56-1.25-1.25-1.25H3.75c-.69 0-1.25.56-1.25 1.25v10.94l2.531-2.026a.75.75 0 01.938 1.172l-3.75 3A.75.75 0 011 17.25V4.75A2.75 2.75 0 013.75 2h10.5z"/><path fill-rule="evenodd" d="M9.75 7A2.75 2.75 0 007 9.75v7.5A2.75 2.75 0 009.75 20h8.048c.284 0 .56.097.781.274l3.203 2.562A.75.75 0 0023 22.25V9.75A2.75 2.75 0 0020.25 7H9.75zM8.5 9.75c0-.69.56-1.25 1.25-1.25h10.5c.69 0 1.25.56 1.25 1.25v10.94l-1.984-1.587a2.75 2.75 0 00-1.718-.603H9.75c-.69 0-1.25-.56-1.25-1.25v-7.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%docker-16-svg-prop {
-  --docker-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.342 4.536l.15-.227.262.159.116.083c.28.216.869.768.996 1.684.223-.04.448-.06.673-.06.534 0 .893.124 1.097.227l.105.057.068.045.191.156-.066.2a2.044 2.044 0 01-.47.73c-.29.299-.8.652-1.609.698l-.178.005h-.148c-.37.977-.867 2.078-1.702 3.066a7.081 7.081 0 01-1.74 1.488 7.941 7.941 0 01-2.549.968c-.644.125-1.298.187-1.953.185-1.45 0-2.73-.288-3.517-.792-.703-.449-1.243-1.182-1.606-2.177a8.25 8.25 0 01-.461-2.83.516.516 0 01.432-.516l.068-.005h10.54l.092-.007.149-.016c.256-.034.646-.11.92-.27-.328-.543-.421-1.178-.268-1.854a3.3 3.3 0 01.3-.81l.108-.187zM2.89 5.784l.04.007a.127.127 0 01.077.082l.006.04v1.315l-.006.041a.127.127 0 01-.078.082l-.039.006H1.478a.124.124 0 01-.117-.088l-.007-.04V5.912l.007-.04a.127.127 0 01.078-.083l.039-.006H2.89zm1.947 0l.039.007a.127.127 0 01.078.082l.006.04v1.315l-.007.041a.127.127 0 01-.078.082l-.039.006H3.424a.125.125 0 01-.117-.088L3.3 7.23V5.913a.13.13 0 01.085-.123l.039-.007h1.413zm1.976 0l.039.007a.127.127 0 01.077.082l.007.04v1.315l-.007.041a.127.127 0 01-.078.082l-.039.006H5.4a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.039-.006h1.413zm1.952 0l.039.007a.127.127 0 01.078.082l.007.04v1.315a.13.13 0 01-.085.123l-.04.006H7.353a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.04-.006h1.412zm1.97 0l.039.007a.127.127 0 01.078.082l.006.04v1.315a.13.13 0 01-.085.123l-.039.006H9.322a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.04-.006h1.411zM4.835 3.892l.04.007a.127.127 0 01.077.081l.007.041v1.315a.13.13 0 01-.085.123l-.039.007H3.424a.125.125 0 01-.117-.09l-.007-.04V4.021a.13.13 0 01.085-.122l.039-.007h1.412zm1.976 0l.04.007a.127.127 0 01.077.081l.007.041v1.315a.13.13 0 01-.085.123l-.039.007H5.4a.125.125 0 01-.117-.09l-.006-.04V4.021l.006-.04a.127.127 0 01.078-.082l.039-.007h1.412zm1.953 0c.054 0 .1.037.117.088l.007.041v1.315a.13.13 0 01-.085.123l-.04.007H7.353a.125.125 0 01-.117-.09l-.006-.04V4.021l.006-.04a.127.127 0 01.078-.082l.04-.007h1.412zm0-1.892c.054 0 .1.037.117.088l.007.04v1.316a.13.13 0 01-.085.123l-.04.006H7.353a.124.124 0 01-.117-.088l-.006-.04V2.128l.006-.04a.127.127 0 01.078-.082L7.353 2h1.412z"/></svg>');
-}
-
-%docker-24-svg-prop {
-  --docker-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M17.97 7.445l.207-.31.36.217.159.112c.385.294 1.194 1.045 1.37 2.288.306-.053.616-.08.926-.082.734 0 1.227.17 1.508.309l.143.078.094.061.263.212-.09.272a2.775 2.775 0 01-.648.99c-.398.407-1.098.887-2.211.949l-.245.006h-.203c-.509 1.329-1.193 2.823-2.34 4.165a9.708 9.708 0 01-2.393 2.022 11.005 11.005 0 01-3.505 1.314c-.885.17-1.784.255-2.685.252-1.994 0-3.753-.391-4.836-1.076-.966-.61-1.71-1.605-2.208-2.957A11.082 11.082 0 011 12.422a.704.704 0 01.595-.7l.093-.007H16.18l.128-.009.204-.022c.353-.046.889-.15 1.267-.367-.452-.737-.58-1.6-.37-2.519.09-.384.228-.754.413-1.1l.148-.253zM4.974 9.14l.054.01c.05.017.09.058.107.11l.008.056v1.786l-.008.055a.173.173 0 01-.108.111l-.053.009H3.032a.17.17 0 01-.161-.12l-.009-.055V9.315l.009-.055a.173.173 0 01.107-.111l.054-.01h1.942zm2.676 0l.054.01c.05.017.09.058.107.11l.009.056v1.786l-.01.055a.173.173 0 01-.106.111l-.054.009H5.708a.171.171 0 01-.162-.12l-.009-.055V9.316c0-.078.05-.144.117-.167l.054-.01H7.65zm2.717 0l.054.01c.05.017.09.058.107.11l.008.056v1.786l-.008.055a.172.172 0 01-.108.111l-.053.009H8.425a.17.17 0 01-.161-.12l-.009-.055V9.315l.009-.055a.173.173 0 01.107-.111l.054-.01h1.942zm2.684 0l.054.009c.051.017.091.059.108.111l.009.056v1.786c0 .077-.05.143-.117.166l-.053.009H11.11a.17.17 0 01-.161-.12l-.01-.055V9.315l.01-.055a.173.173 0 01.107-.111l.054-.01h1.942zm2.709 0l.054.009c.05.017.09.059.108.111l.008.056v1.786c0 .077-.049.143-.117.166l-.053.009h-1.942a.17.17 0 01-.161-.12l-.009-.055V9.315l.009-.055a.173.173 0 01.107-.111l.054-.01h1.942zM7.65 6.57l.054.01c.05.017.09.058.107.11l.009.055v1.786a.176.176 0 01-.116.167l-.054.01H5.708a.172.172 0 01-.162-.121l-.008-.056V6.745c0-.077.049-.143.116-.166l.054-.009H7.65zm2.717 0l.053.01c.05.017.09.058.108.11l.008.055v1.786a.176.176 0 01-.115.167l-.054.01H8.425a.171.171 0 01-.161-.121l-.009-.056V6.745l.009-.055a.173.173 0 01.107-.11l.054-.01h1.942zm2.684 0c.075 0 .14.05.162.12l.009.055v1.786c0 .078-.05.144-.117.167l-.053.01H11.11a.171.171 0 01-.161-.121l-.01-.056V6.745l.01-.055a.173.173 0 01.107-.11l.054-.01h1.942zm0-2.57c.075 0 .14.05.162.12l.009.055v1.787c0 .078-.05.143-.117.166l-.053.01H11.11a.17.17 0 01-.161-.12l-.01-.056V4.175l.01-.055a.173.173 0 01.107-.111L11.11 4h1.942z"/></svg>');
-}
-
-%docker-color-16-svg-prop {
-  --docker-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%232396ED" d="M12.342 4.536l.15-.227.262.159.116.083c.28.216.869.768.996 1.684.223-.04.448-.06.673-.06.534 0 .893.124 1.097.227l.105.057.068.045.191.156-.066.2a2.044 2.044 0 01-.47.73c-.29.299-.8.652-1.609.698l-.178.005h-.148c-.37.977-.867 2.078-1.702 3.066a7.081 7.081 0 01-1.74 1.488 7.941 7.941 0 01-2.549.968c-.644.125-1.298.187-1.953.185-1.45 0-2.73-.288-3.517-.792-.703-.449-1.243-1.182-1.606-2.177a8.25 8.25 0 01-.461-2.83.516.516 0 01.432-.516l.068-.005h10.54l.092-.007.149-.016c.256-.034.646-.11.92-.27-.328-.543-.421-1.178-.268-1.854a3.3 3.3 0 01.3-.81l.108-.187zM2.89 5.784l.04.007a.127.127 0 01.077.082l.006.04v1.315l-.006.041a.127.127 0 01-.078.082l-.039.006H1.478a.124.124 0 01-.117-.088l-.007-.04V5.912l.007-.04a.127.127 0 01.078-.083l.039-.006H2.89zm1.947 0l.039.007a.127.127 0 01.078.082l.006.04v1.315l-.007.041a.127.127 0 01-.078.082l-.039.006H3.424a.125.125 0 01-.117-.088L3.3 7.23V5.913a.13.13 0 01.085-.123l.039-.007h1.413zm1.976 0l.039.007a.127.127 0 01.077.082l.007.04v1.315l-.007.041a.127.127 0 01-.078.082l-.039.006H5.4a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.039-.006h1.413zm1.952 0l.039.007a.127.127 0 01.078.082l.007.04v1.315a.13.13 0 01-.085.123l-.04.006H7.353a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.04-.006h1.412zm1.97 0l.039.007a.127.127 0 01.078.082l.006.04v1.315a.13.13 0 01-.085.123l-.039.006H9.322a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.04-.006h1.411zM4.835 3.892l.04.007a.127.127 0 01.077.081l.007.041v1.315a.13.13 0 01-.085.123l-.039.007H3.424a.125.125 0 01-.117-.09l-.007-.04V4.021a.13.13 0 01.085-.122l.039-.007h1.412zm1.976 0l.04.007a.127.127 0 01.077.081l.007.041v1.315a.13.13 0 01-.085.123l-.039.007H5.4a.125.125 0 01-.117-.09l-.006-.04V4.021l.006-.04a.127.127 0 01.078-.082l.039-.007h1.412zm1.953 0c.054 0 .1.037.117.088l.007.041v1.315a.13.13 0 01-.085.123l-.04.007H7.353a.125.125 0 01-.117-.09l-.006-.04V4.021l.006-.04a.127.127 0 01.078-.082l.04-.007h1.412zm0-1.892c.054 0 .1.037.117.088l.007.04v1.316a.13.13 0 01-.085.123l-.04.006H7.353a.124.124 0 01-.117-.088l-.006-.04V2.128l.006-.04a.127.127 0 01.078-.082L7.353 2h1.412z"/></svg>');
-}
-
-%docker-color-24-svg-prop {
-  --docker-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%232396ED" d="M17.97 7.445l.207-.31.36.217.159.112c.385.294 1.194 1.045 1.37 2.288.306-.053.616-.08.926-.082.734 0 1.227.17 1.508.309l.143.078.094.061.263.212-.09.272a2.775 2.775 0 01-.648.99c-.398.407-1.098.887-2.211.949l-.245.006h-.203c-.509 1.329-1.193 2.823-2.34 4.165a9.708 9.708 0 01-2.393 2.022 11.005 11.005 0 01-3.505 1.314c-.885.17-1.784.255-2.685.252-1.994 0-3.753-.391-4.836-1.076-.966-.61-1.71-1.605-2.208-2.957A11.082 11.082 0 011 12.422a.704.704 0 01.595-.7l.093-.007H16.18l.128-.009.204-.022c.353-.046.889-.15 1.267-.367-.452-.737-.58-1.6-.37-2.519.09-.384.228-.754.413-1.1l.148-.253zM4.974 9.14l.054.01c.05.017.09.058.107.11l.008.056v1.786l-.008.055a.173.173 0 01-.108.111l-.053.009H3.032a.17.17 0 01-.161-.12l-.009-.055V9.315l.009-.055a.173.173 0 01.107-.111l.054-.01h1.942zm2.676 0l.054.01c.05.017.09.058.107.11l.009.056v1.786l-.01.055a.173.173 0 01-.106.111l-.054.009H5.708a.171.171 0 01-.162-.12l-.009-.055V9.316c0-.078.05-.144.117-.167l.054-.01H7.65zm2.717 0l.054.01c.05.017.09.058.107.11l.008.056v1.786l-.008.055a.172.172 0 01-.108.111l-.053.009H8.425a.17.17 0 01-.161-.12l-.009-.055V9.315l.009-.055a.173.173 0 01.107-.111l.054-.01h1.942zm2.684 0l.054.009c.051.017.091.059.108.111l.009.056v1.786c0 .077-.05.143-.117.166l-.053.009H11.11a.17.17 0 01-.161-.12l-.01-.055V9.315l.01-.055a.173.173 0 01.107-.111l.054-.01h1.942zm2.709 0l.054.009c.05.017.09.059.108.111l.008.056v1.786c0 .077-.049.143-.117.166l-.053.009h-1.942a.17.17 0 01-.161-.12l-.009-.055V9.315l.009-.055a.173.173 0 01.107-.111l.054-.01h1.942zM7.65 6.57l.054.01c.05.017.09.058.107.11l.009.055v1.786a.176.176 0 01-.116.167l-.054.01H5.708a.172.172 0 01-.162-.121l-.008-.056V6.745c0-.077.049-.143.116-.166l.054-.009H7.65zm2.717 0l.053.01c.05.017.09.058.108.11l.008.055v1.786a.176.176 0 01-.115.167l-.054.01H8.425a.171.171 0 01-.161-.121l-.009-.056V6.745l.009-.055a.173.173 0 01.107-.11l.054-.01h1.942zm2.684 0c.075 0 .14.05.162.12l.009.055v1.786c0 .078-.05.144-.117.167l-.053.01H11.11a.171.171 0 01-.161-.121l-.01-.056V6.745l.01-.055a.173.173 0 01.107-.11l.054-.01h1.942zm0-2.57c.075 0 .14.05.162.12l.009.055v1.787c0 .078-.05.143-.117.166l-.053.01H11.11a.17.17 0 01-.161-.12l-.01-.056V4.175l.01-.055a.173.173 0 01.107-.111L11.11 4h1.942z"/></svg>');
-}
-
-%docs-16-svg-prop {
-  --docs-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.25 1A2.25 2.25 0 002 3.25v9.5A2.25 2.25 0 004.25 15h8.5c.69 0 1.25-.56 1.25-1.25V2.25C14 1.56 13.44 1 12.75 1h-8.5zM3.5 12.75c0 .414.336.75.75.75h8.25v-2H4.25a.75.75 0 00-.75.75v.5zm0-2.622c.235-.083.487-.128.75-.128h8.25V2.5H4.25a.75.75 0 00-.75.75v6.878z" clip-rule="evenodd"/></svg>');
-}
-
-%docs-24-svg-prop {
-  --docs-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h13.5A1.75 1.75 0 0021 21.25V2.75A1.75 1.75 0 0019.25 1H5.75zM19.5 17.5V2.75a.25.25 0 00-.25-.25H5.75c-.69 0-1.25.56-1.25 1.25V17.8c.375-.192.8-.3 1.25-.3H19.5zm-15 2.75c0 .69.56 1.25 1.25 1.25h13.5a.25.25 0 00.25-.25V19H5.75c-.69 0-1.25.56-1.25 1.25z" clip-rule="evenodd"/></svg>');
-}
-
-%docs-download-16-svg-prop {
-  --docs-download-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2 3.25A2.25 2.25 0 014.25 1h8.5c.69 0 1.25.56 1.25 1.25V4.5a.75.75 0 01-1.5 0v-2H4.25a.75.75 0 00-.75.75v6.878c.235-.083.487-.128.75-.128h.25a.75.75 0 010 1.5h-.25a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h1a.75.75 0 010 1.5h-1A2.25 2.25 0 012 12.75v-9.5z"/><path d="M8.826 10.826a.6.6 0 01.848 0l.726.725V9a.6.6 0 011.2 0v2.551l.726-.725a.6.6 0 11.848.848l-1.75 1.75a.6.6 0 01-.848 0l-1.75-1.75a.6.6 0 010-.848z"/><path fill-rule="evenodd" d="M11 6.05a4.95 4.95 0 100 9.9 4.95 4.95 0 000-9.9zM7.45 11a3.55 3.55 0 117.1 0 3.55 3.55 0 01-7.1 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%docs-download-24-svg-prop {
-  --docs-download-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3 3.75A2.75 2.75 0 015.75 1h13.5c.966 0 1.75.784 1.75 1.75v6.5a.75.75 0 01-1.5 0v-6.5a.25.25 0 00-.25-.25H5.75c-.69 0-1.25.56-1.25 1.25V17.8c.375-.192.8-.3 1.25-.3h1.5a.75.75 0 010 1.5h-1.5a1.25 1.25 0 100 2.5h3a.75.75 0 010 1.5h-3A2.75 2.75 0 013 20.25V3.75z"/><path d="M12.97 17.22a.75.75 0 011.06 0l1.22 1.22v-4.69a.75.75 0 011.5 0v4.69l1.22-1.22a.75.75 0 111.06 1.06l-2.5 2.5a.747.747 0 01-1.06 0l-2.5-2.5a.75.75 0 010-1.06z"/><path fill-rule="evenodd" d="M16 10a7 7 0 100 14 7 7 0 000-14zm-5.5 7a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%docs-link-16-svg-prop {
-  --docs-link-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M3.5 3.25a.75.75 0 01.75-.75H8A.75.75 0 008 1H4.25A2.25 2.25 0 002 3.25v9.5A2.25 2.25 0 004.25 15h8.5c.69 0 1.25-.56 1.25-1.25V7a.75.75 0 00-1.5 0v3H4.25c-.263 0-.515.045-.75.128V3.25zm0 9v.5c0 .414.336.75.75.75h8.25v-2H4.25a.75.75 0 00-.75.75z" clip-rule="evenodd"/><path d="M12.5 3.56v.69a.75.75 0 001.5 0v-2.5a.75.75 0 00-.75-.75h-2.5a.75.75 0 000 1.5h.69L9.47 4.47a.75.75 0 001.06 1.06l1.97-1.97z"/></g></svg>');
-}
-
-%docs-link-24-svg-prop {
-  --docs-link-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M4.5 3.75c0-.69.56-1.25 1.25-1.25h7.5a.75.75 0 000-1.5h-7.5A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h13.5A1.75 1.75 0 0021 21.25V8.75a.75.75 0 00-1.5 0v8.75H5.75c-.45 0-.875.108-1.25.3V3.75zm0 16.5c0 .69.56 1.25 1.25 1.25h13.5a.25.25 0 00.25-.25V19H5.75c-.69 0-1.25.56-1.25 1.25z" clip-rule="evenodd"/><path d="M19.5 3.56v1.69a.75.75 0 001.5 0v-3.5a.75.75 0 00-.75-.75h-3.5a.75.75 0 000 1.5h1.69l-2.97 2.97a.75.75 0 001.06 1.06l2.97-2.97z"/></g></svg>');
-}
-
-%docs-svg-prop {
-  @extend %docs-link-16-svg-prop;
-}
-
-%dollar-sign-16-svg-prop {
-  --dollar-sign-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.5.75a.75.75 0 00-1.5 0V2h-.594c-.9 0-1.766.353-2.405.985A3.36 3.36 0 003 5.375a3.36 3.36 0 001 2.39c.64.632 1.506.985 2.406.985H7v3.75H4.25a.75.75 0 000 1.5H7v1.25a.75.75 0 001.5 0V14h1.094c.9 0 1.766-.353 2.405-.985A3.36 3.36 0 0013 10.625a3.36 3.36 0 00-1-2.39 3.422 3.422 0 00-2.406-.985H8.5V3.5h3.25a.75.75 0 000-1.5H8.5V.75zM7 3.5h-.594c-.508 0-.994.2-1.35.552A1.86 1.86 0 004.5 5.375c0 .494.199.97.555 1.323.357.352.843.552 1.351.552H7V3.5zm1.5 5.25v3.75h1.094c.508 0 .994-.2 1.35-.552a1.86 1.86 0 00.556-1.323c0-.494-.199-.97-.555-1.323a1.922 1.922 0 00-1.351-.552H8.5z" clip-rule="evenodd"/></svg>');
-}
-
-%dollar-sign-24-svg-prop {
-  --dollar-sign-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12.5 1.75a.75.75 0 00-1.5 0V4H9.396c-1.165 0-2.282.46-3.107 1.28a4.365 4.365 0 000 6.19 4.406 4.406 0 003.107 1.28H11v5.75H5.75a.75.75 0 000 1.5H11v2.25a.75.75 0 001.5 0V20h2.104c1.165 0 2.282-.46 3.107-1.28a4.365 4.365 0 000-6.19 4.407 4.407 0 00-3.107-1.28H12.5V5.5h4.708a.75.75 0 000-1.5H12.5V1.75zM11 5.5H9.396c-.77 0-1.507.304-2.05.844a2.865 2.865 0 000 4.062c.543.54 1.28.844 2.05.844H11V5.5zm1.5 7.25v5.75h2.104c.77 0 1.507-.304 2.05-.844a2.864 2.864 0 000-4.062 2.906 2.906 0 00-2.05-.844H12.5z" clip-rule="evenodd"/></svg>');
-}
-
-%dot-16-svg-prop {
-  --dot-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 3a5 5 0 100 10A5 5 0 008 3z"/></svg>');
-}
-
-%dot-24-svg-prop {
-  --dot-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12 5a7 7 0 100 14 7 7 0 000-14z"/></svg>');
-}
-
-%dot-half-16-svg-prop {
-  --dot-half-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 3a5 5 0 100 10A5 5 0 008 3zm0 1.5v7a3.5 3.5 0 100-7z" clip-rule="evenodd"/></svg>');
-}
-
-%dot-half-24-svg-prop {
-  --dot-half-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 5a7 7 0 100 14 7 7 0 000-14zm0 1.5v11a5.5 5.5 0 100-11z" clip-rule="evenodd"/></svg>');
-}
-
-%download-16-svg-prop {
-  --download-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.75 1.75a.75.75 0 00-1.5 0v6.59L5.3 6.24a.75.75 0 10-1.1 1.02L7.45 10.76a.78.78 0 00.038.038.748.748 0 001.063-.037l3.25-3.5a.75.75 0 10-1.1-1.02l-1.95 2.1V1.75z"/><path d="M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z"/></g></svg>');
-}
-
-%download-24-svg-prop {
-  --download-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.75 2.75a.75.75 0 00-1.5 0v10.628L7.293 9.232a.75.75 0 10-1.086 1.036l5.25 5.499A.748.748 0 0012 16h.012a.747.747 0 00.53-.232l5.25-5.5a.75.75 0 00-1.085-1.036l-3.957 4.146V2.75z"/><path d="M2.75 14a.75.75 0 01.75.75v4.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25v-4.5a.75.75 0 011.5 0v4.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25v-4.5a.75.75 0 01.75-.75z"/></g></svg>');
-}
-
-%download-svg-prop {
-  @extend %download-16-svg-prop;
-}
-
-%droplet-16-svg-prop {
-  --droplet-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.477 1.212a.75.75 0 011.046 0l3.813 3.71A5.92 5.92 0 0114 9.04C13.999 12.337 11.307 15 7.999 15c-3.308 0-6-2.663-6-5.96a5.92 5.92 0 011.665-4.118l3.812-3.71zM4.721 5.987A4.42 4.42 0 003.5 9.04C3.5 11.498 5.51 13.5 8 13.5s4.5-2.002 4.5-4.46a4.42 4.42 0 00-1.22-3.053L8 2.797l-3.28 3.19z" clip-rule="evenodd"/></svg>');
-}
-
-%droplet-24-svg-prop {
-  --droplet-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1a.75.75 0 01.544.233l5.997 6.314A9.22 9.22 0 0121 13.84c0 5.045-4.016 9.16-9 9.16s-9-4.115-9-9.16c0-2.435.934-4.651 2.46-6.293l.005-.006 5.991-6.308A.75.75 0 0112 1zM6.556 8.571A7.719 7.719 0 004.5 13.84c0 4.244 3.371 7.66 7.5 7.66s7.5-3.416 7.5-7.66a7.719 7.719 0 00-2.056-5.269L12 2.84 6.556 8.571z" clip-rule="evenodd"/></svg>');
-}
-
-%duplicate-16-svg-prop {
-  --duplicate-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.25 0A2.25 2.25 0 000 2.25v7.5A2.25 2.25 0 002.25 12h.25a.75.75 0 000-1.5h-.25a.75.75 0 01-.75-.75v-7.5a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v.25a.75.75 0 001.5 0v-.25A2.25 2.25 0 009.75 0h-7.5z"/><path fill-rule="evenodd" d="M6.25 4A2.25 2.25 0 004 6.25v7.5A2.25 2.25 0 006.25 16h7.5A2.25 2.25 0 0016 13.75v-7.5A2.25 2.25 0 0013.75 4h-7.5zM5.5 6.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75v-7.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%duplicate-24-svg-prop {
-  --duplicate-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 1A2.75 2.75 0 001 3.75v10.5A2.75 2.75 0 003.75 17h1a.75.75 0 000-1.5h-1c-.69 0-1.25-.56-1.25-1.25V3.75c0-.69.56-1.25 1.25-1.25h10.5c.69 0 1.25.56 1.25 1.25v1a.75.75 0 001.5 0v-1A2.75 2.75 0 0014.25 1H3.75z"/><path fill-rule="evenodd" d="M9.75 7A2.75 2.75 0 007 9.75v10.5A2.75 2.75 0 009.75 23h10.5A2.75 2.75 0 0023 20.25V9.75A2.75 2.75 0 0020.25 7H9.75zM8.5 9.75c0-.69.56-1.25 1.25-1.25h10.5c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H9.75c-.69 0-1.25-.56-1.25-1.25V9.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%edit-16-svg-prop {
-  --edit-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M11.436 1.005A1.75 1.75 0 0113.902.79l.702.589a1.75 1.75 0 01.216 2.465l-5.704 6.798a4.75 4.75 0 01-1.497 1.187l-2.572 1.299a.75.75 0 01-1.056-.886l.833-2.759a4.75 4.75 0 01.908-1.68l5.704-6.798zm1.502.934a.25.25 0 00-.353.03l-.53.633 1.082.914.534-.636a.25.25 0 00-.031-.352l-.703-.59zm-.765 2.726l-1.082-.914-4.21 5.016a3.25 3.25 0 00-.621 1.15L5.933 11l1.01-.51a3.249 3.249 0 001.024-.812l4.206-5.013z" clip-rule="evenodd"/><path d="M3.25 3.5a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V9A.75.75 0 0115 9v4.75A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75v-9.5A2.25 2.25 0 013.25 2H6a.75.75 0 010 1.5H3.25z"/></g></svg>');
-}
-
-%edit-24-svg-prop {
-  --edit-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M17.055 2.884a2.75 2.75 0 013.89 0l.171.171a2.75 2.75 0 010 3.89l-9.005 9.005A4.75 4.75 0 0110.516 17L6.28 18.696a.75.75 0 01-.975-.975l1.695-4.237a4.749 4.749 0 011.051-1.595l9.005-9.005zm2.829 1.06a1.25 1.25 0 00-1.768 0l-.555.556L19.5 6.44l.555-.556a1.25 1.25 0 000-1.768l-.171-.172zM18.439 7.5L16.5 5.56l-7.39 7.39a3.25 3.25 0 00-.719 1.09l-1.045 2.614 2.613-1.046a3.25 3.25 0 001.091-.719L18.44 7.5z" clip-rule="evenodd"/><path d="M3.75 4.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V13a.75.75 0 011.5 0v7.25A2.75 2.75 0 0118.25 23H3.75A2.75 2.75 0 011 20.25V5.75A2.75 2.75 0 013.75 3H11a.75.75 0 010 1.5H3.75z"/></g></svg>');
-}
-
-%edit-svg-prop {
-  @extend %edit-16-svg-prop;
-}
-
-%entry-point-16-svg-prop {
-  --entry-point-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 2.5a5.494 5.494 0 00-4.558 2.42.75.75 0 01-1.242-.84 7 7 0 110 7.841.75.75 0 111.242-.841A5.5 5.5 0 108 2.5z"/><path d="M7.245 4.695a.75.75 0 00-.05 1.06l1.36 1.495H1.75a.75.75 0 000 1.5h6.805l-1.36 1.495a.75.75 0 001.11 1.01l2.5-2.75a.75.75 0 000-1.01l-2.5-2.75a.75.75 0 00-1.06-.05z"/></g></svg>');
-}
-
-%entry-point-24-svg-prop {
-  --entry-point-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 4.5a7.498 7.498 0 00-6.561 3.864.75.75 0 01-1.312-.728 9 9 0 110 8.728.75.75 0 011.312-.728A7.5 7.5 0 1012 4.5z"/><path d="M3 12a.75.75 0 01.75-.75h9.614l-3.129-2.955a.75.75 0 011.03-1.09l4.5 4.25a.75.75 0 010 1.09l-4.5 4.25a.75.75 0 01-1.03-1.09l3.129-2.955H3.75A.75.75 0 013 12z"/></g></svg>');
-}
-
-%envelope-sealed-fill-svg-prop {
-  @extend %mail-16-svg-prop;
-}
-
-%envelope-sealed-outline-svg-prop {
-  @extend %mail-16-svg-prop;
-}
-
-%envelope-unsealed--outline-svg-prop {
-  @extend %mail-open-16-svg-prop;
-}
-
-%envelope-unsealed-fill-svg-prop {
-  @extend %mail-open-16-svg-prop;
-}
-
-%event-16-svg-prop {
-  --event-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.675 4.173a.75.75 0 00-1.35 0l-1.14 2.359-2.546.38a.75.75 0 00-.418 1.273l1.85 1.84-.437 2.6a.75.75 0 001.094.786L8 12.19l2.272 1.22a.75.75 0 001.094-.785l-.437-2.602 1.85-1.839a.75.75 0 00-.418-1.273l-2.545-.38-1.14-2.359zM7.362 7.542L8 6.222l.638 1.32a.75.75 0 00.565.415l1.459.218-1.066 1.059a.75.75 0 00-.21.656l.247 1.476-1.278-.686a.75.75 0 00-.71 0l-1.278.686.248-1.476a.75.75 0 00-.211-.656l-1.066-1.06 1.46-.217a.75.75 0 00.564-.415z"/><path d="M12 .75a.75.75 0 00-1.5 0V1h-5V.75a.75.75 0 00-1.5 0V1H2.25A2.25 2.25 0 000 3.25v10.5A2.25 2.25 0 002.25 16h11.5A2.25 2.25 0 0016 13.75V3.25A2.25 2.25 0 0013.75 1H12V.75zm-8 2.5V2.5H2.25a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75V3.25a.75.75 0 00-.75-.75H12v.75a.75.75 0 01-1.5 0V2.5h-5v.75a.75.75 0 01-1.5 0z"/></g></svg>');
-}
-
-%event-24-svg-prop {
-  --event-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12.673 7.668a.75.75 0 00-1.345 0l-1.526 3.09-3.41.498a.75.75 0 00-.415 1.28l2.467 2.403-.582 3.395a.75.75 0 001.088.79L12 17.522l3.05 1.604a.75.75 0 001.088-.79l-.582-3.396 2.467-2.403a.75.75 0 00-.415-1.28l-3.41-.498-1.525-3.09zm-1.7 4.107L12 9.695l1.027 2.08a.75.75 0 00.564.41l2.298.336-1.662 1.619a.75.75 0 00-.216.664l.392 2.286-2.054-1.08a.75.75 0 00-.698 0l-2.054 1.08.392-2.286a.75.75 0 00-.216-.664L8.111 12.52l2.298-.336a.75.75 0 00.564-.41z"/><path d="M17 2a.75.75 0 00-1.5 0v1h-7V2A.75.75 0 007 2v1H4.75A2.75 2.75 0 002 5.75v14.5A2.75 2.75 0 004.75 23h14.5A2.75 2.75 0 0022 20.25V5.75A2.75 2.75 0 0019.25 3H17V2zM7 6V4.5H4.75c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25H17V6a.75.75 0 01-1.5 0V4.5h-7V6A.75.75 0 017 6z"/></g></svg>');
-}
-
-%exit-point-16-svg-prop {
-  --exit-point-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 8a6 6 0 018.514-5.45.75.75 0 01-.629 1.363 4.5 4.5 0 100 8.175.75.75 0 11.63 1.361A6 6 0 011 8z"/><path d="M11.245 4.695a.75.75 0 00-.05 1.06l1.36 1.495H6.75a.75.75 0 000 1.5h5.805l-1.36 1.495a.75.75 0 001.11 1.01l2.5-2.75a.748.748 0 00-.002-1.012l-2.498-2.748a.75.75 0 00-1.06-.05z"/></g></svg>');
-}
-
-%exit-point-24-svg-prop {
-  --exit-point-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3 12a7 7 0 0110.707-5.939.75.75 0 01-.795 1.272 5.5 5.5 0 100 9.334.75.75 0 01.795 1.272A7 7 0 013 12z"/><path d="M9 12a.75.75 0 01.75-.75h9.614l-3.129-2.955a.75.75 0 011.03-1.09l4.498 4.248a.748.748 0 010 1.093l-4.498 4.25a.75.75 0 01-1.03-1.091l3.129-2.955H9.75A.75.75 0 019 12z"/></g></svg>');
-}
-
-%exit-svg-prop {
-  @extend %external-link-16-svg-prop;
-}
-
-%expand-less-svg-prop {
-  @extend %minimize-16-svg-prop;
-}
-
-%expand-more-svg-prop {
-  @extend %maximize-16-svg-prop;
-}
-
-%external-link-16-svg-prop {
-  --external-link-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9 .75A.75.75 0 019.75 0h4.5c.206 0 .393.083.529.218l.001.002.002.001A.748.748 0 0115 .75v4.5a.75.75 0 01-1.5 0V2.56L7.28 8.78a.75.75 0 01-1.06-1.06l6.22-6.22H9.75A.75.75 0 019 .75z"/><path d="M3.25 3.5a.75.75 0 00-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0110.75 14h-7.5A2.25 2.25 0 011 11.75v-7.5A2.25 2.25 0 013.25 2h4a.75.75 0 010 1.5h-4z"/></g></svg>');
-}
-
-%external-link-24-svg-prop {
-  --external-link-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15 1.75a.75.75 0 01.75-.75h5.5a.748.748 0 01.75.75v5.5a.75.75 0 01-1.5 0V3.56L10.28 13.78a.75.75 0 11-1.06-1.06L19.44 2.5h-3.69a.75.75 0 01-.75-.75z"/><path d="M4.75 5.5c-.69 0-1.25.56-1.25 1.25v11.5c0 .69.56 1.25 1.25 1.25h11.5c.69 0 1.25-.56 1.25-1.25v-6.5a.75.75 0 011.5 0v6.5A2.75 2.75 0 0116.25 21H4.75A2.75 2.75 0 012 18.25V6.75A2.75 2.75 0 014.75 4h6.5a.75.75 0 010 1.5h-6.5z"/></g></svg>');
-}
-
-%eye-16-svg-prop {
-  --eye-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 5a3 3 0 100 6 3 3 0 000-6zM6.5 8a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"/><path d="M8 2C5.422 2 3.43 3.32 2.112 4.65A10.948 10.948 0 00.596 6.564c-.173.28-.31.536-.407.75a3 3 0 00-.122.31C.04 7.705 0 7.846 0 8s.041.296.067.375a3 3 0 00.122.31c.097.215.234.471.407.751.346.56.854 1.246 1.516 1.914C3.43 12.68 5.422 14 8 14s4.57-1.32 5.888-2.65a10.952 10.952 0 001.516-1.914c.173-.28.31-.536.407-.75.048-.107.09-.212.122-.31.026-.08.067-.221.067-.376s-.041-.296-.067-.375a2.978 2.978 0 00-.122-.31 6.777 6.777 0 00-.407-.751 10.952 10.952 0 00-1.516-1.914C12.57 3.32 10.578 2 8 2zM1.556 7.933a2.314 2.314 0 00-.03.067l.03.067c.065.145.17.344.316.58a9.45 9.45 0 001.306 1.647C4.332 11.458 5.964 12.5 8 12.5s3.668-1.042 4.822-2.206a9.45 9.45 0 001.306-1.646A5.336 5.336 0 0014.473 8a5.335 5.335 0 00-.346-.648 9.452 9.452 0 00-1.305-1.646C11.668 4.542 10.036 3.5 8 3.5S4.332 4.542 3.178 5.706a9.45 9.45 0 00-1.306 1.646 5.316 5.316 0 00-.316.58z"/></g></svg>');
-}
-
-%eye-24-svg-prop {
-  --eye-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm-2.5 4a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"/><path d="M12 3C8.135 3 5.14 5.088 3.15 7.162c-1.001 1.043-1.767 2.1-2.286 2.936-.26.417-.46.785-.6 1.074-.069.143-.127.275-.169.388a1.952 1.952 0 00-.058.177A1.024 1.024 0 000 12c0 .116.025.216.037.263.017.06.037.12.058.177.042.113.1.245.17.388.138.289.34.657.599 1.074a18.14 18.14 0 002.285 2.936C5.14 18.912 8.135 21 12 21c3.864 0 6.86-2.088 8.85-4.162 1.001-1.043 1.767-2.1 2.286-2.936.26-.417.46-.785.6-1.074.069-.143.127-.275.169-.388a1.98 1.98 0 00.058-.177c.012-.047.037-.147.037-.263 0-.116-.025-.216-.037-.263a1.98 1.98 0 00-.058-.177 4.709 4.709 0 00-.17-.388c-.139-.289-.34-.657-.599-1.074a18.146 18.146 0 00-2.285-2.936C18.86 5.088 15.865 3 12 3zM1.615 12.177a4.225 4.225 0 01-.08-.177c.02-.048.047-.107.08-.177.113-.233.287-.554.523-.934a16.641 16.641 0 012.093-2.688C6.076 6.28 8.705 4.5 12 4.5c3.294 0 5.924 1.78 7.768 3.701a16.639 16.639 0 012.094 2.688c.236.38.41.701.523.934.033.07.06.129.08.177a4.03 4.03 0 01-.08.177c-.113.233-.287.554-.523.934a16.639 16.639 0 01-2.093 2.688C17.924 17.72 15.294 19.5 12 19.5s-5.925-1.78-7.769-3.701a16.641 16.641 0 01-2.093-2.688c-.236-.38-.41-.701-.523-.934z"/></g></svg>');
-}
-
-%eye-off-16-svg-prop {
-  --eye-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.28 1.22a.75.75 0 00-1.06 1.06l1.664 1.665A10.99 10.99 0 00.977 5.994c-.295.41-.524.791-.683 1.103a4.16 4.16 0 00-.194.431A1.4 1.4 0 000 8c0 .155.041.296.067.375a3 3 0 00.122.31c.097.215.234.471.407.751.346.56.854 1.246 1.516 1.914C3.43 12.68 5.422 14 8 14c1.49 0 2.786-.442 3.868-1.071l1.852 1.851a.75.75 0 101.06-1.06l-4.645-4.646a.383.383 0 00-.008-.007v-.001l-3.19-3.19a.555.555 0 00-.014-.014L2.28 1.22zm3.127 5.248L3.95 5.01a9.444 9.444 0 00-1.754 1.857 7.362 7.362 0 00-.566.911c-.046.09-.08.164-.104.221l.03.067c.065.145.17.344.316.58a9.45 9.45 0 001.306 1.647C4.332 11.458 5.964 12.5 8 12.5c1.028 0 1.95-.264 2.763-.677l-1.23-1.23C9.078 10.858 8.552 11 8 11a3 3 0 01-3-3c0-.553.142-1.079.407-1.532zm2.985 2.985L6.547 7.608A1.62 1.62 0 006.5 8 1.5 1.5 0 008 9.5c.137 0 .269-.016.392-.047zM8 3.5c-.306 0-.602.023-.887.067a.75.75 0 11-.226-1.483C7.247 2.029 7.617 2 8 2c2.578 0 4.57 1.32 5.888 2.65.662.668 1.17 1.354 1.516 1.914.173.28.31.536.407.75.048.107.09.212.122.31.026.08.067.221.067.376 0 .21-.079.42-.126.537a4.99 4.99 0 01-.251.524c-.21.384-.515.857-.909 1.355a.75.75 0 11-1.176-.93c.343-.434.6-.836.768-1.144.078-.143.133-.258.168-.342a5.336 5.336 0 00-.346-.648 9.452 9.452 0 00-1.306-1.646C11.668 4.542 10.036 3.5 8 3.5zm6.511 4.604l-.002-.008.001.005.001.003z"/></g></svg>');
-}
-
-%eye-off-24-svg-prop {
-  --eye-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.28 1.22a.75.75 0 00-1.06 1.06l3.468 3.468C3.294 6.87 2.204 8.154 1.437 9.236a15.323 15.323 0 00-1.02 1.635c-.117.22-.21.415-.277.574-.033.08-.063.16-.086.234A1.102 1.102 0 000 12c0 .116.025.216.037.263.017.06.037.12.058.177.042.113.1.245.17.388.138.289.34.657.599 1.074a18.14 18.14 0 002.285 2.936C5.14 18.912 8.135 21 12 21c2.361 0 4.4-.78 6.08-1.86l3.64 3.64a.75.75 0 101.06-1.06L2.28 1.22zm10.88 13l-3.38-3.38c-.18.345-.28.738-.28 1.16a2.5 2.5 0 002.5 2.5c.422 0 .815-.1 1.16-.28zM8.688 9.75A3.976 3.976 0 008 12a4 4 0 004 4c.835 0 1.609-.25 2.251-.688l2.74 2.74c-1.43.863-3.1 1.448-4.991 1.448-3.295 0-5.925-1.78-7.769-3.701a16.641 16.641 0 01-2.093-2.688c-.236-.38-.41-.701-.523-.934a4.225 4.225 0 01-.08-.177 5.8 5.8 0 01.207-.426c.202-.38.51-.893.919-1.47.733-1.036 1.776-2.253 3.094-3.288l2.933 2.933zM12 4.5c-.813 0-1.583.108-2.31.299a.75.75 0 11-.38-1.451A10.568 10.568 0 0112 3c3.864 0 6.86 2.088 8.85 4.162 1.001 1.043 1.767 2.1 2.286 2.936.26.417.46.785.6 1.074.069.143.127.275.169.388.021.056.041.117.058.177.012.047.037.147.037.263 0 .171-.057.332-.08.396-.034.098-.08.208-.134.326-.109.236-.265.535-.465.874-.4.68-.99 1.551-1.759 2.455a.75.75 0 01-1.142-.973 16.232 16.232 0 001.608-2.242 8.709 8.709 0 00.438-.836 4.03 4.03 0 00-.081-.177 10.392 10.392 0 00-.523-.934 16.639 16.639 0 00-2.093-2.688C17.924 6.28 15.294 4.5 12 4.5zm10.516 7.365z"/></g></svg>');
-}
-
-%f5-16-svg-prop {
-  --f5-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.777 4.048c-.086.354-.13.722-.213 1.098a39.715 39.715 0 00-3.668-.285c-.112.351-.217.696-.337 1.071 2.318.143 3.444.754 4.112 1.473.65.728.788 1.533.75 2.28-.084 1.213-.619 1.98-1.353 2.549a4.712 4.712 0 01-2.361.898c-1.061.08-2.48-.173-2.782-.358-.182-.414-.36-.83-.553-1.285-.047-.096-.077-.196.056-.31.206-.199.405-.39.613-.593.093-.09.195-.174.273-.045.285.44.552.844.82 1.246.304.449.768.858 1.78.79.851-.076 1.498-.72 1.567-1.428.075-1.31-1.251-2.24-4.699-2.538.662-1.997 1.306-3.93 1.822-5.466a27.93 27.93 0 012.302.198c.535.068 1.033.193 1.532.25a7 7 0 00-11.076 8.555c.297.002.502-.064.525-.192.027-.133.004-.34-.02-.549a32.121 32.121 0 01-.136-4.343c-.355.015-.674.031-.98.05.013-.276.028-.536.05-.807.302-.029.621-.054.972-.084.015-.237.032-.466.053-.697.157-1.418 1.65-2.285 2.893-2.62.552-.134.89-.176 1.154-.19.096-.003.2-.007.302-.007.258 0 .52.024.685.137.268.2.533.4.815.623.028.038.059.098-.011.201l-.386.452c-.076.092-.201.067-.307.039a32.529 32.529 0 00-.652-.323c-.392-.174-.798-.354-1.25-.336-.281.023-.554.311-.582.706-.04.6-.066 1.215-.088 1.882a100.06 100.06 0 012.389-.04l-.001.552c-.27.12-.523.241-.792.364-.556.006-1.085.01-1.617.02a72.993 72.993 0 00.07 4.627c.014.22.024.444.088.593.076.189.513.334 1.464.387l.014.483c-1.549-.046-3.036-.194-4.228-.408a7 7 0 0010.991-8.62z"/></svg>');
-}
-
-%f5-24-svg-prop {
-  --f5-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M20.253 6.354c-.123.506-.187 1.031-.305 1.568a56.737 56.737 0 00-5.24-.406c-.16.502-.31.993-.482 1.53 3.311.204 4.92 1.076 5.875 2.104.928 1.04 1.125 2.19 1.071 3.256-.12 1.734-.884 2.83-1.933 3.642-1.061.8-2.345 1.197-3.373 1.283-1.515.114-3.542-.247-3.973-.511-.26-.59-.516-1.186-.791-1.835-.067-.138-.11-.28.08-.445.295-.282.578-.556.877-.845.132-.13.278-.25.389-.065.407.629.79 1.206 1.172 1.78.434.641 1.096 1.226 2.543 1.128 1.215-.108 2.14-1.028 2.238-2.04.107-1.872-1.788-3.2-6.713-3.625.945-2.853 1.867-5.614 2.603-7.809 1.17.054 2.253.15 3.288.283.765.097 1.476.276 2.19.358A9.978 9.978 0 0011.998 2C6.477 2 2 6.477 2 12a9.953 9.953 0 001.947 5.926c.423.003.717-.091.749-.274.039-.191.006-.487-.027-.785-.2-1.962-.271-4.081-.196-6.204-.507.022-.962.045-1.399.07.018-.392.04-.764.07-1.152.432-.041.888-.077 1.39-.12.021-.338.046-.665.075-.996.225-2.025 2.357-3.263 4.134-3.741.788-.192 1.27-.253 1.648-.273.137-.004.284-.01.431-.01.368 0 .742.035.979.196.383.287.761.573 1.164.89.04.055.084.14-.016.287-.185.217-.363.423-.551.646-.108.131-.288.096-.44.055a46.47 46.47 0 00-.93-.46c-.56-.25-1.14-.506-1.785-.48-.403.032-.793.444-.833 1.007a84.509 84.509 0 00-.125 2.69 142.94 142.94 0 013.412-.057l-.001.788c-.384.171-.746.345-1.131.52-.794.009-1.55.015-2.31.028-.036 2.266-.002 4.523.1 6.61.02.315.035.634.125.848.109.269.733.476 2.092.553.005.236.012.46.02.689-2.212-.065-4.337-.276-6.04-.583A9.968 9.968 0 0012 22c5.524 0 10-4.477 10-10a9.952 9.952 0 00-1.746-5.646z"/></svg>');
-}
-
-%f5-color-16-svg-prop {
-  --f5-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23E4002B" d="M13.777 4.048c-.086.354-.13.722-.213 1.098a39.715 39.715 0 00-3.668-.285c-.112.351-.217.696-.337 1.071 2.318.143 3.444.754 4.112 1.473.65.728.788 1.533.75 2.28-.084 1.213-.619 1.98-1.353 2.549a4.712 4.712 0 01-2.361.898c-1.061.08-2.48-.173-2.782-.358-.182-.414-.36-.83-.553-1.285-.047-.096-.077-.196.056-.31.206-.199.405-.39.613-.593.093-.09.195-.174.273-.045.285.44.552.844.82 1.246.304.449.768.858 1.78.79.851-.076 1.498-.72 1.567-1.428.075-1.31-1.251-2.24-4.699-2.538.662-1.997 1.306-3.93 1.822-5.466a27.93 27.93 0 012.302.198c.535.068 1.033.193 1.532.25a7 7 0 00-11.076 8.555c.297.002.502-.064.525-.192.027-.133.004-.34-.02-.549a32.121 32.121 0 01-.136-4.343c-.355.015-.674.031-.98.05.013-.276.028-.536.05-.807.302-.029.621-.054.972-.084.015-.237.032-.466.053-.697.157-1.418 1.65-2.285 2.893-2.62.552-.134.89-.176 1.154-.19.096-.003.2-.007.302-.007.258 0 .52.024.685.137.268.2.533.4.815.623.028.038.059.098-.011.201l-.386.452c-.076.092-.201.067-.307.039a32.529 32.529 0 00-.652-.323c-.392-.174-.798-.354-1.25-.336-.281.023-.554.311-.582.706-.04.6-.066 1.215-.088 1.882a100.06 100.06 0 012.389-.04l-.001.552c-.27.12-.523.241-.792.364-.556.006-1.085.01-1.617.02a72.993 72.993 0 00.07 4.627c.014.22.024.444.088.593.076.189.513.334 1.464.387l.014.483c-1.549-.046-3.036-.194-4.228-.408a7 7 0 0010.991-8.62z"/><path fill="%23fff" d="M14.42 9.684c.038-.746-.1-1.55-.75-2.279-.667-.72-1.794-1.33-4.112-1.473.12-.375.226-.72.337-1.071 1.386.049 2.62.149 3.668.285.083-.376.128-.744.214-1.098a6.934 6.934 0 00-.339-.454c-.499-.058-.996-.182-1.532-.251a27.93 27.93 0 00-2.301-.198c-.516 1.536-1.16 3.469-1.822 5.467 3.447.298 4.773 1.227 4.699 2.538-.069.708-.716 1.352-1.567 1.428-1.013.068-1.476-.34-1.78-.79-.268-.402-.535-.806-.82-1.246-.078-.129-.18-.045-.273.045-.209.203-.407.395-.614.592-.132.116-.103.215-.056.312.193.454.373.87.554 1.284.302.185 1.72.438 2.782.358a4.714 4.714 0 002.36-.898c.735-.57 1.27-1.337 1.353-2.55z"/><path fill="%23fff" d="M2.363 12.148c.132.18.273.354.422.52 1.193.215 2.68.363 4.23.408-.006-.16-.01-.317-.015-.483-.951-.053-1.388-.198-1.464-.386-.064-.15-.075-.373-.088-.594a72.784 72.784 0 01-.07-4.627c.532-.01 1.061-.014 1.617-.02.27-.123.523-.244.792-.364v-.551c-.823.003-1.604.017-2.387.039.022-.667.048-1.282.087-1.883.028-.394.301-.683.583-.705.451-.018.857.162 1.25.336.216.105.43.209.651.323.106.028.232.052.307-.04l.386-.451c.07-.104.04-.163.011-.201a39.675 39.675 0 00-.815-.624c-.165-.112-.427-.136-.685-.136-.102 0-.206.004-.301.007-.265.014-.602.056-1.154.19-1.244.335-2.736 1.202-2.894 2.62-.02.231-.037.46-.052.697-.351.03-.671.055-.973.084-.022.271-.037.532-.05.806.306-.018.625-.033.98-.049a32.19 32.19 0 00.137 4.343c.023.209.046.416.019.55-.022.127-.228.193-.524.191z"/></svg>');
-}
-
-%f5-color-24-svg-prop {
-  --f5-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23E4002B" d="M20.253 6.354c-.123.506-.187 1.031-.305 1.568a56.737 56.737 0 00-5.24-.406c-.16.502-.31.993-.482 1.53 3.311.204 4.92 1.076 5.875 2.104.928 1.04 1.125 2.19 1.071 3.256-.12 1.734-.884 2.83-1.933 3.642-1.061.8-2.345 1.197-3.373 1.283-1.515.114-3.542-.247-3.973-.511-.26-.59-.516-1.186-.791-1.835-.067-.138-.11-.28.08-.445.295-.282.578-.556.877-.845.132-.13.278-.25.389-.065.407.629.79 1.206 1.172 1.78.434.641 1.096 1.226 2.543 1.128 1.215-.108 2.14-1.028 2.238-2.04.107-1.872-1.788-3.2-6.713-3.625.945-2.853 1.867-5.614 2.603-7.809 1.17.054 2.253.15 3.288.283.765.097 1.476.276 2.19.358A9.978 9.978 0 0011.998 2C6.477 2 2 6.477 2 12a9.953 9.953 0 001.947 5.926c.423.003.717-.091.749-.274.039-.191.006-.487-.027-.785-.2-1.962-.271-4.081-.196-6.204-.507.022-.962.045-1.399.07.018-.392.04-.764.07-1.152.432-.041.888-.077 1.39-.12.021-.338.046-.665.075-.996.225-2.025 2.357-3.263 4.134-3.741.788-.192 1.27-.253 1.648-.273.137-.004.284-.01.431-.01.368 0 .742.035.979.196.383.287.761.573 1.164.89.04.055.084.14-.016.287-.185.217-.363.423-.551.646-.108.131-.288.096-.44.055a46.47 46.47 0 00-.93-.46c-.56-.25-1.14-.506-1.785-.48-.403.032-.793.444-.833 1.007a84.509 84.509 0 00-.125 2.69 142.94 142.94 0 013.412-.057l-.001.788c-.384.171-.746.345-1.131.52-.794.009-1.55.015-2.31.028-.036 2.266-.002 4.523.1 6.61.02.315.035.634.125.848.109.269.733.476 2.092.553.005.236.012.46.02.689-2.212-.065-4.337-.276-6.04-.583A9.968 9.968 0 0012 22c5.524 0 10-4.477 10-10a9.952 9.952 0 00-1.746-5.646z"/><path fill="%23fff" d="M21.172 14.406c.053-1.067-.144-2.216-1.072-3.256-.954-1.028-2.563-1.9-5.874-2.104.172-.537.322-1.028.481-1.53 1.98.07 3.741.212 5.24.406.118-.537.183-1.062.305-1.568a9.887 9.887 0 00-.483-.649c-.713-.082-1.424-.26-2.19-.358a39.903 39.903 0 00-3.287-.283c-.737 2.195-1.658 4.956-2.603 7.81 4.925.426 6.82 1.753 6.713 3.626-.098 1.011-1.023 1.931-2.239 2.04-1.446.097-2.108-.487-2.542-1.128-.383-.576-.765-1.152-1.173-1.78-.11-.185-.257-.065-.388.064-.299.29-.582.563-.877.846-.19.165-.148.306-.08.444.275.65.532 1.245.79 1.836.432.264 2.459.625 3.974.511 1.028-.086 2.312-.483 3.373-1.283 1.049-.814 1.813-1.91 1.932-3.644z"/><path fill="%23fff" d="M3.946 17.926c.19.257.391.505.604.743 1.704.306 3.829.518 6.041.582l-.02-.689c-1.359-.077-1.983-.284-2.092-.553-.09-.213-.106-.532-.126-.847a103.977 103.977 0 01-.1-6.61c.76-.014 1.517-.02 2.31-.029.386-.175.748-.349 1.132-.52l.002-.788a143.01 143.01 0 00-3.412.056c.031-.952.069-1.832.124-2.69.04-.563.43-.975.833-1.007.645-.025 1.225.231 1.785.48.31.15.615.299.931.461.152.04.331.076.44-.056.187-.222.366-.429.55-.645.1-.148.057-.233.016-.287a56.679 56.679 0 00-1.164-.89c-.237-.16-.61-.196-.979-.196-.146 0-.294.005-.43.01-.379.02-.86.08-1.65.272-1.775.479-3.908 1.717-4.133 3.742-.03.331-.053.658-.075.997-.501.042-.958.078-1.389.12-.031.387-.053.76-.07 1.151.436-.025.891-.048 1.399-.07a45.987 45.987 0 00.195 6.204c.033.299.066.594.027.785-.032.183-.325.277-.749.274z"/></svg>');
-}
-
-%facebook-16-svg-prop {
-  --facebook-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M15 8a7 7 0 00-7-7 7 7 0 00-1.094 13.915v-4.892H5.13V8h1.777V6.458c0-1.754 1.045-2.724 2.644-2.724.766 0 1.567.137 1.567.137v1.723h-.883c-.87 0-1.14.54-1.14 1.093V8h1.941l-.31 2.023H9.094v4.892A7.001 7.001 0 0015 8z"/></svg>');
-}
-
-%facebook-24-svg-prop {
-  --facebook-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M23 12c0-6.076-4.924-11-11-11S1 5.924 1 12c0 5.491 4.022 10.042 9.281 10.867V15.18H7.488V12h2.793V9.577c0-2.757 1.642-4.28 4.155-4.28 1.204 0 2.462.215 2.462.215v2.707h-1.387c-1.367 0-1.792.848-1.792 1.719V12h3.05l-.487 3.18h-2.563v7.687C18.979 22.042 23 17.49 23 12z"/></svg>');
-}
-
-%facebook-color-16-svg-prop {
-  --facebook-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%231877F2" d="M15 8a7 7 0 00-7-7 7 7 0 00-1.094 13.915v-4.892H5.13V8h1.777V6.458c0-1.754 1.045-2.724 2.644-2.724.766 0 1.567.137 1.567.137v1.723h-.883c-.87 0-1.14.54-1.14 1.093V8h1.941l-.31 2.023H9.094v4.892A7.001 7.001 0 0015 8z"/><path fill="%23fff" d="M10.725 10.023L11.035 8H9.094V6.687c0-.553.27-1.093 1.14-1.093h.883V3.87s-.801-.137-1.567-.137c-1.6 0-2.644.97-2.644 2.724V8H5.13v2.023h1.777v4.892a7.037 7.037 0 002.188 0v-4.892h1.63z"/></svg>');
-}
-
-%facebook-color-24-svg-prop {
-  --facebook-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%231877F2" d="M23 12c0-6.076-4.924-11-11-11S1 5.924 1 12c0 5.491 4.022 10.042 9.281 10.867V15.18H7.488V12h2.793V9.577c0-2.757 1.642-4.28 4.155-4.28 1.204 0 2.462.215 2.462.215v2.707h-1.387c-1.367 0-1.792.848-1.792 1.719V12h3.05l-.487 3.18h-2.563v7.687C18.979 22.042 23 17.49 23 12z"/><path fill="%23fff" d="M16.282 15.18L16.77 12h-3.051V9.937c0-.87.425-1.718 1.792-1.718h1.387V5.512s-1.258-.215-2.462-.215c-2.513 0-4.155 1.523-4.155 4.28V12H7.488v3.18h2.793v7.687a11.065 11.065 0 003.438 0V15.18h2.563z"/></svg>');
-}
-
-%fast-forward-16-svg-prop {
-  --fast-forward-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.926 3.364A1.25 1.25 0 007 4.416v1.806L2.962 3.427A1.25 1.25 0 001 4.454v7.092a1.25 1.25 0 001.962 1.027L7 9.778v1.806a1.25 1.25 0 001.926 1.052L14.5 9.052a1.25 1.25 0 000-2.103L8.926 3.364zM13.363 8L8.5 11.126V4.874L13.363 8zM2.5 11.069V4.93L6.932 8 2.5 11.069z" clip-rule="evenodd"/></svg>');
-}
-
-%fast-forward-24-svg-prop {
-  --fast-forward-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.812 5.38C12.66 4.5 11 5.322 11 6.77v3.331L4.812 5.38C3.66 4.5 2 5.322 2 6.77v10.458c0 1.449 1.66 2.27 2.812 1.391L11 13.897v3.332c0 1.449 1.66 2.27 2.812 1.391l6.851-5.229a1.75 1.75 0 000-2.782l-6.851-5.23zM12.5 6.77a.25.25 0 01.402-.199l6.851 5.23a.25.25 0 010 .397l-6.851 5.229a.25.25 0 01-.402-.2V6.772zm-9 0a.25.25 0 01.402-.199l7.061 5.39v.077l-7.061 5.389a.25.25 0 01-.402-.2V6.772z" clip-rule="evenodd"/></svg>');
-}
-
-%file-16-svg-prop {
-  --file-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v11.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75V5.457c0-.331-.132-.65-.366-.884L10.427.366A1.25 1.25 0 009.543 0H3.25zM2.5 2.25a.75.75 0 01.75-.75H9v3.75c0 .414.336.75.75.75h3.75v7.75a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V2.25zm9.94 2.25L10.5 2.56V4.5h1.94z" clip-rule="evenodd"/></svg>');
-}
-
-%file-24-svg-prop {
-  --file-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V8.664c0-.464-.184-.909-.513-1.237l-5.914-5.914A1.75 1.75 0 0013.336 1H5.75zM4.5 3.75c0-.69.56-1.25 1.25-1.25H13v5.75c0 .414.336.75.75.75h5.75v11.25c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V3.75zM18.44 7.5L14.5 3.56V7.5h3.94z" clip-rule="evenodd"/></svg>');
-}
-
-%file-change-16-svg-prop {
-  --file-change-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v11.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75V5.457c0-.331-.132-.65-.366-.884L10.427.366A1.25 1.25 0 009.543 0H3.25zM2.5 2.25a.75.75 0 01.75-.75H9v3.75c0 .414.336.75.75.75h3.75v7.75a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V2.25zm9.94 2.25L10.5 2.56V4.5h1.94zM9.583 9.156z" clip-rule="evenodd"/><path d="M5.5 8.595C5.77 8.325 6.23 8 6.876 8c.904 0 1.44.71 1.7 1.017.37.443.464.483.55.483.194 0 .375-.18.458-.344a.75.75 0 011.338.68 2.222 2.222 0 01-.422.57c-.27.269-.73.594-1.374.594-.904 0-1.44-.71-1.7-1.017-.37-.443-.465-.483-.55-.483-.2 0-.367.181-.458.344a.75.75 0 01-1.338-.68c.107-.212.254-.402.422-.57z"/></g></svg>');
-}
-
-%file-change-24-svg-prop {
-  --file-change-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.458 15.328c.218-.26.487-.58.899-.745a1.12 1.12 0 01.778-.026c.324.1.766.356 1.313.95.667.726 1.325 1.17 1.979 1.37.667.204 1.27.135 1.774-.067a3.433 3.433 0 001.127-.768 5.357 5.357 0 00.41-.459l.02-.022.032-.04.012-.013a.75.75 0 10-1.104-1.016c-.05.054-.101.115-.156.18-.218.26-.487.58-.899.745a1.12 1.12 0 01-.778.026c-.324-.1-.766-.356-1.313-.95-.667-.726-1.325-1.17-1.979-1.37a2.619 2.619 0 00-1.774.067 3.433 3.433 0 00-1.127.768 5.4 5.4 0 00-.326.356l-.085.103-.018.022a4.557 4.557 0 01-.045.053.75.75 0 101.104 1.016c.05-.054.101-.115.156-.18z"/><path fill-rule="evenodd" d="M3 3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237V20.25A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25V3.75zM5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-check-16-svg-prop {
-  --file-check-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M3.25 1.5a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h4a.75.75 0 010 1.5h-4A2.25 2.25 0 011 13.75V2.25A2.25 2.25 0 013.25 0h6.293c.331 0 .65.132.884.366l4.207 4.207c.234.235.366.553.366.884V6.75a.75.75 0 01-1.5 0V6H9.75A.75.75 0 019 5.25V1.5H3.25zm7.25 1.06l1.94 1.94H10.5V2.56z"/><path d="M16 12a4 4 0 11-8 0 4 4 0 018 0zm-1.712-1.272a.75.75 0 01-.016 1.06l-2.406 2.334a.75.75 0 01-1.044 0l-1.094-1.06a.75.75 0 011.044-1.078l.572.555 1.884-1.827a.75.75 0 011.06.016z"/></g></svg>');
-}
-
-%file-check-24-svg-prop {
-  --file-check-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25H11a.75.75 0 010 1.5H5.75A2.75 2.75 0 013 20.25V3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237V13a.75.75 0 01-1.5 0V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z"/><path d="M22 19a5 5 0 11-10 0 5 5 0 0110 0zm-1.879-2.03a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-1.591-1.59a.75.75 0 111.06-1.061l1.06 1.06 2.97-2.97a.75.75 0 011.061 0z"/></g></svg>');
-}
-
-%file-diff-16-svg-prop {
-  --file-diff-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.5 6.25a.75.75 0 00-1.5 0V7.5H5.75a.75.75 0 000 1.5H7v1.25a.75.75 0 001.5 0V9h1.25a.75.75 0 000-1.5H8.5V6.25zM5.75 11.5a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z"/><path fill-rule="evenodd" d="M1 2.25A2.25 2.25 0 013.25 0h6.293c.331 0 .65.132.884.366l4.207 4.207c.234.235.366.553.366.884v8.293A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V2.25zm2.25-.75a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6H9.75A.75.75 0 019 5.25V1.5H3.25zm7.25 1.06l1.94 1.94H10.5V2.56z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-diff-24-svg-prop {
-  --file-diff-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.5 10.25a.75.75 0 00-1.5 0v2.25H8.75a.75.75 0 000 1.5H11v2.25a.75.75 0 001.5 0V14h2.25a.75.75 0 000-1.5H12.5v-2.25zM8.75 18a.75.75 0 000 1.5h6a.75.75 0 000-1.5h-6z"/><path fill-rule="evenodd" d="M3 3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237V20.25A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25V3.75zM5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-fill-svg-prop {
-  @extend %file-16-svg-prop;
-}
-
-%file-minus-16-svg-prop {
-  --file-minus-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.75 9a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/><path fill-rule="evenodd" d="M1 2.25A2.25 2.25 0 013.25 0h6.293c.331 0 .65.132.884.366l4.207 4.207c.234.235.366.553.366.884v8.293A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V2.25zm2.25-.75a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6H9.75A.75.75 0 019 5.25V1.5H3.25zm7.25 1.06l1.94 1.94H10.5V2.56z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-minus-24-svg-prop {
-  --file-minus-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.75 14a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"/><path fill-rule="evenodd" d="M3 3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237V20.25A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25V3.75zM5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-outline-svg-prop {
-  @extend %file-16-svg-prop;
-}
-
-%file-plus-16-svg-prop {
-  --file-plus-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 7a.75.75 0 01.75.75V9h1.25a.75.75 0 010 1.5H8.5v1.25a.75.75 0 01-1.5 0V10.5H5.75a.75.75 0 010-1.5H7V7.75A.75.75 0 017.75 7z"/><path fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v11.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75V5.457c0-.331-.132-.65-.366-.884L10.427.366A1.25 1.25 0 009.543 0H3.25zM2.5 2.25a.75.75 0 01.75-.75H9v3.75c0 .414.336.75.75.75h3.75v7.75a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V2.25zm9.94 2.25L10.5 2.56V4.5h1.94z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-plus-24-svg-prop {
-  --file-plus-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 10.75a.75.75 0 01.75.75V14H15a.75.75 0 010 1.5h-2.5V18a.75.75 0 01-1.5 0v-2.5H8.5a.75.75 0 010-1.5H11v-2.5a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V8.664c0-.464-.184-.909-.513-1.237l-5.914-5.914A1.75 1.75 0 0013.336 1H5.75zM4.5 3.75c0-.69.56-1.25 1.25-1.25H13v5.75c0 .414.336.75.75.75h5.75v11.25c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V3.75zM18.44 7.5L14.5 3.56V7.5h3.94z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-source-16-svg-prop {
-  --file-source-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.22 7.838a.625.625 0 01-.058.882L5.699 10l1.463 1.28a.625.625 0 01-.824.94l-2-1.75a.625.625 0 010-.94l2-1.75a.625.625 0 01.882.058zM8.838 8.72a.625.625 0 01.824-.94l2 1.75a.625.625 0 010 .94l-2 1.75a.625.625 0 01-.824-.94L10.301 10 8.838 8.72z"/><path fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v11.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75V5.457c0-.331-.132-.65-.366-.884L10.427.366A1.25 1.25 0 009.543 0H3.25zM2.5 2.25a.75.75 0 01.75-.75H9v3.75c0 .414.336.75.75.75h3.75v7.75a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V2.25zm9.94 2.25L10.5 2.56V4.5h1.94z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-source-24-svg-prop {
-  --file-source-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M13.15 12.3a.75.75 0 011.05-.15l3 2.25a.75.75 0 010 1.2l-3 2.25a.75.75 0 11-.9-1.2L15.5 15l-2.2-1.65a.75.75 0 01-.15-1.05zM10.7 13.35a.75.75 0 10-.9-1.2l-3 2.25a.75.75 0 000 1.2l3 2.25a.75.75 0 10.9-1.2L8.5 15l2.2-1.65z"/><path fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V8.664c0-.464-.184-.909-.513-1.237l-5.914-5.914A1.75 1.75 0 0013.336 1H5.75zM4.5 3.75c0-.69.56-1.25 1.25-1.25H13v5.75c0 .414.336.75.75.75h5.75v11.25c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V3.75zM18.44 7.5L14.5 3.56V7.5h3.94z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-text-16-svg-prop {
-  --file-text-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.75 8a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5zM4 11.75a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75zM4.75 5a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5z"/><path fill-rule="evenodd" d="M1 2.25A2.25 2.25 0 013.25 0h6.293c.331 0 .65.132.884.366l4.207 4.207c.234.235.366.553.366.884v8.293A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V2.25zm2.25-.75a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6H9.75A.75.75 0 019 5.25V1.5H3.25zm7.25 1.06l1.94 1.94H10.5V2.56z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-text-24-svg-prop {
-  --file-text-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.75 12a.75.75 0 000 1.5h8a.75.75 0 000-1.5h-8zM7 16.75a.75.75 0 01.75-.75h6a.75.75 0 010 1.5h-6a.75.75 0 01-.75-.75zM7.75 8a.75.75 0 000 1.5h2a.75.75 0 000-1.5h-2z"/><path fill-rule="evenodd" d="M3 3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237V20.25A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25V3.75zM5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z" clip-rule="evenodd"/></g></svg>');
-}
-
-%file-x-16-svg-prop {
-  --file-x-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M3.25 1.5a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h4.5a.75.75 0 010 1.5h-4.5A2.25 2.25 0 011 13.75V2.25A2.25 2.25 0 013.25 0h6.293c.331 0 .65.132.884.366l4.207 4.207c.234.235.366.553.366.884V7.5a.75.75 0 01-1.5 0V6H9.75A.75.75 0 019 5.25V1.5H3.25zm7.25 1.06l1.94 1.94H10.5V2.56z"/><path d="M11 9a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm.53 5.53l.97-.97.97.97a.75.75 0 101.06-1.06l-.97-.97.97-.97a.75.75 0 10-1.06-1.06l-.97.97-.97-.97a.75.75 0 10-1.06 1.06l.97.97-.97.97a.75.75 0 101.06 1.06z"/></g></svg>');
-}
-
-%file-x-24-svg-prop {
-  --file-x-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h4.5a.75.75 0 010 1.5h-4.5A2.75 2.75 0 013 20.25V3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237v3.586a.75.75 0 01-1.5 0V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z"/><path d="M14 14a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm5.78 3.28a.75.75 0 10-1.06-1.06L17 17.94l-1.72-1.72a.75.75 0 10-1.06 1.06L15.94 19l-1.72 1.72a.75.75 0 101.06 1.06L17 20.06l1.72 1.72a.75.75 0 101.06-1.06L18.06 19l1.72-1.72z"/></g></svg>');
-}
-
-%files-16-svg-prop {
-  --files-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 2.25A2.25 2.25 0 013.25 0h4.793c.331 0 .65.132.884.366l3.207 3.207c.076.076.141.161.195.253a.75.75 0 01.201.144l2.104 2.103c.234.235.366.553.366.884v6.793A2.25 2.25 0 0112.75 16h-7a2.25 2.25 0 01-2.25-2.25v-.25h-.25A2.25 2.25 0 011 11.25v-9zm2.25-.75a.75.75 0 00-.75.75v9c0 .414.336.75.75.75h7a.75.75 0 00.75-.75V6H7.75A.75.75 0 017 5.25V1.5H3.25zm5.25.56V4.5h2.44L8.5 2.06zm4 9.19V6.06l1 1v6.69a.75.75 0 01-.75.75h-7a.75.75 0 01-.75-.75v-.25h5.25a2.25 2.25 0 002.25-2.25z" clip-rule="evenodd"/></svg>');
-}
-
-%files-24-svg-prop {
-  --files-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.25 1A2.25 2.25 0 003 3.25v11.5A2.25 2.25 0 005.25 17H6v.75A2.25 2.25 0 008.25 20H9v.75A2.25 2.25 0 0011.25 23h8.5A2.25 2.25 0 0022 20.75v-7.879a2.25 2.25 0 00-.659-1.59l-2.31-2.311a.746.746 0 00-.312-.187 2.25 2.25 0 00-.378-.503l-2.31-2.31a.746.746 0 00-.312-.187 2.25 2.25 0 00-.378-.503L11.72 1.66A2.25 2.25 0 0010.129 1H5.25zM4.5 3.25a.75.75 0 01.75-.75H10v3.75c0 .414.336.75.75.75h3.75v7.75a.75.75 0 01-.75.75h-8.5a.75.75 0 01-.75-.75V3.25zm8.94 2.25L11.5 3.56V5.5h1.94zM19 11.06v6.69A2.25 2.25 0 0116.75 20H10.5v.75c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-7.879a.75.75 0 00-.22-.53L19 11.061zM7.5 17.75V17h6.25A2.25 2.25 0 0016 14.75V8.06l1.28 1.281c.141.14.22.331.22.53v7.879a.75.75 0 01-.75.75h-8.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%film-16-svg-prop {
-  --film-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 0A2.25 2.25 0 000 2.25v11.5A2.25 2.25 0 002.25 16h11.5A2.25 2.25 0 0016 13.75V2.25A2.25 2.25 0 0013.75 0H2.25zM14.5 3.5V2.25a.75.75 0 00-.75-.75H12.5v2h2zm-2 1.5h2v2h-2V5zM11 1.5H5V7h6V1.5zm3.5 7v2h-2v-2h2zm0 3.5h-2v2.5h1.25a.75.75 0 00.75-.75V12zM11 8.5v6H5v-6h6zM1.5 12v1.75c0 .414.336.75.75.75H3.5V12h-2zm2-1.5h-2v-2h2v2zM1.5 7V5h2v2h-2zm0-3.5h2v-2H2.25a.75.75 0 00-.75.75V3.5z" clip-rule="evenodd"/></svg>');
-}
-
-%film-24-svg-prop {
-  --film-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.75 1A2.75 2.75 0 001 3.75v16.5A2.75 2.75 0 003.75 23h16.5A2.75 2.75 0 0023 20.25V3.75A2.75 2.75 0 0020.25 1H3.75zM21.5 6V3.75c0-.69-.56-1.25-1.25-1.25H18V6h3.5zM18 7.5h3.5V11H18V7.5zm-1.5-5h-9V11h9V2.5zm5 10V16H18v-3.5h3.5zm0 5H18v4h2.25c.69 0 1.25-.56 1.25-1.25V17.5zm-5-5v9h-9v-9h9zm-14 5v2.75c0 .69.56 1.25 1.25 1.25H6v-4H2.5zM6 16H2.5v-3.5H6V16zm-3.5-5V7.5H6V11H2.5zm0-5H6V2.5H3.75c-.69 0-1.25.56-1.25 1.25V6z" clip-rule="evenodd"/></svg>');
-}
-
-%filter-16-svg-prop {
-  --filter-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 3.75A.75.75 0 011.75 3h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 3.75zM3.5 7.75A.75.75 0 014.25 7h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM6.75 11a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"/></g></svg>');
-}
-
-%filter-24-svg-prop {
-  --filter-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM6 11.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H6.75a.75.75 0 01-.75-.75zM9.75 16a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/></g></svg>');
-}
-
-%filter-circle-16-svg-prop {
-  --filter-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.75 7.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM3.5 5.75A.75.75 0 014.25 5h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM7 10a.75.75 0 000 1.5h2A.75.75 0 009 10H7z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%filter-circle-24-svg-prop {
-  --filter-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.25 12a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5zM5 8.75A.75.75 0 015.75 8h12.5a.75.75 0 010 1.5H5.75A.75.75 0 015 8.75zM10.75 16a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%filter-fill-16-svg-prop {
-  --filter-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM4.25 5a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5zm1.5 2.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zm.5 3.25A.75.75 0 017 10h2a.75.75 0 010 1.5H7a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%filter-fill-24-svg-prop {
-  --filter-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM5 8.75A.75.75 0 015.75 8h12.5a.75.75 0 010 1.5H5.75A.75.75 0 015 8.75zm2.5 4a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zm2.5 4a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%filter-svg-prop {
-  @extend %filter-16-svg-prop;
-}
-
-%fingerprint-16-svg-prop {
-  --fingerprint-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.925.827A7.583 7.583 0 0115.66 9.316a.75.75 0 11-1.463-.333 6.083 6.083 0 00-8.61-6.81.75.75 0 01-.662-1.346zM3.278 2.903a.75.75 0 01.143 1.05 6.058 6.058 0 00-1.087 2.332 26.684 26.684 0 01-.811 2.9.75.75 0 11-1.416-.495c.262-.747.514-1.634.765-2.737a7.558 7.558 0 011.355-2.907.75.75 0 011.05-.143zm.259 3.656a4.85 4.85 0 019.176-.859.75.75 0 01-1.375.6A3.35 3.35 0 005 6.891c-.174.766-.354 1.46-.543 2.098a.75.75 0 01-1.438-.426c.179-.603.35-1.265.519-2.005zm3.548-.682a2.117 2.117 0 013.244 2.226 38.526 38.526 0 01-.684 2.614.75.75 0 11-1.436-.434c.235-.777.452-1.608.658-2.512a.617.617 0 00-.945-.649.75.75 0 01-.837-1.245zm5.345 1.935a.75.75 0 01.565.897c-.57 2.505-1.25 4.627-2.178 6.609a.75.75 0 01-1.358-.636c.871-1.86 1.52-3.874 2.073-6.305a.75.75 0 01.898-.565zm-5.768.673a.75.75 0 01.518.926c-.531 1.874-1.146 3.384-1.93 4.794-.057.103-.115.205-.174.307a.75.75 0 01-1.298-.75c.054-.095.108-.19.16-.285.72-1.296 1.295-2.696 1.798-4.475a.75.75 0 01.926-.517zm-3.487 1.998a.75.75 0 01.384.988c-.218.497-.45.96-.698 1.407a.75.75 0 01-1.311-.728c.226-.407.437-.83.637-1.283a.75.75 0 01.988-.385zm11.361.295a.75.75 0 01.516.927 34.364 34.364 0 01-.833 2.556.75.75 0 11-1.406-.522c.291-.785.554-1.596.796-2.445a.75.75 0 01.927-.516zm-6.21 1.53c.381.16.561.6.401.982a22.529 22.529 0 01-1.088 2.243.75.75 0 11-1.31-.729 21.03 21.03 0 001.015-2.094.75.75 0 01.981-.402z" clip-rule="evenodd"/></svg>');
-}
-
-%fingerprint-24-svg-prop {
-  --fingerprint-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M14.802 1.26c-3.792-.863-7.57.48-9.995 3.177A.75.75 0 105.923 5.44a8.841 8.841 0 018.546-2.718A8.8 8.8 0 0119.09 5.44a.75.75 0 001.118-1 10.3 10.3 0 00-5.407-3.18zM4.737 7.118a.75.75 0 00-1.318-.716 10.352 10.352 0 00-.998 2.65c-.466 2.05-.897 3.074-1.327 3.848a.75.75 0 101.312.728c.516-.929.99-2.095 1.478-4.244.185-.812.475-1.57.853-2.266zm16.857-.717a.75.75 0 00-1.317.718 8.807 8.807 0 01.855 6.187c-.385 1.694-.828 3.262-1.374 4.76a.75.75 0 001.409.514c.572-1.57 1.032-3.2 1.428-4.941.58-2.555.16-5.105-1-7.238zm-7.99.185a4.85 4.85 0 00-5.805 3.654 27.905 27.905 0 01-.82 2.94.75.75 0 101.418.49 29.39 29.39 0 00.865-3.097 3.35 3.35 0 016.426-.373.75.75 0 001.414-.502 4.847 4.847 0 00-3.498-3.112zm3.654 5.805a.75.75 0 10-1.463-.333c-.698 3.071-1.55 5.48-2.815 7.756-.383.69-.798 1.356-1.245 2.012a.75.75 0 001.239.845c.47-.69.91-1.394 1.318-2.13 1.35-2.43 2.245-4.98 2.966-8.15zm-10.135 4.17a.75.75 0 00-1.311-.73c-.488.88-1.082 1.754-1.874 2.767a.75.75 0 001.182.924c.826-1.057 1.468-1.997 2.003-2.962zm5.238-12.12a.75.75 0 01-.644.844 6.086 6.086 0 00-5.12 4.682c-.558 2.451-1.143 3.968-1.863 5.266a17.572 17.572 0 01-1.165 1.808.75.75 0 01-1.214-.882c.437-.601.778-1.134 1.067-1.655.635-1.142 1.177-2.517 1.712-4.87A7.586 7.586 0 0111.517 3.8a.75.75 0 01.844.643zm.951.045a.75.75 0 01.898-.565 7.583 7.583 0 015.713 9.076 44.944 44.944 0 01-.677 2.629.75.75 0 11-1.44-.42c.236-.81.453-1.654.654-2.542a6.083 6.083 0 00-4.583-7.28.75.75 0 01-.565-.898zm4.562 12.964a.75.75 0 01.426.972 28.137 28.137 0 01-1.619 3.447.75.75 0 01-1.311-.728 26.645 26.645 0 001.533-3.265.75.75 0 01.971-.426zm-4.876-8.198a2.115 2.115 0 00-1.88.485.75.75 0 10.999 1.12.615.615 0 011.013.595c-.446 1.962-.946 3.58-1.564 5.037a.75.75 0 001.38.586c.663-1.56 1.187-3.267 1.647-5.29a2.117 2.117 0 00-1.595-2.533zm-1.496 3.63a.75.75 0 00-1.447-.4c-.517 1.876-1.107 3.333-1.853 4.677-.563 1.013-1.231 1.993-2.066 3.066a.75.75 0 001.184.921c.868-1.117 1.584-2.162 2.193-3.259.813-1.463 1.444-3.033 1.989-5.005zm.4 6.333a.75.75 0 00-1.311-.729 25.143 25.143 0 01-1.871 2.858.75.75 0 001.201.898 26.641 26.641 0 001.981-3.027z" clip-rule="evenodd"/></svg>');
-}
-
-%flag-16-svg-prop {
-  --flag-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.375 1c-1.072 0-1.827.185-2.337.396a3.125 3.125 0 00-.58.309 2.006 2.006 0 00-.233.188l-.007.007-.004.004-.002.002s.898.871-.001.001A.75.75 0 002 2.43V14.25a.75.75 0 001.5 0v-3.275c.033-.016.07-.033.11-.05.31-.128.868-.282 1.765-.282.815 0 1.503.276 2.338.621l.043.018c.796.33 1.735.718 2.869.718 1.072 0 1.827-.185 2.337-.396a3.13 3.13 0 00.58-.309 2.03 2.03 0 00.214-.17l.01-.009.009-.009.008-.007.003-.004.002-.002s-.899-.872.001-.001A.75.75 0 0014 10.57V2.43a.75.75 0 00-1.27-.54 1.642 1.642 0 01-.34.186c-.31.128-.868.282-1.765.282-.815 0-1.503-.276-2.338-.621l-.043-.018C7.448 1.388 6.51 1 5.375 1zM3.5 9.379V2.832c.033-.016.07-.033.11-.05.31-.128.868-.282 1.765-.282.815 0 1.503.276 2.338.622l.043.017c.796.33 1.735.718 2.869.718.786 0 1.401-.1 1.875-.236v6.547a2.27 2.27 0 01-.11.05c-.31.128-.868.282-1.765.282-.815 0-1.503-.276-2.338-.622l-.043-.017c-.796-.33-1.735-.718-2.869-.718-.786 0-1.401.1-1.875.236z" clip-rule="evenodd"/></svg>');
-}
-
-%flag-24-svg-prop {
-  --flag-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7.875 1c-1.632 0-2.76.273-3.502.572-.371.149-.643.303-.83.429a2.719 2.719 0 00-.22.162l-.104.094A.75.75 0 003 2.786V22.25a.75.75 0 001.5 0V15.6c.104-.06.246-.133.432-.208.546-.219 1.481-.463 2.943-.463 1.382 0 2.543.458 3.845.981l.044.018c1.264.508 2.669 1.072 4.361 1.072 1.632 0 2.76-.273 3.502-.572.371-.149.643-.303.83-.429 0 0 .184-.115.325-.256a.75.75 0 00.218-.529V2.786a.75.75 0 00-1.27-.541l-.008.007a1.23 1.23 0 01-.099.072 3.038 3.038 0 01-.555.284c-.546.219-1.481.463-2.943.463-1.382 0-2.543-.458-3.845-.981l-.044-.018C10.972 1.564 9.567 1 7.875 1zM4.5 13.951V3.171c.104-.06.246-.133.432-.207.546-.22 1.481-.464 2.943-.464 1.382 0 2.543.458 3.845.982l.044.017c1.264.508 2.669 1.072 4.361 1.072 1.541 0 2.633-.244 3.375-.522v10.78c-.104.06-.246.133-.432.207-.546.22-1.481.464-2.943.464-1.382 0-2.543-.458-3.845-.982l-.044-.017c-1.264-.508-2.669-1.072-4.361-1.072-1.541 0-2.633.243-3.375.522z" clip-rule="evenodd"/></svg>');
-}
-
-%flag-svg-prop {
-  @extend %flag-16-svg-prop;
-}
-
-%folder-16-svg-prop {
-  --folder-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-7.5A2.25 2.25 0 0013.75 3H9.871a.75.75 0 01-.53-.22L8.22 1.66A2.25 2.25 0 006.629 1H2.25zM1.5 3.25a.75.75 0 01.75-.75h4.379a.75.75 0 01.53.22L8.28 3.84a2.25 2.25 0 001.591.659h3.879a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75V7h10.75a.75.75 0 000-1.5H1.5V3.25z" clip-rule="evenodd"/></svg>');
-}
-
-%folder-24-svg-prop {
-  --folder-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.75 2A2.75 2.75 0 001 4.75v14.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V6.75A2.75 2.75 0 0020.25 4h-7.172a1.25 1.25 0 01-.883-.366l-.829-.829A2.75 2.75 0 009.422 2H3.75zM2.5 4.75c0-.69.56-1.25 1.25-1.25h5.672c.331 0 .649.132.883.366l.829.829a2.75 2.75 0 001.944.805h7.172c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V8.5h16.75a.75.75 0 000-1.5H2.5V4.75z" clip-rule="evenodd"/></svg>');
-}
-
-%folder-fill-16-svg-prop {
-  --folder-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M2.25 1A2.25 2.25 0 000 3.25v1c0 .414.336.75.75.75h12.5a.75.75 0 010 1.5H.75a.75.75 0 00-.75.75v5.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-7.5A2.25 2.25 0 0013.75 3H9.871a.75.75 0 01-.53-.22L8.22 1.66A2.25 2.25 0 006.629 1H2.25z"/></svg>');
-}
-
-%folder-fill-24-svg-prop {
-  --folder-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M3.75 2A2.75 2.75 0 001 4.75v1c0 .414.336.75.75.75h18.5a.75.75 0 010 1.5H1.75a.75.75 0 00-.75.75v10.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V6.75A2.75 2.75 0 0020.25 4h-7.172a1.25 1.25 0 01-.883-.366l-.829-.829A2.75 2.75 0 009.422 2H3.75z"/></svg>');
-}
-
-%folder-fill-svg-prop {
-  @extend %folder-fill-16-svg-prop;
-}
-
-%folder-minus-16-svg-prop {
-  --folder-minus-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.75 7.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/><path fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-7.5A2.25 2.25 0 0013.75 3H9.871a.75.75 0 01-.53-.22L8.22 1.66A2.25 2.25 0 006.629 1H2.25zM1.5 3.25a.75.75 0 01.75-.75h4.379a.75.75 0 01.53.22L8.28 3.84a2.25 2.25 0 001.591.659h3.879a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%folder-minus-24-svg-prop {
-  --folder-minus-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.75 13a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"/><path fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h5.672c.729 0 1.428.29 1.944.805l.829.829c.234.234.552.366.883.366h7.172A2.75 2.75 0 0123 6.75v12.5A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25V4.75zM3.75 3.5c-.69 0-1.25.56-1.25 1.25V7h16.75a.75.75 0 010 1.5H2.5v10.75c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25h-7.172a2.75 2.75 0 01-1.944-.805l-.829-.829a1.25 1.25 0 00-.883-.366H3.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%folder-minus-fill-16-svg-prop {
-  --folder-minus-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-7.5A2.25 2.25 0 0013.75 3H9.871a.75.75 0 01-.53-.22L8.22 1.66A2.25 2.25 0 006.629 1H2.25zM5 8.253a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%folder-minus-fill-24-svg-prop {
-  --folder-minus-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.75 2A2.75 2.75 0 001 4.75v1c0 .414.336.75.75.75h18.5a.75.75 0 010 1.5H1.75a.75.75 0 00-.75.75v10.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V6.75A2.75 2.75 0 0020.25 4h-7.172a1.25 1.25 0 01-.883-.366l-.829-.829A2.75 2.75 0 009.422 2H3.75zM8 13.75a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%folder-outline-svg-prop {
-  @extend %folder-16-svg-prop;
-}
-
-%folder-plus-16-svg-prop {
-  --folder-plus-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 6a.75.75 0 01.75.75V8h1.25a.75.75 0 010 1.5H8.5v1.25a.75.75 0 01-1.5 0V9.5H5.75a.75.75 0 010-1.5H7V6.75A.75.75 0 017.75 6z"/><path fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h4.379a2.25 2.25 0 011.59.659L9.342 2.78c.14.141.331.22.53.22h3.879A2.25 2.25 0 0116 5.25v7.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75v-7.5a.75.75 0 00-.75-.75H9.871a2.25 2.25 0 01-1.59-.659L7.158 2.72a.75.75 0 00-.53-.22H2.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%folder-plus-24-svg-prop {
-  --folder-plus-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 10.5a.75.75 0 01.75.75v2.25h2.25a.75.75 0 010 1.5H12.5v2.25a.75.75 0 01-1.5 0V15H8.75a.75.75 0 010-1.5H11v-2.25a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M3.75 2A2.75 2.75 0 001 4.75v14.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V6.75A2.75 2.75 0 0020.25 4h-7.172a1.25 1.25 0 01-.883-.366l-.829-.829A2.75 2.75 0 009.422 2H3.75zM2.5 4.75c0-.69.56-1.25 1.25-1.25h5.672c.331 0 .649.132.883.366l.829.829a2.75 2.75 0 001.944.805h7.172c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V8.5h16.75a.75.75 0 000-1.5H2.5V4.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%folder-plus-fill-16-svg-prop {
-  --folder-plus-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h4.379a2.25 2.25 0 011.59.659L9.342 2.78c.14.141.331.22.53.22h3.879A2.25 2.25 0 0116 5.25v7.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-9.5zM7.75 6a.75.75 0 01.75.75V8h1.25a.75.75 0 010 1.5H8.5v1.25a.75.75 0 01-1.5 0V9.5H5.75a.75.75 0 010-1.5H7V6.75A.75.75 0 017.75 6z" clip-rule="evenodd"/></svg>');
-}
-
-%folder-plus-fill-24-svg-prop {
-  --folder-plus-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h5.672c.729 0 1.428.29 1.944.805l.829.829c.234.234.552.366.883.366h7.172A2.75 2.75 0 0123 6.75v12.5A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25V8.75A.75.75 0 011.75 8h18.5a.75.75 0 000-1.5H1.75A.75.75 0 011 5.75v-1zm10.75 5.75a.75.75 0 01.75.75v2.25h2.25a.75.75 0 010 1.5H12.5v2.25a.75.75 0 01-1.5 0V15H8.75a.75.75 0 010-1.5H11v-2.25a.75.75 0 01.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%folder-star-16-svg-prop {
-  --folder-star-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.5 3.25a.75.75 0 01.75-.75h4.379a.75.75 0 01.53.22L8.28 3.84a2.25 2.25 0 001.591.659h3.879a.75.75 0 01.75.75V6.5a.75.75 0 001.5 0V5.25A2.25 2.25 0 0013.75 3H9.871a.75.75 0 01-.53-.22L8.22 1.66A2.25 2.25 0 006.629 1H2.25A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h2.5a.75.75 0 000-1.5h-2.5a.75.75 0 01-.75-.75v-9.5z"/><path fill-rule="evenodd" d="M11.179 5.431a.75.75 0 00-1.358 0L8.523 8.196l-2.887.444a.75.75 0 00-.409 1.279l2.201 2.142-.66 3.029a.75.75 0 001.089.82l2.643-1.43 2.643 1.43a.75.75 0 001.09-.82l-.661-3.03 2.201-2.141a.75.75 0 00-.41-1.28l-2.886-.443-1.298-2.765zM9.71 9.195l.789-1.68.789 1.68a.75.75 0 00.565.423l1.794.276-1.421 1.382a.75.75 0 00-.21.697l.402 1.839-1.562-.845a.75.75 0 00-.714 0l-1.562.845.402-1.838a.75.75 0 00-.21-.698l-1.42-1.382 1.793-.276a.75.75 0 00.565-.423z" clip-rule="evenodd"/></g></svg>');
-}
-
-%folder-star-24-svg-prop {
-  --folder-star-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 3.5c-.69 0-1.25.56-1.25 1.25V7h16.75a.75.75 0 010 1.5H2.5v10.75c0 .69.56 1.25 1.25 1.25h6.75a.75.75 0 010 1.5H3.75A2.75 2.75 0 011 19.25V4.75A2.75 2.75 0 013.75 2h5.672c.729 0 1.428.29 1.944.805l.829.829c.234.234.552.366.883.366h7.172A2.75 2.75 0 0123 6.75v5.5a.75.75 0 01-1.5 0v-5.5c0-.69-.56-1.25-1.25-1.25h-7.172a2.75 2.75 0 01-1.944-.805l-.829-.829a1.25 1.25 0 00-.883-.366H3.75z"/><path fill-rule="evenodd" d="M17.674 10.42a.75.75 0 00-1.348 0l-1.68 3.43-3.755.554a.75.75 0 00-.416 1.277l2.72 2.67-.642 3.773a.75.75 0 001.09.789L17 21.133l3.357 1.78a.75.75 0 001.09-.789l-.642-3.773 2.72-2.67a.75.75 0 00-.416-1.277l-3.755-.553-1.68-3.43zm-1.854 4.445l1.18-2.41 1.18 2.41a.75.75 0 00.565.412l2.652.39-1.922 1.888a.75.75 0 00-.214.661l.452 2.658-2.362-1.252a.75.75 0 00-.702 0l-2.362 1.252.452-2.658a.75.75 0 00-.214-.661l-1.922-1.887 2.652-.391a.75.75 0 00.565-.412z" clip-rule="evenodd"/></g></svg>');
-}
-
-%folder-users-16-svg-prop {
-  --folder-users-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.25 2.5a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h.25a.75.75 0 010 1.5h-.25A2.25 2.25 0 010 12.75v-9.5A2.25 2.25 0 012.25 1h4.379a2.25 2.25 0 011.59.659L9.342 2.78c.14.141.331.22.53.22h3.879A2.25 2.25 0 0116 5.25v5.25a.75.75 0 01-1.5 0V5.25a.75.75 0 00-.75-.75H9.871a2.25 2.25 0 01-1.59-.659L7.158 2.72a.75.75 0 00-.53-.22H2.25z"/><path d="M4.574 11.76c.383-.463.936-.76 1.551-.76h2.75c.615 0 1.168.297 1.55.76A2.61 2.61 0 0111 13.418v.833a.75.75 0 01-1.5 0v-.833c0-.285-.095-.536-.231-.702-.134-.161-.28-.215-.394-.215h-2.75c-.114 0-.26.054-.394.215a1.113 1.113 0 00-.231.702v.833a.75.75 0 01-1.5 0v-.833c0-.6.195-1.197.574-1.656z"/><path fill-rule="evenodd" d="M7.5 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM6.5 8a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"/><path d="M11.518 11.589a.75.75 0 01.893-.572c.567.125 1.089.41 1.474.834.388.426.614.969.615 1.546v.853a.75.75 0 01-1.5 0v-.851a.8.8 0 00-.224-.538 1.306 1.306 0 00-.687-.379.75.75 0 01-.572-.893zM11.42 5.52a.75.75 0 10-.34 1.46c.283.066.52.212.682.4A.95.95 0 0112 8a.95.95 0 01-.238.62 1.272 1.272 0 01-.681.4.75.75 0 10.338 1.46 2.77 2.77 0 001.481-.884A2.45 2.45 0 0013.5 8a2.45 2.45 0 00-.6-1.596 2.77 2.77 0 00-1.48-.885z"/></g></svg>');
-}
-
-%folder-users-24-svg-prop {
-  --folder-users-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.5 4.75c0-.69.56-1.25 1.25-1.25h5.672c.331 0 .649.132.883.366l.829.829a2.75 2.75 0 001.944.805h7.172c.69 0 1.25.56 1.25 1.25v9a.75.75 0 001.5 0v-9A2.75 2.75 0 0020.25 4h-7.172a1.25 1.25 0 01-.883-.366l-.829-.829A2.75 2.75 0 009.422 2H3.75A2.75 2.75 0 001 4.75v14.5A2.75 2.75 0 003.75 22h1.5a.75.75 0 000-1.5h-1.5c-.69 0-1.25-.56-1.25-1.25V8.5h16.75a.75.75 0 000-1.5H2.5V4.75z"/><path d="M8.318 17.928A2.783 2.783 0 0110.375 17h4.25c.786 0 1.524.344 2.057.928.53.583.818 1.359.818 2.155v1.167a.75.75 0 11-1.5 0v-1.167c0-.441-.16-.852-.427-1.145a1.284 1.284 0 00-.948-.438h-4.25c-.34 0-.684.148-.948.438A1.705 1.705 0 009 20.083v1.167a.75.75 0 11-1.5 0v-1.167c0-.796.287-1.572.818-2.155z"/><path fill-rule="evenodd" d="M12.5 10a3 3 0 100 6 3 3 0 000-6zM11 13a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/><path d="M18.275 17.559a.75.75 0 01.916-.534 3.08 3.08 0 011.667 1.12c.417.549.642 1.221.642 1.912v1.193a.75.75 0 11-1.5 0v-1.192c0-.367-.12-.72-.337-1.007a1.58 1.58 0 00-.854-.576.75.75 0 01-.534-.916zM17.186 10.023a.75.75 0 00-.372 1.454A1.578 1.578 0 0118 13a1.57 1.57 0 01-1.186 1.523.75.75 0 10.372 1.454A3.078 3.078 0 0019.5 13a3.07 3.07 0 00-2.314-2.977z"/></g></svg>');
-}
-
-%frown-16-svg-prop {
-  --frown-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5 6a1 1 0 011-1h.007a1 1 0 010 2H6a1 1 0 01-1-1zM10 5a1 1 0 100 2h.007a1 1 0 100-2H10z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/><path d="M5.785 9.777C6.279 9.403 7.035 9 8 9c.965 0 1.721.403 2.215.777.25.189.441.377.573.52.078.085.153.171.22.265a.75.75 0 01-.17 1.047.759.759 0 01-1.046-.17 2.736 2.736 0 00-.482-.466c-.331-.25-.776-.473-1.31-.473-.535 0-.979.222-1.31.473-.177.134-.35.29-.484.469a.75.75 0 01-1.215-.88l.001-.001c.217-.3.5-.562.793-.784z"/></g></svg>');
-}
-
-%frown-24-svg-prop {
-  --frown-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.457 14.424C9.27 13.746 10.5 13 12 13s2.73.746 3.543 1.424c.413.344.738.687.961.944.126.145.25.294.36.451a.75.75 0 01-1.227.862h-.001v-.002a4.882 4.882 0 00-.265-.328 6.91 6.91 0 00-.789-.775C13.895 15.004 13 14.5 12 14.5c-1 0-1.895.504-2.582 1.076a6.21 6.21 0 00-1.054 1.104.75.75 0 01-1.228-.86 5.67 5.67 0 01.36-.452c.223-.257.548-.6.961-.944zM8 9a1 1 0 011-1h.01a1 1 0 110 2H9a1 1 0 01-1-1zM15 8a1 1 0 100 2h.01a1 1 0 100-2H15z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%gateway-16-svg-prop {
-  --gateway-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.537 5.354c.415-1.153.971-2.12 1.695-2.794C5.938 1.903 6.83 1.5 8 1.5c1.251 0 2.188.46 2.921 1.21.752.768 1.31 1.865 1.71 3.146.802 2.566.901 5.638.862 7.563-.013.594-.508 1.081-1.16 1.081H3.668c-.653 0-1.148-.487-1.16-1.083-.012-.545-.012-1.189.012-1.89a.75.75 0 10-1.499-.053 35.678 35.678 0 00-.013 1.974C1.038 14.916 2.256 16 3.668 16h8.665c1.41 0 2.63-1.082 2.66-2.55.04-1.968-.054-5.238-.93-8.041-.438-1.404-1.09-2.747-2.07-3.749C10.994.64 9.677 0 8 0 6.439 0 5.185.554 4.21 1.462c-.96.893-1.622 2.1-2.084 3.384a.75.75 0 101.411.508z"/><path d="M6.22 4.47a.75.75 0 011.06 0l3.25 3.25.008.008a.75.75 0 01-.008 1.052l-3.25 3.25a.75.75 0 01-1.06-1.06L8.19 9H1a.75.75 0 010-1.5h7.19L6.22 5.53a.75.75 0 010-1.06z"/></g></svg>');
-}
-
-%gateway-24-svg-prop {
-  --gateway-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5.052 8.165c.624-1.654 1.469-3.072 2.593-4.071C8.753 3.108 10.164 2.5 12 2.5c2.06 0 3.592.765 4.763 1.987 1.19 1.242 2.03 2.984 2.608 4.946 1.155 3.929 1.19 8.503 1.096 10.985-.023.6-.523 1.082-1.173 1.082H4.706c-.648 0-1.15-.484-1.173-1.086a46.334 46.334 0 01.016-3.879.75.75 0 10-1.498-.07 47.832 47.832 0 00-.017 4.006C2.09 21.924 3.297 23 4.706 23h14.588c1.406 0 2.616-1.07 2.672-2.525.096-2.523.07-7.297-1.156-11.465-.614-2.086-1.545-4.08-2.964-5.561C16.405 1.946 14.488 1 12 1c-2.207 0-3.971.745-5.352 1.973-1.365 1.214-2.324 2.871-3 4.662a.75.75 0 001.404.53z"/><path d="M9.207 6.482a.75.75 0 011.06-.025l5.5 5.25c.14.133.23.322.233.531v.024a.75.75 0 01-.232.53l-5.5 5.25a.75.75 0 01-1.036-1.085L13.378 13H1.75a.75.75 0 010-1.5h11.628L9.232 7.543a.75.75 0 01-.025-1.06z"/></g></svg>');
-}
-
-%gateway-svg-prop {
-  @extend %gateway-16-svg-prop;
-}
-
-%gcp-16-svg-prop {
-  --gcp-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.87 3.465l-.002-.003a5.935 5.935 0 00-5.586-1.217 5.89 5.89 0 00-3.98 4.092 4.206 4.206 0 00-.149 6.792 4.255 4.255 0 002.558.87h6.52a4.234 4.234 0 004.078-2.961A4.2 4.2 0 0013.637 6.3a5.835 5.835 0 00-1.767-2.835zm-7.828 7.78c.21.095.438.16.67.16l6.518.002c.9 0 1.63-.725 1.63-1.619s-.73-1.619-1.63-1.619v-.323a3.226 3.226 0 00-1.187-2.56h-.002c-1.339-1.078-3.305-.912-4.465.354l-.014.015c.996.2 1.897.751 2.525 1.568L6.198 9.101a1.63 1.63 0 00-3.097.439 1.617 1.617 0 00.942 1.704l-.001.001z" clip-rule="evenodd"/></svg>');
-}
-
-%gcp-24-svg-prop {
-  --gcp-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M17.157 5.95l.004.004a7.78 7.78 0 012.355 3.78 5.599 5.599 0 012.23 6.317A5.645 5.645 0 0116.306 20l-8.692-.002c-1.227.005-2.427-.429-3.408-1.163l-.002.003a5.608 5.608 0 01-1.91-6.252 5.612 5.612 0 012.108-2.804A7.853 7.853 0 019.71 4.326a7.913 7.913 0 017.448 1.624zm1.322 8.434a2.165 2.165 0 01-2.172 2.16l-8.692-.004s-.428 0-.915-.226a2.156 2.156 0 01-1.231-2.26 2.165 2.165 0 011.843-1.834 2.174 2.174 0 012.285 1.249l2.52-2.505a5.647 5.647 0 00-3.367-2.09l.018-.02c1.546-1.689 4.168-1.91 5.954-.473l.002.001a4.302 4.302 0 011.583 3.413v.43c1.2 0 2.172.967 2.172 2.16z" clip-rule="evenodd"/></svg>');
-}
-
-%gcp-color-16-svg-prop {
-  --gcp-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23EA4335" d="M10.313 5.376l1.887-1.5-.332-.414a5.935 5.935 0 00-5.586-1.217 5.89 5.89 0 00-3.978 4.084c-.03.113.312-.098.463-.056l2.608-.428s.127-.124.201-.205c1.16-1.266 3.126-1.432 4.465-.354l.272.09z"/><path fill="%234285F4" d="M13.637 6.3a5.835 5.835 0 00-1.77-2.838l-1.83 1.819a3.226 3.226 0 011.193 2.565v.323c.9 0 1.63.725 1.63 1.62 0 .893-.73 1.618-1.63 1.618l-3.257-.002-.325.035v2.507l.325.053h3.257a4.234 4.234 0 004.08-2.962A4.2 4.2 0 0013.636 6.3z"/><path fill="%2334A853" d="M4.711 13.999H7.97v-2.594H4.71c-.232 0-.461-.066-.672-.161l-.458.14-1.313 1.297-.114.447a4.254 4.254 0 002.557.87z"/><path fill="%23FBBC05" d="M4.711 5.572A4.234 4.234 0 00.721 8.44a4.206 4.206 0 001.433 4.688l1.89-1.884a1.617 1.617 0 01.44-3.079 1.63 1.63 0 011.714.937l1.89-1.879a4.24 4.24 0 00-3.377-1.65z"/></svg>');
-}
-
-%gcp-color-24-svg-prop {
-  --gcp-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23EA4335" d="M15.084 8.501l2.516-2-.443-.551A7.913 7.913 0 009.71 4.326a7.853 7.853 0 00-5.304 5.446c-.04.15.416-.13.618-.075l3.476-.57s.17-.166.269-.273c1.546-1.689 4.168-1.91 5.954-.473l.362.12z"/><path fill="%234285F4" d="M19.516 9.733a7.78 7.78 0 00-2.361-3.784l-2.44 2.426a4.301 4.301 0 011.592 3.42v.43c1.2 0 2.172.967 2.172 2.16a2.165 2.165 0 01-2.172 2.158l-4.343-.003-.433.046v3.344l.433.07h4.343c2.49.02 4.7-1.585 5.438-3.95a5.599 5.599 0 00-2.23-6.317z"/><path fill="%2334A853" d="M7.615 19.998h4.343V16.54H7.615c-.31 0-.615-.087-.897-.215l-.61.188-1.75 1.728-.153.596c.982.738 2.18 1.167 3.41 1.161z"/><path fill="%23FBBC05" d="M7.615 8.763a5.646 5.646 0 00-5.32 3.823 5.608 5.608 0 001.91 6.252l2.52-2.513a2.156 2.156 0 01-1.256-2.272 2.165 2.165 0 011.843-1.833 2.174 2.174 0 012.285 1.249l2.52-2.505a5.654 5.654 0 00-4.502-2.201z"/></svg>');
-}
-
-%gift-16-svg-prop {
-  --gift-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1.5 2.75c0 .438.103.866.297 1.25H.75a.75.75 0 00-.75.75v3.5c0 .414.336.75.75.75H2v6.25c0 .414.336.75.75.75h10.5a.75.75 0 00.75-.75V9h1.25a.75.75 0 00.75-.75v-3.5a.75.75 0 00-.75-.75h-.547A2.78 2.78 0 0014.21.81 2.697 2.697 0 0012.286 0c-1.8 0-2.878 1.318-3.46 2.394-.262.486-.449.967-.576 1.351a8.466 8.466 0 00-.577-1.351C7.093 1.318 6.013 0 4.214 0 3.49 0 2.798.293 2.29.81a2.769 2.769 0 00-.79 1.94zM4.214 1.5c-.317 0-.625.128-.854.361-.229.234-.36.553-.36.889 0 .336.131.655.36.889.23.233.537.361.854.361h2.537a6.754 6.754 0 00-.397-.894c-.5-.924-1.189-1.606-2.14-1.606zM9.75 4h2.537c.317 0 .625-.128.854-.361.229-.234.36-.553.36-.889 0-.336-.131-.655-.36-.889a1.197 1.197 0 00-.854-.361c-.951 0-1.64.682-2.14 1.606A6.753 6.753 0 009.75 4zM9 5.5v2h5.5v-2H9zm-1.5 0v2h-6v-2h6zm1.5 9h3.5V9H9v5.5zM7.5 9v5.5h-4V9h4z" clip-rule="evenodd"/></svg>');
-}
-
-%gift-24-svg-prop {
-  --gift-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.5 4.25c0 .63.192 1.235.54 1.75H2.75A1.75 1.75 0 001 7.75v3.5c0 .966.784 1.75 1.75 1.75H3v7.25A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V13h.25A1.75 1.75 0 0023 11.25v-3.5A1.75 1.75 0 0021.25 6h-.79c.348-.515.54-1.12.54-1.75 0-.88-.375-1.711-1.023-2.316A3.529 3.529 0 0017.571 1c-2.266 0-3.67 1.524-4.463 2.87a10.098 10.098 0 00-.842 1.858l-.016.047-.016-.047c-.17-.501-.44-1.177-.842-1.859C10.599 2.524 9.195 1 6.929 1c-.894 0-1.76.33-2.406.934A3.168 3.168 0 003.5 4.25zM6.929 2.5c-.528 0-1.024.196-1.383.53A1.669 1.669 0 005 4.25c0 .447.19.887.546 1.22.359.334.855.53 1.383.53h3.81a8.46 8.46 0 00-.64-1.37C9.42 3.477 8.413 2.5 6.93 2.5zM13.76 6h3.811c.528 0 1.024-.196 1.383-.53.356-.333.546-.773.546-1.22 0-.447-.19-.887-.546-1.22a2.029 2.029 0 00-1.383-.53c-1.484 0-2.49.976-3.17 2.13A8.46 8.46 0 0013.76 6zM13 7.5v4h8.25a.25.25 0 00.25-.25v-3.5a.25.25 0 00-.25-.25H13zm-1.5 0v4H2.75a.25.25 0 01-.25-.25v-3.5a.25.25 0 01.25-.25h8.75zm8 12.75V13H13v8.5h5.25c.69 0 1.25-.56 1.25-1.25zm-8 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V13h7v8.5z" clip-rule="evenodd"/></svg>');
-}
-
-%gift-fill-svg-prop {
-  @extend %gift-16-svg-prop;
-}
-
-%gift-outline-svg-prop {
-  @extend %gift-16-svg-prop;
-}
-
-%git-branch-16-svg-prop {
-  --git-branch-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M12.719 6.913A3.001 3.001 0 0012 1a3 3 0 00-.787 5.896c-.282 2.395-2.124 4.164-4.561 4.34A3.005 3.005 0 004.5 9.095V2A.75.75 0 003 2v7.095a3.001 3.001 0 103.658 3.643c3.26-.187 5.758-2.606 6.061-5.825zM10.5 4a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm-8.25 8a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/></svg>');
-}
-
-%git-branch-24-svg-prop {
-  --git-branch-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7 3.25a.75.75 0 00-1.5 0v10.83a3.501 3.501 0 104.171 4.162c2.447-.091 4.553-.979 6.073-2.498 1.467-1.468 2.345-3.481 2.486-5.82A3.501 3.501 0 0017.5 3a3.5 3.5 0 00-.773 6.914c-.136 1.976-.88 3.604-2.044 4.769-1.213 1.213-2.929 1.97-5.015 2.058A3.505 3.505 0 007 14.081V3.25zM17.5 8.5a2 2 0 100-4 2 2 0 000 4zm-13.25 9a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/></svg>');
-}
-
-%git-branch-svg-prop {
-  @extend %git-branch-16-svg-prop;
-}
-
-%git-commit-16-svg-prop {
-  --git-commit-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.905 7a3.001 3.001 0 00-5.81 0H2.75a.75.75 0 000 1.5h2.345a3.001 3.001 0 005.81 0h2.345a.75.75 0 000-1.5h-2.345zM8 6.25a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd"/></svg>');
-}
-
-%git-commit-24-svg-prop {
-  --git-commit-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M15.93 11a4.001 4.001 0 00-7.86 0H3.75a.75.75 0 000 1.5h4.32a4.001 4.001 0 007.86 0h4.32a.75.75 0 000-1.5h-4.32zM12 9.25a2.5 2.5 0 100 5 2.5 2.5 0 000-5z" clip-rule="evenodd"/></svg>');
-}
-
-%git-commit-svg-prop {
-  @extend %git-commit-16-svg-prop;
-}
-
-%git-merge-16-svg-prop {
-  --git-merge-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.644 6.865A3.001 3.001 0 003.75 1 3 3 0 003 6.905V14a.75.75 0 001.5 0V9.518c.21.266.436.527.675.78C6.21 11.39 7.619 12.432 9.08 12.69a3.001 3.001 0 10.038-1.526c-.92-.237-1.951-.946-2.855-1.899A9.018 9.018 0 014.955 7.52a4.969 4.969 0 01-.311-.655zM3.75 2.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM10.5 12a1.5 1.5 0 103 0 1.5 1.5 0 00-3 0z" clip-rule="evenodd"/></svg>');
-}
-
-%git-merge-24-svg-prop {
-  --git-merge-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.5 6.5a3.5 3.5 0 114.096 3.45c.102.41.284.886.551 1.406a11.743 11.743 0 001.81 2.54c1.35 1.456 3.014 2.56 4.635 2.804a3.502 3.502 0 016.908.8 3.5 3.5 0 01-6.928.71c-2.178-.252-4.217-1.677-5.716-3.294A13.885 13.885 0 017.5 13.202v7.548a.75.75 0 01-1.5 0V9.855A3.502 3.502 0 013.5 6.5zm3.5-2a2 2 0 100 4 2 2 0 000-4zm9 13a2 2 0 104 0 2 2 0 00-4 0z" clip-rule="evenodd"/></svg>');
-}
-
-%git-pull-request-16-svg-prop {
-  --git-pull-request-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M5 6.905A3.001 3.001 0 004.25 1a3 3 0 00-.75 5.905V14A.75.75 0 005 14V6.905zM2.75 4a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM12.5 5.25v3.595a3.001 3.001 0 01-.75 5.905A3 3 0 0111 8.845V5.25a.75.75 0 00-.75-.75H9A.75.75 0 019 3h1.25a2.25 2.25 0 012.25 2.25zm-2.25 6.5a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"/></g></svg>');
-}
-
-%git-pull-request-24-svg-prop {
-  --git-pull-request-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M7.5 9.92A3.501 3.501 0 006.75 3 3.5 3.5 0 006 9.92v10.83a.75.75 0 001.5 0V9.92zM4.75 6.5a2 2 0 114 0 2 2 0 01-4 0zM18 8.75v5.58a3.501 3.501 0 01-.75 6.92 3.5 3.5 0 01-.75-6.92V8.75c0-.69-.56-1.25-1.25-1.25H13A.75.75 0 0113 6h2.25A2.75 2.75 0 0118 8.75zm-2.75 9a2 2 0 114 0 2 2 0 01-4 0z"/></g></svg>');
-}
-
-%git-pull-request-svg-prop {
-  @extend %git-pull-request-16-svg-prop;
-}
-
-%git-repo-16-svg-prop {
-  --git-repo-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v10.5A2.25 2.25 0 003.25 15h.25a.75.75 0 000-1.5h-.25a.75.75 0 01-.75-.75v-1.5a.75.75 0 01.75-.75H13.5v3h-3a.75.75 0 000 1.5h3.25c.69 0 1.25-.56 1.25-1.25V1.25C15 .56 14.44 0 13.75 0H3.25zM13.5 9V1.5H3.25a.75.75 0 00-.75.75v6.878c.235-.083.487-.128.75-.128H13.5z" clip-rule="evenodd"/><path d="M5.5 12a.5.5 0 00-.5.5v3a.5.5 0 00.777.416L7 15.101l1.223.815A.5.5 0 009 15.5v-3a.5.5 0 00-.5-.5h-3z"/></g></svg>');
-}
-
-%git-repo-24-svg-prop {
-  --git-repo-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v14.5A2.75 2.75 0 005.75 21H6a.75.75 0 000-1.5h-.25c-.69 0-1.25-.56-1.25-1.25v-1c0-.69.56-1.25 1.25-1.25H19.5v3.25a.25.25 0 01-.25.25H16a.75.75 0 000 1.5h3.25A1.75 1.75 0 0021 19.25V2.75A1.75 1.75 0 0019.25 1H5.75zM19.5 14.5V2.75a.25.25 0 00-.25-.25H5.75c-.69 0-1.25.56-1.25 1.25V14.8c.375-.192.8-.3 1.25-.3H19.5z" clip-rule="evenodd"/><path d="M8.75 18a.75.75 0 00-.75.75v3.5a.75.75 0 001.128.648L11 21.806l1.872 1.092A.75.75 0 0014 22.25v-3.5a.75.75 0 00-.75-.75h-4.5z"/></g></svg>');
-}
-
-%git-repository-svg-prop {
-  @extend %git-repo-16-svg-prop;
-}
-
-%github-16-svg-prop {
-  --github-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1C4.133 1 1 4.13 1 7.993c0 3.09 2.006 5.71 4.787 6.635.35.064.478-.152.478-.337 0-.166-.006-.606-.01-1.19-1.947.423-2.357-.937-2.357-.937-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.425.048-.425.703.05 1.073.72 1.073.72.624 1.07 1.638.76 2.037.582.063-.452.244-.76.444-.935-1.554-.176-3.188-.776-3.188-3.456 0-.763.273-1.388.72-1.876-.072-.177-.312-.888.07-1.85 0 0 .586-.189 1.924.716A6.711 6.711 0 018 4.381c.595.003 1.194.08 1.753.236 1.336-.905 1.923-.717 1.923-.717.382.963.142 1.674.07 1.85.448.49.72 1.114.72 1.877 0 2.686-1.638 3.278-3.197 3.45.251.216.475.643.475 1.296 0 .934-.009 1.688-.009 1.918 0 .187.127.404.482.336A6.996 6.996 0 0015 7.993 6.997 6.997 0 008 1z" clip-rule="evenodd"/></svg>');
-}
-
-%github-24-svg-prop {
-  --github-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2C6.477 2 2 6.476 2 11.997c0 4.417 2.865 8.163 6.839 9.485.5.092.682-.216.682-.482 0-.236-.008-.865-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.528 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.252-4.555-1.11-4.555-4.94 0-1.092.39-1.985 1.029-2.683-.103-.253-.446-1.27.098-2.646 0 0 .84-.269 2.75 1.025A9.581 9.581 0 0112 6.834c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.376.202 2.393.1 2.646.64.698 1.028 1.591 1.028 2.682 0 3.84-2.339 4.686-4.566 4.933.359.309.678.919.678 1.852 0 1.336-.012 2.414-.012 2.741 0 .268.18.58.688.482 3.97-1.325 6.833-5.07 6.833-9.485C22 6.476 17.522 2 12 2z" clip-rule="evenodd"/></svg>');
-}
-
-%github-color-16-svg-prop {
-  --github-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23161514" fill-rule="evenodd" d="M8 1C4.133 1 1 4.13 1 7.993c0 3.09 2.006 5.71 4.787 6.635.35.064.478-.152.478-.337 0-.166-.006-.606-.01-1.19-1.947.423-2.357-.937-2.357-.937-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.425.048-.425.703.05 1.073.72 1.073.72.624 1.07 1.638.76 2.037.582.063-.452.244-.76.444-.935-1.554-.176-3.188-.776-3.188-3.456 0-.763.273-1.388.72-1.876-.072-.177-.312-.888.07-1.85 0 0 .586-.189 1.924.716A6.711 6.711 0 018 4.381c.595.003 1.194.08 1.753.236 1.336-.905 1.923-.717 1.923-.717.382.963.142 1.674.07 1.85.448.49.72 1.114.72 1.877 0 2.686-1.638 3.278-3.197 3.45.251.216.475.643.475 1.296 0 .934-.009 1.688-.009 1.918 0 .187.127.404.482.336A6.996 6.996 0 0015 7.993 6.997 6.997 0 008 1z" clip-rule="evenodd"/></svg>');
-}
-
-%github-color-24-svg-prop {
-  --github-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23161514" fill-rule="evenodd" d="M12 2C6.477 2 2 6.476 2 11.997c0 4.417 2.865 8.163 6.839 9.485.5.092.682-.216.682-.482 0-.236-.008-.865-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.528 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.252-4.555-1.11-4.555-4.94 0-1.092.39-1.985 1.029-2.683-.103-.253-.446-1.27.098-2.646 0 0 .84-.269 2.75 1.025A9.581 9.581 0 0112 6.834c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.376.202 2.393.1 2.646.64.698 1.028 1.591 1.028 2.682 0 3.84-2.339 4.686-4.566 4.933.359.309.678.919.678 1.852 0 1.336-.012 2.414-.012 2.741 0 .268.18.58.688.482 3.97-1.325 6.833-5.07 6.833-9.485C22 6.476 17.522 2 12 2z" clip-rule="evenodd"/></svg>');
-}
-
-%gitlab-16-svg-prop {
-  --gitlab-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M14.975 8.904L14.19 6.55l-1.552-4.67a.268.268 0 00-.255-.18.268.268 0 00-.254.18l-1.552 4.667H5.422L3.87 1.879a.267.267 0 00-.254-.179.267.267 0 00-.254.18l-1.55 4.667-.784 2.357a.515.515 0 00.193.583l6.78 4.812 6.778-4.812a.516.516 0 00.196-.583z"/></svg>');
-}
-
-%gitlab-24-svg-prop {
-  --gitlab-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M21.964 13.292l-1.12-3.363-2.218-6.673a.383.383 0 00-.363-.255.383.383 0 00-.364.255l-2.217 6.669H8.316L6.1 3.256A.382.382 0 005.736 3a.382.382 0 00-.363.256L3.16 9.925l-1.12 3.367a.736.736 0 00.275.833L12 21l9.683-6.875a.737.737 0 00.28-.833z"/></svg>');
-}
-
-%gitlab-color-16-svg-prop {
-  --gitlab-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23FC6D26" d="M14.975 8.904L14.19 6.55l-1.552-4.67a.268.268 0 00-.255-.18.268.268 0 00-.254.18l-1.552 4.667H5.422L3.87 1.879a.267.267 0 00-.254-.179.267.267 0 00-.254.18l-1.55 4.667-.784 2.357a.515.515 0 00.193.583l6.78 4.812 6.778-4.812a.516.516 0 00.196-.583z"/><path fill="%23E24329" d="M8 14.296l2.578-7.75H5.423L8 14.296z"/><path fill="%23FC6D26" d="M8 14.296l-2.579-7.75H1.813L8 14.296z"/><path fill="%23FCA326" d="M1.81 6.549l-.784 2.354a.515.515 0 00.193.583L8 14.3 1.81 6.55z"/><path fill="%23E24329" d="M1.812 6.549h3.612L3.87 1.882a.268.268 0 00-.254-.18.268.268 0 00-.255.18L1.812 6.549z"/><path fill="%23FC6D26" d="M8 14.296l2.578-7.75h3.614L8 14.296z"/><path fill="%23FCA326" d="M14.19 6.549l.783 2.354a.514.514 0 01-.193.583L8 14.296l6.188-7.747h.001z"/><path fill="%23E24329" d="M14.19 6.549H10.58l1.551-4.667a.267.267 0 01.255-.18c.115 0 .217.073.254.18l1.552 4.667z"/></svg>');
-}
-
-%gitlab-color-24-svg-prop {
-  --gitlab-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23FC6D26" d="M21.964 13.292l-1.12-3.363-2.218-6.673a.383.383 0 00-.363-.255.383.383 0 00-.364.255l-2.217 6.669H8.316L6.1 3.256A.382.382 0 005.736 3a.382.382 0 00-.363.256L3.16 9.925l-1.12 3.367a.736.736 0 00.275.833L12 21l9.683-6.875a.737.737 0 00.28-.833z"/><path fill="%23E24329" d="M12 20.995l3.683-11.071H8.319L12 20.994z"/><path fill="%23FC6D26" d="M12 20.995L8.316 9.924H3.162L12 20.994z"/><path fill="%23FCA326" d="M3.158 9.927l-1.12 3.364a.736.736 0 00.276.833L12 21 3.158 9.927z"/><path fill="%23E24329" d="M3.16 9.927h5.16L6.1 3.26a.383.383 0 00-.364-.256.383.383 0 00-.364.256L3.16 9.927z"/><path fill="%23FC6D26" d="M12 20.995l3.683-11.071h5.162L12 20.994z"/><path fill="%23FCA326" d="M20.842 9.927l1.12 3.364a.734.734 0 01-.276.833L12 20.994l8.84-11.067h.002z"/><path fill="%23E24329" d="M20.844 9.927h-5.16l2.217-6.667a.382.382 0 01.363-.256c.165 0 .311.103.363.256l2.217 6.667z"/></svg>');
-}
-
-%globe-16-svg-prop {
-  --globe-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM6.128 1.774A6.508 6.508 0 001.576 7H4.07a11.095 11.095 0 012.06-5.226zm3.744 0A11.096 11.096 0 0111.932 7h2.492a6.508 6.508 0 00-4.552-5.226zM10.42 7C10.165 5.124 9.333 3.335 8 1.836 6.667 3.335 5.835 5.124 5.58 7h4.84zM5.527 8.5h4.946C10.31 10.557 9.451 12.533 8 14.164 6.55 12.533 5.691 10.557 5.527 8.5zm-1.505 0H1.52a6.505 6.505 0 004.61 5.726C4.896 12.525 4.163 10.555 4.021 8.5zm5.85 5.726c1.231-1.701 1.964-3.671 2.106-5.726h2.503a6.505 6.505 0 01-4.61 5.726z" clip-rule="evenodd"/></svg>');
-}
-
-%globe-24-svg-prop {
-  --globe-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm-1.673 1.647A9.506 9.506 0 002.552 11h4.747a16.673 16.673 0 013.028-8.353zm3.346 0A16.673 16.673 0 0116.701 11h4.747a9.506 9.506 0 00-7.775-8.353zM15.196 11A15.149 15.149 0 0012 2.916 15.149 15.149 0 008.804 11h6.392zm-6.427 1.5h6.462A15.16 15.16 0 0112 21.084 15.16 15.16 0 018.769 12.5zm-1.502 0H2.513c.23 4.45 3.525 8.091 7.814 8.853a16.683 16.683 0 01-3.06-8.853zm6.406 8.853a16.683 16.683 0 003.06-8.853h4.754c-.23 4.45-3.525 8.091-7.814 8.853z" clip-rule="evenodd"/></svg>');
-}
-
-%globe-private-16-svg-prop {
-  --globe-private-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M5.58 7C5.835 5.124 6.667 3.335 8 1.836a10.074 10.074 0 011.806 2.878.75.75 0 101.388-.568 11.412 11.412 0 00-1.322-2.372A6.503 6.503 0 0114.5 8 .75.75 0 0016 8a8 8 0 10-11.31 7.285.75.75 0 10.622-1.365A6.504 6.504 0 011.519 8.5h2.503c.04.563.122 1.12.248 1.668a.75.75 0 101.462-.336c-.1-.438-.17-.883-.205-1.332H7A.75.75 0 007 7H5.58zM4.07 7H1.576a6.508 6.508 0 014.552-5.226A11.095 11.095 0 004.068 7z" clip-rule="evenodd"/><path d="M11.75 12.25a.75.75 0 00-1.5 0v.5a.75.75 0 001.5 0v-.5z"/><path fill-rule="evenodd" d="M8.518 9.012c.035-.627.13-1.235.366-1.738.174-.37.435-.704.816-.94C10.08 6.101 10.52 6 11 6c.48 0 .921.1 1.3.334.381.236.642.57.816.94.236.503.331 1.111.366 1.738A2.25 2.25 0 0115.5 11.25v2.5A2.25 2.25 0 0113.25 16h-4.5a2.25 2.25 0 01-2.25-2.25v-2.5a2.25 2.25 0 012.018-2.238zM10.022 9c.032-.481.102-.838.22-1.087a.662.662 0 01.245-.302c.09-.055.243-.111.513-.111s.423.056.513.111c.087.054.17.141.246.302.117.249.187.606.219 1.087h-1.956zm3.228 1.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-2.5a.75.75 0 01.75-.75h4.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%globe-private-24-svg-prop {
-  --globe-private-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M8.804 11A15.149 15.149 0 0112 2.916a15.087 15.087 0 012.813 5.763.75.75 0 001.456-.358 16.614 16.614 0 00-2.596-5.674 9.512 9.512 0 017.542 7.035.75.75 0 101.456-.364C21.473 4.539 17.15 1 12 1 5.925 1 1 5.925 1 12c0 5.243 3.667 9.627 8.575 10.732a.75.75 0 00.33-1.464c-4.082-.918-7.169-4.465-7.392-8.768h4.754c.128 2.606.86 5.13 2.117 7.367a.75.75 0 101.308-.734A15.221 15.221 0 018.77 12.5H12.5a.75.75 0 000-1.5H8.804zM7.3 11H2.552a9.506 9.506 0 017.775-8.353A16.673 16.673 0 007.299 11z" clip-rule="evenodd"/><path d="M18 19a.75.75 0 01.75.75v.5a.75.75 0 01-1.5 0v-.5A.75.75 0 0118 19z"/><path fill-rule="evenodd" d="M14 15.014a2.25 2.25 0 00-2 2.236v4.5A2.25 2.25 0 0014.25 24h7.5A2.25 2.25 0 0024 21.75v-4.5a2.25 2.25 0 00-2-2.236v-.93a4.127 4.127 0 00-1.165-2.881A3.96 3.96 0 0018 10a3.96 3.96 0 00-2.835 1.203A4.127 4.127 0 0014 14.083v.93zM15.5 15v-.917c0-.69.268-1.35.739-1.833A2.46 2.46 0 0118 11.5c.657 0 1.29.267 1.761.75.471.483.739 1.142.739 1.833V15h-5zm-1.25 1.5a.75.75 0 00-.75.75v4.5c0 .414.336.75.75.75h7.5a.75.75 0 00.75-.75v-4.5a.75.75 0 00-.75-.75h-7.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%google-16-svg-prop {
-  --google-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M10.84 4.82a3.837 3.837 0 00-2.7-1.05c-1.837 0-3.397 1.233-3.953 2.891a4.17 4.17 0 000 2.68h.003c.558 1.657 2.115 2.889 3.952 2.889.948 0 1.761-.241 2.392-.667v-.002a3.239 3.239 0 001.407-2.127H8.14V6.74h6.64c.082.468.121.946.121 1.422 0 2.129-.765 3.929-2.096 5.148l.001.001C11.64 14.38 10.038 15 8.14 15a7.044 7.044 0 01-6.29-3.855 6.97 6.97 0 010-6.287A7.042 7.042 0 018.139 1a6.786 6.786 0 014.71 1.821L10.84 4.82z"/></svg>');
-}
-
-%google-24-svg-prop {
-  --google-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M16.036 7.457a5.434 5.434 0 00-3.836-1.5c-2.609 0-4.824 1.76-5.614 4.13a5.99 5.99 0 000 3.83h.003c.794 2.366 3.006 4.126 5.615 4.126 1.346 0 2.502-.345 3.398-.953v-.003a4.63 4.63 0 002-3.038H12.2v-3.85h9.432c.117.668.172 1.351.172 2.031 0 3.041-1.086 5.613-2.978 7.354l.002.002C17.171 21.115 14.897 22 12.2 22c-3.781 0-7.238-2.131-8.936-5.508a10.008 10.008 0 010-8.98A9.998 9.998 0 0112.2 2.001a9.61 9.61 0 016.69 2.601l-2.854 2.855z"/></svg>');
-}
-
-%google-color-16-svg-prop {
-  --google-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%234285F4" d="M14.9 8.161c0-.476-.039-.954-.121-1.422h-6.64v2.695h3.802a3.24 3.24 0 01-1.407 2.127v1.75h2.269c1.332-1.22 2.097-3.02 2.097-5.15z"/><path fill="%2334A853" d="M8.14 15c1.898 0 3.499-.62 4.665-1.69l-2.268-1.749c-.631.427-1.446.669-2.395.669-1.836 0-3.393-1.232-3.952-2.888H1.85v1.803A7.044 7.044 0 008.14 15z"/><path fill="%23FBBC04" d="M4.187 9.341a4.17 4.17 0 010-2.68V4.858H1.849a6.97 6.97 0 000 6.287l2.338-1.803z"/><path fill="%23EA4335" d="M8.14 3.77a3.837 3.837 0 012.7 1.05l2.01-1.999a6.786 6.786 0 00-4.71-1.82 7.042 7.042 0 00-6.29 3.858L4.186 6.66c.556-1.658 2.116-2.89 3.952-2.89z"/></svg>');
-}
-
-%google-color-24-svg-prop {
-  --google-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%234285F4" d="M21.804 12.23c0-.68-.055-1.363-.173-2.032H12.2v3.85h5.4a4.63 4.63 0 01-1.998 3.04v2.498h3.222c1.893-1.742 2.98-4.314 2.98-7.356z"/><path fill="%2334A853" d="M12.2 22c2.697 0 4.971-.886 6.628-2.414l-3.222-2.499c-.897.61-2.054.956-3.402.956-2.61 0-4.821-1.76-5.615-4.127H3.264v2.576A10 10 0 0012.2 22z"/><path fill="%23FBBC04" d="M6.585 13.916a5.99 5.99 0 010-3.828V7.512H3.264a10.008 10.008 0 000 8.98l3.321-2.576z"/><path fill="%23EA4335" d="M12.2 5.958a5.434 5.434 0 013.836 1.499l2.855-2.855A9.61 9.61 0 0012.2 2.001a9.998 9.998 0 00-8.936 5.511l3.321 2.576c.79-2.37 3.006-4.13 5.615-4.13z"/></svg>');
-}
-
-%grid-16-svg-prop {
-  --grid-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.25 1C1.56 1 1 1.56 1 2.25v3.5C1 6.44 1.56 7 2.25 7h3.5C6.44 7 7 6.44 7 5.75v-3.5C7 1.56 6.44 1 5.75 1h-3.5zm.25 4.5v-3h3v3h-3zM10.25 1C9.56 1 9 1.56 9 2.25v3.5C9 6.44 9.56 7 10.25 7h3.5C14.44 7 15 6.44 15 5.75v-3.5C15 1.56 14.44 1 13.75 1h-3.5zm.25 4.5v-3h3v3h-3zM9 10.25C9 9.56 9.56 9 10.25 9h3.5c.69 0 1.25.56 1.25 1.25v3.5c0 .69-.56 1.25-1.25 1.25h-3.5C9.56 15 9 14.44 9 13.75v-3.5zm1.5.25v3h3v-3h-3zM2.25 9C1.56 9 1 9.56 1 10.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 15 7 14.44 7 13.75v-3.5C7 9.56 6.44 9 5.75 9h-3.5zm.25 4.5v-3h3v3h-3z"/></g></svg>');
-}
-
-%grid-24-svg-prop {
-  --grid-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M3.75 2A1.75 1.75 0 002 3.75v5.5c0 .966.784 1.75 1.75 1.75h5.5A1.75 1.75 0 0011 9.25v-5.5A1.75 1.75 0 009.25 2h-5.5zM3.5 3.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-5.5a.25.25 0 01-.25-.25v-5.5zM14.75 2A1.75 1.75 0 0013 3.75v5.5c0 .966.784 1.75 1.75 1.75h5.5A1.75 1.75 0 0022 9.25v-5.5A1.75 1.75 0 0020.25 2h-5.5zm-.25 1.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-5.5a.25.25 0 01-.25-.25v-5.5zM13 14.75c0-.966.784-1.75 1.75-1.75h5.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0120.25 22h-5.5A1.75 1.75 0 0113 20.25v-5.5zm1.75-.25a.25.25 0 00-.25.25v5.5c0 .138.112.25.25.25h5.5a.25.25 0 00.25-.25v-5.5a.25.25 0 00-.25-.25h-5.5zM3.75 13A1.75 1.75 0 002 14.75v5.5c0 .966.784 1.75 1.75 1.75h5.5A1.75 1.75 0 0011 20.25v-5.5A1.75 1.75 0 009.25 13h-5.5zm-.25 1.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-5.5a.25.25 0 01-.25-.25v-5.5z"/></g></svg>');
-}
-
-%grid-alt-16-svg-prop {
-  --grid-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M0 .75A.75.75 0 01.75 0h2.5A.75.75 0 014 .75v2.5a.75.75 0 01-.75.75H.75A.75.75 0 010 3.25V.75zm1.5.75v1h1v-1h-1zM6 .75A.75.75 0 016.75 0h2.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-2.5A.75.75 0 016 3.25V.75zm1.5.75v1h1v-1h-1zM12.75 0a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V.75a.75.75 0 00-.75-.75h-2.5zm.75 2.5v-1h1v1h-1zM0 6.75A.75.75 0 01.75 6h2.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75H.75A.75.75 0 010 9.25v-2.5zm1.5.75v1h1v-1h-1zM6.75 6a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5A.75.75 0 009.25 6h-2.5zm.75 2.5v-1h1v1h-1zM12 6.75a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-2.5a.75.75 0 01-.75-.75v-2.5zm1.5.75v1h1v-1h-1zM.75 12a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75H.75zm.75 2.5v-1h1v1h-1zM6 12.75a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-2.5a.75.75 0 01-.75-.75v-2.5zm1.5.75v1h1v-1h-1zM12.75 12a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75h-2.5zm.75 2.5v-1h1v1h-1z"/></g></svg>');
-}
-
-%grid-alt-24-svg-prop {
-  --grid-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M1 2.25C1 1.56 1.56 1 2.25 1h3.5C6.44 1 7 1.56 7 2.25v3.5C7 6.44 6.44 7 5.75 7h-3.5C1.56 7 1 6.44 1 5.75v-3.5zm1.5.25v3h3v-3h-3zM9 2.25C9 1.56 9.56 1 10.25 1h3.5c.69 0 1.25.56 1.25 1.25v3.5C15 6.44 14.44 7 13.75 7h-3.5C9.56 7 9 6.44 9 5.75v-3.5zm1.5.25v3h3v-3h-3zM18.25 1C17.56 1 17 1.56 17 2.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C22.44 7 23 6.44 23 5.75v-3.5C23 1.56 22.44 1 21.75 1h-3.5zm.25 4.5v-3h3v3h-3zM1 10.25C1 9.56 1.56 9 2.25 9h3.5C6.44 9 7 9.56 7 10.25v3.5C7 14.44 6.44 15 5.75 15h-3.5C1.56 15 1 14.44 1 13.75v-3.5zm1.5.25v3h3v-3h-3zM10.25 9C9.56 9 9 9.56 9 10.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C15 9.56 14.44 9 13.75 9h-3.5zm.25 4.5v-3h3v3h-3zM17 10.25c0-.69.56-1.25 1.25-1.25h3.5c.69 0 1.25.56 1.25 1.25v3.5c0 .69-.56 1.25-1.25 1.25h-3.5c-.69 0-1.25-.56-1.25-1.25v-3.5zm1.5.25v3h3v-3h-3zM2.25 17C1.56 17 1 17.56 1 18.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 23 7 22.44 7 21.75v-3.5C7 17.56 6.44 17 5.75 17h-3.5zm.25 4.5v-3h3v3h-3zM9 18.25c0-.69.56-1.25 1.25-1.25h3.5c.69 0 1.25.56 1.25 1.25v3.5c0 .69-.56 1.25-1.25 1.25h-3.5C9.56 23 9 22.44 9 21.75v-3.5zm1.5.25v3h3v-3h-3zM18.25 17c-.69 0-1.25.56-1.25 1.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-3.5zm.25 4.5v-3h3v3h-3z"/></g></svg>');
-}
-
-%guide-16-svg-prop {
-  --guide-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1.25 2C.56 2 0 2.56 0 3.25v8.5C0 12.44.56 13 1.25 13H5c.896 0 1.475.205 1.809.448.317.23.441.51.441.802a.75.75 0 001.5 0c0-.292.124-.572.441-.802.334-.243.913-.448 1.809-.448h3.75c.69 0 1.25-.56 1.25-1.25v-8.5C16 2.56 15.44 2 14.75 2H11c-1.154 0-2.106.354-2.772 1-.081.08-.157.161-.228.246A3.131 3.131 0 007.772 3C7.106 2.354 6.154 2 5 2H1.25zm7.5 9.967c.61-.309 1.372-.467 2.25-.467h3.5v-8H11c-.846 0-1.394.253-1.728.577-.335.325-.522.787-.522 1.34v6.55zm-1.5 0v-6.55c0-.553-.187-1.015-.522-1.34C6.394 3.753 5.846 3.5 5 3.5H1.5v8H5c.878 0 1.64.158 2.25.467z" clip-rule="evenodd"/></svg>');
-}
-
-%guide-24-svg-prop {
-  --guide-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2.75 3A1.75 1.75 0 001 4.75v12.5c0 .966.784 1.75 1.75 1.75h5.175c2.342 0 3.325 1.19 3.325 2.25a.75.75 0 001.5 0c0-1.06.983-2.25 3.325-2.25h5.175A1.75 1.75 0 0023 17.25V4.75A1.75 1.75 0 0021.25 3H16.1c-1.7 0-2.958.505-3.777 1.439-.119.136-.226.278-.323.426a3.789 3.789 0 00-.323-.426C10.858 3.505 9.6 3 7.9 3H2.75zm10 15.443c.845-.598 1.996-.943 3.325-.943h5.175a.25.25 0 00.25-.25V4.75a.25.25 0 00-.25-.25H16.1c-1.4 0-2.192.406-2.648.927-.473.54-.702 1.334-.702 2.323v10.693zm-1.5 0V7.75c0-.99-.229-1.783-.702-2.323C10.092 4.906 9.3 4.5 7.9 4.5H2.75a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h5.175c1.329 0 2.48.345 3.325.943z" clip-rule="evenodd"/></svg>');
-}
-
-%guide-link-16-svg-prop {
-  --guide-link-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M12.75 1a.75.75 0 000 1.5h.69l-1.97 1.97a.75.75 0 001.06 1.06l1.97-1.97v.69a.75.75 0 001.5 0v-2.5a.75.75 0 00-.75-.75h-2.5z"/><path fill-rule="evenodd" d="M1.25 2C.56 2 0 2.56 0 3.25v8.5C0 12.44.56 13 1.25 13H5c.896 0 1.475.205 1.809.448.317.23.441.51.441.802a.751.751 0 101.5 0c0-.292.124-.572.441-.802.334-.243.913-.448 1.809-.448h3.75c.69 0 1.25-.56 1.25-1.25v-4.5a.75.75 0 00-1.5 0v4.25H11c-.878 0-1.64.158-2.25.467v-6.55c0-.788.376-1.42 1.12-1.722a.75.75 0 00-.561-1.39 3.27 3.27 0 00-1.31.941A3.13 3.13 0 007.773 3C7.106 2.354 6.154 2 5 2H1.25zm6 3.417c0-.553-.187-1.015-.522-1.34C6.394 3.753 5.846 3.5 5 3.5H1.5v8H5c.878 0 1.64.158 2.25.467v-6.55z" clip-rule="evenodd"/></g></svg>');
-}
-
-%guide-link-24-svg-prop {
-  --guide-link-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M19.75 2a.75.75 0 000 1.5h1.69l-2.97 2.97a.75.75 0 001.06 1.06l2.97-2.97v1.69a.75.75 0 001.5 0v-3.5a.75.75 0 00-.75-.75h-3.5z"/><path fill-rule="evenodd" d="M2.75 3A1.75 1.75 0 001 4.75v12.5c0 .966.784 1.75 1.75 1.75h5.175c2.342 0 3.325 1.19 3.325 2.25A.749.749 0 0012 22a.75.75 0 00.75-.75c0-1.06.983-2.25 3.325-2.25h5.175A1.75 1.75 0 0023 17.25v-7a.75.75 0 10-1.5 0v7a.25.25 0 01-.25.25h-5.175c-1.329 0-2.48.345-3.325.943V7.75c0-.921.199-1.675.609-2.21.393-.512 1.055-.92 2.204-1.018a.75.75 0 10-.126-1.495c-1.481.126-2.57.689-3.269 1.6-.059.078-.115.158-.168.238a3.789 3.789 0 00-.323-.426C10.858 3.505 9.6 3 7.9 3H2.75zm8.5 4.75c0-.99-.229-1.783-.702-2.323C10.092 4.906 9.3 4.5 7.9 4.5H2.75a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h5.175c1.329 0 2.48.345 3.325.943V7.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%guide-svg-prop {
-  @extend %guide-16-svg-prop;
-}
-
-%hammer-16-svg-prop {
-  --hammer-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.484 2.917c.817.22 1.612.62 2.509 1.403a.75.75 0 01.085 1.044l-.422.51 1.13.855.62-.802a.75.75 0 011.08-.113c.678.576.906 1.133.959 1.642.011.111.013.21.014.283v.044c.204.187.417.369.635.552l1.784-2.098-.712-.584a6.328 6.328 0 00-.121.021 3.018 3.018 0 01-.395.051c-.132.006-.456.009-.736-.217a1.173 1.173 0 01-.388-.646c-.039-.16-.054-.33-.063-.436l-.002-.012a8.261 8.261 0 00-.012-.128c-1.814-1.199-3.99-1.864-5.965-1.37zm7.789 2.723h-.002.002zM7.868 7.915l-1.17-.884-3.972 4.804a.25.25 0 00.036.354l.913.73a.25.25 0 00.354-.042l3.84-4.962zM6.433 5a4.168 4.168 0 00-1.352-.638c-.463-.123-.908-.167-1.47-.224-.208-.021-.433-.044-.68-.073a.75.75 0 01-.378-1.333c3.21-2.54 7.208-1.427 9.914.432a1.142 1.142 0 01.428.681c.026.112.04.23.05.325a2.32 2.32 0 01.285-.028c.143-.004.46.003.734.227l.148.12c.45.368.773.633 1.31 1.082a.75.75 0 01.09 1.062l-2.757 3.24a.75.75 0 01-1.052.089l-.253-.21a23.8 23.8 0 01-1.146-.994 1.128 1.128 0 01-.34-.779c-.004-.066-.004-.141-.005-.192a5.582 5.582 0 00-.002-.119l-4.742 6.128a1.75 1.75 0 01-2.477.296l-.913-.73a1.75 1.75 0 01-.255-2.482l4.863-5.88zm6.153-.772a.127.127 0 01.002 0h-.002z" clip-rule="evenodd"/></svg>');
-}
-
-%hammer-24-svg-prop {
-  --hammer-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M19.502 5.858C15.71 2.773 10.384.225 5.334 3.59a.75.75 0 00.269 1.36c1.292.258 2.317.466 3.309.888.814.346 1.625.846 2.52 1.67L1.03 17.909a2.25 2.25 0 000 3.182l.879.879a2.25 2.25 0 003.182 0l10.864-10.864c.212.322.24.532.247.66.004.065.002.13-.001.21l-.002.041c-.004.068-.009.16-.008.245.002.243.047.586.328.898.513.571 1.078 1.123 1.607 1.64.124.121.247.24.366.358a.75.75 0 001.06-.008l4.148-4.208a.75.75 0 00-.008-1.061c-.763-.752-1.224-1.196-1.866-1.814l-.21-.203c-.283-.273-.643-.316-.838-.327a4.072 4.072 0 00-.589.026l-.013.001-.209.019a6.363 6.363 0 01-.005-.263v-.031c-.002-.161-.003-.383-.034-.588-.03-.206-.108-.548-.388-.81a.74.74 0 00-.038-.033zM9.499 4.456a11.55 11.55 0 00-1.546-.523c3.597-1.278 7.34.464 10.493 3 .012.092.014.21.016.398v.013c.001.167.003.4.038.62.035.217.12.55.393.81.288.273.654.307.837.314.195.007.407-.013.56-.028l.029-.003c.162-.015.27-.024.35-.023l.117.113c.475.458.848.818 1.318 1.277l-3.095 3.14a32.343 32.343 0 01-1.318-1.343c0-.027.002-.056.004-.099l.004-.077a3.49 3.49 0 000-.363c-.034-.633-.299-1.343-1.169-2.212a.75.75 0 00-1.06 0L14 10.94 12.06 9l.97-.97a.75.75 0 00.007-1.053c-1.233-1.266-2.362-2.02-3.538-2.52zM11 10.061L2.091 18.97a.75.75 0 000 1.06l.879.879a.75.75 0 001.06 0L12.94 12 11 10.06zm9.74-1.021l-.01-.002a.04.04 0 01.01.002zm-.996-1.455l.013.002a.05.05 0 01-.013-.002z" clip-rule="evenodd"/></svg>');
-}
-
-%handshake-16-svg-prop {
-  --handshake-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M5 2.75a.75.75 0 00-.53.22l-.78.78H.75a.75.75 0 000 1.5H2v5a.75.75 0 01-.75.75h-.5a.75.75 0 000 1.5h.5a2.25 2.25 0 002.016-1.25h.557l3.063 1.531a2.25 2.25 0 002.254-.14l2.087-1.391h1.507a2.25 2.25 0 002.016 1.25h.5a.75.75 0 000-1.5h-.5a.75.75 0 01-.75-.75v-5h1.25a.75.75 0 000-1.5h-2.94l-.78-.78a.75.75 0 00-.53-.22H5zm-1 2.5h-.5v4.5H4a.75.75 0 01.335.08l3.222 1.61a.75.75 0 00.751-.047l1.652-1.101-.584-.876a.75.75 0 011.248-.832l.777 1.166H12.5v-4.5H12a.75.75 0 01-.53-.22l-.78-.78H8.81L7.065 5.997a.711.711 0 00.971 1.038l.971-.85a.75.75 0 11.988 1.13l-.971.85a2.211 2.211 0 01-3.02-3.229l.686-.686H5.311l-.78.78A.75.75 0 014 5.25z" clip-rule="evenodd"/><path d="M1.25 9.625a.625.625 0 11-1.25 0 .625.625 0 011.25 0zM16 9.625a.625.625 0 11-1.25 0 .625.625 0 011.25 0z"/></g></svg>');
-}
-
-%handshake-24-svg-prop {
-  --handshake-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M7.833 4.5a.75.75 0 00-.55.24L6.117 6H1.75a.75.75 0 000 1.5H4v7.458c0 .69-.56 1.25-1.25 1.25h-1a.75.75 0 000 1.5h1A2.75 2.75 0 005.296 16h.999l4.125 2.438a2.75 2.75 0 003.133-.234L16.266 16h2.438a2.751 2.751 0 002.546 1.708h1a.75.75 0 000-1.5h-1c-.69 0-1.25-.56-1.25-1.25V7.5h2.25a.75.75 0 000-1.5h-4.367l-1.166-1.26a.75.75 0 00-.55-.24h-3.473a.75.75 0 00-.533.223l-.524.53-.476-.513a.75.75 0 00-.55-.24H7.833zm-1.389 3H5.5v7h1a.75.75 0 01.382.104l4.301 2.542a1.25 1.25 0 001.424-.106l2.312-1.878-1.48-1.664a.75.75 0 011.122-.996l1.776 1.998H18.5v-7h-.944a.75.75 0 01-.55-.24L15.838 6h-2.831L10.37 8.673a1.25 1.25 0 00-.032 1.723l.119.129a1.25 1.25 0 001.762.08l1.277-1.16a.75.75 0 011.008 1.11l-1.276 1.16a2.75 2.75 0 01-3.877-.176l-.118-.13a2.75 2.75 0 01.07-3.79l1.28-1.296-.3-.323H8.161L6.995 7.26a.75.75 0 01-.55.24z" clip-rule="evenodd"/><path d="M23 13.875a.875.875 0 11-1.75 0 .875.875 0 011.75 0zM2.75 14.014a.875.875 0 11-1.75 0 .875.875 0 011.75 0z"/></g></svg>');
-}
-
-%hard-drive-16-svg-prop {
-  --hard-drive-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3 11.25a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M4.748 1a2.25 2.25 0 00-2.07 1.369L.18 8.235a2.25 2.25 0 00-.18.882v3.633A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75V9.117c0-.303-.061-.603-.18-.882L13.322 2.37A2.25 2.25 0 0011.252 1H4.748zm-.69 1.956a.75.75 0 01.69-.456h6.504c.3 0 .572.18.69.456L14.09 8H1.91l2.148-5.044zM1.5 9.5v3.25c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75V9.5h-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%hard-drive-24-svg-prop {
-  --hard-drive-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M4 15.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M7.202 3a2.75 2.75 0 00-2.428 1.46L1.32 10.958A2.75 2.75 0 001 12.248v6.002A2.75 2.75 0 003.75 21h16.5A2.75 2.75 0 0023 18.25v-6.002c0-.45-.11-.893-.321-1.29L19.226 4.46A2.75 2.75 0 0016.798 3H7.202zM6.098 5.164A1.25 1.25 0 017.202 4.5h9.596c.462 0 .887.255 1.104.664l3.366 6.336H2.732l3.366-6.336zM2.5 13v5.25c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V13h-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%hash-16-svg-prop {
-  --hash-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.884 1.762a.75.75 0 01.604.872L7.058 5h2.975l.479-2.634a.75.75 0 111.476.268L11.558 5h1.192a.75.75 0 010 1.5h-1.465l-.546 3h2.011a.75.75 0 010 1.5h-2.283l-.48 2.634a.75.75 0 11-1.475-.268L8.942 11H5.967l-.48 2.634a.75.75 0 11-1.475-.268L4.442 11H3.25a.75.75 0 010-1.5h1.465l.545-3H3.25a.75.75 0 010-1.5h2.283l.479-2.634a.75.75 0 01.872-.604zM9.214 9.5l.546-3H6.785l-.546 3h2.976z" clip-rule="evenodd"/></svg>');
-}
-
-%hash-24-svg-prop {
-  --hash-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.363 3.009a.75.75 0 01.629.853L10.365 8h4.483l.66-4.362a.75.75 0 111.484.224L16.365 8h2.885a.75.75 0 010 1.5h-3.113l-.681 4.5h3.794a.75.75 0 010 1.5h-4.022l-.736 4.863a.75.75 0 11-1.483-.225l.702-4.638H9.228l-.736 4.863a.75.75 0 11-1.483-.225L7.71 15.5H4.75a.75.75 0 010-1.5h3.189l.681-4.5H4.75a.75.75 0 010-1.5h4.098l.66-4.362a.75.75 0 01.855-.63zM13.938 14l.682-4.5h-4.482L9.455 14h4.482z" clip-rule="evenodd"/></svg>');
-}
-
-%hashicorp-16-svg-prop {
-  --hashicorp-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.835.6L1 3.96v8.074l2.192 1.264V5.224l3.643-2.1V.6z"/><path d="M9.165.6v6.43h-2.33v-2.4L4.642 5.894v8.237l2.193 1.266v-6.41h2.33v2.383l2.192-1.264V1.864L9.165.6z"/><path d="M15 12.04L9.165 15.4v-2.525l3.642-2.1V2.703L15 3.966v8.073z"/></g></svg>');
-}
-
-%hashicorp-24-svg-prop {
-  --hashicorp-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10.336 1.5L2 6.268v11.456l3.131 1.793V8.061l5.205-2.979V1.5z"/><path d="M13.664 1.5v9.123h-3.328V7.219L7.203 9.012V20.7l3.133 1.796V13.4h3.328v3.381l3.131-1.793V3.293L13.664 1.5z"/><path d="M22 17.732L13.664 22.5v-3.582l5.203-2.98V4.484L22 6.276v11.456z"/></g></svg>');
-}
-
-%hashicorp-color-16-svg-prop {
-  --hashicorp-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.835.6L1 3.96v8.074l2.192 1.264V5.224l3.643-2.1V.6z"/><path d="M9.165.6v6.43h-2.33v-2.4L4.642 5.894v8.237l2.193 1.266v-6.41h2.33v2.383l2.192-1.264V1.864L9.165.6z"/><path d="M9.165 15.4L15 12.04V3.966l-2.193-1.264v8.074l-3.642 2.1V15.4z"/></g></svg>');
-}
-
-%hashicorp-color-24-svg-prop {
-  --hashicorp-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10.336 1.5L2 6.268v11.456l3.131 1.793V8.061l5.205-2.979V1.5z"/><path d="M13.664 1.5v9.123h-3.328V7.219L7.203 9.012V20.7l3.133 1.796V13.4h3.328v3.381l3.131-1.793V3.293L13.664 1.5z"/><path d="M13.664 22.5L22 17.732V6.276l-3.133-1.793v11.456l-5.203 2.979V22.5z"/></g></svg>');
-}
-
-%hcp-16-svg-prop {
-  --hcp-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.835.6L1 3.96v8.074l2.192 1.264V5.224l3.643-2.1V.6z"/><path d="M9.165.6v6.43h-2.33v-2.4L4.642 5.894v8.237l2.193 1.266v-6.41h2.33v2.383l2.192-1.264V1.864L9.165.6z"/><path d="M15 12.04L9.165 15.4v-2.525l3.642-2.1V2.703L15 3.966v8.073z"/></g></svg>');
-}
-
-%hcp-24-svg-prop {
-  --hcp-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10.336 1.5L2 6.268v11.456l3.131 1.793V8.061l5.205-2.979V1.5z"/><path d="M13.664 1.5v9.123h-3.328V7.219L7.203 9.012V20.7l3.133 1.796V13.4h3.328v3.381l3.131-1.793V3.293L13.664 1.5z"/><path d="M22 17.732L13.664 22.5v-3.582l5.203-2.98V4.484L22 6.276v11.456z"/></g></svg>');
-}
-
-%hcp-color-16-svg-prop {
-  --hcp-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.835.6L1 3.96v8.074l2.192 1.264V5.224l3.643-2.1V.6z"/><path d="M9.165.6v6.43h-2.33v-2.4L4.642 5.894v8.237l2.193 1.266v-6.41h2.33v2.383l2.192-1.264V1.864L9.165.6z"/><path d="M9.165 15.4L15 12.04V3.966l-2.193-1.264v8.074l-3.642 2.1V15.4z"/></g></svg>');
-}
-
-%hcp-color-24-svg-prop {
-  --hcp-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10.336 1.5L2 6.268v11.456l3.131 1.793V8.061l5.205-2.979V1.5z"/><path d="M13.664 1.5v9.123h-3.328V7.219L7.203 9.012V20.7l3.133 1.796V13.4h3.328v3.381l3.131-1.793V3.293L13.664 1.5z"/><path d="M13.664 22.5L22 17.732V6.276l-3.133-1.793v11.456l-5.203 2.979V22.5z"/></g></svg>');
-}
-
-%headphones-16-svg-prop {
-  --headphones-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 2.5c-1.468 0-2.87.56-3.9 1.548A5.13 5.13 0 002.5 7.75V8h1.25A2.25 2.25 0 016 10.25v2.5A2.25 2.25 0 013.75 15h-.5A2.25 2.25 0 011 12.75v-5c0-1.8.745-3.52 2.061-4.784A7.135 7.135 0 018 1c1.847 0 3.624.704 4.939 1.966A6.63 6.63 0 0115 7.75v5A2.25 2.25 0 0112.75 15h-.5A2.25 2.25 0 0110 12.75v-2.5A2.25 2.25 0 0112.25 8h1.25v-.25a5.13 5.13 0 00-1.6-3.702A5.635 5.635 0 008 2.5zm5.5 7h-1.25a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h.5a.75.75 0 00.75-.75V9.5zm-11 0h1.25a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-.5a.75.75 0 01-.75-.75V9.5z" clip-rule="evenodd"/></svg>');
-}
-
-%headphones-24-svg-prop {
-  --headphones-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 3.5c-2.26 0-4.425.874-6.018 2.424A8.128 8.128 0 003.5 11.75V13h2.75A2.75 2.75 0 019 15.75v3.5A2.75 2.75 0 016.25 22h-1.5A2.75 2.75 0 012 19.25v-7.5a9.628 9.628 0 012.936-6.902A10.132 10.132 0 0112 2c2.646 0 5.187 1.022 7.064 2.848A9.629 9.629 0 0122 11.75v7.5A2.75 2.75 0 0119.25 22h-1.5A2.75 2.75 0 0115 19.25v-3.5A2.75 2.75 0 0117.75 13h2.75v-1.25c0-2.181-.89-4.278-2.482-5.826A8.632 8.632 0 0012 3.5zm8.5 11h-2.75c-.69 0-1.25.56-1.25 1.25v3.5c0 .69.56 1.25 1.25 1.25h1.5c.69 0 1.25-.56 1.25-1.25V14.5zm-17 0h2.75c.69 0 1.25.56 1.25 1.25v3.5c0 .69-.56 1.25-1.25 1.25h-1.5c-.69 0-1.25-.56-1.25-1.25V14.5z" clip-rule="evenodd"/></svg>');
-}
-
-%health-svg-prop {
-  @extend %activity-16-svg-prop;
-}
-
-%heart-16-svg-prop {
-  --heart-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.689 1.343a4.604 4.604 0 014.97.979 4.482 4.482 0 010 6.4l-6.132 6.061a.75.75 0 01-1.054 0L1.34 8.723A4.5 4.5 0 010 5.523a4.5 4.5 0 011.34-3.201A4.589 4.589 0 014.566 1c1.208 0 2.369.475 3.226 1.322L8 2.527l.208-.205a4.57 4.57 0 011.48-.979zm3.916 2.045a3.104 3.104 0 00-4.342 0l-.736.727a.75.75 0 01-1.054 0l-.736-.726a3.089 3.089 0 00-2.17-.889c-.817 0-1.598.32-2.172.889A3 3 0 001.5 5.522a3 3 0 00.895 2.134L8 13.196l5.605-5.54c.284-.281.51-.614.663-.98a2.981 2.981 0 00-.663-3.288z" clip-rule="evenodd"/></svg>');
-}
-
-%heart-24-svg-prop {
-  --heart-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M14.508 3.457a6.246 6.246 0 014.693 0 6.154 6.154 0 011.993 1.304 6.024 6.024 0 011.336 1.957 5.931 5.931 0 010 4.626 6.022 6.022 0 01-1.336 1.957l-8.67 8.485a.75.75 0 01-1.049 0l-8.67-8.485A5.974 5.974 0 011 9.03c0-1.605.651-3.14 1.806-4.27a6.205 6.205 0 014.34-1.76c1.624 0 3.185.631 4.339 1.76l.515.504.515-.504a6.154 6.154 0 011.993-1.304zm5.637 2.376a4.653 4.653 0 00-1.508-.986 4.746 4.746 0 00-3.566 0 4.653 4.653 0 00-1.507.986l-1.04 1.018a.75.75 0 01-1.049 0l-1.04-1.018a4.705 4.705 0 00-3.29-1.332c-1.237 0-2.42.48-3.29 1.332A4.474 4.474 0 002.5 9.031c0 1.196.485 2.347 1.355 3.198L12 20.2l8.145-7.972c.43-.421.771-.921 1.003-1.47a4.431 4.431 0 000-3.456 4.524 4.524 0 00-1.003-1.47z" clip-rule="evenodd"/></svg>');
-}
-
-%heart-fill-16-svg-prop {
-  --heart-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M11.434 1a4.604 4.604 0 00-3.226 1.322L8 2.527l-.208-.205A4.589 4.589 0 004.566 1 4.589 4.589 0 001.34 2.322 4.5 4.5 0 000 5.522a4.5 4.5 0 001.34 3.2l6.133 6.061a.75.75 0 001.054 0l6.132-6.06a4.52 4.52 0 00.992-1.467 4.482 4.482 0 00-.992-4.934A4.604 4.604 0 0011.433 1z"/></svg>');
-}
-
-%heart-fill-24-svg-prop {
-  --heart-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M16.854 3c-.805 0-1.602.155-2.346.457a6.154 6.154 0 00-1.993 1.304L12 5.265l-.515-.504a6.205 6.205 0 00-4.34-1.76 6.205 6.205 0 00-4.34 1.76A5.974 5.974 0 001 9.031c0 1.605.651 3.14 1.806 4.27l8.67 8.485a.75.75 0 001.048 0l8.67-8.485a6.022 6.022 0 001.336-1.957 5.93 5.93 0 000-4.626 6.024 6.024 0 00-1.336-1.957 6.154 6.154 0 00-1.993-1.304A6.246 6.246 0 0016.854 3z"/></svg>');
-}
-
-%heart-off-16-svg-prop {
-  --heart-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1.78.72A.75.75 0 00.72 1.78l.58.581A4.5 4.5 0 000 5.522a4.5 4.5 0 001.34 3.2l6.133 6.061a.75.75 0 001.054 0l2.613-2.582 3.08 3.08a.75.75 0 101.06-1.061L1.78.72zm8.3 10.42L2.36 3.422a2.999 2.999 0 00-.861 2.1 3 3 0 00.895 2.134L8 13.196l2.08-2.056z" clip-rule="evenodd"/><path d="M11.434 1a4.604 4.604 0 00-3.226 1.322l-.735.726a.75.75 0 001.054 1.067l.735-.727a3.104 3.104 0 014.342 0 2.981 2.981 0 010 4.267l-.735.727a.75.75 0 101.055 1.067l.735-.726a4.52 4.52 0 00.992-1.467 4.482 4.482 0 00-.992-4.934A4.604 4.604 0 0011.433 1z"/></g></svg>');
-}
-
-%heart-off-24-svg-prop {
-  --heart-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06L3.28 4.342c-.165.13-.324.27-.475.42A5.974 5.974 0 001 9.03c0 1.605.651 3.14 1.806 4.27l8.67 8.485a.75.75 0 001.048 0l4.145-4.056 5.05 5.05a.75.75 0 101.061-1.06L2.28 1.22zm13.328 15.449L4.351 5.412c-.174.128-.34.269-.496.421A4.474 4.474 0 002.5 9.031c0 1.196.485 2.347 1.355 3.198L12 20.2l3.608-3.532z" clip-rule="evenodd"/><path d="M14.508 3.457a6.246 6.246 0 014.693 0 6.153 6.153 0 011.993 1.304 6.024 6.024 0 011.336 1.957 5.931 5.931 0 010 4.626 6.022 6.022 0 01-1.336 1.957l-1.04 1.017a.75.75 0 01-1.049-1.072l1.04-1.017c.43-.421.771-.921 1.003-1.47a4.431 4.431 0 000-3.456 4.524 4.524 0 00-1.003-1.47 4.653 4.653 0 00-1.508-.986 4.746 4.746 0 00-3.566 0 4.653 4.653 0 00-1.507.986l-1.04 1.018a.75.75 0 01-1.049 0l-1.04-1.018a4.644 4.644 0 00-1.257-.875.75.75 0 11.644-1.356c.61.29 1.173.68 1.663 1.16l.515.503.515-.504a6.154 6.154 0 011.993-1.304z"/></g></svg>');
-}
-
-%help-16-svg-prop {
-  --help-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M8.197 4.523a1.532 1.532 0 00-1.051.196c-.318.19-.563.49-.687.85a.75.75 0 01-1.418-.49c.239-.69.71-1.274 1.335-1.648a3.032 3.032 0 012.079-.386 3.057 3.057 0 011.829 1.065 3.13 3.13 0 01.716 2c0 .487-.092.905-.275 1.266-.182.36-.431.62-.679.817-.194.156-.41.291-.581.398l-.096.06a2.507 2.507 0 00-.452.34.643.643 0 00-.172.292.75.75 0 01-1.499-.033c0-.163.035-.324.086-.479.08-.243.232-.543.515-.832.239-.243.505-.419.72-.554.044-.029.086-.056.126-.08.169-.106.296-.186.415-.282a.976.976 0 00.279-.323c.059-.117.113-.296.113-.59v-.002a1.63 1.63 0 00-.372-1.041c-.24-.29-.57-.481-.931-.544z" clip-rule="evenodd"/><path d="M8 11a1 1 0 100 2h.007a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%help-24-svg-prop {
-  --help-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M12.349 7.536c-.612-.1-1.24.01-1.77.31s-.926.765-1.125 1.308a.75.75 0 11-1.408-.516A3.995 3.995 0 019.842 6.54a4.212 4.212 0 012.75-.484c.946.156 1.81.63 2.436 1.343.627.715.973 1.624.972 2.569 0 .636-.127 1.168-.369 1.62-.24.449-.569.77-.9 1.021a8.43 8.43 0 01-.804.519l-.144.085c-.294.177-.526.329-.712.507-.185.178-.264.341-.298.441a.62.62 0 00-.028.107l-.001.007a.75.75 0 01-1.5-.025c0-.198.047-.394.111-.58a2.63 2.63 0 01.677-1.032c.318-.304.675-.529.98-.712l.177-.104a6.68 6.68 0 00.636-.409 1.64 1.64 0 00.484-.533c.107-.2.191-.482.191-.913v-.001c0-.573-.21-1.132-.6-1.578a2.628 2.628 0 00-1.551-.852z" clip-rule="evenodd"/><path d="M12 16a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%help-circle-fill-svg-prop {
-  @extend %help-16-svg-prop;
-}
-
-%help-circle-outline-svg-prop {
-  @extend %help-16-svg-prop;
-}
-
-%hexagon-16-svg-prop {
-  --hexagon-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.834.33a2.25 2.25 0 012.332 0l5.25 3.182A2.25 2.25 0 0115.5 5.436v5.128a2.25 2.25 0 01-1.084 1.924l-5.25 3.182a2.25 2.25 0 01-2.332 0l-5.25-3.182A2.25 2.25 0 01.5 10.564V5.436a2.25 2.25 0 011.084-1.924L6.834.33zm1.555 1.283a.75.75 0 00-.778 0l-5.25 3.181A.75.75 0 002 5.436v5.128a.75.75 0 00.361.642l5.25 3.181a.75.75 0 00.778 0l5.25-3.181a.75.75 0 00.361-.642V5.436a.75.75 0 00-.361-.642l-5.25-3.181z" clip-rule="evenodd"/></svg>');
-}
-
-%hexagon-24-svg-prop {
-  --hexagon-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.559 1.006a2.75 2.75 0 012.882 0l7.75 4.77A2.75 2.75 0 0122.5 8.118v7.764a2.75 2.75 0 01-1.309 2.342l-7.75 4.77a2.75 2.75 0 01-2.882 0l-7.75-4.77A2.75 2.75 0 011.5 15.882V8.118a2.75 2.75 0 011.309-2.342l7.75-4.77zm2.096 1.278a1.25 1.25 0 00-1.31 0l-7.75 4.77A1.25 1.25 0 003 8.117v7.764c0 .435.225.838.595 1.065l7.75 4.77a1.25 1.25 0 001.31 0l7.75-4.77c.37-.227.595-.63.595-1.065V8.118a1.25 1.25 0 00-.595-1.065l-7.75-4.77z" clip-rule="evenodd"/></svg>');
-}
-
-%hexagon-fill-16-svg-prop {
-  --hexagon-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M9.166.33a2.25 2.25 0 00-2.332 0l-5.25 3.182A2.25 2.25 0 00.5 5.436v5.128a2.25 2.25 0 001.084 1.924l5.25 3.182a2.25 2.25 0 002.332 0l5.25-3.182a2.25 2.25 0 001.084-1.924V5.436a2.25 2.25 0 00-1.084-1.924L9.166.33z"/></svg>');
-}
-
-%hexagon-fill-24-svg-prop {
-  --hexagon-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M13.441 1.006a2.75 2.75 0 00-2.882 0l-7.75 4.77A2.75 2.75 0 001.5 8.118v7.764a2.75 2.75 0 001.309 2.342l7.75 4.77a2.75 2.75 0 002.882 0l7.75-4.77a2.75 2.75 0 001.309-2.342V8.118a2.75 2.75 0 00-1.309-2.342l-7.75-4.77z"/></svg>');
-}
-
-%history-16-svg-prop {
-  --history-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.5 1.25a.75.75 0 011.5 0v1.851A7 7 0 111 8a.75.75 0 011.5 0 5.5 5.5 0 101.725-4H5.75a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75v-3.5z"/><path d="M8.25 4a.75.75 0 01.75.75v3.763l1.805.802a.75.75 0 01-.61 1.37l-2.25-1A.75.75 0 017.5 9V4.75A.75.75 0 018.25 4z"/></g></svg>');
-}
-
-%history-24-svg-prop {
-  --history-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3.5c-2.347 0-4.471.95-6.01 2.49A8.55 8.55 0 005.125 7H8.25a.75.75 0 010 1.5h-4.5A.75.75 0 013 7.75v-4.5a.75.75 0 011.5 0v2.135A9.971 9.971 0 0112 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12a.75.75 0 011.5 0A8.5 8.5 0 1012 3.5z"/><path d="M11.75 6a.75.75 0 01.75.75v5.787l4.085 2.042a.75.75 0 11-.67 1.342l-4.5-2.25A.75.75 0 0111 13V6.75a.75.75 0 01.75-.75z"/></g></svg>');
-}
-
-%history-svg-prop {
-  @extend %history-16-svg-prop;
-}
-
-%home-16-svg-prop {
-  --home-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.846 2.574a.25.25 0 01.308 0l5.25 4.12a.25.25 0 01.096.196v7.36a.75.75 0 001.5 0V6.89a1.75 1.75 0 00-.67-1.377L9.08 1.394a1.75 1.75 0 00-2.16 0l-5.25 4.12A1.75 1.75 0 001 6.89v7.36a.75.75 0 001.5 0V6.89a.25.25 0 01.096-.196l5.25-4.12z"/><path d="M6.5 14.25V10.5h3v3.75a.75.75 0 001.5 0v-4C11 9.56 10.44 9 9.75 9h-3.5C5.56 9 5 9.56 5 10.25v4a.75.75 0 001.5 0z"/></g></svg>');
-}
-
-%home-24-svg-prop {
-  --home-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.847 2.819a.25.25 0 01.306 0l8.25 6.407a.25.25 0 01.097.198V21.25a.75.75 0 001.5 0V9.424c0-.54-.25-1.05-.677-1.382l-8.25-6.408a1.75 1.75 0 00-2.146 0l-8.25 6.408A1.75 1.75 0 002 9.424V21.25a.75.75 0 001.5 0V9.424a.25.25 0 01.097-.198l8.25-6.407z"/><path d="M9.5 15.75a.25.25 0 01.25-.25h4.5a.25.25 0 01.25.25v5.5a.75.75 0 001.5 0v-5.5A1.75 1.75 0 0014.25 14h-4.5A1.75 1.75 0 008 15.75v5.5a.75.75 0 001.5 0v-5.5z"/></g></svg>');
-}
-
-%hourglass-16-svg-prop {
-  --hourglass-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.75 12.75A.75.75 0 016.5 12h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zM7.75 4.5a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/><path fill-rule="evenodd" d="M2.695 2.717A1.5 1.5 0 014.012.5h7.976a1.5 1.5 0 011.317 2.217L10.494 7.88a.25.25 0 000 .24l2.811 5.163a1.5 1.5 0 01-1.317 2.217H4.012a1.5 1.5 0 01-1.317-2.217l2.81-5.163a.25.25 0 000-.24l-2.81-5.163zM11.988 2H4.012l2.811 5.163a1.75 1.75 0 010 1.674L4.013 14h7.975L9.177 8.837a1.75 1.75 0 010-1.674L11.987 2z" clip-rule="evenodd"/></g></svg>');
-}
-
-%hourglass-24-svg-prop {
-  --hourglass-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8 19.75a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5a.75.75 0 01-.75-.75zM11.75 8a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/><path fill-rule="evenodd" d="M4.694 4.503C3.69 3.01 4.762 1 6.562 1h10.876c1.8 0 2.871 2.009 1.868 3.503l-4.748 7.08a.75.75 0 000 .835l4.748 7.079C20.31 20.99 19.238 23 17.438 23H6.562c-1.8 0-2.871-2.009-1.868-3.503l4.748-7.08a.75.75 0 000-.835L4.694 4.503zM6.562 2.5a.75.75 0 00-.623 1.168l4.748 7.079a2.25 2.25 0 010 2.506l-4.748 7.08a.75.75 0 00.623 1.167h10.876c.6 0 .957-.67.623-1.168l-4.748-7.079a2.25 2.25 0 010-2.506l4.748-7.08a.75.75 0 00-.623-1.167H6.562z" clip-rule="evenodd"/></g></svg>');
-}
-
-%identity-service-16-svg-prop {
-  --identity-service-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 5a4 4 0 100 8 4 4 0 000-8zm-.904 3H5.708a2.504 2.504 0 011.847-1.46A5.94 5.94 0 007.096 8zm-.068 1.5H5.55c.203.998 1 1.78 2.005 1.96a6.01 6.01 0 01-.527-1.96zm2.103 1.73a4.376 4.376 0 01-.594-1.73h1.913a2.504 2.504 0 01-1.319 1.73zM8.628 8c.107-.445.278-.862.503-1.23A2.51 2.51 0 0110.292 8H8.628z"/><path d="M4 1.25C4 .56 4.56 0 5.25 0h5.5C11.44 0 12 .56 12 1.25V2h1.75A2.25 2.25 0 0116 4.25v8.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-8.5A2.25 2.25 0 012.25 2H4v-.75zM10.75 4c.409 0 .772-.196 1-.5h2a.75.75 0 01.75.75v8.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-8.5a.75.75 0 01.75-.75h2c.228.304.591.5 1 .5h5.5zM5.5 2.5h5v-1h-5v1z"/></g></svg>');
-}
-
-%identity-service-24-svg-prop {
-  --identity-service-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 7.25a5.75 5.75 0 100 11.5 5.75 5.75 0 000-11.5zM9.329 12h-1.46a4.26 4.26 0 012.42-2.892A8.401 8.401 0 009.33 12zm-.055 1.5H7.78a4.254 4.254 0 002.51 3.392A8.4 8.4 0 019.275 13.5zm4.436 3.392a4.254 4.254 0 002.51-3.392h-1.494a8.4 8.4 0 01-1.016 3.392zm-.49-3.392A6.9 6.9 0 0112 16.804a6.9 6.9 0 01-1.22-3.304h2.44zm-.066-1.5h-2.308A6.9 6.9 0 0112 9.196 6.9 6.9 0 0113.154 12zm1.517 0h1.46a4.26 4.26 0 00-2.42-2.892c.492.895.819 1.875.96 2.892z"/><path d="M7 2.75C7 1.784 7.784 1 8.75 1h6.5c.966 0 1.75.784 1.75 1.75V3h3.25A2.75 2.75 0 0123 5.75v12.5A2.75 2.75 0 0120.25 21H3.75A2.75 2.75 0 011 18.25V5.75A2.75 2.75 0 013.75 3H7v-.25zM20.25 4.5H17v.25a1.75 1.75 0 01-1.75 1.75h-6.5A1.75 1.75 0 017 4.75V4.5H3.75c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25zM8.5 4.75v-2a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v2a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25z"/></g></svg>');
-}
-
-%identity-user-16-svg-prop {
-  --identity-user-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.187 10.482A2.324 2.324 0 016.625 10h2.75c.515 0 1.034.16 1.438.482.41.325.687.807.687 1.359v.409a.75.75 0 01-1.5 0v-.41c0-.026-.012-.098-.119-.183a.828.828 0 00-.506-.157h-2.75a.828.828 0 00-.506.157c-.107.085-.119.157-.119.184v.409a.75.75 0 01-1.5 0v-.41c0-.55.277-1.033.687-1.358z"/><path fill-rule="evenodd" d="M8 4.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM7 7a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M5.25 0C4.56 0 4 .56 4 1.25V2H2.25A2.25 2.25 0 000 4.25v8.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-8.5A2.25 2.25 0 0013.75 2H12v-.75C12 .56 11.44 0 10.75 0h-5.5zm6.5 3.5c-.228.304-.591.5-1 .5h-5.5c-.409 0-.772-.196-1-.5h-2a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75v-8.5a.75.75 0 00-.75-.75h-2zm-1.25-1h-5v-1h5v1z" clip-rule="evenodd"/></g></svg>');
-}
-
-%identity-user-24-svg-prop {
-  --identity-user-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.858 14.79A2.944 2.944 0 019.875 14h4.25c.748 0 1.475.28 2.017.79.543.511.858 1.216.858 1.96v.5a.75.75 0 01-1.5 0v-.5c0-.316-.133-.63-.386-.868a1.445 1.445 0 00-.989-.382h-4.25c-.379 0-.734.142-.989.382a1.193 1.193 0 00-.386.868v.5a.75.75 0 01-1.5 0v-.5c0-.744.315-1.449.858-1.96z"/><path fill-rule="evenodd" d="M12 7.5a3 3 0 100 6 3 3 0 000-6zm-1.5 3a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M8.75 1A1.75 1.75 0 007 2.75V3H3.75A2.75 2.75 0 001 5.75v12.5A2.75 2.75 0 003.75 21h16.5A2.75 2.75 0 0023 18.25V5.75A2.75 2.75 0 0020.25 3H17v-.25A1.75 1.75 0 0015.25 1h-6.5zM17 4.5h3.25c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V5.75c0-.69.56-1.25 1.25-1.25H7v.25c0 .966.784 1.75 1.75 1.75h6.5A1.75 1.75 0 0017 4.75V4.5zm-8.5.25c0 .138.112.25.25.25h6.5a.25.25 0 00.25-.25v-2a.25.25 0 00-.25-.25h-6.5a.25.25 0 00-.25.25v2z" clip-rule="evenodd"/></g></svg>');
-}
-
-%image-16-svg-prop {
-  --image-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.5 3a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm-1 2.5a1 1 0 112 0 1 1 0 01-2 0z"/><path d="M0 2.25A2.25 2.25 0 012.25 0h11.5A2.25 2.25 0 0116 2.25v11.5A2.25 2.25 0 0113.75 16H2.25A2.25 2.25 0 010 13.75V2.25zm14.5 0v5.94l-1.835-1.836a1.75 1.75 0 00-2.335-.125L1.5 13.336V2.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75zm-.75 12.25H2.446l8.825-7.103a.25.25 0 01.333.018l2.896 2.896v3.439a.75.75 0 01-.75.75z"/></g></svg>');
-}
-
-%image-24-svg-prop {
-  --image-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M6 8.5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0zm2.5-1a1 1 0 100 2 1 1 0 000-2z"/><path d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zm18.5 8.5v-8.5c0-.69-.56-1.25-1.25-1.25H4.75c-.69 0-1.25.56-1.25 1.25v14.5c0 .024 0 .047.002.07l10.654-8.773a2.75 2.75 0 013.644.132l2.7 2.571zM4.468 20.468l10.641-8.763a1.25 1.25 0 011.657.06l3.734 3.556v3.929c0 .69-.56 1.25-1.25 1.25H4.75c-.097 0-.191-.011-.282-.032z"/></g></svg>');
-}
-
-%inbox-16-svg-prop {
-  --inbox-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.748 1a2.25 2.25 0 00-2.07 1.369L.18 8.235a2.25 2.25 0 00-.18.882v3.633A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75V9.117c0-.303-.061-.603-.18-.882L13.322 2.37A2.25 2.25 0 0011.252 1H4.748zm-.69 1.956a.75.75 0 01.69-.456h6.504c.3 0 .572.18.69.456L14.09 8H10.5a.75.75 0 00-.53.22L8.69 9.5H7.31L6.03 8.22A.75.75 0 005.5 8H1.91l2.148-5.044zM1.5 9.5v3.25c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75V9.5h-3.69l-1.28 1.28A.75.75 0 019 11H7a.75.75 0 01-.53-.22L5.19 9.5H1.5z" clip-rule="evenodd"/></svg>');
-}
-
-%inbox-24-svg-prop {
-  --inbox-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7.202 3a2.75 2.75 0 00-2.428 1.46L1.32 10.958A2.75 2.75 0 001 12.248v6.002A2.75 2.75 0 003.75 21h16.5A2.75 2.75 0 0023 18.25v-6.002c0-.45-.11-.893-.321-1.29L19.226 4.46A2.75 2.75 0 0016.798 3H7.202zM6.098 5.164A1.25 1.25 0 017.202 4.5h9.596c.462 0 .887.255 1.104.664l3.366 6.336H16a.75.75 0 00-.624.334L13.599 14.5H10.4l-1.777-2.666A.75.75 0 008 11.5H2.732l3.366-6.336zM2.5 13v5.25c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V13h-5.099l-1.777 2.666A.75.75 0 0114 16h-4a.75.75 0 01-.624-.334L7.599 13H2.5z" clip-rule="evenodd"/></svg>');
-}
-
-%info-16-svg-prop {
-  --info-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 7a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 7zM8 4a1 1 0 000 2h.007a1 1 0 000-2H8z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%info-24-svg-prop {
-  --info-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 10.5a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5a.75.75 0 01.75-.75zM12 7a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%info-circle-fill-svg-prop {
-  @extend %info-16-svg-prop;
-}
-
-%info-circle-outline-svg-prop {
-  @extend %info-16-svg-prop;
-}
-
-%jump-link-16-svg-prop {
-  --jump-link-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 2a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM1 6.25a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5A.75.75 0 011 6.25zM1.75 9a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5zM1.75 12.5a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM7.49 6.2a.75.75 0 011.06.04l1.95 2.1V5.55c0-.545-.215-1.067-.597-1.451A2.024 2.024 0 008.467 3.5H7.25a.75.75 0 010-1.5h1.217c.939 0 1.838.375 2.5 1.041A3.56 3.56 0 0112 5.55v2.79l1.95-2.1a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"/></g></svg>');
-}
-
-%jump-link-24-svg-prop {
-  --jump-link-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 4a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5zM3 9.75A.75.75 0 013.75 9h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 013 9.75zM3.75 14a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zM3.75 19a.75.75 0 000 1.5H20a.75.75 0 000-1.5H3.75zM12.952 12.238a.75.75 0 011.06-.036l2.488 2.322V8.75a3.25 3.25 0 00-3.25-3.25h-2a.75.75 0 010-1.5h2A4.75 4.75 0 0118 8.75v5.774l2.488-2.322a.75.75 0 011.024 1.096l-3.75 3.5a.75.75 0 01-1.024 0l-3.75-3.5a.75.75 0 01-.036-1.06z"/></g></svg>');
-}
-
-%key-16-svg-prop {
-  --key-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M9.16 3.657A2.236 2.236 0 0110.752 3a2.248 2.248 0 11-2.078 3.11l-.001-.002a2.243 2.243 0 01.489-2.451zm1.06 1.061a.737.737 0 01.815-.16.748.748 0 01-.284 1.44.748.748 0 01-.532-1.278l.001-.002z"/><path d="M10.354 0a5.68 5.68 0 00-4.906 2.846 5.68 5.68 0 00-.466 4.555L.22 12.162a.75.75 0 00-.22.53v2.558c0 .414.336.75.75.75h2.547a.75.75 0 00.53-.22l.655-.655a1.072 1.072 0 00.311-.784v-.64h.548c.31 0 .618-.123.843-.355l.008-.008c.204-.216.324-.498.33-.801v-.556h.676c.288 0 .566-.117.767-.327l.638-.637a5.664 5.664 0 004.55-.468 5.683 5.683 0 002.798-4.152v-.001a5.68 5.68 0 00-1.602-4.742A5.619 5.619 0 0010.354 0zm-.548 1.536a4.12 4.12 0 013.482 1.178 4.18 4.18 0 011.176 3.483 4.183 4.183 0 01-2.054 3.05 4.163 4.163 0 01-3.671.221.75.75 0 00-.143-.043l-.023-.005a.806.806 0 00-.714.219l-.842.842H5.973a.951.951 0 00-.95.951v.768h-.779a.951.951 0 00-.95.952v1.04l-.308.308H1.5v-1.497L6.355 8.15c.22-.22.311-.567.174-.888a4.178 4.178 0 01.221-3.67 4.18 4.18 0 013.053-2.054h.003z"/></g></svg>');
-}
-
-%key-24-svg-prop {
-  --key-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M13.88 5.877A2.978 2.978 0 0116.001 5a2.999 2.999 0 11-2.772 4.148v-.002a2.992 2.992 0 01.651-3.27zm1.06 1.06a1.479 1.479 0 011.062-.437 1.499 1.499 0 11-1.387 2.072 1.492 1.492 0 01.324-1.633l.002-.001z"/><path d="M14.307 1.068c.34-.047.684-.068 1.021-.068 2.049 0 3.98.799 5.429 2.247a7.72 7.72 0 012.176 6.444v.001a7.725 7.725 0 01-3.8 5.642 7.697 7.697 0 01-3.811 1.012 7.653 7.653 0 01-2.553-.437l-1.04 1.04c-.225.236-.54.37-.863.37H9.6v1.089c-.008.35-.146.675-.383.926l-.007.007a1.356 1.356 0 01-.97.408H7.155v1.22c.011.323-.11.63-.331.867l-.011.012-.007.006-.926.926a.75.75 0 01-.53.22H1.75a.75.75 0 01-.75-.75v-3.616a.75.75 0 01.22-.53l6.869-6.868a7.719 7.719 0 01.572-6.369 7.72 7.72 0 015.646-3.799zm.203 1.486c.267-.037.543-.054.818-.054 1.651 0 3.2.641 4.368 1.807a6.22 6.22 0 011.75 5.185 6.225 6.225 0 01-3.057 4.54 6.173 6.173 0 01-5.464.33.833.833 0 00-.904.175l-1.282 1.281H9.135c-.578 0-1.034.47-1.034 1.034v1.397H6.69c-.578 0-1.035.47-1.035 1.034v1.6l-.616.617H2.5v-2.555l6.955-6.954a.831.831 0 00.18-.915 6.217 6.217 0 01.328-5.464 6.22 6.22 0 014.544-3.057h.003z"/></g></svg>');
-}
-
-%key-values-16-svg-prop {
-  --key-values-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 2a.75.75 0 000 1.5h1a.75.75 0 000-1.5h-1zM6.75 5.5a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5zM1 6.25a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5A.75.75 0 011 6.25zM1.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM1 13.25a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM6.75 2a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zM6 9.75A.75.75 0 016.75 9h5.5a.75.75 0 010 1.5h-5.5A.75.75 0 016 9.75zM6.75 12.5a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5z"/></g></svg>');
-}
-
-%key-values-24-svg-prop {
-  --key-values-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 5a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5zM10.75 9a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5zM3 9.75A.75.75 0 013.75 9h3.5a.75.75 0 010 1.5h-3.5A.75.75 0 013 9.75zM3.75 13a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM3 17.75a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75zM10.75 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM10 13.75a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM10.75 17a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
-}
-
-%key-svg-prop {
-  @extend %key-16-svg-prop;
-}
-
-%keychain-16-svg-prop {
-  --keychain-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.027 1.14a2.708 2.708 0 114.139 3.49l-1.864 2.097a2.125 2.125 0 11-1.074-1.05l.614-.69a3.112 3.112 0 00-4.368 4.18.75.75 0 01-.11.897L4 13.553v.947h1.25v-1a.75.75 0 01.75-.75h.894l1.569-1.918a.75.75 0 01.799-.242 3.112 3.112 0 004.02-2.978.75.75 0 011.5 0 4.612 4.612 0 01-5.457 4.535l-1.494 1.828a.75.75 0 01-.581.275h-.5v1A.75.75 0 016 16H3.25a.75.75 0 01-.75-.75V14H.75a.75.75 0 01-.75-.75v-2a.75.75 0 01.21-.52l3.208-3.328a4.612 4.612 0 016.327-5.91l.282-.352zm-.56 1.913a.755.755 0 01-.118-.062 3.112 3.112 0 00-4.515 3.906c.202.445.165 1.026-.231 1.438L1.5 11.553v.947h1.431l2.987-3.098a4.613 4.613 0 013.549-6.35zm.987-.044c.889.054 1.71.36 2.393.847l.197-.222A1.208 1.208 0 1011.2 2.077l-.745.932zm-.079 3.99a.625.625 0 100 1.25.625.625 0 000-1.25z" clip-rule="evenodd"/></svg>');
-}
-
-%keychain-24-svg-prop {
-  --keychain-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M20.483 2.485a1.295 1.295 0 00-1.595.188l-.582.581c.787.228 1.514.6 2.147 1.086l.24-.255a1.04 1.04 0 00-.21-1.6zm-1.067 2.953A5 5 0 0011.5 9.5c0 .448.089.865.226 1.312.068.221.145.442.229.682l.005.016c.085.241.175.5.258.772a.75.75 0 01-.188.748l-5.78 5.78v1.69h1.94l.56-.56V18.5a.75.75 0 01.75-.75h1.25V16.5a.75.75 0 01.75-.75h1.69l1.28-1.28a.75.75 0 01.711-.198c.465.116.946.228 1.319.228a5 5 0 005-5 .75.75 0 011.5 0 6.5 6.5 0 01-6.5 6.5c-.422 0-.883-.085-1.267-.172L14.03 17.03a.75.75 0 01-.53.22h-1.25v1.25a.75.75 0 01-.75.75h-1.25v1a.75.75 0 01-.22.53l-1 1a.75.75 0 01-.53.22H1.75a.75.75 0 01-.75-.75v-2.79a.75.75 0 01.218-.529l5.168-5.193a6.887 6.887 0 01-.636-2.901C5.75 6.07 8.762 3 12.5 3h3.941l.029-.03 1.357-1.358a2.795 2.795 0 013.442-.404 2.54 2.54 0 01.515 3.907l-2.727 2.888a2.75 2.75 0 11-1.129-.988.7.7 0 01.027-.03l1.461-1.547zm-7.072-.936c-2.818.084-5.094 2.43-5.094 5.335 0 .975.257 1.887.704 2.672a.75.75 0 01-.12.9L2.5 18.77V20.5h2.25v-2a.75.75 0 01.22-.53l5.675-5.675a45.553 45.553 0 00-.1-.29l-.01-.027c-.08-.232-.166-.477-.243-.726-.16-.523-.292-1.098-.292-1.752 0-2.01.912-3.805 2.344-4.998zM16.75 8.25a1.25 1.25 0 100 2.5 1.25 1.25 0 000-2.5z" clip-rule="evenodd"/></svg>');
-}
-
-%kubernetes-16-svg-prop {
-  --kubernetes-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.374 15c-.335 0-.66-.153-.874-.431l-3.254-4.172a1.15 1.15 0 01-.214-.978l1.165-5.207c.074-.345.298-.623.605-.776l4.715-2.32c.15-.078.317-.116.485-.116.168 0 .335.038.485.115L13.2 3.426c.308.153.532.432.606.777l1.165 5.207c.074.345 0 .7-.214.978L11.5 14.566c-.214.268-.54.434-.875.434h-5.25zm7.718-5.835l.031.008a.308.308 0 01.26.371.306.306 0 01-.396.223h-.004l-.003-.001-.003-.001-.03-.007-.05-.01a2.548 2.548 0 01-.274-.106 2.87 2.87 0 00-.533-.156.242.242 0 00-.171.063 4.76 4.76 0 00-.131-.023 3.972 3.972 0 01-1.764 2.212c.015.042.032.083.051.123a.239.239 0 00-.023.18c.074.17.165.332.271.484.06.078.114.16.164.244l.028.057.012.025a.306.306 0 01-.381.44.307.307 0 01-.172-.18 2.608 2.608 0 00-.01-.02l-.028-.058a2.545 2.545 0 01-.089-.28 2.835 2.835 0 00-.21-.512.242.242 0 00-.156-.095 5.926 5.926 0 01-.03-.053l-.035-.064a3.97 3.97 0 01-2.824-.007l-.069.125a.249.249 0 00-.132.064c-.104.17-.184.355-.237.548a2.525 2.525 0 01-.088.28l-.025.05-.013.027v.001a.307.307 0 11-.553-.261l.014-.03.026-.052c.05-.085.104-.166.164-.244.108-.156.2-.322.277-.496a.302.302 0 00-.028-.173l.056-.133A3.972 3.972 0 014.22 9.532l-.134.023a.34.34 0 00-.176-.062 2.872 2.872 0 00-.533.156c-.09.04-.181.075-.274.105l-.05.011-.03.007H3.02l-.002.002h-.005a.308.308 0 01-.397-.349.306.306 0 01.261-.245l.004-.001h.003l.006-.002c.024-.006.054-.014.076-.018.097-.013.195-.021.293-.023.186-.013.37-.043.549-.09a.422.422 0 00.131-.133l.128-.037a3.938 3.938 0 01.624-2.752l-.097-.087a.338.338 0 00-.062-.176 2.854 2.854 0 00-.455-.319 2.557 2.557 0 01-.254-.148 1.129 1.129 0 01-.063-.05l-.004-.004a.323.323 0 01-.076-.45.295.295 0 01.244-.107.365.365 0 01.213.08l.022.017c.016.013.034.026.046.037.071.067.139.139.202.213.125.137.263.262.412.372.056.03.121.036.182.018l.11.078a3.938 3.938 0 012.552-1.224l.007-.129a.332.332 0 00.1-.157 2.844 2.844 0 00-.034-.554 2.555 2.555 0 01-.042-.29v-.053-.025-.004-.004A.306.306 0 018 2.82a.308.308 0 01.306.337v.087a2.53 2.53 0 01-.041.29 2.85 2.85 0 00-.035.553.242.242 0 00.1.153v.007l.007.13c.967.087 1.87.522 2.54 1.223l.116-.083a.34.34 0 00.186-.02c.149-.11.287-.235.412-.373a2.53 2.53 0 01.202-.213l.051-.04.017-.014a.308.308 0 01.472.388.307.307 0 01-.09.09c-.008.005-.017.012-.025.02l-.043.033a2.549 2.549 0 01-.254.148 2.865 2.865 0 00-.455.32.24.24 0 00-.058.172 4.458 4.458 0 01-.05.044l-.058.053c.542.806.769 1.783.637 2.745l.123.036c.031.056.077.101.132.132.18.048.364.078.55.09.097.003.195.01.292.024l.058.013zm-2.875-3.1l-1.308.925-.004-.002a.27.27 0 01-.43-.205v-.001l-.091-1.598a3.183 3.183 0 011.833.882zM7.754 7.818h.492l.306.381-.11.476L8 8.886l-.443-.213-.11-.475.307-.381zM7.29 5.24c.107-.024.216-.043.326-.056l-.09 1.6-.008.004a.268.268 0 01-.293.256.27.27 0 01-.135-.05l-.002.001-1.316-.93c.419-.41.945-.696 1.518-.825zM5.296 6.663l1.201 1.071-.001.007a.269.269 0 01-.106.462l-.001.005-1.54.443a3.134 3.134 0 01.447-1.988zm1.608 2.846l-.612 1.474a3.16 3.16 0 01-1.27-1.586L6.6 9.13l.003.003a.265.265 0 01.18.029.27.27 0 01.117.341l.004.006zm1.806 1.896c-.572.13-1.17.1-1.726-.088l.777-1.4h.001a.27.27 0 01.475-.001h.006l.779 1.402a3.286 3.286 0 01-.312.087zm1.004-.416L9.096 9.5l.001-.003a.269.269 0 01.296-.37l.003-.004 1.593.269a3.147 3.147 0 01-1.275 1.597zm1.442-2.343L9.61 8.201l-.002-.006a.27.27 0 01-.185-.343.27.27 0 01.08-.12L9.5 7.73l1.195-1.067c.366.594.527 1.29.46 1.983z" clip-rule="evenodd"/></svg>');
-}
-
-%kubernetes-24-svg-prop {
-  --kubernetes-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.249 22c-.48 0-.943-.22-1.249-.616l-4.648-5.96a1.644 1.644 0 01-.306-1.397L3.71 6.59c.106-.493.426-.89.865-1.11l6.736-3.315c.213-.11.452-.164.692-.164.24 0 .479.055.692.164l6.736 3.302c.439.219.758.616.865 1.11l1.664 7.438c.106.493 0 1-.306 1.397L17 21.38c-.306.384-.77.62-1.25.62H8.249zm11.025-8.335l.045.01a.439.439 0 01.294.695.437.437 0 01-.488.155l-.007-.001-.004-.002a6.82 6.82 0 00-1.703-.342 5.673 5.673 0 01-2.52 3.16c.021.06.046.12.074.176a.342.342 0 00-.034.257c.106.243.236.474.388.692.084.111.162.227.234.347l.04.082.017.036a.438.438 0 01-.695.526.439.439 0 01-.095-.154l-.015-.03-.04-.082a3.632 3.632 0 01-.126-.399 4.058 4.058 0 00-.3-.733.345.345 0 00-.223-.135l-.043-.076-.05-.092a5.67 5.67 0 01-4.034-.01l-.099.179a.356.356 0 00-.188.091 3.044 3.044 0 00-.339.783 3.594 3.594 0 01-.126.4 1.764 1.764 0 01-.054.11v.002a.436.436 0 01-.425.29.442.442 0 01-.409-.311.436.436 0 01.044-.352l.02-.043a1.69 1.69 0 01.036-.074c.072-.121.15-.237.235-.349.154-.223.286-.46.395-.709a.431.431 0 00-.039-.246l.08-.19a5.674 5.674 0 01-2.52-3.138l-.191.033a.486.486 0 00-.251-.088 4.1 4.1 0 00-.762.223 3.704 3.704 0 01-.392.15l-.071.016a3.181 3.181 0 00-.042.01h-.005l-.004.002h-.006a.44.44 0 01-.568-.498.437.437 0 01.374-.35l.006-.002.004-.001.008-.002c.035-.009.077-.02.108-.025.14-.02.28-.03.42-.034a4.09 4.09 0 00.783-.128.603.603 0 00.188-.19l.183-.052a5.626 5.626 0 01.892-3.931l-.14-.125a.483.483 0 00-.088-.251 4.077 4.077 0 00-.65-.456 3.653 3.653 0 01-.363-.211 1.616 1.616 0 01-.09-.073L5.936 8.2a.462.462 0 01-.107-.642.42.42 0 01.348-.154.522.522 0 01.336.139l.066.053c.102.096.198.198.288.305.178.195.376.373.589.53.08.042.173.051.26.026.051.037.104.075.157.111A5.626 5.626 0 0111.52 6.82l.01-.184a.475.475 0 00.142-.225c.01-.265-.007-.53-.049-.79a3.644 3.644 0 01-.06-.415l.001-.076v-.036-.005-.007a.437.437 0 01.615-.444.44.44 0 01.259.444v.046c.001.027.002.056 0 .078-.011.139-.031.277-.059.414a4.063 4.063 0 00-.05.79.345.345 0 00.143.218v.011l.01.184a5.734 5.734 0 013.629 1.748l.166-.119c.09.016.181.006.265-.028.213-.158.41-.336.59-.532.09-.107.186-.209.288-.305l.073-.058.024-.019a.44.44 0 11.544.682l-.035.028-.061.05a3.638 3.638 0 01-.363.21c-.231.13-.449.283-.65.456a.344.344 0 00-.082.247 7.827 7.827 0 01-.155.138 5.65 5.65 0 01.91 3.922l.177.051a.49.49 0 00.188.19c.257.068.52.11.784.128.14.003.28.014.419.034.023.004.054.011.082.018zm-4.108-4.428l-1.867 1.32-.007-.003a.386.386 0 01-.612-.293l-.002-.001-.13-2.282a4.546 4.546 0 012.618 1.259zm-3.518 2.501h.703l.437.545-.157.68-.631.303-.633-.304-.157-.68.438-.544zm-.661-3.68a4.64 4.64 0 01.466-.08l-.13 2.285-.01.005a.383.383 0 01-.419.366.387.387 0 01-.192-.072l-.004.003-1.88-1.33a4.505 4.505 0 012.169-1.177zm-2.85 2.032l1.716 1.53-.002.01a.384.384 0 01-.151.66l-.002.007-2.2.633c-.11-.991.115-1.99.639-2.84zm2.298 4.066l-.874 2.106a4.514 4.514 0 01-1.816-2.266L10 13.614l.003.005a.376.376 0 01.257.04.385.385 0 01.167.488l.007.009zm2.58 2.708a4.531 4.531 0 01-2.466-.126l1.11-2h.001a.385.385 0 01.679 0h.008l1.113 2.003c-.145.048-.293.089-.445.123zm1.433-.594l-.883-2.127.003-.004a.384.384 0 01.423-.53l.004-.004 2.275.383a4.497 4.497 0 01-1.822 2.282zm2.061-3.347l-2.21-.635-.003-.01a.386.386 0 01-.264-.489.386.386 0 01.113-.17v-.005l1.706-1.523a4.56 4.56 0 01.658 2.832z" clip-rule="evenodd"/></svg>');
-}
-
-%kubernetes-color-16-svg-prop {
-  --kubernetes-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23326DE6" d="M4.5 14.569c.214.278.539.431.874.431h5.251c.335 0 .66-.165.875-.434l3.258-4.178c.214-.278.288-.633.214-.978l-1.165-5.207a1.128 1.128 0 00-.606-.777l-4.714-2.31A1.062 1.062 0 008.002 1c-.168 0-.335.038-.485.115l-4.715 2.32a1.129 1.129 0 00-.605.777L1.032 9.42c-.084.345 0 .7.214.978L4.5 14.568z"/><path fill="%23fff" fill-rule="evenodd" d="M12.741 9.128c.098.003.196.01.293.024l.058.013.031.008a.308.308 0 01.26.371.306.306 0 01-.396.223h-.004l-.003-.001-.003-.001a1.58 1.58 0 00-.08-.017 2.55 2.55 0 01-.274-.106 2.867 2.867 0 00-.533-.156.243.243 0 00-.171.063 4.656 4.656 0 00-.131-.023 3.971 3.971 0 01-1.764 2.212c.015.042.032.083.051.123a.239.239 0 00-.023.18c.074.17.165.332.271.484.06.078.114.16.164.244l.028.057.012.025a.305.305 0 01-.132.434.31.31 0 01-.354-.066.307.307 0 01-.067-.107l-.01-.021a1.57 1.57 0 01-.028-.058 2.553 2.553 0 01-.089-.28 2.834 2.834 0 00-.21-.512.242.242 0 00-.156-.095 6.199 6.199 0 01-.03-.053l-.035-.064a3.97 3.97 0 01-2.823-.007l-.07.125a.249.249 0 00-.132.064 2.13 2.13 0 00-.237.548 2.518 2.518 0 01-.088.28l-.025.05-.013.027v.001a.306.306 0 01-.421.173.307.307 0 01-.132-.434l.014-.03.026-.052c.05-.085.104-.166.164-.244.108-.156.2-.322.277-.496a.302.302 0 00-.028-.173l.056-.133A3.972 3.972 0 014.22 9.532l-.134.023a.34.34 0 00-.176-.062 2.872 2.872 0 00-.533.156c-.09.04-.181.075-.274.105l-.05.011-.03.007H3.02l-.002.002h-.005a.308.308 0 01-.397-.349.306.306 0 01.261-.245l.005-.001h.002l.006-.002c.024-.006.054-.014.076-.018.097-.013.195-.021.293-.023.186-.013.37-.043.549-.09a.422.422 0 00.131-.133l.128-.037a3.938 3.938 0 01.625-2.752l-.098-.087a.338.338 0 00-.062-.176 2.854 2.854 0 00-.455-.319 2.557 2.557 0 01-.254-.148l-.048-.038-.015-.012-.004-.004a.323.323 0 01-.076-.45.295.295 0 01.244-.107.365.365 0 01.213.08l.022.017c.016.013.034.026.046.037.072.067.139.139.202.213.125.137.263.262.412.372.056.03.121.036.182.018l.11.078a3.938 3.938 0 012.552-1.224l.008-.129a.332.332 0 00.099-.157 2.844 2.844 0 00-.034-.554 2.56 2.56 0 01-.042-.29v-.082-.004A.306.306 0 018 2.82a.308.308 0 01.306.337v.087a2.529 2.529 0 01-.041.29 2.85 2.85 0 00-.035.553.242.242 0 00.1.153v.007l.007.13c.967.087 1.87.522 2.54 1.223l.116-.083a.34.34 0 00.186-.02c.149-.11.287-.235.412-.373.063-.074.13-.146.202-.213l.051-.04.017-.014a.307.307 0 11.381.477l-.024.02c-.015.012-.03.025-.043.034a2.537 2.537 0 01-.254.148 2.87 2.87 0 00-.455.32.241.241 0 00-.058.172l-.05.044-.058.053c.542.806.77 1.783.637 2.745l.123.036c.031.056.077.101.133.132.179.048.363.078.548.09zM7.291 5.24c.107-.024.216-.043.326-.056l-.09 1.6-.008.004a.268.268 0 01-.293.256.27.27 0 01-.135-.05l-.002.001-1.316-.93c.419-.41.945-.696 1.518-.825zm1.618 1.75l1.308-.924a3.182 3.182 0 00-1.833-.882l.09 1.598h.002a.268.268 0 00.294.256.27.27 0 00.135-.05l.004.002zm2.248 1.656l-1.548-.445-.002-.006a.27.27 0 01-.185-.343.27.27 0 01.08-.12L9.5 7.73l1.195-1.067c.366.594.527 1.29.46 1.983zM9.096 9.5l.618 1.49a3.148 3.148 0 001.275-1.598l-1.593-.269-.002.004a.26.26 0 00-.166.022.27.27 0 00-.13.348l-.002.003zm-.385 1.905c-.573.13-1.17.1-1.727-.088l.777-1.4h.001a.27.27 0 01.475-.001h.006l.779 1.402a3.286 3.286 0 01-.311.087zm-2.418-.422l.611-1.474-.004-.006a.268.268 0 00-.297-.37L6.6 9.13l-1.579.267a3.16 3.16 0 001.272 1.586zm-.997-4.32l1.201 1.071-.001.007a.269.269 0 01-.106.462l-.001.005-1.54.443a3.134 3.134 0 01.447-1.988zm2.95 1.154h-.492l-.307.38.11.476.443.213.442-.212.11-.476-.306-.381z" clip-rule="evenodd"/></svg>');
-}
-
-%kubernetes-color-24-svg-prop {
-  --kubernetes-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23326DE6" d="M7 21.384c.306.397.77.616 1.249.616h7.501c.48 0 .944-.236 1.25-.62l4.654-5.969a1.69 1.69 0 00.306-1.397l-1.664-7.439a1.612 1.612 0 00-.865-1.11l-6.736-3.3A1.517 1.517 0 0012.003 2c-.24 0-.48.055-.692.164L4.575 5.48c-.44.22-.759.617-.865 1.11l-1.664 7.438c-.12.494 0 1 .306 1.398L7 21.384z"/><path fill="%23fff" fill-rule="evenodd" d="M18.773 13.612c.14.003.28.014.419.033a1.424 1.424 0 01.127.03.439.439 0 01.294.695.437.437 0 01-.488.155l-.007-.001-.004-.002-.004-.001-.043-.01-.07-.014a3.664 3.664 0 01-.392-.151 4.094 4.094 0 00-.762-.224.346.346 0 00-.245.09 6.82 6.82 0 00-.187-.032 5.674 5.674 0 01-2.52 3.16c.021.06.046.119.074.176a.342.342 0 00-.034.257c.106.243.236.474.388.692.084.111.162.227.234.347l.04.082.017.036a.437.437 0 01-.545.629.44.44 0 01-.245-.257l-.015-.03-.04-.082a3.625 3.625 0 01-.126-.4 4.058 4.058 0 00-.3-.732.346.346 0 00-.223-.135l-.043-.076-.05-.092c-1.3.491-2.736.488-4.034-.01l-.099.179a.356.356 0 00-.188.091 3.044 3.044 0 00-.339.783 3.6 3.6 0 01-.126.4l-.035.073-.019.037v.002a.437.437 0 01-.602.248.439.439 0 01-.188-.621l.02-.043.036-.075c.072-.12.15-.236.235-.348.154-.223.286-.46.395-.709a.432.432 0 00-.039-.246l.08-.19a5.674 5.674 0 01-2.52-3.138l-.191.033a.485.485 0 00-.251-.088c-.261.05-.516.124-.762.223a3.683 3.683 0 01-.392.15l-.071.016c-.015.003-.03.006-.042.01h-.005l-.004.002h-.006a.44.44 0 01-.568-.498.437.437 0 01.374-.35l.006-.002.004-.001.008-.002c.035-.009.077-.02.108-.025.14-.02.28-.03.42-.034.264-.017.527-.06.783-.129a.603.603 0 00.188-.188l.183-.053a5.626 5.626 0 01.892-3.931l-.14-.125a.483.483 0 00-.088-.251 4.077 4.077 0 00-.65-.456 3.655 3.655 0 01-.363-.212 1.61 1.61 0 01-.069-.055l-.02-.017-.008-.005a.462.462 0 01-.107-.642.42.42 0 01.348-.154.522.522 0 01.305.115l.03.024.067.053c.102.096.198.198.288.305.178.195.376.373.589.53.08.042.173.051.26.026.051.037.104.075.157.111A5.626 5.626 0 0111.52 6.82l.01-.184a.474.474 0 00.142-.225c.01-.265-.007-.53-.049-.79a3.644 3.644 0 01-.06-.415l.001-.076V5.089v-.007a.437.437 0 01.615-.444.44.44 0 01.259.444v.046c.001.027.002.056 0 .078-.011.139-.031.277-.059.414a4.063 4.063 0 00-.05.79.345.345 0 00.143.218v.011l.01.184A5.734 5.734 0 0116.11 8.57l.166-.119c.09.016.181.006.265-.028.213-.158.41-.336.59-.532.09-.107.186-.209.288-.305l.073-.058.024-.019a.44.44 0 11.544.682l-.035.028-.061.05a3.634 3.634 0 01-.363.21c-.231.13-.449.283-.65.456a.344.344 0 00-.082.247 8.03 8.03 0 01-.155.138 5.65 5.65 0 01.91 3.922l.177.051a.49.49 0 00.188.19c.257.068.52.11.784.128zm-7.786-5.554a4.64 4.64 0 01.466-.08l-.13 2.285-.01.005a.383.383 0 01-.419.366.386.386 0 01-.192-.072l-.004.003-1.88-1.33a4.505 4.505 0 012.169-1.177zm2.312 2.5l1.867-1.321a4.546 4.546 0 00-2.618-1.26l.13 2.283h.002a.383.383 0 00.42.366.386.386 0 00.192-.072l.007.003zm3.21 2.365l-2.21-.635-.003-.01a.386.386 0 01-.264-.489.385.385 0 01.113-.17v-.005l1.706-1.523a4.56 4.56 0 01.658 2.832zm-2.944 1.22l.883 2.127a4.497 4.497 0 001.822-2.282l-2.275-.383-.004.004a.37.37 0 00-.236.032.385.385 0 00-.187.498l-.003.004zm-.55 2.721a4.531 4.531 0 01-2.466-.126l1.11-2h.001a.386.386 0 01.679-.001h.008l1.113 2.004c-.145.048-.293.089-.445.123zm-3.454-.602l.874-2.106-.007-.009a.383.383 0 00-.424-.528l-.003-.005-2.256.382c.338.934.977 1.73 1.816 2.266zM8.137 10.09l1.716 1.53-.002.01a.384.384 0 01-.151.66l-.002.007-2.2.633c-.11-.991.115-1.99.639-2.84zm4.214 1.648h-.703l-.438.544.157.68.633.303.631-.302.157-.68-.437-.545z" clip-rule="evenodd"/></svg>');
-}
-
-%labyrinth-16-svg-prop {
-  --labyrinth-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 1.5a6.502 6.502 0 00-6.392 5.317.75.75 0 11-1.476-.27 8 8 0 110 2.907.75.75 0 011.476-.272A6.502 6.502 0 0014.48 8.5h-1.555a4.95 4.95 0 11-6.34-5.231.7.7 0 11.4 1.342A3.558 3.558 0 004.595 7h1.167a2.45 2.45 0 113.87 2.826.7.7 0 01-.933-1.043 1.05 1.05 0 10-1.4 0 .7.7 0 01-.934 1.043A2.45 2.45 0 015.601 8.5H4.483a3.55 3.55 0 104.531-3.89.7.7 0 01.4-1.341 4.958 4.958 0 013.432 3.73h1.578A6.501 6.501 0 008 1.5z"/></svg>');
-}
-
-%labyrinth-24-svg-prop {
-  --labyrinth-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M1.694 10.094C2.59 5.216 6.864 1.52 12 1.52c5.45 0 9.929 4.16 10.432 9.479h-2.525a7.977 7.977 0 00-5.63-6.639.75.75 0 10-.428 1.438A6.469 6.469 0 115.55 12.5h2.543c.122.964.593 1.82 1.28 2.435a.75.75 0 101.001-1.118 2.437 2.437 0 113.25 0 .75.75 0 001 1.118A3.938 3.938 0 108.19 11H5.609a6.477 6.477 0 014.543-5.201.75.75 0 10-.427-1.438 7.969 7.969 0 1010.23 8.139h2.513c-.26 5.555-4.847 9.98-10.467 9.98-5.136 0-9.41-3.697-10.306-8.574a.75.75 0 00-1.476.271C1.243 19.754 6.127 23.98 12 23.98c6.616 0 11.98-5.363 11.98-11.98C23.98 5.385 18.615.022 12 .022 6.127.02 1.243 4.246.218 9.823a.75.75 0 101.476.27z"/></svg>');
-}
-
-%layers-16-svg-prop {
-  --layers-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M7.656.084a.75.75 0 01.689 0l7.25 3.75a.75.75 0 010 1.332l-7.25 3.75a.75.75 0 01-.69 0l-7.25-3.75a.75.75 0 010-1.332l7.25-3.75zM2.383 4.5L8 7.405 13.617 4.5 8 1.594 2.383 4.5z" clip-rule="evenodd"/><path d="M.093 10.887a.75.75 0 011.02-.294L8 14.393l6.887-3.8a.75.75 0 11.725 1.313l-7.25 4a.75.75 0 01-.724 0l-7.25-4a.75.75 0 01-.295-1.019z"/><path d="M1.112 7.093a.75.75 0 10-.724 1.313l7.25 4a.75.75 0 00.724 0l7.25-4a.75.75 0 10-.725-1.313L8 10.893l-6.888-3.8z"/></g></svg>');
-}
-
-%layers-24-svg-prop {
-  --layers-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M11.658 1.082a.75.75 0 01.684 0l10.25 5.25a.75.75 0 010 1.336l-10.25 5.25a.75.75 0 01-.684 0l-10.25-5.25a.75.75 0 010-1.336l10.25-5.25zM3.395 7L12 11.407 20.605 7 12 2.593 3.395 7z" clip-rule="evenodd"/><path d="M1.089 16.395a.75.75 0 011.016-.306L12 21.399l9.895-5.31a.75.75 0 01.71 1.322l-10.25 5.5a.75.75 0 01-.71 0l-10.25-5.5a.75.75 0 01-.306-1.016z"/><path d="M2.105 11.089a.75.75 0 00-.71 1.322l10.25 5.5a.75.75 0 00.71 0l10.25-5.5a.75.75 0 00-.71-1.322L12 16.399l-9.895-5.31z"/></g></svg>');
-}
-
-%layers-svg-prop {
-  @extend %layers-16-svg-prop;
-}
-
-%layout-16-svg-prop {
-  --layout-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zM6.5 13.5h6.25a.75.75 0 00.75-.75V6.5h-7v7zM5 6.5v7H3.25a.75.75 0 01-.75-.75V6.5H5zM13.5 5V3.25a.75.75 0 00-.75-.75h-9.5a.75.75 0 00-.75.75V5h11z" clip-rule="evenodd"/></svg>');
-}
-
-%layout-24-svg-prop {
-  --layout-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zM9 20.5h10.25c.69 0 1.25-.56 1.25-1.25V9.5H9v11zm-1.5-11v11H4.75c-.69 0-1.25-.56-1.25-1.25V9.5h4zm13-1.5V4.75c0-.69-.56-1.25-1.25-1.25H4.75c-.69 0-1.25.56-1.25 1.25V8h17z" clip-rule="evenodd"/></svg>');
-}
-
-%learn-16-svg-prop {
-  --learn-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.316 2.07a.75.75 0 00-.632 0l-7 3.25a.75.75 0 000 1.36l1.434.666A.746.746 0 002 7.75V11a.75.75 0 00.158.46L2.75 11l-.592.46.001.002.001.001.003.004.008.01a1.882 1.882 0 00.103.12c.068.076.165.178.292.299.254.24.63.555 1.132.866C4.706 13.388 6.217 14 8.25 14c2.037 0 3.44-.615 4.345-1.266a5.32 5.32 0 00.977-.902 3.916 3.916 0 00.322-.448l.007-.012.003-.004v-.002h.001c0-.001 0-.002-.655-.366l.655.365A.754.754 0 0014 11V7.75a.747.747 0 00-.118-.404l1.434-.666a.75.75 0 000-1.36l-7-3.25zM12.5 7.988L8.316 9.93a.75.75 0 01-.632 0L3.5 7.988v2.723a5.585 5.585 0 00.99.776c.804.5 2.043 1.013 3.76 1.013 1.713 0 2.81-.51 3.468-.984a3.812 3.812 0 00.782-.745V7.988zM8 8.423L2.781 6 8 3.577 13.219 6 8 8.423z" clip-rule="evenodd"/></svg>');
-}
-
-%learn-24-svg-prop {
-  --learn-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12.367 3.096a.75.75 0 00-.734 0l-10.25 5.75a.75.75 0 000 1.308l2.82 1.582A.747.747 0 004 12.25v5a.75.75 0 00.12.407l.63-.407-.63.408.001.001.002.002.003.005.009.013a2.202 2.202 0 00.118.162c.08.1.194.237.348.397.308.321.774.736 1.427 1.147C7.34 20.21 9.378 21 12.345 21c2.968 0 4.854-.79 6.018-1.646a5.597 5.597 0 001.209-1.193 3.945 3.945 0 00.339-.553 1.8 1.8 0 00.02-.043l.007-.016.002-.006.001-.002v-.001s.001-.002-.691-.29l.692.288A.75.75 0 0020 17.25v-5a.747.747 0 00-.203-.514l2.82-1.582a.75.75 0 000-1.308l-10.25-5.75zm6.133 9.368l-6.133 3.44a.75.75 0 01-.734 0L5.5 12.464v4.533c.047.055.107.124.182.202.233.242.605.577 1.144.916 1.072.675 2.833 1.385 5.52 1.385 2.686 0 4.252-.71 5.128-1.354.442-.325.722-.644.887-.87.061-.084.107-.155.139-.21v-4.602zM12 14.39L3.283 9.5 12 4.61l8.717 4.89L12 14.39z" clip-rule="evenodd"/></svg>');
-}
-
-%learn-link-16-svg-prop {
-  --learn-link-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M12.75 0a.75.75 0 000 1.5h.69l-1.97 1.97a.75.75 0 001.06 1.06l1.97-1.97v.69a.75.75 0 001.5 0V.75a.75.75 0 00-.75-.75h-2.5z"/><path fill-rule="evenodd" d="M8.075 4.074a.75.75 0 00-.65 0l-6.75 3.25a.75.75 0 000 1.352L2 9.314v3.511a.75.75 0 00.064.302l.686-.302c-.686.302-.686.304-.686.304l.002.004.003.006.006.013a1.268 1.268 0 00.075.139c.047.08.116.184.21.303.19.238.483.533.917.82.871.575 2.265 1.086 4.45 1.086 2.177 0 3.487-.508 4.271-1.122.39-.305.632-.623.78-.884a2.194 2.194 0 00.19-.447l.01-.041.004-.017.001-.007.001-.003v-.001s0-.002-.734-.153l.735.151c.01-.05.015-.1.015-.151v-3.27l1.825-.88a.75.75 0 000-1.35l-6.75-3.25zm3.425 6.203l-3.425 1.649a.75.75 0 01-.65 0L3.5 10.036v2.579l.033.043c.098.123.276.309.57.504.585.386 1.679.838 3.623.838 1.95 0 2.902-.454 3.348-.803.225-.176.34-.34.396-.44a.878.878 0 00.03-.057v-2.423zm-3.75.14L2.729 8 7.75 5.582 12.771 8 7.75 10.418z" clip-rule="evenodd"/></g></svg>');
-}
-
-%learn-link-24-svg-prop {
-  --learn-link-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M18.75 1a.75.75 0 000 1.5h1.69l-2.97 2.97a.75.75 0 001.06 1.06l2.97-2.97v1.69a.75.75 0 001.5 0v-3.5a.75.75 0 00-.75-.75h-3.5z"/><path fill-rule="evenodd" d="M11.856 5.09a.75.75 0 00-.712 0l-9.75 5.25a.75.75 0 000 1.32l2.627 1.415A.752.752 0 004 13.25v5.333a.75.75 0 00.067.31l.683-.31-.683.31v.002l.002.003.003.006.007.016a1.657 1.657 0 00.094.168c.061.101.151.234.277.387.251.308.643.694 1.23 1.072C6.857 21.306 8.772 22 11.82 22c3.043 0 4.827-.692 5.87-1.487.52-.397.838-.806 1.029-1.138a2.714 2.714 0 00.244-.557c.005-.018.01-.034.012-.048l.005-.018.001-.007.001-.004v-.001s0-.002-.733-.157l.734.155a.752.752 0 00.016-.155V13.25c0-.06-.007-.12-.02-.175l2.626-1.415a.75.75 0 000-1.32l-9.75-5.25zM17.5 13.87l-5.644 3.04a.75.75 0 01-.712 0L5.5 13.87v4.508c.028.04.064.09.11.146.158.192.434.472.882.761.892.575 2.513 1.214 5.33 1.214 2.823 0 4.253-.641 4.959-1.18a2.41 2.41 0 00.64-.695c.039-.067.064-.121.079-.159v-4.595zm-6 1.527L3.332 11 11.5 6.602 19.668 11 11.5 15.398z" clip-rule="evenodd"/></g></svg>');
-}
-
-%learn-svg-prop {
-  @extend %learn-16-svg-prop;
-}
-
-%line-chart-16-svg-prop {
-  --line-chart-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-9.5A2.25 2.25 0 0013.75 1H2.25zM1.5 3.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75H11V13a.75.75 0 00-1.5 0v.5h-3V13A.75.75 0 005 13v.5H2.25a.75.75 0 01-.75-.75v-1.19l4.636-3.708 3.586 1.345a.752.752 0 00.76-.122l2.487-1.99a.75.75 0 10-.938-1.17L9.864 7.647 6.28 6.303a.754.754 0 00-.754.116L1.5 9.64V3.25z" clip-rule="evenodd"/></svg>');
-}
-
-%line-chart-24-svg-prop {
-  --line-chart-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.75 2A2.75 2.75 0 001 4.75v14.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V4.75A2.75 2.75 0 0020.25 2H3.75zM2.5 16.353v2.897c0 .69.56 1.25 1.25 1.25H8v-.75a.75.75 0 011.5 0v.75h5v-.75a.75.75 0 011.5 0v.75h4.25c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75c-.69 0-1.25.56-1.25 1.25v9.656l6.007-4.971a.748.748 0 01.842-.1l5.572 2.787L18.55 9.4a.75.75 0 11.9 1.2l-3.987 2.99a.754.754 0 01-.812.074l-5.55-2.775L2.5 16.353z" clip-rule="evenodd"/></svg>');
-}
-
-%line-chart-up-16-svg-prop {
-  --line-chart-up-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h11.5A2.25 2.25 0 0116 3.25v9.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v7.075L5.61 7.86a.73.73 0 01.278-.101.747.747 0 01.318.02L9.08 8.6l1.328-2.988-.9.405a.75.75 0 01-.615-1.368l2.58-1.16a.75.75 0 01.991.376l1.16 2.58a.75.75 0 01-1.367.615l-.428-.951-1.638 3.686a.75.75 0 01-.908.423L6.107 9.31 1.5 12.075v.675c0 .414.336.75.75.75H5V13a.75.75 0 011.5 0v.5h3V13a.75.75 0 011.5 0v.5h2.75a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75H2.25z" clip-rule="evenodd"/></svg>');
-}
-
-%line-chart-up-24-svg-prop {
-  --line-chart-up-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h16.5A2.75 2.75 0 0123 4.75v14.5A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25v-2.236V4.75zm1.5 12.644v1.856c0 .69.56 1.25 1.25 1.25H8v-.75a.75.75 0 011.5 0v.75h5v-.75a.75.75 0 011.5 0v.75h4.25c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75c-.69 0-1.25.56-1.25 1.25v10.822l6.074-4.19a.746.746 0 01.721-.072l4.304 1.722 2.163-5.047-1.554.699a.75.75 0 01-.616-1.368l3.192-1.436a.75.75 0 01.992.376l1.436 3.192a.75.75 0 11-1.368.615l-.687-1.526-2.463 5.747a.75.75 0 01-.973.413l-4.626-1.851L2.5 17.394z" clip-rule="evenodd"/></svg>');
-}
-
-%link-16-svg-prop {
-  --link-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.141 1a3.893 3.893 0 00-2.738 1.093L7.314 3.175A.75.75 0 008.372 4.24l1.077-1.07a2.393 2.393 0 013.384 3.382l-1.881 1.88a2.393 2.393 0 01-3.608-.258.75.75 0 00-1.202.899 3.893 3.893 0 005.87.42l1.886-1.886.01-.009A3.893 3.893 0 0011.14 1z"/><path d="M7.019 5.365a3.893 3.893 0 00-3.032 1.13L2.102 8.382l-.01.01a3.893 3.893 0 005.505 5.504l1.084-1.084a.75.75 0 00-1.06-1.06l-1.07 1.07a2.393 2.393 0 01-3.384-3.384l1.881-1.88a2.393 2.393 0 013.609.258.75.75 0 101.2-.899A3.893 3.893 0 007.02 5.365z"/></g></svg>');
-}
-
-%link-24-svg-prop {
-  --link-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.575 2a5.48 5.48 0 00-3.848 1.531L11.094 5.15a.75.75 0 001.056 1.065l1.62-1.606a3.98 3.98 0 015.567.052 3.951 3.951 0 01.053 5.542l-2.829 2.82a3.974 3.974 0 01-3.094 1.15 3.984 3.984 0 01-2.898-1.577.75.75 0 10-1.2.9 5.47 5.47 0 003.991 2.174 5.486 5.486 0 004.26-1.585l2.834-2.824.009-.01a5.45 5.45 0 00-.067-7.652A5.48 5.48 0 0016.576 2z"/><path d="M10.64 8.33a5.486 5.486 0 00-4.26 1.585L3.545 12.74l-.009.01a5.45 5.45 0 00.067 7.652 5.48 5.48 0 007.67.067l1.624-1.62a.75.75 0 10-1.06-1.062l-1.61 1.605a3.98 3.98 0 01-5.565-.052 3.951 3.951 0 01-.053-5.543l2.829-2.82a3.973 3.973 0 013.094-1.15 3.984 3.984 0 012.898 1.578.75.75 0 001.2-.9A5.468 5.468 0 0010.64 8.33z"/></g></svg>');
-}
-
-%link-svg-prop {
-  @extend %link-16-svg-prop;
-}
-
-%linkedin-16-svg-prop {
-  --linkedin-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.225 12.225h-1.778V9.44c0-.664-.012-1.519-.925-1.519-.926 0-1.068.724-1.068 1.47v2.834H6.676V6.498h1.707v.783h.024c.348-.594.996-.95 1.684-.925 1.802 0 2.135 1.185 2.135 2.728l-.001 3.14zM4.67 5.715a1.037 1.037 0 01-1.032-1.031c0-.566.466-1.032 1.032-1.032.566 0 1.031.466 1.032 1.032 0 .566-.466 1.032-1.032 1.032zm.889 6.51h-1.78V6.498h1.78v5.727zM13.11 2H2.885A.88.88 0 002 2.866v10.268a.88.88 0 00.885.866h10.226a.882.882 0 00.889-.866V2.865a.88.88 0 00-.889-.864z"/></svg>');
-}
-
-%linkedin-24-svg-prop {
-  --linkedin-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M19.041 19.041h-2.963v-4.64c0-1.107-.02-2.532-1.541-2.532-1.544 0-1.78 1.206-1.78 2.45v4.722H9.794V9.497h2.844v1.305h.04a3.121 3.121 0 012.807-1.542c3.004 0 3.558 1.976 3.558 4.546l-.002 5.235zM6.45 8.193c-.944 0-1.72-.776-1.72-1.72 0-.943.776-1.72 1.72-1.72.943 0 1.719.777 1.72 1.72 0 .943-.777 1.72-1.72 1.72zM7.93 19.04H4.965V9.497h2.966v9.544zM20.52 2.001H3.476A1.466 1.466 0 002 3.444v17.114c.01.8.675 1.451 1.476 1.443h17.043A1.47 1.47 0 0022 20.557V3.442A1.469 1.469 0 0020.519 2v.002z"/></svg>');
-}
-
-%linkedin-color-16-svg-prop {
-  --linkedin-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%230A66C2" d="M12.225 12.225h-1.778V9.44c0-.664-.012-1.519-.925-1.519-.926 0-1.068.724-1.068 1.47v2.834H6.676V6.498h1.707v.783h.024c.348-.594.996-.95 1.684-.925 1.802 0 2.135 1.185 2.135 2.728l-.001 3.14zM4.67 5.715a1.037 1.037 0 01-1.032-1.031c0-.566.466-1.032 1.032-1.032.566 0 1.031.466 1.032 1.032 0 .566-.466 1.032-1.032 1.032zm.889 6.51h-1.78V6.498h1.78v5.727zM13.11 2H2.885A.88.88 0 002 2.866v10.268a.88.88 0 00.885.866h10.226a.882.882 0 00.889-.866V2.865a.88.88 0 00-.889-.864z"/></svg>');
-}
-
-%linkedin-color-24-svg-prop {
-  --linkedin-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%230A66C2" d="M19.041 19.041h-2.963v-4.64c0-1.107-.02-2.532-1.541-2.532-1.544 0-1.78 1.206-1.78 2.45v4.722H9.794V9.497h2.844v1.305h.04a3.121 3.121 0 012.807-1.542c3.004 0 3.558 1.976 3.558 4.546l-.002 5.235zM6.45 8.193c-.944 0-1.72-.776-1.72-1.72 0-.943.776-1.72 1.72-1.72.943 0 1.719.777 1.72 1.72 0 .943-.777 1.72-1.72 1.72zM7.93 19.04H4.965V9.497h2.966v9.544zM20.52 2.001H3.476A1.466 1.466 0 002 3.444v17.114c.01.8.675 1.451 1.476 1.443h17.043A1.47 1.47 0 0022 20.557V3.442A1.469 1.469 0 0020.519 2v.002z"/></svg>');
-}
-
-%list-16-svg-prop {
-  --list-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2 3.75A.75.75 0 012.75 3h.5a.75.75 0 010 1.5h-.5A.75.75 0 012 3.75zm4 0A.75.75 0 016.75 3h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 016 3.75zm-4 4A.75.75 0 012.75 7h.5a.75.75 0 010 1.5h-.5A.75.75 0 012 7.75zm4 0A.75.75 0 016.75 7h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 016 7.75zm-4 4a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zm4 0a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%list-24-svg-prop {
-  --list-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2.5 5.75A.75.75 0 013.25 5h1a.75.75 0 010 1.5h-1a.75.75 0 01-.75-.75zm4.5 0A.75.75 0 017.75 5h13a.75.75 0 010 1.5h-13A.75.75 0 017 5.75zm-4.5 6a.75.75 0 01.75-.75h1a.75.75 0 010 1.5h-1a.75.75 0 01-.75-.75zm4.5 0a.75.75 0 01.75-.75h13a.75.75 0 010 1.5h-13a.75.75 0 01-.75-.75zm-4.5 6a.75.75 0 01.75-.75h1a.75.75 0 010 1.5h-1a.75.75 0 01-.75-.75zm4.5 0a.75.75 0 01.75-.75h13a.75.75 0 010 1.5h-13a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%load-balancer-16-svg-prop {
-  --load-balancer-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1a.75.75 0 01.75.75V7h3.69l-.97-.97a.75.75 0 011.06-1.06l2.25 2.25a.75.75 0 010 1.06l-2.25 2.25a.75.75 0 11-1.06-1.06l.97-.97H8.75v4.08l1.002-.89a.75.75 0 01.996 1.12l-2.25 2a.75.75 0 01-.996 0l-2.25-2a.75.75 0 01.996-1.12l1.002.89V8.5H3.56l.97.97a.75.75 0 11-1.06 1.06L1.22 8.28a.75.75 0 010-1.06l2.25-2.25a.75.75 0 011.06 1.06L3.56 7h3.69V1.75A.75.75 0 018 1z" clip-rule="evenodd"/></svg>');
-}
-
-%load-balancer-24-svg-prop {
-  --load-balancer-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2a.75.75 0 01.75.75V11h6.69l-1.72-1.72a.75.75 0 011.06-1.06l3 3a.75.75 0 010 1.06l-3 3a.75.75 0 11-1.06-1.06l1.72-1.72h-6.69v6.94l1.72-1.72a.75.75 0 111.06 1.06l-3 3a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l1.72 1.72V12.5H4.56l1.72 1.72a.75.75 0 11-1.06 1.06l-3-3a.75.75 0 010-1.06l3-3a.75.75 0 011.06 1.06L4.56 11h6.69V2.75A.75.75 0 0112 2z" clip-rule="evenodd"/></svg>');
-}
-
-%loading-svg-prop {
-  --loading-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" class="structure-icon-loading"><style>.structure-icon-loading-base{opacity:.1}.structure-icon-loading-progress{animation:structure-icon-loading-fancy-spin 3s infinite linear;opacity:.25;stroke-dasharray:0 44;stroke-dashoffset:0;stroke-linecap:round;transform-origin:50% 50%}@keyframes structure-icon-loading-fancy-spin{0%{stroke-dasharray:0 44;stroke-dashoffset:0}25%{stroke-dasharray:33 11;stroke-dashoffset:-40}50%{stroke-dasharray:0 44;stroke-dashoffset:-110}75%{stroke-dasharray:33 11;stroke-dashoffset:-150}to{stroke-dasharray:0 44;stroke-dashoffset:-220}}@keyframes structure-icon-loading-simple-spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style><defs><path stroke="%23000" stroke-width="3" fill="none" id="a" d="M12 5l6 3v8l-6 3-6-3V8z"/></defs><use xlink:href="%23a" class="structure-icon-loading-base"/><use xlink:href="%23a" class="structure-icon-loading-progress"/></svg>');
-}
-
-%lock-16-svg-prop {
-  --lock-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 9.25a.75.75 0 01.75.75v1a.75.75 0 01-1.5 0v-1A.75.75 0 018 9.25z"/><path fill-rule="evenodd" d="M4 5.014v-.93c0-1.078.417-2.114 1.165-2.881A3.96 3.96 0 018 0a3.96 3.96 0 012.835 1.203A4.127 4.127 0 0112 4.083v.93a2.25 2.25 0 012 2.237v5.5A2.25 2.25 0 0111.75 15h-7.5A2.25 2.25 0 012 12.75v-5.5a2.25 2.25 0 012-2.236zM6.239 2.25A2.46 2.46 0 018 1.5c.657 0 1.29.267 1.761.75.471.483.739 1.142.739 1.833V5h-5v-.917c0-.69.268-1.35.739-1.833zM11.75 6.5a.75.75 0 01.75.75v5.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75v-5.5a.75.75 0 01.75-.75h7.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%lock-24-svg-prop {
-  --lock-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 16.25a.75.75 0 01.75.75v2a.75.75 0 01-1.5 0v-2a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M6 10.104V6.75c0-1.537.641-3.003 1.77-4.079A6.136 6.136 0 0112 1c1.58 0 3.102.597 4.23 1.671A5.632 5.632 0 0118 6.75v3.354c1.154.326 2 1.387 2 2.646v7.5A2.75 2.75 0 0117.25 23H6.75A2.75 2.75 0 014 20.25v-7.5c0-1.259.846-2.32 2-2.646zm2.805-6.346A4.636 4.636 0 0112 2.5c1.205 0 2.354.456 3.195 1.258.84.8 1.305 1.877 1.305 2.992V10h-9V6.75c0-1.115.465-2.192 1.305-2.992zM17.25 11.5H6.75c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-7.5c0-.69-.56-1.25-1.25-1.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%lock-closed-fill-svg-prop {
-  @extend %lock-fill-16-svg-prop;
-}
-
-%lock-closed-outline-svg-prop {
-  @extend %lock-16-svg-prop;
-}
-
-%lock-closed-svg-prop {
-  @extend %lock-fill-16-svg-prop;
-}
-
-%lock-disabled-svg-prop {
-  @extend %lock-off-16-svg-prop;
-}
-
-%lock-fill-16-svg-prop {
-  --lock-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4 5.014v-.93c0-1.078.417-2.114 1.165-2.881A3.96 3.96 0 018 0a3.96 3.96 0 012.835 1.203A4.127 4.127 0 0112 4.083v.93a2.25 2.25 0 012 2.237v5.5A2.25 2.25 0 0111.75 15h-7.5A2.25 2.25 0 012 12.75v-5.5a2.25 2.25 0 012-2.236zM6.239 2.25A2.46 2.46 0 018 1.5c.657 0 1.29.267 1.761.75.471.483.739 1.142.739 1.833V5h-5v-.917c0-.69.268-1.35.739-1.833zM8 9.25a.75.75 0 00-.75.75v1a.75.75 0 001.5 0v-1A.75.75 0 008 9.25z" clip-rule="evenodd"/></svg>');
-}
-
-%lock-fill-24-svg-prop {
-  --lock-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M6 10.104V6.75c0-1.537.641-3.003 1.77-4.079A6.136 6.136 0 0112 1c1.58 0 3.102.597 4.23 1.671A5.632 5.632 0 0118 6.75v3.354c1.154.326 2 1.387 2 2.646v7.5A2.75 2.75 0 0117.25 23H6.75A2.75 2.75 0 014 20.25v-7.5c0-1.259.846-2.32 2-2.646zm2.805-6.346A4.636 4.636 0 0112 2.5c1.205 0 2.354.456 3.195 1.258.84.8 1.305 1.877 1.305 2.992V10h-9V6.75c0-1.115.465-2.192 1.305-2.992zM12 16.25a.75.75 0 00-.75.75v2a.75.75 0 001.5 0v-2a.75.75 0 00-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%lock-off-16-svg-prop {
-  --lock-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 1.5a2.46 2.46 0 00-1.761.75.75.75 0 01-1.074-1.047A3.96 3.96 0 018 0a3.96 3.96 0 012.835 1.203A4.127 4.127 0 0112 4.083v.93a2.25 2.25 0 012 2.237V9.5a.75.75 0 01-1.5 0V7.25a.75.75 0 00-.75-.75H9.5a.75.75 0 010-1.5h1v-.917c0-.69-.268-1.35-.739-1.833A2.46 2.46 0 008 1.5z"/><path fill-rule="evenodd" d="M3.958 5.019A2.25 2.25 0 002 7.25v5.5A2.25 2.25 0 004.25 15h7.5c.606 0 1.156-.24 1.56-.629l1.16 1.16a.75.75 0 101.06-1.061l-14-14A.75.75 0 00.47 1.53L3.958 5.02zM4.25 6.5a.75.75 0 00-.75.75v5.5c0 .414.336.75.75.75h7.5a.749.749 0 00.5-.19L5.44 6.5H4.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%lock-off-24-svg-prop {
-  --lock-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.75 17a.75.75 0 00-1.5 0v2a.75.75 0 001.5 0v-2z"/><path fill-rule="evenodd" d="M1.53.47A.75.75 0 00.47 1.53L6 7.06v3.044a2.751 2.751 0 00-2 2.646v7.5A2.75 2.75 0 006.75 23h10.5c1.271 0 2.34-.862 2.656-2.034l2.564 2.564a.75.75 0 101.06-1.06l-22-22zM18.5 19.56l-8.06-8.06H6.75c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-.69zM8.94 10L7.5 8.56V10h1.44z" clip-rule="evenodd"/><path d="M12 2.5a4.636 4.636 0 00-3.195 1.258c-.123.117-.238.24-.345.368a.75.75 0 01-1.153-.959c.144-.173.298-.338.463-.496A6.136 6.136 0 0112 1c1.58 0 3.102.597 4.23 1.671A5.632 5.632 0 0118 6.75v3.354c1.154.326 2 1.387 2 2.646v2.75a.75.75 0 01-1.5 0v-2.75c0-.69-.56-1.25-1.25-1.25H14.5a.75.75 0 010-1.5h2V6.75a4.133 4.133 0 00-1.305-2.992A4.636 4.636 0 0012 2.5z"/></g></svg>');
-}
-
-%lock-open-svg-prop {
-  @extend %unlock-16-svg-prop;
-}
-
-%logo-alicloud-color-svg-prop {
-  @extend %alibaba-color-16-svg-prop;
-}
-
-%logo-alicloud-monochrome-svg-prop {
-  @extend %alibaba-16-svg-prop;
-}
-
-%logo-auth0-color-svg-prop {
-  @extend %auth0-color-16-svg-prop;
-}
-
-%logo-aws-color-svg-prop {
-  @extend %aws-color-16-svg-prop;
-}
-
-%logo-aws-monochrome-svg-prop {
-  @extend %aws-16-svg-prop;
-}
-
-%logo-azure-color-svg-prop {
-  @extend %azure-color-16-svg-prop;
-}
-
-%logo-azure-dev-ops-color-svg-prop {
-  @extend %azure-devops-color-16-svg-prop;
-}
-
-%logo-azure-dev-ops-monochrome-svg-prop {
-  @extend %azure-devops-16-svg-prop;
-}
-
-%logo-azure-monochrome-svg-prop {
-  @extend %azure-16-svg-prop;
-}
-
-%logo-bitbucket-color-svg-prop {
-  @extend %bitbucket-color-16-svg-prop;
-}
-
-%logo-bitbucket-monochrome-svg-prop {
-  @extend %bitbucket-16-svg-prop;
-}
-
-%logo-consul-color-svg-prop {
-  @extend %consul-color-16-svg-prop;
-}
-
-%logo-ember-circle-color-svg-prop {
-  --logo-ember-circle-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M64 0c35.346 0 64 28.654 64 64 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64C0 28.654 28.654 0 64 0z" fill="%23E05C43" fill-rule="nonzero"/><path d="M65.265 24.128c8.246-.163 14.073 2.073 19.087 9.19 10.934 27.109-28.147 41.1-29.714 41.65l-.049.016s-1.18 7.363 10.028 7.08c13.793 0 28.294-10.691 33.81-15.21a3.293 3.293 0 0 1 4.468.265l4.13 4.29a3.291 3.291 0 0 1 .085 4.491c-3.59 3.997-12.014 12.203-24.696 17.504 0 0-21.16 9.798-35.42.52-8.503-5.53-10.842-12.151-11.793-19.038.005 0-10.324-.524-16.957-3.114-6.635-2.592.049-10.411.049-10.411s2.04-3.233 5.92 0c3.883 3.228 11.13 1.772 11.13 1.772.646-5.099 1.72-11.828 4.884-18.93 6.632-14.885 16.789-19.915 25.038-20.075zm4.853 14.915c-4.369-4.21-16.984 4.202-17.471 23.45 0 0 3.724 1.134 11.97-4.53 8.25-5.661 9.87-14.718 5.501-18.92z" fill="%23FFF"/></g></svg>');
-}
-
-%logo-gcp-color-svg-prop {
-  @extend %gcp-color-16-svg-prop;
-}
-
-%logo-gcp-monochrome-svg-prop {
-  @extend %gcp-16-svg-prop;
-}
-
-%logo-github-color-svg-prop {
-  @extend %github-color-16-svg-prop;
-}
-
-%logo-github-monochrome-svg-prop {
-  @extend %github-16-svg-prop;
-}
-
-%logo-gitlab-color-svg-prop {
-  @extend %gitlab-color-16-svg-prop;
-}
-
-%logo-gitlab-monochrome-svg-prop {
-  @extend %gitlab-16-svg-prop;
-}
-
-%logo-glimmer-color-svg-prop {
-  --logo-glimmer-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M256 128c0 70.692-57.308 128-128 128C57.307 256 0 198.692 0 128 0 57.308 57.307 0 128 0c70.692 0 128 57.308 128 128" fill="%23F8835A"/><path d="M78.63 140.37a11.39 11.39 0 0 1-7.951-3.222c-4.533-4.392-4.648-11.627-.256-16.16l77.144-79.619c4.39-4.533 11.626-4.648 16.16-.256 4.532 4.392 4.647 11.628.255 16.161l-77.143 79.62a11.397 11.397 0 0 1-8.21 3.475zm50.31 3.036a11.356 11.356 0 0 1-7.926-3.21c-4.52-4.38-4.633-11.592-.254-16.111L181.687 61.2c4.379-4.52 11.59-4.632 16.11-.254s4.634 11.59.256 16.11l-60.928 62.884a11.363 11.363 0 0 1-8.184 3.465zm-24.69 79.286a11.383 11.383 0 0 1-7.951-3.221c-4.533-4.391-4.648-11.627-.256-16.16L202.61 93.322c4.39-4.532 11.627-4.647 16.16-.255 4.534 4.392 4.648 11.627.255 16.161L112.459 219.216a11.397 11.397 0 0 1-8.21 3.476zm-33.44-19.44c-2.865 0-5.73-1.07-7.95-3.222-4.534-4.392-4.649-11.628-.257-16.16l29.053-29.986c4.393-4.533 11.628-4.648 16.161-.256 4.533 4.393 4.647 11.628.255 16.161L79.02 199.775a11.397 11.397 0 0 1-8.209 3.476zm-23.179-86.764a11.39 11.39 0 0 1-7.952-3.221c-4.533-4.392-4.647-11.627-.255-16.16L68.477 67.12c4.393-4.533 11.628-4.647 16.161-.255 4.533 4.392 4.647 11.627.255 16.16L55.84 113.013a11.398 11.398 0 0 1-8.209 3.476zm149.433 65.295a11.39 11.39 0 0 1-7.95-3.221c-4.534-4.392-4.649-11.627-.257-16.16l13.754-14.195c4.391-4.532 11.627-4.65 16.16-.255 4.533 4.392 4.647 11.627.255 16.16l-13.753 14.195a11.397 11.397 0 0 1-8.209 3.476zm-26.78 28.338c0 6.312-5.117 11.428-11.43 11.428-6.31 0-11.428-5.116-11.428-11.428 0-6.312 5.118-11.429 11.429-11.429 6.312 0 11.429 5.117 11.429 11.43zM61.06 158.925c0 6.312-5.117 11.43-11.43 11.43-6.311 0-11.427-5.118-11.427-11.43 0-6.312 5.116-11.428 11.428-11.428 6.312 0 11.429 5.116 11.429 11.428zm54.284-112.142c0 6.312-5.117 11.428-11.428 11.428-6.312 0-11.429-5.116-11.429-11.428 0-6.312 5.117-11.43 11.429-11.43 6.311 0 11.428 5.118 11.428 11.43z" fill="%23FFF"/></svg>');
-}
-
-%logo-google-color-svg-prop {
-  @extend %google-color-16-svg-prop;
-}
-
-%logo-google-monochrome-svg-prop {
-  @extend %google-16-svg-prop;
-}
-
-%logo-hashicorp-color-svg-prop {
-  --logo-hashicorp-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107 114" xmlns="http://www.w3.org/2000/svg"><path d="M44.54 0L0 25.69V87.41l16.73 9.66V35.35L44.54 19.3z"/><path d="M62.32 0v49.15H44.54V30.81L27.8 40.47v62.97l16.74 9.68V64.11h17.78v18.22l16.73-9.66V9.66z"/><path d="M62.32 113.14l44.54-25.69V25.73l-16.74-9.66v61.72l-27.8 16.05z"/></svg>');
-}
-
-%logo-jwt-color-svg-prop {
-  --logo-jwt-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.863 3.805V.667h-1.75v3.138l.875 1.202.875-1.202zM5.113 9.195v3.138h1.75V9.195l-.875-1.202-.875 1.202z" fill="%23fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.863 9.195l1.844 2.543L10.13 10.7 8.275 8.168l-1.412-.466v1.493zM5.113 3.805L3.27 1.262 1.847 2.3l1.855 2.532 1.411.466V3.805z" fill="%2300F2E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.702 4.832L.715 3.863.167 5.532l2.986.968 1.424-.455-.875-1.213zM7.4 6.955l.875 1.213 2.987.969.548-1.669L8.823 6.5 7.4 6.955z" fill="%2300B9F1"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.823 6.5l2.987-.968-.548-1.669-2.987.969L7.4 6.045l1.423.455zM3.153 6.5l-2.986.968.548 1.669 2.987-.969.875-1.213L3.153 6.5z" fill="%23D63AFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.702 8.168L1.847 10.7l1.423 1.038 1.843-2.543V7.702l-1.411.466zM8.275 4.832L10.13 2.3 8.707 1.262 6.863 3.805v1.493l1.412-.466z" fill="%23FB015B"/></svg>');
-}
-
-%logo-kubernetes-color-svg-prop {
-  @extend %kubernetes-color-16-svg-prop;
-}
-
-%logo-kubernetes-monochrome-svg-prop {
-  @extend %kubernetes-16-svg-prop;
-}
-
-%logo-microsoft-color-svg-prop {
-  @extend %microsoft-color-16-svg-prop;
-}
-
-%logo-nomad-color-svg-prop {
-  @extend %nomad-color-16-svg-prop;
-}
-
-%logo-oidc-color-svg-prop {
-  --logo-oidc-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.833 8.375l-.291-2.625-.846.554c-.788-.496-1.78-.846-2.888-1.02 0 0-.554-.117-1.283-.117-.73 0-1.4.087-1.4.087-2.83.35-4.958 1.954-4.958 3.88 0 1.983 2.187 3.616 5.541 3.908v-1.138c-2.304-.32-3.762-1.4-3.762-2.77 0-1.284 1.341-2.363 3.179-2.713 0 0 1.43-.321 2.683.058.613.146 1.167.35 1.634.642l-1.109.67 3.5.584z" fill="%239E9E9E"/><path d="M6.708 2.833v10.209l1.75-.875V1.958l-1.75.875z" fill="%23000"/><path d="M6.708 2.833v10.209l1.75-.875V1.958l-1.75.875z" fill="%23FF9800"/></svg>');
-}
-
-%logo-okta-color-svg-prop {
-  @extend %okta-color-16-svg-prop;
-}
-
-%logo-oracle-color-svg-prop {
-  @extend %oracle-color-16-svg-prop;
-}
-
-%logo-oracle-monochrome-svg-prop {
-  @extend %oracle-16-svg-prop;
-}
-
-%logo-slack-color-svg-prop {
-  @extend %slack-color-16-svg-prop;
-}
-
-%logo-slack-monochrome-svg-prop {
-  @extend %slack-16-svg-prop;
-}
-
-%logo-terraform-color-svg-prop {
-  @extend %terraform-color-16-svg-prop;
-}
-
-%logo-vault-color-svg-prop {
-  --logo-vault-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L14.9453 30L30 0H0ZM16.724 6.02083H18.4635V7.76042H16.724V6.02083ZM11.5208 12.9766H13.2604V11.237H11.5208V12.9766ZM13.2604 10.3724H11.5208V8.6302H13.2604V10.3724ZM11.5208 7.76823H13.2604V6.02083H11.5208V7.76823ZM15.8646 15.5937H14.1302V13.8463H15.8698L15.8646 15.5937ZM14.1302 12.9896H15.8646L15.8698 11.237H14.1302V12.9896ZM15.8646 10.3854H14.1302V8.6302H15.8698L15.8646 10.3854ZM14.1302 7.78125H15.8646L15.8698 6.02083H14.1302V7.78125ZM16.7187 8.65105H18.4635V10.3906H16.7239L16.7187 8.65105ZM16.7344 11.237V13L18.4896 12.9766V11.237H16.7344Z" fill="%23000"/></svg>');
-}
-
-%logo-vmware-color-svg-prop {
-  @extend %vmware-color-16-svg-prop;
-}
-
-%logo-vmware-monochrome-svg-prop {
-  @extend %vmware-16-svg-prop;
-}
-
-%mail-16-svg-prop {
-  --mail-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h11.5A2.25 2.25 0 0116 3.25v9.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-9.5zm2.25-.75a.75.75 0 00-.748.69L8 8.297l6.498-5.105a.75.75 0 00-.748-.691H2.25zm-.75 9.885V5.097l3.865 3.037L1.5 12.385zM2.514 13.5h10.972L9.452 9.063l-.989.777a.75.75 0 01-.926 0l-.99-.777L2.515 13.5zm8.12-5.366l3.866 4.251V5.097l-3.865 3.037z" clip-rule="evenodd"/></svg>');
-}
-
-%mail-24-svg-prop {
-  --mail-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 5.75A2.75 2.75 0 013.75 3h16.5A2.75 2.75 0 0123 5.75v12.5A2.75 2.75 0 0120.25 21H3.75A2.75 2.75 0 011 18.25V5.75zM3.75 4.5a1.25 1.25 0 00-1.057.582L12 12.062l9.307-6.98A1.25 1.25 0 0020.25 4.5H3.75zM2.5 16.44V6.812l5.501 4.125L2.5 16.44zm.031 2.09c.127.555.625.97 1.219.97h16.5a1.25 1.25 0 001.219-.97l-6.682-6.683L12.45 13.6a.75.75 0 01-.9 0l-2.337-1.752-6.682 6.681zM16 10.937L21.5 16.44V6.813l-5.501 4.125z" clip-rule="evenodd"/></svg>');
-}
-
-%mail-open-16-svg-prop {
-  --mail-open-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.803.254a2.25 2.25 0 00-1.606 0L1.447 2.45A2.25 2.25 0 000 4.552v8.198A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75V4.552a2.25 2.25 0 00-1.447-2.102L8.803.254zm-1.07 1.401a.75.75 0 01.535 0l5.75 2.196a.75.75 0 01.302.213L8 8.578 1.68 4.064a.749.749 0 01.302-.213l5.75-2.196zM1.5 5.78v6.6L5.116 8.36 1.5 5.78zM2.509 13.5h10.982L9.656 9.239l-1.22.871a.75.75 0 01-.872 0l-1.22-.871L2.509 13.5zM14.5 12.379v-6.6l-3.616 2.583 3.616 4.017z" clip-rule="evenodd"/></svg>');
-}
-
-%mail-open-24-svg-prop {
-  --mail-open-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13 .335a2.75 2.75 0 00-2 0l-8.25 3.22A2.75 2.75 0 001 6.116V18.25A2.75 2.75 0 003.75 21h16.5A2.75 2.75 0 0023 18.25V6.116a2.75 2.75 0 00-1.75-2.561L13 .335zm-1.454 1.397a1.25 1.25 0 01.908 0l8.25 3.22c.48.187.796.65.796 1.164v.134a.746.746 0 00-.4.116l-9.11 5.753L2.5 6.425v-.309c0-.514.316-.977.796-1.164l8.25-3.22zM2.5 8.175v8.264l5.165-5.165-5.165-3.1zm.031 10.354c.127.556.625.971 1.219.971h16.5a1.25 1.25 0 001.219-.97l-6.51-6.511-2.559 1.615a.75.75 0 01-.786.01l-2.623-1.575-6.46 6.46zM21.5 16.44V7.887l-5.242 3.31L21.5 16.44z" clip-rule="evenodd"/></svg>');
-}
-
-%mainframe-16-svg-prop {
-  --mainframe-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3 3.25A2.25 2.25 0 015.25 1h5.5A2.25 2.25 0 0113 3.25v9.5A2.25 2.25 0 0110.75 15h-5.5A2.25 2.25 0 013 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h5.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-5.5zm.5 2.25A.75.75 0 016.5 4h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zm0 2.5a.75.75 0 01.75-.75h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zm0 2.5A.75.75 0 016.5 9h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%mainframe-24-svg-prop {
-  --mainframe-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4 3.75A2.75 2.75 0 016.75 1h10.5A2.75 2.75 0 0120 3.75v16.5A2.75 2.75 0 0117.25 23H6.75A2.75 2.75 0 014 20.25V3.75zM6.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V3.75c0-.69-.56-1.25-1.25-1.25H6.75zm1.5 3.75A.75.75 0 019 5.5h6A.75.75 0 0115 7H9a.75.75 0 01-.75-.75zm0 4A.75.75 0 019 9.5h6a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zm0 4A.75.75 0 019 13.5h6a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%map-16-svg-prop {
-  --map-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.2 1.187c.34-.17.738-.176 1.083-.016l3.983 1.843 4.003-1.668A1.25 1.25 0 0116 2.5v8.941c0 .473-.268.906-.691 1.118l-4.508 2.254c-.34.17-.74.176-1.085.017l-3.982-1.844-4.003 1.668A1.25 1.25 0 010 13.5V4.56c0-.474.268-.907.691-1.119l4.508-2.254zM1.5 4.714L5 2.964v8.703l-3.5 1.458V4.714zm8 8.362l-3-1.389V2.925l3 1.389v8.763zm1.5-.04l3.5-1.75v-8.41L11 4.332v8.704z" clip-rule="evenodd"/></svg>');
-}
-
-%map-24-svg-prop {
-  --map-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M6.926 1.607a1.75 1.75 0 011.614-.064L16.099 5.1a.25.25 0 00.23-.01l5.053-2.886C22.548 1.537 24 2.379 24 3.724V17.42a1.75 1.75 0 01-.882 1.52l-6.044 3.453a1.75 1.75 0 01-1.614.064L7.901 18.9a.25.25 0 00-.23.01l-5.053 2.886C1.452 22.463 0 21.621 0 20.276V6.58c0-.628.337-1.208.882-1.52l6.044-3.453zm-5.3 4.756L7 3.293v14.274l-.074.04-5.052 2.887a.25.25 0 01-.374-.217V6.58a.25.25 0 01.126-.217zm6.914 11.18a1.557 1.557 0 00-.04-.018V3.182l6.96 3.275.04.018v14.343l-6.96-3.275zM17 20.708l5.374-3.071a.25.25 0 00.126-.217V3.723a.25.25 0 00-.374-.217l-5.052 2.887a1.755 1.755 0 01-.074.04v14.275z" clip-rule="evenodd"/></svg>');
-}
-
-%map-pin-16-svg-prop {
-  --map-pin-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 4.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM7 7a1 1 0 112 0 1 1 0 01-2 0z"/><path d="M8 0C4.138 0 1 3.114 1 6.964a6.927 6.927 0 002.085 4.957l4.42 3.892a.75.75 0 00.99 0l4.42-3.892A6.927 6.927 0 0015 6.964C15 3.114 11.862 0 8 0zM2.5 6.964C2.5 3.95 4.958 1.5 8 1.5s5.5 2.45 5.5 5.464c0 1.5-.607 2.858-1.594 3.847L8 14.251l-3.906-3.44A5.427 5.427 0 012.5 6.964z"/></g></svg>');
-}
-
-%map-pin-24-svg-prop {
-  --map-pin-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.585 23.875L12 23.25l.415.625a.75.75 0 01-.83 0z"/><path fill-rule="evenodd" d="M12 6a4 4 0 100 8 4 4 0 000-8zm-2.5 4a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M11.585 23.875L12 23.25c.415.625.416.624.416.624l.002-.001.006-.004.023-.015.083-.057c.071-.05.175-.122.305-.216a31.98 31.98 0 004.333-3.777C19.51 17.344 22 13.837 22 9.954a9.932 9.932 0 00-2.93-7.04A10.023 10.023 0 0012 0a10.023 10.023 0 00-7.07 2.914A9.932 9.932 0 002 9.954c0 3.883 2.49 7.39 4.832 9.85a31.978 31.978 0 004.333 3.777c.13.094.234.166.306.216l.082.057.023.015.006.004.003.002zM5.988 3.978A8.523 8.523 0 0112 1.5c2.255 0 4.418.892 6.012 2.478A8.432 8.432 0 0120.5 9.955c0 3.276-2.135 6.417-4.418 8.815A30.46 30.46 0 0112 22.334a30.463 30.463 0 01-4.082-3.564C5.635 16.372 3.5 13.23 3.5 9.955c0-2.242.895-4.392 2.488-5.977z" clip-rule="evenodd"/></g></svg>');
-}
-
-%maximize-16-svg-prop {
-  --maximize-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.25 1a.75.75 0 000 1.5h2.19L9.47 5.47a.75.75 0 001.06 1.06l2.97-2.97v2.19a.75.75 0 001.5 0v-4a.75.75 0 00-.75-.75h-4zM2.5 10.25a.75.75 0 00-1.5 0v4c0 .414.336.75.75.75h4a.75.75 0 000-1.5H3.56l2.97-2.97a.75.75 0 10-1.06-1.06L2.5 12.44v-2.19z"/></g></svg>');
-}
-
-%maximize-24-svg-prop {
-  --maximize-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15.75 2a.75.75 0 000 1.5h3.69l-5.22 5.22a.75.75 0 001.06 1.06l5.22-5.22v3.69a.75.75 0 001.5 0v-5.5l-.001-.039a.745.745 0 00-.462-.654A.748.748 0 0021.25 2h-5.5zM3.5 15.75a.75.75 0 00-1.5 0v5.5a.748.748 0 00.75.75h5.5a.75.75 0 000-1.5H4.56l5.22-5.22a.75.75 0 10-1.06-1.06L3.5 19.44v-3.69z"/></g></svg>');
-}
-
-%maximize-alt-16-svg-prop {
-  --maximize-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h2.047a.75.75 0 010 1.5H3.25a.75.75 0 00-.75.75v2.047a.75.75 0 01-1.5 0V3.25zm8.953-1.5a.75.75 0 01.75-.75h2.047A2.25 2.25 0 0115 3.25v2.047a.75.75 0 01-1.5 0V3.25a.75.75 0 00-.75-.75h-2.047a.75.75 0 01-.75-.75zM1.75 9.953a.75.75 0 01.75.75v2.047c0 .414.336.75.75.75h2.047a.75.75 0 010 1.5H3.25A2.25 2.25 0 011 12.75v-2.047a.75.75 0 01.75-.75zm12.5 0a.75.75 0 01.75.75v2.047A2.25 2.25 0 0112.75 15h-2.047a.75.75 0 010-1.5h2.047a.75.75 0 00.75-.75v-2.047a.75.75 0 01.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%maximize-alt-24-svg-prop {
-  --maximize-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2H8a.75.75 0 010 1.5H4.75c-.69 0-1.25.56-1.25 1.25V8A.75.75 0 012 8V4.75zm13.25-2A.75.75 0 0116 2h3.25A2.75 2.75 0 0122 4.75V8a.75.75 0 01-1.5 0V4.75c0-.69-.56-1.25-1.25-1.25H16a.75.75 0 01-.75-.75zm-12.5 12.5a.75.75 0 01.75.75v3.25c0 .69.56 1.25 1.25 1.25H8A.75.75 0 018 22H4.75A2.75 2.75 0 012 19.25V16a.75.75 0 01.75-.75zm18.5 0A.75.75 0 0122 16v3.25A2.75 2.75 0 0119.25 22H16a.75.75 0 010-1.5h3.25c.69 0 1.25-.56 1.25-1.25V16a.75.75 0 01.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%meh-16-svg-prop {
-  --meh-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.5 9.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5zM5 6a1 1 0 011-1h.007a1 1 0 010 2H6a1 1 0 01-1-1zM10 5a1 1 0 100 2h.007a1 1 0 100-2H10z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%meh-24-svg-prop {
-  --meh-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8 14.5A.75.75 0 008 16h8a.75.75 0 000-1.5H8zM8 9a1 1 0 011-1h.01a1 1 0 110 2H9a1 1 0 01-1-1zM15 8a1 1 0 100 2h.01a1 1 0 100-2H15z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%menu-16-svg-prop {
-  --menu-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 3.75A.75.75 0 011.75 3h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 3.75zM1 7.75A.75.75 0 011.75 7h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 7.75zM1.75 11a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75z"/></g></svg>');
-}
-
-%menu-24-svg-prop {
-  --menu-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2 5.75A.75.75 0 012.75 5h18.5a.75.75 0 010 1.5H2.75A.75.75 0 012 5.75zM2 11.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
-}
-
-%menu-svg-prop {
-  @extend %menu-16-svg-prop;
-}
-
-%mesh-16-svg-prop {
-  --mesh-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M15.681 10.243A8.001 8.001 0 0016 8a7.97 7.97 0 00-2.047-5.345A1.752 1.752 0 0012.25.5h-.007c-.321 0-.623.087-.882.238A7.97 7.97 0 008 0a7.963 7.963 0 00-4.321 1.266A1.742 1.742 0 002.75 1h-.007a1.75 1.75 0 00-1.48 2.684A7.963 7.963 0 000 8a7.985 7.985 0 002.994 6.24 1.75 1.75 0 001.75 1.71h.006c.353 0 .681-.104.956-.284A8.004 8.004 0 008 16a7.985 7.985 0 006.245-3h.005a1.75 1.75 0 001.431-2.757zM2.573 4.492a1.758 1.758 0 01-.043-.005A6.47 6.47 0 001.5 8c0 1.918.83 3.642 2.152 4.832.112-.09.234-.165.366-.225-.029-3.003-.435-5.146-1.445-8.115zM6.5 14.2c0 .042-.001.084-.004.125.482.114.986.175 1.504.175a6.484 6.484 0 004.858-2.181 1.742 1.742 0 01-.242-1.713 32.908 32.908 0 00-2.306-2.179c-.067.116-.136.232-.205.347-.942 1.56-2.101 3.078-3.71 4.829.068.186.105.387.105.597zm7.826-4.698a1.776 1.776 0 00-.076-.002h-.007a1.75 1.75 0 00-.53.082 33.906 33.906 0 00-2.675-2.503c.484-.967.918-1.976 1.352-3.085a1.74 1.74 0 00.601-.158 6.518 6.518 0 011.335 5.666zM8 1.5c.89 0 1.738.179 2.51.503a1.755 1.755 0 00.476 1.464c-.379.964-.75 1.836-1.152 2.662C8.338 5.013 6.66 3.984 4.499 2.823a1.784 1.784 0 00-.013-.292A6.47 6.47 0 018 1.5zM4.094 4.309c.957 2.878 1.371 5.082 1.42 8.034 1.44-1.591 2.471-2.96 3.306-4.344.105-.174.208-.348.307-.524-1.41-1.072-2.989-2.056-5.033-3.166z" clip-rule="evenodd"/></svg>');
-}
-
-%mesh-24-svg-prop {
-  --mesh-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M22.56 15.09c.286-.98.44-2.017.44-3.09 0-3.075-1.262-5.855-3.296-7.851A1.75 1.75 0 0018 2h-.01c-.328 0-.635.09-.897.247A10.953 10.953 0 0012 1c-2.448 0-4.709.8-6.536 2.152A1.744 1.744 0 004.75 3h-.01a1.75 1.75 0 00-1.595 2.472A10.95 10.95 0 001 12a10.99 10.99 0 004.99 9.215v.035c0 .966.784 1.75 1.75 1.75h.01c.445 0 .851-.166 1.16-.44.98.286 2.017.44 3.09.44a10.99 10.99 0 009.221-5H21.25a1.75 1.75 0 001.31-2.91zM4.603 6.495a1.745 1.745 0 01-.309-.052A9.457 9.457 0 002.5 12a9.49 9.49 0 004.17 7.865c.106-.082.222-.152.345-.208-.012-4.964-.626-8.255-2.412-13.162zm4.74 14.03c.09.198.144.414.155.642A9.513 9.513 0 0012 21.5a9.49 9.49 0 007.864-4.169 1.743 1.743 0 01-.262-1.697c-1.477-1.49-2.83-2.747-4.193-3.859-1.514 2.857-3.359 5.497-6.065 8.75zm11.824-6.023c-.17.006-.333.037-.487.09-1.61-1.626-3.083-2.986-4.578-4.186.729-1.509 1.393-3.11 2.064-4.914.212-.02.412-.077.595-.166A9.47 9.47 0 0121.5 12a9.51 9.51 0 01-.333 2.502zM12 2.5a9.46 9.46 0 014.257 1.005 1.745 1.745 0 00.496 1.483 55.99 55.99 0 01-1.866 4.483c-2.418-1.785-5-3.234-8.388-4.768a1.75 1.75 0 00-.059-.407A9.457 9.457 0 0112 2.5zM6.077 6.159c1.737 4.813 2.384 8.186 2.435 13.02 2.538-3.084 4.267-5.6 5.697-8.343-2.352-1.763-4.843-3.177-8.132-4.677z" clip-rule="evenodd"/></svg>');
-}
-
-%mesh-svg-prop {
-  @extend %mesh-16-svg-prop;
-}
-
-%message-circle-16-svg-prop {
-  --message-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.231 2.5a5.269 5.269 0 11-2.43 9.944 1.18 1.18 0 00-.535-.122 2.432 2.432 0 00-.424.038c-.27.046-.577.13-.879.225-.272.085-.557.186-.834.29.103-.275.203-.557.288-.828.096-.302.18-.612.225-.885.023-.136.04-.283.037-.428a1.193 1.193 0 00-.123-.534 5.269 5.269 0 014.675-7.7zM2.058 14.934l.002-.001.01-.004.037-.017a28.983 28.983 0 01.658-.281 21.485 21.485 0 011.649-.616c.274-.086.506-.147.678-.176.049-.008.086-.012.113-.015a6.768 6.768 0 10-3.028-3.026 1.384 1.384 0 01-.014.119 5.296 5.296 0 01-.176.679c-.172.545-.42 1.17-.618 1.646a31.45 31.45 0 01-.28.65l-.017.036-.004.01v.002a.75.75 0 00.99.994z" clip-rule="evenodd"/></svg>');
-}
-
-%message-circle-24-svg-prop {
-  --message-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12.343 3.5a8.157 8.157 0 11-3.765 15.396 1.439 1.439 0 00-.689-.139c-.2.003-.415.033-.627.074-.426.082-.922.227-1.417.391a32 32 0 00-1.684.621c.204-.51.421-1.081.606-1.63.169-.505.318-1.012.403-1.448.042-.217.072-.438.075-.643a1.466 1.466 0 00-.141-.7A8.157 8.157 0 0112.343 3.5zM3.7 21.655a37.13 37.13 0 012.618-1.01c.47-.156.896-.277 1.228-.341a2.28 2.28 0 01.398-.047 9.619 9.619 0 004.399 1.058c5.333 0 9.657-4.324 9.657-9.658A9.657 9.657 0 103.745 16.06v.038a2.32 2.32 0 01-.048.382c-.066.34-.191.776-.352 1.255a36.658 36.658 0 01-1.21 3.052l-.05.114-.014.03-.004.009a.75.75 0 00.982.998l.648-.282.003-.001zm.043-5.621v.002-.002z" clip-rule="evenodd"/></svg>');
-}
-
-%message-circle-fill-16-svg-prop {
-  --message-circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5 8.75A.75.75 0 015.75 8h2.5a.75.75 0 010 1.5h-2.5A.75.75 0 015 8.75zM5.75 5.5a.75.75 0 100 1.5h4.5a.75.75 0 000-1.5h-4.5z"/><path fill-rule="evenodd" d="M2.058 14.934l.002-.001.01-.004.037-.017a28.983 28.983 0 01.658-.281 21.485 21.485 0 011.649-.616c.274-.086.506-.147.678-.176.049-.008.086-.012.113-.015a6.768 6.768 0 10-3.028-3.026 1.384 1.384 0 01-.014.119 5.296 5.296 0 01-.176.679c-.172.545-.42 1.17-.618 1.646a31.45 31.45 0 01-.28.65l-.017.036-.004.01v.002a.75.75 0 00.99.994zM8.231 2.5a5.269 5.269 0 11-2.43 9.944 1.18 1.18 0 00-.535-.122 2.432 2.432 0 00-.424.038c-.27.046-.577.13-.879.225-.272.085-.557.186-.834.29.103-.275.203-.557.288-.828.096-.302.18-.612.225-.885.023-.136.04-.283.037-.428a1.193 1.193 0 00-.123-.534 5.269 5.269 0 014.675-7.7z" clip-rule="evenodd"/></g></svg>');
-}
-
-%message-circle-fill-24-svg-prop {
-  --message-circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8 8.75A.75.75 0 018.75 8h7a.75.75 0 010 1.5h-7A.75.75 0 018 8.75zM8 11.75a.75.75 0 01.75-.75h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zM8 14.75a.75.75 0 01.75-.75h5a.75.75 0 010 1.5h-5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M7.546 20.304c-.332.064-.757.185-1.228.342-1.113.37-2.194.825-3.27 1.292a.75.75 0 01-.98-.998c.086-.192.17-.384.253-.577.273-.635.704-1.675 1.024-2.628.16-.48.286-.915.352-1.255a2.32 2.32 0 00.048-.42 9.62 9.62 0 01-1.06-4.403C2.685 6.324 7.01 2 12.343 2 17.676 2 22 6.324 22 11.657c0 5.334-4.324 9.658-9.657 9.658a9.619 9.619 0 01-4.4-1.058 2.159 2.159 0 00-.397.047zM20.5 11.657a8.157 8.157 0 10-15.396 3.765c.128.246.144.513.141.7a3.764 3.764 0 01-.075.643 11.85 11.85 0 01-.403 1.447c-.185.55-.402 1.12-.606 1.631a32 32 0 011.684-.62c.495-.165.991-.31 1.417-.392.212-.041.427-.07.627-.074.18-.003.445.012.69.14A8.157 8.157 0 0020.5 11.657z" clip-rule="evenodd"/></g></svg>');
-}
-
-%message-square-16-svg-prop {
-  --message-square-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M15 3.25A2.25 2.25 0 0012.75 1h-9.5A2.25 2.25 0 001 3.25v11a.75.75 0 001.26.55l2.801-2.6a.75.75 0 01.51-.2h7.179A2.25 2.25 0 0015 9.75v-6.5zm-2.25-.75a.75.75 0 01.75.75v6.5a.75.75 0 01-.75.75H5.572a2.25 2.25 0 00-1.531.6L2.5 12.53V3.25a.75.75 0 01.75-.75h9.5z" clip-rule="evenodd"/></svg>');
-}
-
-%message-square-24-svg-prop {
-  --message-square-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M22 4.75A2.75 2.75 0 0019.25 2H4.75A2.75 2.75 0 002 4.75v16.5a.75.75 0 001.231.575l4.228-3.534A1.25 1.25 0 018.26 18h10.99A2.75 2.75 0 0022 15.25V4.75zM19.25 3.5c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H8.26a2.75 2.75 0 00-1.763.64L3.5 19.645V4.75c0-.69.56-1.25 1.25-1.25h14.5z" clip-rule="evenodd"/></svg>');
-}
-
-%message-square-fill-16-svg-prop {
-  --message-square-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4 7.75A.75.75 0 014.75 7h3.5a.75.75 0 010 1.5h-3.5A.75.75 0 014 7.75zM4.75 4.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"/><path fill-rule="evenodd" d="M15 3.25A2.25 2.25 0 0012.75 1h-9.5A2.25 2.25 0 001 3.25v11a.75.75 0 001.26.55l2.801-2.6a.75.75 0 01.51-.2h7.179A2.25 2.25 0 0015 9.75v-6.5zm-2.25-.75a.75.75 0 01.75.75v6.5a.75.75 0 01-.75.75H5.572a2.25 2.25 0 00-1.531.6L2.5 12.53V3.25a.75.75 0 01.75-.75h9.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%message-square-fill-24-svg-prop {
-  --message-square-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6 6.75A.75.75 0 016.75 6h10a.75.75 0 010 1.5h-10A.75.75 0 016 6.75zM6 9.75A.75.75 0 016.75 9h5a.75.75 0 010 1.5h-5A.75.75 0 016 9.75zM6 12.75a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M19.25 2A2.75 2.75 0 0122 4.75v10.5A2.75 2.75 0 0119.25 18H8.26a1.25 1.25 0 00-.801.291L3.23 21.825A.75.75 0 012 21.25V4.75A2.75 2.75 0 014.75 2h14.5zm1.25 2.75c0-.69-.56-1.25-1.25-1.25H4.75c-.69 0-1.25.56-1.25 1.25v14.895l2.997-2.505a2.75 2.75 0 011.763-.64h10.99c.69 0 1.25-.56 1.25-1.25V4.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%message-svg-prop {
-  @extend %message-square-fill-16-svg-prop;
-}
-
-%mic-16-svg-prop {
-  --mic-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M8 0c-.78 0-1.538.29-2.104.821A2.797 2.797 0 005 2.861V8.14c0 .775.328 1.507.896 2.04.566.53 1.323.821 2.104.821.78 0 1.538-.29 2.104-.821A2.797 2.797 0 0011 8.139V2.86c0-.775-.329-1.507-.896-2.04A3.077 3.077 0 008 0zM6.922 1.915A1.578 1.578 0 018 1.5c.413 0 .8.154 1.078.415.276.26.422.601.422.946V8.14c0 .345-.146.686-.422.946A1.578 1.578 0 018 9.5c-.413 0-.8-.154-1.078-.415-.276-.26-.422-.601-.422-.946V2.86c0-.345.146-.686.422-.946z" clip-rule="evenodd"/><path d="M4 6.75a.75.75 0 00-1.5 0v1.385a5.3 5.3 0 001.619 3.801A5.553 5.553 0 007.25 13.45v1.05H5.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5H8.75v-1.05a5.553 5.553 0 003.131-1.514A5.3 5.3 0 0013.5 8.135V6.75a.75.75 0 00-1.5 0v1.385a3.8 3.8 0 01-1.164 2.725A4.071 4.071 0 018 12a4.071 4.071 0 01-2.836-1.14A3.8 3.8 0 014 8.135V6.75z"/></g></svg>');
-}
-
-%mic-24-svg-prop {
-  --mic-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M12 0c-1.05 0-2.064.399-2.816 1.118A3.79 3.79 0 008 3.858v8.285a3.79 3.79 0 001.184 2.739A4.077 4.077 0 0012 16c1.05 0 2.064-.399 2.816-1.118A3.79 3.79 0 0016 12.142V3.858a3.79 3.79 0 00-1.184-2.739A4.077 4.077 0 0012 0zm-1.78 2.202A2.578 2.578 0 0112 1.5c.674 0 1.313.256 1.78.702a2.29 2.29 0 01.72 1.655v8.286a2.29 2.29 0 01-.72 1.655A2.578 2.578 0 0112 14.5a2.578 2.578 0 01-1.78-.702 2.29 2.29 0 01-.72-1.655V3.857c0-.614.255-1.21.72-1.655z" clip-rule="evenodd"/><path d="M5.5 10A.75.75 0 004 10v2a7.63 7.63 0 002.353 5.49 8.112 8.112 0 004.897 2.226V22H8a.75.75 0 000 1.5h8a.75.75 0 000-1.5h-3.25v-2.284a8.112 8.112 0 004.898-2.227A7.63 7.63 0 0020 12v-2a.75.75 0 00-1.5 0v2a6.13 6.13 0 01-1.894 4.41A6.634 6.634 0 0112 18.25a6.633 6.633 0 01-4.606-1.84A6.13 6.13 0 015.5 12v-2z"/></g></svg>');
-}
-
-%mic-off-16-svg-prop {
-  --mic-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 0c-.78 0-1.538.29-2.104.821a2.862 2.862 0 00-.627.857.75.75 0 001.354.644c.07-.147.17-.286.3-.407A1.578 1.578 0 018 1.5c.413 0 .8.154 1.078.415.276.26.422.601.422.946v3.443a.75.75 0 001.5 0V2.861c0-.775-.329-1.507-.896-2.04A3.077 3.077 0 008 0z"/><path fill-rule="evenodd" d="M5 6.06L1.22 2.28a.75.75 0 011.06-1.06l12.5 12.5a.75.75 0 11-1.06 1.06L11.338 12.4a5.575 5.575 0 01-2.588 1.05V14.5h1.75a.75.75 0 010 1.5h-5a.75.75 0 010-1.5h1.75v-1.05a5.553 5.553 0 01-3.131-1.514A5.3 5.3 0 012.5 8.135V6.75a.75.75 0 011.5 0v1.385a3.8 3.8 0 001.164 2.725A4.071 4.071 0 008 12c.815 0 1.602-.24 2.262-.677l-.726-.726A3.113 3.113 0 018 11c-.78 0-1.538-.29-2.104-.821A2.797 2.797 0 015 8.139V6.06zm1.5 1.5v.579c0 .345.146.686.422.946.278.26.665.415 1.078.415.134 0 .266-.016.392-.047L6.5 7.56z" clip-rule="evenodd"/><path d="M12.03 6.75a.75.75 0 011.5 0v1.385c0 .266-.02.53-.06.79a.75.75 0 11-1.483-.227c.029-.185.043-.374.043-.563V6.75z"/></g></svg>');
-}
-
-%mic-off-24-svg-prop {
-  --mic-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.184 1.118A4.077 4.077 0 0112 0c1.05 0 2.064.399 2.816 1.118A3.79 3.79 0 0116 3.858v6.5a.75.75 0 11-1.5 0v-6.5a2.29 2.29 0 00-.72-1.656A2.578 2.578 0 0012 1.5c-.674 0-1.313.256-1.78.702a2.29 2.29 0 00-.72 1.655.75.75 0 11-1.5 0 3.79 3.79 0 011.184-2.739z"/><path fill-rule="evenodd" d="M12 16c.81 0 1.6-.237 2.263-.676l1.66 1.66A6.671 6.671 0 0112 18.25a6.633 6.633 0 01-4.606-1.84A6.13 6.13 0 015.5 12v-2A.75.75 0 004 10v2a7.63 7.63 0 002.353 5.49 8.112 8.112 0 004.897 2.226V22H8a.75.75 0 000 1.5h8a.75.75 0 000-1.5h-3.25v-2.284a8.145 8.145 0 004.244-1.661l4.726 4.725a.75.75 0 101.06-1.06L2.28 1.22a.75.75 0 00-1.06 1.06L8 9.06v3.083a3.79 3.79 0 001.184 2.739A4.077 4.077 0 0012 16zm-2.5-3.857V10.56l3.667 3.666A2.62 2.62 0 0112 14.5a2.578 2.578 0 01-1.78-.702 2.29 2.29 0 01-.72-1.655z" clip-rule="evenodd"/><path d="M20 10a.75.75 0 00-1.5 0v2c0 .552-.076 1.097-.222 1.62a.75.75 0 001.444.404A7.522 7.522 0 0020 12v-2z"/></g></svg>');
-}
-
-%microsoft-16-svg-prop {
-  --microsoft-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 1h6.5v6.5H1V1zM8.5 1H15v6.5H8.5V1zM1 8.5h6.5V15H1V8.5zM8.5 8.5H15V15H8.5V8.5z"/></g></svg>');
-}
-
-%microsoft-24-svg-prop {
-  --microsoft-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3 3h8.5v8.5H3V3zM12.5 3H21v8.5h-8.5V3zM3 12.5h8.5V21H3v-8.5zM12.5 12.5H21V21h-8.5v-8.5z"/></g></svg>');
-}
-
-%microsoft-color-16-svg-prop {
-  --microsoft-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23F35325" d="M1 1h6.5v6.5H1V1z"/><path fill="%2381BC06" d="M8.5 1H15v6.5H8.5V1z"/><path fill="%2305A6F0" d="M1 8.5h6.5V15H1V8.5z"/><path fill="%23FFBA08" d="M8.5 8.5H15V15H8.5V8.5z"/></svg>');
-}
-
-%microsoft-color-24-svg-prop {
-  --microsoft-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23F35325" d="M3 3h8.5v8.5H3V3z"/><path fill="%2381BC06" d="M12.5 3H21v8.5h-8.5V3z"/><path fill="%2305A6F0" d="M3 12.5h8.5V21H3v-8.5z"/><path fill="%23FFBA08" d="M12.5 12.5H21V21h-8.5v-8.5z"/></svg>');
-}
-
-%migrate-16-svg-prop {
-  --migrate-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.22 3.72a.75.75 0 011.06 0l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06l2.97-2.97-2.97-2.97a.75.75 0 010-1.06z"/><path d="M5.22 3.72a.75.75 0 011.06 0l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 01-1.06-1.06L7.44 8.5H2A.75.75 0 012 7h5.44L5.22 4.78a.75.75 0 010-1.06z"/></g></svg>');
-}
-
-%migrate-24-svg-prop {
-  --migrate-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.207 5.982a.75.75 0 011.06-.025l5.5 5.25a.75.75 0 010 1.085l-5.5 5.25a.75.75 0 11-1.035-1.085l4.146-3.957H4A.75.75 0 014 11h8.378L8.232 7.043a.75.75 0 01-.025-1.06z"/><path d="M14.207 5.982a.75.75 0 011.06-.025l5.5 5.25a.75.75 0 010 1.085l-5.5 5.25a.75.75 0 01-1.035-1.085l4.932-4.707-4.932-4.707a.75.75 0 01-.024-1.06z"/></g></svg>');
-}
-
-%minimize-16-svg-prop {
-  --minimize-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10 4.94V2.75a.75.75 0 00-1.5 0v4c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-2.19l2.72-2.72a.75.75 0 00-1.06-1.06L10 4.94zM2.75 8.5a.75.75 0 000 1.5h2.19l-2.72 2.72a.75.75 0 101.06 1.06L6 11.06v2.19a.75.75 0 001.5 0v-4a.75.75 0 00-.75-.75h-4z"/></g></svg>');
-}
-
-%minimize-24-svg-prop {
-  --minimize-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M20.78 4.28a.75.75 0 00-1.06-1.06L14.5 8.44V4.75a.75.75 0 00-1.5 0v5.5a.747.747 0 00.75.75h5.5a.75.75 0 000-1.5h-3.69l5.22-5.22zM4 13.75c0 .414.336.75.75.75h3.69l-5.22 5.22a.75.75 0 101.06 1.06l5.22-5.22v3.69a.75.75 0 001.5 0v-5.5a.747.747 0 00-.215-.525l-.01-.01A.747.747 0 0010.25 13h-5.5a.75.75 0 00-.75.75z"/></g></svg>');
-}
-
-%minimize-alt-16-svg-prop {
-  --minimize-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.25.953a.75.75 0 01.75.75V3.75A2.25 2.25 0 013.75 6H1.703a.75.75 0 110-1.5H3.75a.75.75 0 00.75-.75V1.703a.75.75 0 01.75-.75zm5.5 0a.75.75 0 01.75.75V3.75c0 .414.336.75.75.75h2.047a.75.75 0 010 1.5H12.25A2.25 2.25 0 0110 3.75V1.703a.75.75 0 01.75-.75zM.953 10.75a.75.75 0 01.75-.75H3.75A2.25 2.25 0 016 12.25v2.047a.75.75 0 01-1.5 0V12.25a.75.75 0 00-.75-.75H1.703a.75.75 0 01-.75-.75zM10 12.25A2.25 2.25 0 0112.25 10h2.047a.75.75 0 110 1.5H12.25a.75.75 0 00-.75.75v2.047a.75.75 0 01-1.5 0V12.25z" clip-rule="evenodd"/></svg>');
-}
-
-%minimize-alt-24-svg-prop {
-  --minimize-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.25 2.25A.75.75 0 019 3v3.25A2.75 2.75 0 016.25 9H3a.75.75 0 010-1.5h3.25c.69 0 1.25-.56 1.25-1.25V3a.75.75 0 01.75-.75zm7.5 0a.75.75 0 01.75.75v3.25c0 .69.56 1.25 1.25 1.25H21A.75.75 0 0121 9h-3.25A2.75 2.75 0 0115 6.25V3a.75.75 0 01.75-.75zm-13.5 13.5A.75.75 0 013 15h3.25A2.75 2.75 0 019 17.75V21a.75.75 0 01-1.5 0v-3.25c0-.69-.56-1.25-1.25-1.25H3a.75.75 0 01-.75-.75zm12.75 2A2.75 2.75 0 0117.75 15H21a.75.75 0 010 1.5h-3.25c-.69 0-1.25.56-1.25 1.25V21a.75.75 0 01-1.5 0v-3.25z" clip-rule="evenodd"/></svg>');
-}
-
-%minus-16-svg-prop {
-  --minus-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.5 7.75A.75.75 0 014.25 7h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%minus-24-svg-prop {
-  --minus-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.5 11.75a.75.75 0 01.75-.75h13.5a.75.75 0 010 1.5H5.25a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
-}
-
-%minus-circle-16-svg-prop {
-  --minus-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.75 7a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%minus-circle-24-svg-prop {
-  --minus-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.25 11a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%minus-circle-fill-svg-prop {
-  @extend %minus-circle-16-svg-prop;
-}
-
-%minus-circle-outline-svg-prop {
-  @extend %minus-circle-16-svg-prop;
-}
-
-%minus-plain-svg-prop {
-  @extend %minus-16-svg-prop;
-}
-
-%minus-plus-16-svg-prop {
-  --minus-plus-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.72 3.22a.75.75 0 111.06 1.06l-8.5 8.5a.75.75 0 01-1.06-1.06l8.5-8.5zM2.25 4a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM10 10a.75.75 0 000 1.5h1.5V13a.75.75 0 001.5 0v-1.5h1.5a.75.75 0 000-1.5H13V8.5a.75.75 0 00-1.5 0V10H10z"/></g></svg>');
-}
-
-%minus-plus-24-svg-prop {
-  --minus-plus-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M17.72 5.22a.75.75 0 111.06 1.06l-12.5 12.5a.75.75 0 01-1.06-1.06l12.5-12.5zM3.5 6.75A.75.75 0 014.25 6h5.5a.75.75 0 010 1.5h-5.5a.75.75 0 01-.75-.75zM16.5 13.5a.75.75 0 011.5 0V16h2.5a.75.75 0 010 1.5H18V20a.75.75 0 01-1.5 0v-2.5H14a.75.75 0 010-1.5h2.5v-2.5z"/></g></svg>');
-}
-
-%minus-plus-circle-16-svg-prop {
-  --minus-plus-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.75 4.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3zM10.25 7.5a.75.75 0 01.75.75V9.5h1.25a.75.75 0 010 1.5H11v1.25a.75.75 0 01-1.5 0V11H8.25a.75.75 0 010-1.5H9.5V8.25a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M5.25 0a5.25 5.25 0 015.244 5.006 5.25 5.25 0 11-5.488 5.488A5.25 5.25 0 015.25 0zM1.5 5.25a3.75 3.75 0 017.499-.1A5.258 5.258 0 005.15 8.999 3.75 3.75 0 011.5 5.25zm8.75 1.25a3.75 3.75 0 100 7.5 3.75 3.75 0 000-7.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%minus-plus-circle-24-svg-prop {
-  --minus-plus-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6 7a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5H6zM15.75 12.25A.75.75 0 0015 13v2h-2a.75.75 0 000 1.5h2v2a.75.75 0 001.5 0v-2h2a.75.75 0 000-1.5h-2v-2a.75.75 0 00-.75-.75z"/><path fill-rule="evenodd" d="M8.25 15.5c.085 0 .17-.002.254-.004a7.25 7.25 0 106.991-6.991A7.25 7.25 0 108.25 15.5zm0-13a5.75 5.75 0 10.467 11.481 7.262 7.262 0 015.264-5.264A5.75 5.75 0 008.25 2.5zM10 15.75a5.75 5.75 0 1111.5 0 5.75 5.75 0 01-11.5 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%minus-plus-square-16-svg-prop {
-  --minus-plus-square-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.75 8a.75.75 0 01.75.75V10h1.25a.75.75 0 010 1.5H11.5v1.25a.75.75 0 01-1.5 0V11.5H8.75a.75.75 0 010-1.5H10V8.75a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M0 2.25A2.25 2.25 0 012.25 0h6a2.25 2.25 0 012.25 2.25V5.5h3.25A2.25 2.25 0 0116 7.75v6A2.25 2.25 0 0113.75 16h-6a2.25 2.25 0 01-2.25-2.25V10.5H2.25A2.25 2.25 0 010 8.25v-6zm9 0V5.5H7.707A.749.749 0 007 4.5H3.5a.75.75 0 000 1.5h2.836A2.246 2.246 0 005.5 7.75V9H2.25a.75.75 0 01-.75-.75v-6a.75.75 0 01.75-.75h6a.75.75 0 01.75.75zm-2 11.5v-6A.75.75 0 017.75 7h6a.75.75 0 01.75.75v6a.75.75 0 01-.75.75h-6a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%minus-plus-square-24-svg-prop {
-  --minus-plus-square-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5.25 7.75A.75.75 0 016 7h4.5a.75.75 0 010 1.5H6a.75.75 0 01-.75-.75zM15.75 12.25A.75.75 0 0015 13v2h-2a.75.75 0 000 1.5h2v2a.75.75 0 001.5 0v-2h2a.75.75 0 000-1.5h-2v-2a.75.75 0 00-.75-.75z"/><path fill-rule="evenodd" d="M4.25 1.5A2.75 2.75 0 001.5 4.25v8A2.75 2.75 0 004.25 15H9v4.75a2.75 2.75 0 002.75 2.75h8a2.75 2.75 0 002.75-2.75v-8A2.75 2.75 0 0019.75 9H15V4.25a2.75 2.75 0 00-2.75-2.75h-8zM13.5 9V4.25c0-.69-.56-1.25-1.25-1.25h-8C3.56 3 3 3.56 3 4.25v8c0 .69.56 1.25 1.25 1.25H9v-1.75A2.75 2.75 0 0111.75 9h1.75zm-3 10.75c0 .69.56 1.25 1.25 1.25h8c.69 0 1.25-.56 1.25-1.25v-8c0-.69-.56-1.25-1.25-1.25h-8c-.69 0-1.25.56-1.25 1.25v8z" clip-rule="evenodd"/></g></svg>');
-}
-
-%minus-square-16-svg-prop {
-  --minus-square-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.25 7a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5z"/><path fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zM2.5 3.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%minus-square-24-svg-prop {
-  --minus-square-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.25 11a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5z"/><path fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V4.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%minus-square-fill-svg-prop {
-  @extend %minus-square-16-svg-prop;
-}
-
-%module-16-svg-prop {
-  --module-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.5 4.75a.75.75 0 00-.897-.735l-5.5 1.1a.75.75 0 00-.603.735v5.4a.75.75 0 00.897.735l5.5-1.1a.75.75 0 00.603-.735v-5.4zM6 10.335v-3.87l4-.8v3.87l-4 .8z"/><path d="M15 2.33A2.25 2.25 0 0012.309.123l-9.5 1.9A2.25 2.25 0 001 4.23v9.44a2.25 2.25 0 002.691 2.207l9.5-1.9A2.25 2.25 0 0015 11.77V2.33zm-2.397-.736a.75.75 0 01.897.736v9.44a.75.75 0 01-.603.736l-9.5 1.9a.75.75 0 01-.897-.736V4.23a.75.75 0 01.603-.736l9.5-1.9z"/></g></svg>');
-}
-
-%module-24-svg-prop {
-  --module-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M17 7.866a1.25 1.25 0 00-1.507-1.223l-7.5 1.578A1.25 1.25 0 007 9.444v7.69c0 .794.73 1.387 1.507 1.223l7.5-1.578A1.25 1.25 0 0017 15.556v-7.69zM8.5 9.647l7-1.473v7.179l-7 1.473V9.647z"/><path d="M21 4.719a2.75 2.75 0 00-3.32-2.69L5.18 4.68A2.75 2.75 0 003 7.37v12.911a2.75 2.75 0 003.32 2.69l12.5-2.651A2.75 2.75 0 0021 17.63V4.719zm-3.01-1.223a1.25 1.25 0 011.51 1.223v12.91c0 .591-.413 1.101-.99 1.224l-12.5 2.651a1.25 1.25 0 01-1.51-1.223V7.371c0-.591.413-1.101.99-1.223l12.5-2.652z"/></g></svg>');
-}
-
-%module-svg-prop {
-  @extend %module-16-svg-prop;
-}
-
-%monitor-16-svg-prop {
-  --monitor-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h11.5A2.25 2.25 0 0116 3.25v6.5A2.25 2.25 0 0113.75 12H8.5v1.5H11a.75.75 0 010 1.5H5a.75.75 0 010-1.5h2V12H2.25A2.25 2.25 0 010 9.75v-6.5zm13.75 7.25a.75.75 0 00.75-.75v-6.5a.75.75 0 00-.75-.75H2.25a.75.75 0 00-.75.75v6.5c0 .414.336.75.75.75h11.5z" clip-rule="evenodd"/></svg>');
-}
-
-%monitor-24-svg-prop {
-  --monitor-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h16.5A2.75 2.75 0 0123 4.75v10.5A2.75 2.75 0 0120.25 18H12.5v2.5H16a.75.75 0 010 1.5H8a.75.75 0 010-1.5h3V18H3.75A2.75 2.75 0 011 15.25V4.75zM20.25 16.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h16.5z" clip-rule="evenodd"/></svg>');
-}
-
-%moon-16-svg-prop {
-  --moon-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.09 1.382a.75.75 0 01-.05.814 4.121 4.121 0 005.764 5.764.75.75 0 011.193.672 7.014 7.014 0 11-7.63-7.629.75.75 0 01.723.379zm-2.06 1.46a5.513 5.513 0 107.128 7.128A5.621 5.621 0 016.03 2.843z" clip-rule="evenodd"/></svg>');
-}
-
-%moon-24-svg-prop {
-  --moon-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M11.82 2.382a.75.75 0 01-.05.814 6.46 6.46 0 009.034 9.034.75.75 0 011.193.672 10.02 10.02 0 11-10.9-10.899.75.75 0 01.723.379zm-2.12 1.4A8.52 8.52 0 1020.217 14.3 7.96 7.96 0 019.7 3.783z" clip-rule="evenodd"/></svg>');
-}
-
-%more-horizontal-16-svg-prop {
-  --more-horizontal-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.5 6.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM8 6.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM12.5 6.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"/></g></svg>');
-}
-
-%more-horizontal-24-svg-prop {
-  --more-horizontal-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5 10a2 2 0 100 4 2 2 0 000-4zM12 10a2 2 0 100 4 2 2 0 000-4zM19 10a2 2 0 100 4 2 2 0 000-4z"/></g></svg>');
-}
-
-%more-horizontal-svg-prop {
-  @extend %more-horizontal-16-svg-prop;
-}
-
-%more-vertical-16-svg-prop {
-  --more-vertical-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 2a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM8 6.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM8 11a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"/></g></svg>');
-}
-
-%more-vertical-24-svg-prop {
-  --more-vertical-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3.5a2 2 0 100 4 2 2 0 000-4zM12 10a2 2 0 100 4 2 2 0 000-4zM12 16.5a2 2 0 100 4 2 2 0 000-4z"/></g></svg>');
-}
-
-%more-vertical-svg-prop {
-  @extend %more-vertical-16-svg-prop;
-}
-
-%mouse-pointer-16-svg-prop {
-  --mouse-pointer-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.538 1.558a.75.75 0 00-.98.98l4.79 11.5a.75.75 0 001.403-.047l1.313-3.866 3.656 3.655a.75.75 0 101.06-1.06l-3.655-3.656 3.866-1.313a.75.75 0 00.048-1.402l-11.5-4.791zm4.432 10.07L3.643 3.643l7.985 3.327-3.127 1.062a.75.75 0 00-.47.469L6.97 11.628z" clip-rule="evenodd"/></svg>');
-}
-
-%mouse-pointer-24-svg-prop {
-  --mouse-pointer-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.038 2.058a.75.75 0 00-.98.98l7.29 17.5a.75.75 0 001.403-.047l2.2-6.479 5.769 5.768a.75.75 0 101.06-1.06l-5.768-5.768 6.48-2.201a.75.75 0 00.046-1.402l-17.5-7.291zm6.931 16.07L4.143 4.143l13.985 5.826-5.74 1.95a.75.75 0 00-.469.469l-1.95 5.74z" clip-rule="evenodd"/></svg>');
-}
-
-%move-16-svg-prop {
-  --move-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M7.463.057A.748.748 0 007.22.22l-2 2a.75.75 0 001.06 1.06L7 2.56V7H2.56l.72-.72a.75.75 0 00-1.06-1.06l-2 2a.748.748 0 000 1.06l2 2a.75.75 0 101.06-1.06l-.72-.72H7v4.44l-.72-.72a.75.75 0 00-1.06 1.06l2 2a.748.748 0 001.06 0l2-2a.75.75 0 10-1.06-1.06l-.72.72V8.5h4.44l-.72.72a.75.75 0 101.06 1.06l2-2a.748.748 0 000-1.06l-2-2a.75.75 0 10-1.06 1.06l.72.72H8.5V2.56l.72.72a.75.75 0 101.06-1.06l-2-2a.748.748 0 00-.817-.163z"/></svg>');
-}
-
-%move-24-svg-prop {
-  --move-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M11.463 1.057a.748.748 0 00-.243.163l-3 3a.75.75 0 001.06 1.06L11 3.56V11H3.56l1.72-1.72a.75.75 0 00-1.06-1.06l-3 3a.748.748 0 000 1.06l3 3a.75.75 0 001.06-1.06L3.56 12.5H11v7.44l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3a.748.748 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V12.5h7.44l-1.72 1.72a.75.75 0 101.06 1.06l3-3a.748.748 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06L19.94 11H12.5V3.56l1.72 1.72a.75.75 0 101.06-1.06l-3-3a.748.748 0 00-.817-.163z"/></svg>');
-}
-
-%music-16-svg-prop {
-  --music-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M13.5 3.687a.25.25 0 00-.293-.246l-6.5 1.121a.25.25 0 00-.207.247v7.348a2.75 2.75 0 01-2.318 2.716l-.678.107a2.164 2.164 0 01-.68-4.274L5 10.36V4.809c0-.852.613-1.58 1.452-1.725l6.5-1.121A1.75 1.75 0 0115 3.687v7.47a2.75 2.75 0 01-2.318 2.716l-.678.107a2.164 2.164 0 01-.68-4.274L13.5 9.36V3.687zM5 11.88l-1.94.309a.664.664 0 10.208 1.311l.678-.108A1.25 1.25 0 005 12.157v-.278zm6.56-.691l1.94-.31v.279a1.25 1.25 0 01-1.054 1.234l-.678.108a.664.664 0 11-.208-1.312z" clip-rule="evenodd"/></svg>');
-}
-
-%music-24-svg-prop {
-  --music-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M20.5 4.27a.75.75 0 00-.873-.74l-9 1.5a.75.75 0 00-.627.74v13.286a2.75 2.75 0 01-2.298 2.712l-2 .334A2.75 2.75 0 012.5 19.389v-.445a2.75 2.75 0 012.298-2.712l3.702-.617V5.77c0-1.1.795-2.039 1.88-2.22l9-1.5A2.25 2.25 0 0122 4.271v12.785a2.75 2.75 0 01-2.298 2.712l-2 .334a2.75 2.75 0 01-3.202-2.713v-.445a2.75 2.75 0 012.298-2.712l3.702-.617V4.27zm0 10.865l-3.456.576A1.25 1.25 0 0016 16.944v.445c0 .773.694 1.36 1.456 1.233l2-.333a1.25 1.25 0 001.044-1.233v-1.92zM5.044 17.711l3.456-.576v1.92a1.25 1.25 0 01-1.045 1.234l-2 .333A1.25 1.25 0 014 19.39v-.445a1.25 1.25 0 011.045-1.233z" clip-rule="evenodd"/></svg>');
-}
-
-%navigation-16-svg-prop {
-  --navigation-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M14.78 1.22a.75.75 0 01.148.851l-5.921 12.5a.75.75 0 01-1.406-.14L6.395 9.606 1.568 8.4a.75.75 0 01-.14-1.406l12.501-5.92a.75.75 0 01.851.147zM3.965 7.452l3.23.807a.75.75 0 01.546.546l.807 3.23 4.125-8.708-8.708 4.125z" clip-rule="evenodd"/></svg>');
-}
-
-%navigation-24-svg-prop {
-  --navigation-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M21.78 2.22a.75.75 0 01.148.851l-8.763 18.5a.75.75 0 01-1.406-.14L9.921 14.08l-7.353-1.838a.75.75 0 01-.14-1.406L20.93 2.072a.75.75 0 01.851.148zM4.965 11.294l5.756 1.439a.75.75 0 01.546.546l1.44 5.756 6.966-14.708-14.708 6.967z" clip-rule="evenodd"/></svg>');
-}
-
-%navigation-alt-16-svg-prop {
-  --navigation-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1a.75.75 0 01.692.46l5.25 12.5a.75.75 0 01-1.028.96L8 12.457 3.086 14.92a.75.75 0 01-1.027-.96l5.25-12.5A.75.75 0 018 1zM4.227 12.67l3.437-1.722a.75.75 0 01.672 0l3.437 1.723L8 3.687 4.227 12.67z" clip-rule="evenodd"/></svg>');
-}
-
-%navigation-alt-24-svg-prop {
-  --navigation-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2a.75.75 0 01.698.476l7.25 18.5a.75.75 0 01-1.053.935L12 18.207 5.105 21.91a.75.75 0 01-1.053-.935l7.25-18.5A.75.75 0 0112 2zM6.193 19.623l5.452-2.928a.75.75 0 01.71 0l5.452 2.928L12 4.806 6.193 19.623z" clip-rule="evenodd"/></svg>');
-}
-
-%network-16-svg-prop {
-  --network-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.25 0C5.56 0 5 .56 5 1.25v3.5C5 5.44 5.56 6 6.25 6H7v1H1a.75.75 0 000 1.5h2.5V10H2.25C1.56 10 1 10.56 1 11.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 16 7 15.44 7 14.75v-3.5C7 10.56 6.44 10 5.75 10H5V8.5h6V10h-.75C9.56 10 9 10.56 9 11.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25H12.5V8.5H15A.75.75 0 0015 7H8.5V6h1.25C10.44 6 11 5.44 11 4.75v-3.5C11 .56 10.44 0 9.75 0h-3.5zm4.25 11.5v3h3v-3h-3zm-8 0v3h3v-3h-3zm7-7v-3h-3v3h3z" clip-rule="evenodd"/></svg>');
-}
-
-%network-24-svg-prop {
-  --network-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.25 2.5A1.75 1.75 0 008.5 4.25v3.5c0 .966.784 1.75 1.75 1.75H11V11H3a.75.75 0 000 1.5h3.5v2H5.25a1.75 1.75 0 00-1.75 1.75v3.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 001.75-1.75v-3.5a1.75 1.75 0 00-1.75-1.75H8v-2h8v2h-.75a1.75 1.75 0 00-1.75 1.75v3.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 001.75-1.75v-3.5a1.75 1.75 0 00-1.75-1.75H17.5v-2H21a.75.75 0 000-1.5h-8.5V9.5h1.25a1.75 1.75 0 001.75-1.75v-3.5a1.75 1.75 0 00-1.75-1.75h-3.5zM10 4.25a.25.25 0 01.25-.25h3.5a.25.25 0 01.25.25v3.5a.25.25 0 01-.25.25h-3.5a.25.25 0 01-.25-.25v-3.5zm-5 12a.25.25 0 01.25-.25h3.5a.25.25 0 01.25.25v3.5a.25.25 0 01-.25.25h-3.5a.25.25 0 01-.25-.25v-3.5zM15.25 16a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 00.25-.25v-3.5a.25.25 0 00-.25-.25h-3.5z" clip-rule="evenodd"/></svg>');
-}
-
-%network-alt-16-svg-prop {
-  --network-alt-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M16 8a.75.75 0 00-.22-.53l-3.5-3.5a.75.75 0 10-1.06 1.06L14.19 8l-2.97 2.97a.75.75 0 101.06 1.06l3.5-3.5A.75.75 0 0016 8zM.22 8.53a.75.75 0 010-1.06l3.5-3.5a.75.75 0 011.06 1.06L1.81 8l2.97 2.97a.75.75 0 11-1.06 1.06l-3.5-3.5z"/><path d="M5 7a1 1 0 000 2h.01a1 1 0 100-2H5zM7 8a1 1 0 011-1h.01a1 1 0 010 2H8a1 1 0 01-1-1zM11 7a1 1 0 100 2h.01a1 1 0 100-2H11z"/></g></svg>');
-}
-
-%network-alt-24-svg-prop {
-  --network-alt-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M23 12a.75.75 0 00-.232-.543l-5.5-5.25a.75.75 0 00-1.036 1.086L21.164 12l-4.932 4.707a.75.75 0 001.036 1.085l5.5-5.25A.75.75 0 0023 12zM1 12a.75.75 0 01.232-.543l5.5-5.25a.75.75 0 111.036 1.086L2.836 12l4.932 4.707a.75.75 0 01-1.036 1.085l-5.5-5.25A.75.75 0 011 12z"/><path d="M8 11a1 1 0 100 2h.01a1 1 0 100-2H8zM11 12a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM16 11a1 1 0 100 2h.01a1 1 0 100-2H16z"/></g></svg>');
-}
-
-%newspaper-16-svg-prop {
-  --newspaper-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.75 9.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM6 12.75a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M7.25 2.5C6.56 2.5 6 3.06 6 3.75v3.5c0 .69.56 1.25 1.25 1.25h4.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-4.5zM7.5 7V4h4v3h-4z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M2.75 16h10.5a2.25 2.25 0 002.25-2.25V2.25A2.25 2.25 0 0013.25 0h-7.5A2.25 2.25 0 003.5 2.25V3.5h-.75A2.25 2.25 0 00.5 5.75v8A2.25 2.25 0 002.75 16zM14 2.25v11.5a.75.75 0 01-.75.75H4.872c.083-.235.128-.487.128-.75V2.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75zM2.75 14.5a.75.75 0 00.75-.75V5h-.75a.75.75 0 00-.75.75v8c0 .414.336.75.75.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%newspaper-24-svg-prop {
-  --newspaper-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.75 13a.75.75 0 000 1.5h7a.75.75 0 000-1.5h-7zM9 16.75a.75.75 0 01.75-.75h4a.75.75 0 010 1.5h-4a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M10.75 4.5A1.75 1.75 0 009 6.25v3.5c0 .966.784 1.75 1.75 1.75h6.5A1.75 1.75 0 0019 9.75v-3.5a1.75 1.75 0 00-1.75-1.75h-6.5zm-.25 1.75a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v3.5a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25v-3.5z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M19.75 23H4.25a2.75 2.75 0 01-2.75-2.75v-12A2.75 2.75 0 014.25 5.5H5.5V3.75A2.75 2.75 0 018.25 1h11.5a2.75 2.75 0 012.75 2.75v16.5A2.75 2.75 0 0119.75 23zM21 3.75v16.5c0 .69-.56 1.25-1.25 1.25H6.7c.192-.375.3-.8.3-1.25V3.75c0-.69.56-1.25 1.25-1.25h11.5c.69 0 1.25.56 1.25 1.25zM3 20.25a1.25 1.25 0 102.5 0V7H4.25C3.56 7 3 7.56 3 8.25v12z" clip-rule="evenodd"/></g></svg>');
-}
-
-%node-16-svg-prop {
-  --node-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4 6.25A2.25 2.25 0 016.25 4h3a2.25 2.25 0 012.25 2.25V7h3.25a.75.75 0 010 1.5H11.5v.75a2.25 2.25 0 01-2.25 2.25h-3A2.25 2.25 0 014 9.25V8.5H.75a.75.75 0 010-1.5H4v-.75zm6 0a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 00.75-.75v-3z" clip-rule="evenodd"/></svg>');
-}
-
-%node-24-svg-prop {
-  --node-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7 9.25A2.75 2.75 0 019.75 6.5h5a2.75 2.75 0 012.75 2.75V11h4.75a.75.75 0 010 1.5H17.5v1.75A2.75 2.75 0 0114.75 17h-5A2.75 2.75 0 017 14.25V12.5H2.25a.75.75 0 010-1.5H7V9.25zm9 0C16 8.56 15.44 8 14.75 8h-5c-.69 0-1.25.56-1.25 1.25v5c0 .69.56 1.25 1.25 1.25h5c.69 0 1.25-.56 1.25-1.25v-5z" clip-rule="evenodd"/></svg>');
-}
-
-%nomad-16-svg-prop {
-  --nomad-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 0L1 4v8l7 4 7-4V4L8 0zm3.119 8.797L9.254 9.863 7.001 8.65v2.549l-2.118 1.33v-5.33l1.68-1.018 2.332 1.216V4.794l2.23-1.322-.006 5.325z"/></svg>');
-}
-
-%nomad-24-svg-prop {
-  --nomad-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12 .5L2 6.25v11.5l10 5.75 10-5.75V6.25L12 .5zm4.456 12.646l-2.664 1.533-3.22-1.745v3.664l-3.026 1.911v-7.661l2.401-1.463 3.331 1.748v-3.74l3.185-1.902-.008 7.655z"/></svg>');
-}
-
-%nomad-color-16-svg-prop {
-  --nomad-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%2306D092" d="M8 0L1 4v8l7 4 7-4V4L8 0zm3.119 8.797L9.254 9.863 7.001 8.65v2.549l-2.118 1.33v-5.33l1.68-1.018 2.332 1.216V4.794l2.23-1.322-.006 5.325z"/></svg>');
-}
-
-%nomad-color-24-svg-prop {
-  --nomad-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%2306D092" d="M12 .5L2 6.25v11.5l10 5.75 10-5.75V6.25L12 .5zm4.456 12.646l-2.664 1.533-3.22-1.745v3.664l-3.026 1.911v-7.661l2.401-1.463 3.331 1.748v-3.74l3.185-1.902-.008 7.655z"/></svg>');
-}
-
-%notification-disabled-svg-prop {
-  @extend %bell-off-16-svg-prop;
-}
-
-%notification-fill-svg-prop {
-  @extend %bell-active-fill-16-svg-prop;
-}
-
-%notification-outline-svg-prop {
-  @extend %bell-16-svg-prop;
-}
-
-%octagon-16-svg-prop {
-  --octagon-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.923.659A2.25 2.25 0 015.514 0h4.972c.597 0 1.169.237 1.59.659l3.265 3.264c.422.422.659.994.659 1.591v4.972a2.25 2.25 0 01-.659 1.59l-3.264 3.265a2.25 2.25 0 01-1.591.659H5.514a2.25 2.25 0 01-1.59-.659L.658 12.077A2.25 2.25 0 010 10.486V5.514c0-.597.237-1.169.659-1.59L3.923.658zm1.591.841a.75.75 0 00-.53.22L1.72 4.984a.75.75 0 00-.22.53v4.972c0 .199.079.39.22.53l3.264 3.264c.14.141.331.22.53.22h4.972a.75.75 0 00.53-.22l3.264-3.264a.75.75 0 00.22-.53V5.514a.75.75 0 00-.22-.53L11.016 1.72a.75.75 0 00-.53-.22H5.514z" clip-rule="evenodd"/></svg>');
-}
-
-%octagon-24-svg-prop {
-  --octagon-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M6.64 1.805A2.75 2.75 0 018.585 1h6.83c.73 0 1.429.29 1.945.805l4.835 4.835A2.75 2.75 0 0123 8.585v6.83c0 .73-.29 1.429-.805 1.945l-4.835 4.835a2.75 2.75 0 01-1.945.805h-6.83a2.75 2.75 0 01-1.945-.805L1.805 17.36A2.75 2.75 0 011 15.415v-6.83c0-.73.29-1.429.805-1.945L6.64 1.805zm1.945.695c-.332 0-.65.132-.884.366L2.866 7.701a1.25 1.25 0 00-.366.884v6.83c0 .332.132.65.366.884l4.835 4.835c.234.234.552.366.884.366h6.83c.332 0 .65-.132.884-.366l4.835-4.835a1.25 1.25 0 00.366-.884v-6.83c0-.332-.132-.65-.366-.884l-4.835-4.835a1.25 1.25 0 00-.884-.366h-6.83z" clip-rule="evenodd"/></svg>');
-}
-
-%okta-16-svg-prop {
-  --okta-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 1C4.143 1 1 4.12 1 8s3.121 7 7 7 7-3.121 7-7-3.143-7-7-7zm0 10.5c-1.94 0-3.5-1.56-3.5-3.5S6.06 4.5 8 4.5s3.5 1.56 3.5 3.5-1.56 3.5-3.5 3.5z"/></svg>');
-}
-
-%okta-24-svg-prop {
-  --okta-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12 2C6.49 2 2 6.458 2 12s4.459 10 10 10 10-4.459 10-10S17.51 2 12 2zm0 15c-2.77 0-5-2.23-5-5s2.23-5 5-5 5 2.23 5 5-2.23 5-5 5z"/></svg>');
-}
-
-%okta-color-16-svg-prop {
-  --okta-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23007DC1" d="M8 1C4.143 1 1 4.12 1 8s3.121 7 7 7 7-3.121 7-7-3.143-7-7-7zm0 10.5c-1.94 0-3.5-1.56-3.5-3.5S6.06 4.5 8 4.5s3.5 1.56 3.5 3.5-1.56 3.5-3.5 3.5z"/></svg>');
-}
-
-%okta-color-24-svg-prop {
-  --okta-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23007DC1" d="M12 2C6.49 2 2 6.458 2 12s4.459 10 10 10 10-4.459 10-10S17.51 2 12 2zm0 15c-2.77 0-5-2.23-5-5s2.23-5 5-5 5 2.23 5 5-2.23 5-5 5z"/></svg>');
-}
-
-%oracle-16-svg-prop {
-  --oracle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M.1 8c0 2.761 2.237 5 4.997 5h5.806A4.999 4.999 0 0015.9 8c0-2.761-2.237-5-4.997-5H5.097A4.999 4.999 0 00.1 8zm13.911 0a3.235 3.235 0 01-3.234 3.237h-5.55A3.235 3.235 0 011.991 8a3.235 3.235 0 013.234-3.236h5.551A3.235 3.235 0 0114.011 8z" clip-rule="evenodd"/></svg>');
-}
-
-%oracle-24-svg-prop {
-  --oracle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2 12c0 3.48 2.832 6.3 6.326 6.3h7.348C19.168 18.3 22 15.48 22 12s-2.832-6.3-6.326-6.3H8.326C4.832 5.7 2 8.52 2 12zm17.61 0a4.086 4.086 0 01-4.095 4.078H8.489a4.086 4.086 0 01-4.095-4.077A4.086 4.086 0 018.49 7.923h7.026a4.086 4.086 0 014.094 4.078z" clip-rule="evenodd"/></svg>');
-}
-
-%oracle-color-16-svg-prop {
-  --oracle-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23EA1B22" fill-rule="evenodd" d="M.1 8c0 2.761 2.237 5 4.997 5h5.806A4.999 4.999 0 0015.9 8c0-2.761-2.237-5-4.997-5H5.097A4.999 4.999 0 00.1 8zm13.911 0a3.235 3.235 0 01-3.234 3.237h-5.55A3.235 3.235 0 011.991 8a3.235 3.235 0 013.234-3.236h5.551A3.235 3.235 0 0114.011 8z" clip-rule="evenodd"/></svg>');
-}
-
-%oracle-color-24-svg-prop {
-  --oracle-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23EA1B22" fill-rule="evenodd" d="M2 12c0 3.48 2.832 6.3 6.326 6.3h7.348C19.168 18.3 22 15.48 22 12s-2.832-6.3-6.326-6.3H8.326C4.832 5.7 2 8.52 2 12zm17.61 0a4.086 4.086 0 01-4.095 4.078H8.489a4.086 4.086 0 01-4.095-4.077A4.086 4.086 0 018.49 7.923h7.026a4.086 4.086 0 014.094 4.078z" clip-rule="evenodd"/></svg>');
-}
-
-%org-16-svg-prop {
-  --org-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h6.5A2.25 2.25 0 0112 3.25v2.112l2.05 1.453A2.25 2.25 0 0115 8.65v5.1c0 .69-.56 1.25-1.25 1.25h-2.5a.748.748 0 01-.75-.751v-11a.75.75 0 00-.75-.75h-6.5a.75.75 0 00-.75.75v11a.75.75 0 01-1.5 0v-11zM12 13.5V7.2l1.184.839a.75.75 0 01.316.612v4.85H12z" clip-rule="evenodd"/><path d="M4.75 10.55a.7.7 0 00-.7.7v3a.7.7 0 101.4 0v-2.3h2.1v2.3a.7.7 0 101.4 0v-3a.7.7 0 00-.7-.7h-3.5zM4.25 4.75A.75.75 0 015 4h.25a.75.75 0 010 1.5H5a.75.75 0 01-.75-.75zM7.75 4a.75.75 0 000 1.5H8A.75.75 0 008 4h-.25zM4.25 6.75A.75.75 0 015 6h.25a.75.75 0 010 1.5H5a.75.75 0 01-.75-.75zM7.75 6a.75.75 0 000 1.5H8A.75.75 0 008 6h-.25zM4.25 8.75A.75.75 0 015 8h.25a.75.75 0 010 1.5H5a.75.75 0 01-.75-.75zM7.75 8a.75.75 0 000 1.5H8A.75.75 0 008 8h-.25z"/></g></svg>');
-}
-
-%org-24-svg-prop {
-  --org-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h10.5A2.75 2.75 0 0118 4.75v5.504l2.326.988A2.75 2.75 0 0122 13.773v6.477A1.75 1.75 0 0120.25 22h-3a.746.746 0 01-.622-.33.746.746 0 01-.128-.42V10.769a.81.81 0 010-.039V4.75c0-.69-.56-1.25-1.25-1.25H4.75c-.69 0-1.25.56-1.25 1.25v16.5a.75.75 0 01-1.5 0V4.75zM18 20.5v-8.616l1.739.739c.461.196.76.649.76 1.15v6.477a.25.25 0 01-.25.25H18z" clip-rule="evenodd"/><path d="M8.25 16C7.56 16 7 16.56 7 17.25v4a.75.75 0 001.5 0V17.5h3v3.75a.75.75 0 001.5 0v-4c0-.69-.56-1.25-1.25-1.25h-3.5zM7 6.75A.75.75 0 017.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 6.75zM11.75 6a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 9.75A.75.75 0 017.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 9.75zM11.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 12.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM11.75 12a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/></g></svg>');
-}
-
-%outline-16-svg-prop {
-  --outline-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.5 7.25a.75.75 0 01.75-.75h4a.75.75 0 010 1.5h-4a.75.75 0 01-.75-.75zM4.75 3.5a.75.75 0 000 1.5h.01a.75.75 0 000-1.5h-.01zM4 7.25a.75.75 0 01.75-.75h.01a.75.75 0 010 1.5h-.01A.75.75 0 014 7.25zM4.75 9.5a.75.75 0 000 1.5h.01a.75.75 0 000-1.5h-.01zM6.5 4.25a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75zM7.25 9.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z"/><path fill-rule="evenodd" d="M1 2.25A2.25 2.25 0 013.25 0h9.5A2.25 2.25 0 0115 2.25v11.5A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V2.25zm2.25-.75a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V2.25a.75.75 0 00-.75-.75h-9.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%outline-24-svg-prop {
-  --outline-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.5 5.75A.75.75 0 017.25 5h.01a.75.75 0 010 1.5h-.01a.75.75 0 01-.75-.75zM7.25 9a.75.75 0 000 1.5h.01a.75.75 0 000-1.5h-.01zM6.5 13.75a.75.75 0 01.75-.75h.01a.75.75 0 010 1.5h-.01a.75.75 0 01-.75-.75zM7.25 17a.75.75 0 000 1.5h.01a.75.75 0 000-1.5h-.01zM9.5 9.75a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zM10.25 5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zM9.5 13.75a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5a.75.75 0 01-.75-.75zM10.25 17a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5z"/><path fill-rule="evenodd" d="M3 3.75A2.75 2.75 0 015.75 1h12.5A2.75 2.75 0 0121 3.75v16.5A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25V3.75zM5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V3.75c0-.69-.56-1.25-1.25-1.25H5.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%outline-svg-prop {
-  @extend %outline-16-svg-prop;
-}
-
-%pack-16-svg-prop {
-  --pack-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.2 4.366l2.2-1.31c.06-.03.13-.051.2-.051.22 0 .4.185.4.412v2.62c0 .154-.08.288-.2.36L8.2 7.944a.396.396 0 01-.4 0L5.2 6.397a.446.446 0 01-.2-.36v-2.62c0-.072.01-.144.05-.206a.392.392 0 01.55-.155l2.2 1.31c.12.072.28.072.4 0zM4.3 9.866l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .144.08.278.2.36l2.6 1.547c.12.072.28.072.4 0l2.6-1.547c.12-.072.2-.206.2-.36v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051l-2.2 1.31a.396.396 0 01-.4 0zM11.3 9.866l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .144.08.278.2.36l2.6 1.547c.12.072.28.072.4 0l2.6-1.547c.12-.072.2-.206.2-.36v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051l-2.2 1.31a.396.396 0 01-.4 0z"/></g></svg>');
-}
-
-%pack-24-svg-prop {
-  --pack-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.317 5.685L15.8 3.59a.697.697 0 01.317-.083c.348 0 .633.297.633.66v4.191a.671.671 0 01-.317.577l-4.116 2.475a.622.622 0 01-.634 0L7.567 8.935a.715.715 0 01-.317-.577v-4.19c0-.116.016-.232.08-.33a.617.617 0 01.87-.248l3.483 2.095c.19.116.444.116.634 0zM6.433 14.685L2.95 12.59a.617.617 0 00-.87.247.599.599 0 00-.08.33v4.191c0 .231.127.445.317.578l4.116 2.474c.19.116.444.116.634 0l4.116-2.474a.671.671 0 00.317-.578v-4.19c0-.364-.285-.66-.633-.66a.697.697 0 00-.317.082l-3.483 2.095a.622.622 0 01-.634 0zM16.933 14.685L13.45 12.59a.617.617 0 00-.87.247.598.598 0 00-.08.33v4.191c0 .231.127.445.317.578l4.116 2.474c.19.116.444.116.634 0l4.116-2.474a.671.671 0 00.317-.578v-4.19c0-.364-.285-.66-.633-.66a.697.697 0 00-.317.082l-3.483 2.095a.622.622 0 01-.634 0z"/></g></svg>');
-}
-
-%pack-color-16-svg-prop {
-  --pack-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23252960" d="M4.3 9.866l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .145.08.279.2.361l2.6 1.548c.12.072.28.072.4 0l2.6-1.547c.12-.073.2-.207.2-.362v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051l-2.2 1.31a.396.396 0 01-.4 0z"/><path fill="url(%23pack-color-16__paint0_linear_1133_286)" d="M4.5 10.228v2.62c0 .227.18.412.4.412.07 0 .14-.02.2-.051l2.2-1.31c.12-.072.2-.206.2-.361v-2.62a.408.408 0 00-.4-.413c-.07 0-.14.02-.2.051l-2.2 1.31a.432.432 0 00-.2.362z"/><path fill="%23DE156C" d="M11.3 9.866l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .145.08.279.2.361l2.6 1.548c.12.072.28.072.4 0l2.6-1.547c.12-.073.2-.207.2-.362v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051l-2.2 1.31a.396.396 0 01-.4 0z"/><path fill="url(%23pack-color-16__paint1_linear_1133_286)" d="M11.5 10.228v2.62c0 .227.18.412.4.412.07 0 .14-.02.2-.051l2.2-1.31c.12-.072.2-.206.2-.361v-2.62a.408.408 0 00-.4-.413c-.07 0-.14.02-.2.051l-2.2 1.31a.432.432 0 00-.2.362z"/><g><path fill="%2347529D" d="M10.4 3.056l-2.2 1.31a.396.396 0 01-.4 0l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .145.08.279.2.361l2.6 1.548c.12.072.28.072.4 0l2.6-1.548c.12-.072.2-.206.2-.36v-2.62a.408.408 0 00-.4-.413c-.07 0-.14.02-.2.051z"/><path fill="url(%23pack-color-16__paint2_linear_1133_286)" d="M10.4 3.056l-2.2 1.31a.419.419 0 00-.2.361v2.62c0 .228.18.413.4.413.07 0 .14-.02.2-.051l2.2-1.31c.12-.073.2-.207.2-.362v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051z"/></g><defs><linearGradient id="pack-color-16__paint0_linear_1133_286" x1="6.004" x2="6.004" y1="8.502" y2="13.262" gradientUnits="userSpaceOnUse"><stop stop-color="%23757CBA"/><stop offset="1" stop-color="%23252960"/></linearGradient><linearGradient id="pack-color-16__paint1_linear_1133_286" x1="13.004" x2="13.004" y1="8.503" y2="13.262" gradientUnits="userSpaceOnUse"><stop stop-color="%23FC72C7"/><stop offset="1" stop-color="%23DE156C"/></linearGradient><linearGradient id="pack-color-16__paint2_linear_1133_286" x1="9.504" x2="9.504" y1="3.002" y2="7.762" gradientUnits="userSpaceOnUse"><stop stop-color="%238896DB"/><stop offset="1" stop-color="%2347529D"/></linearGradient></defs></svg>');
-}
-
-%pack-color-24-svg-prop {
-  --pack-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23DE156C" d="M16.933 14.686L13.45 12.59a.617.617 0 00-.87.247.599.599 0 00-.08.33v4.193c0 .231.127.445.317.578l4.116 2.475c.19.116.444.116.634 0l4.116-2.475A.672.672 0 0022 17.36v-4.192c0-.364-.285-.66-.633-.66a.696.696 0 00-.317.082l-3.483 2.096a.622.622 0 01-.634 0z"/><path fill="url(%23pack-color-24__paint0_linear_1133_275)" d="M17.25 15.264v4.192c0 .364.285.66.633.66.111 0 .222-.032.317-.082l3.483-2.096A.671.671 0 0022 17.36v-4.192c0-.363-.285-.66-.633-.66a.697.697 0 00-.317.082l-3.483 2.097a.693.693 0 00-.317.577z"/><path fill="%2347529D" d="M15.8 3.59l-3.483 2.096a.622.622 0 01-.634 0L8.2 3.59a.617.617 0 00-.87.247.6.6 0 00-.08.33V8.36c0 .23.127.446.317.578l4.116 2.475c.19.116.444.116.634 0l4.116-2.475a.672.672 0 00.317-.578V4.168c0-.364-.285-.66-.633-.66a.697.697 0 00-.317.082z"/><path fill="url(%23pack-color-24__paint1_linear_1133_275)" d="M15.8 3.59l-3.483 2.096a.671.671 0 00-.317.578v4.192c0 .363.285.66.633.66.111 0 .222-.033.317-.082l3.483-2.096a.672.672 0 00.317-.578V4.168c0-.364-.285-.66-.633-.66a.697.697 0 00-.317.082z"/><g><path fill="%23252960" d="M6.433 14.686L2.95 12.59a.617.617 0 00-.87.247.6.6 0 00-.08.33v4.193c0 .231.127.445.317.578l4.116 2.475c.19.116.444.116.634 0l4.116-2.475a.672.672 0 00.317-.578v-4.192c0-.364-.285-.66-.633-.66a.696.696 0 00-.317.082l-3.483 2.096a.621.621 0 01-.634 0z"/><path fill="url(%23pack-color-24__paint2_linear_1133_275)" d="M6.75 15.264v4.192c0 .364.285.66.633.66.111 0 .222-.032.317-.082l3.483-2.096a.671.671 0 00.317-.578v-4.192c0-.363-.285-.66-.633-.66a.697.697 0 00-.317.082l-3.483 2.097a.693.693 0 00-.317.577z"/></g><defs><linearGradient id="pack-color-24__paint0_linear_1133_275" x1="19.631" x2="19.631" y1="12.504" y2="20.119" gradientUnits="userSpaceOnUse"><stop stop-color="%23FC72C7"/><stop offset="1" stop-color="%23DE156C"/></linearGradient><linearGradient id="pack-color-24__paint1_linear_1133_275" x1="14.381" x2="14.381" y1="3.504" y2="11.119" gradientUnits="userSpaceOnUse"><stop stop-color="%238896DB"/><stop offset="1" stop-color="%2347529D"/></linearGradient><linearGradient id="pack-color-24__paint2_linear_1133_275" x1="9.131" x2="9.131" y1="12.504" y2="20.119" gradientUnits="userSpaceOnUse"><stop stop-color="%23757CBA"/><stop offset="1" stop-color="%23252960"/></linearGradient></defs></svg>');
-}
-
-%package-16-svg-prop {
-  --package-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.02.678a2.25 2.25 0 00-2.04 0L1.682 3.374A1.25 1.25 0 001 4.488v6.717c0 .658.37 1.26.956 1.56l5.023 2.557a2.25 2.25 0 002.042 0l5.023-2.557a1.75 1.75 0 00.956-1.56V4.488c0-.47-.264-.9-.683-1.114L9.021.678zM7.66 2.015a.75.75 0 01.68 0l4.436 2.258-1.468.734-4.805-2.403 1.157-.59zM4.84 3.45l-1.617.823L8 6.661l1.631-.815-4.79-2.396zM2.5 5.588v5.617c0 .094.053.18.137.223l4.613 2.348V7.964L2.5 5.588zm10.863 5.84L8.75 13.776V7.964l4.75-2.375v5.617a.25.25 0 01-.137.223z" clip-rule="evenodd"/></svg>');
-}
-
-%package-24-svg-prop {
-  --package-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.794.754a2.75 2.75 0 012.412 0l8.811 4.298c.602.293.983.904.983 1.573v9.902a2.75 2.75 0 01-1.496 2.448l-8.25 4.226a2.75 2.75 0 01-2.508 0l-8.25-4.226A2.75 2.75 0 011 16.527V6.625c0-.67.381-1.28.983-1.573L10.794.754zm1.754 1.348a1.25 1.25 0 00-1.096 0l-2.82 1.375 8.505 4.253 3.52-1.672-8.109-3.956zm2.869 6.445L6.934 4.306 3.343 6.058 12 10.17l3.417-1.623zM2.5 16.527v-9.21l8.75 4.157v10.3L3.18 17.64a1.25 1.25 0 01-.68-1.113zm18.32 1.113l-8.07 4.133V11.474l8.75-4.156v9.21c0 .469-.263.898-.68 1.112z" clip-rule="evenodd"/></svg>');
-}
-
-%packer-16-svg-prop {
-  --packer-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.163 0l5.762 3.247c1.138.646 2.074 2.085 2.075 3.2v4.963c0 1.123-.933 1.502-2.074.858L9.083 11.23V4.469l-3.92-2.216V0z"/><path d="M8.3 4.953L3 1.956v11.047L8.3 16V4.953z"/></g></svg>');
-}
-
-%packer-24-svg-prop {
-  --packer-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.028.5l8.067 4.668c1.593.928 2.903 2.996 2.905 4.6v7.134c0 1.614-1.306 2.158-2.903 1.233l-2.58-1.49V6.922L8.027 3.738V.5z"/><path d="M12.42 7.62L5 3.31v15.88l7.42 4.309V7.62z"/></g></svg>');
-}
-
-%packer-color-16-svg-prop {
-  --packer-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%2302A8EF"><path fill-rule="evenodd" d="M3 1.956l5.3 2.997V16L3 13.003V1.956z" clip-rule="evenodd"/><path d="M10.925 3.247L5.163 0v2.252l3.92 2.216v6.764l1.843 1.036c1.14.644 2.074.265 2.074-.858V6.447c-.001-1.115-.937-2.554-2.075-3.2z"/></g></svg>');
-}
-
-%packer-color-24-svg-prop {
-  --packer-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%2302A8EF"><path fill-rule="evenodd" d="M5 3.311l7.42 4.308V23.5L5 19.192V3.312z" clip-rule="evenodd"/><path d="M16.095 5.168L8.028.5v3.238l5.488 3.184v9.723l2.58 1.49c1.598.925 2.904.38 2.904-1.233V9.768c-.002-1.604-1.312-3.672-2.905-4.6z"/></g></svg>');
-}
-
-%page-outline-svg-prop {
-  @extend %outline-16-svg-prop;
-}
-
-%paperclip-16-svg-prop {
-  --paperclip-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M9.387 2.102a2.034 2.034 0 012.864 0c.776.785.749 2.178 0 2.928-.75.749-6.39 6.465-6.39 6.465a.642.642 0 01-.898 0 .685.685 0 010-.937l5.896-5.966a.75.75 0 10-1.066-1.054L3.896 9.504a2.184 2.184 0 000 3.045 2.142 2.142 0 003.033 0l6.39-6.466c1.36-1.377 1.36-3.658 0-5.035-1.364-1.381-3.636-1.381-5 0L1.938 7.513A5.001 5.001 0 00.5 11.026c0 1.316.516 2.58 1.437 3.514A4.892 4.892 0 005.42 16c1.308 0 2.56-.526 3.482-1.46l6.383-6.466a.75.75 0 10-1.068-1.053l-6.382 6.465A3.392 3.392 0 015.419 14.5a3.392 3.392 0 01-2.414-1.014A3.501 3.501 0 012 11.026c0-.924.363-1.808 1.005-2.46l6.382-6.464z"/></svg>');
-}
-
-%paperclip-24-svg-prop {
-  --paperclip-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M16.072 2.5c-.868 0-1.7.342-2.31.949l-9.22 9.14A5.196 5.196 0 003 16.28c0 1.383.554 2.71 1.542 3.69a5.299 5.299 0 003.73 1.531c1.4 0 2.742-.552 3.73-1.532l9.22-9.14a.75.75 0 011.056 1.065l-9.22 9.14A6.799 6.799 0 018.273 23a6.799 6.799 0 01-4.786-1.966A6.696 6.696 0 011.5 16.279c0-1.785.715-3.495 1.986-4.755l9.219-9.14A4.783 4.783 0 0116.072 1c1.262 0 2.473.497 3.367 1.383a4.714 4.714 0 011.398 3.348c0 1.257-.504 2.46-1.398 3.347l-9.23 9.14a2.766 2.766 0 01-3.894 0 2.732 2.732 0 010-3.88l8.517-8.434a.75.75 0 011.055 1.066l-8.516 8.434a1.232 1.232 0 000 1.75 1.266 1.266 0 001.783 0l9.229-9.141a3.214 3.214 0 00.954-2.282c0-.855-.342-1.676-.954-2.282a3.283 3.283 0 00-2.311-.949z" clip-rule="evenodd"/></svg>');
-}
-
-%partner-svg-prop {
-  @extend %users-16-svg-prop;
-}
-
-%path-16-svg-prop {
-  --path-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M13 0a3 3 0 00-1.65 5.506 7.338 7.338 0 01-.78 1.493c-.22.32-.472.635-.8 1.025a1.509 1.509 0 00-.832.085 12.722 12.722 0 00-1.773-1.124c-.66-.34-1.366-.616-2.215-.871a1.5 1.5 0 10-2.708 1.204c-.9 1.935-1.236 3.607-1.409 5.838a1.5 1.5 0 101.497.095c.162-2.07.464-3.55 1.25-5.253.381-.02.725-.183.979-.435.763.23 1.367.471 1.919.756a11.13 11.13 0 011.536.973 1.5 1.5 0 102.899-.296c.348-.415.64-.779.894-1.148.375-.548.665-1.103.964-1.857A3 3 0 1013 0zm-1.5 3a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/></svg>');
-}
-
-%path-24-svg-prop {
-  --path-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M19.5 1a3.5 3.5 0 00-1.668 6.578c-.665 1.8-1.174 2.997-2.267 4.503a2.001 2.001 0 00-1.605.21c-1.859-1.251-3.599-1.917-5.978-2.56A2 2 0 104.48 11.3c-.616 1.268-1.071 2.439-1.406 3.674-.344 1.267-.556 2.585-.694 4.125a2 2 0 101.497.103c.132-1.465.332-2.682.644-3.835.303-1.115.715-2.186 1.29-3.375a1.997 1.997 0 001.8-.806c2.236.605 3.801 1.208 5.454 2.311A2.002 2.002 0 0015 16a2 2 0 001.74-2.986c1.25-1.71 1.815-3.057 2.537-5.021A3.5 3.5 0 1019.5 1zm-2 3.5a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/></svg>');
-}
-
-%path-svg-prop {
-  @extend %path-16-svg-prop;
-}
-
-%pause-16-svg-prop {
-  --pause-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6 3.75a.75.75 0 00-1.5 0v8.5a.75.75 0 001.5 0v-8.5zM11.5 3.75a.75.75 0 00-1.5 0v8.5a.75.75 0 001.5 0v-8.5z"/></g></svg>');
-}
-
-%pause-24-svg-prop {
-  --pause-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9 5.25a.75.75 0 00-1.5 0v13.5a.75.75 0 001.5 0V5.25zM16.5 5.25a.75.75 0 00-1.5 0v13.5a.75.75 0 001.5 0V5.25z"/></g></svg>');
-}
-
-%pause-circle-16-svg-prop {
-  --pause-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.25 5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 016.25 5zM10.5 5.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%pause-circle-24-svg-prop {
-  --pause-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.25 7a.75.75 0 01.75.75v8.5a.75.75 0 01-1.5 0v-8.5A.75.75 0 019.25 7zM15.5 7.75a.75.75 0 00-1.5 0v8.5a.75.75 0 001.5 0v-8.5z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
-}
-
-%pen-tool-16-svg-prop {
-  --pen-tool-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M.923.02A.75.75 0 00.02.923l2.476 10.433a.75.75 0 00.587.563l4.245.822a.75.75 0 00.142.864l2.175 2.175a.75.75 0 001.06 0l5.075-5.075a.75.75 0 000-1.06L13.605 7.47a.75.75 0 00-.864-.142l-.822-4.245a.75.75 0 00-.563-.587L.923.02zm10.529 8.542l-.913-4.718L3.15 2.09l3.08 3.08a2.25 2.25 0 11-1.06 1.06l-3.08-3.08 1.753 7.388 4.718.913 2.89-2.89zM9.06 13.075l4.014-4.014 1.114 1.114-4.014 4.014-1.114-1.114zM6.45 7.201a.75.75 0 111.5 0 .75.75 0 01-1.5 0z" clip-rule="evenodd"/></svg>');
-}
-
-%pen-tool-24-svg-prop {
-  --pen-tool-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1.923 1.02a.75.75 0 00-.903.903l3.5 14.75a.75.75 0 00.588.563l6.51 1.26-.148.149a.75.75 0 000 1.06l3.075 3.075a.75.75 0 001.06 0l7.175-7.175a.75.75 0 000-1.06l-3.075-3.075a.75.75 0 00-1.06 0l-.149.148-1.26-6.51a.75.75 0 00-.563-.588l-14.75-3.5zm15.293 11.878l-1.36-7.03L4.15 3.091l5.325 5.324a3 3 0 11-1.06 1.06L3.09 4.152l2.777 11.705 7.03 1.36 4.318-4.318zm-4.155 6.277l6.114-6.114 2.014 2.014-6.114 6.114-2.014-2.014zM9.5 11a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/></svg>');
-}
-
-%pencil-tool-16-svg-prop {
-  --pencil-tool-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M12.988 2.177a1.75 1.75 0 00-2.475 0L3.26 9.429a2.75 2.75 0 00-.609.923l-1.347 3.37a.75.75 0 00.975.974l3.368-1.347a2.75 2.75 0 00.924-.61l7.252-7.252a1.75 1.75 0 000-2.475l-.835-.835zm-1.415 1.06a.25.25 0 01.354 0l.836.836a.25.25 0 010 .354l-.638.637-1.19-1.19.638-.637zM9.875 4.936L4.32 10.49a1.25 1.25 0 00-.277.42l-.698 1.744 1.744-.698c.157-.063.3-.157.42-.277l5.554-5.554-1.19-1.19z" clip-rule="evenodd"/></svg>');
-}
-
-%pencil-tool-24-svg-prop {
-  --pencil-tool-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M18.945 4.884a2.75 2.75 0 00-3.89 0L6.05 13.89A4.75 4.75 0 005 15.484l-1.695 4.238a.75.75 0 00.975.974l4.237-1.695a4.75 4.75 0 001.595-1.051l9.005-9.005a2.75 2.75 0 000-3.89l-.171-.17zm-2.829 1.06a1.25 1.25 0 011.768 0l.171.172a1.25 1.25 0 010 1.768l-.555.555L15.56 6.5l.556-.555zM14.5 7.562L7.11 14.95a3.25 3.25 0 00-.719 1.091l-1.045 2.613 2.613-1.045c.409-.164.78-.409 1.091-.72L16.44 9.5 14.5 7.56z" clip-rule="evenodd"/></svg>');
-}
-
-%phone-16-svg-prop {
-  --phone-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.87 1.671a.71.71 0 00-.469-.171H2.208a.712.712 0 00-.671.48.702.702 0 00-.034.284c.227 2.129.954 4.175 2.12 5.972 1.175 1.81 2.348 2.976 4.153 4.145a13.696 13.696 0 005.957 2.117.713.713 0 00.708-.421c.039-.09.059-.187.059-.285v-.071c-.002-.371-.009-1.792 0-2.134a.703.703 0 00-.606-.715c-.755-.1-1.496-.284-2.209-.55h-.002a.71.71 0 00-.746.158h-.002l-.923.922a.75.75 0 01-.9.121 12.403 12.403 0 01-4.655-4.646.75.75 0 01.122-.902l.924-.923a.704.704 0 00.158-.742L5.66 4.31a10.077 10.077 0 01-.55-2.205.704.704 0 00-.24-.433zM4.39.001a2.21 2.21 0 012.205 1.895v.007c.086.643.243 1.273.47 1.88l-.703.263.702-.264a2.203 2.203 0 01-.497 2.327l-.003.003-.51.509a10.904 10.904 0 003.314 3.306l.514-.514a2.21 2.21 0 012.327-.496c.609.227 1.24.384 1.885.468l.006.001a2.209 2.209 0 011.9 2.239c-.008.315-.002 1.703 0 2.086v.075a2.202 2.202 0 01-1.502 2.098c-.29.098-.6.135-.905.107l-.014-.001a15.196 15.196 0 01-6.618-2.35c-1.981-1.282-3.306-2.6-4.596-4.587A15.131 15.131 0 01.01 2.416L.01 2.404A2.202 2.202 0 011.317.188 2.21 2.21 0 012.207 0H4.39z" clip-rule="evenodd"/></svg>');
-}
-
-%phone-24-svg-prop {
-  --phone-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7.778 2.817a1.314 1.314 0 00-.869-.317H3.81a1.316 1.316 0 00-1.241.89c-.058.17-.08.351-.064.53.326 3.06 1.37 6 3.047 8.583 1.684 2.595 3.374 4.276 5.963 5.951a19.676 19.676 0 008.56 3.041 1.316 1.316 0 001.315-.78c.073-.166.11-.346.11-.528l-.001-.1c-.002-.528-.011-2.53 0-3.008a1.304 1.304 0 00-1.124-1.326 14.006 14.006 0 01-3.057-.76h-.001a1.315 1.315 0 00-1.383.292l-.002.002-1.306 1.303a.75.75 0 01-.9.122 17.225 17.225 0 01-6.466-6.454.75.75 0 01.122-.902l1.307-1.305a1.306 1.306 0 00.294-1.377v-.001a13.937 13.937 0 01-.763-3.051 1.306 1.306 0 00-.442-.805zM6.898 1a2.814 2.814 0 012.808 2.414v.007c.124.932.352 1.846.681 2.726l-.702.263.702-.264a2.803 2.803 0 01-.633 2.962l-.003.003-.896.895a15.726 15.726 0 005.123 5.112l.9-.899a2.813 2.813 0 012.965-.632c.882.329 1.798.557 2.731.68h.007A2.813 2.813 0 0123 17.117c-.011.451-.002 2.42 0 2.96v.104a2.803 2.803 0 01-1.91 2.671c-.371.125-.764.172-1.154.137l-.013-.002a21.173 21.173 0 01-9.222-3.274c-2.765-1.79-4.607-3.62-6.406-6.393a21.081 21.081 0 01-3.281-9.248L1.01 4.06a2.803 2.803 0 011.665-2.82A2.815 2.815 0 013.81 1h3.09z" clip-rule="evenodd"/></svg>');
-}
-
-%phone-call-16-svg-prop {
-  --phone-call-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M5.847.533A2.21 2.21 0 004.391 0H2.206a2.21 2.21 0 00-2.09 1.501c-.098.29-.135.598-.107.903l.001.012a15.131 15.131 0 002.355 6.637c1.29 1.987 2.615 3.304 4.596 4.587a15.196 15.196 0 006.618 2.35h.014a2.212 2.212 0 002.221-1.311c.124-.282.187-.586.185-.893v-.075a152.65 152.65 0 010-2.087A2.203 2.203 0 0014.1 9.386h-.007a8.627 8.627 0 01-1.884-.47 2.21 2.21 0 00-2.327.497l-.515.513a10.903 10.903 0 01-3.313-3.305l.51-.509.003-.003a2.204 2.204 0 00.498-2.326 8.577 8.577 0 01-.47-1.88v-.007A2.204 2.204 0 005.847.533zM4.401 1.5a.71.71 0 01.708.604c.1.753.285 1.493.55 2.205l.001.001a.702.702 0 01-.157.742l-.924.923a.75.75 0 00-.122.902 12.403 12.403 0 004.656 4.646.75.75 0 00.9-.121l.922-.921.002-.001a.709.709 0 01.746-.158h.002c.713.266 1.454.45 2.209.55a.71.71 0 01.606.715c-.009.342-.002 1.762 0 2.134v.07a.704.704 0 01-.767.707 13.696 13.696 0 01-5.957-2.117c-1.805-1.169-2.978-2.336-4.153-4.145a13.63 13.63 0 01-2.12-5.972.702.702 0 01.419-.704c.09-.04.187-.06.286-.06H4.4zm2.664 2.283v-.001l-.703.264.703-.263z" clip-rule="evenodd"/><path d="M10.333.005a.75.75 0 00-.166 1.49 4.91 4.91 0 014.338 4.332.75.75 0 101.49-.167A6.41 6.41 0 0010.333.005z"/><path d="M10.394 2.53a.75.75 0 00-.288 1.472 2.395 2.395 0 011.892 1.892.75.75 0 101.472-.288 3.895 3.895 0 00-3.076-3.076z"/></g></svg>');
-}
-
-%phone-call-24-svg-prop {
-  --phone-call-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.833.005a.75.75 0 10-.166 1.49 8.873 8.873 0 017.838 7.828.75.75 0 101.49-.167A10.373 10.373 0 0014.833.005zM14.894 4.29a.75.75 0 10-.288 1.473 4.596 4.596 0 013.631 3.63.75.75 0 001.472-.287 6.097 6.097 0 00-4.815-4.815z"/><path fill-rule="evenodd" d="M8.755 1.678A2.814 2.814 0 006.898 1h-3.09a2.815 2.815 0 00-2.66 1.911c-.125.37-.172.76-.137 1.15l.002.011a21.082 21.082 0 003.28 9.248c1.8 2.773 3.642 4.604 6.407 6.393a21.175 21.175 0 009.221 3.274l.014.002a2.815 2.815 0 002.829-1.671c.157-.359.237-.746.235-1.137v-.105c-.002-.539-.011-2.508 0-2.96a2.804 2.804 0 00-2.418-2.849h-.007c-.933-.123-1.85-.351-2.731-.68a2.815 2.815 0 00-2.965.632l-.9.899a15.726 15.726 0 01-5.124-5.112l.897-.895.003-.003a2.806 2.806 0 00.633-2.961 12.436 12.436 0 01-.68-2.726l-.001-.007a2.806 2.806 0 00-.951-1.736zM6.909 2.5A1.314 1.314 0 018.22 3.622c.138 1.042.394 2.066.762 3.05v.002a1.304 1.304 0 01-.293 1.377L7.382 9.356a.75.75 0 00-.122.902 17.226 17.226 0 006.466 6.454.75.75 0 00.9-.122l1.306-1.303.001-.002a1.313 1.313 0 011.384-.293h.001c.987.368 2.012.623 3.057.761a1.313 1.313 0 011.125 1.326c-.012.479-.003 2.48-.001 3.007v.101a1.305 1.305 0 01-.89 1.244c-.172.058-.353.08-.533.064a19.673 19.673 0 01-8.561-3.041c-2.59-1.676-4.28-3.357-5.963-5.951A19.582 19.582 0 012.505 3.92a1.303 1.303 0 01.776-1.308c.167-.074.347-.112.53-.112h3.098zm3.478 3.647v-.001l-.702.264.702-.263z" clip-rule="evenodd"/></g></svg>');
-}
-
-%phone-off-16-svg-prop {
-  --phone-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M4.401 1.5a.71.71 0 01.708.604c.1.753.285 1.493.55 2.205l.002.001a.703.703 0 01-.158.742l-.924.923a.75.75 0 001.06 1.061l.925-.924.003-.003a2.204 2.204 0 00.498-2.326 8.577 8.577 0 01-.47-1.88v-.007A2.204 2.204 0 004.39 0H2.206a2.21 2.21 0 00-2.09 1.501c-.098.29-.135.598-.107.903l.001.012a15.131 15.131 0 002.355 6.637.75.75 0 101.258-.817 13.631 13.631 0 01-2.12-5.972.702.702 0 01.419-.704c.09-.04.187-.06.286-.06H4.4zM4.91 12.15l-2.63 2.63a.75.75 0 01-1.06-1.06l12.5-12.5a.75.75 0 111.06 1.06L8.05 9.012c.403.334.84.632 1.312.92l.52-.519a2.209 2.209 0 012.327-.496l-.262.703.263-.703c.608.227 1.24.384 1.883.468l.007.001a2.209 2.209 0 011.9 2.239c-.009.315-.002 1.703 0 2.086v.075a2.204 2.204 0 01-2.407 2.205l-.014-.001a15.196 15.196 0 01-6.618-2.35c-.752-.487-1.426-.947-2.05-1.49zm2.075-2.074l-1.01 1.01c.517.44 1.098.84 1.801 1.295a13.696 13.696 0 005.957 2.117l-.005-.001-.068.747.081-.746h-.008a.71.71 0 00.767-.706v-.071c-.002-.372-.009-1.792 0-2.134a.704.704 0 00-.606-.715h.004l.098-.743-.105.743h.003a10.13 10.13 0 01-2.209-.55h-.002a.712.712 0 00-.746.158l.001-.002-.53-.531.527.534-.923.921a.75.75 0 01-.9.121c-.743-.421-1.461-.878-2.127-1.447z"/></g></svg>');
-}
-
-%phone-off-24-svg-prop {
-  --phone-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M6.91 2.5a1.314 1.314 0 011.31 1.122c.138 1.042.394 2.066.762 3.05v.002a1.304 1.304 0 01-.293 1.377L7.382 9.356a.75.75 0 101.06 1.062L9.75 9.11l.003-.003a2.807 2.807 0 00.633-2.962 12.438 12.438 0 01-.68-2.725l-.001-.007A2.806 2.806 0 006.898 1h-3.09a2.815 2.815 0 00-2.66 1.911c-.125.37-.172.76-.137 1.15l.002.011a21.081 21.081 0 003.28 9.248.75.75 0 101.259-.817A19.582 19.582 0 012.505 3.92a1.303 1.303 0 01.776-1.308c.167-.074.347-.112.53-.112h3.098zm3.477 3.646l-.702.264.702-.263zM7.666 17.395L2.28 22.78a.75.75 0 01-1.06-1.06l20.5-20.5a.75.75 0 111.06 1.06L11.673 13.388a15.738 15.738 0 002.305 1.73l.9-.899a2.813 2.813 0 012.965-.631c.882.328 1.798.556 2.731.678l.007.001a2.812 2.812 0 012.418 2.85c-.011.451-.002 2.42 0 2.96v.104a2.803 2.803 0 01-1.91 2.671c-.371.125-.764.172-1.154.137l-.013-.002a21.175 21.175 0 01-9.222-3.274c-1.144-.74-2.135-1.49-3.034-2.319zm2.945-2.945l-1.883 1.883c.814.745 1.722 1.432 2.787 2.12a19.673 19.673 0 008.56 3.042 1.315 1.315 0 001.315-.78c.073-.166.11-.346.11-.528l-.001-.1c-.002-.528-.011-2.53 0-3.008a1.305 1.305 0 00-1.124-1.326 14.007 14.007 0 01-3.057-.76h-.001a1.316 1.316 0 00-1.384.292l-.001.002-1.306 1.303a.75.75 0 01-.9.122 17.233 17.233 0 01-3.115-2.262z"/></g></svg>');
-}
-
-%pie-chart-16-svg-prop {
-  --pie-chart-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M7.75.05a.7.7 0 00-.7.7v7.5a.7.7 0 00.7.7h7.5a.7.7 0 00.7-.7 8.2 8.2 0 00-8.2-8.2zm.7 7.5V1.486a6.8 6.8 0 016.064 6.064H8.45z" clip-rule="evenodd"/><path d="M5.118 2.172A.75.75 0 004.452.828a8 8 0 1010.72 10.72.75.75 0 00-1.344-.666 6.5 6.5 0 11-8.71-8.71z"/></g></svg>');
-}
-
-%pie-chart-24-svg-prop {
-  --pie-chart-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M11.75 1a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h10.5a.75.75 0 00.75-.75A11.25 11.25 0 0011.75 1zm.75 10.5V2.529a9.751 9.751 0 018.971 8.971H12.5z" clip-rule="evenodd"/><path d="M8.08 3.344a.75.75 0 10-.62-1.366A11.002 11.002 0 001 12c0 6.075 4.925 11 11 11 4.457 0 8.294-2.65 10.022-6.46a.75.75 0 00-1.366-.619A9.502 9.502 0 0112 21.501 9.5 9.5 0 012.5 12a9.502 9.502 0 015.58-8.657z"/></g></svg>');
-}
-
-%pin-16-svg-prop {
-  --pin-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.121 1.4a1.25 1.25 0 011.76.008l3.707 3.708a1.25 1.25 0 010 1.768l-2.014 2.014a.75.75 0 01-.53.22h-1.16L9.452 10.55l-.248 2.231c-.103.924-1.16 1.435-1.945.88-.578-.409-1.458-1.052-2.18-1.68l-2.799 2.8a.75.75 0 01-1.06-1.061l2.799-2.8c-.628-.721-1.271-1.6-1.68-2.18-.555-.784-.044-1.841.88-1.944l2.23-.248 1.387-1.386V3.956a.75.75 0 01.225-.535L9.12 1.4zm.874 1.244L8.335 4.27v1.202a.75.75 0 01-.219.53L6.324 7.795a.75.75 0 01-.447.215l-2.053.228c.516.713 1.202 1.61 1.765 2.173s1.46 1.25 2.173 1.765l.228-2.053a.75.75 0 01.215-.447l1.838-1.839a.75.75 0 01.53-.22h1.16L13.351 6 9.995 2.644z" clip-rule="evenodd"/></svg>');
-}
-
-%pin-24-svg-prop {
-  --pin-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.614 3.482a1.75 1.75 0 012.464.012l4.425 4.425a1.75 1.75 0 010 2.475l-2.612 2.612a.75.75 0 01-.53.22h-1.634l-2.025 2.025-.275 2.48c-.144 1.295-1.622 2.005-2.713 1.218-.773-.559-1.768-1.309-2.573-2.026l-3.86 3.86a.75.75 0 11-1.061-1.06l3.86-3.861c-.717-.805-1.467-1.8-2.025-2.573-.788-1.09-.077-2.568 1.217-2.712l2.48-.276 1.964-1.963V6.643a.75.75 0 01.225-.535l2.673-2.626zm1.403 1.072a.25.25 0 00-.352-.001l-2.449 2.404V8.65a.75.75 0 01-.22.53l-2.369 2.369a.75.75 0 01-.447.215l-2.742.305c-.195.021-.257.218-.167.343.692.959 1.621 2.174 2.384 2.937.763.763 1.979 1.692 2.937 2.385.125.09.322.027.344-.168l.304-2.741a.75.75 0 01.216-.448l2.43-2.43a.75.75 0 01.53-.22h1.634l2.393-2.393a.25.25 0 000-.353l-4.426-4.426z" clip-rule="evenodd"/></svg>');
-}
-
-%play-16-svg-prop {
-  --play-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3 3.814C3 2.436 4.52 1.6 5.684 2.334l6.628 4.186a1.75 1.75 0 010 2.96l-6.628 4.185C4.52 14.401 3 13.564 3 12.185v-8.37zm1.883-.211a.25.25 0 00-.383.211v8.372a.25.25 0 00.383.211l6.628-4.186a.25.25 0 000-.422L4.884 3.603z" clip-rule="evenodd"/></svg>');
-}
-
-%play-24-svg-prop {
-  --play-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4 4.814C4 3.436 5.52 2.6 6.684 3.334l11.378 7.186a1.75 1.75 0 010 2.96L6.684 20.665C5.52 21.401 4 20.564 4 19.185V4.816zm1.883-.211a.25.25 0 00-.383.211v14.372a.25.25 0 00.383.211l11.378-7.186a.25.25 0 000-.422L5.884 4.603z" clip-rule="evenodd"/></svg>');
-}
-
-%play-circle-16-svg-prop {
-  --play-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M7.421 4.356A1.25 1.25 0 005.5 5.411v5.178a1.25 1.25 0 001.921 1.055l4.069-2.59a1.25 1.25 0 000-2.109L7.42 4.356zM10.353 8L7 10.134V5.866L10.353 8z"/><path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/></g></svg>');
-}
-
-%play-circle-24-svg-prop {
-  --play-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M10.712 6.143C9.548 5.377 8 6.213 8 7.605v8.79c0 1.393 1.548 2.228 2.712 1.462l6.68-4.395a1.75 1.75 0 000-2.924l-6.68-4.395zM9.5 7.605a.25.25 0 01.387-.209l6.681 4.395a.25.25 0 010 .418l-6.68 4.395a.25.25 0 01-.388-.209v-8.79z"/><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></g></svg>');
-}
-
-%play-fill-svg-prop {
-  @extend %play-circle-16-svg-prop;
-}
-
-%play-outline-svg-prop {
-  @extend %play-circle-16-svg-prop;
-}
-
-%play-plain-svg-prop {
-  @extend %play-16-svg-prop;
-}
-
-%plus-16-svg-prop {
-  --plus-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M9 3.5a.75.75 0 00-1.5 0V7H4a.75.75 0 000 1.5h3.5V12A.75.75 0 009 12V8.5h3.5a.75.75 0 000-1.5H9V3.5z"/></svg>');
-}
-
-%plus-24-svg-prop {
-  --plus-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M13 5a.75.75 0 00-1.5 0v6.5H5A.75.75 0 005 13h6.5v6.5a.75.75 0 001.5 0V13h6.5a.75.75 0 000-1.5H13V5z"/></svg>');
-}
-
-%plus-circle-16-svg-prop {
-  --plus-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 4a.75.75 0 01.75.75V7h2.25a.75.75 0 010 1.5H8.5v2.25a.75.75 0 01-1.5 0V8.5H4.75a.75.75 0 010-1.5H7V4.75A.75.75 0 017.75 4z"/><path fill-rule="evenodd" d="M0 7.75a7.75 7.75 0 1115.5 0 7.75 7.75 0 01-15.5 0zM7.75 1.5a6.25 6.25 0 100 12.5 6.25 6.25 0 000-12.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%plus-circle-24-svg-prop {
-  --plus-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 6.75a.75.75 0 01.75.75V11H16a.75.75 0 010 1.5h-3.5V16a.75.75 0 01-1.5 0v-3.5H7.5a.75.75 0 010-1.5H11V7.5a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M1 11.75C1 5.813 5.813 1 11.75 1S22.5 5.813 22.5 11.75 17.687 22.5 11.75 22.5 1 17.687 1 11.75zM11.75 2.5a9.25 9.25 0 100 18.5 9.25 9.25 0 000-18.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%plus-circle-fill-svg-prop {
-  @extend %plus-circle-16-svg-prop;
-}
-
-%plus-circle-outline-svg-prop {
-  @extend %plus-circle-16-svg-prop;
-}
-
-%plus-plain-svg-prop {
-  @extend %plus-16-svg-prop;
-}
-
-%plus-square-16-svg-prop {
-  --plus-square-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 4a.75.75 0 01.75.75V7h2.25a.75.75 0 010 1.5H8.5v2.25a.75.75 0 01-1.5 0V8.5H4.75a.75.75 0 010-1.5H7V4.75A.75.75 0 017.75 4z"/><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9A2.25 2.25 0 011 12.25v-9zm2.25-.75a.75.75 0 00-.75.75v9c0 .414.336.75.75.75h9a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9z" clip-rule="evenodd"/></g></svg>');
-}
-
-%plus-square-24-svg-prop {
-  --plus-square-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 6.75a.75.75 0 01.75.75V11H16a.75.75 0 010 1.5h-3.5V16a.75.75 0 01-1.5 0v-3.5H7.5a.75.75 0 010-1.5H11V7.5a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14a2.75 2.75 0 012.75 2.75v14a2.75 2.75 0 01-2.75 2.75h-14A2.75 2.75 0 012 18.75v-14zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v14c0 .69.56 1.25 1.25 1.25h14c.69 0 1.25-.56 1.25-1.25v-14c0-.69-.56-1.25-1.25-1.25h-14z" clip-rule="evenodd"/></g></svg>');
-}
-
-%plus-square-fill-svg-prop {
-  @extend %plus-square-16-svg-prop;
-}
-
-%port-svg-prop {
-  --port-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.35 3.00001C8.35 2.08874 9.08873 1.35001 10 1.35001H14C14.9113 1.35001 15.65 2.08874 15.65 3.00001V7.00001C15.65 7.91128 14.9113 8.65001 14 8.65001H12.5834C12.5836 8.66071 12.5836 8.67147 12.5833 8.68229L12.5329 10.7L21.35 10.7C21.709 10.7 22 10.991 22 11.35C22 11.709 21.709 12 21.35 12H17.5826C17.594 12.0482 17.6 12.0984 17.6 12.15V14.35H19C19.9113 14.35 20.65 15.0887 20.65 16V20C20.65 20.9113 19.9113 21.65 19 21.65H15C14.0887 21.65 13.35 20.9113 13.35 20V16C13.35 15.0887 14.0887 14.35 15 14.35H16.3V12.15C16.3 12.0984 16.306 12.0482 16.3174 12H12.012C11.96 12.012 11.9056 12.0176 11.8498 12.0162C11.8053 12.0151 11.762 12.0096 11.7202 12H7.58261C7.59398 12.0482 7.6 12.0984 7.6 12.15V14.35H9C9.91127 14.35 10.65 15.0887 10.65 16V20C10.65 20.9113 9.91127 21.65 9 21.65H5C4.08873 21.65 3.35 20.9113 3.35 20V16C3.35 15.0887 4.08873 14.35 5 14.35H6.3V12.15C6.3 12.0984 6.30602 12.0482 6.31739 12H2.65C2.29102 12 2 11.709 2 11.35C2 10.991 2.29101 10.7 2.65 10.7L11.2325 10.7L11.2838 8.65001H10C9.08873 8.65001 8.35 7.91128 8.35 7.00001V3.00001ZM10 2.65001C9.8067 2.65001 9.65 2.80671 9.65 3.00001V7.00001C9.65 7.19331 9.8067 7.35001 10 7.35001H14C14.1933 7.35001 14.35 7.19331 14.35 7.00001V3.00001C14.35 2.80671 14.1933 2.65001 14 2.65001H10ZM5 15.65C4.8067 15.65 4.65 15.8067 4.65 16V20C4.65 20.1933 4.8067 20.35 5 20.35H9C9.1933 20.35 9.35 20.1933 9.35 20V16C9.35 15.8067 9.1933 15.65 9 15.65H5ZM14.65 16C14.65 15.8067 14.8067 15.65 15 15.65H19C19.1933 15.65 19.35 15.8067 19.35 16V20C19.35 20.1933 19.1933 20.35 19 20.35H15C14.8067 20.35 14.65 20.1933 14.65 20V16Z" fill="%236F7682"/></svg>');
-}
-
-%power-16-svg-prop {
-  --power-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.5 1.25a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5z"/><path d="M3.548 3.825a.75.75 0 00-1.096-1.024 7.25 7.25 0 1010.596 0 .75.75 0 00-1.096 1.024 5.75 5.75 0 11-8.404 0z"/></g></svg>');
-}
-
-%power-24-svg-prop {
-  --power-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.5 2A.75.75 0 0011 2v10a.75.75 0 001.5 0V2z"/><path d="M5.562 7.293a.75.75 0 10-1.124-.992A9.716 9.716 0 002 12.75c0 5.385 4.365 9.75 9.75 9.75s9.75-4.365 9.75-9.75a9.716 9.716 0 00-2.438-6.45.75.75 0 10-1.124.993 8.25 8.25 0 11-12.375 0z"/></g></svg>');
-}
-
-%printer-16-svg-prop {
-  --printer-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 5H3V3.25A2.25 2.25 0 015.25 1h5.5A2.25 2.25 0 0113 3.25V5h.75A2.25 2.25 0 0116 7.25v3.5A2.25 2.25 0 0113.75 13H12.5v.25c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25V13H2.25A2.25 2.25 0 010 10.75v-3.5A2.25 2.25 0 012.25 5zm3-2.5a.75.75 0 00-.75.75V5h7V3.25a.75.75 0 00-.75-.75h-5.5zm-1.75 9V9.75c0-.69.56-1.25 1.25-1.25h6.5c.69 0 1.25.56 1.25 1.25v1.75h1.25a.75.75 0 00.75-.75v-3.5a.75.75 0 00-.75-.75H2.25a.75.75 0 00-.75.75v3.5c0 .414.336.75.75.75H3.5zM11 13H5v-3h6v3z" clip-rule="evenodd"/></svg>');
-}
-
-%printer-24-svg-prop {
-  --printer-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5 3.75V8H3.75A2.75 2.75 0 001 10.75v5.5A2.75 2.75 0 003.75 19H5v2.25c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0019 21.25V19h1.25A2.75 2.75 0 0023 16.25v-5.5A2.75 2.75 0 0020.25 8H19V3.75A2.75 2.75 0 0016.25 1h-8.5A2.75 2.75 0 005 3.75zM7.75 2.5c-.69 0-1.25.56-1.25 1.25V8h11V3.75c0-.69-.56-1.25-1.25-1.25h-8.5zM19 17.5h1.25c.69 0 1.25-.56 1.25-1.25v-5.5c0-.69-.56-1.25-1.25-1.25H3.75c-.69 0-1.25.56-1.25 1.25v5.5c0 .69.56 1.25 1.25 1.25H5v-2.75c0-.966.784-1.75 1.75-1.75h10.5c.966 0 1.75.784 1.75 1.75v2.75zM6.5 14.75a.25.25 0 01.25-.25h10.5a.25.25 0 01.25.25v6.5a.25.25 0 01-.25.25H6.75a.25.25 0 01-.25-.25v-6.5z" clip-rule="evenodd"/></svg>');
-}
-
-%protocol-svg-prop {
-  --protocol-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.8104 19.9978C11.9269 19.8258 12.0639 19.6117 12.212 19.3572C12.5111 18.8431 12.8544 18.1657 13.1663 17.3382C12.9879 17.3233 12.8084 17.3101 12.6278 17.2987C11.9536 17.2562 11.2715 17.2398 10.5929 17.2563C10.8669 18.1335 11.2168 19.0463 11.6554 19.9927C11.7069 19.9949 11.7586 19.9966 11.8104 19.9978ZM9.897 19.7207C9.55842 18.9089 9.28019 18.1195 9.05511 17.354C8.53381 17.4089 8.01993 17.4871 7.51892 17.5915C7.73118 18.0727 7.97418 18.5653 8.25086 19.0689C8.7684 19.344 9.31972 19.5638 9.897 19.7207ZM5.45938 16.6077C5.48104 16.6001 5.50273 16.5925 5.52445 16.585C4.46623 13.3833 4.62347 10.6454 5.21707 8.50224C5.09245 8.46738 4.97167 8.43251 4.85496 8.39777C4.30807 9.4804 4 10.7042 4 12C4 13.7156 4.54003 15.3051 5.45938 16.6077ZM5.69311 7.07772C5.69614 7.07856 5.69918 7.07939 5.70221 7.08023C5.70623 7.07039 5.71025 7.06056 5.71427 7.05076C5.7072 7.05973 5.70015 7.06872 5.69311 7.07772ZM8.96894 4.59417C8.93129 4.63447 8.8765 4.69478 8.80813 4.77455C8.66145 4.94568 8.45292 5.20563 8.21744 5.5491C7.8904 6.02611 7.51351 6.66107 7.17773 7.44022C7.68086 7.54828 8.21954 7.64986 8.78391 7.73875L8.79848 7.68326C9.18148 6.23496 9.70589 5.06597 10.1744 4.20925C9.75921 4.30615 9.35646 4.43539 8.96894 4.59417ZM12.0548 4.00018C11.938 4.17254 11.8005 4.38729 11.6519 4.64277C11.2113 5.40008 10.6747 6.5116 10.2841 7.93527C10.6414 7.97247 11.0048 8.00331 11.3722 8.02649C12.1215 8.07374 12.8805 8.08863 13.6336 8.06207C13.3315 6.79045 12.8705 5.435 12.2062 4.00261C12.1559 4.00133 12.1054 4.00052 12.0548 4.00018ZM15.0311 19.4058C14.5954 19.5843 14.1406 19.7255 13.6705 19.8253C14.0078 19.2125 14.3757 18.4365 14.6998 17.5098C15.227 17.5833 15.7354 17.6688 16.2175 17.7617C16.0682 18.019 15.9209 18.2491 15.7826 18.4509C15.5471 18.7944 15.3386 19.0543 15.1919 19.2255C15.1235 19.3052 15.0687 19.3655 15.0311 19.4058ZM18.4508 16.7325C19.4247 15.4072 20 13.7708 20 12C20 10.7332 19.7056 9.53525 19.1814 8.47072C19.0626 8.52056 18.9428 8.56843 18.8221 8.61438C19.5339 11.495 19.2703 13.9558 18.6676 15.8898C18.5781 16.1768 18.4814 16.4516 18.3797 16.7138C18.4035 16.72 18.4272 16.7262 18.4508 16.7325ZM15.7491 4.93109C16.2637 5.8677 16.6617 6.76614 16.9623 7.6241C16.3749 7.76946 15.7668 7.87585 15.147 7.94868C14.8822 6.77294 14.493 5.53469 13.9502 4.23938C14.5831 4.39792 15.1861 4.63186 15.7491 4.93109ZM6.67301 8.86539C7.23389 8.98964 7.83778 9.10647 8.47251 9.20809C8.16114 11.101 8.13055 13.3457 8.68042 15.8864C8.10403 15.9541 7.53135 16.0491 6.96921 16.176C5.97706 13.2159 6.14482 10.7469 6.67301 8.86539ZM9.9596 9.4091C9.66322 11.1785 9.63171 13.3152 10.1908 15.7687C11.047 15.7336 11.8982 15.7497 12.7222 15.8017C13.0281 15.8209 13.3313 15.8453 13.6308 15.8739C14.0706 14.1822 14.3018 12.0541 13.9234 9.55152C13.0288 9.59288 12.1384 9.57779 11.2778 9.52351C10.8317 9.49538 10.3912 9.45656 9.9596 9.4091ZM16.9025 16.3689C16.3454 16.2539 15.7517 16.1474 15.1319 16.0564C15.5821 14.232 15.7965 12.0001 15.4213 9.42649C16.0858 9.3447 16.7447 9.22621 17.3877 9.06387C18.0053 11.6354 17.7519 13.7864 17.2355 15.4435C17.1337 15.7703 17.0212 16.0789 16.9025 16.3689Z" fill="%236F7682"/></svg>');
-}
-
-%provider-16-svg-prop {
-  --provider-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm-.5 1.519a6.464 6.464 0 00-2 .48V5.19l2-1.09V1.518zM1.532 7.356A6.491 6.491 0 014 2.876V6.01L1.532 7.356zm.05 1.68L4 7.719v5.406a6.495 6.495 0 01-2.418-4.087zM7.5 11.423l-2 1.143V6.9l2-1.091v5.613zm1.5-.857V4.991L11 3.9v5.522l-2 1.143zm2 .585l-2 1.143v2.13a6.456 6.456 0 002-.655V11.15zm1.5 1.54v-2.397l1.887-1.079A6.488 6.488 0 0112.5 12.69zm0-4.125V3.31a6.482 6.482 0 011.976 4.126L12.5 8.565zm-5 4.585l-1.697.97a6.47 6.47 0 001.697.361V13.15zM9 3.282V1.576a6.455 6.455 0 011.961.636L9 3.282z" clip-rule="evenodd"/></svg>');
-}
-
-%provider-24-svg-prop {
-  --provider-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm-1 1.552a9.438 9.438 0 00-3.5 1.08v4.085L11 5.85V2.552zm-8.349 7.75A9.493 9.493 0 016 4.635v3.883l-3.349 1.786zm-.15 1.781L6 10.217v9.149a9.481 9.481 0 01-3.5-7.283zM11 17.02l-3.5 2.032V9.417L11 7.55v9.47zm1.5-.871V6.75L16 4.883v9.234l-3.5 2.032zm3.5-.298l-3.5 2.033v3.603a9.449 9.449 0 003.5-.868v-4.768zm1.5 3.896V14.98l3.977-2.309a9.491 9.491 0 01-3.977 7.076zm0-6.501V4.253a9.494 9.494 0 013.943 6.703l-3.943 2.29zM11 18.754l-3.117 1.81c.96.463 2.01.768 3.117.884v-2.694zM12.5 5.05V2.513c1.168.06 2.28.332 3.3.777l-3.3 1.76z" clip-rule="evenodd"/></svg>');
-}
-
-%provider-svg-prop {
-  @extend %provider-16-svg-prop;
-}
-
-%public-default-svg-prop {
-  @extend %globe-16-svg-prop;
-}
-
-%public-locked-svg-prop {
-  @extend %globe-private-16-svg-prop;
-}
-
-%queue-16-svg-prop {
-  --queue-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.23 2.674a.75.75 0 00-.96 1.152L3.578 5.75 1.27 7.674a.75.75 0 00.96 1.152l3-2.5a.75.75 0 000-1.152l-3-2.5zM8.25 5a.75.75 0 000 1.5h6a.75.75 0 000-1.5h-6zM5.5 9.25a.75.75 0 01.75-.75h8a.75.75 0 010 1.5h-8a.75.75 0 01-.75-.75zM6.25 12a.75.75 0 000 1.5h8a.75.75 0 000-1.5h-8z"/></g></svg>');
-}
-
-%queue-24-svg-prop {
-  --queue-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.19 3.892a.75.75 0 10-.88 1.216L5.97 7.75l-3.66 2.642a.75.75 0 00.88 1.216l4.5-3.25a.75.75 0 000-1.216l-4.5-3.25zM11.75 7a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM8 12.75a.75.75 0 01.75-.75h12.5a.75.75 0 010 1.5H8.75a.75.75 0 01-.75-.75zM8.75 17a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H8.75z"/></g></svg>');
-}
-
-%queue-svg-prop {
-  @extend %queue-16-svg-prop;
-}
-
-%radio-16-svg-prop {
-  --radio-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.41 2.476a.75.75 0 01-.013 1.06A6.235 6.235 0 001.5 8c0 1.67.68 3.276 1.897 4.463a.75.75 0 01-1.048 1.074A7.735 7.735 0 010 8c0-2.08.847-4.072 2.35-5.537a.75.75 0 011.06.013zM12.59 2.476a.75.75 0 011.06-.013A7.735 7.735 0 0116 8c0 2.08-.847 4.072-2.35 5.537a.75.75 0 01-1.047-1.074A6.234 6.234 0 0014.5 8c0-1.67-.68-3.276-1.897-4.463a.75.75 0 01-.013-1.06zM7 8a1 1 0 011-1h.01a1 1 0 010 2H8a1 1 0 01-1-1z"/><path d="M5.864 6.046a.75.75 0 10-1.028-1.092c-.42.395-.756.867-.987 1.39a4.1 4.1 0 000 3.307c.23.523.567.994.987 1.39a.75.75 0 001.028-1.093 2.774 2.774 0 01-.642-.902 2.6 2.6 0 010-2.098c.147-.334.365-.641.642-.902zM11.164 4.96a.75.75 0 10-1.028 1.092c.277.26.495.567.642.902a2.601 2.601 0 010 2.098 2.775 2.775 0 01-.642.902.75.75 0 101.028 1.092c.42-.395.756-.866.986-1.39a4.1 4.1 0 000-3.307 4.273 4.273 0 00-.986-1.39z"/></g></svg>');
-}
-
-%radio-24-svg-prop {
-  --radio-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5.282 4.22a.75.75 0 010 1.06 9.502 9.502 0 000 13.436.75.75 0 01-1.06 1.06 11.002 11.002 0 010-15.556.75.75 0 011.06 0zM18.718 4.22a.75.75 0 011.06 0 11.002 11.002 0 010 15.557.75.75 0 11-1.06-1.06 9.502 9.502 0 000-13.437.75.75 0 010-1.06z"/><path fill-rule="evenodd" d="M9 12a3 3 0 116 0 3 3 0 01-6 0zm3-1.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd"/><path d="M8.117 8.026A.75.75 0 107.05 6.974a7.11 7.11 0 00-1.517 2.305 7.194 7.194 0 000 5.432 7.11 7.11 0 001.517 2.305.75.75 0 001.068-1.053 5.611 5.611 0 01-1.196-1.819 5.694 5.694 0 010-4.299 5.61 5.61 0 011.196-1.819zM16.951 6.984a.75.75 0 10-1.069 1.053c.513.52.92 1.138 1.197 1.819a5.693 5.693 0 010 4.299 5.612 5.612 0 01-1.197 1.819.75.75 0 001.07 1.052 7.11 7.11 0 001.516-2.305 7.194 7.194 0 000-5.432 7.11 7.11 0 00-1.517-2.305z"/></g></svg>');
-}
-
-%radio-button-checked-svg-prop {
-  @extend %circle-dot-16-svg-prop;
-}
-
-%radio-button-unchecked-svg-prop {
-  @extend %circle-16-svg-prop;
-}
-
-%random-16-svg-prop {
-  --random-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5 4a1 1 0 000 2h.01a1 1 0 000-2H5zM7 8a1 1 0 011-1h.01a1 1 0 010 2H8a1 1 0 01-1-1zM11.01 10a1 1 0 100 2h.01a1 1 0 100-2h-.01z"/><path fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zM2.5 3.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%random-24-svg-prop {
-  --random-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 9.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM11 12a1 1 0 112 0 1 1 0 01-2 0zM5 7.5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0zm2.5-1a1 1 0 100 2 1 1 0 000-2zM16.5 14a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm-1 2.5a1 1 0 112 0 1 1 0 01-2 0z"/><path d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V4.75z"/></g></svg>');
-}
-
-%random-svg-prop {
-  @extend %random-16-svg-prop;
-}
-
-%redirect-16-svg-prop {
-  --redirect-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 3.517a1 1 0 011.62-.784l5.348 4.233a1 1 0 010 1.568L9.62 12.767A1 1 0 018 11.983v-1.545c-.76-.043-1.484.003-2.254.218-.994.279-2.118.857-3.507 1.99a.993.993 0 01-1.128.096.962.962 0 01-.445-1.099c.415-1.5 1.425-3.141 2.808-4.412C4.69 6.114 6.244 5.241 8 5.042V3.517zm1.5 1.034v1.2a.75.75 0 01-.75.75c-1.586 0-3.067.738-4.261 1.835a8.996 8.996 0 00-1.635 2.014c.878-.552 1.695-.916 2.488-1.138 1.247-.35 2.377-.33 3.49-.207a.75.75 0 01.668.745v1.2l4.042-3.2L9.5 4.55z" clip-rule="evenodd"/></svg>');
-}
-
-%redirect-24-svg-prop {
-  --redirect-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 5.786c0-1.046 1.209-1.63 2.028-.978l7.45 5.922c.627.498.63 1.45.005 1.952l-7.45 5.997c-.817.659-2.033.077-2.033-.973v-2.754a7.316 7.316 0 00-2.824.427c-1.306.456-2.918 1.342-5.295 2.981-.436.3-.973.287-1.37.029a1.168 1.168 0 01-.479-1.326c.591-2 1.91-4.124 3.743-5.755C7.444 9.824 9.571 8.72 12 8.529V5.786zm1.5.518V9.25a.75.75 0 01-.75.75c-2.296 0-4.35.98-5.978 2.428-1.36 1.21-2.393 2.723-2.994 4.189 2.031-1.357 3.565-2.187 4.903-2.654 1.53-.535 2.769-.584 4.137-.46a.75.75 0 01.682.747v2.933l6.8-5.473-6.8-5.406z" clip-rule="evenodd"/></svg>');
-}
-
-%redirect-svg-prop {
-  @extend %redirect-16-svg-prop;
-}
-
-%refresh-alert-svg-prop {
-  @extend %sync-alert-16-svg-prop;
-}
-
-%refresh-default-svg-prop {
-  @extend %sync-16-svg-prop;
-}
-
-%reload-16-svg-prop {
-  --reload-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M7.248 1.307A.75.75 0 118.252.193l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.004-1.114l1.29-1.161a4.5 4.5 0 103.655 2.832.75.75 0 111.398-.546A6 6 0 118.018 2l-.77-.693z"/></svg>');
-}
-
-%reload-24-svg-prop {
-  --reload-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M11.24 1.3A.75.75 0 1112.26.2l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.217-2.059a7.5 7.5 0 105.532 4.632.75.75 0 111.397-.546 9 9 0 11-7.237-5.654L11.24 1.3z"/></svg>');
-}
-
-%remix-svg-prop {
-  @extend %shuffle-16-svg-prop;
-}
-
-%repeat-16-svg-prop {
-  --repeat-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.238.68a.75.75 0 10-.976 1.14l1.96 1.68H4.418A3.417 3.417 0 001 6.917v.833a.75.75 0 001.5 0v-.833A1.917 1.917 0 014.417 5h7.806l-1.961 1.68a.75.75 0 00.976 1.14l3.5-3a.75.75 0 000-1.14l-3.5-3z"/><path d="M5.82 8.262a.75.75 0 01-.082 1.057L3.778 11h7.805A1.916 1.916 0 0013.5 9.083V8.25a.75.75 0 011.5 0v.833a3.417 3.417 0 01-3.417 3.417H3.777l1.961 1.68a.75.75 0 11-.976 1.14l-3.5-3a.75.75 0 010-1.14l3.5-3a.75.75 0 011.057.082z"/></g></svg>');
-}
-
-%repeat-24-svg-prop {
-  --repeat-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M17.515.455a.75.75 0 00-1.03 1.09L19.614 4.5H6.75A4.75 4.75 0 002 9.25v2a.75.75 0 001.5 0v-2A3.25 3.25 0 016.75 6h12.864l-3.129 2.955a.75.75 0 001.03 1.09l4.5-4.25a.75.75 0 000-1.09l-4.5-4.25zM8.045 13.985a.75.75 0 01-.03 1.06L4.886 18H17.25a3.25 3.25 0 003.25-3.25v-2a.75.75 0 011.5 0v2a4.75 4.75 0 01-4.75 4.75H4.886l3.129 2.955a.75.75 0 01-1.03 1.09l-4.5-4.25a.75.75 0 010-1.09l4.5-4.25a.75.75 0 011.06.03z"/></g></svg>');
-}
-
-%replication-direct-16-svg-prop {
-  --replication-direct-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M0 2.25A2.25 2.25 0 012.25 0h6.5A2.25 2.25 0 0111 2.25v8a.75.75 0 01-.75.75h-8A2.25 2.25 0 010 8.75v-6.5zm2.25-.75a.75.75 0 00-.75.75v6.5c0 .414.336.75.75.75H9.5V2.25a.75.75 0 00-.75-.75h-6.5z" clip-rule="evenodd"/><path d="M12.75 3.55a.7.7 0 01.7.7v8c0 .657-.53 1.2-1.197 1.2H4.25a.7.7 0 110-1.4h7.8v-7.8a.7.7 0 01.7-.7z"/><path d="M15.95 6.75a.7.7 0 00-1.4 0v6.5c0 .718-.581 1.3-1.299 1.3h-6.5a.7.7 0 10-.001 1.4h6.501a2.699 2.699 0 002.699-2.7v-6.5z"/></g></svg>');
-}
-
-%replication-direct-24-svg-prop {
-  --replication-direct-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M1 3.75A2.75 2.75 0 013.75 1h10.5A2.75 2.75 0 0117 3.75v12.5a.75.75 0 01-.75.75H3.75A2.75 2.75 0 011 14.25V3.75zM3.75 2.5c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25H15.5V3.75c0-.69-.56-1.25-1.25-1.25H3.75z" clip-rule="evenodd"/><path d="M19.25 6a.75.75 0 01.75.75v11.5c0 .964-.778 1.75-1.747 1.75H6.75a.75.75 0 010-1.5h11.503c.135 0 .247-.11.247-.25V6.75a.75.75 0 01.75-.75z"/><path d="M23 9.75a.75.75 0 00-1.5 0v9.5a2.248 2.248 0 01-2.248 2.25H9.75a.75.75 0 000 1.5h9.502A3.748 3.748 0 0023 19.25v-9.5z"/></g></svg>');
-}
-
-%replication-perf-16-svg-prop {
-  --replication-perf-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h6.5A2.25 2.25 0 0112 3.25v1.104a.71.71 0 01.078.067l.667.667A.7.7 0 0112 6.237v1.45a.71.71 0 01.078.068l1.75 1.75a.7.7 0 01-.99.99L12 9.656v.094c0 .417-.113.807-.31 1.141.142.022.279.088.388.197l2.667 2.667a.7.7 0 11-.99.99l-2.667-2.667a.697.697 0 01-.197-.389c-.334.198-.724.311-1.141.311h-.093l.338.338a.7.7 0 01-.99.99l-1.25-1.25A.71.71 0 017.687 12H6.323l1.755 1.755a.7.7 0 11-.99.99l-2.666-2.667A.71.71 0 014.354 12H3.25A2.25 2.25 0 011 9.75v-6.5zm2.25-.75a.75.75 0 00-.75.75v6.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-6.5a.75.75 0 00-.75-.75h-6.5z" clip-rule="evenodd"/><path d="M11.495 13.838a.7.7 0 00-.99.99l.583.584a.7.7 0 00.99-.99l-.583-.584zM15.345 11.021a.7.7 0 00-.99.99l.067.067a.7.7 0 00.99-.99l-.067-.067zM13.375 6.705a.7.7 0 01.99 0l.833.833a.7.7 0 01-.99.99l-.833-.833a.7.7 0 010-.99z"/></g></svg>');
-}
-
-%replication-perf-24-svg-prop {
-  --replication-perf-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h10.5A2.75 2.75 0 0118 4.75v2.19l.78.78A.75.75 0 0118 8.957v2.982l2.78 2.78a.75.75 0 11-1.06 1.061L18 14.06v1.19c0 .495-.13.959-.36 1.36.05.03.097.067.14.11l4 4a.75.75 0 11-1.06 1.06l-4-4a.751.751 0 01-.11-.14c-.401.23-.865.36-1.36.36h-1.19l.72.72a.75.75 0 11-1.06 1.06L11.94 18H9.06l2.72 2.72a.75.75 0 11-1.06 1.06L6.94 18H4.75A2.75 2.75 0 012 15.25V4.75zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"/><path d="M16.78 20.72a.75.75 0 10-1.06 1.06l1 1a.75.75 0 101.06-1.06l-1-1zM22.68 16.62a.75.75 0 00-1.06 1.06l.1.1a.75.75 0 001.06-1.06l-.1-.1zM19.72 9.72a.75.75 0 011.06 0l1 1a.75.75 0 11-1.06 1.06l-1-1a.75.75 0 010-1.06z"/></g></svg>');
-}
-
-%rewind-16-svg-prop {
-  --rewind-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.074 3.364A1.25 1.25 0 019 4.416v1.806l4.039-2.795A1.25 1.25 0 0115 4.454v7.092a1.25 1.25 0 01-1.961 1.027L9 9.778v1.806a1.25 1.25 0 01-1.926 1.051L1.5 9.051a1.25 1.25 0 010-2.103l5.575-3.584zM2.637 8L7.5 11.126V4.874L2.637 8zm6.43 0l4.433 3.069V4.93L9.068 8z" clip-rule="evenodd"/></svg>');
-}
-
-%rewind-24-svg-prop {
-  --rewind-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.188 5.38C11.34 4.501 13 5.322 13 6.771v3.332l6.188-4.723C20.34 4.501 22 5.322 22 6.771V17.23c0 1.449-1.66 2.27-2.812 1.391L13 13.898v3.331c0 1.449-1.66 2.27-2.812 1.391l-6.851-5.229a1.75 1.75 0 010-2.782l6.851-5.229zM11.5 6.771a.25.25 0 00-.402-.198L4.247 11.8a.25.25 0 000 .398l6.851 5.229a.25.25 0 00.402-.199V6.771zm9 0a.25.25 0 00-.402-.198l-7.061 5.389v.077l7.061 5.389a.25.25 0 00.402-.199V6.771z" clip-rule="evenodd"/></svg>');
-}
-
-%ribbon-svg-prop {
-  @extend %award-16-svg-prop;
-}
-
-%rocket-16-svg-prop {
-  --rocket-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.78 7.28a.75.75 0 00-1.06-1.06l-.5.5a.75.75 0 001.06 1.06l.5-.5z"/><path fill-rule="evenodd" d="M12.627 1.32a1.731 1.731 0 012.054 2.053c-.27 1.28-.686 3.19-1.103 4.859a3.625 3.625 0 01-.58 1.224c.002.015.002.03.002.044v2.441a1.75 1.75 0 01-.833 1.49l-2.021 1.244a1.75 1.75 0 01-2.284-.397l-1.27-1.587a2.028 2.028 0 01-1.08-.917 3.426 3.426 0 00-.542-.744 3.428 3.428 0 00-.744-.542c-.4-.223-.755-.61-.917-1.08l-1.587-1.27a1.75 1.75 0 01-.398-2.284l1.244-2.021A1.75 1.75 0 014.058 3H6.5l.044.001c.37-.263.777-.467 1.224-.579 1.669-.417 3.58-.833 4.859-1.103zm-5.43 9.956a.754.754 0 00-.167-.025.517.517 0 01-.209-.208 4.913 4.913 0 00-.79-1.073 4.913 4.913 0 00-1.074-.791.516.516 0 01-.208-.21.754.754 0 00-.025-.166l.002-.008c.255-.78.694-1.941 1.307-2.958.634-1.05 1.353-1.773 2.099-1.96 1.641-.41 3.53-.821 4.804-1.09a.231.231 0 01.277.277c-.269 1.274-.68 3.163-1.09 4.804-.187.746-.91 1.465-1.96 2.099-1.017.613-2.177 1.052-2.958 1.307a.173.173 0 01-.008.002zm1.139 1.193l.697.872a.25.25 0 00.327.057l2.021-1.244a.25.25 0 00.119-.213v-1.056c-.186.13-.375.252-.562.366-.88.53-1.832.936-2.602 1.218zM2.659 6.967l.872.697c.282-.77.687-1.722 1.218-2.602.113-.187.235-.376.366-.562H4.059a.25.25 0 00-.213.119L2.602 6.64a.25.25 0 00.057.327z" clip-rule="evenodd"/><path d="M4.442 11.558a.625.625 0 010 .884l-2 2a.625.625 0 11-.884-.884l2-2a.625.625 0 01.884 0zM2.692 10.308a.625.625 0 010 .884l-.75.75a.625.625 0 11-.884-.884l.75-.75a.625.625 0 01.884 0zM5.692 14.192a.625.625 0 10-.884-.884l-.75.75a.625.625 0 10.884.884l.75-.75z"/></g></svg>');
-}
-
-%rocket-24-svg-prop {
-  --rocket-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.78 10.28a.75.75 0 10-1.06-1.06l-.5.5a.75.75 0 101.06 1.06l.5-.5z"/><path fill-rule="evenodd" d="M19.63 2.317a1.733 1.733 0 012.053 2.053c-.38 1.827-1.07 5.047-1.76 7.812-.182.723-.542 1.377-1.012 1.964l-.002.015-.457 3.198a1.75 1.75 0 01-.658 1.133l-3.516 2.736a1.75 1.75 0 01-2.456-.307l-1.783-2.293a1.932 1.932 0 01-1.129-.982c-.24-.486-.59-1.07-1.037-1.518-.448-.448-1.033-.799-1.52-1.038a1.932 1.932 0 01-.98-1.129l-2.294-1.783a1.75 1.75 0 01-.307-2.456l2.735-3.517a1.75 1.75 0 011.134-.658l3.197-.456.016-.002c.587-.47 1.24-.83 1.964-1.011 2.765-.691 5.986-1.381 7.812-1.761zM8.234 6.835l-1.38.197a.25.25 0 00-.163.094l-2.735 3.517a.25.25 0 00.044.35l1.6 1.245c.38-1.121.982-2.674 1.813-4.124.247-.43.52-.863.821-1.279zm7.652 9.752c.43-.247.863-.52 1.279-.821l-.197 1.38a.25.25 0 01-.095.162l-3.516 2.736a.25.25 0 01-.351-.044l-1.245-1.6c1.122-.38 2.675-.982 4.125-1.813zm4.329-12.523a.234.234 0 00-.28-.279c-1.821.38-5.018 1.064-7.753 1.748-1.32.33-2.498 1.636-3.467 3.327-.946 1.65-1.586 3.476-1.911 4.53a.22.22 0 00.02.17c.034.069.1.14.192.184.556.274 1.305.71 1.917 1.323.613.612 1.049 1.36 1.323 1.917a.425.425 0 00.185.192.22.22 0 00.169.02c1.054-.325 2.88-.965 4.53-1.91 1.691-.97 2.997-2.148 3.327-3.468.684-2.735 1.369-5.932 1.748-7.754z" clip-rule="evenodd"/><path d="M4.03 15.97a.75.75 0 010 1.06l-1 1a.75.75 0 01-1.06-1.06l1-1a.75.75 0 011.06 0zM6.53 17.47a.75.75 0 010 1.06l-3 3a.75.75 0 01-1.06-1.06l3-3a.75.75 0 011.06 0zM8.03 21.03a.75.75 0 10-1.06-1.06l-1 1a.75.75 0 101.06 1.06l1-1z"/></g></svg>');
-}
-
-%rotate-ccw-16-svg-prop {
-  --rotate-ccw-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M2 .75a.75.75 0 011.5 0v1.888A7 7 0 111 8a.75.75 0 011.5 0 5.5 5.5 0 101.725-4H6.75a.75.75 0 010 1.5h-4A.75.75 0 012 4.75v-4z"/></svg>');
-}
-
-%rotate-ccw-24-svg-prop {
-  --rotate-ccw-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M3 1.75a.75.75 0 011.5 0v3.636A9.977 9.977 0 0112 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12a.75.75 0 011.5 0 8.5 8.5 0 102.019-5.5H9.25a.75.75 0 010 1.5h-5.5A.75.75 0 013 7.25v-5.5z"/></svg>');
-}
-
-%rotate-cw-16-svg-prop {
-  --rotate-cw-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M14 .75a.75.75 0 00-1.5 0v1.888A7 7 0 1015 8a.75.75 0 00-1.5 0 5.5 5.5 0 11-1.725-4H9.25a.75.75 0 000 1.5h4a.75.75 0 00.75-.75v-4z"/></svg>');
-}
-
-%rotate-cw-24-svg-prop {
-  --rotate-cw-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M21 1.75a.75.75 0 00-1.5 0v3.636A9.977 9.977 0 0012 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10a.75.75 0 00-1.5 0 8.5 8.5 0 11-2.019-5.5H14.75a.75.75 0 000 1.5h5.5a.75.75 0 00.75-.75v-5.5z"/></svg>');
-}
-
-%rss-16-svg-prop {
-  --rss-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.75 1a.75.75 0 000 1.5A10.75 10.75 0 0113.5 13.25a.75.75 0 001.5 0A12.25 12.25 0 002.75 1z"/><path d="M2.75 6a.75.75 0 000 1.5 5.75 5.75 0 015.75 5.75.75.75 0 001.5 0A7.25 7.25 0 002.75 6zM3.5 11a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"/></g></svg>');
-}
-
-%rss-24-svg-prop {
-  --rss-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 3a.75.75 0 000 1.5A15.75 15.75 0 0119.5 20.25a.75.75 0 001.5 0A17.25 17.25 0 003.75 3z"/><path d="M3.75 10a.75.75 0 000 1.5 8.75 8.75 0 018.75 8.75.75.75 0 001.5 0A10.25 10.25 0 003.75 10zM5 17a2 2 0 100 4 2 2 0 000-4z"/></g></svg>');
-}
-
-%run-svg-prop {
-  --run-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" class="structure-icon-run"><style>.structure-icon-run {animation: structure-icon-run-simple-spin 1s infinite linear;}.structure-icon-run-progress {animation: structure-icon-run-fancy-spin 3s infinite linear;fill: transparent;opacity: 0.66;stroke-dasharray: 16 16;transform-origin: 50% 50%;}@keyframes structure-icon-run-fancy-spin {0% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}50% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}100% {stroke-dasharray: 4 32;}}@keyframes structure-icon-run-simple-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="8" stroke="%23000" stroke-width="4"/><circle cx="12" cy="12" r="5" stroke="%23000" stroke-width="2" class="structure-icon-run-progress"/><circle cx="12" cy="12" r="4" fill="currentColor"/></g></svg>');
-}
-
-%save-16-svg-prop {
-  --save-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h6.879a2.25 2.25 0 011.59.659l2.622 2.621c.422.422.659.995.659 1.591v6.879A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h.8V9.25a1.2 1.2 0 011.2-1.2h5.5a1.2 1.2 0 011.2 1.2v4.25h.8a.75.75 0 00.75-.75V5.871a.75.75 0 00-.22-.53L10.66 2.72a.75.75 0 00-.53-.22H5.45v2.05h3.8a.7.7 0 010 1.4h-4a1.2 1.2 0 01-1.2-1.2V2.5h-.8zm7.3 11h-5.1V9.45h5.1v4.05z" clip-rule="evenodd"/></svg>');
-}
-
-%save-24-svg-prop {
-  --save-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V9.078c0-.729-.29-1.428-.805-1.944l-4.329-4.329A2.75 2.75 0 0014.922 2H4.75zm0 1.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25H6v-6.75c0-.966.784-1.75 1.75-1.75h8.5c.966 0 1.75.784 1.75 1.75v6.75h1.25c.69 0 1.25-.56 1.25-1.25V9.078c0-.331-.132-.649-.366-.883l-4.329-4.329a1.25 1.25 0 00-.883-.366H7.5v3.75c0 .138.112.25.25.25h7.5a.75.75 0 010 1.5h-7.5A1.75 1.75 0 016 7.25V3.5H4.75zM7.5 13.75v6.75h9v-6.75a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25z" clip-rule="evenodd"/></svg>');
-}
-
-%scissors-16-svg-prop {
-  --scissors-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1 4a3 3 0 115.585 1.524L8 6.94l4.803-4.803a.75.75 0 011.06 1.06L8.539 8.523a.678.678 0 01-.016.016l-1.937 1.938a3 3 0 11-1.06-1.06L6.938 8 5.524 6.585A3 3 0 011 4zm3-1.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm0 8a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd"/><path d="M9.116 9.123a.75.75 0 011.06 0l3.687 3.68a.75.75 0 11-1.06 1.061l-3.686-3.68a.75.75 0 01-.001-1.06z"/></g></svg>');
-}
-
-%scissors-24-svg-prop {
-  --scissors-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M5.5 2a3.5 3.5 0 101.99 6.38l3.346 3.12-3.346 3.12a3.5 3.5 0 101.023 1.097l3.93-3.664.009-.008 8.31-7.746A.75.75 0 0019.739 3.2l-7.803 7.274-3.424-3.192A3.5 3.5 0 005.5 2zm-2 3.5a2 2 0 114 0 2 2 0 01-4 0zm0 12a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/><path d="M20.763 18.703a.75.75 0 01-1.026 1.095l-5.5-5.15a.75.75 0 011.026-1.095l5.5 5.15z"/></g></svg>');
-}
-
-%search-16-svg-prop {
-  --search-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z" clip-rule="evenodd"/></svg>');
-}
-
-%search-24-svg-prop {
-  --search-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.5 2a8.5 8.5 0 105.457 15.017l4.763 4.763a.75.75 0 101.06-1.06l-4.763-4.763A8.5 8.5 0 0010.5 2zm-7 8.5a7 7 0 1114 0 7 7 0 01-14 0z" clip-rule="evenodd"/></svg>');
-}
-
-%search-color-svg-prop {
-  --search-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%231563ff"/></svg>');
-}
-
-%search-svg-prop {
-  @extend %search-16-svg-prop;
-}
-
-%send-16-svg-prop {
-  --send-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M15.08 2.526c.368-1.001-.605-1.974-1.606-1.605L1.878 5.193a1.25 1.25 0 00-.295 2.19l4.07 2.907a.25.25 0 01.057.058l2.907 4.069a1.25 1.25 0 002.19-.295l4.272-11.596zM2.84 6.437l10.645-3.922L9.563 13.16l-2.39-3.344 3.072-3.071a.7.7 0 10-.99-.99L6.184 8.826 2.84 6.437z" clip-rule="evenodd"/></svg>');
-}
-
-%send-24-svg-prop {
-  --send-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M21.205 5.042c.516-1.4-.846-2.763-2.247-2.247L3.264 8.577c-1.318.486-1.555 2.25-.412 3.066l5.51 3.936a.252.252 0 01.059.058l3.936 5.51c.817 1.144 2.58.907 3.066-.411l5.782-15.694zm-1.729-.84a.25.25 0 01.321.322l-5.782 15.693a.25.25 0 01-.438.059l-3.663-5.13L15.53 9.53a.75.75 0 00-1.06-1.06l-5.617 5.616-5.129-3.663a.25.25 0 01.059-.438l15.693-5.782z" clip-rule="evenodd"/></svg>');
-}
-
-%server-16-svg-prop {
-  --server-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3 3.25a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 3.25z"/><path fill-rule="evenodd" d="M2.25 0A2.25 2.25 0 000 2.25v2.5A2.25 2.25 0 002.25 7h11.5A2.25 2.25 0 0016 4.75v-2.5A2.25 2.25 0 0013.75 0H2.25zM1.5 2.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-2.5z" clip-rule="evenodd"/><path d="M3.75 11.5a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/><path fill-rule="evenodd" d="M2.25 9A2.25 2.25 0 000 11.25v2.5A2.25 2.25 0 002.25 16h11.5A2.25 2.25 0 0016 13.75v-2.5A2.25 2.25 0 0013.75 9H2.25zm-.75 2.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-2.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%server-24-svg-prop {
-  --server-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5 5.75A.75.75 0 015.75 5h.5a.75.75 0 010 1.5h-.5A.75.75 0 015 5.75z"/><path fill-rule="evenodd" d="M3.75 1A2.75 2.75 0 001 3.75v4.5A2.75 2.75 0 003.75 11h16.5A2.75 2.75 0 0023 8.25v-4.5A2.75 2.75 0 0020.25 1H3.75zM2.5 3.75c0-.69.56-1.25 1.25-1.25h16.5c.69 0 1.25.56 1.25 1.25v4.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25v-4.5z" clip-rule="evenodd"/><path d="M5.75 17a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/><path fill-rule="evenodd" d="M3.75 13A2.75 2.75 0 001 15.75v4.5A2.75 2.75 0 003.75 23h16.5A2.75 2.75 0 0023 20.25v-4.5A2.75 2.75 0 0020.25 13H3.75zM2.5 15.75c0-.69.56-1.25 1.25-1.25h16.5c.69 0 1.25.56 1.25 1.25v4.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25v-4.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%server-cluster-16-svg-prop {
-  --server-cluster-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a2.25 2.25 0 00-.75 4.372v.465a3.25 3.25 0 00-1.797 1.144l-.625-.366a2.25 2.25 0 10-1.038 1.13l1.026.602a3.261 3.261 0 000 1.306l-1.026.601a2.25 2.25 0 101.038 1.13l.625-.366a3.25 3.25 0 001.797 1.145v.465a2.25 2.25 0 101.5 0v-.465a3.25 3.25 0 001.797-1.145l.625.366a2.25 2.25 0 101.038-1.13l-1.026-.6a3.26 3.26 0 000-1.307l1.026-.601a2.25 2.25 0 10-1.038-1.13l-.625.365A3.251 3.251 0 008.75 4.837v-.465A2.25 2.25 0 008 0zm-.75 2.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM2.75 4a.75.75 0 100 1.5.75.75 0 000-1.5zm0 6.5a.75.75 0 100 1.5.75.75 0 000-1.5zm4.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zm6-3.25a.75.75 0 100 1.5.75.75 0 000-1.5zm0-6.5a.75.75 0 100 1.5.75.75 0 000-1.5zM6.395 7.3a1.75 1.75 0 113.21 1.4 1.75 1.75 0 01-3.21-1.4z" clip-rule="evenodd"/></svg>');
-}
-
-%server-cluster-24-svg-prop {
-  --server-cluster-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 .5a2.5 2.5 0 00-.75 4.886v1.67a4.998 4.998 0 00-3.255 1.95l-1.731-.944a2.5 2.5 0 10-1.061 1.13l2.083 1.137A4.993 4.993 0 007 12c0 .615.111 1.206.316 1.752l-1.768 1.285a2.5 2.5 0 10.845 1.24l1.66-1.207a4.996 4.996 0 003.197 1.874v1.67a2.501 2.501 0 101.5 0v-1.67a4.996 4.996 0 003.197-1.874l1.66 1.207a2.5 2.5 0 10.845-1.24l-1.768-1.285A4.991 4.991 0 0017 12c0-.585-.1-1.148-.286-1.671l2.083-1.137a2.5 2.5 0 10-1.06-1.13l-1.732.945a4.998 4.998 0 00-3.255-1.951v-1.67A2.501 2.501 0 0012 .5zM11 3a1 1 0 112 0 1 1 0 01-2 0zM4 6a1 1 0 100 2 1 1 0 000-2zm0 10a1 1 0 100 2 1 1 0 000-2zm7 5a1 1 0 112 0 1 1 0 01-2 0zm9-5a1 1 0 100 2 1 1 0 000-2zm0-10a1 1 0 100 2 1 1 0 000-2zM8.91 10.353a3.5 3.5 0 016.18 0c.261.49.41 1.05.41 1.647s-.149 1.157-.41 1.647a3.5 3.5 0 01-6.18 0A3.482 3.482 0 018.5 12c0-.597.149-1.157.41-1.647z" clip-rule="evenodd"/></svg>');
-}
-
-%serverless-16-svg-prop {
-  --serverless-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.75 11.5a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/><path fill-rule="evenodd" d="M1.28.22A.75.75 0 00.22 1.28c-.141.294-.22.623-.22.97v2.5A2.25 2.25 0 002.25 7h3.69l2 2H2.25A2.25 2.25 0 000 11.25v2.5A2.25 2.25 0 002.25 16h11.5c.347 0 .676-.079.97-.22a.75.75 0 001.06-1.06L1.28.22zm.97 10.28h7.19l4 4H2.25a.75.75 0 01-.75-.75v-2.5a.75.75 0 01.75-.75zm2.19-5L1.5 2.56v2.19c0 .414.336.75.75.75h2.19z" clip-rule="evenodd"/><path d="M13.75 0H5a.75.75 0 000 1.5h8.75a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75H10.5a.75.75 0 000 1.5h3.25A2.25 2.25 0 0016 4.75v-2.5A2.25 2.25 0 0013.75 0zM13 9.75a.75.75 0 01.75-.75A2.25 2.25 0 0116 11.25a.75.75 0 01-1.5 0 .75.75 0 00-.75-.75.75.75 0 01-.75-.75z"/></g></svg>');
-}
-
-%serverless-24-svg-prop {
-  --serverless-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5 17.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M1.78.72A.75.75 0 00.72 1.78l.629.63A2.74 2.74 0 001 3.75v4.5A2.75 2.75 0 003.75 11h6.19l2 2H3.75A2.75 2.75 0 001 15.75v4.5A2.75 2.75 0 003.75 23h16.5a2.74 2.74 0 001.34-.349l.63.63a.75.75 0 101.06-1.061L2.866 1.806 1.78.72zm.732 2.853a1.265 1.265 0 00-.012.177v4.5c0 .69.56 1.25 1.25 1.25h4.69L2.511 3.573zm17.915 17.915L13.439 14.5H3.75c-.69 0-1.25.56-1.25 1.25v4.5c0 .69.56 1.25 1.25 1.25h16.5c.06 0 .12-.004.177-.012z" clip-rule="evenodd"/><path d="M6 1a.75.75 0 000 1.5h14.25c.69 0 1.25.56 1.25 1.25v4.5c0 .69-.56 1.25-1.25 1.25H14.5a.75.75 0 000 1.5h5.75A2.75 2.75 0 0023 8.25v-4.5A2.75 2.75 0 0020.25 1H6zM18 13a.75.75 0 000 1.5h2.25c.69 0 1.25.56 1.25 1.25V18a.75.75 0 001.5 0v-2.25A2.75 2.75 0 0020.25 13H18z"/></g></svg>');
-}
-
-%settings-16-svg-prop {
-  --settings-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 5a3 3 0 100 6 3 3 0 000-6zM6.5 8a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"/><path d="M7.5 0a1.75 1.75 0 00-1.75 1.75v.15c-.16.06-.318.125-.472.196l-.106-.106a1.75 1.75 0 00-2.475 0l-.707.707a1.75 1.75 0 000 2.475l.106.106a6.46 6.46 0 00-.196.472h-.15A1.75 1.75 0 000 7.5v1c0 .966.784 1.75 1.75 1.75h.15c.06.16.125.318.196.472l-.106.107a1.75 1.75 0 000 2.474l.707.708a1.75 1.75 0 002.475 0l.106-.107c.154.071.312.137.472.196v.15c0 .966.784 1.75 1.75 1.75h1a1.75 1.75 0 001.75-1.75v-.15c.16-.06.318-.125.472-.196l.106.107a1.75 1.75 0 002.475 0l.707-.707a1.75 1.75 0 000-2.475l-.106-.107c.071-.154.137-.311.196-.472h.15A1.75 1.75 0 0016 8.5v-1a1.75 1.75 0 00-1.75-1.75h-.15a6.455 6.455 0 00-.196-.472l.106-.106a1.75 1.75 0 000-2.475l-.707-.707a1.75 1.75 0 00-2.475 0l-.106.106a6.46 6.46 0 00-.472-.196v-.15A1.75 1.75 0 008.5 0h-1zm-.25 1.75a.25.25 0 01.25-.25h1a.25.25 0 01.25.25v.698c0 .339.227.636.555.724.42.113.817.28 1.186.492a.75.75 0 00.905-.12l.493-.494a.25.25 0 01.354 0l.707.708a.25.25 0 010 .353l-.494.494a.75.75 0 00-.12.904c.213.369.38.767.492 1.186a.75.75 0 00.724.555h.698a.25.25 0 01.25.25v1a.25.25 0 01-.25.25h-.698a.75.75 0 00-.724.555c-.113.42-.28.817-.492 1.186a.75.75 0 00.12.905l.494.493a.25.25 0 010 .354l-.707.707a.25.25 0 01-.354 0l-.494-.494a.75.75 0 00-.904-.12 4.966 4.966 0 01-1.186.492.75.75 0 00-.555.724v.698a.25.25 0 01-.25.25h-1a.25.25 0 01-.25-.25v-.698a.75.75 0 00-.555-.724 4.966 4.966 0 01-1.186-.491.75.75 0 00-.904.12l-.494.493a.25.25 0 01-.354 0l-.707-.707a.25.25 0 010-.354l.494-.493a.75.75 0 00.12-.905 4.966 4.966 0 01-.492-1.186.75.75 0 00-.724-.555H1.75a.25.25 0 01-.25-.25v-1a.25.25 0 01.25-.25h.698a.75.75 0 00.724-.555c.113-.42.28-.817.491-1.186a.75.75 0 00-.12-.904L3.05 4.11a.25.25 0 010-.353l.707-.708a.25.25 0 01.354 0l.493.494c.24.24.611.289.905.12a4.965 4.965 0 011.186-.492.75.75 0 00.555-.724V1.75z"/></g></svg>');
-}
-
-%settings-24-svg-prop {
-  --settings-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm-2.5 4a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"/><path d="M11.5 1a2.25 2.25 0 00-2.25 2.25v.178c-.474.152-.93.342-1.366.567l-.127-.127a2.25 2.25 0 00-3.182 0l-.707.707a2.25 2.25 0 000 3.182l.127.127a8.95 8.95 0 00-.567 1.366H3.25A2.25 2.25 0 001 11.5v1a2.25 2.25 0 002.25 2.25h.178c.152.474.342.93.567 1.366l-.127.127a2.25 2.25 0 000 3.182l.707.707a2.25 2.25 0 003.182 0l.127-.127c.435.225.892.415 1.366.567v.178A2.25 2.25 0 0011.5 23h1a2.25 2.25 0 002.25-2.25v-.178c.474-.152.93-.342 1.366-.567l.127.127a2.25 2.25 0 003.182 0l.707-.707a2.25 2.25 0 000-3.182l-.127-.127a8.94 8.94 0 00.567-1.366h.178A2.25 2.25 0 0023 12.5v-1a2.25 2.25 0 00-2.25-2.25h-.178a8.952 8.952 0 00-.567-1.366l.127-.127a2.25 2.25 0 000-3.182l-.707-.707a2.25 2.25 0 00-3.182 0l-.127.127a8.95 8.95 0 00-1.366-.567V3.25A2.25 2.25 0 0012.5 1h-1zm-.75 2.25a.75.75 0 01.75-.75h1a.75.75 0 01.75.75v.744a.75.75 0 00.569.728 7.45 7.45 0 012.04.846.75.75 0 00.918-.112l.526-.527a.75.75 0 011.06 0l.708.707a.75.75 0 010 1.06l-.527.527a.75.75 0 00-.112.917c.377.627.665 1.313.846 2.041a.75.75 0 00.728.569h.744a.75.75 0 01.75.75v1a.75.75 0 01-.75.75h-.744a.75.75 0 00-.728.569 7.449 7.449 0 01-.846 2.04.75.75 0 00.112.918l.527.526a.75.75 0 010 1.06l-.707.708a.75.75 0 01-1.06 0l-.527-.527a.75.75 0 00-.917-.112 7.446 7.446 0 01-2.041.846.75.75 0 00-.569.728v.744a.75.75 0 01-.75.75h-1a.75.75 0 01-.75-.75v-.744a.75.75 0 00-.569-.728 7.447 7.447 0 01-2.04-.846.75.75 0 00-.918.112l-.526.527a.75.75 0 01-1.061 0l-.707-.707a.75.75 0 010-1.06l.527-.527a.75.75 0 00.112-.917 7.45 7.45 0 01-.846-2.041.75.75 0 00-.728-.569H3.25a.75.75 0 01-.75-.75v-1a.75.75 0 01.75-.75h.744a.75.75 0 00.728-.569c.181-.728.469-1.414.846-2.04a.75.75 0 00-.112-.918l-.527-.526a.75.75 0 010-1.061l.707-.707a.75.75 0 011.06 0l.527.527a.75.75 0 00.917.112 7.451 7.451 0 012.041-.846.75.75 0 00.569-.728V3.25z"/></g></svg>');
-}
-
-%settings-svg-prop {
-  @extend %settings-16-svg-prop;
-}
-
-%share-16-svg-prop {
-  --share-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.3 5.76a.75.75 0 01-1.1-1.02l3.25-3.5a.75.75 0 011.1 0l3.25 3.5a.75.75 0 11-1.1 1.02l-1.95-2.1v6.59a.75.75 0 01-1.5 0V3.66L5.3 5.76z"/><path d="M2 9.25A2.25 2.25 0 014.25 7H5a.75.75 0 010 1.5h-.75a.75.75 0 00-.75.75v3.5c0 .414.336.75.75.75h7.5a.75.75 0 00.75-.75v-3.5a.75.75 0 00-.75-.75H11A.75.75 0 0111 7h.75A2.25 2.25 0 0114 9.25v3.5A2.25 2.25 0 0111.75 15h-7.5A2.25 2.25 0 012 12.75v-3.5z"/></g></svg>');
-}
-
-%share-24-svg-prop {
-  --share-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.295 6.765a.75.75 0 11-1.09-1.03l4.25-4.5a.75.75 0 011.09 0l4.25 4.5a.75.75 0 01-1.09 1.03L12.75 3.636V14.25a.75.75 0 01-1.5 0V3.636L8.295 6.765z"/><path d="M5.75 10.5c-.69 0-1.25.56-1.25 1.25v8.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25v-8.5c0-.69-.56-1.25-1.25-1.25H15.5a.75.75 0 010-1.5h2.75A2.75 2.75 0 0121 11.75v8.5A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25v-8.5A2.75 2.75 0 015.75 9H8.5a.75.75 0 010 1.5H5.75z"/></g></svg>');
-}
-
-%shield-16-svg-prop {
-  --shield-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.26.213a2.25 2.25 0 011.48 0l4.75 1.653A2.25 2.25 0 0115 3.991v4.01c0 2.048-1.181 3.747-2.45 4.991-1.282 1.255-2.757 2.15-3.573 2.598a2.024 2.024 0 01-1.954 0c-.816-.447-2.291-1.342-3.572-2.598C2.18 11.748 1 10.05 1 8V3.991c0-.957.606-1.81 1.51-2.125L7.26.213zm.986 1.417a.75.75 0 00-.493 0l-4.75 1.653a.75.75 0 00-.503.708v4.01c0 1.455.847 2.79 2 3.92 1.142 1.118 2.483 1.937 3.244 2.353.163.09.35.09.512 0 .761-.416 2.102-1.235 3.244-2.353 1.153-1.13 2-2.465 2-3.92V3.99a.75.75 0 00-.504-.708L8.246 1.63z" clip-rule="evenodd"/></svg>');
-}
-
-%shield-24-svg-prop {
-  --shield-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M11.04 1.307a2.75 2.75 0 011.92 0l6.25 2.33A2.75 2.75 0 0121 6.214V12c0 2.732-1.462 5.038-3.104 6.774-1.65 1.744-3.562 3-4.65 3.642a2.437 2.437 0 01-2.493 0c-1.087-.643-3-1.898-4.65-3.642C4.463 17.038 3 14.732 3 12V6.214a2.75 2.75 0 011.79-2.577l6.25-2.33zm1.397 1.406a1.25 1.25 0 00-.874 0l-6.25 2.33a1.25 1.25 0 00-.813 1.17V12c0 2.182 1.172 4.136 2.693 5.744 1.514 1.6 3.294 2.772 4.323 3.38.304.18.664.18.968 0 1.03-.608 2.809-1.78 4.323-3.38C18.327 16.136 19.5 14.182 19.5 12V6.214a1.25 1.25 0 00-.813-1.171l-6.25-2.33z" clip-rule="evenodd"/></svg>');
-}
-
-%shield-alert-16-svg-prop {
-  --shield-alert-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/><path fill-rule="evenodd" d="M7.26.213a2.25 2.25 0 011.48 0l4.75 1.653A2.25 2.25 0 0115 3.991v4.01c0 2.048-1.181 3.747-2.45 4.991-1.282 1.255-2.757 2.15-3.573 2.598a2.024 2.024 0 01-1.954 0c-.816-.447-2.291-1.342-3.572-2.598C2.18 11.748 1 10.05 1 8V3.991c0-.957.606-1.81 1.51-2.125L7.26.213zm.986 1.417a.75.75 0 00-.493 0l-4.75 1.653a.75.75 0 00-.503.708v4.01c0 1.455.847 2.79 2 3.92 1.142 1.118 2.483 1.937 3.244 2.353.163.09.35.09.512 0 .761-.416 2.102-1.235 3.244-2.353 1.153-1.13 2-2.465 2-3.92V3.99a.75.75 0 00-.504-.708L8.246 1.63z" clip-rule="evenodd"/></g></svg>');
-}
-
-%shield-alert-24-svg-prop {
-  --shield-alert-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M11.04 1.307a2.75 2.75 0 011.92 0l6.25 2.33A2.75 2.75 0 0121 6.214V12c0 2.732-1.462 5.038-3.104 6.774-1.65 1.744-3.562 3-4.65 3.642a2.437 2.437 0 01-2.493 0c-1.087-.643-3-1.898-4.65-3.642C4.463 17.038 3 14.732 3 12V6.214a2.75 2.75 0 011.79-2.577l6.25-2.33zm1.397 1.406a1.25 1.25 0 00-.874 0l-6.25 2.33a1.25 1.25 0 00-.813 1.17V12c0 2.182 1.172 4.136 2.693 5.744 1.514 1.6 3.294 2.772 4.323 3.38.304.18.664.18.968 0 1.03-.608 2.809-1.78 4.323-3.38C18.327 16.136 19.5 14.182 19.5 12V6.214a1.25 1.25 0 00-.813-1.171l-6.25-2.33z" clip-rule="evenodd"/></g></svg>');
-}
-
-%shield-check-16-svg-prop {
-  --shield-check-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.28 5.47a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.47-3.47a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M7.26.213a2.25 2.25 0 011.48 0l4.75 1.653A2.25 2.25 0 0115 3.991v4.01c0 2.048-1.181 3.747-2.45 4.991-1.282 1.255-2.757 2.15-3.573 2.598a2.024 2.024 0 01-1.954 0c-.816-.447-2.291-1.342-3.572-2.598C2.18 11.748 1 10.05 1 8V3.991c0-.957.606-1.81 1.51-2.125L7.26.213zm.986 1.417a.75.75 0 00-.493 0l-4.75 1.653a.75.75 0 00-.503.708v4.01c0 1.455.847 2.79 2 3.92 1.142 1.118 2.483 1.937 3.244 2.353.163.09.35.09.512 0 .761-.416 2.102-1.235 3.244-2.353 1.153-1.13 2-2.465 2-3.92V3.99a.75.75 0 00-.504-.708L8.246 1.63z" clip-rule="evenodd"/></g></svg>');
-}
-
-%shield-check-24-svg-prop {
-  --shield-check-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.78 8.22a.75.75 0 010 1.06l-5.499 5.5a.75.75 0 01-1.061 0l-2.5-2.5a.75.75 0 111.06-1.06l1.97 1.97 4.97-4.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M11.04 1.307a2.75 2.75 0 011.92 0l6.25 2.33A2.75 2.75 0 0121 6.214V12c0 2.732-1.462 5.038-3.104 6.774-1.65 1.744-3.562 3-4.65 3.642a2.437 2.437 0 01-2.493 0c-1.087-.643-3-1.898-4.65-3.642C4.463 17.038 3 14.732 3 12V6.214a2.75 2.75 0 011.79-2.577l6.25-2.33zm1.397 1.406a1.25 1.25 0 00-.874 0l-6.25 2.33a1.25 1.25 0 00-.813 1.17V12c0 2.182 1.172 4.136 2.693 5.744 1.514 1.6 3.294 2.772 4.323 3.38.304.18.664.18.968 0 1.03-.608 2.809-1.78 4.323-3.38C18.327 16.136 19.5 14.182 19.5 12V6.214a1.25 1.25 0 00-.813-1.171l-6.25-2.33z" clip-rule="evenodd"/></g></svg>');
-}
-
-%shield-off-16-svg-prop {
-  --shield-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.74.213a2.25 2.25 0 00-1.48 0L6.035.64a.75.75 0 00.493 1.417l1.226-.427a.75.75 0 01.493 0l4.75 1.653a.75.75 0 01.504.708v4.01c0 .334-.044.661-.127.98a.75.75 0 101.453.374C14.938 8.922 15 8.47 15 8V3.991a2.25 2.25 0 00-1.51-2.125L8.74.213z"/><path fill-rule="evenodd" d="M1.447 2.507L.72 1.78A.75.75 0 011.78.72l13.5 13.5a.75.75 0 11-1.06 1.06l-1.988-1.987c-1.2 1.098-2.505 1.886-3.254 2.296a2.026 2.026 0 01-1.955 0c-.816-.446-2.291-1.341-3.572-2.597C2.18 11.748 1 10.05 1 8V3.72c0-.456.165-.882.447-1.213zm1.078 1.079a.366.366 0 00-.025.133V8c0 1.456.847 2.79 2 3.92 1.142 1.12 2.483 1.938 3.244 2.354.162.09.35.09.513 0 .69-.378 1.854-1.084 2.913-2.043L2.525 3.586z" clip-rule="evenodd"/></g></svg>');
-}
-
-%shield-off-24-svg-prop {
-  --shield-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06l2.185 2.185A1.937 1.937 0 003 5.651V12c0 2.732 1.462 5.038 3.104 6.774 1.65 1.744 3.562 3 4.65 3.642a2.442 2.442 0 002.496-.002c1.066-.63 2.928-1.85 4.557-3.546l3.913 3.912a.75.75 0 101.06-1.06L2.28 1.22zm14.466 16.587L4.508 5.568a.44.44 0 00-.008.083V12c0 2.182 1.172 4.136 2.693 5.744 1.514 1.6 3.294 2.772 4.323 3.38a.942.942 0 00.97-.002c1.02-.602 2.763-1.75 4.26-3.315z" clip-rule="evenodd"/><path d="M12.96 1.307a2.75 2.75 0 00-1.92 0l-2.302.858a.75.75 0 10.524 1.406l2.301-.858a1.25 1.25 0 01.874 0l6.25 2.33c.489.182.813.649.813 1.17V12c0 .574-.08 1.13-.227 1.668a.75.75 0 101.448.394c.178-.657.279-1.346.279-2.062V6.214a2.75 2.75 0 00-1.79-2.577l-6.25-2.33z"/></g></svg>');
-}
-
-%shield-x-16-svg-prop {
-  --shield-x-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.78 4.72a.75.75 0 010 1.06L9.06 7.5l1.72 1.72a.75.75 0 11-1.06 1.06L8 8.56l-1.72 1.72a.75.75 0 11-1.06-1.06L6.94 7.5 5.22 5.78a.75.75 0 011.06-1.06L8 6.44l1.72-1.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M7.26.213a2.25 2.25 0 011.48 0l4.75 1.653A2.25 2.25 0 0115 3.991v4.01c0 2.048-1.181 3.747-2.45 4.991-1.282 1.255-2.757 2.15-3.573 2.598a2.024 2.024 0 01-1.954 0c-.816-.447-2.291-1.342-3.572-2.598C2.18 11.748 1 10.05 1 8V3.991c0-.957.606-1.81 1.51-2.125L7.26.213zm.986 1.417a.75.75 0 00-.493 0l-4.75 1.653a.75.75 0 00-.503.708v4.01c0 1.455.847 2.79 2 3.92 1.142 1.118 2.483 1.937 3.244 2.353.163.09.35.09.512 0 .761-.416 2.102-1.235 3.244-2.353 1.153-1.13 2-2.465 2-3.92V3.99a.75.75 0 00-.504-.708L8.246 1.63z" clip-rule="evenodd"/></g></svg>');
-}
-
-%shield-x-24-svg-prop {
-  --shield-x-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15.78 7.22a.75.75 0 010 1.06L13.06 11l2.72 2.72a.75.75 0 11-1.06 1.06L12 12.06l-2.72 2.72a.75.75 0 01-1.06-1.06L10.94 11 8.22 8.28a.75.75 0 011.06-1.06L12 9.94l2.72-2.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M11.04 1.307a2.75 2.75 0 011.92 0l6.25 2.33A2.75 2.75 0 0121 6.214V12c0 2.732-1.462 5.038-3.104 6.774-1.65 1.744-3.562 3-4.65 3.642a2.437 2.437 0 01-2.493 0c-1.087-.643-3-1.898-4.65-3.642C4.463 17.038 3 14.732 3 12V6.214a2.75 2.75 0 011.79-2.577l6.25-2.33zm1.397 1.406a1.25 1.25 0 00-.874 0l-6.25 2.33a1.25 1.25 0 00-.813 1.17V12c0 2.182 1.172 4.136 2.693 5.744 1.514 1.6 3.294 2.772 4.323 3.38.304.18.664.18.968 0 1.03-.608 2.809-1.78 4.323-3.38C18.327 16.136 19.5 14.182 19.5 12V6.214a1.25 1.25 0 00-.813-1.171l-6.25-2.33z" clip-rule="evenodd"/></g></svg>');
-}
-
-%shopping-bag-16-svg-prop {
-  --shopping-bag-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.5 7.25a.75.75 0 00-1.5 0c0 .76.34 1.468.91 1.975A3.15 3.15 0 008 10a3.15 3.15 0 002.09-.775c.57-.507.91-1.215.91-1.975a.75.75 0 00-1.5 0c0 .301-.134.61-.407.854A1.651 1.651 0 018 8.5c-.424 0-.816-.15-1.093-.396A1.145 1.145 0 016.5 7.25z"/><path fill-rule="evenodd" d="M3.448.746A2.25 2.25 0 015.121 0h5.758a2.25 2.25 0 011.673.746l1.871 2.081c.371.413.577.949.577 1.504v9.419A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V4.331c0-.555.205-1.091.577-1.504L3.448.746zm1.673.754a.75.75 0 00-.558.249L2.99 3.5H13.01l-1.574-1.751a.75.75 0 00-.558-.249H5.12zM2.5 13.75V5h11v8.75a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%shopping-bag-24-svg-prop {
-  --shopping-bag-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9 10.5a.75.75 0 00-1.5 0 4.5 4.5 0 109 0 .75.75 0 00-1.5 0 3 3 0 01-6 0z"/><path fill-rule="evenodd" d="M5.612 1.865A2.75 2.75 0 017.614 1h8.772a2.75 2.75 0 012.002.865l2.865 3.043c.48.51.747 1.185.747 1.885V20.25A2.75 2.75 0 0119.25 23H4.75A2.75 2.75 0 012 20.25V6.793c0-.7.267-1.374.747-1.885l2.865-3.043zm2.002.635a1.25 1.25 0 00-.91.393L4.25 5.5h15.498l-2.453-2.607a1.25 1.25 0 00-.91-.393H7.614zM3.5 20.25V7h17v13.25c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%shopping-cart-16-svg-prop {
-  --shopping-cart-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1.25 1.5a.75.75 0 000 1.5h1.154a.75.75 0 01.736.604l.874 4.413.405 2.15A2.25 2.25 0 006.63 12h6.095a2.25 2.25 0 002.214-1.848l.727-4A2.25 2.25 0 0013.453 3.5H4.648l-.037-.187A2.25 2.25 0 002.404 1.5H1.25zm4.237 6.236L4.945 5h8.508a.75.75 0 01.738.884l-.728 4a.75.75 0 01-.738.616H6.63a.75.75 0 01-.737-.611l-.406-2.153z" clip-rule="evenodd"/><path d="M7.5 13.75c0 .69-.56 1.25-1.25 1.25h-.01a1.25 1.25 0 110-2.5h.01c.69 0 1.25.56 1.25 1.25zM14 13.75c0 .69-.56 1.25-1.25 1.25h-.01a1.25 1.25 0 110-2.5h.01c.69 0 1.25.56 1.25 1.25z"/></g></svg>');
-}
-
-%shopping-cart-24-svg-prop {
-  --shopping-cart-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M1.25 1.5a.75.75 0 000 1.5h2.089a1.25 1.25 0 011.229 1.02l1.444 7.74.706 3.971A2.75 2.75 0 009.426 18h10.142a2.75 2.75 0 002.71-2.279l1.303-7.5A2.75 2.75 0 0020.872 5H6.276l-.234-1.255A2.75 2.75 0 003.34 1.5H1.25zm6.238 9.994L6.556 6.5h14.316c.776 0 1.365.7 1.232 1.464l-1.305 7.5a1.25 1.25 0 01-1.231 1.036H9.426a1.25 1.25 0 01-1.23-1.031l-.708-3.975z" clip-rule="evenodd"/><path d="M11.5 20.75a1.75 1.75 0 01-1.75 1.75h-.01a1.75 1.75 0 110-3.5h.01c.966 0 1.75.784 1.75 1.75zM21.5 20.75a1.75 1.75 0 01-1.75 1.75h-.01a1.75 1.75 0 110-3.5h.01c.966 0 1.75.784 1.75 1.75z"/></g></svg>');
-}
-
-%shuffle-16-svg-prop {
-  --shuffle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M14.943 1.463a.748.748 0 00-.161-.242l-.002-.001-.001-.002A.748.748 0 0014.25 1h-4a.75.75 0 000 1.5h2.19L1.22 13.72a.75.75 0 101.06 1.06L13.5 3.56v2.19a.75.75 0 001.5 0v-4a.747.747 0 00-.057-.287zM9.5 14.25c0 .414.336.75.75.75h4a.747.747 0 00.75-.75v-4a.75.75 0 00-1.5 0v2.19l-2.47-2.47a.75.75 0 10-1.06 1.06l2.47 2.47h-2.19a.75.75 0 00-.75.75zM6.03 4.97a.75.75 0 01-1.06 1.06L1.22 2.28a.75.75 0 011.06-1.06l3.75 3.75z"/></g></svg>');
-}
-
-%shuffle-24-svg-prop {
-  --shuffle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M21.943 2.463A.748.748 0 0021.25 2h-5.5a.75.75 0 000 1.5h3.69L2.22 20.72a.75.75 0 101.06 1.06L20.5 4.56v3.69a.75.75 0 001.5 0v-5.5a.747.747 0 00-.057-.287zM20.5 19.44v-3.69a.75.75 0 011.5 0v5.5a.747.747 0 01-.75.75h-5.5a.75.75 0 010-1.5h3.69l-4.97-4.97a.75.75 0 111.06-1.06l4.97 4.97zM9.53 9.53a.75.75 0 000-1.06L3.28 2.22a.75.75 0 00-1.06 1.06l6.25 6.25a.75.75 0 001.06 0z"/></g></svg>');
-}
-
-%sidebar-16-svg-prop {
-  --sidebar-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zM2.5 3.25a.75.75 0 01.75-.75h1.8v11h-1.8a.75.75 0 01-.75-.75v-9.5zM6.45 13.5h6.3a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-6.3v11z" clip-rule="evenodd"/></svg>');
-}
-
-%sidebar-24-svg-prop {
-  --sidebar-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25H8v17H4.75c-.69 0-1.25-.56-1.25-1.25V4.75zm6 15.75h9.75c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H9.5v17z" clip-rule="evenodd"/></svg>');
-}
-
-%sidebar-hide-16-svg-prop {
-  --sidebar-hide-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.726 5.263a.7.7 0 10-.952-1.026l-3.5 3.25a.7.7 0 000 1.026l3.5 3.25a.7.7 0 00.952-1.026L8.78 8l2.947-2.737z"/><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h1.3v-11h-1.3zm9.5 11h-6.8v-11h6.8a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%sidebar-hide-24-svg-prop {
-  --sidebar-hide-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.765 8.295a.75.75 0 00-1.03-1.09l-4.5 4.25a.75.75 0 000 1.09l4.5 4.25a.75.75 0 001.03-1.09L12.842 12l3.923-3.705z"/><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25H7v-17H4.75zm14.5 17H8.5v-17h10.75c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%sidebar-show-16-svg-prop {
-  --sidebar-show-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.774 5.263a.7.7 0 11.952-1.026l3.5 3.25a.7.7 0 010 1.026l-3.5 3.25a.7.7 0 01-.952-1.026L10.72 8 7.774 5.263z"/><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h1.3v-11h-1.3zm9.5 11h-6.8v-11h6.8a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%sidebar-show-24-svg-prop {
-  --sidebar-show-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.735 8.295a.75.75 0 011.03-1.09l4.5 4.25a.75.75 0 010 1.09l-4.5 4.25a.75.75 0 01-1.03-1.09L15.658 12l-3.923-3.705z"/><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25H7v-17H4.75zm14.5 17H8.5v-17h10.75c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%sign-in-16-svg-prop {
-  --sign-in-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.5 1.75a.75.75 0 01.75-.75h2.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-2.5a.75.75 0 010-1.5h2.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-2.5a.75.75 0 01-.75-.75z"/><path d="M5.97 3.72a.75.75 0 011.06 0l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 01-1.06-1.06L8.19 8.5H2A.75.75 0 012 7h6.19L5.97 4.78a.75.75 0 010-1.06z"/></g></svg>');
-}
-
-%sign-in-24-svg-prop {
-  --sign-in-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.5 2.75a.75.75 0 01.75-.75h4A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22h-4a.75.75 0 010-1.5h4c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25h-4a.75.75 0 01-.75-.75z"/><path d="M9.47 6.22a.75.75 0 011.06 0l5 5a.747.747 0 010 1.06l-5 5a.75.75 0 11-1.06-1.06l3.72-3.72H3A.75.75 0 013 11h10.19L9.47 7.28a.75.75 0 010-1.06z"/></g></svg>');
-}
-
-%sign-out-16-svg-prop {
-  --sign-out-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.5 1.75A.75.75 0 005.75 1h-2.5A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h2.5a.75.75 0 000-1.5h-2.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 01.75-.75h2.5a.75.75 0 00.75-.75z"/><path d="M9.97 3.72a.75.75 0 011.06 0l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06l2.22-2.22H6A.75.75 0 016 7h6.19L9.97 4.78a.75.75 0 010-1.06z"/></g></svg>');
-}
-
-%sign-out-24-svg-prop {
-  --sign-out-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.5 2.75A.75.75 0 008.75 2h-4A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h4a.75.75 0 000-1.5h-4c-.69 0-1.25-.56-1.25-1.25V4.75c0-.69.56-1.25 1.25-1.25h4a.75.75 0 00.75-.75z"/><path d="M15.47 6.22a.75.75 0 011.06 0l5 5a.75.75 0 010 1.06l-5 5a.75.75 0 11-1.06-1.06l3.72-3.72H9A.75.75 0 019 11h10.19l-3.72-3.72a.75.75 0 010-1.06z"/></g></svg>');
-}
-
-%skip-16-svg-prop {
-  --skip-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 0110.535-5.096l-9.131 9.131A6.472 6.472 0 011.5 8zm2.465 5.096a6.5 6.5 0 009.131-9.131l-9.131 9.131z" clip-rule="evenodd"/></svg>');
-}
-
-%skip-24-svg-prop {
-  --skip-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.172 19.728a.744.744 0 00.1.1A10.965 10.965 0 0012 23c6.075 0 11-4.925 11-11 0-3.012-1.21-5.742-3.172-7.728a.769.769 0 00-.1-.1A10.965 10.965 0 0012 1C5.925 1 1 5.925 1 12c0 3.012 1.21 5.742 3.172 7.728zM2.5 12A9.5 9.5 0 0112 2.5c2.353 0 4.507.856 6.166 2.273L4.773 18.166A9.462 9.462 0 012.5 12zm16.727-6.166A9.462 9.462 0 0121.5 12a9.5 9.5 0 01-9.5 9.5 9.462 9.462 0 01-6.166-2.273L19.227 5.834z" clip-rule="evenodd"/></svg>');
-}
-
-%skip-back-16-svg-prop {
-  --skip-back-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M11.24 2.5C12.4 1.682 14 2.51 14 3.93v8.14c0 1.419-1.6 2.248-2.76 1.43L5.476 9.43a1.75 1.75 0 010-2.86L11.24 2.5zm1.26 1.43a.25.25 0 00-.394-.204L6.34 7.796a.25.25 0 000 .408l5.766 4.07a.25.25 0 00.394-.204V3.93z" clip-rule="evenodd"/><path d="M3.5 3A.75.75 0 002 3v10a.75.75 0 001.5 0V3z"/></g></svg>');
-}
-
-%skip-back-24-svg-prop {
-  --skip-back-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M17.236 4.512C18.395 3.688 20 4.516 20 5.938v12.124c0 1.421-1.605 2.25-2.764 1.426L8.71 13.426a1.75 1.75 0 010-2.852l8.525-6.062zM18.5 5.938a.25.25 0 00-.395-.204l-8.524 6.062a.25.25 0 000 .408l8.524 6.061a.25.25 0 00.395-.203V5.938z" clip-rule="evenodd"/><path d="M6 5a.75.75 0 00-1.5 0v14A.75.75 0 006 19V5z"/></g></svg>');
-}
-
-%skip-forward-16-svg-prop {
-  --skip-forward-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M4.76 2.5C3.6 1.682 2 2.51 2 3.93v8.14c0 1.419 1.6 2.248 2.76 1.43l5.765-4.07a1.75 1.75 0 000-2.86L4.76 2.5zM3.5 3.93a.25.25 0 01.394-.204l5.766 4.07a.25.25 0 010 .408l-5.766 4.07a.25.25 0 01-.394-.204V3.93z" clip-rule="evenodd"/><path d="M14 3a.75.75 0 00-1.5 0v10a.75.75 0 001.5 0V3z"/></g></svg>');
-}
-
-%skip-forward-24-svg-prop {
-  --skip-forward-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M6.764 4.512C5.606 3.688 4 4.516 4 5.938v12.124c0 1.421 1.606 2.25 2.764 1.426l8.525-6.062a1.75 1.75 0 000-2.852L6.764 4.512zM5.5 5.938a.25.25 0 01.395-.204l8.524 6.062c.14.1.14.308 0 .408l-8.524 6.061a.25.25 0 01-.395-.203V5.938z" clip-rule="evenodd"/><path d="M19.5 5A.75.75 0 0018 5v14a.75.75 0 001.5 0V5z"/></g></svg>');
-}
-
-%slack-16-svg-prop {
-  --slack-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.471 11.318a1.474 1.474 0 001.47-1.471v-1.47h-1.47A1.474 1.474 0 001 9.846c.001.811.659 1.469 1.47 1.47zm3.682-2.942a1.474 1.474 0 00-1.47 1.471v3.683c.002.811.659 1.468 1.47 1.47a1.474 1.474 0 001.47-1.47V9.846a1.474 1.474 0 00-1.47-1.47zM4.683 2.471c.001.811.659 1.469 1.47 1.47h1.47v-1.47A1.474 1.474 0 006.154 1a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47H2.47A1.474 1.474 0 001 6.153c.002.812.66 1.469 1.47 1.47h3.684a1.474 1.474 0 001.47-1.47zM9.847 7.624a1.474 1.474 0 001.47-1.47V2.47A1.474 1.474 0 009.848 1a1.474 1.474 0 00-1.47 1.47v3.684c.002.81.659 1.468 1.47 1.47zm3.682-2.941a1.474 1.474 0 00-1.47 1.47v1.47h1.47A1.474 1.474 0 0015 6.154a1.474 1.474 0 00-1.47-1.47zM8.377 9.847c.002.811.659 1.469 1.47 1.47h3.683A1.474 1.474 0 0015 9.848a1.474 1.474 0 00-1.47-1.47H9.847a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47h-1.47v1.47c.002.812.659 1.469 1.47 1.47a1.474 1.474 0 001.47-1.47z"/></g></svg>');
-}
-
-%slack-24-svg-prop {
-  --slack-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M4.101 16.74a2.106 2.106 0 002.101-2.101v-2.101H4.101a2.106 2.106 0 00-2.1 2.1 2.106 2.106 0 002.1 2.102zm5.26-4.202a2.106 2.106 0 00-2.1 2.1V19.9A2.106 2.106 0 009.362 22a2.106 2.106 0 002.1-2.1v-5.262a2.106 2.106 0 00-2.1-2.1zM7.26 4.101a2.106 2.106 0 002.102 2.101h2.1V4.101a2.106 2.106 0 00-2.1-2.1A2.106 2.106 0 007.26 4.1zm4.203 5.26a2.106 2.106 0 00-2.101-2.1H4.1A2.106 2.106 0 002 9.362a2.106 2.106 0 002.1 2.1h5.262a2.106 2.106 0 002.1-2.1zM14.639 11.463a2.106 2.106 0 002.1-2.101V4.1a2.106 2.106 0 00-2.1-2.1 2.106 2.106 0 00-2.101 2.1v5.262a2.106 2.106 0 002.1 2.1zm5.26-4.202a2.106 2.106 0 00-2.1 2.1v2.102h2.1A2.106 2.106 0 0022 9.362a2.106 2.106 0 00-2.1-2.101zM12.538 14.639a2.106 2.106 0 002.1 2.1H19.9a2.106 2.106 0 002.1-2.1 2.106 2.106 0 00-2.1-2.101h-5.262a2.106 2.106 0 00-2.1 2.1zm4.202 5.26a2.106 2.106 0 00-2.101-2.1h-2.101v2.1a2.106 2.106 0 002.1 2.101 2.106 2.106 0 002.102-2.1z"/></g></svg>');
-}
-
-%slack-color-16-svg-prop {
-  --slack-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="%23E01E5A" d="M2.471 11.318a1.474 1.474 0 001.47-1.471v-1.47h-1.47A1.474 1.474 0 001 9.846c.001.811.659 1.469 1.47 1.47zm3.682-2.942a1.474 1.474 0 00-1.47 1.471v3.683c.002.811.66 1.468 1.47 1.47a1.474 1.474 0 001.47-1.47V9.846a1.474 1.474 0 00-1.47-1.47z"/><path fill="%2336C5F0" d="M4.683 2.471c.001.811.659 1.469 1.47 1.47h1.47v-1.47A1.474 1.474 0 006.154 1a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47H2.47A1.474 1.474 0 001 6.153c.002.812.66 1.469 1.47 1.47h3.684a1.474 1.474 0 001.47-1.47z"/><path fill="%232EB67D" d="M9.847 7.624a1.474 1.474 0 001.47-1.47V2.47A1.474 1.474 0 009.848 1a1.474 1.474 0 00-1.47 1.47v3.684c.002.81.659 1.468 1.47 1.47zm3.682-2.941a1.474 1.474 0 00-1.47 1.47v1.47h1.47A1.474 1.474 0 0015 6.154a1.474 1.474 0 00-1.47-1.47z"/><path fill="%23ECB22E" d="M8.377 9.847c.002.811.659 1.469 1.47 1.47h3.683A1.474 1.474 0 0015 9.848a1.474 1.474 0 00-1.47-1.47H9.847a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47h-1.47v1.47c.002.812.659 1.469 1.47 1.47a1.474 1.474 0 001.47-1.47z"/></g></svg>');
-}
-
-%slack-color-24-svg-prop {
-  --slack-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="%23E01E5A" d="M4.101 16.74a2.106 2.106 0 002.101-2.101v-2.101H4.101a2.106 2.106 0 00-2.1 2.1 2.106 2.106 0 002.1 2.102zm5.26-4.202a2.106 2.106 0 00-2.1 2.1V19.9A2.106 2.106 0 009.362 22a2.106 2.106 0 002.1-2.1v-5.262a2.106 2.106 0 00-2.1-2.1z"/><path fill="%2336C5F0" d="M7.26 4.101a2.106 2.106 0 002.102 2.101h2.1V4.101a2.106 2.106 0 00-2.1-2.1A2.106 2.106 0 007.26 4.1zm4.203 5.26a2.106 2.106 0 00-2.101-2.1H4.1A2.106 2.106 0 002 9.362a2.106 2.106 0 002.1 2.1h5.262a2.106 2.106 0 002.1-2.1z"/><path fill="%232EB67D" d="M14.639 11.463a2.106 2.106 0 002.1-2.101V4.1a2.106 2.106 0 00-2.1-2.1 2.106 2.106 0 00-2.1 2.1v5.262a2.106 2.106 0 002.1 2.1zm5.26-4.202a2.106 2.106 0 00-2.1 2.1v2.101h2.1A2.106 2.106 0 0022 9.363a2.106 2.106 0 00-2.1-2.101z"/><path fill="%23ECB22E" d="M12.538 14.639a2.106 2.106 0 002.1 2.1H19.9a2.106 2.106 0 002.1-2.1 2.106 2.106 0 00-2.1-2.101h-5.262a2.106 2.106 0 00-2.1 2.1zm4.202 5.26a2.106 2.106 0 00-2.101-2.1h-2.1v2.1a2.106 2.106 0 002.1 2.101 2.106 2.106 0 002.1-2.1z"/></g></svg>');
-}
-
-%slash-16-svg-prop {
-  --slash-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.126 2.601a.75.75 0 00-1.025.273l-5.5 9.5a.75.75 0 001.298.752l5.5-9.5a.75.75 0 00-.273-1.025z" clip-rule="evenodd"/></svg>');
-}
-
-%slash-24-svg-prop {
-  --slash-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M16.63 4.103a.75.75 0 00-1.027.268l-8.5 14.5a.75.75 0 101.294.758l8.5-14.5a.75.75 0 00-.268-1.026z" clip-rule="evenodd"/></svg>');
-}
-
-%slash-square-16-svg-prop {
-  --slash-square-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.633 4.323a.75.75 0 011.234.854l-4.5 6.5a.75.75 0 01-1.234-.854l4.5-6.5z"/><path fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zM2.5 3.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%slash-square-24-svg-prop {
-  --slash-square-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.1 6.874a.75.75 0 011.3.752l-5.5 9.5a.75.75 0 11-1.3-.752l5.5-9.5z"/><path fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V4.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%sliders-16-svg-prop {
-  --sliders-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.75 1a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 012.75 1zM2 10.5v3.75a.75.75 0 001.5 0V10.5h1a.75.75 0 000-1.5H1a.75.75 0 000 1.5h1zM8.5 7.75a.75.75 0 00-1.5 0v6.5a.75.75 0 001.5 0v-6.5zM7.75 1a.75.75 0 01.75.75V4.5h1a.75.75 0 010 1.5H6a.75.75 0 010-1.5h1V1.75A.75.75 0 017.75 1zM14.5 10a.75.75 0 010 1.5h-1v2.75a.75.75 0 01-1.5 0V11.5h-1a.75.75 0 010-1.5h3.5zM12.75 1a.75.75 0 01.75.75v6.5a.75.75 0 01-1.5 0v-6.5a.75.75 0 01.75-.75z"/></g></svg>');
-}
-
-%sliders-24-svg-prop {
-  --sliders-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 2.5a.75.75 0 01.75.75v7a.75.75 0 01-1.5 0v-7a.75.75 0 01.75-.75zM3 14.5v6.25a.75.75 0 001.5 0V14.5h2a.75.75 0 000-1.5H1a.75.75 0 000 1.5h2zM12.5 11.75a.75.75 0 00-1.5 0v9a.75.75 0 001.5 0v-9zM11.75 2.5a.75.75 0 01.75.75V7.5h2a.75.75 0 010 1.5H9a.75.75 0 010-1.5h2V3.25a.75.75 0 01.75-.75zM22.5 15a.75.75 0 010 1.5h-2v4.25a.75.75 0 01-1.5 0V16.5h-2a.75.75 0 010-1.5h5.5zM19.75 2.5a.75.75 0 01.75.75v9a.75.75 0 01-1.5 0v-9a.75.75 0 01.75-.75z"/></g></svg>');
-}
-
-%smartphone-16-svg-prop {
-  --smartphone-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 12a1 1 0 100 2h.007a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M4.25 0A2.25 2.25 0 002 2.25v11.5A2.25 2.25 0 004.25 16h7.5A2.25 2.25 0 0014 13.75V2.25A2.25 2.25 0 0011.75 0h-7.5zM3.5 2.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v11.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V2.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%smartphone-24-svg-prop {
-  --smartphone-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 19a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M6.75 1A2.75 2.75 0 004 3.75v16.5A2.75 2.75 0 006.75 23h10.5A2.75 2.75 0 0020 20.25V3.75A2.75 2.75 0 0017.25 1H6.75zM5.5 3.75c0-.69.56-1.25 1.25-1.25h10.5c.69 0 1.25.56 1.25 1.25v16.5c0 .69-.56 1.25-1.25 1.25H6.75c-.69 0-1.25-.56-1.25-1.25V3.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%smile-16-svg-prop {
-  --smile-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 12c-1.01 0-1.782-.504-2.267-.945a4.72 4.72 0 01-.564-.614 3.31 3.31 0 01-.212-.305.75.75 0 011.284-.775 3.214 3.214 0 00.5.584c.341.31.769.555 1.259.555.49 0 .918-.246 1.258-.555a3.214 3.214 0 00.5-.584.75.75 0 011.285.775l-.212.305c-.128.167-.317.39-.564.614C9.782 11.495 9.01 12 8 12zM5 6a1 1 0 011-1h.007a1 1 0 010 2H6a1 1 0 01-1-1zM10 5a1 1 0 100 2h.007a1 1 0 100-2H10z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%smile-24-svg-prop {
-  --smile-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.362 14.693c.216.265.534.618.948.972.82.7 2.077 1.46 3.69 1.46s2.87-.76 3.69-1.46a7.647 7.647 0 001.199-1.3l.099-.145a.875.875 0 00-1.475-.942c-.071.107-.15.21-.232.31a5.898 5.898 0 01-.729.747c-.641.549-1.509 1.04-2.552 1.04-1.043 0-1.91-.491-2.552-1.04a5.894 5.894 0 01-.73-.747 4.012 4.012 0 01-.232-.31.875.875 0 00-1.474.942c.106.165.227.322.35.473zM8 9a1 1 0 011-1h.01a1 1 0 110 2H9a1 1 0 01-1-1zM15 8a1 1 0 100 2h.01a1 1 0 100-2H15z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%socket-16-svg-prop {
-  --socket-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5 8a1 1 0 011-1h.01a1 1 0 010 2H6a1 1 0 01-1-1zM10.01 7a1 1 0 000 2h.01a1 1 0 100-2h-.01z"/><path fill-rule="evenodd" d="M8 2.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM4 8a4 4 0 118 0 4 4 0 01-8 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M2.25 0A2.25 2.25 0 000 2.25v11.5A2.25 2.25 0 002.25 16h11.5A2.25 2.25 0 0016 13.75V2.25A2.25 2.25 0 0013.75 0H2.25zM1.5 2.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v11.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75V2.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%socket-24-svg-prop {
-  --socket-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9 12a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zM14.01 11a1 1 0 100 2h.01a1 1 0 100-2h-.01z"/><path fill-rule="evenodd" d="M12 4a8 8 0 100 16 8 8 0 000-16zm-6.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M3.75 1A2.75 2.75 0 001 3.75v16.5A2.75 2.75 0 003.75 23h16.5A2.75 2.75 0 0023 20.25V3.75A2.75 2.75 0 0020.25 1H3.75zM2.5 3.75c0-.69.56-1.25 1.25-1.25h16.5c.69 0 1.25.56 1.25 1.25v16.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V3.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%socket-svg-prop {
-  --socket-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM7 11C7 10.4477 7.44772 10 8 10H10C10.5523 10 11 10.4477 11 11V13C11 13.5523 10.5523 14 10 14H8C7.44772 14 7 13.5523 7 13V11ZM14 10C13.4477 10 13 10.4477 13 11V13C13 13.5523 13.4477 14 14 14H16C16.5523 14 17 13.5523 17 13V11C17 10.4477 16.5523 10 16 10H14Z" fill="%23000"/></svg>');
-}
-
-%sort-asc-16-svg-prop {
-  --sort-asc-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M15.78 5.72a.75.75 0 01-1.06 1.06L13 5.06v4.69a.75.75 0 01-1.5 0V5.06L9.78 6.78a.75.75 0 01-1.06-1.06l3-3a.748.748 0 01.528-.22h.004a.748.748 0 01.528.22l3 3zM3 10.5A.75.75 0 013 9h6a.75.75 0 010 1.5H3zM2.25 12.75c0 .414.336.75.75.75h10a.75.75 0 000-1.5H3a.75.75 0 00-.75.75zM3 7.5A.75.75 0 013 6h3a.75.75 0 010 1.5H3zM2.25 3.75c0 .414.336.75.75.75h3A.75.75 0 006 3H3a.75.75 0 00-.75.75z"/></g></svg>');
-}
-
-%sort-asc-24-svg-prop {
-  --sort-asc-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.963 3.057a.748.748 0 01.817.163l4 4a.75.75 0 01-1.06 1.06L18 5.56v8.19a.75.75 0 01-1.5 0V5.56l-2.72 2.72a.75.75 0 11-1.06-1.06l4-4a.748.748 0 01.243-.163zM3.75 14.5a.75.75 0 010-1.5h9.5a.75.75 0 010 1.5h-9.5zM3 17.75c0 .414.336.75.75.75h16.5a.75.75 0 000-1.5H3.75a.75.75 0 00-.75.75zM3.75 10.5a.75.75 0 010-1.5h5.5a.75.75 0 010 1.5h-5.5zM3 5.75c0 .414.336.75.75.75h3.5a.75.75 0 000-1.5h-3.5a.75.75 0 00-.75.75z"/></g></svg>');
-}
-
-%sort-desc-16-svg-prop {
-  --sort-desc-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.25 3.75A.75.75 0 013 3h10a.75.75 0 010 1.5H3a.75.75 0 01-.75-.75zM3 6a.75.75 0 000 1.5h6A.75.75 0 009 6H3zM11.963 13.943a.747.747 0 00.817-.163l3-3a.75.75 0 10-1.06-1.06L13 11.44V6.75a.75.75 0 00-1.5 0v4.69L9.78 9.72a.75.75 0 00-1.06 1.06l3 3a.748.748 0 00.243.163zM3 9a.75.75 0 000 1.5h3A.75.75 0 006 9H3zM2.25 12.75A.75.75 0 013 12h3a.75.75 0 010 1.5H3a.75.75 0 01-.75-.75z"/></g></svg>');
-}
-
-%sort-desc-24-svg-prop {
-  --sort-desc-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3 5.75A.75.75 0 013.75 5h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 5.75zM3.75 9a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM16.963 20.443a.747.747 0 00.817-.163l4-4a.75.75 0 10-1.06-1.06L18 17.94V9.75a.75.75 0 00-1.5 0v8.19l-2.72-2.72a.75.75 0 10-1.06 1.06l4 4a.748.748 0 00.243.163zM3.75 13a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5zM3 17.75a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75z"/></g></svg>');
-}
-
-%sort-svg-prop {
-  @extend %sort-desc-16-svg-prop;
-}
-
-%source-file-svg-prop {
-  @extend %file-source-16-svg-prop;
-}
-
-%speaker-16-svg-prop {
-  --speaker-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 5.55a3.95 3.95 0 100 7.9 3.95 3.95 0 000-7.9zM5.45 9.5a2.55 2.55 0 115.1 0 2.55 2.55 0 01-5.1 0z"/><path d="M3.25 0A2.25 2.25 0 001 2.25v11.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75V2.25A2.25 2.25 0 0012.75 0h-9.5zM2.5 2.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v11.5a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V2.25z"/></g></svg>');
-}
-
-%speaker-24-svg-prop {
-  --speaker-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 9a5 5 0 100 10 5 5 0 000-10zm-3.5 5a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z"/><path d="M5.75 1A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V3.75A2.75 2.75 0 0018.25 1H5.75zM4.5 3.75c0-.69.56-1.25 1.25-1.25h12.5c.69 0 1.25.56 1.25 1.25v16.5c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V3.75z"/></g></svg>');
-}
-
-%square-16-svg-prop {
-  --square-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-9.5z" clip-rule="evenodd"/></svg>');
-}
-
-%square-24-svg-prop {
-  --square-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"/></svg>');
-}
-
-%square-fill-16-svg-prop {
-  --square-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5z"/></svg>');
-}
-
-%square-fill-24-svg-prop {
-  --square-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75z"/></svg>');
-}
-
-%star-16-svg-prop {
-  --star-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 .5a.75.75 0 01.67.412l2.064 4.094 4.622.662a.75.75 0 01.412 1.285l-3.335 3.18.786 4.488a.75.75 0 01-1.082.796L8 13.287l-4.137 2.13a.75.75 0 01-1.082-.796l.786-4.489-3.335-3.18a.75.75 0 01.412-1.284l4.622-.662L7.33.912A.75.75 0 018 .5zm0 2.416L6.43 6.03a.75.75 0 01-.564.405l-3.48.498 2.507 2.39a.75.75 0 01.22.672l-.594 3.396 3.138-1.616a.75.75 0 01.686 0l3.138 1.616-.595-3.396a.75.75 0 01.221-.672l2.507-2.39-3.48-.498a.75.75 0 01-.563-.405L8 2.916z" clip-rule="evenodd"/></svg>');
-}
-
-%star-24-svg-prop {
-  --star-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1a.75.75 0 01.673.418l2.992 6.065 6.694.978a.75.75 0 01.414 1.28l-4.842 4.717 1.143 6.665a.75.75 0 01-1.089.79L12 18.766l-5.985 3.149a.75.75 0 01-1.089-.79l1.143-6.666-4.842-4.717a.75.75 0 01.415-1.28l6.693-.978 2.992-6.065A.75.75 0 0112 1zm0 2.445L9.505 8.5a.75.75 0 01-.564.41l-5.58.816 4.037 3.933a.75.75 0 01.216.664l-.952 5.556 4.989-2.625a.75.75 0 01.698 0l4.99 2.625-.953-5.556a.75.75 0 01.216-.664l4.037-3.933-5.58-.816a.75.75 0 01-.564-.41L12 3.445z" clip-rule="evenodd"/></svg>');
-}
-
-%star-circle-16-svg-prop {
-  --star-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.679 2.431a.75.75 0 00-1.358 0L6.023 5.196l-2.887.444a.75.75 0 00-.423 1.265l2.11 2.162-.499 3.062a.75.75 0 001.103.777L8 11.484l2.573 1.422a.75.75 0 001.103-.777l-.5-3.062 2.11-2.162a.75.75 0 00-.422-1.265l-2.887-.444-1.298-2.765zM7.21 6.195L8 4.515l.789 1.68a.75.75 0 00.565.423l1.84.283L9.838 8.29a.75.75 0 00-.203.644l.312 1.912-1.584-.876a.75.75 0 00-.726 0l-1.584.876.312-1.912a.75.75 0 00-.203-.644L4.806 6.9l1.84-.282a.75.75 0 00.565-.423z"/><path d="M8 .05a7.95 7.95 0 100 15.9A7.95 7.95 0 008 .05zM1.45 8a6.55 6.55 0 1113.1 0 6.55 6.55 0 01-13.1 0z"/></g></svg>');
-}
-
-%star-circle-24-svg-prop {
-  --star-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12.669 4.91a.75.75 0 00-1.338 0l-1.91 3.767-4.277.608a.75.75 0 00-.41 1.287l3.082 2.923-.726 4.125a.75.75 0 001.08.798L12 16.457l3.83 1.96a.75.75 0 001.08-.797l-.726-4.125 3.082-2.923a.75.75 0 00-.41-1.287l-4.278-.608L12.67 4.91zm-2.086 4.793L12 6.91l1.417 2.794a.75.75 0 00.563.404l3.128.445-2.25 2.132a.75.75 0 00-.222.675l.535 3.036-2.83-1.448a.75.75 0 00-.683 0l-2.83 1.448.536-3.036a.75.75 0 00-.223-.675l-2.249-2.132 3.128-.445a.75.75 0 00.563-.404z"/><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></g></svg>');
-}
-
-%star-fill-16-svg-prop {
-  --star-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8.67.912a.75.75 0 00-1.34 0L5.266 5.006l-4.622.662a.75.75 0 00-.412 1.285l3.335 3.18-.786 4.488a.75.75 0 001.082.796L8 13.287l4.137 2.13a.75.75 0 001.082-.796l-.786-4.489 3.335-3.18a.75.75 0 00-.412-1.284l-4.622-.662L8.67.912z"/></svg>');
-}
-
-%star-fill-24-svg-prop {
-  --star-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12.673 1.418a.75.75 0 00-1.345 0L8.335 7.483l-6.693.978a.75.75 0 00-.415 1.28l4.842 4.717-1.143 6.665a.75.75 0 001.089.79L12 18.766l5.985 3.149a.75.75 0 001.089-.79l-1.143-6.666 4.842-4.717a.75.75 0 00-.415-1.28l-6.693-.978-2.992-6.065z"/></svg>');
-}
-
-%star-fill-svg-prop {
-  @extend %star-fill-16-svg-prop;
-}
-
-%star-off-16-svg-prop {
-  --star-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.67.912a.75.75 0 00-1.34 0l-.882 1.75a.75.75 0 001.34.676L8 2.916 9.57 6.03c.11.219.321.37.564.405l3.48.498-1.299 1.238a.75.75 0 001.035 1.086l2.418-2.305a.75.75 0 00-.412-1.285l-4.622-.662L8.67.912z"/><path fill-rule="evenodd" d="M13.147 14.207l.072.413a.75.75 0 01-1.082.797L8 13.287l-4.137 2.13a.75.75 0 01-1.082-.796l.786-4.489-3.335-3.18a.75.75 0 01.412-1.284l3.467-.496L1.22 2.28a.75.75 0 111.06-1.06l12.5 12.5a.75.75 0 01-1.06 1.06l-.573-.572zm-7.71-7.71l-3.051.437 2.507 2.39a.75.75 0 01.22.672l-.594 3.396 3.138-1.616a.75.75 0 01.686 0l3.138 1.616-.18-1.03-5.865-5.865z" clip-rule="evenodd"/></g></svg>');
-}
-
-%star-off-24-svg-prop {
-  --star-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.673 1.418a.75.75 0 00-1.345 0l-1.584 3.21a.75.75 0 101.345.663L12 3.445 14.495 8.5a.75.75 0 00.564.41l5.58.816-2.756 2.685a.75.75 0 001.046 1.075l3.844-3.745a.75.75 0 00-.415-1.28l-6.693-.978-2.992-6.065z"/><path fill-rule="evenodd" d="M18.87 19.93l.204 1.193a.75.75 0 01-1.089.79L12 18.766l-5.985 3.149a.75.75 0 01-1.089-.79l1.143-6.666-4.842-4.717a.75.75 0 01.415-1.28l5.024-.734L1.22 2.28a.75.75 0 011.06-1.06l20.5 20.5a.75.75 0 11-1.06 1.06l-2.85-2.85zM7.988 9.05l-4.628.676 4.037 3.933a.75.75 0 01.216.664l-.952 5.556 4.989-2.625a.75.75 0 01.698 0l4.99 2.625-.307-1.786L7.99 9.049z" clip-rule="evenodd"/></g></svg>');
-}
-
-%star-outline-svg-prop {
-  @extend %star-16-svg-prop;
-}
-
-%stop-circle-16-svg-prop {
-  --stop-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M6.25 5C5.56 5 5 5.56 5 6.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C11 5.56 10.44 5 9.75 5h-3.5zm.25 4.5v-3h3v3h-3z"/><path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/></g></svg>');
-}
-
-%stop-circle-24-svg-prop {
-  --stop-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.75 7A1.75 1.75 0 007 8.75v6.5c0 .966.784 1.75 1.75 1.75h6.5A1.75 1.75 0 0017 15.25v-6.5A1.75 1.75 0 0015.25 7h-6.5zM8.5 8.75a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v6.5a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25v-6.5z"/><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></g></svg>');
-}
-
-%sub-left-svg-prop {
-  @extend %corner-down-left-16-svg-prop;
-}
-
-%sub-right-svg-prop {
-  @extend %corner-down-right-16-svg-prop;
-}
-
-%sun-16-svg-prop {
-  --sun-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 .25a.75.75 0 01.75.75v1.273a.75.75 0 01-1.5 0V1A.75.75 0 018 .25z"/><path fill-rule="evenodd" d="M4 8a4 4 0 118 0 4 4 0 01-8 0zm4-2.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z" clip-rule="evenodd"/><path d="M8.75 13.727a.75.75 0 00-1.5 0V15a.75.75 0 001.5 0v-1.273zM2.519 2.518a.75.75 0 011.06 0l.904.904a.75.75 0 01-1.06 1.06l-.904-.903a.75.75 0 010-1.06zM12.578 11.517a.75.75 0 00-1.061 1.06l.904.904a.75.75 0 101.06-1.06l-.903-.904zM.25 8A.75.75 0 011 7.25h1.273a.75.75 0 010 1.5H1A.75.75 0 01.25 8zM13.727 7.25a.75.75 0 000 1.5H15a.75.75 0 000-1.5h-1.273zM4.483 11.517a.75.75 0 010 1.06l-.904.904a.75.75 0 01-1.06-1.06l.903-.904a.75.75 0 011.061 0zM13.481 3.58a.75.75 0 00-1.06-1.062l-.904.904a.75.75 0 101.06 1.06l.904-.903z"/></g></svg>');
-}
-
-%sun-24-svg-prop {
-  --sun-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 .25a.75.75 0 01.75.75v2a.75.75 0 01-1.5 0V1A.75.75 0 0112 .25z"/><path fill-rule="evenodd" d="M6 12a6 6 0 1112 0 6 6 0 01-12 0zm6-4.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z" clip-rule="evenodd"/><path d="M12.75 21a.75.75 0 00-1.5 0v2a.75.75 0 001.5 0v-2zM3.69 3.69a.75.75 0 011.06 0l1.42 1.42a.75.75 0 01-1.06 1.06L3.69 4.75a.75.75 0 010-1.06zM18.89 17.83a.75.75 0 10-1.06 1.06l1.42 1.42a.75.75 0 101.06-1.06l-1.42-1.42zM.25 12a.75.75 0 01.75-.75h2a.75.75 0 010 1.5H1A.75.75 0 01.25 12zM21 11.25a.75.75 0 000 1.5h2a.75.75 0 000-1.5h-2zM6.17 17.83a.75.75 0 010 1.06l-1.42 1.42a.75.75 0 11-1.06-1.06l1.42-1.42a.75.75 0 011.06 0zM20.31 4.75a.75.75 0 00-1.06-1.06l-1.42 1.42a.75.75 0 001.06 1.06l1.42-1.42z"/></g></svg>');
-}
-
-%support-16-svg-prop {
-  --support-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8c0-1.525.525-2.927 1.404-4.035l1.787 1.787A3.982 3.982 0 004 8c0 .834.255 1.608.691 2.248l-1.787 1.787A6.472 6.472 0 011.5 8zm2.465 5.096l1.787-1.787C6.392 11.745 7.166 12 8 12c.834 0 1.608-.255 2.248-.691l1.787 1.787A6.472 6.472 0 018 14.5a6.473 6.473 0 01-4.035-1.404zm9.131-1.06A6.472 6.472 0 0014.5 8a6.473 6.473 0 00-1.404-4.035l-1.787 1.787C11.745 6.392 12 7.166 12 8c0 .834-.255 1.608-.691 2.248l1.787 1.787zm-1.06-9.132A6.472 6.472 0 008 1.5a6.472 6.472 0 00-4.035 1.404l1.787 1.787A3.982 3.982 0 018 4c.834 0 1.608.255 2.248.691l1.787-1.787zM5.5 8a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z" clip-rule="evenodd"/></svg>');
-}
-
-%support-24-svg-prop {
-  --support-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M19.828 19.728A10.965 10.965 0 0023 12c0-3.012-1.21-5.742-3.172-7.728a.77.77 0 00-.1-.1A10.965 10.965 0 0012 1C8.988 1 6.258 2.21 4.272 4.172a.767.767 0 00-.1.1A10.965 10.965 0 001 12c0 3.012 1.21 5.742 3.172 7.728a.77.77 0 00.1.1A10.965 10.965 0 0012 23c3.012 0 5.742-1.21 7.728-3.172a.771.771 0 00.1-.1zM2.5 12c0-2.353.856-4.507 2.273-6.166l3.2 3.2A4.978 4.978 0 007 12c0 1.11.362 2.136.974 2.965l-3.201 3.201A9.462 9.462 0 012.5 12zm7.094 2.542A3.488 3.488 0 0012 15.5c.932 0 1.779-.364 2.406-.958a.769.769 0 01.136-.136A3.488 3.488 0 0015.5 12c0-.932-.364-1.779-.958-2.406a.768.768 0 01-.136-.136A3.488 3.488 0 0012 8.5c-.932 0-1.779.364-2.406.958a.768.768 0 01-.136.136A3.488 3.488 0 008.5 12c0 .932.364 1.779.958 2.406.05.039.097.086.136.136zm5.371 1.484A4.978 4.978 0 0112 17a4.978 4.978 0 01-2.965-.974l-3.201 3.201A9.462 9.462 0 0012 21.5a9.462 9.462 0 006.166-2.273l-3.2-3.2zm4.262 2.14l-3.2-3.2c.611-.83.973-1.856.973-2.966s-.362-2.136-.974-2.965l3.201-3.201A9.462 9.462 0 0121.5 12a9.462 9.462 0 01-2.273 6.166zm-1.06-13.393l-3.202 3.2A4.977 4.977 0 0012 7c-1.11 0-2.136.362-2.965.974L5.834 4.773A9.463 9.463 0 0112 2.5c2.353 0 4.507.856 6.166 2.273z" clip-rule="evenodd"/></svg>');
-}
-
-%support-svg-prop {
-  @extend %support-16-svg-prop;
-}
-
-%swap-horizontal-16-svg-prop {
-  --swap-horizontal-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M12.26 1.45a.75.75 0 10-1.02 1.1l2.1 1.95H7.75a.75.75 0 000 1.5h5.59l-2.1 1.95a.75.75 0 101.02 1.1l3.5-3.25a.75.75 0 000-1.1l-3.5-3.25zM2.66 10l2.1-1.95a.75.75 0 10-1.02-1.1L.24 10.2a.75.75 0 000 1.1l3.5 3.25a.75.75 0 001.02-1.1l-2.1-1.95h5.59a.75.75 0 000-1.5H2.66z"/></g></svg>');
-}
-
-%swap-horizontal-24-svg-prop {
-  --swap-horizontal-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M18.265 5.455a.75.75 0 00-1.03 1.09L20.364 9.5H11.75a.75.75 0 000 1.5h8.614l-3.129 2.955a.75.75 0 001.03 1.09l4.5-4.25a.75.75 0 000-1.09l-4.5-4.25zM3.636 13l3.129-2.955a.75.75 0 00-1.03-1.09l-4.5 4.25a.75.75 0 000 1.09l4.5 4.25a.75.75 0 001.03-1.09L3.636 14.5h8.614a.75.75 0 000-1.5H3.636z"/></g></svg>');
-}
-
-%swap-horizontal-svg-prop {
-  @extend %swap-horizontal-16-svg-prop;
-}
-
-%swap-vertical-16-svg-prop {
-  --swap-vertical-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.45 3.74a.75.75 0 001.1 1.02l1.95-2.1v5.59a.75.75 0 101.5 0V2.66l1.95 2.1a.75.75 0 101.1-1.02L5.8.24a.75.75 0 00-1.1 0l-3.25 3.5zM10.75 7a.75.75 0 00-.75.75v5.59l-1.95-2.1a.75.75 0 10-1.1 1.02l3.25 3.5a.75.75 0 001.1 0l3.25-3.5a.75.75 0 10-1.1-1.02l-1.95 2.1V7.75a.75.75 0 00-.75-.75z"/></g></svg>');
-}
-
-%swap-vertical-24-svg-prop {
-  --swap-vertical-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M4.455 5.735a.75.75 0 001.09 1.03L8.5 3.636v8.614a.75.75 0 001.5 0V3.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5zM15.5 20.364V11.75a.75.75 0 00-1.5 0v8.614l-2.955-3.129a.75.75 0 00-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03L15.5 20.364z"/></g></svg>');
-}
-
-%swap-vertical-svg-prop {
-  @extend %swap-vertical-16-svg-prop;
-}
-
-%switcher-16-svg-prop {
-  --switcher-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M.75 0A.75.75 0 000 .75v2.5c0 .414.336.75.75.75h2.5A.75.75 0 004 3.25V.75A.75.75 0 003.25 0H.75zM6.75 0A.75.75 0 006 .75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V.75A.75.75 0 009.25 0h-2.5zM12.75 0a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V.75a.75.75 0 00-.75-.75h-2.5zM.75 6a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5A.75.75 0 004 9.25v-2.5A.75.75 0 003.25 6H.75zM6.75 6a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5A.75.75 0 009.25 6h-2.5zM12.75 6a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75h-2.5zM.75 12a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75H.75zM6.75 12a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75h-2.5zM12.75 12a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75h-2.5z"/></g></svg>');
-}
-
-%switcher-24-svg-prop {
-  --switcher-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.25 1C1.56 1 1 1.56 1 2.25v3.5C1 6.44 1.56 7 2.25 7h3.5C6.44 7 7 6.44 7 5.75v-3.5C7 1.56 6.44 1 5.75 1h-3.5zM10.25 1C9.56 1 9 1.56 9 2.25v3.5C9 6.44 9.56 7 10.25 7h3.5C14.44 7 15 6.44 15 5.75v-3.5C15 1.56 14.44 1 13.75 1h-3.5zM18.25 1C17.56 1 17 1.56 17 2.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C22.44 7 23 6.44 23 5.75v-3.5C23 1.56 22.44 1 21.75 1h-3.5zM2.25 9C1.56 9 1 9.56 1 10.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 15 7 14.44 7 13.75v-3.5C7 9.56 6.44 9 5.75 9h-3.5zM10.25 9C9.56 9 9 9.56 9 10.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C15 9.56 14.44 9 13.75 9h-3.5zM18.25 9c-.69 0-1.25.56-1.25 1.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C23 9.56 22.44 9 21.75 9h-3.5zM2.25 17C1.56 17 1 17.56 1 18.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 23 7 22.44 7 21.75v-3.5C7 17.56 6.44 17 5.75 17h-3.5zM10.25 17C9.56 17 9 17.56 9 18.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-3.5zM18.25 17c-.69 0-1.25.56-1.25 1.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-3.5z"/></g></svg>');
-}
-
-%sync-16-svg-prop {
-  --sync-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 1.5A6.5 6.5 0 001.5 8 .75.75 0 010 8a8 8 0 0113.5-5.81v-.94a.75.75 0 011.5 0v3a.75.75 0 01-.75.75h-3a.75.75 0 010-1.5h1.44A6.479 6.479 0 008 1.5zM15.25 7.25A.75.75 0 0116 8a8 8 0 01-13.5 5.81v.94a.75.75 0 01-1.5 0v-3a.75.75 0 01.75-.75h3a.75.75 0 010 1.5H3.31A6.5 6.5 0 0014.5 8a.75.75 0 01.75-.75z"/></g></svg>');
-}
-
-%sync-24-svg-prop {
-  --sync-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3.5A8.5 8.5 0 003.5 12 .75.75 0 012 12C2 6.477 6.477 2 12 2a9.977 9.977 0 017.5 3.386V2.75a.75.75 0 011.5 0v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 010-1.5h2.731A8.48 8.48 0 0012 3.5zM21.25 11.25A.75.75 0 0122 12c0 5.523-4.477 10-10 10a9.977 9.977 0 01-7.5-3.386v2.636a.75.75 0 01-1.5 0v-4.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5H5.519A8.5 8.5 0 0020.5 12a.75.75 0 01.75-.75z"/></g></svg>');
-}
-
-%sync-alert-16-svg-prop {
-  --sync-alert-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 1.5A6.5 6.5 0 001.5 8 .75.75 0 010 8a8 8 0 0113.5-5.81v-.94a.75.75 0 011.5 0v3a.75.75 0 01-.75.75h-3a.75.75 0 010-1.5h1.44A6.479 6.479 0 008 1.5zM15.25 7.25A.75.75 0 0116 8a8 8 0 01-13.5 5.81v.94a.75.75 0 01-1.5 0v-3a.75.75 0 01.75-.75h3a.75.75 0 010 1.5H3.31A6.5 6.5 0 0014.5 8a.75.75 0 01.75-.75z"/><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/></g></svg>');
-}
-
-%sync-alert-24-svg-prop {
-  --sync-alert-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3.5A8.5 8.5 0 003.5 12 .75.75 0 012 12C2 6.477 6.477 2 12 2a9.977 9.977 0 017.5 3.386V2.75a.75.75 0 011.5 0v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 010-1.5h2.731A8.48 8.48 0 0012 3.5zM21.25 11.25A.75.75 0 0122 12c0 5.523-4.477 10-10 10a9.977 9.977 0 01-7.5-3.386v2.636a.75.75 0 01-1.5 0v-4.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5H5.519A8.5 8.5 0 0020.5 12a.75.75 0 01.75-.75z"/><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/></g></svg>');
-}
-
-%sync-reverse-16-svg-prop {
-  --sync-reverse-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 1.5A6.5 6.5 0 0114.5 8 .75.75 0 0016 8 8 8 0 002.5 2.19v-.94a.75.75 0 00-1.5 0v3c0 .414.336.75.75.75h3a.75.75 0 000-1.5H3.31A6.479 6.479 0 018 1.5zM.75 7.25A.75.75 0 000 8a8 8 0 0013.5 5.81v.94a.75.75 0 001.5 0v-3a.75.75 0 00-.75-.75h-3a.75.75 0 000 1.5h1.44A6.5 6.5 0 011.5 8a.75.75 0 00-.75-.75z"/></g></svg>');
-}
-
-%sync-reverse-24-svg-prop {
-  --sync-reverse-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3.5a8.5 8.5 0 018.5 8.5.75.75 0 001.5 0c0-5.523-4.477-10-10-10a9.977 9.977 0 00-7.5 3.386V2.75a.75.75 0 00-1.5 0v4.5c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5H5.519A8.48 8.48 0 0112 3.5zM2.75 11.25A.75.75 0 002 12c0 5.523 4.477 10 10 10a9.977 9.977 0 007.5-3.386v2.636a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.731A8.5 8.5 0 013.5 12a.75.75 0 00-.75-.75z"/></g></svg>');
-}
-
-%tablet-16-svg-prop {
-  --tablet-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 11a1 1 0 100 2h.01a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-9.5A2.25 2.25 0 0013.75 1H2.25zM1.5 3.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%tablet-24-svg-prop {
-  --tablet-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 17a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M3.75 3A2.75 2.75 0 001 5.75v12.5A2.75 2.75 0 003.75 21h16.5A2.75 2.75 0 0023 18.25V5.75A2.75 2.75 0 0020.25 3H3.75zM2.5 5.75c0-.69.56-1.25 1.25-1.25h16.5c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V5.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%tag-16-svg-prop {
-  --tag-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5 4a1 1 0 000 2h.006a1 1 0 000-2H5z"/><path fill-rule="evenodd" d="M2.25 1C1.56 1 1 1.56 1 2.25v5.246c0 .596.237 1.169.659 1.59l5.383 5.384a2.25 2.25 0 003.182 0l4.246-4.246a2.25 2.25 0 000-3.182L9.087 1.66A2.25 2.25 0 007.496 1H2.25zm.25 6.496V2.5h4.996a.75.75 0 01.53.22l5.383 5.383a.75.75 0 010 1.06L9.163 13.41a.75.75 0 01-1.06 0L2.72 8.026a.75.75 0 01-.22-.53z" clip-rule="evenodd"/></g></svg>');
-}
-
-%tag-24-svg-prop {
-  --tag-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6 5a1 1 0 000 2h.01a1 1 0 000-2H6z"/><path fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v6.422c0 .729.29 1.428.805 1.944l8 8a2.75 2.75 0 003.89 0l6.421-6.421a2.75 2.75 0 000-3.89l-8-8A2.75 2.75 0 0011.172 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25h6.422c.331 0 .649.132.883.366l8 8a1.25 1.25 0 010 1.768l-6.421 6.421a1.25 1.25 0 01-1.768 0l-8-8a1.25 1.25 0 01-.366-.883V4.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%tag-svg-prop {
-  @extend %tag-16-svg-prop;
-}
-
-%target-16-svg-prop {
-  --target-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 6a2 2 0 100 4 2 2 0 000-4zm-.5 2a.5.5 0 111 0 .5.5 0 01-1 0z"/><path d="M3 8a5 5 0 1110 0A5 5 0 013 8zm5-3.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"/><path d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z"/></g></svg>');
-}
-
-%target-24-svg-prop {
-  --target-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 9a3 3 0 100 6 3 3 0 000-6zm-1.5 3a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"/><path d="M5 12a7 7 0 1114 0 7 7 0 01-14 0zm7-5.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11z"/><path d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z"/></g></svg>');
-}
-
-%terminal-16-svg-prop {
-  --terminal-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.23 3.174a.75.75 0 00-.96 1.152L6.078 7.5 2.27 10.674a.75.75 0 10.96 1.152l4.5-3.75a.75.75 0 000-1.152l-4.5-3.75zM7.75 12a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5z"/></g></svg>');
-}
-
-%terminal-24-svg-prop {
-  --terminal-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M4.23 4.174a.75.75 0 00-.96 1.152L10.078 11 3.27 16.674a.75.75 0 10.96 1.152l7.5-6.25a.75.75 0 000-1.152l-7.5-6.25zM11.75 18a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"/></g></svg>');
-}
-
-%terminal-screen-16-svg-prop {
-  --terminal-screen-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.924 5.02a.75.75 0 011.056-.096l3 2.5a.75.75 0 010 1.152l-3 2.5a.75.75 0 11-.96-1.152L6.328 8 4.02 6.076a.75.75 0 01-.096-1.056zM8.25 10.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z"/><path fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h11.5A2.25 2.25 0 0116 3.25v9.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75H2.25z" clip-rule="evenodd"/></g></svg>');
-}
-
-%terminal-screen-24-svg-prop {
-  --terminal-screen-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.174 7.27a.75.75 0 011.056-.096l4.5 3.75a.75.75 0 010 1.152l-4.5 3.75a.75.75 0 11-.96-1.152l3.809-3.174-3.81-3.174a.75.75 0 01-.095-1.056zM11.75 16a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5z"/><path fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h16.5A2.75 2.75 0 0123 4.75v14.5A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25V4.75zM3.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75z" clip-rule="evenodd"/></g></svg>');
-}
-
-%terraform-16-svg-prop {
-  --terraform-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 0v5.05l4.349 2.527V2.526L1 0zM10.175 5.344l-4.35-2.525v5.05l4.35 2.527V5.344zM10.651 10.396V5.344L15 2.819v5.05l-4.349 2.527zM10.174 16l-4.349-2.526v-5.05l4.349 2.525V16z"/></g></svg>');
-}
-
-%terraform-24-svg-prop {
-  --terraform-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2 .6v7.197l6.212 3.6V4.2L2 .6zM15.107 8.215L8.893 4.618v7.197l6.214 3.6v-7.2zM15.788 15.414V8.215L22 4.618v7.197l-6.212 3.6zM15.105 23.4l-6.212-3.6v-7.197l6.212 3.6V23.4z"/></g></svg>');
-}
-
-%terraform-color-16-svg-prop {
-  --terraform-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%237B42BC" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.825 2.82l4.35 2.524v5.052L5.825 7.87V2.82zM10.651 5.344v5.052L15 7.87V2.82l-4.349 2.524zM1 0v5.05l4.349 2.527V2.526L1 0zM5.825 13.474L10.174 16v-5.051L5.825 8.423v5.051z"/></g></svg>');
-}
-
-%terraform-color-24-svg-prop {
-  --terraform-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%237B42BC" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.893 4.618l6.214 3.597v7.2l-6.214-3.6V4.618zM15.788 8.215v7.2l6.212-3.6V4.618l-6.212 3.597zM2 .6v7.197l6.212 3.6V4.2L2 .6zM8.893 19.8l6.212 3.6v-7.197l-6.212-3.6V19.8z"/></g></svg>');
-}
-
-%thumbs-down-16-svg-prop {
-  --thumbs-down-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.404 14.484l2.56-5.759V1.5H3.488a.75.75 0 00-.741.637l-.995 6.55a.75.75 0 00.742.862h3.767c.69 0 1.25.56 1.25 1.25v2.626c0 .53.385.972.892 1.06zM12.464 1.5v6.634h1.286a.75.75 0 00.75-.75V2.25a.75.75 0 00-.75-.75h-1.287zM12.2 9.634l-2.511 5.65A1.206 1.206 0 018.588 16a2.575 2.575 0 01-2.576-2.575v-2.376H2.495A2.25 2.25 0 01.27 8.46l.995-6.549A2.25 2.25 0 013.489 0H13.75A2.25 2.25 0 0116 2.25v5.134a2.25 2.25 0 01-2.25 2.25H12.2z" clip-rule="evenodd"/></svg>');
-}
-
-%thumbs-down-24-svg-prop {
-  --thumbs-down-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12.77 21.484l3.73-8.393V2.5H5.52a1.25 1.25 0 00-1.237 1.062l-1.442 9.5A1.25 1.25 0 004.077 14.5H9.25c.966 0 1.75.784 1.75 1.75v3.225c0 1.032.772 1.884 1.77 2.01zM18 2.5v10h2.25c.69 0 1.25-.56 1.25-1.25v-7.5c0-.69-.56-1.25-1.25-1.25H18zM17.737 14l-3.71 8.349a1.097 1.097 0 01-1.002.651A3.525 3.525 0 019.5 19.475V16.25a.25.25 0 00-.25-.25H4.077a2.75 2.75 0 01-2.72-3.163l1.443-9.5A2.75 2.75 0 015.52 1h14.73A2.75 2.75 0 0123 3.75v7.5A2.75 2.75 0 0120.25 14h-2.513z" clip-rule="evenodd"/></svg>');
-}
-
-%thumbs-up-16-svg-prop {
-  --thumbs-up-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.596 1.516l-2.56 5.759V14.5h7.475a.75.75 0 00.741-.637l.994-6.55a.75.75 0 00-.741-.862H9.738c-.69 0-1.25-.56-1.25-1.25V2.575c0-.53-.385-.972-.892-1.06zM3.536 14.5V7.866H2.25a.75.75 0 00-.75.75v5.134c0 .414.336.75.75.75h1.287zM3.8 6.366L6.31.716A1.206 1.206 0 017.412 0a2.575 2.575 0 012.576 2.575v2.376h3.517a2.25 2.25 0 012.224 2.588l-.994 6.549A2.25 2.25 0 0112.511 16H2.25A2.25 2.25 0 010 13.75V8.616a2.25 2.25 0 012.25-2.25H3.8z" clip-rule="evenodd"/></svg>');
-}
-
-%thumbs-up-24-svg-prop {
-  --thumbs-up-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M11.23 2.516L7.5 10.909V21.5h10.98a1.25 1.25 0 001.237-1.062l1.442-9.5A1.25 1.25 0 0019.923 9.5H14.75A1.75 1.75 0 0113 7.75V4.525a2.025 2.025 0 00-1.77-2.01zM6 21.5v-10H3.75c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25H6zM6.263 10l3.71-8.349A1.097 1.097 0 0110.975 1 3.525 3.525 0 0114.5 4.525V7.75c0 .138.112.25.25.25h5.173a2.75 2.75 0 012.72 3.163l-1.443 9.5A2.75 2.75 0 0118.48 23H3.75A2.75 2.75 0 011 20.25v-7.5A2.75 2.75 0 013.75 10h2.513z" clip-rule="evenodd"/></svg>');
-}
-
-%toggle-left-16-svg-prop {
-  --toggle-left-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3 8a2 2 0 114 0 2 2 0 01-4 0z"/><path fill-rule="evenodd" d="M5 3a5 5 0 000 10h6a5 5 0 000-10H5zM1.5 8A3.5 3.5 0 015 4.5h6a3.5 3.5 0 110 7H5A3.5 3.5 0 011.5 8z" clip-rule="evenodd"/></g></svg>');
-}
-
-%toggle-left-24-svg-prop {
-  --toggle-left-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 8a4 4 0 100 8 4 4 0 000-8zm-2.5 4a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"/><path d="M8 5a7 7 0 000 14h8a7 7 0 100-14H8zm-5.5 7A5.5 5.5 0 018 6.5h8a5.5 5.5 0 110 11H8A5.5 5.5 0 012.5 12z"/></g></svg>');
-}
-
-%toggle-right-16-svg-prop {
-  --toggle-right-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M13 8a2 2 0 10-4 0 2 2 0 004 0z"/><path fill-rule="evenodd" d="M11 3a5 5 0 010 10H5A5 5 0 015 3h6zm3.5 5A3.5 3.5 0 0011 4.5H5a3.5 3.5 0 100 7h6A3.5 3.5 0 0014.5 8z" clip-rule="evenodd"/></g></svg>');
-}
-
-%toggle-right-24-svg-prop {
-  --toggle-right-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 8a4 4 0 110 8 4 4 0 010-8zm2.5 4a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0z"/><path d="M16 5a7 7 0 110 14H8A7 7 0 118 5h8zm5.5 7A5.5 5.5 0 0016 6.5H8a5.5 5.5 0 100 11h8a5.5 5.5 0 005.5-5.5z"/></g></svg>');
-}
-
-%token-16-svg-prop {
-  --token-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.791 3.318L3.316 5.793a1 1 0 000 1.414l2.475 2.475a1 1 0 001.415 0L9.68 7.207a1 1 0 000-1.414L7.206 3.318a1 1 0 00-1.415 0zm.707 4.95L4.731 6.5l1.767-1.768L8.266 6.5 6.498 8.268z"/><path d="M0 6.5a6.5 6.5 0 0112.346-2.845 6.5 6.5 0 11-8.691 8.691A6.5 6.5 0 010 6.5zm6.5-5a5 5 0 100 10 5 5 0 000-10zm6.5 5c0-.201-.01-.4-.027-.597a5 5 0 11-7.07 7.07A6.5 6.5 0 0013 6.5z"/></g></svg>');
-}
-
-%token-24-svg-prop {
-  --token-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.762 5.228L5.227 8.763a1.75 1.75 0 000 2.475l3.535 3.535a1.75 1.75 0 002.475 0l3.536-3.535a1.75 1.75 0 000-2.475l-3.536-3.535a1.75 1.75 0 00-2.475 0zM6.287 9.824l3.536-3.536a.25.25 0 01.354 0l3.535 3.536a.25.25 0 010 .353l-3.535 3.536a.25.25 0 01-.354 0l-3.536-3.536a.25.25 0 010-.353z"/><path d="M1 10a9 9 0 0117.043-4.043A9 9 0 115.957 18.043 9 9 0 011 10zm9-7.5a7.5 7.5 0 100 15 7.5 7.5 0 000-15zm9 7.5c0-.594-.058-1.174-.167-1.736A7.5 7.5 0 118.264 18.833 9 9 0 0019 10z"/></g></svg>');
-}
-
-%tools-16-svg-prop {
-  --tools-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5 3v-.75A2.25 2.25 0 017.25 0h1.5A2.25 2.25 0 0111 2.25V3h.79a2.25 2.25 0 011.609.678l1.96 2.007c.411.42.641.985.641 1.573v5.492A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75V7.258c0-.588.23-1.152.64-1.573l1.961-2.007A2.25 2.25 0 014.211 3H5zm1.5-.75a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75V3h-3v-.75zM3.674 4.726a.75.75 0 01.537-.226h7.578a.75.75 0 01.537.226l1.96 2.008a.75.75 0 01.214.524V8h-4v-.25c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25V8h-4v-.742a.75.75 0 01.213-.524l1.961-2.008zM5.5 9.5h-4v3.25c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75V9.5h-4v.25c0 .69-.56 1.25-1.25 1.25h-2.5c-.69 0-1.25-.56-1.25-1.25V9.5zm1.5 0V8h2v1.5H7z" clip-rule="evenodd"/></svg>');
-}
-
-%tools-24-svg-prop {
-  --tools-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7 6V4.75A2.75 2.75 0 019.75 2h4.5A2.75 2.75 0 0117 4.75V6h.422c.729 0 1.428.29 1.944.805l2.829 2.829A2.75 2.75 0 0123 11.578v7.672A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25v-7.672c0-.729.29-1.428.805-1.944l2.829-2.829A2.75 2.75 0 016.578 6H7zm1.5-1.25c0-.69.56-1.25 1.25-1.25h4.5c.69 0 1.25.56 1.25 1.25V6h-7V4.75zM6.578 7.5c-.331 0-.649.132-.883.366l-2.829 2.829a1.25 1.25 0 00-.366.883V13H9v-.75c0-.69.56-1.25 1.25-1.25h3.5c.69 0 1.25.56 1.25 1.25V13h6.5v-1.422c0-.331-.132-.649-.366-.883l-2.829-2.829a1.25 1.25 0 00-.883-.366H6.578zM15 15.75V14.5h6.5v4.75c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V14.5H9v1.25c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25zm-4.5-3.25v3h3v-3h-3z" clip-rule="evenodd"/></svg>');
-}
-
-%top-16-svg-prop {
-  --top-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.5 2.5a.75.75 0 010-1.5H13a.75.75 0 010 1.5H2.5zM2.985 9.795a.75.75 0 001.06-.03L7 6.636v7.614a.75.75 0 001.5 0V6.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 00.03 1.06z"/></g></svg>');
-}
-
-%top-24-svg-prop {
-  --top-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.5 3.5a.75.75 0 010-1.5H20a.75.75 0 010 1.5H3.5zM4.98 13.79a.75.75 0 001.06-.02L11 8.612V21.25a.75.75 0 001.5 0V8.612l4.96 5.158a.75.75 0 101.08-1.04l-6.25-6.5a.75.75 0 00-1.08 0l-6.25 6.5a.75.75 0 00.02 1.06z"/></g></svg>');
-}
-
-%trash-16-svg-prop {
-  --trash-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.25 6a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 016.25 6zM10.5 6.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5z"/><path fill-rule="evenodd" d="M4 3v-.75A2.25 2.25 0 016.25 0h3.5A2.25 2.25 0 0112 2.25V3h2.25a.75.75 0 010 1.5H14v9.25A2.25 2.25 0 0111.75 16h-7.5A2.25 2.25 0 012 13.75V4.5h-.25a.75.75 0 010-1.5H4zm1.5-.75a.75.75 0 01.75-.75h3.5a.75.75 0 01.75.75V3h-5v-.75zm-2 2.25v9.25c0 .414.336.75.75.75h7.5a.75.75 0 00.75-.75V4.5h-9z" clip-rule="evenodd"/></g></svg>');
-}
-
-%trash-24-svg-prop {
-  --trash-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.75 9a.75.75 0 01.75.75v8.5a.75.75 0 01-1.5 0v-8.5A.75.75 0 019.75 9zM15 9.75a.75.75 0 00-1.5 0v8.5a.75.75 0 001.5 0v-8.5z"/><path fill-rule="evenodd" d="M7 5V3.75A2.75 2.75 0 019.75 1h4.5A2.75 2.75 0 0117 3.75V5h4.25a.75.75 0 010 1.5H20v13.75A2.75 2.75 0 0117.25 23H6.75A2.75 2.75 0 014 20.25V6.5H2.75a.75.75 0 010-1.5H7zm1.5-1.25c0-.69.56-1.25 1.25-1.25h4.5c.69 0 1.25.56 1.25 1.25V5h-7V3.75zm-3 2.75v13.75c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V6.5h-13z" clip-rule="evenodd"/></g></svg>');
-}
-
-%trash-svg-prop {
-  @extend %trash-16-svg-prop;
-}
-
-%trend-down-16-svg-prop {
-  --trend-down-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M1.28 3.22A.75.75 0 00.22 4.28l4.5 4.5a.75.75 0 00.894.126l3.96-2.2L13.6 11.5H10.75a.75.75 0 000 1.5h4.5a.75.75 0 00.75-.75v-4.5a.75.75 0 00-1.5 0v2.489l-4.176-4.971a.75.75 0 00-.938-.174L5.38 7.32l-4.1-4.1z"/></svg>');
-}
-
-%trend-down-24-svg-prop {
-  --trend-down-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M1.28 5.22A.75.75 0 00.22 6.28l7.5 7.5a.75.75 0 001.005.05L13.7 9.76l7.74 7.74h-4.69a.75.75 0 000 1.5h6.5a.75.75 0 00.75-.75v-6.5a.75.75 0 00-1.5 0v4.69l-8.22-8.22a.75.75 0 00-1.005-.05L8.3 12.24 1.28 5.22z"/></svg>');
-}
-
-%trend-up-16-svg-prop {
-  --trend-up-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M16 8.25a.75.75 0 01-1.5 0V5.761l-4.176 4.971a.75.75 0 01-.938.174L5.38 8.68l-4.1 4.1a.75.75 0 01-1.06-1.06l4.5-4.5a.75.75 0 01.894-.126l3.96 2.2L13.6 4.5H10.75a.75.75 0 010-1.5h4.5a.75.75 0 01.75.75v4.5z"/></svg>');
-}
-
-%trend-up-24-svg-prop {
-  --trend-up-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M24 12.25a.75.75 0 01-1.5 0V7.56l-8.22 8.22a.75.75 0 01-1.005.05L8.3 11.76l-7.02 7.02a.75.75 0 01-1.06-1.06l7.5-7.5a.75.75 0 011.005-.05l4.975 4.07 7.74-7.74h-4.69a.75.75 0 010-1.5h6.5a.75.75 0 01.75.75v6.5z"/></svg>');
-}
-
-%triangle-16-svg-prop {
-  --triangle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.978 1.515a2.101 2.101 0 012.807.731l.002.004 5.681 9.383a2.065 2.065 0 01-.751 2.832c-.314.183-.67.281-1.034.285H2.317a2.101 2.101 0 01-1.791-1.045 2.065 2.065 0 01.006-2.072l.006-.01L6.213 2.25l.002-.004c.187-.305.45-.557.763-.73zm.517 1.514l-.001.001-5.67 9.363a.565.565 0 00.214.776c.088.051.189.08.292.081h11.34a.601.601 0 00.504-.294.564.564 0 00.001-.563L8.506 3.03V3.03A.584.584 0 008 2.75a.601.601 0 00-.505.279z" clip-rule="evenodd"/></svg>');
-}
-
-%triangle-24-svg-prop {
-  --triangle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.658 2.366a2.651 2.651 0 012.684 0c.407.239.745.581.984.99l.002.004 8.315 14.46a2.86 2.86 0 01.008 2.758 2.757 2.757 0 01-.976 1.03c-.41.25-.877.386-1.357.392H3.682a2.653 2.653 0 01-1.357-.393 2.757 2.757 0 01-.975-1.029 2.86 2.86 0 01.007-2.758l.006-.01 8.31-14.45.001-.004a2.75 2.75 0 01.984-.99zm.313 1.744v.001L2.665 18.552a1.36 1.36 0 000 1.306c.108.198.262.36.443.47.18.11.382.169.586.172h16.61c.204-.003.406-.061.586-.172.181-.11.335-.272.444-.47a1.361 1.361 0 00-.001-1.306L13.03 4.112l-.001-.002a1.25 1.25 0 00-.446-.45 1.151 1.151 0 00-1.166 0 1.25 1.25 0 00-.446.45z" clip-rule="evenodd"/></svg>');
-}
-
-%triangle-fill-16-svg-prop {
-  --triangle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 1.25a2.101 2.101 0 00-1.785.996l.64.392-.642-.388-5.675 9.373-.006.01a2.065 2.065 0 00.751 2.832c.314.183.67.281 1.034.285h11.366a2.101 2.101 0 001.791-1.045 2.064 2.064 0 00-.006-2.072L9.788 2.25l-.003-.004A2.084 2.084 0 008 1.25z"/></svg>');
-}
-
-%triangle-fill-24-svg-prop {
-  --triangle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12 2c-.472 0-.934.127-1.342.366a2.75 2.75 0 00-.984.99l.648.378-.65-.374-8.31 14.45-.005.01a2.86 2.86 0 00-.007 2.758c.23.423.566.778.975 1.03.41.25.877.386 1.357.392h16.637c.479-.006.947-.142 1.356-.393.41-.25.744-.606.976-1.029a2.86 2.86 0 00-.008-2.758L14.328 3.36l-.002-.004a2.75 2.75 0 00-.984-.99A2.651 2.651 0 0012 2z"/></svg>');
-}
-
-%truck-16-svg-prop {
-  --truck-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h7a2.25 2.25 0 012.25 2.25v.328h.643a2.25 2.25 0 011.565.634l1.608 1.557A2.25 2.25 0 0116 7.385v2.865A1.75 1.75 0 0114.292 12a2.5 2.5 0 11-4.584 0H6.292a2.5 2.5 0 11-4.584 0A1.75 1.75 0 010 10.25v-7zM12 12a1 1 0 100 2 1 1 0 000-2zm2.25-1.5a.25.25 0 00.25-.25V7.385a.75.75 0 00-.228-.538l-1.608-1.558a.75.75 0 00-.521-.211H11.5V10.5h2.75zm-4.25 0H1.75a.25.25 0 01-.25-.25v-7a.75.75 0 01.75-.75h7a.75.75 0 01.75.75v7.25zM3 13a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"/></svg>');
-}
-
-%truck-24-svg-prop {
-  --truck-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M0 4.75A2.75 2.75 0 012.75 2h11.5A2.75 2.75 0 0117 4.75V6h1.245c.74 0 1.447.297 1.965.825l3.004 3.067A2.75 2.75 0 0124 11.817v3.433A1.75 1.75 0 0122.25 17h-1.014a3 3 0 11-4.472 0H7.236a3 3 0 11-4.472 0H1.75A1.75 1.75 0 010 15.25V4.75zm15.5 0c0-.69-.56-1.25-1.25-1.25H2.75c-.69 0-1.25.56-1.25 1.25v10.5c0 .138.112.25.25.25H15.5V4.75zM17 15.5v-8h1.245c.336 0 .658.135.893.375l3.005 3.067c.229.233.357.547.357.874v3.434a.25.25 0 01-.25.25H17zm-12 2a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM17.5 19a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/></svg>');
-}
-
-%tune-svg-prop {
-  @extend %sliders-16-svg-prop;
-}
-
-%tv-16-svg-prop {
-  --tv-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.624.334a.75.75 0 00-1.248.832L6.599 3H2.25A2.25 2.25 0 000 5.25v7.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-7.5A2.25 2.25 0 0013.75 3H9.401l1.223-1.834A.75.75 0 109.376.334L8 2.398 6.624.334zM7.989 4.5a.798.798 0 00.022 0h5.739a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-7.5a.75.75 0 01.75-.75h5.739z" clip-rule="evenodd"/></svg>');
-}
-
-%tv-24-svg-prop {
-  --tv-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.379 1.341a.75.75 0 10-1.258.818L10.618 6H3.75A2.75 2.75 0 001 8.75v11.5A2.75 2.75 0 003.75 23h16.5A2.75 2.75 0 0023 20.25V8.75A2.75 2.75 0 0020.25 6h-6.868l2.497-3.841a.75.75 0 00-1.258-.818L12 5.374 9.379 1.34zm2.61 6.159a.725.725 0 00.022 0h8.239c.69 0 1.25.56 1.25 1.25v11.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V8.75c0-.69.56-1.25 1.25-1.25h8.239z" clip-rule="evenodd"/></svg>');
-}
-
-%twitch-16-svg-prop {
-  --twitch-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.5 1L2 3.5v9h3V15l2.5-2.5h2L14 8V1H4.5zM13 7.5l-2 2H9l-1.75 1.75V9.5H5V2h8v5.5z"/><path d="M11.5 3.75h-1v3h1v-3zM8.75 3.75h-1v3h1v-3z"/></g></svg>');
-}
-
-%twitch-24-svg-prop {
-  --twitch-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.5 1L2.57 4.929V19.07h4.715V23l3.928-3.929h3.143L21.428 12V1H6.5zm13.357 10.214l-3.143 3.143h-3.143l-2.75 2.75v-2.75H7.286V2.571h12.571v8.643z"/><path d="M17.5 5.321h-1.572v4.715H17.5V5.32zM13.178 5.321h-1.571v4.715h1.571V5.32z"/></g></svg>');
-}
-
-%twitch-color-16-svg-prop {
-  --twitch-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23fff" d="M13 7.5l-2 2H9l-1.75 1.75V9.5H5V2h8v5.5z"/><g fill="%239146FF"><path d="M4.5 1L2 3.5v9h3V15l2.5-2.5h2L14 8V1H4.5zM13 7.5l-2 2H9l-1.75 1.75V9.5H5V2h8v5.5z"/><path d="M11.5 3.75h-1v3h1v-3zM8.75 3.75h-1v3h1v-3z"/></g></svg>');
-}
-
-%twitch-color-24-svg-prop {
-  --twitch-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23fff" d="M19.857 11.214l-3.143 3.143h-3.143l-2.75 2.75v-2.75H7.286V2.571h12.571v8.643z"/><g fill="%239146FF"><path d="M6.5 1L2.57 4.929V19.07h4.715V23l3.928-3.929h3.143L21.428 12V1H6.5zm13.357 10.214l-3.143 3.143h-3.143l-2.75 2.75v-2.75H7.286V2.571h12.571v8.643z"/><path d="M17.5 5.321h-1.572v4.715H17.5V5.32zM13.178 5.321h-1.571v4.715h1.571V5.32z"/></g></svg>');
-}
-
-%twitter-16-svg-prop {
-  --twitter-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.567 5.144c.008.123.008.247.008.371 0 3.796-2.889 8.173-8.172 8.173v-.002A8.131 8.131 0 011 12.398a5.768 5.768 0 004.25-1.19 2.876 2.876 0 01-2.683-1.995c.431.083.875.066 1.297-.05A2.873 2.873 0 011.56 6.348v-.036c.4.222.847.345 1.304.36a2.876 2.876 0 01-.89-3.836 8.152 8.152 0 005.92 3 2.874 2.874 0 014.895-2.619 5.763 5.763 0 001.824-.697 2.883 2.883 0 01-1.262 1.588A5.712 5.712 0 0015 3.656a5.834 5.834 0 01-1.433 1.488z"/></svg>');
-}
-
-%twitter-24-svg-prop {
-  --twitter-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M20.748 7.512c.013.194.013.388.013.584 0 5.964-4.54 12.842-12.842 12.842v-.003A12.777 12.777 0 011 18.91a9.063 9.063 0 006.68-1.87 4.52 4.52 0 01-4.217-3.135 4.5 4.5 0 002.038-.078 4.514 4.514 0 01-3.62-4.424v-.057c.627.35 1.33.543 2.048.565a4.52 4.52 0 01-1.397-6.027 12.81 12.81 0 009.302 4.716 4.518 4.518 0 017.692-4.117c1.01-.2 1.98-.57 2.866-1.096a4.53 4.53 0 01-1.984 2.497A8.977 8.977 0 0023 5.174a9.169 9.169 0 01-2.252 2.338z"/></svg>');
-}
-
-%twitter-color-16-svg-prop {
-  --twitter-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%231D9BF0" d="M13.567 5.144c.008.123.008.247.008.371 0 3.796-2.889 8.173-8.172 8.173v-.002A8.131 8.131 0 011 12.398a5.768 5.768 0 004.25-1.19 2.876 2.876 0 01-2.683-1.995c.431.083.875.066 1.297-.05A2.873 2.873 0 011.56 6.348v-.036c.4.222.847.345 1.304.36a2.876 2.876 0 01-.89-3.836 8.152 8.152 0 005.92 3 2.874 2.874 0 014.895-2.619 5.763 5.763 0 001.824-.697 2.883 2.883 0 01-1.262 1.588A5.712 5.712 0 0015 3.656a5.834 5.834 0 01-1.433 1.488z"/></svg>');
-}
-
-%twitter-color-24-svg-prop {
-  --twitter-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%231D9BF0" d="M20.748 7.512c.013.194.013.388.013.584 0 5.964-4.54 12.842-12.842 12.842v-.003A12.777 12.777 0 011 18.91a9.063 9.063 0 006.68-1.87 4.52 4.52 0 01-4.217-3.135 4.5 4.5 0 002.038-.078 4.514 4.514 0 01-3.62-4.424v-.057c.627.35 1.33.543 2.048.565a4.52 4.52 0 01-1.397-6.027 12.81 12.81 0 009.302 4.716 4.518 4.518 0 017.692-4.117c1.01-.2 1.98-.57 2.866-1.096a4.53 4.53 0 01-1.984 2.497A8.977 8.977 0 0023 5.174a9.169 9.169 0 01-2.252 2.338z"/></svg>');
-}
-
-%type-16-svg-prop {
-  --type-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M2 2.75A.75.75 0 012.75 2h10a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V3.5H8.5v9H10a.75.75 0 010 1.5H5.5a.75.75 0 010-1.5H7v-9H3.5v.75a.75.75 0 01-1.5 0v-1.5z"/></svg>');
-}
-
-%type-24-svg-prop {
-  --type-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M3 3.75A.75.75 0 013.75 3h16a.75.75 0 01.75.75v2.5a.75.75 0 01-1.5 0V4.5h-6.5v15h2a.75.75 0 010 1.5H9a.75.75 0 010-1.5h2v-15H4.5v1.75a.75.75 0 01-1.5 0v-2.5z"/></svg>');
-}
-
-%unfold-close-16-svg-prop {
-  --unfold-close-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 6a.75.75 0 00.55-.24l3.25-3.5a.75.75 0 10-1.1-1.02L8 4.148 5.3 1.24a.75.75 0 00-1.1 1.02l3.25 3.5A.75.75 0 008 6zM8 10a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L8 11.852 5.3 14.76a.75.75 0 11-1.1-1.02l3.25-3.5A.75.75 0 018 10zM1.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM4.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM7.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM10.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5zM13.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5z"/></g></svg>');
-}
-
-%unfold-close-24-svg-prop {
-  --unfold-close-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 9a.75.75 0 00.543-.232l5.25-5.5a.75.75 0 10-1.085-1.036L12 7.164 7.293 2.232a.75.75 0 00-1.086 1.036l5.25 5.5A.75.75 0 0012 9zM12 15a.75.75 0 01.543.232l5.25 5.5a.75.75 0 01-1.085 1.036L12 16.836l-4.707 4.932a.75.75 0 01-1.086-1.036l5.25-5.5A.75.75 0 0112 15zM1.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM11.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM16.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM21.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5z"/></g></svg>');
-}
-
-%unfold-less-svg-prop {
-  @extend %unfold-close-16-svg-prop;
-}
-
-%unfold-more-svg-prop {
-  @extend %unfold-open-16-svg-prop;
-}
-
-%unfold-open-16-svg-prop {
-  --unfold-open-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 1a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L8 2.852 5.3 5.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 018 1zM8 15a.75.75 0 00.55-.24l3.25-3.5a.75.75 0 10-1.1-1.02L8 13.148 5.3 10.24a.75.75 0 10-1.1 1.02l3.25 3.5A.75.75 0 008 15zM1.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM4.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM7.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM10.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5zM13.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5z"/></g></svg>');
-}
-
-%unfold-open-24-svg-prop {
-  --unfold-open-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 2a.75.75 0 01.543.232l5.25 5.5a.75.75 0 11-1.085 1.036L12 3.836 7.293 8.768a.75.75 0 01-1.086-1.036l5.25-5.5A.75.75 0 0112 2zM12 22a.75.75 0 00.543-.232l5.25-5.5a.75.75 0 00-1.085-1.036L12 20.164l-4.707-4.932a.75.75 0 00-1.086 1.036l5.25 5.5A.75.75 0 0012 22zM1.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM11.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM16.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM21.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5z"/></g></svg>');
-}
-
-%union-svg-prop {
-  --union-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V9V10H1H9V9H1L1 0H0Z" fill="%23000"/></svg>');
-}
-
-%unlock-16-svg-prop {
-  --unlock-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.239 2.25A2.46 2.46 0 0112 1.5c.657 0 1.29.267 1.761.75.471.483.739 1.142.739 1.833a.75.75 0 001.5 0 4.127 4.127 0 00-1.165-2.88A3.96 3.96 0 0012 0a3.96 3.96 0 00-2.835 1.203A4.127 4.127 0 008 4.083V5H2.25A2.25 2.25 0 000 7.25v5.5A2.25 2.25 0 002.25 15h7.5A2.25 2.25 0 0012 12.75v-5.5A2.25 2.25 0 009.75 5H9.5v-.917c0-.69.268-1.35.739-1.833zm-8.739 5a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v5.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75v-5.5z" clip-rule="evenodd"/></svg>');
-}
-
-%unlock-24-svg-prop {
-  --unlock-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M14.805 3.758A4.636 4.636 0 0118 2.5c1.205 0 2.354.456 3.195 1.258.84.8 1.305 1.877 1.305 2.992a.75.75 0 001.5 0 5.632 5.632 0 00-1.77-4.079A6.136 6.136 0 0018 1c-1.58 0-3.102.597-4.23 1.671A5.632 5.632 0 0012 6.75V10H3.75A2.75 2.75 0 001 12.75v7.5A2.75 2.75 0 003.75 23h10.5A2.75 2.75 0 0017 20.25v-7.5A2.75 2.75 0 0014.25 10h-.75V6.75c0-1.115.465-2.192 1.305-2.992zM3.75 11.5c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-7.5c0-.69-.56-1.25-1.25-1.25H3.75z" clip-rule="evenodd"/></svg>');
-}
-
-%upload-16-svg-prop {
-  --upload-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z"/><path d="M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z"/></g></svg>');
-}
-
-%upload-24-svg-prop {
-  --upload-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.232 8.793a.75.75 0 001.06-.025l3.958-4.146V15.25a.75.75 0 001.5 0V4.622l3.957 4.146a.75.75 0 001.085-1.036l-5.25-5.5a.747.747 0 00-1.086.001l-5.249 5.5a.75.75 0 00.025 1.06z"/><path d="M2.75 14a.75.75 0 01.75.75v4.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25v-4.5a.75.75 0 011.5 0v4.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25v-4.5a.75.75 0 01.75-.75z"/></g></svg>');
-}
-
-%upload-svg-prop {
-  @extend %upload-16-svg-prop;
-}
-
-%user-16-svg-prop {
-  --user-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M8 1a4 4 0 100 8 4 4 0 000-8zM5.5 5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z" clip-rule="evenodd"/><path d="M5.25 10a3.75 3.75 0 00-3.75 3.75v.5a.75.75 0 001.5 0v-.5a2.25 2.25 0 012.25-2.25h5.5A2.25 2.25 0 0113 13.75v.5a.75.75 0 001.5 0v-.5A3.75 3.75 0 0010.75 10h-5.5z"/></g></svg>');
-}
-
-%user-24-svg-prop {
-  --user-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M12 3a5 5 0 100 10 5 5 0 000-10zM8.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"/><path d="M7.75 14.5A4.75 4.75 0 003 19.25v1a.75.75 0 001.5 0v-1A3.25 3.25 0 017.75 16h8.5a3.25 3.25 0 013.25 3.25v1a.75.75 0 001.5 0v-1a4.75 4.75 0 00-4.75-4.75h-8.5z"/></g></svg>');
-}
-
-%user-add-svg-prop {
-  @extend %user-plus-16-svg-prop;
-}
-
-%user-check-16-svg-prop {
-  --user-check-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM4 5.5a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/><path d="M4.25 10A3.75 3.75 0 00.5 13.75v.5a.75.75 0 001.5 0v-.5a2.25 2.25 0 012.25-2.25h3.5A2.25 2.25 0 0110 13.75v.5a.75.75 0 001.5 0v-.5A3.75 3.75 0 007.75 10h-3.5zM14.78 6.22a.75.75 0 010 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1-1a.75.75 0 111.06-1.06l.47.47 1.97-1.97a.75.75 0 011.06 0z"/></g></svg>');
-}
-
-%user-check-24-svg-prop {
-  --user-check-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M9 3a5 5 0 100 10A5 5 0 009 3zM5.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"/><path d="M4.75 14.5A4.75 4.75 0 000 19.25v1a.75.75 0 001.5 0v-1A3.25 3.25 0 014.75 16h8.5a3.25 3.25 0 013.25 3.25v1a.75.75 0 001.5 0v-1a4.75 4.75 0 00-4.75-4.75h-8.5zM23.28 8.72a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 111.06-1.06l1.47 1.47 3.47-3.47a.75.75 0 011.06 0z"/></g></svg>');
-}
-
-%user-circle-16-svg-prop {
-  --user-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 3a3 3 0 100 6 3 3 0 000-6zM6.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"/><path d="M.25 8a7.75 7.75 0 1115.5 0A7.75 7.75 0 01.25 8zM8 1.75a6.25 6.25 0 00-5.274 9.604c.15-.194.325-.369.514-.533C3.855 10.286 4.67 10 5.5 10h5c.83 0 1.645.286 2.26.82.189.165.365.34.514.534A6.25 6.25 0 008 1.75zm0 12.5a6.228 6.228 0 01-4.238-1.656c.035-.196.153-.372.462-.641.323-.281.78-.453 1.276-.453h5c.495 0 .953.172 1.276.453.31.269.427.445.462.641A6.228 6.228 0 018 14.25z"/></g></svg>');
-}
-
-%user-circle-24-svg-prop {
-  --user-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 4.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9zM9 9a3 3 0 116 0 3 3 0 01-6 0z"/><path d="M.25 12C.25 5.51 5.51.25 12 .25S23.75 5.51 23.75 12 18.49 23.75 12 23.75.25 18.49.25 12zM12 1.75C6.34 1.75 1.75 6.34 1.75 12c0 2.298.756 4.42 2.034 6.13A4.752 4.752 0 018.25 15h7.5a4.752 4.752 0 014.466 3.13A10.204 10.204 0 0022.25 12c0-5.66-4.59-10.25-10.25-10.25zm0 20.5c-2.702 0-5.16-1.045-6.99-2.753A3.25 3.25 0 018.25 16.5h7.5a3.25 3.25 0 013.24 2.997A10.214 10.214 0 0112 22.25z"/></g></svg>');
-}
-
-%user-circle-fill-16-svg-prop {
-  --user-circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M.25 8a7.75 7.75 0 1115.5 0A7.75 7.75 0 01.25 8zm3.19 1.833A3.24 3.24 0 015.624 9h4.75a3.24 3.24 0 012.186.833c.528.484.939 1.048.939 1.917a.75.75 0 01-1.5 0c0-.284-.09-.478-.452-.81-.3-.275-.722-.44-1.173-.44h-4.75c-.451 0-.872.165-1.173.44-.363.332-.452.526-.452.81a.75.75 0 01-1.5 0c0-.869.411-1.433.94-1.917zM6.5 5a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM8 2a3 3 0 100 6 3 3 0 000-6z" clip-rule="evenodd"/></svg>');
-}
-
-%user-circle-fill-24-svg-prop {
-  --user-circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M.25 12C.25 5.51 5.51.25 12 .25S23.75 5.51 23.75 12 18.49 23.75 12 23.75.25 18.49.25 12zM4 18a4 4 0 014-4h8a4 4 0 014 4v.25a.75.75 0 01-1.5 0V18a2.5 2.5 0 00-2.5-2.5H8A2.5 2.5 0 005.5 18v.25a.75.75 0 01-1.5 0V18zM9 8a3 3 0 116 0 3 3 0 01-6 0zm3-4.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z" clip-rule="evenodd"/></svg>');
-}
-
-%user-minus-16-svg-prop {
-  --user-minus-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M2.5 5.5a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0zm3.5-2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd"/><path d="M.5 13.75A3.75 3.75 0 014.25 10h3.5a3.75 3.75 0 013.75 3.75v.5a.75.75 0 01-1.5 0v-.5a2.25 2.25 0 00-2.25-2.25h-3.5A2.25 2.25 0 002 13.75v.5a.75.75 0 01-1.5 0v-.5zM11.25 7.5a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5z"/></g></svg>');
-}
-
-%user-minus-24-svg-prop {
-  --user-minus-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M4 8a5 5 0 1110 0A5 5 0 014 8zm5-3.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z" clip-rule="evenodd"/><path d="M0 19.25a4.75 4.75 0 014.75-4.75h8.5A4.75 4.75 0 0118 19.25v1a.75.75 0 01-1.5 0v-1A3.25 3.25 0 0013.25 16h-8.5a3.25 3.25 0 00-3.25 3.25v1a.75.75 0 01-1.5 0v-1zM16.75 10.5a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5z"/></g></svg>');
-}
-
-%user-organization-svg-prop {
-  @extend %org-16-svg-prop;
-}
-
-%user-plain-svg-prop {
-  @extend %user-16-svg-prop;
-}
-
-%user-plus-16-svg-prop {
-  --user-plus-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM4 5.5a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/><path d="M4.25 10A3.75 3.75 0 00.5 13.75v.5a.75.75 0 001.5 0v-.5a2.25 2.25 0 012.25-2.25h3.5A2.25 2.25 0 0110 13.75v.5a.75.75 0 001.5 0v-.5A3.75 3.75 0 007.75 10h-3.5zM10.25 8.25A.75.75 0 0111 7.5h1v-1a.75.75 0 011.5 0v1h1a.75.75 0 010 1.5h-1v1a.75.75 0 01-1.5 0V9h-1a.75.75 0 01-.75-.75z"/></g></svg>');
-}
-
-%user-plus-24-svg-prop {
-  --user-plus-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M9 3a5 5 0 100 10A5 5 0 009 3zM5.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"/><path d="M4.75 14.5A4.75 4.75 0 000 19.25v1a.75.75 0 001.5 0v-1A3.25 3.25 0 014.75 16h8.5a3.25 3.25 0 013.25 3.25v1a.75.75 0 001.5 0v-1a4.75 4.75 0 00-4.75-4.75h-8.5zM15.75 11.25a.75.75 0 01.75-.75h2v-2a.75.75 0 011.5 0v2h2a.75.75 0 010 1.5h-2v2a.75.75 0 01-1.5 0v-2h-2a.75.75 0 01-.75-.75z"/></g></svg>');
-}
-
-%user-square-fill-svg-prop {
-  @extend %user-circle-fill-16-svg-prop;
-}
-
-%user-square-outline-svg-prop {
-  @extend %user-circle-16-svg-prop;
-}
-
-%user-team-svg-prop {
-  @extend %users-16-svg-prop;
-}
-
-%user-x-16-svg-prop {
-  --user-x-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM4 5.5a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/><path d="M4.25 10A3.75 3.75 0 00.5 13.75v.5a.75.75 0 001.5 0v-.5a2.25 2.25 0 012.25-2.25h3.5A2.25 2.25 0 0110 13.75v.5a.75.75 0 001.5 0v-.5A3.75 3.75 0 007.75 10h-3.5zM11.22 5.22a.75.75 0 011.06 0l1.22 1.22 1.22-1.22a.75.75 0 111.06 1.06L14.56 7.5l1.22 1.22a.75.75 0 01-1.06 1.06L13.5 8.56l-1.22 1.22a.75.75 0 11-1.06-1.06l1.22-1.22-1.22-1.22a.75.75 0 010-1.06z"/></g></svg>');
-}
-
-%user-x-24-svg-prop {
-  --user-x-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M9 3a5 5 0 100 10A5 5 0 009 3zM5.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"/><path d="M4.75 14.5A4.75 4.75 0 000 19.25v1a.75.75 0 001.5 0v-1A3.25 3.25 0 014.75 16h8.5a3.25 3.25 0 013.25 3.25v1a.75.75 0 001.5 0v-1a4.75 4.75 0 00-4.75-4.75h-8.5zM16.22 8.22a.75.75 0 011.06 0L19 9.94l1.72-1.72a.75.75 0 111.06 1.06L20.06 11l1.72 1.72a.75.75 0 11-1.06 1.06L19 12.06l-1.72 1.72a.75.75 0 11-1.06-1.06L17.94 11l-1.72-1.72a.75.75 0 010-1.06z"/></g></svg>');
-}
-
-%users-16-svg-prop {
-  --users-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM4 5.5a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/><path d="M4.25 10A3.75 3.75 0 00.5 13.75v.5a.75.75 0 001.5 0v-.5a2.25 2.25 0 012.25-2.25h3.5A2.25 2.25 0 0110 13.75v.5a.75.75 0 001.5 0v-.5A3.75 3.75 0 007.75 10h-3.5zM11.25 10.75A.75.75 0 0112 10h.25a3.25 3.25 0 013.25 3.25v1a.75.75 0 01-1.5 0v-1a1.75 1.75 0 00-1.75-1.75H12a.75.75 0 01-.75-.75zM11.273 2.24a.75.75 0 00-.546 1.396 2.001 2.001 0 010 3.728.75.75 0 00.546 1.397 3.501 3.501 0 000-6.522z"/></g></svg>');
-}
-
-%users-24-svg-prop {
-  --users-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M9 3a5 5 0 100 10A5 5 0 009 3zM5.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"/><path d="M4.75 14.5A4.75 4.75 0 000 19.25v1a.75.75 0 001.5 0v-1A3.25 3.25 0 014.75 16h8.5a3.25 3.25 0 013.25 3.25v1a.75.75 0 001.5 0v-1a4.75 4.75 0 00-4.75-4.75h-8.5zM18.25 15.25a.75.75 0 01.75-.75h.25A4.75 4.75 0 0124 19.25v1a.75.75 0 01-1.5 0v-1A3.25 3.25 0 0019.25 16H19a.75.75 0 01-.75-.75zM15 3a.75.75 0 000 1.5 3.5 3.5 0 110 7 .75.75 0 000 1.5 5 5 0 000-10z"/></g></svg>');
-}
-
-%vagrant-16-svg-prop {
-  --vagrant-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.08.75L9.924 2.58v1.123L8 8.245 6.076 3.703V2.58L2.92.75 1 1.864v1.293l4.276 10.514L8 15.25l2.724-1.579L15 3.157V1.864L13.08.75z"/></svg>');
-}
-
-%vagrant-24-svg-prop {
-  --vagrant-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M19.983.6l-4.96 2.877v1.767L12 12.384l-3.023-7.14V3.477L4.017.6 1 2.352v2.034l6.719 16.532L12 23.4l4.281-2.482L23 4.386V2.352L19.983.6z"/></svg>');
-}
-
-%vagrant-color-16-svg-prop {
-  --vagrant-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%231868F2" d="M13.08.75L9.924 2.58v1.123L8 8.245 6.076 3.703V2.58L2.92.75 1 1.864v1.293l4.276 10.514L8 15.25l2.724-1.579L15 3.157V1.864L13.08.75z"/><path fill="%230850C5" d="M15 1.865l-3.157 1.829v1.124L9.28 10.57 8 11.312v3.939l2.724-1.579L15 3.158V1.865zM6.076 3.703V2.58l-1.92 1.113v1.125l2.564 5.751L8 9.827V8.245L6.076 3.703z"/></svg>');
-}
-
-%vagrant-color-24-svg-prop {
-  --vagrant-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%231868F2" d="M19.983.6l-4.96 2.877v1.767L12 12.384l-3.023-7.14V3.477L4.017.6 1 2.352v2.034l6.719 16.532L12 23.4l4.281-2.482L23 4.386V2.352L19.983.6z"/><path fill="%230850C5" d="M23 2.352l-4.96 2.875v1.77l-4.028 9.043L12 17.207V23.4l4.28-2.482L23 4.386V2.352zM8.977 5.244V3.477l-3.019 1.75v1.77l4.03 9.043L12 14.873v-2.488L8.977 5.244z"/></svg>');
-}
-
-%vault-16-svg-prop {
-  --vault-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M0 0l7.971 15.516L16 0H0zm6.732 6.16h-1.27V4.89h1.27v1.27zm0-1.906h-1.27V2.985h1.27v1.269zm1.904 3.81h-1.27v-1.27h1.27v1.27zm0-1.905h-1.27V4.89h1.27v1.27zm0-1.905h-1.27V2.985h1.27v1.269zm1.894 1.905H9.26V4.89h1.27v1.27zM9.26 4.254V2.985h1.27v1.269H9.26z"/></svg>');
-}
-
-%vault-24-svg-prop {
-  --vault-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M1 1l10.96 21.334L23 1H1zm9.256 8.469H8.51V7.723h1.746v1.746zm0-2.62H8.51V5.105h1.746v1.744zm2.618 5.238h-1.746v-1.746h1.746v1.746zm0-2.618h-1.746V7.723h1.746v1.746zm0-2.62h-1.746V5.105h1.746v1.744zm2.604 2.62h-1.746V7.723h1.746v1.746zm-1.746-2.62V5.105h1.746v1.744h-1.746z"/></svg>');
-}
-
-%vault-color-16-svg-prop {
-  --vault-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23FFD814" d="M0 0l7.971 15.516L16 0H0zm6.732 6.16h-1.27V4.89h1.27v1.27zm0-1.906h-1.27V2.985h1.27v1.269zm1.904 3.81h-1.27v-1.27h1.27v1.27zm0-1.905h-1.27V4.89h1.27v1.27zm0-1.905h-1.27V2.985h1.27v1.269zm1.894 1.905H9.26V4.89h1.27v1.27zM9.26 4.254V2.985h1.27v1.269H9.26z"/></svg>');
-}
-
-%vault-color-24-svg-prop {
-  --vault-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23FFD814" d="M1 1l10.96 21.334L23 1H1zm9.256 8.469H8.51V7.723h1.746v1.746zm0-2.62H8.51V5.105h1.746v1.744zm2.618 5.238h-1.746v-1.746h1.746v1.746zm0-2.618h-1.746V7.723h1.746v1.746zm0-2.62h-1.746V5.105h1.746v1.744zm2.604 2.62h-1.746V7.723h1.746v1.746zm-1.746-2.62V5.105h1.746v1.744h-1.746z"/></svg>');
-}
-
-%verified-16-svg-prop {
-  --verified-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.28 5.72a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 011.06-1.06l.97.97 3.47-3.47a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M6.402 1.22a2.75 2.75 0 013.196 0l.69.493c.154.11.332.184.519.215l.865.146a2.75 2.75 0 012.254 2.254l.146.866c.031.187.105.364.215.518l.493.69a2.75 2.75 0 010 3.197l-.493.69c-.11.154-.184.33-.215.518l-.146.865a2.75 2.75 0 01-2.254 2.254l-.865.146a1.25 1.25 0 00-.519.216l-.69.492a2.75 2.75 0 01-3.196 0l-.69-.492a1.25 1.25 0 00-.519-.216l-.865-.146a2.75 2.75 0 01-2.254-2.254l-.146-.865a1.25 1.25 0 00-.215-.519l-.493-.69a2.75 2.75 0 010-3.196l.493-.69a1.25 1.25 0 00.215-.518l.146-.866a2.75 2.75 0 012.254-2.254l.865-.146a1.25 1.25 0 00.519-.215l.69-.493zm2.324 1.22a1.25 1.25 0 00-1.453 0l-.69.493a2.75 2.75 0 01-1.14.474l-.865.146a1.25 1.25 0 00-1.025 1.025l-.146.865a2.75 2.75 0 01-.474 1.141l-.492.69a1.25 1.25 0 000 1.453l.492.69c.243.339.405.729.474 1.14l.146.865c.089.525.5.936 1.025 1.025l.865.146c.411.07.801.232 1.14.474l.69.493a1.25 1.25 0 001.454 0l.69-.493a2.75 2.75 0 011.14-.474l.865-.146a1.25 1.25 0 001.025-1.024l.146-.866a2.75 2.75 0 01.474-1.14l.492-.69a1.25 1.25 0 000-1.453l-.492-.69a2.75 2.75 0 01-.474-1.14l-.146-.866a1.25 1.25 0 00-1.025-1.025l-.865-.146a2.75 2.75 0 01-1.14-.474l-.69-.492z" clip-rule="evenodd"/></g></svg>');
-}
-
-%verified-24-svg-prop {
-  --verified-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.78 8.22a.75.75 0 010 1.06l-6.5 6.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 5.97-5.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M9.82 1.635a3.75 3.75 0 014.36 0l1.193.853c.278.198.597.33.934.387l1.492.252a3.75 3.75 0 013.074 3.074l.252 1.492c.056.337.189.656.387.934l.853 1.193a3.75 3.75 0 010 4.36l-.853 1.193a2.248 2.248 0 00-.387.934l-.252 1.492a3.75 3.75 0 01-3.074 3.073l-1.492.252a2.25 2.25 0 00-.934.388l-1.193.853a3.75 3.75 0 01-4.36 0l-1.193-.853a2.25 2.25 0 00-.934-.388l-1.492-.252A3.75 3.75 0 013.127 17.8l-.251-1.492a2.25 2.25 0 00-.388-.934l-.853-1.193a3.75 3.75 0 010-4.36l.853-1.193a2.25 2.25 0 00.388-.934l.251-1.492a3.75 3.75 0 013.074-3.074l1.492-.252a2.25 2.25 0 00.934-.387l1.193-.853zm3.488 1.22a2.25 2.25 0 00-2.616 0L9.5 3.709a3.75 3.75 0 01-1.556.646l-1.492.252A2.25 2.25 0 004.606 6.45l-.251 1.493a3.75 3.75 0 01-.647 1.555l-.852 1.194a2.25 2.25 0 000 2.616l.852 1.193c.331.463.552.995.647 1.556l.251 1.492c.16.945.9 1.685 1.845 1.844l1.492.252c.56.095 1.093.316 1.556.646l1.193.853a2.25 2.25 0 002.616 0l1.193-.852c.463-.331.995-.552 1.556-.647l1.492-.252a2.25 2.25 0 001.845-1.844l.252-1.492a3.75 3.75 0 01.646-1.556l.852-1.193a2.25 2.25 0 000-2.616l-.852-1.194a3.75 3.75 0 01-.647-1.555l-.251-1.493a2.25 2.25 0 00-1.845-1.844l-1.492-.252a3.75 3.75 0 01-1.556-.646l-1.193-.852z" clip-rule="evenodd"/></g></svg>');
-}
-
-%video-16-svg-prop {
-  --video-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 5.25A2.25 2.25 0 012.25 3h6.5A2.25 2.25 0 0111 5.25v.818l3.018-2.09C14.843 3.382 16 3.97 16 4.991v6.018c0 1.021-1.157 1.61-1.982 1.013L11 9.932v.818A2.25 2.25 0 018.75 13h-6.5A2.25 2.25 0 010 10.75v-5.5zM11 8c0 .067.033.13.088.168l3.412 2.363V5.47l-3.412 2.363A.204.204 0 0011 8zM9.5 5.25a.75.75 0 00-.75-.75h-6.5a.75.75 0 00-.75.75v5.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-5.5z" clip-rule="evenodd"/></svg>');
-}
-
-%video-24-svg-prop {
-  --video-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M0 6.75A2.75 2.75 0 012.75 4h11.5A2.75 2.75 0 0117 6.75v3.138l4.127-3.322C22.264 5.613 24 6.42 24 7.908v8.184c0 1.488-1.738 2.296-2.875 1.34L17 14.078v3.173A2.75 2.75 0 0114.25 20H2.75A2.75 2.75 0 010 17.25V6.75zm17 5.23c0 .103.047.201.127.267l4.95 4.026.011.01a.25.25 0 00.412-.19V7.907a.25.25 0 00-.412-.19l-.014.011-4.945 3.981a.345.345 0 00-.129.27zm-1.5-5.23c0-.69-.56-1.25-1.25-1.25H2.75c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h11.5c.69 0 1.25-.56 1.25-1.25V6.75z" clip-rule="evenodd"/></svg>');
-}
-
-%video-off-16-svg-prop {
-  --video-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06l.738.739A2.25 2.25 0 000 5.25v5.5A2.25 2.25 0 002.25 13h6.5a2.25 2.25 0 001.99-1.2l2.98 2.98a.75.75 0 101.06-1.06L2.28 1.22zm7.22 9.34L3.44 4.5H2.25a.75.75 0 00-.75.75v5.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.19z" clip-rule="evenodd"/><path d="M7.688 3a.75.75 0 000 1.5H8.75a.75.75 0 01.75.75v.733a1.544 1.544 0 002.424 1.27L14.5 5.47v5.54a.75.75 0 001.5 0V4.99c0-1.021-1.157-1.61-1.982-1.013L11.07 6.02a.045.045 0 01-.07-.037V5.25A2.25 2.25 0 008.75 3H7.687z"/></g></svg>');
-}
-
-%video-off-24-svg-prop {
-  --video-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06L2.94 4h-.19A2.75 2.75 0 000 6.75v10.5A2.75 2.75 0 002.75 20h11.5c1.271 0 2.34-.862 2.656-2.034l4.814 4.814a.75.75 0 101.06-1.06L2.28 1.22zM15.5 16.56L4.44 5.5H2.75c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h11.5c.69 0 1.25-.56 1.25-1.25v-.69z" clip-rule="evenodd"/><path d="M10.5 4a.75.75 0 000 1.5h3.75c.69 0 1.25.56 1.25 1.25v3.514a1.32 1.32 0 002.148 1.028l4.426-3.563.014-.012a.25.25 0 01.412.19v8.185c0 .06-.015.101-.035.133a.253.253 0 01-.096.087.75.75 0 00.708 1.322c.527-.281.923-.84.923-1.542V7.908c0-1.487-1.736-2.295-2.873-1.342L17 9.888V6.75A2.75 2.75 0 0014.25 4H10.5z"/></g></svg>');
-}
-
-%visibility-hide-svg-prop {
-  @extend %eye-off-16-svg-prop;
-}
-
-%visibility-show-svg-prop {
-  @extend %eye-16-svg-prop;
-}
-
-%vmware-16-svg-prop {
-  --vmware-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M1.677 5.14c-.201-.46-.698-.67-1.162-.454-.465.216-.636.756-.426 1.218l1.949 4.436c.306.696.63 1.06 1.236 1.06.647 0 .93-.397 1.236-1.06l1.717-3.916a.247.247 0 01.245-.166c.146.001.27.124.27.288v3.79c0 .585.308 1.064.904 1.064.595 0 .916-.48.916-1.064V7.235c0-.599.41-.987.968-.987s.929.402.929.987v3.101c0 .585.31 1.064.905 1.064s.918-.48.918-1.064V7.235c0-.599.408-.987.966-.987.557 0 .93.402.93.987v3.101c0 .585.31 1.064.905 1.064.594 0 .917-.48.917-1.064v-3.53C16 5.51 15.004 4.6 13.805 4.6c-1.197 0-1.947.867-1.947.867-.4-.54-.949-.866-1.878-.866-.982 0-1.84.866-1.84.866-.4-.54-1.078-.866-1.64-.866-.87 0-1.56.4-1.982 1.41L3.274 9.082 1.677 5.14z"/></svg>');
-}
-
-%vmware-24-svg-prop {
-  --vmware-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M4.096 8.468c-.251-.57-.873-.829-1.453-.562-.58.267-.795.934-.532 1.505l2.436 5.48c.383.859.787 1.309 1.545 1.309.81 0 1.163-.49 1.545-1.309l2.147-4.838a.309.309 0 01.306-.204.345.345 0 01.336.355v4.682c0 .722.387 1.314 1.131 1.314s1.146-.592 1.146-1.314v-3.832c0-.739.512-1.218 1.21-1.218.697 0 1.16.497 1.16 1.218v3.832c0 .722.389 1.314 1.132 1.314.743 0 1.147-.592 1.147-1.314v-3.832c0-.739.51-1.218 1.208-1.218.696 0 1.162.497 1.162 1.218v3.832c0 .722.388 1.314 1.131 1.314.744 0 1.147-.592 1.147-1.314v-4.36C22 8.922 20.755 7.8 19.256 7.8c-1.497 0-2.434 1.072-2.434 1.072-.498-.669-1.185-1.07-2.347-1.07-1.227 0-2.3 1.07-2.3 1.07-.499-.669-1.348-1.07-2.05-1.07-1.087 0-1.95.494-2.477 1.74l-1.556 3.795-1.996-4.869z"/></svg>');
-}
-
-%vmware-color-16-svg-prop {
-  --vmware-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23696566" d="M1.677 5.14c-.201-.46-.698-.67-1.162-.454-.465.216-.636.756-.426 1.218l1.949 4.436c.306.696.63 1.06 1.236 1.06.647 0 .93-.397 1.236-1.06l1.717-3.916a.247.247 0 01.245-.165c.146 0 .27.123.27.287v3.79c0 .585.308 1.064.904 1.064.595 0 .916-.48.916-1.064V7.235c0-.599.41-.987.968-.987s.929.402.929.987v3.101c0 .585.31 1.064.905 1.064s.918-.48.918-1.064V7.235c0-.599.408-.987.966-.987.557 0 .93.402.93.987v3.101c0 .585.31 1.064.905 1.064.594 0 .917-.48.917-1.064v-3.53C16 5.51 15.004 4.6 13.805 4.6c-1.197 0-1.947.868-1.947.868-.4-.542-.949-.867-1.878-.867-.982 0-1.84.867-1.84.867-.4-.542-1.078-.867-1.64-.867-.87 0-1.56.4-1.982 1.41L3.274 9.082 1.677 5.14z"/></svg>');
-}
-
-%vmware-color-24-svg-prop {
-  --vmware-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23696566" d="M4.096 8.468c-.251-.57-.873-.829-1.453-.562-.58.267-.795.934-.532 1.505l2.436 5.48c.383.859.787 1.31 1.545 1.31.81 0 1.163-.491 1.545-1.31l2.147-4.838a.309.309 0 01.306-.204.345.345 0 01.336.355v4.682c0 .722.387 1.314 1.131 1.314s1.146-.592 1.146-1.314v-3.831c0-.74.512-1.219 1.21-1.219.697 0 1.16.497 1.16 1.219v3.831c0 .722.389 1.314 1.132 1.314.743 0 1.147-.592 1.147-1.314v-3.831c0-.74.51-1.219 1.208-1.219.696 0 1.162.497 1.162 1.219v3.831c0 .722.388 1.314 1.131 1.314.744 0 1.147-.592 1.147-1.314v-4.36C22 8.922 20.755 7.8 19.256 7.8c-1.497 0-2.434 1.072-2.434 1.072-.498-.669-1.185-1.07-2.347-1.07-1.227 0-2.3 1.07-2.3 1.07-.499-.669-1.348-1.07-2.05-1.07-1.087 0-1.95.494-2.477 1.74l-1.556 3.795-1.996-4.869z"/></svg>');
-}
-
-%volume-16-svg-prop {
-  --volume-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.5 4.19L4.524 6.274a1.25 1.25 0 01-.717.226H1.5v3h2.307c.256 0 .506.079.717.226L7.5 11.809V4.19zm-.467-1.504A1.25 1.25 0 019 3.71v8.58a1.25 1.25 0 01-1.967 1.024L3.728 11H1.25C.56 11 0 10.44 0 9.75v-3.5C0 5.56.56 5 1.25 5h2.478l3.305-2.314z" clip-rule="evenodd"/></svg>');
-}
-
-%volume-2-16-svg-prop {
-  --volume-2-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M13.242 2.184a.75.75 0 10-.984 1.132C13.709 4.578 14.5 6.266 14.5 8s-.79 3.422-2.242 4.684a.75.75 0 00.984 1.132C14.992 12.293 16 10.204 16 8c0-2.204-1.008-4.293-2.758-5.816z"/><path fill-rule="evenodd" d="M7.033 2.686A1.25 1.25 0 019 3.71v8.58a1.25 1.25 0 01-1.967 1.024L3.728 11H1.25C.56 11 0 10.44 0 9.75v-3.5C0 5.56.56 5 1.25 5h2.478l3.305-2.314zM7.5 4.19L4.523 6.274a1.25 1.25 0 01-.716.226H1.5v3h2.307c.256 0 .506.079.716.226L7.5 11.809V4.19z" clip-rule="evenodd"/><path d="M10.701 5.239a.75.75 0 011.06-.038A3.826 3.826 0 0113 8c0 1.06-.453 2.066-1.239 2.799A.75.75 0 1110.74 9.7c.494-.46.761-1.074.761-1.701s-.267-1.24-.761-1.701a.75.75 0 01-.038-1.06z"/></g></svg>');
-}
-
-%volume-2-24-svg-prop {
-  --volume-2-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M18.72 4.22a.75.75 0 011.06 0 11.009 11.009 0 010 15.56.75.75 0 11-1.06-1.06 9.51 9.51 0 000-13.44.75.75 0 010-1.06z"/><path fill-rule="evenodd" d="M9.046 4.804C10.162 3.748 12 4.538 12 6.074v11.851c0 1.536-1.838 2.327-2.954 1.27l-3.3-3.127A.25.25 0 005.574 16H2.75A1.75 1.75 0 011 14.25v-4.5C1 8.783 1.784 8 2.75 8h2.824a.25.25 0 00.172-.069l3.3-3.127zm1.454 1.27a.25.25 0 00-.422-.18l-3.3 3.126a1.75 1.75 0 01-1.204.48H2.75a.25.25 0 00-.25.25v4.5c0 .138.112.25.25.25h2.824c.448 0 .878.171 1.203.48l3.301 3.127a.25.25 0 00.422-.182V6.075z" clip-rule="evenodd"/><path d="M16.271 7.96a.75.75 0 10-1.042 1.08A4.118 4.118 0 0116.5 12c0 1.105-.454 2.17-1.271 2.96a.75.75 0 101.042 1.08A5.617 5.617 0 0018 12c0-1.52-.625-2.972-1.729-4.04z"/></g></svg>');
-}
-
-%volume-24-svg-prop {
-  --volume-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.5 6.075a.25.25 0 00-.422-.182l-3.3 3.127a1.75 1.75 0 01-1.204.48H2.75a.25.25 0 00-.25.25v4.5c0 .138.112.25.25.25h2.824c.448 0 .878.171 1.203.48l3.301 3.127a.25.25 0 00.422-.182V6.075zm-1.454-1.27C10.162 3.747 12 4.537 12 6.074v11.85c0 1.536-1.838 2.327-2.954 1.27l-3.3-3.127A.25.25 0 005.574 16H2.75A1.75 1.75 0 011 14.25v-4.5C1 8.783 1.784 8 2.75 8h2.824a.25.25 0 00.172-.069l3.3-3.127z" clip-rule="evenodd"/></svg>');
-}
-
-%volume-down-16-svg-prop {
-  --volume-down-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M9 3.71a1.25 1.25 0 00-1.967-1.024L3.728 5H1.25C.56 5 0 5.56 0 6.25v3.5C0 10.44.56 11 1.25 11h2.478l3.305 2.314A1.25 1.25 0 009 12.29V3.71zM4.524 6.274L7.5 4.19v7.62L4.524 9.725a1.25 1.25 0 00-.717-.226H1.5v-3h2.307c.256 0 .506-.079.717-.226z" clip-rule="evenodd"/><path d="M11.761 5.201A.75.75 0 0010.74 6.3c.494.46.761 1.074.761 1.701s-.267 1.24-.761 1.701A.75.75 0 1011.76 10.8 3.826 3.826 0 0013 8c0-1.06-.453-2.066-1.239-2.799z"/></g></svg>');
-}
-
-%volume-down-24-svg-prop {
-  --volume-down-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M12 6.075c0-1.537-1.838-2.327-2.954-1.27l-3.3 3.126A.25.25 0 015.574 8H2.75A1.75 1.75 0 001 9.75v4.5c0 .966.784 1.75 1.75 1.75h2.824a.25.25 0 01.172.068l3.3 3.127c1.116 1.057 2.954.266 2.954-1.27V6.075zm-1.922-.182a.25.25 0 01.422.182v11.85a.25.25 0 01-.422.181l-3.3-3.127a1.75 1.75 0 00-1.204-.48H2.75a.25.25 0 01-.25-.25v-4.5a.25.25 0 01.25-.25h2.824a1.75 1.75 0 001.203-.479l3.301-3.127z" clip-rule="evenodd"/><path d="M16.271 7.96a.75.75 0 10-1.042 1.08A4.118 4.118 0 0116.5 12c0 1.105-.454 2.17-1.271 2.96a.75.75 0 101.042 1.08A5.617 5.617 0 0018 12c0-1.52-.625-2.972-1.729-4.04z"/></g></svg>');
-}
-
-%volume-x-16-svg-prop {
-  --volume-x-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M7.033 2.686A1.25 1.25 0 019 3.71v8.58a1.25 1.25 0 01-1.967 1.024L3.728 11H1.25C.56 11 0 10.44 0 9.75v-3.5C0 5.56.56 5 1.25 5h2.478l3.305-2.314zM7.5 4.19L4.524 6.274a1.25 1.25 0 01-.717.226H1.5v3h2.307c.256 0 .506.079.717.226L7.5 11.809V4.19z" clip-rule="evenodd"/><path d="M15.28 5.72a.75.75 0 010 1.06L14.06 8l1.22 1.22a.75.75 0 11-1.06 1.06L13 9.06l-1.22 1.22a.75.75 0 11-1.06-1.06L11.94 8l-1.22-1.22a.75.75 0 011.06-1.06L13 6.94l1.22-1.22a.75.75 0 011.06 0z"/></g></svg>');
-}
-
-%volume-x-24-svg-prop {
-  --volume-x-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M9.046 4.804C10.162 3.748 12 4.538 12 6.074v11.851c0 1.536-1.838 2.327-2.954 1.27l-3.3-3.127A.25.25 0 005.574 16H2.75A1.75 1.75 0 011 14.25v-4.5C1 8.783 1.784 8 2.75 8h2.824a.25.25 0 00.172-.069l3.3-3.127zm1.454 1.27a.25.25 0 00-.422-.18l-3.3 3.126a1.75 1.75 0 01-1.204.48H2.75a.25.25 0 00-.25.25v4.5c0 .138.112.25.25.25h2.824c.448 0 .878.171 1.203.48l3.301 3.127a.25.25 0 00.422-.182V6.075z" clip-rule="evenodd"/><path d="M22.78 8.22a.75.75 0 010 1.06L20.06 12l2.72 2.72a.75.75 0 11-1.06 1.06L19 13.06l-2.72 2.72a.75.75 0 11-1.06-1.06L17.94 12l-2.72-2.72a.75.75 0 011.06-1.06L19 10.94l2.72-2.72a.75.75 0 011.06 0z"/></g></svg>');
-}
-
-%wall-16-svg-prop {
-  --wall-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-9.5A2.25 2.25 0 0013.75 1H2.25zM4.5 2.5H2.25a.75.75 0 00-.75.75V5h3V2.5zm-3 4v3H7v-3H1.5zm0 4.5v1.75c0 .414.336.75.75.75H4.5V11h-3zM6 13.5h4V11H6v2.5zm5.5 0h2.25a.75.75 0 00.75-.75V11h-3v2.5zm3-4v-3h-6v3h6zm0-4.5V3.25a.75.75 0 00-.75-.75H11.5V5h3zM10 2.5V5H6V2.5h4z" clip-rule="evenodd"/></svg>');
-}
-
-%wall-24-svg-prop {
-  --wall-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.75 2A2.75 2.75 0 001 4.75v14.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V4.75A2.75 2.75 0 0020.25 2H3.75zM6.5 3.5H3.75c-.69 0-1.25.56-1.25 1.25V8h4V3.5zm-4 6v5H11v-5H2.5zm0 6.5v3.25c0 .69.56 1.25 1.25 1.25H6.5V16h-4zM8 20.5h8V16H8v4.5zm9.5 0h2.75c.69 0 1.25-.56 1.25-1.25V16h-4v4.5zm4-6v-5h-9v5h9zm0-6.5V4.75c0-.69-.56-1.25-1.25-1.25H17.5V8h4zM16 3.5V8H8V3.5h8z" clip-rule="evenodd"/></svg>');
-}
-
-%watch-16-svg-prop {
-  --watch-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9 6.25a.75.75 0 00-1.5 0V8.5c0 .323.207.61.513.712l1.5.5a.75.75 0 10.474-1.424L9 7.96V6.25z"/><path fill-rule="evenodd" d="M4.574 1.932A2.25 2.25 0 016.8 0h2.398c1.12 0 2.07.823 2.227 1.932l.288 2.011A5.485 5.485 0 0113.5 8a5.485 5.485 0 01-1.786 4.057l-.288 2.011A2.25 2.25 0 019.2 16H6.801a2.25 2.25 0 01-2.227-1.932l-.288-2.011A5.485 5.485 0 012.5 8c0-1.606.688-3.051 1.786-4.057l.288-2.011zM5.95 13.106l.107.75a.75.75 0 00.743.644h2.398a.75.75 0 00.742-.644l.108-.75A5.485 5.485 0 018 13.5c-.724 0-1.416-.14-2.049-.394zm3.99-10.962l.108.75A5.485 5.485 0 008 2.5c-.724 0-1.416.14-2.049.394l.107-.75a.75.75 0 01.743-.644h2.398a.75.75 0 01.742.644zM4 8a4 4 0 118 0 4 4 0 01-8 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%watch-24-svg-prop {
-  --watch-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.5 8.25a.75.75 0 00-1.5 0v4.25c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L12.5 12.036V8.25z"/><path fill-rule="evenodd" d="M7.464 2.258A2.75 2.75 0 0110.169 0h3.662a2.75 2.75 0 012.706 2.258l.666 3.665A7.982 7.982 0 0120 12a7.982 7.982 0 01-2.797 6.077l-.666 3.665A2.75 2.75 0 0113.83 24h-3.662a2.75 2.75 0 01-2.705-2.258l-.667-3.665A7.982 7.982 0 014 12a7.982 7.982 0 012.797-6.077l.667-3.665zM8.528 19.21l.411 2.265a1.25 1.25 0 001.23 1.026h3.662a1.25 1.25 0 001.23-1.026l.411-2.265A7.968 7.968 0 0112 20a7.97 7.97 0 01-3.472-.79zM15.06 2.526l.411 2.265A7.968 7.968 0 0012 4a7.968 7.968 0 00-3.472.79l.411-2.264A1.25 1.25 0 0110.17 1.5h3.662a1.25 1.25 0 011.23 1.026zM5.5 12a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%waypoint-16-svg-prop {
-  --waypoint-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4 5.312h1.334L10 13.4l3.334-5.777L10.666 3H8l2.666 4.623L10 8.778 6.667 3H0l6 10.4 1.333-2.31L4 5.311zM14.002 6.463L16 3h-3.996l1.998 3.463z"/></g></svg>');
-}
-
-%waypoint-24-svg-prop {
-  --waypoint-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6 8.468h2L15 20.6l5-8.666L16 5h-4l4 6.934-1 1.733L10 5H0l9 15.6 2-3.466-5-8.666zM21.003 10.194L24 5h-5.994l2.997 5.194z"/></g></svg>');
-}
-
-%waypoint-color-16-svg-prop {
-  --waypoint-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%2314C6CB"><path d="M16 3l-1.998 3.463L12.004 3H16zM5.334 5.312H4l3.332 5.777L6 13.4 0 3h6.667L10 8.778l.666-1.155L8 3h2.666L12 5.312l1.334 2.31L10 13.4 5.334 5.312z"/></g></svg>');
-}
-
-%waypoint-color-24-svg-prop {
-  --waypoint-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%2314C6CB"><path d="M24 5l-2.997 5.194L18.006 5H24zM8 8.468H6l5 8.666L9 20.6 0 5h10l5 8.667 1-1.733L12 5h4l2 3.468 2 3.466-5 8.666L8 8.468z"/></g></svg>');
-}
-
-%webhook-16-svg-prop {
-  --webhook-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.032 4.132c0-1.039.843-1.882 1.886-1.882.709 0 1.328.39 1.65.97a.75.75 0 101.311-.728A3.385 3.385 0 007.918.75a3.383 3.383 0 00-3.386 3.382c0 .94.385 1.79 1.003 2.402l-2.054 3.594a1.25 1.25 0 00.151 2.49h.007a1.25 1.25 0 001.146-1.75l2.369-4.144a.75.75 0 00-.249-1.005 1.879 1.879 0 01-.873-1.587z"/><path d="M7.793 5.375a1.25 1.25 0 01.125-2.494h.006a1.25 1.25 0 011.157 1.725l2.159 3.572a3.383 3.383 0 014.51 3.19 3.383 3.383 0 01-4.23 3.275.75.75 0 11.373-1.452 1.883 1.883 0 002.357-1.822 1.883 1.883 0 00-2.897-1.588.75.75 0 01-1.045-.245l-2.515-4.16z"/><path d="M2.002 10.429a.75.75 0 00-1.298-.752 3.383 3.383 0 002.932 5.073c1.61 0 2.96-1.124 3.301-2.632h4.42c.229.304.592.5 1.001.5h.007a1.25 1.25 0 000-2.5h-.007c-.409 0-.772.197-1 .5H6.271a.75.75 0 00-.75.75 1.883 1.883 0 01-1.886 1.882 1.883 1.883 0 01-1.633-2.821z"/></g></svg>');
-}
-
-%webhook-24-svg-prop {
-  --webhook-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.75 6a3.25 3.25 0 016.094-1.574.75.75 0 101.312-.728 4.75 4.75 0 10-7.307 5.856l-3.485 5.477A2.013 2.013 0 005.01 15H5a2 2 0 100 4h.01a2 2 0 001.623-3.17l3.852-6.052a.75.75 0 00-.23-1.035A3.247 3.247 0 018.75 6z"/><path d="M12.364 7.969c-.115.02-.233.031-.354.031H12a2 2 0 110-4h.01a2 2 0 011.623 3.17l3.481 5.47a4.75 4.75 0 11.7 8.96.75.75 0 11.373-1.452 3.25 3.25 0 10-.931-5.89.75.75 0 01-1.037-.23l-3.855-6.06z"/><path d="M2.184 15.376a.75.75 0 10-1.298-.752A4.75 4.75 0 109.69 17.75h7.454A2 2 0 0019 19h.01a2 2 0 100-4H19a2 2 0 00-1.855 1.25H9a.75.75 0 00-.75.75 3.25 3.25 0 11-6.066-1.624z"/></g></svg>');
-}
-
-%webhook-svg-prop {
-  @extend %webhook-16-svg-prop;
-}
-
-%wifi-16-svg-prop {
-  --wifi-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.443 5.978a9.917 9.917 0 0113.114 0 .75.75 0 00.992-1.126 11.417 11.417 0 00-15.098 0 .75.75 0 10.992 1.126z"/><path d="M3.813 8.525a6.583 6.583 0 018.427 0 .75.75 0 00.96-1.153 8.083 8.083 0 00-10.347 0 .75.75 0 00.96 1.153z"/><path d="M8.003 10.5a3.25 3.25 0 00-1.882.6.75.75 0 01-.869-1.222 4.75 4.75 0 015.502 0 .75.75 0 11-.868 1.223 3.25 3.25 0 00-1.883-.601zM8 12a1 1 0 100 2h.007a1 1 0 100-2H8z"/></g></svg>');
-}
-
-%wifi-24-svg-prop {
-  --wifi-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M1.916 9.31a15.25 15.25 0 0120.168 0 .75.75 0 00.992-1.125 16.75 16.75 0 00-22.152 0 .75.75 0 10.992 1.125z"/><path d="M5.48 12.874a10.25 10.25 0 0113.12 0 .75.75 0 00.96-1.152 11.75 11.75 0 00-15.04 0 .75.75 0 00.96 1.152zM12.005 15.5a5.25 5.25 0 00-3.04.97.75.75 0 01-.87-1.223 6.75 6.75 0 017.82 0 .75.75 0 11-.87 1.223 5.25 5.25 0 00-3.04-.97zM12 19a1 1 0 100 2h.01a1 1 0 100-2H12z"/></g></svg>');
-}
-
-%wifi-off-16-svg-prop {
-  --wifi-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.22 1.22a.75.75 0 011.06 0l12.5 12.5a.75.75 0 11-1.06 1.06l-3.558-3.557a.749.749 0 01-.276-.122 3.25 3.25 0 00-3.765 0 .75.75 0 01-.869-1.223A4.75 4.75 0 017.94 9L6.198 7.26c-.867.25-1.68.68-2.385 1.266a.75.75 0 01-.96-1.153A8.083 8.083 0 015.02 6.08L3.513 4.573a9.914 9.914 0 00-2.07 1.405.75.75 0 11-.992-1.126c.605-.533 1.26-.997 1.954-1.387L1.22 2.28a.75.75 0 010-1.06zM8 3.5c-.42 0-.837.027-1.25.08a.75.75 0 11-.19-1.489 11.418 11.418 0 018.99 2.761.75.75 0 01-.993 1.126A9.917 9.917 0 008 3.5zM9.794 6.427a.75.75 0 01.959-.453A8.083 8.083 0 0113.2 7.372a.75.75 0 11-.96 1.153 6.583 6.583 0 00-1.993-1.14.75.75 0 01-.453-.958z"/><path d="M8 12a1 1 0 100 2h.007a1 1 0 100-2H8z"/></g></svg>');
-}
-
-%wifi-off-24-svg-prop {
-  --wifi-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M1.22 1.22a.75.75 0 011.06 0l20.5 20.5a.75.75 0 11-1.06 1.06l-6.175-6.174a.747.747 0 01-.5-.136 5.25 5.25 0 00-6.08 0 .75.75 0 01-.87-1.223 6.75 6.75 0 014.92-1.171l-3.307-3.307a10.249 10.249 0 00-4.228 2.105.75.75 0 01-.96-1.152A11.749 11.749 0 018.49 9.55L5.77 6.83a15.247 15.247 0 00-3.854 2.48.75.75 0 11-.992-1.125 16.746 16.746 0 013.718-2.482L1.22 2.28a.75.75 0 010-1.06zM12 5.5c-.72 0-1.436.051-2.142.151a.75.75 0 01-.21-1.485 16.75 16.75 0 0113.428 4.019.75.75 0 01-.992 1.125A15.25 15.25 0 0012 5.5zM14.278 9.954a.75.75 0 01.924-.52 11.75 11.75 0 014.358 2.288.75.75 0 01-.96 1.152 10.248 10.248 0 00-3.802-1.996.75.75 0 01-.52-.924zM12 19a1 1 0 100 2h.01a1 1 0 100-2H12z"/></g></svg>');
-}
-
-%wrench-16-svg-prop {
-  --wrench-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.973 1.506a18.525 18.525 0 00-.497-.006A4.024 4.024 0 006.45 5.524c0 .43.095.865.199 1.205.054.18.116.356.192.527v.002a.75.75 0 01-.15.848l-4.937 4.911a.871.871 0 000 1.229.869.869 0 001.227 0L7.896 9.31a.75.75 0 01.847-.151c.17.079.35.139.529.193.34.103.774.198 1.204.198A4.024 4.024 0 0014.5 5.524c0-.177-.002-.338-.006-.483-.208.25-.438.517-.675.774-.32.345-.677.696-1.048.964-.354.257-.82.512-1.339.512-.396 0-.776-.156-1.059-.433L9.142 5.627a1.513 1.513 0 01-.432-1.06c0-.52.256-.985.514-1.34.27-.37.623-.727.97-1.046.258-.237.529-.466.78-.675zm-2.36 9.209l-4.57 4.59a2.37 2.37 0 01-3.35-3.348l.002-.001 4.591-4.568a6.887 6.887 0 01-.072-.223 5.77 5.77 0 01-.263-1.64A5.524 5.524 0 0110.476 0 12 12 0 0112 .076c.331.044.64.115.873.264a.92.92 0 01.374.45.843.843 0 01-.013.625.922.922 0 01-.241.332c-.26.257-.547.487-.829.72-.315.26-.647.535-.957.82a5.947 5.947 0 00-.771.824c-.197.27-.227.415-.227.457 0 .003 0 .006.003.008l1.211 1.211a.013.013 0 00.008.004c.043 0 .19-.032.46-.227.253-.183.532-.45.826-.767.284-.308.56-.638.82-.95.233-.28.463-.565.72-.823a.925.925 0 01.31-.235.841.841 0 01.628-.033.911.911 0 01.467.376c.15.233.22.543.262.87.047.356.075.847.075 1.522a5.524 5.524 0 01-5.524 5.525c-.631 0-1.221-.136-1.64-.263a6.969 6.969 0 01-.222-.071z" clip-rule="evenodd"/></svg>');
-}
-
-%wrench-24-svg-prop {
-  --wrench-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M15.5 2.5a6 6 0 00-6 6c0 .65.143 1.296.294 1.794a7.667 7.667 0 00.285.78l.003.007a.75.75 0 01-.15.85L2.95 18.873A1.54 1.54 0 004.038 21.5c.408 0 .799-.162 1.087-.45l6.948-6.98a.75.75 0 01.848-.15l.008.003.037.016.156.065c.139.054.34.129.586.203.497.15 1.143.293 1.792.293a6 6 0 006-6c0-.635-.018-1.122-.047-1.492l-.207.248-.034.04c-.362.435-.778.934-1.213 1.404-.446.483-.935.96-1.436 1.323-.483.35-1.075.664-1.71.664-.479 0-.939-.188-1.28-.523l-.006-.005-1.73-1.732a1.829 1.829 0 01-.524-1.28c0-.637.317-1.229.669-1.711.364-.5.844-.989 1.33-1.434.473-.434.975-.85 1.412-1.212l.04-.032.251-.209c-.373-.03-.867-.049-1.515-.049zm3.348.432a.982.982 0 00.266-.363c.07-.165.11-.4.015-.653a.991.991 0 00-.405-.485c-.27-.172-.648-.265-1.108-.327C17.129 1.04 16.449 1 15.5 1A7.5 7.5 0 008 8.5c0 .85.183 1.653.358 2.23.056.184.112.348.163.487L1.89 17.814a3.038 3.038 0 004.297 4.296l6.6-6.63c.138.05.301.107.485.162.576.175 1.377.358 2.228.358A7.5 7.5 0 0023 8.5c0-.948-.039-1.627-.103-2.111-.06-.456-.152-.835-.324-1.104a.978.978 0 00-.5-.406.879.879 0 00-.658.035.989.989 0 00-.34.262c-.287.287-.63.7-.98 1.119l-.026.03c-.368.442-.763.915-1.171 1.357-.42.454-.832.849-1.214 1.125-.399.29-.672.38-.831.38a.329.329 0 01-.228-.092l-1.72-1.72a.328.328 0 01-.091-.228c0-.157.09-.43.38-.828.278-.382.675-.792 1.132-1.212.444-.408.92-.802 1.365-1.17l.029-.023c.423-.35.84-.695 1.128-.982z" clip-rule="evenodd"/></svg>');
-}
-
-%x-16-svg-prop {
-  --x-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z"/></svg>');
-}
-
-%x-24-svg-prop {
-  --x-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M18.78 6.28a.75.75 0 00-1.06-1.06L12 10.94 6.28 5.22a.75.75 0 00-1.06 1.06L10.94 12l-5.72 5.72a.75.75 0 101.06 1.06L12 13.06l5.72 5.72a.75.75 0 101.06-1.06L13.06 12l5.72-5.72z"/></svg>');
-}
-
-%x-circle-16-svg-prop {
-  --x-circle-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.28 4.72a.75.75 0 010 1.06L9.06 8l2.22 2.22a.75.75 0 11-1.06 1.06L8 9.06l-2.22 2.22a.75.75 0 01-1.06-1.06L6.94 8 4.72 5.78a.75.75 0 011.06-1.06L8 6.94l2.22-2.22a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M.25 8a7.75 7.75 0 1115.5 0A7.75 7.75 0 01.25 8zM8 1.75a6.25 6.25 0 100 12.5 6.25 6.25 0 000-12.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%x-circle-24-svg-prop {
-  --x-circle-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.78 7.22a.75.75 0 010 1.06L13.06 12l3.72 3.72a.75.75 0 11-1.06 1.06L12 13.06l-3.72 3.72a.75.75 0 01-1.06-1.06L10.94 12 7.22 8.28a.75.75 0 011.06-1.06L12 10.94l3.72-3.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M1.25 12C1.25 6.063 6.063 1.25 12 1.25S22.75 6.063 22.75 12 17.937 22.75 12 22.75 1.25 17.937 1.25 12zM12 2.75a9.25 9.25 0 100 18.5 9.25 9.25 0 000-18.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%x-circle-fill-16-svg-prop {
-  --x-circle-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 .25a7.75 7.75 0 100 15.5A7.75 7.75 0 008 .25zm2.72 3.97a.75.75 0 111.06 1.06L9.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L8 9.06l-2.72 2.72a.75.75 0 01-1.06-1.06L6.94 8 4.22 5.28a.75.75 0 011.06-1.06L8 6.94l2.72-2.72z" clip-rule="evenodd"/></svg>');
-}
-
-%x-circle-fill-24-svg-prop {
-  --x-circle-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1.25C6.063 1.25 1.25 6.063 1.25 12S6.063 22.75 12 22.75 22.75 17.937 22.75 12 17.937 1.25 12 1.25zM7.22 7.22a.75.75 0 011.06 0L12 10.94l3.72-3.72a.75.75 0 111.06 1.06L13.06 12l3.72 3.72a.75.75 0 11-1.06 1.06L12 13.06l-3.72 3.72a.75.75 0 01-1.06-1.06L10.94 12 7.22 8.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%x-diamond-16-svg-prop {
-  --x-diamond-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.78 5.22a.75.75 0 010 1.06L9.06 8l1.72 1.72a.75.75 0 11-1.06 1.06L8 9.06l-1.72 1.72a.75.75 0 11-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 011.06-1.06L8 6.94l1.72-1.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M.75 6.41L6.407.753a2.25 2.25 0 013.182 0l5.657 5.657a2.25 2.25 0 010 3.182l-5.657 5.656a2.25 2.25 0 01-3.182 0L.75 9.592a2.25 2.25 0 010-3.182zm6.718-4.597L1.81 7.47a.75.75 0 000 1.06l5.657 5.658a.75.75 0 001.06 0l5.657-5.657a.75.75 0 000-1.06L8.528 1.812a.75.75 0 00-1.06 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%x-diamond-24-svg-prop {
-  --x-diamond-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15.78 8.22a.75.75 0 010 1.06L13.06 12l2.72 2.72a.75.75 0 11-1.06 1.06L12 13.06l-2.72 2.72a.75.75 0 01-1.06-1.06L10.94 12 8.22 9.28a.75.75 0 111.06-1.06L12 10.94l2.72-2.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M1.884 10.056l8.171-8.172a2.75 2.75 0 013.89 0l8.171 8.172a2.75 2.75 0 010 3.889l-8.171 8.171a2.75 2.75 0 01-3.89 0l-8.171-8.171a2.75 2.75 0 010-3.89zm9.232-7.111l-8.172 8.171a1.25 1.25 0 000 1.768l8.172 8.172a1.25 1.25 0 001.768 0l8.171-8.172a1.25 1.25 0 000-1.768l-8.171-8.171a1.25 1.25 0 00-1.768 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%x-diamond-fill-16-svg-prop {
-  --x-diamond-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.57.752a2.25 2.25 0 00-3.183 0L.73 6.41a2.25 2.25 0 000 3.182l5.657 5.657a2.25 2.25 0 003.182 0l5.657-5.657a2.25 2.25 0 000-3.182L9.569.752zM5.22 5.22a.75.75 0 011.06 0L8 6.94l1.72-1.72a.75.75 0 111.06 1.06L9.06 8l1.72 1.72a.75.75 0 11-1.06 1.06L8 9.06l-1.72 1.72a.75.75 0 11-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%x-diamond-fill-24-svg-prop {
-  --x-diamond-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.944 1.884a2.75 2.75 0 00-3.889 0l-8.171 8.172a2.75 2.75 0 000 3.889l8.171 8.171a2.75 2.75 0 003.89 0l8.171-8.171a2.75 2.75 0 000-3.89l-8.171-8.17zM8.22 8.22a.75.75 0 011.06 0L12 10.94l2.72-2.72a.75.75 0 011.06 1.06L13.06 12l2.72 2.72a.75.75 0 01-1.06 1.06L12 13.06l-2.72 2.72a.75.75 0 11-1.06-1.06L10.94 12 8.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%x-hexagon-16-svg-prop {
-  --x-hexagon-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.78 5.22a.75.75 0 010 1.06L9.06 8l1.72 1.72a.75.75 0 11-1.06 1.06L8 9.06l-1.72 1.72a.75.75 0 11-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 011.06-1.06L8 6.94l1.72-1.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M6.834.33a2.25 2.25 0 012.332 0l5.25 3.182A2.25 2.25 0 0115.5 5.436v5.128a2.25 2.25 0 01-1.084 1.924l-5.25 3.182a2.25 2.25 0 01-2.332 0l-5.25-3.182A2.25 2.25 0 01.5 10.564V5.436a2.25 2.25 0 011.084-1.924L6.834.33zm1.555 1.283a.75.75 0 00-.778 0l-5.25 3.181A.75.75 0 002 5.436v5.128a.75.75 0 00.361.642l5.25 3.181a.75.75 0 00.778 0l5.25-3.181a.75.75 0 00.361-.642V5.436a.75.75 0 00-.361-.642l-5.25-3.181z" clip-rule="evenodd"/></g></svg>');
-}
-
-%x-hexagon-24-svg-prop {
-  --x-hexagon-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15.78 8.22a.75.75 0 010 1.06L13.06 12l2.72 2.72a.75.75 0 11-1.06 1.06L12 13.06l-2.72 2.72a.75.75 0 01-1.06-1.06L10.94 12 8.22 9.28a.75.75 0 011.06-1.06L12 10.94l2.72-2.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M10.559 1.006a2.75 2.75 0 012.882 0l7.75 4.77A2.75 2.75 0 0122.5 8.116v7.765a2.75 2.75 0 01-1.309 2.342l-7.75 4.77a2.75 2.75 0 01-2.882 0l-7.75-4.77A2.75 2.75 0 011.5 15.882V8.117a2.75 2.75 0 011.309-2.342l7.75-4.769zm2.096 1.278a1.25 1.25 0 00-1.31 0l-7.75 4.769A1.25 1.25 0 003 8.117v7.765c0 .434.225.837.595 1.065l7.75 4.769a1.25 1.25 0 001.31 0l7.75-4.77c.37-.227.595-.63.595-1.064V8.117a1.25 1.25 0 00-.595-1.064l-7.75-4.77z" clip-rule="evenodd"/></g></svg>');
-}
-
-%x-hexagon-fill-16-svg-prop {
-  --x-hexagon-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.166.33a2.25 2.25 0 00-2.332 0l-5.25 3.182A2.25 2.25 0 00.5 5.436v5.128a2.25 2.25 0 001.084 1.924l5.25 3.182a2.25 2.25 0 002.332 0l5.25-3.182a2.25 2.25 0 001.084-1.924V5.436a2.25 2.25 0 00-1.084-1.924L9.166.33zM5.22 5.22a.75.75 0 011.06 0L8 6.94l1.72-1.72a.75.75 0 111.06 1.06L9.06 8l1.72 1.72a.75.75 0 11-1.06 1.06L8 9.06l-1.72 1.72a.75.75 0 11-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%x-hexagon-fill-24-svg-prop {
-  --x-hexagon-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.441 1.006a2.75 2.75 0 00-2.882 0l-7.75 4.77a2.75 2.75 0 00-1.31 2.341v7.765a2.75 2.75 0 001.31 2.342l7.75 4.77a2.75 2.75 0 002.882 0l7.75-4.77a2.75 2.75 0 001.309-2.342V8.117a2.75 2.75 0 00-1.309-2.342l-7.75-4.769zM14.72 8.22a.75.75 0 011.06 1.061L13.06 12l2.72 2.72a.75.75 0 01-1.06 1.06L12 13.06l-2.72 2.72a.75.75 0 11-1.06-1.06L10.94 12 8.22 9.28a.75.75 0 011.06-1.06L12 10.94l2.72-2.72z" clip-rule="evenodd"/></svg>');
-}
-
-%x-square-16-svg-prop {
-  --x-square-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.139 2.5a.639.639 0 00-.639.639v9.722c0 .353.286.639.639.639h9.722a.639.639 0 00.639-.639V3.14a.639.639 0 00-.639-.639H3.14zM1 3.139C1 1.958 1.958 1 3.139 1h9.722C14.042 1 15 1.958 15 3.139v9.722A2.139 2.139 0 0112.861 15H3.14A2.139 2.139 0 011 12.861V3.14zm3.72 1.58a.75.75 0 011.06 0L8 6.94l2.22-2.22a.75.75 0 111.06 1.061L9.06 8l2.22 2.22a.75.75 0 11-1.06 1.06L8 9.06l-2.22 2.22a.75.75 0 01-1.06-1.06L6.94 8 4.72 5.78a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%x-square-24-svg-prop {
-  --x-square-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.806 3.5c-.721 0-1.306.585-1.306 1.306v14.388c0 .722.585 1.306 1.306 1.306h14.388c.722 0 1.306-.584 1.306-1.306V4.806c0-.721-.584-1.306-1.306-1.306H4.806zM2 4.806A2.806 2.806 0 014.806 2h14.388A2.806 2.806 0 0122 4.806v14.388A2.806 2.806 0 0119.194 22H4.806A2.806 2.806 0 012 19.194V4.806zM7.22 7.22a.75.75 0 011.06 0L12 10.94l3.72-3.72a.75.75 0 111.06 1.06L13.06 12l3.72 3.72a.75.75 0 11-1.06 1.06L12 13.06l-3.72 3.72a.75.75 0 01-1.06-1.06L10.94 12 7.22 8.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
-}
-
-%x-square-fill-16-svg-prop {
-  --x-square-fill-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 3.139C1 1.958 1.958 1 3.139 1h9.722C14.042 1 15 1.958 15 3.139v9.722A2.139 2.139 0 0112.861 15H3.14A2.139 2.139 0 011 12.861V3.14zm4.28 1.08A.75.75 0 004.22 5.28L6.94 8l-2.72 2.72a.75.75 0 101.06 1.06L8 9.06l2.72 2.72a.75.75 0 101.06-1.06L9.06 8l2.72-2.72a.75.75 0 00-1.06-1.06L8 6.94 5.28 4.22z" clip-rule="evenodd"/></svg>');
-}
-
-%x-square-fill-24-svg-prop {
-  --x-square-fill-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2 4.806A2.806 2.806 0 014.806 2h14.388A2.806 2.806 0 0122 4.806v14.388A2.806 2.806 0 0119.194 22H4.806A2.806 2.806 0 012 19.194V4.806zM8.28 7.22a.75.75 0 00-1.06 1.06L10.94 12l-3.72 3.72a.75.75 0 101.06 1.06L12 13.06l3.72 3.72a.75.75 0 101.06-1.06L13.06 12l3.72-3.72a.75.75 0 00-1.06-1.06L12 10.94 8.28 7.22z" clip-rule="evenodd"/></svg>');
-}
-
-%youtube-16-svg-prop {
-  --youtube-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M13.478 3.399c.6.161 1.072.634 1.234 1.234C15 5.728 15 8 15 8s0 2.272-.288 3.367a1.754 1.754 0 01-1.234 1.234C12.382 12.89 8 12.89 8 12.89s-4.382 0-5.478-.289a1.754 1.754 0 01-1.234-1.234C1 10.283 1 8 1 8s0-2.272.288-3.367c.162-.6.635-1.073 1.234-1.234C3.618 3.11 8 3.11 8 3.11s4.382 0 5.478.289zm-3.24 4.612l-3.645 2.1V5.9l3.644 2.11z" clip-rule="evenodd"/></svg>');
-}
-
-%youtube-24-svg-prop {
-  --youtube-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M20.608 4.77a2.757 2.757 0 011.939 1.938C23 8.43 23 12 23 12s0 3.57-.453 5.292a2.757 2.757 0 01-1.94 1.939c-1.72.453-8.607.453-8.607.453s-6.886 0-8.608-.453a2.756 2.756 0 01-1.939-1.94C1 15.589 1 12 1 12s0-3.57.453-5.292a2.756 2.756 0 011.94-1.939C5.112 4.316 12 4.316 12 4.316s6.886 0 8.608.453zm-5.092 7.248l-5.727 3.298V8.702l5.727 3.316z" clip-rule="evenodd"/></svg>');
-}
-
-%youtube-color-16-svg-prop {
-  --youtube-color-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="red" d="M14.712 4.633a1.754 1.754 0 00-1.234-1.234C12.382 3.11 8 3.11 8 3.11s-4.382 0-5.478.289c-.6.161-1.072.634-1.234 1.234C1 5.728 1 8 1 8s0 2.283.288 3.367c.162.6.635 1.073 1.234 1.234C3.618 12.89 8 12.89 8 12.89s4.382 0 5.478-.289a1.754 1.754 0 001.234-1.234C15 10.272 15 8 15 8s0-2.272-.288-3.367z"/><path fill="%23fff" d="M6.593 10.11l3.644-2.098-3.644-2.11v4.208z"/></svg>');
-}
-
-%youtube-color-24-svg-prop {
-  --youtube-color-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="red" d="M22.547 6.708a2.757 2.757 0 00-1.94-1.939C18.888 4.316 12 4.316 12 4.316s-6.886 0-8.608.453a2.756 2.756 0 00-1.939 1.94C1 8.43 1 12 1 12s0 3.588.453 5.292a2.756 2.756 0 001.94 1.939c1.72.453 8.607.453 8.607.453s6.886 0 8.608-.453a2.757 2.757 0 001.939-1.94C23 15.57 23 12 23 12s0-3.57-.453-5.292z"/><path fill="%23fff" d="M9.79 15.316l5.726-3.298-5.727-3.316v6.614z"/></svg>');
-}
-
-%zap-16-svg-prop {
-  --zap-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.375.078a.75.75 0 01.402.82l-.889 4.418 5.485.908a.75.75 0 01.44 1.236l-7.292 8.285a.75.75 0 01-1.298-.643l.889-4.418-5.485-.908a.75.75 0 01-.44-1.236L8.479.255a.75.75 0 01.896-.177zm-6.17 8.439l4.918.815a.75.75 0 01.612.887l-.489 2.433 4.548-5.169-4.917-.814a.75.75 0 01-.612-.888l.489-2.432-4.548 5.168z" clip-rule="evenodd"/></svg>');
-}
-
-%zap-24-svg-prop {
-  --zap-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.333 1.065a.75.75 0 01.437.791l-.918 6.409 8.48.94a.75.75 0 01.494 1.226l-10.278 12.3a.75.75 0 01-1.318-.587l.918-6.409-8.48-.94a.75.75 0 01-.494-1.226l10.278-12.3a.75.75 0 01.881-.204zM4.222 13.458l7.86.872a.75.75 0 01.66.851l-.653 4.563 7.69-9.202-7.862-.872a.75.75 0 01-.66-.851l.654-4.563-7.69 9.203z" clip-rule="evenodd"/></svg>');
-}
-
-%zap-off-16-svg-prop {
-  --zap-off-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.777.898A.75.75 0 008.479.255L6.473 2.533a.75.75 0 001.126.991l.155-.175-.164.814a.75.75 0 101.47.296L9.778.898z"/><path fill-rule="evenodd" d="M10.874 11.935l-3.353 3.81a.75.75 0 01-1.309-.57l.452-4.489-5.047-.912a.75.75 0 01-.43-1.234l2.946-3.347L1.22 2.28a.75.75 0 011.06-1.06l12.5 12.5a.75.75 0 11-1.06 1.06l-2.846-2.845zM5.195 6.256L3.191 8.534l4.422.8a.75.75 0 01.612.813L7.938 13l1.874-2.129-4.617-4.616z" clip-rule="evenodd"/><path d="M11.248 5.707a.75.75 0 00-.246 1.48l1.792.296-.322.367a.75.75 0 001.126.99l1.215-1.38a.75.75 0 00-.44-1.236l-3.125-.517z"/></g></svg>');
-}
-
-%zap-off-24-svg-prop {
-  --zap-off-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06l5.659 5.66-4.705 5.63a.75.75 0 00.493 1.226l8.48.94-.917 6.408a.75.75 0 001.318.587l4.608-5.515 5.564 5.564a.75.75 0 101.06-1.06l-6.067-6.067a.753.753 0 00-.154-.154L2.28 1.219zM15.09 16.15L7.945 9.004 4.222 13.46l7.86.87a.75.75 0 01.66.852l-.653 4.563 3.002-3.593z" clip-rule="evenodd"/><path d="M13.77 1.856a.75.75 0 00-1.318-.587l-2.57 3.075a.75.75 0 101.152.962l.877-1.05-.332 2.32a.75.75 0 101.485.213l.706-4.933zM14.973 8.5a.75.75 0 10-.165 1.49l4.97.552-1.673 2.002a.75.75 0 001.151.962l2.57-3.075a.75.75 0 00-.493-1.226l-6.36-.705z"/></g></svg>');
-}
-
-%zoom-in-16-svg-prop {
-  --zoom-in-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.25 4a.75.75 0 01.75.75V6.5h1.75a.75.75 0 010 1.5H8v1.75a.75.75 0 01-1.5 0V8H4.75a.75.75 0 010-1.5H6.5V4.75A.75.75 0 017.25 4z"/><path fill-rule="evenodd" d="M7.25 1a6.25 6.25 0 103.857 11.168l2.613 2.612a.75.75 0 101.06-1.06l-2.612-2.613A6.25 6.25 0 007.25 1zM2.5 7.25a4.75 4.75 0 119.5 0 4.75 4.75 0 01-9.5 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%zoom-in-24-svg-prop {
-  --zoom-in-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10.75 6.5a.75.75 0 01.75.75V10h2.75a.75.75 0 010 1.5H11.5v2.75a.75.75 0 01-1.5 0V11.5H7.25a.75.75 0 010-1.5H10V7.25a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M10.75 2a8.75 8.75 0 105.634 15.445l4.336 4.335a.75.75 0 101.06-1.06l-4.335-4.336A8.75 8.75 0 0010.75 2zM3.5 10.75a7.25 7.25 0 1114.5 0 7.25 7.25 0 01-14.5 0z" clip-rule="evenodd"/></g></svg>');
-}
-
-%zoom-out-16-svg-prop {
-  --zoom-out-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.75 6.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5z"/><path fill-rule="evenodd" d="M1 7.25a6.25 6.25 0 1111.168 3.857l2.612 2.613a.75.75 0 11-1.06 1.06l-2.613-2.612A6.25 6.25 0 011 7.25zM7.25 2.5a4.75 4.75 0 100 9.5 4.75 4.75 0 000-9.5z" clip-rule="evenodd"/></g></svg>');
-}
-
-%zoom-out-24-svg-prop {
-  --zoom-out-24-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.25 10a.75.75 0 000 1.5h7a.75.75 0 000-1.5h-7z"/><path fill-rule="evenodd" d="M2 10.75a8.75 8.75 0 1115.445 5.634l4.335 4.336a.75.75 0 11-1.06 1.06l-4.336-4.335A8.75 8.75 0 012 10.75zm8.75-7.25a7.25 7.25 0 100 14.5 7.25 7.25 0 000-14.5z" clip-rule="evenodd"/></g></svg>');
-}
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss
deleted file mode 100644
index 6bbfd486b3..0000000000
--- a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss
+++ /dev/null
@@ -1,11179 +0,0 @@
-%with-activity-16-icon {
-  @extend %with-icon, %activity-16-svg-prop;
-  background-image: var(--activity-16-svg);
-}
-%with-activity-16-mask {
-  @extend %with-mask, %activity-16-svg-prop;
-  -webkit-mask-image: var(--activity-16-svg);
-  mask-image: var(--activity-16-svg);
-}
-
-%with-activity-24-icon {
-  @extend %with-icon, %activity-24-svg-prop;
-  background-image: var(--activity-24-svg);
-}
-%with-activity-24-mask {
-  @extend %with-mask, %activity-24-svg-prop;
-  -webkit-mask-image: var(--activity-24-svg);
-  mask-image: var(--activity-24-svg);
-}
-
-%with-alert-circle-16-icon {
-  @extend %with-icon, %alert-circle-16-svg-prop;
-  background-image: var(--alert-circle-16-svg);
-}
-%with-alert-circle-16-mask {
-  @extend %with-mask, %alert-circle-16-svg-prop;
-  -webkit-mask-image: var(--alert-circle-16-svg);
-  mask-image: var(--alert-circle-16-svg);
-}
-
-%with-alert-circle-24-icon {
-  @extend %with-icon, %alert-circle-24-svg-prop;
-  background-image: var(--alert-circle-24-svg);
-}
-%with-alert-circle-24-mask {
-  @extend %with-mask, %alert-circle-24-svg-prop;
-  -webkit-mask-image: var(--alert-circle-24-svg);
-  mask-image: var(--alert-circle-24-svg);
-}
-
-%with-alert-circle-fill-16-icon {
-  @extend %with-icon, %alert-circle-fill-16-svg-prop;
-  background-image: var(--alert-circle-fill-16-svg);
-}
-%with-alert-circle-fill-16-mask {
-  @extend %with-mask, %alert-circle-fill-16-svg-prop;
-  -webkit-mask-image: var(--alert-circle-fill-16-svg);
-  mask-image: var(--alert-circle-fill-16-svg);
-}
-
-%with-alert-circle-fill-24-icon {
-  @extend %with-icon, %alert-circle-fill-24-svg-prop;
-  background-image: var(--alert-circle-fill-24-svg);
-}
-%with-alert-circle-fill-24-mask {
-  @extend %with-mask, %alert-circle-fill-24-svg-prop;
-  -webkit-mask-image: var(--alert-circle-fill-24-svg);
-  mask-image: var(--alert-circle-fill-24-svg);
-}
-
-%with-alert-circle-fill-icon {
-  @extend %with-icon, %alert-circle-16-svg-prop;
-  background-image: var(--alert-circle-16-svg);
-}
-%with-alert-circle-fill-mask {
-  @extend %with-mask, %alert-circle-16-svg-prop;
-  -webkit-mask-image: var(--alert-circle-16-svg);
-  mask-image: var(--alert-circle-16-svg);
-}
-
-%with-alert-circle-outline-icon {
-  @extend %with-icon, %alert-circle-16-svg-prop;
-  background-image: var(--alert-circle-16-svg);
-}
-%with-alert-circle-outline-mask {
-  @extend %with-mask, %alert-circle-16-svg-prop;
-  -webkit-mask-image: var(--alert-circle-16-svg);
-  mask-image: var(--alert-circle-16-svg);
-}
-
-%with-alert-octagon-16-icon {
-  @extend %with-icon, %alert-octagon-16-svg-prop;
-  background-image: var(--alert-octagon-16-svg);
-}
-%with-alert-octagon-16-mask {
-  @extend %with-mask, %alert-octagon-16-svg-prop;
-  -webkit-mask-image: var(--alert-octagon-16-svg);
-  mask-image: var(--alert-octagon-16-svg);
-}
-
-%with-alert-octagon-24-icon {
-  @extend %with-icon, %alert-octagon-24-svg-prop;
-  background-image: var(--alert-octagon-24-svg);
-}
-%with-alert-octagon-24-mask {
-  @extend %with-mask, %alert-octagon-24-svg-prop;
-  -webkit-mask-image: var(--alert-octagon-24-svg);
-  mask-image: var(--alert-octagon-24-svg);
-}
-
-%with-alert-octagon-fill-16-icon {
-  @extend %with-icon, %alert-octagon-fill-16-svg-prop;
-  background-image: var(--alert-octagon-fill-16-svg);
-}
-%with-alert-octagon-fill-16-mask {
-  @extend %with-mask, %alert-octagon-fill-16-svg-prop;
-  -webkit-mask-image: var(--alert-octagon-fill-16-svg);
-  mask-image: var(--alert-octagon-fill-16-svg);
-}
-
-%with-alert-octagon-fill-24-icon {
-  @extend %with-icon, %alert-octagon-fill-24-svg-prop;
-  background-image: var(--alert-octagon-fill-24-svg);
-}
-%with-alert-octagon-fill-24-mask {
-  @extend %with-mask, %alert-octagon-fill-24-svg-prop;
-  -webkit-mask-image: var(--alert-octagon-fill-24-svg);
-  mask-image: var(--alert-octagon-fill-24-svg);
-}
-
-%with-alert-triangle-16-icon {
-  @extend %with-icon, %alert-triangle-16-svg-prop;
-  background-image: var(--alert-triangle-16-svg);
-}
-%with-alert-triangle-16-mask {
-  @extend %with-mask, %alert-triangle-16-svg-prop;
-  -webkit-mask-image: var(--alert-triangle-16-svg);
-  mask-image: var(--alert-triangle-16-svg);
-}
-
-%with-alert-triangle-24-icon {
-  @extend %with-icon, %alert-triangle-24-svg-prop;
-  background-image: var(--alert-triangle-24-svg);
-}
-%with-alert-triangle-24-mask {
-  @extend %with-mask, %alert-triangle-24-svg-prop;
-  -webkit-mask-image: var(--alert-triangle-24-svg);
-  mask-image: var(--alert-triangle-24-svg);
-}
-
-%with-alert-triangle-fill-16-icon {
-  @extend %with-icon, %alert-triangle-fill-16-svg-prop;
-  background-image: var(--alert-triangle-fill-16-svg);
-}
-%with-alert-triangle-fill-16-mask {
-  @extend %with-mask, %alert-triangle-fill-16-svg-prop;
-  -webkit-mask-image: var(--alert-triangle-fill-16-svg);
-  mask-image: var(--alert-triangle-fill-16-svg);
-}
-
-%with-alert-triangle-fill-24-icon {
-  @extend %with-icon, %alert-triangle-fill-24-svg-prop;
-  background-image: var(--alert-triangle-fill-24-svg);
-}
-%with-alert-triangle-fill-24-mask {
-  @extend %with-mask, %alert-triangle-fill-24-svg-prop;
-  -webkit-mask-image: var(--alert-triangle-fill-24-svg);
-  mask-image: var(--alert-triangle-fill-24-svg);
-}
-
-%with-alert-triangle-icon {
-  @extend %with-icon, %alert-triangle-16-svg-prop;
-  background-image: var(--alert-triangle-16-svg);
-}
-%with-alert-triangle-mask {
-  @extend %with-mask, %alert-triangle-16-svg-prop;
-  -webkit-mask-image: var(--alert-triangle-16-svg);
-  mask-image: var(--alert-triangle-16-svg);
-}
-
-%with-alibaba-16-icon {
-  @extend %with-icon, %alibaba-16-svg-prop;
-  background-image: var(--alibaba-16-svg);
-}
-%with-alibaba-16-mask {
-  @extend %with-mask, %alibaba-16-svg-prop;
-  -webkit-mask-image: var(--alibaba-16-svg);
-  mask-image: var(--alibaba-16-svg);
-}
-
-%with-alibaba-24-icon {
-  @extend %with-icon, %alibaba-24-svg-prop;
-  background-image: var(--alibaba-24-svg);
-}
-%with-alibaba-24-mask {
-  @extend %with-mask, %alibaba-24-svg-prop;
-  -webkit-mask-image: var(--alibaba-24-svg);
-  mask-image: var(--alibaba-24-svg);
-}
-
-%with-alibaba-color-16-icon {
-  @extend %with-icon, %alibaba-color-16-svg-prop;
-  background-image: var(--alibaba-color-16-svg);
-}
-%with-alibaba-color-16-mask {
-  @extend %with-mask, %alibaba-color-16-svg-prop;
-  -webkit-mask-image: var(--alibaba-color-16-svg);
-  mask-image: var(--alibaba-color-16-svg);
-}
-
-%with-alibaba-color-24-icon {
-  @extend %with-icon, %alibaba-color-24-svg-prop;
-  background-image: var(--alibaba-color-24-svg);
-}
-%with-alibaba-color-24-mask {
-  @extend %with-mask, %alibaba-color-24-svg-prop;
-  -webkit-mask-image: var(--alibaba-color-24-svg);
-  mask-image: var(--alibaba-color-24-svg);
-}
-
-%with-align-center-16-icon {
-  @extend %with-icon, %align-center-16-svg-prop;
-  background-image: var(--align-center-16-svg);
-}
-%with-align-center-16-mask {
-  @extend %with-mask, %align-center-16-svg-prop;
-  -webkit-mask-image: var(--align-center-16-svg);
-  mask-image: var(--align-center-16-svg);
-}
-
-%with-align-center-24-icon {
-  @extend %with-icon, %align-center-24-svg-prop;
-  background-image: var(--align-center-24-svg);
-}
-%with-align-center-24-mask {
-  @extend %with-mask, %align-center-24-svg-prop;
-  -webkit-mask-image: var(--align-center-24-svg);
-  mask-image: var(--align-center-24-svg);
-}
-
-%with-align-justify-16-icon {
-  @extend %with-icon, %align-justify-16-svg-prop;
-  background-image: var(--align-justify-16-svg);
-}
-%with-align-justify-16-mask {
-  @extend %with-mask, %align-justify-16-svg-prop;
-  -webkit-mask-image: var(--align-justify-16-svg);
-  mask-image: var(--align-justify-16-svg);
-}
-
-%with-align-justify-24-icon {
-  @extend %with-icon, %align-justify-24-svg-prop;
-  background-image: var(--align-justify-24-svg);
-}
-%with-align-justify-24-mask {
-  @extend %with-mask, %align-justify-24-svg-prop;
-  -webkit-mask-image: var(--align-justify-24-svg);
-  mask-image: var(--align-justify-24-svg);
-}
-
-%with-align-left-16-icon {
-  @extend %with-icon, %align-left-16-svg-prop;
-  background-image: var(--align-left-16-svg);
-}
-%with-align-left-16-mask {
-  @extend %with-mask, %align-left-16-svg-prop;
-  -webkit-mask-image: var(--align-left-16-svg);
-  mask-image: var(--align-left-16-svg);
-}
-
-%with-align-left-24-icon {
-  @extend %with-icon, %align-left-24-svg-prop;
-  background-image: var(--align-left-24-svg);
-}
-%with-align-left-24-mask {
-  @extend %with-mask, %align-left-24-svg-prop;
-  -webkit-mask-image: var(--align-left-24-svg);
-  mask-image: var(--align-left-24-svg);
-}
-
-%with-align-right-16-icon {
-  @extend %with-icon, %align-right-16-svg-prop;
-  background-image: var(--align-right-16-svg);
-}
-%with-align-right-16-mask {
-  @extend %with-mask, %align-right-16-svg-prop;
-  -webkit-mask-image: var(--align-right-16-svg);
-  mask-image: var(--align-right-16-svg);
-}
-
-%with-align-right-24-icon {
-  @extend %with-icon, %align-right-24-svg-prop;
-  background-image: var(--align-right-24-svg);
-}
-%with-align-right-24-mask {
-  @extend %with-mask, %align-right-24-svg-prop;
-  -webkit-mask-image: var(--align-right-24-svg);
-  mask-image: var(--align-right-24-svg);
-}
-
-%with-amazon-eks-16-icon {
-  @extend %with-icon, %amazon-eks-16-svg-prop;
-  background-image: var(--amazon-eks-16-svg);
-}
-%with-amazon-eks-16-mask {
-  @extend %with-mask, %amazon-eks-16-svg-prop;
-  -webkit-mask-image: var(--amazon-eks-16-svg);
-  mask-image: var(--amazon-eks-16-svg);
-}
-
-%with-amazon-eks-24-icon {
-  @extend %with-icon, %amazon-eks-24-svg-prop;
-  background-image: var(--amazon-eks-24-svg);
-}
-%with-amazon-eks-24-mask {
-  @extend %with-mask, %amazon-eks-24-svg-prop;
-  -webkit-mask-image: var(--amazon-eks-24-svg);
-  mask-image: var(--amazon-eks-24-svg);
-}
-
-%with-amazon-eks-color-16-icon {
-  @extend %with-icon, %amazon-eks-color-16-svg-prop;
-  background-image: var(--amazon-eks-color-16-svg);
-}
-%with-amazon-eks-color-16-mask {
-  @extend %with-mask, %amazon-eks-color-16-svg-prop;
-  -webkit-mask-image: var(--amazon-eks-color-16-svg);
-  mask-image: var(--amazon-eks-color-16-svg);
-}
-
-%with-amazon-eks-color-24-icon {
-  @extend %with-icon, %amazon-eks-color-24-svg-prop;
-  background-image: var(--amazon-eks-color-24-svg);
-}
-%with-amazon-eks-color-24-mask {
-  @extend %with-mask, %amazon-eks-color-24-svg-prop;
-  -webkit-mask-image: var(--amazon-eks-color-24-svg);
-  mask-image: var(--amazon-eks-color-24-svg);
-}
-
-%with-apple-16-icon {
-  @extend %with-icon, %apple-16-svg-prop;
-  background-image: var(--apple-16-svg);
-}
-%with-apple-16-mask {
-  @extend %with-mask, %apple-16-svg-prop;
-  -webkit-mask-image: var(--apple-16-svg);
-  mask-image: var(--apple-16-svg);
-}
-
-%with-apple-24-icon {
-  @extend %with-icon, %apple-24-svg-prop;
-  background-image: var(--apple-24-svg);
-}
-%with-apple-24-mask {
-  @extend %with-mask, %apple-24-svg-prop;
-  -webkit-mask-image: var(--apple-24-svg);
-  mask-image: var(--apple-24-svg);
-}
-
-%with-apple-color-16-icon {
-  @extend %with-icon, %apple-color-16-svg-prop;
-  background-image: var(--apple-color-16-svg);
-}
-%with-apple-color-16-mask {
-  @extend %with-mask, %apple-color-16-svg-prop;
-  -webkit-mask-image: var(--apple-color-16-svg);
-  mask-image: var(--apple-color-16-svg);
-}
-
-%with-apple-color-24-icon {
-  @extend %with-icon, %apple-color-24-svg-prop;
-  background-image: var(--apple-color-24-svg);
-}
-%with-apple-color-24-mask {
-  @extend %with-mask, %apple-color-24-svg-prop;
-  -webkit-mask-image: var(--apple-color-24-svg);
-  mask-image: var(--apple-color-24-svg);
-}
-
-%with-archive-16-icon {
-  @extend %with-icon, %archive-16-svg-prop;
-  background-image: var(--archive-16-svg);
-}
-%with-archive-16-mask {
-  @extend %with-mask, %archive-16-svg-prop;
-  -webkit-mask-image: var(--archive-16-svg);
-  mask-image: var(--archive-16-svg);
-}
-
-%with-archive-24-icon {
-  @extend %with-icon, %archive-24-svg-prop;
-  background-image: var(--archive-24-svg);
-}
-%with-archive-24-mask {
-  @extend %with-mask, %archive-24-svg-prop;
-  -webkit-mask-image: var(--archive-24-svg);
-  mask-image: var(--archive-24-svg);
-}
-
-%with-arrow-down-16-icon {
-  @extend %with-icon, %arrow-down-16-svg-prop;
-  background-image: var(--arrow-down-16-svg);
-}
-%with-arrow-down-16-mask {
-  @extend %with-mask, %arrow-down-16-svg-prop;
-  -webkit-mask-image: var(--arrow-down-16-svg);
-  mask-image: var(--arrow-down-16-svg);
-}
-
-%with-arrow-down-24-icon {
-  @extend %with-icon, %arrow-down-24-svg-prop;
-  background-image: var(--arrow-down-24-svg);
-}
-%with-arrow-down-24-mask {
-  @extend %with-mask, %arrow-down-24-svg-prop;
-  -webkit-mask-image: var(--arrow-down-24-svg);
-  mask-image: var(--arrow-down-24-svg);
-}
-
-%with-arrow-down-circle-16-icon {
-  @extend %with-icon, %arrow-down-circle-16-svg-prop;
-  background-image: var(--arrow-down-circle-16-svg);
-}
-%with-arrow-down-circle-16-mask {
-  @extend %with-mask, %arrow-down-circle-16-svg-prop;
-  -webkit-mask-image: var(--arrow-down-circle-16-svg);
-  mask-image: var(--arrow-down-circle-16-svg);
-}
-
-%with-arrow-down-circle-24-icon {
-  @extend %with-icon, %arrow-down-circle-24-svg-prop;
-  background-image: var(--arrow-down-circle-24-svg);
-}
-%with-arrow-down-circle-24-mask {
-  @extend %with-mask, %arrow-down-circle-24-svg-prop;
-  -webkit-mask-image: var(--arrow-down-circle-24-svg);
-  mask-image: var(--arrow-down-circle-24-svg);
-}
-
-%with-arrow-down-left-16-icon {
-  @extend %with-icon, %arrow-down-left-16-svg-prop;
-  background-image: var(--arrow-down-left-16-svg);
-}
-%with-arrow-down-left-16-mask {
-  @extend %with-mask, %arrow-down-left-16-svg-prop;
-  -webkit-mask-image: var(--arrow-down-left-16-svg);
-  mask-image: var(--arrow-down-left-16-svg);
-}
-
-%with-arrow-down-left-24-icon {
-  @extend %with-icon, %arrow-down-left-24-svg-prop;
-  background-image: var(--arrow-down-left-24-svg);
-}
-%with-arrow-down-left-24-mask {
-  @extend %with-mask, %arrow-down-left-24-svg-prop;
-  -webkit-mask-image: var(--arrow-down-left-24-svg);
-  mask-image: var(--arrow-down-left-24-svg);
-}
-
-%with-arrow-down-right-16-icon {
-  @extend %with-icon, %arrow-down-right-16-svg-prop;
-  background-image: var(--arrow-down-right-16-svg);
-}
-%with-arrow-down-right-16-mask {
-  @extend %with-mask, %arrow-down-right-16-svg-prop;
-  -webkit-mask-image: var(--arrow-down-right-16-svg);
-  mask-image: var(--arrow-down-right-16-svg);
-}
-
-%with-arrow-down-right-24-icon {
-  @extend %with-icon, %arrow-down-right-24-svg-prop;
-  background-image: var(--arrow-down-right-24-svg);
-}
-%with-arrow-down-right-24-mask {
-  @extend %with-mask, %arrow-down-right-24-svg-prop;
-  -webkit-mask-image: var(--arrow-down-right-24-svg);
-  mask-image: var(--arrow-down-right-24-svg);
-}
-
-%with-arrow-down-icon {
-  @extend %with-icon, %arrow-down-16-svg-prop;
-  background-image: var(--arrow-down-16-svg);
-}
-%with-arrow-down-mask {
-  @extend %with-mask, %arrow-down-16-svg-prop;
-  -webkit-mask-image: var(--arrow-down-16-svg);
-  mask-image: var(--arrow-down-16-svg);
-}
-
-%with-arrow-left-16-icon {
-  @extend %with-icon, %arrow-left-16-svg-prop;
-  background-image: var(--arrow-left-16-svg);
-}
-%with-arrow-left-16-mask {
-  @extend %with-mask, %arrow-left-16-svg-prop;
-  -webkit-mask-image: var(--arrow-left-16-svg);
-  mask-image: var(--arrow-left-16-svg);
-}
-
-%with-arrow-left-24-icon {
-  @extend %with-icon, %arrow-left-24-svg-prop;
-  background-image: var(--arrow-left-24-svg);
-}
-%with-arrow-left-24-mask {
-  @extend %with-mask, %arrow-left-24-svg-prop;
-  -webkit-mask-image: var(--arrow-left-24-svg);
-  mask-image: var(--arrow-left-24-svg);
-}
-
-%with-arrow-left-circle-16-icon {
-  @extend %with-icon, %arrow-left-circle-16-svg-prop;
-  background-image: var(--arrow-left-circle-16-svg);
-}
-%with-arrow-left-circle-16-mask {
-  @extend %with-mask, %arrow-left-circle-16-svg-prop;
-  -webkit-mask-image: var(--arrow-left-circle-16-svg);
-  mask-image: var(--arrow-left-circle-16-svg);
-}
-
-%with-arrow-left-circle-24-icon {
-  @extend %with-icon, %arrow-left-circle-24-svg-prop;
-  background-image: var(--arrow-left-circle-24-svg);
-}
-%with-arrow-left-circle-24-mask {
-  @extend %with-mask, %arrow-left-circle-24-svg-prop;
-  -webkit-mask-image: var(--arrow-left-circle-24-svg);
-  mask-image: var(--arrow-left-circle-24-svg);
-}
-
-%with-arrow-left-icon {
-  @extend %with-icon, %arrow-left-16-svg-prop;
-  background-image: var(--arrow-left-16-svg);
-}
-%with-arrow-left-mask {
-  @extend %with-mask, %arrow-left-16-svg-prop;
-  -webkit-mask-image: var(--arrow-left-16-svg);
-  mask-image: var(--arrow-left-16-svg);
-}
-
-%with-arrow-right-16-icon {
-  @extend %with-icon, %arrow-right-16-svg-prop;
-  background-image: var(--arrow-right-16-svg);
-}
-%with-arrow-right-16-mask {
-  @extend %with-mask, %arrow-right-16-svg-prop;
-  -webkit-mask-image: var(--arrow-right-16-svg);
-  mask-image: var(--arrow-right-16-svg);
-}
-
-%with-arrow-right-24-icon {
-  @extend %with-icon, %arrow-right-24-svg-prop;
-  background-image: var(--arrow-right-24-svg);
-}
-%with-arrow-right-24-mask {
-  @extend %with-mask, %arrow-right-24-svg-prop;
-  -webkit-mask-image: var(--arrow-right-24-svg);
-  mask-image: var(--arrow-right-24-svg);
-}
-
-%with-arrow-right-circle-16-icon {
-  @extend %with-icon, %arrow-right-circle-16-svg-prop;
-  background-image: var(--arrow-right-circle-16-svg);
-}
-%with-arrow-right-circle-16-mask {
-  @extend %with-mask, %arrow-right-circle-16-svg-prop;
-  -webkit-mask-image: var(--arrow-right-circle-16-svg);
-  mask-image: var(--arrow-right-circle-16-svg);
-}
-
-%with-arrow-right-circle-24-icon {
-  @extend %with-icon, %arrow-right-circle-24-svg-prop;
-  background-image: var(--arrow-right-circle-24-svg);
-}
-%with-arrow-right-circle-24-mask {
-  @extend %with-mask, %arrow-right-circle-24-svg-prop;
-  -webkit-mask-image: var(--arrow-right-circle-24-svg);
-  mask-image: var(--arrow-right-circle-24-svg);
-}
-
-%with-arrow-right-icon {
-  @extend %with-icon, %arrow-right-16-svg-prop;
-  background-image: var(--arrow-right-16-svg);
-}
-%with-arrow-right-mask {
-  @extend %with-mask, %arrow-right-16-svg-prop;
-  -webkit-mask-image: var(--arrow-right-16-svg);
-  mask-image: var(--arrow-right-16-svg);
-}
-
-%with-arrow-up-16-icon {
-  @extend %with-icon, %arrow-up-16-svg-prop;
-  background-image: var(--arrow-up-16-svg);
-}
-%with-arrow-up-16-mask {
-  @extend %with-mask, %arrow-up-16-svg-prop;
-  -webkit-mask-image: var(--arrow-up-16-svg);
-  mask-image: var(--arrow-up-16-svg);
-}
-
-%with-arrow-up-24-icon {
-  @extend %with-icon, %arrow-up-24-svg-prop;
-  background-image: var(--arrow-up-24-svg);
-}
-%with-arrow-up-24-mask {
-  @extend %with-mask, %arrow-up-24-svg-prop;
-  -webkit-mask-image: var(--arrow-up-24-svg);
-  mask-image: var(--arrow-up-24-svg);
-}
-
-%with-arrow-up-circle-16-icon {
-  @extend %with-icon, %arrow-up-circle-16-svg-prop;
-  background-image: var(--arrow-up-circle-16-svg);
-}
-%with-arrow-up-circle-16-mask {
-  @extend %with-mask, %arrow-up-circle-16-svg-prop;
-  -webkit-mask-image: var(--arrow-up-circle-16-svg);
-  mask-image: var(--arrow-up-circle-16-svg);
-}
-
-%with-arrow-up-circle-24-icon {
-  @extend %with-icon, %arrow-up-circle-24-svg-prop;
-  background-image: var(--arrow-up-circle-24-svg);
-}
-%with-arrow-up-circle-24-mask {
-  @extend %with-mask, %arrow-up-circle-24-svg-prop;
-  -webkit-mask-image: var(--arrow-up-circle-24-svg);
-  mask-image: var(--arrow-up-circle-24-svg);
-}
-
-%with-arrow-up-left-16-icon {
-  @extend %with-icon, %arrow-up-left-16-svg-prop;
-  background-image: var(--arrow-up-left-16-svg);
-}
-%with-arrow-up-left-16-mask {
-  @extend %with-mask, %arrow-up-left-16-svg-prop;
-  -webkit-mask-image: var(--arrow-up-left-16-svg);
-  mask-image: var(--arrow-up-left-16-svg);
-}
-
-%with-arrow-up-left-24-icon {
-  @extend %with-icon, %arrow-up-left-24-svg-prop;
-  background-image: var(--arrow-up-left-24-svg);
-}
-%with-arrow-up-left-24-mask {
-  @extend %with-mask, %arrow-up-left-24-svg-prop;
-  -webkit-mask-image: var(--arrow-up-left-24-svg);
-  mask-image: var(--arrow-up-left-24-svg);
-}
-
-%with-arrow-up-right-16-icon {
-  @extend %with-icon, %arrow-up-right-16-svg-prop;
-  background-image: var(--arrow-up-right-16-svg);
-}
-%with-arrow-up-right-16-mask {
-  @extend %with-mask, %arrow-up-right-16-svg-prop;
-  -webkit-mask-image: var(--arrow-up-right-16-svg);
-  mask-image: var(--arrow-up-right-16-svg);
-}
-
-%with-arrow-up-right-24-icon {
-  @extend %with-icon, %arrow-up-right-24-svg-prop;
-  background-image: var(--arrow-up-right-24-svg);
-}
-%with-arrow-up-right-24-mask {
-  @extend %with-mask, %arrow-up-right-24-svg-prop;
-  -webkit-mask-image: var(--arrow-up-right-24-svg);
-  mask-image: var(--arrow-up-right-24-svg);
-}
-
-%with-arrow-up-icon {
-  @extend %with-icon, %arrow-up-16-svg-prop;
-  background-image: var(--arrow-up-16-svg);
-}
-%with-arrow-up-mask {
-  @extend %with-mask, %arrow-up-16-svg-prop;
-  -webkit-mask-image: var(--arrow-up-16-svg);
-  mask-image: var(--arrow-up-16-svg);
-}
-
-%with-at-sign-16-icon {
-  @extend %with-icon, %at-sign-16-svg-prop;
-  background-image: var(--at-sign-16-svg);
-}
-%with-at-sign-16-mask {
-  @extend %with-mask, %at-sign-16-svg-prop;
-  -webkit-mask-image: var(--at-sign-16-svg);
-  mask-image: var(--at-sign-16-svg);
-}
-
-%with-at-sign-24-icon {
-  @extend %with-icon, %at-sign-24-svg-prop;
-  background-image: var(--at-sign-24-svg);
-}
-%with-at-sign-24-mask {
-  @extend %with-mask, %at-sign-24-svg-prop;
-  -webkit-mask-image: var(--at-sign-24-svg);
-  mask-image: var(--at-sign-24-svg);
-}
-
-%with-auth0-16-icon {
-  @extend %with-icon, %auth0-16-svg-prop;
-  background-image: var(--auth0-16-svg);
-}
-%with-auth0-16-mask {
-  @extend %with-mask, %auth0-16-svg-prop;
-  -webkit-mask-image: var(--auth0-16-svg);
-  mask-image: var(--auth0-16-svg);
-}
-
-%with-auth0-24-icon {
-  @extend %with-icon, %auth0-24-svg-prop;
-  background-image: var(--auth0-24-svg);
-}
-%with-auth0-24-mask {
-  @extend %with-mask, %auth0-24-svg-prop;
-  -webkit-mask-image: var(--auth0-24-svg);
-  mask-image: var(--auth0-24-svg);
-}
-
-%with-auth0-color-16-icon {
-  @extend %with-icon, %auth0-color-16-svg-prop;
-  background-image: var(--auth0-color-16-svg);
-}
-%with-auth0-color-16-mask {
-  @extend %with-mask, %auth0-color-16-svg-prop;
-  -webkit-mask-image: var(--auth0-color-16-svg);
-  mask-image: var(--auth0-color-16-svg);
-}
-
-%with-auth0-color-24-icon {
-  @extend %with-icon, %auth0-color-24-svg-prop;
-  background-image: var(--auth0-color-24-svg);
-}
-%with-auth0-color-24-mask {
-  @extend %with-mask, %auth0-color-24-svg-prop;
-  -webkit-mask-image: var(--auth0-color-24-svg);
-  mask-image: var(--auth0-color-24-svg);
-}
-
-%with-auto-apply-16-icon {
-  @extend %with-icon, %auto-apply-16-svg-prop;
-  background-image: var(--auto-apply-16-svg);
-}
-%with-auto-apply-16-mask {
-  @extend %with-mask, %auto-apply-16-svg-prop;
-  -webkit-mask-image: var(--auto-apply-16-svg);
-  mask-image: var(--auto-apply-16-svg);
-}
-
-%with-auto-apply-24-icon {
-  @extend %with-icon, %auto-apply-24-svg-prop;
-  background-image: var(--auto-apply-24-svg);
-}
-%with-auto-apply-24-mask {
-  @extend %with-mask, %auto-apply-24-svg-prop;
-  -webkit-mask-image: var(--auto-apply-24-svg);
-  mask-image: var(--auto-apply-24-svg);
-}
-
-%with-award-16-icon {
-  @extend %with-icon, %award-16-svg-prop;
-  background-image: var(--award-16-svg);
-}
-%with-award-16-mask {
-  @extend %with-mask, %award-16-svg-prop;
-  -webkit-mask-image: var(--award-16-svg);
-  mask-image: var(--award-16-svg);
-}
-
-%with-award-24-icon {
-  @extend %with-icon, %award-24-svg-prop;
-  background-image: var(--award-24-svg);
-}
-%with-award-24-mask {
-  @extend %with-mask, %award-24-svg-prop;
-  -webkit-mask-image: var(--award-24-svg);
-  mask-image: var(--award-24-svg);
-}
-
-%with-aws-16-icon {
-  @extend %with-icon, %aws-16-svg-prop;
-  background-image: var(--aws-16-svg);
-}
-%with-aws-16-mask {
-  @extend %with-mask, %aws-16-svg-prop;
-  -webkit-mask-image: var(--aws-16-svg);
-  mask-image: var(--aws-16-svg);
-}
-
-%with-aws-24-icon {
-  @extend %with-icon, %aws-24-svg-prop;
-  background-image: var(--aws-24-svg);
-}
-%with-aws-24-mask {
-  @extend %with-mask, %aws-24-svg-prop;
-  -webkit-mask-image: var(--aws-24-svg);
-  mask-image: var(--aws-24-svg);
-}
-
-%with-aws-color-16-icon {
-  @extend %with-icon, %aws-color-16-svg-prop;
-  background-image: var(--aws-color-16-svg);
-}
-%with-aws-color-16-mask {
-  @extend %with-mask, %aws-color-16-svg-prop;
-  -webkit-mask-image: var(--aws-color-16-svg);
-  mask-image: var(--aws-color-16-svg);
-}
-
-%with-aws-color-24-icon {
-  @extend %with-icon, %aws-color-24-svg-prop;
-  background-image: var(--aws-color-24-svg);
-}
-%with-aws-color-24-mask {
-  @extend %with-mask, %aws-color-24-svg-prop;
-  -webkit-mask-image: var(--aws-color-24-svg);
-  mask-image: var(--aws-color-24-svg);
-}
-
-%with-aws-ec2-16-icon {
-  @extend %with-icon, %aws-ec2-16-svg-prop;
-  background-image: var(--aws-ec2-16-svg);
-}
-%with-aws-ec2-16-mask {
-  @extend %with-mask, %aws-ec2-16-svg-prop;
-  -webkit-mask-image: var(--aws-ec2-16-svg);
-  mask-image: var(--aws-ec2-16-svg);
-}
-
-%with-aws-ec2-24-icon {
-  @extend %with-icon, %aws-ec2-24-svg-prop;
-  background-image: var(--aws-ec2-24-svg);
-}
-%with-aws-ec2-24-mask {
-  @extend %with-mask, %aws-ec2-24-svg-prop;
-  -webkit-mask-image: var(--aws-ec2-24-svg);
-  mask-image: var(--aws-ec2-24-svg);
-}
-
-%with-aws-ec2-color-16-icon {
-  @extend %with-icon, %aws-ec2-color-16-svg-prop;
-  background-image: var(--aws-ec2-color-16-svg);
-}
-%with-aws-ec2-color-16-mask {
-  @extend %with-mask, %aws-ec2-color-16-svg-prop;
-  -webkit-mask-image: var(--aws-ec2-color-16-svg);
-  mask-image: var(--aws-ec2-color-16-svg);
-}
-
-%with-aws-ec2-color-24-icon {
-  @extend %with-icon, %aws-ec2-color-24-svg-prop;
-  background-image: var(--aws-ec2-color-24-svg);
-}
-%with-aws-ec2-color-24-mask {
-  @extend %with-mask, %aws-ec2-color-24-svg-prop;
-  -webkit-mask-image: var(--aws-ec2-color-24-svg);
-  mask-image: var(--aws-ec2-color-24-svg);
-}
-
-%with-azure-16-icon {
-  @extend %with-icon, %azure-16-svg-prop;
-  background-image: var(--azure-16-svg);
-}
-%with-azure-16-mask {
-  @extend %with-mask, %azure-16-svg-prop;
-  -webkit-mask-image: var(--azure-16-svg);
-  mask-image: var(--azure-16-svg);
-}
-
-%with-azure-24-icon {
-  @extend %with-icon, %azure-24-svg-prop;
-  background-image: var(--azure-24-svg);
-}
-%with-azure-24-mask {
-  @extend %with-mask, %azure-24-svg-prop;
-  -webkit-mask-image: var(--azure-24-svg);
-  mask-image: var(--azure-24-svg);
-}
-
-%with-azure-color-16-icon {
-  @extend %with-icon, %azure-color-16-svg-prop;
-  background-image: var(--azure-color-16-svg);
-}
-%with-azure-color-16-mask {
-  @extend %with-mask, %azure-color-16-svg-prop;
-  -webkit-mask-image: var(--azure-color-16-svg);
-  mask-image: var(--azure-color-16-svg);
-}
-
-%with-azure-color-24-icon {
-  @extend %with-icon, %azure-color-24-svg-prop;
-  background-image: var(--azure-color-24-svg);
-}
-%with-azure-color-24-mask {
-  @extend %with-mask, %azure-color-24-svg-prop;
-  -webkit-mask-image: var(--azure-color-24-svg);
-  mask-image: var(--azure-color-24-svg);
-}
-
-%with-azure-devops-16-icon {
-  @extend %with-icon, %azure-devops-16-svg-prop;
-  background-image: var(--azure-devops-16-svg);
-}
-%with-azure-devops-16-mask {
-  @extend %with-mask, %azure-devops-16-svg-prop;
-  -webkit-mask-image: var(--azure-devops-16-svg);
-  mask-image: var(--azure-devops-16-svg);
-}
-
-%with-azure-devops-24-icon {
-  @extend %with-icon, %azure-devops-24-svg-prop;
-  background-image: var(--azure-devops-24-svg);
-}
-%with-azure-devops-24-mask {
-  @extend %with-mask, %azure-devops-24-svg-prop;
-  -webkit-mask-image: var(--azure-devops-24-svg);
-  mask-image: var(--azure-devops-24-svg);
-}
-
-%with-azure-devops-color-16-icon {
-  @extend %with-icon, %azure-devops-color-16-svg-prop;
-  background-image: var(--azure-devops-color-16-svg);
-}
-%with-azure-devops-color-16-mask {
-  @extend %with-mask, %azure-devops-color-16-svg-prop;
-  -webkit-mask-image: var(--azure-devops-color-16-svg);
-  mask-image: var(--azure-devops-color-16-svg);
-}
-
-%with-azure-devops-color-24-icon {
-  @extend %with-icon, %azure-devops-color-24-svg-prop;
-  background-image: var(--azure-devops-color-24-svg);
-}
-%with-azure-devops-color-24-mask {
-  @extend %with-mask, %azure-devops-color-24-svg-prop;
-  -webkit-mask-image: var(--azure-devops-color-24-svg);
-  mask-image: var(--azure-devops-color-24-svg);
-}
-
-%with-bank-vault-16-icon {
-  @extend %with-icon, %bank-vault-16-svg-prop;
-  background-image: var(--bank-vault-16-svg);
-}
-%with-bank-vault-16-mask {
-  @extend %with-mask, %bank-vault-16-svg-prop;
-  -webkit-mask-image: var(--bank-vault-16-svg);
-  mask-image: var(--bank-vault-16-svg);
-}
-
-%with-bank-vault-24-icon {
-  @extend %with-icon, %bank-vault-24-svg-prop;
-  background-image: var(--bank-vault-24-svg);
-}
-%with-bank-vault-24-mask {
-  @extend %with-mask, %bank-vault-24-svg-prop;
-  -webkit-mask-image: var(--bank-vault-24-svg);
-  mask-image: var(--bank-vault-24-svg);
-}
-
-%with-bar-chart-16-icon {
-  @extend %with-icon, %bar-chart-16-svg-prop;
-  background-image: var(--bar-chart-16-svg);
-}
-%with-bar-chart-16-mask {
-  @extend %with-mask, %bar-chart-16-svg-prop;
-  -webkit-mask-image: var(--bar-chart-16-svg);
-  mask-image: var(--bar-chart-16-svg);
-}
-
-%with-bar-chart-24-icon {
-  @extend %with-icon, %bar-chart-24-svg-prop;
-  background-image: var(--bar-chart-24-svg);
-}
-%with-bar-chart-24-mask {
-  @extend %with-mask, %bar-chart-24-svg-prop;
-  -webkit-mask-image: var(--bar-chart-24-svg);
-  mask-image: var(--bar-chart-24-svg);
-}
-
-%with-bar-chart-alt-16-icon {
-  @extend %with-icon, %bar-chart-alt-16-svg-prop;
-  background-image: var(--bar-chart-alt-16-svg);
-}
-%with-bar-chart-alt-16-mask {
-  @extend %with-mask, %bar-chart-alt-16-svg-prop;
-  -webkit-mask-image: var(--bar-chart-alt-16-svg);
-  mask-image: var(--bar-chart-alt-16-svg);
-}
-
-%with-bar-chart-alt-24-icon {
-  @extend %with-icon, %bar-chart-alt-24-svg-prop;
-  background-image: var(--bar-chart-alt-24-svg);
-}
-%with-bar-chart-alt-24-mask {
-  @extend %with-mask, %bar-chart-alt-24-svg-prop;
-  -webkit-mask-image: var(--bar-chart-alt-24-svg);
-  mask-image: var(--bar-chart-alt-24-svg);
-}
-
-%with-battery-16-icon {
-  @extend %with-icon, %battery-16-svg-prop;
-  background-image: var(--battery-16-svg);
-}
-%with-battery-16-mask {
-  @extend %with-mask, %battery-16-svg-prop;
-  -webkit-mask-image: var(--battery-16-svg);
-  mask-image: var(--battery-16-svg);
-}
-
-%with-battery-24-icon {
-  @extend %with-icon, %battery-24-svg-prop;
-  background-image: var(--battery-24-svg);
-}
-%with-battery-24-mask {
-  @extend %with-mask, %battery-24-svg-prop;
-  -webkit-mask-image: var(--battery-24-svg);
-  mask-image: var(--battery-24-svg);
-}
-
-%with-battery-charging-16-icon {
-  @extend %with-icon, %battery-charging-16-svg-prop;
-  background-image: var(--battery-charging-16-svg);
-}
-%with-battery-charging-16-mask {
-  @extend %with-mask, %battery-charging-16-svg-prop;
-  -webkit-mask-image: var(--battery-charging-16-svg);
-  mask-image: var(--battery-charging-16-svg);
-}
-
-%with-battery-charging-24-icon {
-  @extend %with-icon, %battery-charging-24-svg-prop;
-  background-image: var(--battery-charging-24-svg);
-}
-%with-battery-charging-24-mask {
-  @extend %with-mask, %battery-charging-24-svg-prop;
-  -webkit-mask-image: var(--battery-charging-24-svg);
-  mask-image: var(--battery-charging-24-svg);
-}
-
-%with-beaker-16-icon {
-  @extend %with-icon, %beaker-16-svg-prop;
-  background-image: var(--beaker-16-svg);
-}
-%with-beaker-16-mask {
-  @extend %with-mask, %beaker-16-svg-prop;
-  -webkit-mask-image: var(--beaker-16-svg);
-  mask-image: var(--beaker-16-svg);
-}
-
-%with-beaker-24-icon {
-  @extend %with-icon, %beaker-24-svg-prop;
-  background-image: var(--beaker-24-svg);
-}
-%with-beaker-24-mask {
-  @extend %with-mask, %beaker-24-svg-prop;
-  -webkit-mask-image: var(--beaker-24-svg);
-  mask-image: var(--beaker-24-svg);
-}
-
-%with-bell-16-icon {
-  @extend %with-icon, %bell-16-svg-prop;
-  background-image: var(--bell-16-svg);
-}
-%with-bell-16-mask {
-  @extend %with-mask, %bell-16-svg-prop;
-  -webkit-mask-image: var(--bell-16-svg);
-  mask-image: var(--bell-16-svg);
-}
-
-%with-bell-24-icon {
-  @extend %with-icon, %bell-24-svg-prop;
-  background-image: var(--bell-24-svg);
-}
-%with-bell-24-mask {
-  @extend %with-mask, %bell-24-svg-prop;
-  -webkit-mask-image: var(--bell-24-svg);
-  mask-image: var(--bell-24-svg);
-}
-
-%with-bell-active-16-icon {
-  @extend %with-icon, %bell-active-16-svg-prop;
-  background-image: var(--bell-active-16-svg);
-}
-%with-bell-active-16-mask {
-  @extend %with-mask, %bell-active-16-svg-prop;
-  -webkit-mask-image: var(--bell-active-16-svg);
-  mask-image: var(--bell-active-16-svg);
-}
-
-%with-bell-active-24-icon {
-  @extend %with-icon, %bell-active-24-svg-prop;
-  background-image: var(--bell-active-24-svg);
-}
-%with-bell-active-24-mask {
-  @extend %with-mask, %bell-active-24-svg-prop;
-  -webkit-mask-image: var(--bell-active-24-svg);
-  mask-image: var(--bell-active-24-svg);
-}
-
-%with-bell-active-fill-16-icon {
-  @extend %with-icon, %bell-active-fill-16-svg-prop;
-  background-image: var(--bell-active-fill-16-svg);
-}
-%with-bell-active-fill-16-mask {
-  @extend %with-mask, %bell-active-fill-16-svg-prop;
-  -webkit-mask-image: var(--bell-active-fill-16-svg);
-  mask-image: var(--bell-active-fill-16-svg);
-}
-
-%with-bell-active-fill-24-icon {
-  @extend %with-icon, %bell-active-fill-24-svg-prop;
-  background-image: var(--bell-active-fill-24-svg);
-}
-%with-bell-active-fill-24-mask {
-  @extend %with-mask, %bell-active-fill-24-svg-prop;
-  -webkit-mask-image: var(--bell-active-fill-24-svg);
-  mask-image: var(--bell-active-fill-24-svg);
-}
-
-%with-bell-off-16-icon {
-  @extend %with-icon, %bell-off-16-svg-prop;
-  background-image: var(--bell-off-16-svg);
-}
-%with-bell-off-16-mask {
-  @extend %with-mask, %bell-off-16-svg-prop;
-  -webkit-mask-image: var(--bell-off-16-svg);
-  mask-image: var(--bell-off-16-svg);
-}
-
-%with-bell-off-24-icon {
-  @extend %with-icon, %bell-off-24-svg-prop;
-  background-image: var(--bell-off-24-svg);
-}
-%with-bell-off-24-mask {
-  @extend %with-mask, %bell-off-24-svg-prop;
-  -webkit-mask-image: var(--bell-off-24-svg);
-  mask-image: var(--bell-off-24-svg);
-}
-
-%with-bitbucket-16-icon {
-  @extend %with-icon, %bitbucket-16-svg-prop;
-  background-image: var(--bitbucket-16-svg);
-}
-%with-bitbucket-16-mask {
-  @extend %with-mask, %bitbucket-16-svg-prop;
-  -webkit-mask-image: var(--bitbucket-16-svg);
-  mask-image: var(--bitbucket-16-svg);
-}
-
-%with-bitbucket-24-icon {
-  @extend %with-icon, %bitbucket-24-svg-prop;
-  background-image: var(--bitbucket-24-svg);
-}
-%with-bitbucket-24-mask {
-  @extend %with-mask, %bitbucket-24-svg-prop;
-  -webkit-mask-image: var(--bitbucket-24-svg);
-  mask-image: var(--bitbucket-24-svg);
-}
-
-%with-bitbucket-color-16-icon {
-  @extend %with-icon, %bitbucket-color-16-svg-prop;
-  background-image: var(--bitbucket-color-16-svg);
-}
-%with-bitbucket-color-16-mask {
-  @extend %with-mask, %bitbucket-color-16-svg-prop;
-  -webkit-mask-image: var(--bitbucket-color-16-svg);
-  mask-image: var(--bitbucket-color-16-svg);
-}
-
-%with-bitbucket-color-24-icon {
-  @extend %with-icon, %bitbucket-color-24-svg-prop;
-  background-image: var(--bitbucket-color-24-svg);
-}
-%with-bitbucket-color-24-mask {
-  @extend %with-mask, %bitbucket-color-24-svg-prop;
-  -webkit-mask-image: var(--bitbucket-color-24-svg);
-  mask-image: var(--bitbucket-color-24-svg);
-}
-
-%with-bolt-icon {
-  @extend %with-icon, %zap-16-svg-prop;
-  background-image: var(--zap-16-svg);
-}
-%with-bolt-mask {
-  @extend %with-mask, %zap-16-svg-prop;
-  -webkit-mask-image: var(--zap-16-svg);
-  mask-image: var(--zap-16-svg);
-}
-
-%with-bookmark-16-icon {
-  @extend %with-icon, %bookmark-16-svg-prop;
-  background-image: var(--bookmark-16-svg);
-}
-%with-bookmark-16-mask {
-  @extend %with-mask, %bookmark-16-svg-prop;
-  -webkit-mask-image: var(--bookmark-16-svg);
-  mask-image: var(--bookmark-16-svg);
-}
-
-%with-bookmark-24-icon {
-  @extend %with-icon, %bookmark-24-svg-prop;
-  background-image: var(--bookmark-24-svg);
-}
-%with-bookmark-24-mask {
-  @extend %with-mask, %bookmark-24-svg-prop;
-  -webkit-mask-image: var(--bookmark-24-svg);
-  mask-image: var(--bookmark-24-svg);
-}
-
-%with-bookmark-add-16-icon {
-  @extend %with-icon, %bookmark-add-16-svg-prop;
-  background-image: var(--bookmark-add-16-svg);
-}
-%with-bookmark-add-16-mask {
-  @extend %with-mask, %bookmark-add-16-svg-prop;
-  -webkit-mask-image: var(--bookmark-add-16-svg);
-  mask-image: var(--bookmark-add-16-svg);
-}
-
-%with-bookmark-add-24-icon {
-  @extend %with-icon, %bookmark-add-24-svg-prop;
-  background-image: var(--bookmark-add-24-svg);
-}
-%with-bookmark-add-24-mask {
-  @extend %with-mask, %bookmark-add-24-svg-prop;
-  -webkit-mask-image: var(--bookmark-add-24-svg);
-  mask-image: var(--bookmark-add-24-svg);
-}
-
-%with-bookmark-add-fill-16-icon {
-  @extend %with-icon, %bookmark-add-fill-16-svg-prop;
-  background-image: var(--bookmark-add-fill-16-svg);
-}
-%with-bookmark-add-fill-16-mask {
-  @extend %with-mask, %bookmark-add-fill-16-svg-prop;
-  -webkit-mask-image: var(--bookmark-add-fill-16-svg);
-  mask-image: var(--bookmark-add-fill-16-svg);
-}
-
-%with-bookmark-add-fill-24-icon {
-  @extend %with-icon, %bookmark-add-fill-24-svg-prop;
-  background-image: var(--bookmark-add-fill-24-svg);
-}
-%with-bookmark-add-fill-24-mask {
-  @extend %with-mask, %bookmark-add-fill-24-svg-prop;
-  -webkit-mask-image: var(--bookmark-add-fill-24-svg);
-  mask-image: var(--bookmark-add-fill-24-svg);
-}
-
-%with-bookmark-fill-16-icon {
-  @extend %with-icon, %bookmark-fill-16-svg-prop;
-  background-image: var(--bookmark-fill-16-svg);
-}
-%with-bookmark-fill-16-mask {
-  @extend %with-mask, %bookmark-fill-16-svg-prop;
-  -webkit-mask-image: var(--bookmark-fill-16-svg);
-  mask-image: var(--bookmark-fill-16-svg);
-}
-
-%with-bookmark-fill-24-icon {
-  @extend %with-icon, %bookmark-fill-24-svg-prop;
-  background-image: var(--bookmark-fill-24-svg);
-}
-%with-bookmark-fill-24-mask {
-  @extend %with-mask, %bookmark-fill-24-svg-prop;
-  -webkit-mask-image: var(--bookmark-fill-24-svg);
-  mask-image: var(--bookmark-fill-24-svg);
-}
-
-%with-bookmark-remove-16-icon {
-  @extend %with-icon, %bookmark-remove-16-svg-prop;
-  background-image: var(--bookmark-remove-16-svg);
-}
-%with-bookmark-remove-16-mask {
-  @extend %with-mask, %bookmark-remove-16-svg-prop;
-  -webkit-mask-image: var(--bookmark-remove-16-svg);
-  mask-image: var(--bookmark-remove-16-svg);
-}
-
-%with-bookmark-remove-24-icon {
-  @extend %with-icon, %bookmark-remove-24-svg-prop;
-  background-image: var(--bookmark-remove-24-svg);
-}
-%with-bookmark-remove-24-mask {
-  @extend %with-mask, %bookmark-remove-24-svg-prop;
-  -webkit-mask-image: var(--bookmark-remove-24-svg);
-  mask-image: var(--bookmark-remove-24-svg);
-}
-
-%with-bookmark-remove-fill-16-icon {
-  @extend %with-icon, %bookmark-remove-fill-16-svg-prop;
-  background-image: var(--bookmark-remove-fill-16-svg);
-}
-%with-bookmark-remove-fill-16-mask {
-  @extend %with-mask, %bookmark-remove-fill-16-svg-prop;
-  -webkit-mask-image: var(--bookmark-remove-fill-16-svg);
-  mask-image: var(--bookmark-remove-fill-16-svg);
-}
-
-%with-bookmark-remove-fill-24-icon {
-  @extend %with-icon, %bookmark-remove-fill-24-svg-prop;
-  background-image: var(--bookmark-remove-fill-24-svg);
-}
-%with-bookmark-remove-fill-24-mask {
-  @extend %with-mask, %bookmark-remove-fill-24-svg-prop;
-  -webkit-mask-image: var(--bookmark-remove-fill-24-svg);
-  mask-image: var(--bookmark-remove-fill-24-svg);
-}
-
-%with-bottom-16-icon {
-  @extend %with-icon, %bottom-16-svg-prop;
-  background-image: var(--bottom-16-svg);
-}
-%with-bottom-16-mask {
-  @extend %with-mask, %bottom-16-svg-prop;
-  -webkit-mask-image: var(--bottom-16-svg);
-  mask-image: var(--bottom-16-svg);
-}
-
-%with-bottom-24-icon {
-  @extend %with-icon, %bottom-24-svg-prop;
-  background-image: var(--bottom-24-svg);
-}
-%with-bottom-24-mask {
-  @extend %with-mask, %bottom-24-svg-prop;
-  -webkit-mask-image: var(--bottom-24-svg);
-  mask-image: var(--bottom-24-svg);
-}
-
-%with-boundary-16-icon {
-  @extend %with-icon, %boundary-16-svg-prop;
-  background-image: var(--boundary-16-svg);
-}
-%with-boundary-16-mask {
-  @extend %with-mask, %boundary-16-svg-prop;
-  -webkit-mask-image: var(--boundary-16-svg);
-  mask-image: var(--boundary-16-svg);
-}
-
-%with-boundary-24-icon {
-  @extend %with-icon, %boundary-24-svg-prop;
-  background-image: var(--boundary-24-svg);
-}
-%with-boundary-24-mask {
-  @extend %with-mask, %boundary-24-svg-prop;
-  -webkit-mask-image: var(--boundary-24-svg);
-  mask-image: var(--boundary-24-svg);
-}
-
-%with-boundary-color-16-icon {
-  @extend %with-icon, %boundary-color-16-svg-prop;
-  background-image: var(--boundary-color-16-svg);
-}
-%with-boundary-color-16-mask {
-  @extend %with-mask, %boundary-color-16-svg-prop;
-  -webkit-mask-image: var(--boundary-color-16-svg);
-  mask-image: var(--boundary-color-16-svg);
-}
-
-%with-boundary-color-24-icon {
-  @extend %with-icon, %boundary-color-24-svg-prop;
-  background-image: var(--boundary-color-24-svg);
-}
-%with-boundary-color-24-mask {
-  @extend %with-mask, %boundary-color-24-svg-prop;
-  -webkit-mask-image: var(--boundary-color-24-svg);
-  mask-image: var(--boundary-color-24-svg);
-}
-
-%with-box-16-icon {
-  @extend %with-icon, %box-16-svg-prop;
-  background-image: var(--box-16-svg);
-}
-%with-box-16-mask {
-  @extend %with-mask, %box-16-svg-prop;
-  -webkit-mask-image: var(--box-16-svg);
-  mask-image: var(--box-16-svg);
-}
-
-%with-box-24-icon {
-  @extend %with-icon, %box-24-svg-prop;
-  background-image: var(--box-24-svg);
-}
-%with-box-24-mask {
-  @extend %with-mask, %box-24-svg-prop;
-  -webkit-mask-image: var(--box-24-svg);
-  mask-image: var(--box-24-svg);
-}
-
-%with-box-check-fill-icon {
-  @extend %with-icon, %check-square-fill-16-svg-prop;
-  background-image: var(--check-square-fill-16-svg);
-}
-%with-box-check-fill-mask {
-  @extend %with-mask, %check-square-fill-16-svg-prop;
-  -webkit-mask-image: var(--check-square-fill-16-svg);
-  mask-image: var(--check-square-fill-16-svg);
-}
-
-%with-box-outline-icon {
-  @extend %with-icon, %square-16-svg-prop;
-  background-image: var(--square-16-svg);
-}
-%with-box-outline-mask {
-  @extend %with-mask, %square-16-svg-prop;
-  -webkit-mask-image: var(--square-16-svg);
-  mask-image: var(--square-16-svg);
-}
-
-%with-briefcase-16-icon {
-  @extend %with-icon, %briefcase-16-svg-prop;
-  background-image: var(--briefcase-16-svg);
-}
-%with-briefcase-16-mask {
-  @extend %with-mask, %briefcase-16-svg-prop;
-  -webkit-mask-image: var(--briefcase-16-svg);
-  mask-image: var(--briefcase-16-svg);
-}
-
-%with-briefcase-24-icon {
-  @extend %with-icon, %briefcase-24-svg-prop;
-  background-image: var(--briefcase-24-svg);
-}
-%with-briefcase-24-mask {
-  @extend %with-mask, %briefcase-24-svg-prop;
-  -webkit-mask-image: var(--briefcase-24-svg);
-  mask-image: var(--briefcase-24-svg);
-}
-
-%with-broadcast-icon {
-  @extend %with-icon, %radio-16-svg-prop;
-  background-image: var(--radio-16-svg);
-}
-%with-broadcast-mask {
-  @extend %with-mask, %radio-16-svg-prop;
-  -webkit-mask-image: var(--radio-16-svg);
-  mask-image: var(--radio-16-svg);
-}
-
-%with-bug-16-icon {
-  @extend %with-icon, %bug-16-svg-prop;
-  background-image: var(--bug-16-svg);
-}
-%with-bug-16-mask {
-  @extend %with-mask, %bug-16-svg-prop;
-  -webkit-mask-image: var(--bug-16-svg);
-  mask-image: var(--bug-16-svg);
-}
-
-%with-bug-24-icon {
-  @extend %with-icon, %bug-24-svg-prop;
-  background-image: var(--bug-24-svg);
-}
-%with-bug-24-mask {
-  @extend %with-mask, %bug-24-svg-prop;
-  -webkit-mask-image: var(--bug-24-svg);
-  mask-image: var(--bug-24-svg);
-}
-
-%with-bug-icon {
-  @extend %with-icon, %bug-16-svg-prop;
-  background-image: var(--bug-16-svg);
-}
-%with-bug-mask {
-  @extend %with-mask, %bug-16-svg-prop;
-  -webkit-mask-image: var(--bug-16-svg);
-  mask-image: var(--bug-16-svg);
-}
-
-%with-build-16-icon {
-  @extend %with-icon, %build-16-svg-prop;
-  background-image: var(--build-16-svg);
-}
-%with-build-16-mask {
-  @extend %with-mask, %build-16-svg-prop;
-  -webkit-mask-image: var(--build-16-svg);
-  mask-image: var(--build-16-svg);
-}
-
-%with-build-24-icon {
-  @extend %with-icon, %build-24-svg-prop;
-  background-image: var(--build-24-svg);
-}
-%with-build-24-mask {
-  @extend %with-mask, %build-24-svg-prop;
-  -webkit-mask-image: var(--build-24-svg);
-  mask-image: var(--build-24-svg);
-}
-
-%with-calendar-16-icon {
-  @extend %with-icon, %calendar-16-svg-prop;
-  background-image: var(--calendar-16-svg);
-}
-%with-calendar-16-mask {
-  @extend %with-mask, %calendar-16-svg-prop;
-  -webkit-mask-image: var(--calendar-16-svg);
-  mask-image: var(--calendar-16-svg);
-}
-
-%with-calendar-24-icon {
-  @extend %with-icon, %calendar-24-svg-prop;
-  background-image: var(--calendar-24-svg);
-}
-%with-calendar-24-mask {
-  @extend %with-mask, %calendar-24-svg-prop;
-  -webkit-mask-image: var(--calendar-24-svg);
-  mask-image: var(--calendar-24-svg);
-}
-
-%with-calendar-icon {
-  @extend %with-icon, %calendar-16-svg-prop;
-  background-image: var(--calendar-16-svg);
-}
-%with-calendar-mask {
-  @extend %with-mask, %calendar-16-svg-prop;
-  -webkit-mask-image: var(--calendar-16-svg);
-  mask-image: var(--calendar-16-svg);
-}
-
-%with-camera-16-icon {
-  @extend %with-icon, %camera-16-svg-prop;
-  background-image: var(--camera-16-svg);
-}
-%with-camera-16-mask {
-  @extend %with-mask, %camera-16-svg-prop;
-  -webkit-mask-image: var(--camera-16-svg);
-  mask-image: var(--camera-16-svg);
-}
-
-%with-camera-24-icon {
-  @extend %with-icon, %camera-24-svg-prop;
-  background-image: var(--camera-24-svg);
-}
-%with-camera-24-mask {
-  @extend %with-mask, %camera-24-svg-prop;
-  -webkit-mask-image: var(--camera-24-svg);
-  mask-image: var(--camera-24-svg);
-}
-
-%with-camera-off-16-icon {
-  @extend %with-icon, %camera-off-16-svg-prop;
-  background-image: var(--camera-off-16-svg);
-}
-%with-camera-off-16-mask {
-  @extend %with-mask, %camera-off-16-svg-prop;
-  -webkit-mask-image: var(--camera-off-16-svg);
-  mask-image: var(--camera-off-16-svg);
-}
-
-%with-camera-off-24-icon {
-  @extend %with-icon, %camera-off-24-svg-prop;
-  background-image: var(--camera-off-24-svg);
-}
-%with-camera-off-24-mask {
-  @extend %with-mask, %camera-off-24-svg-prop;
-  -webkit-mask-image: var(--camera-off-24-svg);
-  mask-image: var(--camera-off-24-svg);
-}
-
-%with-cancel-circle-fill-icon {
-  @extend %with-icon, %x-circle-fill-16-svg-prop;
-  background-image: var(--x-circle-fill-16-svg);
-}
-%with-cancel-circle-fill-mask {
-  @extend %with-mask, %x-circle-fill-16-svg-prop;
-  -webkit-mask-image: var(--x-circle-fill-16-svg);
-  mask-image: var(--x-circle-fill-16-svg);
-}
-
-%with-cancel-circle-outline-icon {
-  @extend %with-icon, %x-circle-16-svg-prop;
-  background-image: var(--x-circle-16-svg);
-}
-%with-cancel-circle-outline-mask {
-  @extend %with-mask, %x-circle-16-svg-prop;
-  -webkit-mask-image: var(--x-circle-16-svg);
-  mask-image: var(--x-circle-16-svg);
-}
-
-%with-cancel-plain-icon {
-  @extend %with-icon, %x-16-svg-prop;
-  background-image: var(--x-16-svg);
-}
-%with-cancel-plain-mask {
-  @extend %with-mask, %x-16-svg-prop;
-  -webkit-mask-image: var(--x-16-svg);
-  mask-image: var(--x-16-svg);
-}
-
-%with-cancel-square-fill-icon {
-  @extend %with-icon, %x-square-fill-16-svg-prop;
-  background-image: var(--x-square-fill-16-svg);
-}
-%with-cancel-square-fill-mask {
-  @extend %with-mask, %x-square-fill-16-svg-prop;
-  -webkit-mask-image: var(--x-square-fill-16-svg);
-  mask-image: var(--x-square-fill-16-svg);
-}
-
-%with-cancel-square-outline-icon {
-  @extend %with-icon, %x-square-16-svg-prop;
-  background-image: var(--x-square-16-svg);
-}
-%with-cancel-square-outline-mask {
-  @extend %with-mask, %x-square-16-svg-prop;
-  -webkit-mask-image: var(--x-square-16-svg);
-  mask-image: var(--x-square-16-svg);
-}
-
-%with-caret-16-icon {
-  @extend %with-icon, %caret-16-svg-prop;
-  background-image: var(--caret-16-svg);
-}
-%with-caret-16-mask {
-  @extend %with-mask, %caret-16-svg-prop;
-  -webkit-mask-image: var(--caret-16-svg);
-  mask-image: var(--caret-16-svg);
-}
-
-%with-caret-24-icon {
-  @extend %with-icon, %caret-24-svg-prop;
-  background-image: var(--caret-24-svg);
-}
-%with-caret-24-mask {
-  @extend %with-mask, %caret-24-svg-prop;
-  -webkit-mask-image: var(--caret-24-svg);
-  mask-image: var(--caret-24-svg);
-}
-
-%with-caret-down-icon {
-  @extend %with-icon, %caret-16-svg-prop;
-  background-image: var(--caret-16-svg);
-}
-%with-caret-down-mask {
-  @extend %with-mask, %caret-16-svg-prop;
-  -webkit-mask-image: var(--caret-16-svg);
-  mask-image: var(--caret-16-svg);
-}
-
-%with-caret-up-icon {
-  @extend %with-icon, %chevron-up-16-svg-prop;
-  background-image: var(--chevron-up-16-svg);
-}
-%with-caret-up-mask {
-  @extend %with-mask, %chevron-up-16-svg-prop;
-  -webkit-mask-image: var(--chevron-up-16-svg);
-  mask-image: var(--chevron-up-16-svg);
-}
-
-%with-cast-16-icon {
-  @extend %with-icon, %cast-16-svg-prop;
-  background-image: var(--cast-16-svg);
-}
-%with-cast-16-mask {
-  @extend %with-mask, %cast-16-svg-prop;
-  -webkit-mask-image: var(--cast-16-svg);
-  mask-image: var(--cast-16-svg);
-}
-
-%with-cast-24-icon {
-  @extend %with-icon, %cast-24-svg-prop;
-  background-image: var(--cast-24-svg);
-}
-%with-cast-24-mask {
-  @extend %with-mask, %cast-24-svg-prop;
-  -webkit-mask-image: var(--cast-24-svg);
-  mask-image: var(--cast-24-svg);
-}
-
-%with-certificate-16-icon {
-  @extend %with-icon, %certificate-16-svg-prop;
-  background-image: var(--certificate-16-svg);
-}
-%with-certificate-16-mask {
-  @extend %with-mask, %certificate-16-svg-prop;
-  -webkit-mask-image: var(--certificate-16-svg);
-  mask-image: var(--certificate-16-svg);
-}
-
-%with-certificate-24-icon {
-  @extend %with-icon, %certificate-24-svg-prop;
-  background-image: var(--certificate-24-svg);
-}
-%with-certificate-24-mask {
-  @extend %with-mask, %certificate-24-svg-prop;
-  -webkit-mask-image: var(--certificate-24-svg);
-  mask-image: var(--certificate-24-svg);
-}
-
-%with-change-16-icon {
-  @extend %with-icon, %change-16-svg-prop;
-  background-image: var(--change-16-svg);
-}
-%with-change-16-mask {
-  @extend %with-mask, %change-16-svg-prop;
-  -webkit-mask-image: var(--change-16-svg);
-  mask-image: var(--change-16-svg);
-}
-
-%with-change-24-icon {
-  @extend %with-icon, %change-24-svg-prop;
-  background-image: var(--change-24-svg);
-}
-%with-change-24-mask {
-  @extend %with-mask, %change-24-svg-prop;
-  -webkit-mask-image: var(--change-24-svg);
-  mask-image: var(--change-24-svg);
-}
-
-%with-change-circle-16-icon {
-  @extend %with-icon, %change-circle-16-svg-prop;
-  background-image: var(--change-circle-16-svg);
-}
-%with-change-circle-16-mask {
-  @extend %with-mask, %change-circle-16-svg-prop;
-  -webkit-mask-image: var(--change-circle-16-svg);
-  mask-image: var(--change-circle-16-svg);
-}
-
-%with-change-circle-24-icon {
-  @extend %with-icon, %change-circle-24-svg-prop;
-  background-image: var(--change-circle-24-svg);
-}
-%with-change-circle-24-mask {
-  @extend %with-mask, %change-circle-24-svg-prop;
-  -webkit-mask-image: var(--change-circle-24-svg);
-  mask-image: var(--change-circle-24-svg);
-}
-
-%with-change-square-16-icon {
-  @extend %with-icon, %change-square-16-svg-prop;
-  background-image: var(--change-square-16-svg);
-}
-%with-change-square-16-mask {
-  @extend %with-mask, %change-square-16-svg-prop;
-  -webkit-mask-image: var(--change-square-16-svg);
-  mask-image: var(--change-square-16-svg);
-}
-
-%with-change-square-24-icon {
-  @extend %with-icon, %change-square-24-svg-prop;
-  background-image: var(--change-square-24-svg);
-}
-%with-change-square-24-mask {
-  @extend %with-mask, %change-square-24-svg-prop;
-  -webkit-mask-image: var(--change-square-24-svg);
-  mask-image: var(--change-square-24-svg);
-}
-
-%with-check-16-icon {
-  @extend %with-icon, %check-16-svg-prop;
-  background-image: var(--check-16-svg);
-}
-%with-check-16-mask {
-  @extend %with-mask, %check-16-svg-prop;
-  -webkit-mask-image: var(--check-16-svg);
-  mask-image: var(--check-16-svg);
-}
-
-%with-check-24-icon {
-  @extend %with-icon, %check-24-svg-prop;
-  background-image: var(--check-24-svg);
-}
-%with-check-24-mask {
-  @extend %with-mask, %check-24-svg-prop;
-  -webkit-mask-image: var(--check-24-svg);
-  mask-image: var(--check-24-svg);
-}
-
-%with-check-circle-16-icon {
-  @extend %with-icon, %check-circle-16-svg-prop;
-  background-image: var(--check-circle-16-svg);
-}
-%with-check-circle-16-mask {
-  @extend %with-mask, %check-circle-16-svg-prop;
-  -webkit-mask-image: var(--check-circle-16-svg);
-  mask-image: var(--check-circle-16-svg);
-}
-
-%with-check-circle-24-icon {
-  @extend %with-icon, %check-circle-24-svg-prop;
-  background-image: var(--check-circle-24-svg);
-}
-%with-check-circle-24-mask {
-  @extend %with-mask, %check-circle-24-svg-prop;
-  -webkit-mask-image: var(--check-circle-24-svg);
-  mask-image: var(--check-circle-24-svg);
-}
-
-%with-check-circle-fill-16-icon {
-  @extend %with-icon, %check-circle-fill-16-svg-prop;
-  background-image: var(--check-circle-fill-16-svg);
-}
-%with-check-circle-fill-16-mask {
-  @extend %with-mask, %check-circle-fill-16-svg-prop;
-  -webkit-mask-image: var(--check-circle-fill-16-svg);
-  mask-image: var(--check-circle-fill-16-svg);
-}
-
-%with-check-circle-fill-24-icon {
-  @extend %with-icon, %check-circle-fill-24-svg-prop;
-  background-image: var(--check-circle-fill-24-svg);
-}
-%with-check-circle-fill-24-mask {
-  @extend %with-mask, %check-circle-fill-24-svg-prop;
-  -webkit-mask-image: var(--check-circle-fill-24-svg);
-  mask-image: var(--check-circle-fill-24-svg);
-}
-
-%with-check-circle-fill-icon {
-  @extend %with-icon, %check-circle-fill-16-svg-prop;
-  background-image: var(--check-circle-fill-16-svg);
-}
-%with-check-circle-fill-mask {
-  @extend %with-mask, %check-circle-fill-16-svg-prop;
-  -webkit-mask-image: var(--check-circle-fill-16-svg);
-  mask-image: var(--check-circle-fill-16-svg);
-}
-
-%with-check-circle-outline-icon {
-  @extend %with-icon, %check-circle-16-svg-prop;
-  background-image: var(--check-circle-16-svg);
-}
-%with-check-circle-outline-mask {
-  @extend %with-mask, %check-circle-16-svg-prop;
-  -webkit-mask-image: var(--check-circle-16-svg);
-  mask-image: var(--check-circle-16-svg);
-}
-
-%with-check-diamond-16-icon {
-  @extend %with-icon, %check-diamond-16-svg-prop;
-  background-image: var(--check-diamond-16-svg);
-}
-%with-check-diamond-16-mask {
-  @extend %with-mask, %check-diamond-16-svg-prop;
-  -webkit-mask-image: var(--check-diamond-16-svg);
-  mask-image: var(--check-diamond-16-svg);
-}
-
-%with-check-diamond-24-icon {
-  @extend %with-icon, %check-diamond-24-svg-prop;
-  background-image: var(--check-diamond-24-svg);
-}
-%with-check-diamond-24-mask {
-  @extend %with-mask, %check-diamond-24-svg-prop;
-  -webkit-mask-image: var(--check-diamond-24-svg);
-  mask-image: var(--check-diamond-24-svg);
-}
-
-%with-check-diamond-fill-16-icon {
-  @extend %with-icon, %check-diamond-fill-16-svg-prop;
-  background-image: var(--check-diamond-fill-16-svg);
-}
-%with-check-diamond-fill-16-mask {
-  @extend %with-mask, %check-diamond-fill-16-svg-prop;
-  -webkit-mask-image: var(--check-diamond-fill-16-svg);
-  mask-image: var(--check-diamond-fill-16-svg);
-}
-
-%with-check-diamond-fill-24-icon {
-  @extend %with-icon, %check-diamond-fill-24-svg-prop;
-  background-image: var(--check-diamond-fill-24-svg);
-}
-%with-check-diamond-fill-24-mask {
-  @extend %with-mask, %check-diamond-fill-24-svg-prop;
-  -webkit-mask-image: var(--check-diamond-fill-24-svg);
-  mask-image: var(--check-diamond-fill-24-svg);
-}
-
-%with-check-hexagon-16-icon {
-  @extend %with-icon, %check-hexagon-16-svg-prop;
-  background-image: var(--check-hexagon-16-svg);
-}
-%with-check-hexagon-16-mask {
-  @extend %with-mask, %check-hexagon-16-svg-prop;
-  -webkit-mask-image: var(--check-hexagon-16-svg);
-  mask-image: var(--check-hexagon-16-svg);
-}
-
-%with-check-hexagon-24-icon {
-  @extend %with-icon, %check-hexagon-24-svg-prop;
-  background-image: var(--check-hexagon-24-svg);
-}
-%with-check-hexagon-24-mask {
-  @extend %with-mask, %check-hexagon-24-svg-prop;
-  -webkit-mask-image: var(--check-hexagon-24-svg);
-  mask-image: var(--check-hexagon-24-svg);
-}
-
-%with-check-hexagon-fill-16-icon {
-  @extend %with-icon, %check-hexagon-fill-16-svg-prop;
-  background-image: var(--check-hexagon-fill-16-svg);
-}
-%with-check-hexagon-fill-16-mask {
-  @extend %with-mask, %check-hexagon-fill-16-svg-prop;
-  -webkit-mask-image: var(--check-hexagon-fill-16-svg);
-  mask-image: var(--check-hexagon-fill-16-svg);
-}
-
-%with-check-hexagon-fill-24-icon {
-  @extend %with-icon, %check-hexagon-fill-24-svg-prop;
-  background-image: var(--check-hexagon-fill-24-svg);
-}
-%with-check-hexagon-fill-24-mask {
-  @extend %with-mask, %check-hexagon-fill-24-svg-prop;
-  -webkit-mask-image: var(--check-hexagon-fill-24-svg);
-  mask-image: var(--check-hexagon-fill-24-svg);
-}
-
-%with-check-plain-icon {
-  @extend %with-icon, %check-16-svg-prop;
-  background-image: var(--check-16-svg);
-}
-%with-check-plain-mask {
-  @extend %with-mask, %check-16-svg-prop;
-  -webkit-mask-image: var(--check-16-svg);
-  mask-image: var(--check-16-svg);
-}
-
-%with-check-square-16-icon {
-  @extend %with-icon, %check-square-16-svg-prop;
-  background-image: var(--check-square-16-svg);
-}
-%with-check-square-16-mask {
-  @extend %with-mask, %check-square-16-svg-prop;
-  -webkit-mask-image: var(--check-square-16-svg);
-  mask-image: var(--check-square-16-svg);
-}
-
-%with-check-square-24-icon {
-  @extend %with-icon, %check-square-24-svg-prop;
-  background-image: var(--check-square-24-svg);
-}
-%with-check-square-24-mask {
-  @extend %with-mask, %check-square-24-svg-prop;
-  -webkit-mask-image: var(--check-square-24-svg);
-  mask-image: var(--check-square-24-svg);
-}
-
-%with-check-square-fill-16-icon {
-  @extend %with-icon, %check-square-fill-16-svg-prop;
-  background-image: var(--check-square-fill-16-svg);
-}
-%with-check-square-fill-16-mask {
-  @extend %with-mask, %check-square-fill-16-svg-prop;
-  -webkit-mask-image: var(--check-square-fill-16-svg);
-  mask-image: var(--check-square-fill-16-svg);
-}
-
-%with-check-square-fill-24-icon {
-  @extend %with-icon, %check-square-fill-24-svg-prop;
-  background-image: var(--check-square-fill-24-svg);
-}
-%with-check-square-fill-24-mask {
-  @extend %with-mask, %check-square-fill-24-svg-prop;
-  -webkit-mask-image: var(--check-square-fill-24-svg);
-  mask-image: var(--check-square-fill-24-svg);
-}
-
-%with-chevron-down-16-icon {
-  @extend %with-icon, %chevron-down-16-svg-prop;
-  background-image: var(--chevron-down-16-svg);
-}
-%with-chevron-down-16-mask {
-  @extend %with-mask, %chevron-down-16-svg-prop;
-  -webkit-mask-image: var(--chevron-down-16-svg);
-  mask-image: var(--chevron-down-16-svg);
-}
-
-%with-chevron-down-24-icon {
-  @extend %with-icon, %chevron-down-24-svg-prop;
-  background-image: var(--chevron-down-24-svg);
-}
-%with-chevron-down-24-mask {
-  @extend %with-mask, %chevron-down-24-svg-prop;
-  -webkit-mask-image: var(--chevron-down-24-svg);
-  mask-image: var(--chevron-down-24-svg);
-}
-
-%with-chevron-down-icon {
-  @extend %with-icon, %chevron-down-16-svg-prop;
-  background-image: var(--chevron-down-16-svg);
-}
-%with-chevron-down-mask {
-  @extend %with-mask, %chevron-down-16-svg-prop;
-  -webkit-mask-image: var(--chevron-down-16-svg);
-  mask-image: var(--chevron-down-16-svg);
-}
-
-%with-chevron-left-16-icon {
-  @extend %with-icon, %chevron-left-16-svg-prop;
-  background-image: var(--chevron-left-16-svg);
-}
-%with-chevron-left-16-mask {
-  @extend %with-mask, %chevron-left-16-svg-prop;
-  -webkit-mask-image: var(--chevron-left-16-svg);
-  mask-image: var(--chevron-left-16-svg);
-}
-
-%with-chevron-left-24-icon {
-  @extend %with-icon, %chevron-left-24-svg-prop;
-  background-image: var(--chevron-left-24-svg);
-}
-%with-chevron-left-24-mask {
-  @extend %with-mask, %chevron-left-24-svg-prop;
-  -webkit-mask-image: var(--chevron-left-24-svg);
-  mask-image: var(--chevron-left-24-svg);
-}
-
-%with-chevron-left-icon {
-  @extend %with-icon, %chevron-left-16-svg-prop;
-  background-image: var(--chevron-left-16-svg);
-}
-%with-chevron-left-mask {
-  @extend %with-mask, %chevron-left-16-svg-prop;
-  -webkit-mask-image: var(--chevron-left-16-svg);
-  mask-image: var(--chevron-left-16-svg);
-}
-
-%with-chevron-right-16-icon {
-  @extend %with-icon, %chevron-right-16-svg-prop;
-  background-image: var(--chevron-right-16-svg);
-}
-%with-chevron-right-16-mask {
-  @extend %with-mask, %chevron-right-16-svg-prop;
-  -webkit-mask-image: var(--chevron-right-16-svg);
-  mask-image: var(--chevron-right-16-svg);
-}
-
-%with-chevron-right-24-icon {
-  @extend %with-icon, %chevron-right-24-svg-prop;
-  background-image: var(--chevron-right-24-svg);
-}
-%with-chevron-right-24-mask {
-  @extend %with-mask, %chevron-right-24-svg-prop;
-  -webkit-mask-image: var(--chevron-right-24-svg);
-  mask-image: var(--chevron-right-24-svg);
-}
-
-%with-chevron-right-icon {
-  @extend %with-icon, %chevron-right-16-svg-prop;
-  background-image: var(--chevron-right-16-svg);
-}
-%with-chevron-right-mask {
-  @extend %with-mask, %chevron-right-16-svg-prop;
-  -webkit-mask-image: var(--chevron-right-16-svg);
-  mask-image: var(--chevron-right-16-svg);
-}
-
-%with-chevron-up-16-icon {
-  @extend %with-icon, %chevron-up-16-svg-prop;
-  background-image: var(--chevron-up-16-svg);
-}
-%with-chevron-up-16-mask {
-  @extend %with-mask, %chevron-up-16-svg-prop;
-  -webkit-mask-image: var(--chevron-up-16-svg);
-  mask-image: var(--chevron-up-16-svg);
-}
-
-%with-chevron-up-24-icon {
-  @extend %with-icon, %chevron-up-24-svg-prop;
-  background-image: var(--chevron-up-24-svg);
-}
-%with-chevron-up-24-mask {
-  @extend %with-mask, %chevron-up-24-svg-prop;
-  -webkit-mask-image: var(--chevron-up-24-svg);
-  mask-image: var(--chevron-up-24-svg);
-}
-
-%with-chevron-up-icon {
-  @extend %with-icon, %chevron-up-16-svg-prop;
-  background-image: var(--chevron-up-16-svg);
-}
-%with-chevron-up-mask {
-  @extend %with-mask, %chevron-up-16-svg-prop;
-  -webkit-mask-image: var(--chevron-up-16-svg);
-  mask-image: var(--chevron-up-16-svg);
-}
-
-%with-chevrons-down-16-icon {
-  @extend %with-icon, %chevrons-down-16-svg-prop;
-  background-image: var(--chevrons-down-16-svg);
-}
-%with-chevrons-down-16-mask {
-  @extend %with-mask, %chevrons-down-16-svg-prop;
-  -webkit-mask-image: var(--chevrons-down-16-svg);
-  mask-image: var(--chevrons-down-16-svg);
-}
-
-%with-chevrons-down-24-icon {
-  @extend %with-icon, %chevrons-down-24-svg-prop;
-  background-image: var(--chevrons-down-24-svg);
-}
-%with-chevrons-down-24-mask {
-  @extend %with-mask, %chevrons-down-24-svg-prop;
-  -webkit-mask-image: var(--chevrons-down-24-svg);
-  mask-image: var(--chevrons-down-24-svg);
-}
-
-%with-chevrons-left-16-icon {
-  @extend %with-icon, %chevrons-left-16-svg-prop;
-  background-image: var(--chevrons-left-16-svg);
-}
-%with-chevrons-left-16-mask {
-  @extend %with-mask, %chevrons-left-16-svg-prop;
-  -webkit-mask-image: var(--chevrons-left-16-svg);
-  mask-image: var(--chevrons-left-16-svg);
-}
-
-%with-chevrons-left-24-icon {
-  @extend %with-icon, %chevrons-left-24-svg-prop;
-  background-image: var(--chevrons-left-24-svg);
-}
-%with-chevrons-left-24-mask {
-  @extend %with-mask, %chevrons-left-24-svg-prop;
-  -webkit-mask-image: var(--chevrons-left-24-svg);
-  mask-image: var(--chevrons-left-24-svg);
-}
-
-%with-chevrons-right-16-icon {
-  @extend %with-icon, %chevrons-right-16-svg-prop;
-  background-image: var(--chevrons-right-16-svg);
-}
-%with-chevrons-right-16-mask {
-  @extend %with-mask, %chevrons-right-16-svg-prop;
-  -webkit-mask-image: var(--chevrons-right-16-svg);
-  mask-image: var(--chevrons-right-16-svg);
-}
-
-%with-chevrons-right-24-icon {
-  @extend %with-icon, %chevrons-right-24-svg-prop;
-  background-image: var(--chevrons-right-24-svg);
-}
-%with-chevrons-right-24-mask {
-  @extend %with-mask, %chevrons-right-24-svg-prop;
-  -webkit-mask-image: var(--chevrons-right-24-svg);
-  mask-image: var(--chevrons-right-24-svg);
-}
-
-%with-chevrons-up-16-icon {
-  @extend %with-icon, %chevrons-up-16-svg-prop;
-  background-image: var(--chevrons-up-16-svg);
-}
-%with-chevrons-up-16-mask {
-  @extend %with-mask, %chevrons-up-16-svg-prop;
-  -webkit-mask-image: var(--chevrons-up-16-svg);
-  mask-image: var(--chevrons-up-16-svg);
-}
-
-%with-chevrons-up-24-icon {
-  @extend %with-icon, %chevrons-up-24-svg-prop;
-  background-image: var(--chevrons-up-24-svg);
-}
-%with-chevrons-up-24-mask {
-  @extend %with-mask, %chevrons-up-24-svg-prop;
-  -webkit-mask-image: var(--chevrons-up-24-svg);
-  mask-image: var(--chevrons-up-24-svg);
-}
-
-%with-circle-16-icon {
-  @extend %with-icon, %circle-16-svg-prop;
-  background-image: var(--circle-16-svg);
-}
-%with-circle-16-mask {
-  @extend %with-mask, %circle-16-svg-prop;
-  -webkit-mask-image: var(--circle-16-svg);
-  mask-image: var(--circle-16-svg);
-}
-
-%with-circle-24-icon {
-  @extend %with-icon, %circle-24-svg-prop;
-  background-image: var(--circle-24-svg);
-}
-%with-circle-24-mask {
-  @extend %with-mask, %circle-24-svg-prop;
-  -webkit-mask-image: var(--circle-24-svg);
-  mask-image: var(--circle-24-svg);
-}
-
-%with-circle-dot-16-icon {
-  @extend %with-icon, %circle-dot-16-svg-prop;
-  background-image: var(--circle-dot-16-svg);
-}
-%with-circle-dot-16-mask {
-  @extend %with-mask, %circle-dot-16-svg-prop;
-  -webkit-mask-image: var(--circle-dot-16-svg);
-  mask-image: var(--circle-dot-16-svg);
-}
-
-%with-circle-dot-24-icon {
-  @extend %with-icon, %circle-dot-24-svg-prop;
-  background-image: var(--circle-dot-24-svg);
-}
-%with-circle-dot-24-mask {
-  @extend %with-mask, %circle-dot-24-svg-prop;
-  -webkit-mask-image: var(--circle-dot-24-svg);
-  mask-image: var(--circle-dot-24-svg);
-}
-
-%with-circle-fill-16-icon {
-  @extend %with-icon, %circle-fill-16-svg-prop;
-  background-image: var(--circle-fill-16-svg);
-}
-%with-circle-fill-16-mask {
-  @extend %with-mask, %circle-fill-16-svg-prop;
-  -webkit-mask-image: var(--circle-fill-16-svg);
-  mask-image: var(--circle-fill-16-svg);
-}
-
-%with-circle-fill-24-icon {
-  @extend %with-icon, %circle-fill-24-svg-prop;
-  background-image: var(--circle-fill-24-svg);
-}
-%with-circle-fill-24-mask {
-  @extend %with-mask, %circle-fill-24-svg-prop;
-  -webkit-mask-image: var(--circle-fill-24-svg);
-  mask-image: var(--circle-fill-24-svg);
-}
-
-%with-circle-half-16-icon {
-  @extend %with-icon, %circle-half-16-svg-prop;
-  background-image: var(--circle-half-16-svg);
-}
-%with-circle-half-16-mask {
-  @extend %with-mask, %circle-half-16-svg-prop;
-  -webkit-mask-image: var(--circle-half-16-svg);
-  mask-image: var(--circle-half-16-svg);
-}
-
-%with-circle-half-24-icon {
-  @extend %with-icon, %circle-half-24-svg-prop;
-  background-image: var(--circle-half-24-svg);
-}
-%with-circle-half-24-mask {
-  @extend %with-mask, %circle-half-24-svg-prop;
-  -webkit-mask-image: var(--circle-half-24-svg);
-  mask-image: var(--circle-half-24-svg);
-}
-
-%with-clipboard-16-icon {
-  @extend %with-icon, %clipboard-16-svg-prop;
-  background-image: var(--clipboard-16-svg);
-}
-%with-clipboard-16-mask {
-  @extend %with-mask, %clipboard-16-svg-prop;
-  -webkit-mask-image: var(--clipboard-16-svg);
-  mask-image: var(--clipboard-16-svg);
-}
-
-%with-clipboard-24-icon {
-  @extend %with-icon, %clipboard-24-svg-prop;
-  background-image: var(--clipboard-24-svg);
-}
-%with-clipboard-24-mask {
-  @extend %with-mask, %clipboard-24-svg-prop;
-  -webkit-mask-image: var(--clipboard-24-svg);
-  mask-image: var(--clipboard-24-svg);
-}
-
-%with-clipboard-checked-16-icon {
-  @extend %with-icon, %clipboard-checked-16-svg-prop;
-  background-image: var(--clipboard-checked-16-svg);
-}
-%with-clipboard-checked-16-mask {
-  @extend %with-mask, %clipboard-checked-16-svg-prop;
-  -webkit-mask-image: var(--clipboard-checked-16-svg);
-  mask-image: var(--clipboard-checked-16-svg);
-}
-
-%with-clipboard-checked-24-icon {
-  @extend %with-icon, %clipboard-checked-24-svg-prop;
-  background-image: var(--clipboard-checked-24-svg);
-}
-%with-clipboard-checked-24-mask {
-  @extend %with-mask, %clipboard-checked-24-svg-prop;
-  -webkit-mask-image: var(--clipboard-checked-24-svg);
-  mask-image: var(--clipboard-checked-24-svg);
-}
-
-%with-clipboard-copy-16-icon {
-  @extend %with-icon, %clipboard-copy-16-svg-prop;
-  background-image: var(--clipboard-copy-16-svg);
-}
-%with-clipboard-copy-16-mask {
-  @extend %with-mask, %clipboard-copy-16-svg-prop;
-  -webkit-mask-image: var(--clipboard-copy-16-svg);
-  mask-image: var(--clipboard-copy-16-svg);
-}
-
-%with-clipboard-copy-24-icon {
-  @extend %with-icon, %clipboard-copy-24-svg-prop;
-  background-image: var(--clipboard-copy-24-svg);
-}
-%with-clipboard-copy-24-mask {
-  @extend %with-mask, %clipboard-copy-24-svg-prop;
-  -webkit-mask-image: var(--clipboard-copy-24-svg);
-  mask-image: var(--clipboard-copy-24-svg);
-}
-
-%with-clock-16-icon {
-  @extend %with-icon, %clock-16-svg-prop;
-  background-image: var(--clock-16-svg);
-}
-%with-clock-16-mask {
-  @extend %with-mask, %clock-16-svg-prop;
-  -webkit-mask-image: var(--clock-16-svg);
-  mask-image: var(--clock-16-svg);
-}
-
-%with-clock-24-icon {
-  @extend %with-icon, %clock-24-svg-prop;
-  background-image: var(--clock-24-svg);
-}
-%with-clock-24-mask {
-  @extend %with-mask, %clock-24-svg-prop;
-  -webkit-mask-image: var(--clock-24-svg);
-  mask-image: var(--clock-24-svg);
-}
-
-%with-clock-fill-icon {
-  @extend %with-icon, %clock-16-svg-prop;
-  background-image: var(--clock-16-svg);
-}
-%with-clock-fill-mask {
-  @extend %with-mask, %clock-16-svg-prop;
-  -webkit-mask-image: var(--clock-16-svg);
-  mask-image: var(--clock-16-svg);
-}
-
-%with-clock-outline-icon {
-  @extend %with-icon, %clock-16-svg-prop;
-  background-image: var(--clock-16-svg);
-}
-%with-clock-outline-mask {
-  @extend %with-mask, %clock-16-svg-prop;
-  -webkit-mask-image: var(--clock-16-svg);
-  mask-image: var(--clock-16-svg);
-}
-
-%with-cloud-16-icon {
-  @extend %with-icon, %cloud-16-svg-prop;
-  background-image: var(--cloud-16-svg);
-}
-%with-cloud-16-mask {
-  @extend %with-mask, %cloud-16-svg-prop;
-  -webkit-mask-image: var(--cloud-16-svg);
-  mask-image: var(--cloud-16-svg);
-}
-
-%with-cloud-24-icon {
-  @extend %with-icon, %cloud-24-svg-prop;
-  background-image: var(--cloud-24-svg);
-}
-%with-cloud-24-mask {
-  @extend %with-mask, %cloud-24-svg-prop;
-  -webkit-mask-image: var(--cloud-24-svg);
-  mask-image: var(--cloud-24-svg);
-}
-
-%with-cloud-check-16-icon {
-  @extend %with-icon, %cloud-check-16-svg-prop;
-  background-image: var(--cloud-check-16-svg);
-}
-%with-cloud-check-16-mask {
-  @extend %with-mask, %cloud-check-16-svg-prop;
-  -webkit-mask-image: var(--cloud-check-16-svg);
-  mask-image: var(--cloud-check-16-svg);
-}
-
-%with-cloud-check-24-icon {
-  @extend %with-icon, %cloud-check-24-svg-prop;
-  background-image: var(--cloud-check-24-svg);
-}
-%with-cloud-check-24-mask {
-  @extend %with-mask, %cloud-check-24-svg-prop;
-  -webkit-mask-image: var(--cloud-check-24-svg);
-  mask-image: var(--cloud-check-24-svg);
-}
-
-%with-cloud-cross-icon {
-  @extend %with-icon, %cloud-cross-svg-prop;
-  background-image: var(--cloud-cross-svg);
-}
-%with-cloud-cross-mask {
-  @extend %with-mask, %cloud-cross-svg-prop;
-  -webkit-mask-image: var(--cloud-cross-svg);
-  mask-image: var(--cloud-cross-svg);
-}
-
-%with-cloud-download-16-icon {
-  @extend %with-icon, %cloud-download-16-svg-prop;
-  background-image: var(--cloud-download-16-svg);
-}
-%with-cloud-download-16-mask {
-  @extend %with-mask, %cloud-download-16-svg-prop;
-  -webkit-mask-image: var(--cloud-download-16-svg);
-  mask-image: var(--cloud-download-16-svg);
-}
-
-%with-cloud-download-24-icon {
-  @extend %with-icon, %cloud-download-24-svg-prop;
-  background-image: var(--cloud-download-24-svg);
-}
-%with-cloud-download-24-mask {
-  @extend %with-mask, %cloud-download-24-svg-prop;
-  -webkit-mask-image: var(--cloud-download-24-svg);
-  mask-image: var(--cloud-download-24-svg);
-}
-
-%with-cloud-lightning-16-icon {
-  @extend %with-icon, %cloud-lightning-16-svg-prop;
-  background-image: var(--cloud-lightning-16-svg);
-}
-%with-cloud-lightning-16-mask {
-  @extend %with-mask, %cloud-lightning-16-svg-prop;
-  -webkit-mask-image: var(--cloud-lightning-16-svg);
-  mask-image: var(--cloud-lightning-16-svg);
-}
-
-%with-cloud-lightning-24-icon {
-  @extend %with-icon, %cloud-lightning-24-svg-prop;
-  background-image: var(--cloud-lightning-24-svg);
-}
-%with-cloud-lightning-24-mask {
-  @extend %with-mask, %cloud-lightning-24-svg-prop;
-  -webkit-mask-image: var(--cloud-lightning-24-svg);
-  mask-image: var(--cloud-lightning-24-svg);
-}
-
-%with-cloud-lock-16-icon {
-  @extend %with-icon, %cloud-lock-16-svg-prop;
-  background-image: var(--cloud-lock-16-svg);
-}
-%with-cloud-lock-16-mask {
-  @extend %with-mask, %cloud-lock-16-svg-prop;
-  -webkit-mask-image: var(--cloud-lock-16-svg);
-  mask-image: var(--cloud-lock-16-svg);
-}
-
-%with-cloud-lock-24-icon {
-  @extend %with-icon, %cloud-lock-24-svg-prop;
-  background-image: var(--cloud-lock-24-svg);
-}
-%with-cloud-lock-24-mask {
-  @extend %with-mask, %cloud-lock-24-svg-prop;
-  -webkit-mask-image: var(--cloud-lock-24-svg);
-  mask-image: var(--cloud-lock-24-svg);
-}
-
-%with-cloud-off-16-icon {
-  @extend %with-icon, %cloud-off-16-svg-prop;
-  background-image: var(--cloud-off-16-svg);
-}
-%with-cloud-off-16-mask {
-  @extend %with-mask, %cloud-off-16-svg-prop;
-  -webkit-mask-image: var(--cloud-off-16-svg);
-  mask-image: var(--cloud-off-16-svg);
-}
-
-%with-cloud-off-24-icon {
-  @extend %with-icon, %cloud-off-24-svg-prop;
-  background-image: var(--cloud-off-24-svg);
-}
-%with-cloud-off-24-mask {
-  @extend %with-mask, %cloud-off-24-svg-prop;
-  -webkit-mask-image: var(--cloud-off-24-svg);
-  mask-image: var(--cloud-off-24-svg);
-}
-
-%with-cloud-upload-16-icon {
-  @extend %with-icon, %cloud-upload-16-svg-prop;
-  background-image: var(--cloud-upload-16-svg);
-}
-%with-cloud-upload-16-mask {
-  @extend %with-mask, %cloud-upload-16-svg-prop;
-  -webkit-mask-image: var(--cloud-upload-16-svg);
-  mask-image: var(--cloud-upload-16-svg);
-}
-
-%with-cloud-upload-24-icon {
-  @extend %with-icon, %cloud-upload-24-svg-prop;
-  background-image: var(--cloud-upload-24-svg);
-}
-%with-cloud-upload-24-mask {
-  @extend %with-mask, %cloud-upload-24-svg-prop;
-  -webkit-mask-image: var(--cloud-upload-24-svg);
-  mask-image: var(--cloud-upload-24-svg);
-}
-
-%with-cloud-x-16-icon {
-  @extend %with-icon, %cloud-x-16-svg-prop;
-  background-image: var(--cloud-x-16-svg);
-}
-%with-cloud-x-16-mask {
-  @extend %with-mask, %cloud-x-16-svg-prop;
-  -webkit-mask-image: var(--cloud-x-16-svg);
-  mask-image: var(--cloud-x-16-svg);
-}
-
-%with-cloud-x-24-icon {
-  @extend %with-icon, %cloud-x-24-svg-prop;
-  background-image: var(--cloud-x-24-svg);
-}
-%with-cloud-x-24-mask {
-  @extend %with-mask, %cloud-x-24-svg-prop;
-  -webkit-mask-image: var(--cloud-x-24-svg);
-  mask-image: var(--cloud-x-24-svg);
-}
-
-%with-code-16-icon {
-  @extend %with-icon, %code-16-svg-prop;
-  background-image: var(--code-16-svg);
-}
-%with-code-16-mask {
-  @extend %with-mask, %code-16-svg-prop;
-  -webkit-mask-image: var(--code-16-svg);
-  mask-image: var(--code-16-svg);
-}
-
-%with-code-24-icon {
-  @extend %with-icon, %code-24-svg-prop;
-  background-image: var(--code-24-svg);
-}
-%with-code-24-mask {
-  @extend %with-mask, %code-24-svg-prop;
-  -webkit-mask-image: var(--code-24-svg);
-  mask-image: var(--code-24-svg);
-}
-
-%with-code-icon {
-  @extend %with-icon, %code-16-svg-prop;
-  background-image: var(--code-16-svg);
-}
-%with-code-mask {
-  @extend %with-mask, %code-16-svg-prop;
-  -webkit-mask-image: var(--code-16-svg);
-  mask-image: var(--code-16-svg);
-}
-
-%with-codepen-16-icon {
-  @extend %with-icon, %codepen-16-svg-prop;
-  background-image: var(--codepen-16-svg);
-}
-%with-codepen-16-mask {
-  @extend %with-mask, %codepen-16-svg-prop;
-  -webkit-mask-image: var(--codepen-16-svg);
-  mask-image: var(--codepen-16-svg);
-}
-
-%with-codepen-24-icon {
-  @extend %with-icon, %codepen-24-svg-prop;
-  background-image: var(--codepen-24-svg);
-}
-%with-codepen-24-mask {
-  @extend %with-mask, %codepen-24-svg-prop;
-  -webkit-mask-image: var(--codepen-24-svg);
-  mask-image: var(--codepen-24-svg);
-}
-
-%with-codepen-color-16-icon {
-  @extend %with-icon, %codepen-color-16-svg-prop;
-  background-image: var(--codepen-color-16-svg);
-}
-%with-codepen-color-16-mask {
-  @extend %with-mask, %codepen-color-16-svg-prop;
-  -webkit-mask-image: var(--codepen-color-16-svg);
-  mask-image: var(--codepen-color-16-svg);
-}
-
-%with-codepen-color-24-icon {
-  @extend %with-icon, %codepen-color-24-svg-prop;
-  background-image: var(--codepen-color-24-svg);
-}
-%with-codepen-color-24-mask {
-  @extend %with-mask, %codepen-color-24-svg-prop;
-  -webkit-mask-image: var(--codepen-color-24-svg);
-  mask-image: var(--codepen-color-24-svg);
-}
-
-%with-collections-16-icon {
-  @extend %with-icon, %collections-16-svg-prop;
-  background-image: var(--collections-16-svg);
-}
-%with-collections-16-mask {
-  @extend %with-mask, %collections-16-svg-prop;
-  -webkit-mask-image: var(--collections-16-svg);
-  mask-image: var(--collections-16-svg);
-}
-
-%with-collections-24-icon {
-  @extend %with-icon, %collections-24-svg-prop;
-  background-image: var(--collections-24-svg);
-}
-%with-collections-24-mask {
-  @extend %with-mask, %collections-24-svg-prop;
-  -webkit-mask-image: var(--collections-24-svg);
-  mask-image: var(--collections-24-svg);
-}
-
-%with-command-16-icon {
-  @extend %with-icon, %command-16-svg-prop;
-  background-image: var(--command-16-svg);
-}
-%with-command-16-mask {
-  @extend %with-mask, %command-16-svg-prop;
-  -webkit-mask-image: var(--command-16-svg);
-  mask-image: var(--command-16-svg);
-}
-
-%with-command-24-icon {
-  @extend %with-icon, %command-24-svg-prop;
-  background-image: var(--command-24-svg);
-}
-%with-command-24-mask {
-  @extend %with-mask, %command-24-svg-prop;
-  -webkit-mask-image: var(--command-24-svg);
-  mask-image: var(--command-24-svg);
-}
-
-%with-compass-16-icon {
-  @extend %with-icon, %compass-16-svg-prop;
-  background-image: var(--compass-16-svg);
-}
-%with-compass-16-mask {
-  @extend %with-mask, %compass-16-svg-prop;
-  -webkit-mask-image: var(--compass-16-svg);
-  mask-image: var(--compass-16-svg);
-}
-
-%with-compass-24-icon {
-  @extend %with-icon, %compass-24-svg-prop;
-  background-image: var(--compass-24-svg);
-}
-%with-compass-24-mask {
-  @extend %with-mask, %compass-24-svg-prop;
-  -webkit-mask-image: var(--compass-24-svg);
-  mask-image: var(--compass-24-svg);
-}
-
-%with-connection-16-icon {
-  @extend %with-icon, %connection-16-svg-prop;
-  background-image: var(--connection-16-svg);
-}
-%with-connection-16-mask {
-  @extend %with-mask, %connection-16-svg-prop;
-  -webkit-mask-image: var(--connection-16-svg);
-  mask-image: var(--connection-16-svg);
-}
-
-%with-connection-24-icon {
-  @extend %with-icon, %connection-24-svg-prop;
-  background-image: var(--connection-24-svg);
-}
-%with-connection-24-mask {
-  @extend %with-mask, %connection-24-svg-prop;
-  -webkit-mask-image: var(--connection-24-svg);
-  mask-image: var(--connection-24-svg);
-}
-
-%with-connection-gateway-16-icon {
-  @extend %with-icon, %connection-gateway-16-svg-prop;
-  background-image: var(--connection-gateway-16-svg);
-}
-%with-connection-gateway-16-mask {
-  @extend %with-mask, %connection-gateway-16-svg-prop;
-  -webkit-mask-image: var(--connection-gateway-16-svg);
-  mask-image: var(--connection-gateway-16-svg);
-}
-
-%with-connection-gateway-24-icon {
-  @extend %with-icon, %connection-gateway-24-svg-prop;
-  background-image: var(--connection-gateway-24-svg);
-}
-%with-connection-gateway-24-mask {
-  @extend %with-mask, %connection-gateway-24-svg-prop;
-  -webkit-mask-image: var(--connection-gateway-24-svg);
-  mask-image: var(--connection-gateway-24-svg);
-}
-
-%with-console-icon {
-  @extend %with-icon, %terminal-16-svg-prop;
-  background-image: var(--terminal-16-svg);
-}
-%with-console-mask {
-  @extend %with-mask, %terminal-16-svg-prop;
-  -webkit-mask-image: var(--terminal-16-svg);
-  mask-image: var(--terminal-16-svg);
-}
-
-%with-consul-16-icon {
-  @extend %with-icon, %consul-16-svg-prop;
-  background-image: var(--consul-16-svg);
-}
-%with-consul-16-mask {
-  @extend %with-mask, %consul-16-svg-prop;
-  -webkit-mask-image: var(--consul-16-svg);
-  mask-image: var(--consul-16-svg);
-}
-
-%with-consul-24-icon {
-  @extend %with-icon, %consul-24-svg-prop;
-  background-image: var(--consul-24-svg);
-}
-%with-consul-24-mask {
-  @extend %with-mask, %consul-24-svg-prop;
-  -webkit-mask-image: var(--consul-24-svg);
-  mask-image: var(--consul-24-svg);
-}
-
-%with-consul-color-16-icon {
-  @extend %with-icon, %consul-color-16-svg-prop;
-  background-image: var(--consul-color-16-svg);
-}
-%with-consul-color-16-mask {
-  @extend %with-mask, %consul-color-16-svg-prop;
-  -webkit-mask-image: var(--consul-color-16-svg);
-  mask-image: var(--consul-color-16-svg);
-}
-
-%with-consul-color-24-icon {
-  @extend %with-icon, %consul-color-24-svg-prop;
-  background-image: var(--consul-color-24-svg);
-}
-%with-consul-color-24-mask {
-  @extend %with-mask, %consul-color-24-svg-prop;
-  -webkit-mask-image: var(--consul-color-24-svg);
-  mask-image: var(--consul-color-24-svg);
-}
-
-%with-copy-action-icon {
-  @extend %with-icon, %clipboard-copy-16-svg-prop;
-  background-image: var(--clipboard-copy-16-svg);
-}
-%with-copy-action-mask {
-  @extend %with-mask, %clipboard-copy-16-svg-prop;
-  -webkit-mask-image: var(--clipboard-copy-16-svg);
-  mask-image: var(--clipboard-copy-16-svg);
-}
-
-%with-copy-success-icon {
-  @extend %with-icon, %clipboard-checked-16-svg-prop;
-  background-image: var(--clipboard-checked-16-svg);
-}
-%with-copy-success-mask {
-  @extend %with-mask, %clipboard-checked-16-svg-prop;
-  -webkit-mask-image: var(--clipboard-checked-16-svg);
-  mask-image: var(--clipboard-checked-16-svg);
-}
-
-%with-corner-down-left-16-icon {
-  @extend %with-icon, %corner-down-left-16-svg-prop;
-  background-image: var(--corner-down-left-16-svg);
-}
-%with-corner-down-left-16-mask {
-  @extend %with-mask, %corner-down-left-16-svg-prop;
-  -webkit-mask-image: var(--corner-down-left-16-svg);
-  mask-image: var(--corner-down-left-16-svg);
-}
-
-%with-corner-down-left-24-icon {
-  @extend %with-icon, %corner-down-left-24-svg-prop;
-  background-image: var(--corner-down-left-24-svg);
-}
-%with-corner-down-left-24-mask {
-  @extend %with-mask, %corner-down-left-24-svg-prop;
-  -webkit-mask-image: var(--corner-down-left-24-svg);
-  mask-image: var(--corner-down-left-24-svg);
-}
-
-%with-corner-down-right-16-icon {
-  @extend %with-icon, %corner-down-right-16-svg-prop;
-  background-image: var(--corner-down-right-16-svg);
-}
-%with-corner-down-right-16-mask {
-  @extend %with-mask, %corner-down-right-16-svg-prop;
-  -webkit-mask-image: var(--corner-down-right-16-svg);
-  mask-image: var(--corner-down-right-16-svg);
-}
-
-%with-corner-down-right-24-icon {
-  @extend %with-icon, %corner-down-right-24-svg-prop;
-  background-image: var(--corner-down-right-24-svg);
-}
-%with-corner-down-right-24-mask {
-  @extend %with-mask, %corner-down-right-24-svg-prop;
-  -webkit-mask-image: var(--corner-down-right-24-svg);
-  mask-image: var(--corner-down-right-24-svg);
-}
-
-%with-corner-left-down-16-icon {
-  @extend %with-icon, %corner-left-down-16-svg-prop;
-  background-image: var(--corner-left-down-16-svg);
-}
-%with-corner-left-down-16-mask {
-  @extend %with-mask, %corner-left-down-16-svg-prop;
-  -webkit-mask-image: var(--corner-left-down-16-svg);
-  mask-image: var(--corner-left-down-16-svg);
-}
-
-%with-corner-left-down-24-icon {
-  @extend %with-icon, %corner-left-down-24-svg-prop;
-  background-image: var(--corner-left-down-24-svg);
-}
-%with-corner-left-down-24-mask {
-  @extend %with-mask, %corner-left-down-24-svg-prop;
-  -webkit-mask-image: var(--corner-left-down-24-svg);
-  mask-image: var(--corner-left-down-24-svg);
-}
-
-%with-corner-left-up-16-icon {
-  @extend %with-icon, %corner-left-up-16-svg-prop;
-  background-image: var(--corner-left-up-16-svg);
-}
-%with-corner-left-up-16-mask {
-  @extend %with-mask, %corner-left-up-16-svg-prop;
-  -webkit-mask-image: var(--corner-left-up-16-svg);
-  mask-image: var(--corner-left-up-16-svg);
-}
-
-%with-corner-left-up-24-icon {
-  @extend %with-icon, %corner-left-up-24-svg-prop;
-  background-image: var(--corner-left-up-24-svg);
-}
-%with-corner-left-up-24-mask {
-  @extend %with-mask, %corner-left-up-24-svg-prop;
-  -webkit-mask-image: var(--corner-left-up-24-svg);
-  mask-image: var(--corner-left-up-24-svg);
-}
-
-%with-corner-right-down-16-icon {
-  @extend %with-icon, %corner-right-down-16-svg-prop;
-  background-image: var(--corner-right-down-16-svg);
-}
-%with-corner-right-down-16-mask {
-  @extend %with-mask, %corner-right-down-16-svg-prop;
-  -webkit-mask-image: var(--corner-right-down-16-svg);
-  mask-image: var(--corner-right-down-16-svg);
-}
-
-%with-corner-right-down-24-icon {
-  @extend %with-icon, %corner-right-down-24-svg-prop;
-  background-image: var(--corner-right-down-24-svg);
-}
-%with-corner-right-down-24-mask {
-  @extend %with-mask, %corner-right-down-24-svg-prop;
-  -webkit-mask-image: var(--corner-right-down-24-svg);
-  mask-image: var(--corner-right-down-24-svg);
-}
-
-%with-corner-right-up-16-icon {
-  @extend %with-icon, %corner-right-up-16-svg-prop;
-  background-image: var(--corner-right-up-16-svg);
-}
-%with-corner-right-up-16-mask {
-  @extend %with-mask, %corner-right-up-16-svg-prop;
-  -webkit-mask-image: var(--corner-right-up-16-svg);
-  mask-image: var(--corner-right-up-16-svg);
-}
-
-%with-corner-right-up-24-icon {
-  @extend %with-icon, %corner-right-up-24-svg-prop;
-  background-image: var(--corner-right-up-24-svg);
-}
-%with-corner-right-up-24-mask {
-  @extend %with-mask, %corner-right-up-24-svg-prop;
-  -webkit-mask-image: var(--corner-right-up-24-svg);
-  mask-image: var(--corner-right-up-24-svg);
-}
-
-%with-corner-up-left-16-icon {
-  @extend %with-icon, %corner-up-left-16-svg-prop;
-  background-image: var(--corner-up-left-16-svg);
-}
-%with-corner-up-left-16-mask {
-  @extend %with-mask, %corner-up-left-16-svg-prop;
-  -webkit-mask-image: var(--corner-up-left-16-svg);
-  mask-image: var(--corner-up-left-16-svg);
-}
-
-%with-corner-up-left-24-icon {
-  @extend %with-icon, %corner-up-left-24-svg-prop;
-  background-image: var(--corner-up-left-24-svg);
-}
-%with-corner-up-left-24-mask {
-  @extend %with-mask, %corner-up-left-24-svg-prop;
-  -webkit-mask-image: var(--corner-up-left-24-svg);
-  mask-image: var(--corner-up-left-24-svg);
-}
-
-%with-corner-up-right-16-icon {
-  @extend %with-icon, %corner-up-right-16-svg-prop;
-  background-image: var(--corner-up-right-16-svg);
-}
-%with-corner-up-right-16-mask {
-  @extend %with-mask, %corner-up-right-16-svg-prop;
-  -webkit-mask-image: var(--corner-up-right-16-svg);
-  mask-image: var(--corner-up-right-16-svg);
-}
-
-%with-corner-up-right-24-icon {
-  @extend %with-icon, %corner-up-right-24-svg-prop;
-  background-image: var(--corner-up-right-24-svg);
-}
-%with-corner-up-right-24-mask {
-  @extend %with-mask, %corner-up-right-24-svg-prop;
-  -webkit-mask-image: var(--corner-up-right-24-svg);
-  mask-image: var(--corner-up-right-24-svg);
-}
-
-%with-cpu-16-icon {
-  @extend %with-icon, %cpu-16-svg-prop;
-  background-image: var(--cpu-16-svg);
-}
-%with-cpu-16-mask {
-  @extend %with-mask, %cpu-16-svg-prop;
-  -webkit-mask-image: var(--cpu-16-svg);
-  mask-image: var(--cpu-16-svg);
-}
-
-%with-cpu-24-icon {
-  @extend %with-icon, %cpu-24-svg-prop;
-  background-image: var(--cpu-24-svg);
-}
-%with-cpu-24-mask {
-  @extend %with-mask, %cpu-24-svg-prop;
-  -webkit-mask-image: var(--cpu-24-svg);
-  mask-image: var(--cpu-24-svg);
-}
-
-%with-credit-card-16-icon {
-  @extend %with-icon, %credit-card-16-svg-prop;
-  background-image: var(--credit-card-16-svg);
-}
-%with-credit-card-16-mask {
-  @extend %with-mask, %credit-card-16-svg-prop;
-  -webkit-mask-image: var(--credit-card-16-svg);
-  mask-image: var(--credit-card-16-svg);
-}
-
-%with-credit-card-24-icon {
-  @extend %with-icon, %credit-card-24-svg-prop;
-  background-image: var(--credit-card-24-svg);
-}
-%with-credit-card-24-mask {
-  @extend %with-mask, %credit-card-24-svg-prop;
-  -webkit-mask-image: var(--credit-card-24-svg);
-  mask-image: var(--credit-card-24-svg);
-}
-
-%with-crop-16-icon {
-  @extend %with-icon, %crop-16-svg-prop;
-  background-image: var(--crop-16-svg);
-}
-%with-crop-16-mask {
-  @extend %with-mask, %crop-16-svg-prop;
-  -webkit-mask-image: var(--crop-16-svg);
-  mask-image: var(--crop-16-svg);
-}
-
-%with-crop-24-icon {
-  @extend %with-icon, %crop-24-svg-prop;
-  background-image: var(--crop-24-svg);
-}
-%with-crop-24-mask {
-  @extend %with-mask, %crop-24-svg-prop;
-  -webkit-mask-image: var(--crop-24-svg);
-  mask-image: var(--crop-24-svg);
-}
-
-%with-crosshair-16-icon {
-  @extend %with-icon, %crosshair-16-svg-prop;
-  background-image: var(--crosshair-16-svg);
-}
-%with-crosshair-16-mask {
-  @extend %with-mask, %crosshair-16-svg-prop;
-  -webkit-mask-image: var(--crosshair-16-svg);
-  mask-image: var(--crosshair-16-svg);
-}
-
-%with-crosshair-24-icon {
-  @extend %with-icon, %crosshair-24-svg-prop;
-  background-image: var(--crosshair-24-svg);
-}
-%with-crosshair-24-mask {
-  @extend %with-mask, %crosshair-24-svg-prop;
-  -webkit-mask-image: var(--crosshair-24-svg);
-  mask-image: var(--crosshair-24-svg);
-}
-
-%with-dashboard-16-icon {
-  @extend %with-icon, %dashboard-16-svg-prop;
-  background-image: var(--dashboard-16-svg);
-}
-%with-dashboard-16-mask {
-  @extend %with-mask, %dashboard-16-svg-prop;
-  -webkit-mask-image: var(--dashboard-16-svg);
-  mask-image: var(--dashboard-16-svg);
-}
-
-%with-dashboard-24-icon {
-  @extend %with-icon, %dashboard-24-svg-prop;
-  background-image: var(--dashboard-24-svg);
-}
-%with-dashboard-24-mask {
-  @extend %with-mask, %dashboard-24-svg-prop;
-  -webkit-mask-image: var(--dashboard-24-svg);
-  mask-image: var(--dashboard-24-svg);
-}
-
-%with-database-16-icon {
-  @extend %with-icon, %database-16-svg-prop;
-  background-image: var(--database-16-svg);
-}
-%with-database-16-mask {
-  @extend %with-mask, %database-16-svg-prop;
-  -webkit-mask-image: var(--database-16-svg);
-  mask-image: var(--database-16-svg);
-}
-
-%with-database-24-icon {
-  @extend %with-icon, %database-24-svg-prop;
-  background-image: var(--database-24-svg);
-}
-%with-database-24-mask {
-  @extend %with-mask, %database-24-svg-prop;
-  -webkit-mask-image: var(--database-24-svg);
-  mask-image: var(--database-24-svg);
-}
-
-%with-database-icon {
-  @extend %with-icon, %database-16-svg-prop;
-  background-image: var(--database-16-svg);
-}
-%with-database-mask {
-  @extend %with-mask, %database-16-svg-prop;
-  -webkit-mask-image: var(--database-16-svg);
-  mask-image: var(--database-16-svg);
-}
-
-%with-delay-16-icon {
-  @extend %with-icon, %delay-16-svg-prop;
-  background-image: var(--delay-16-svg);
-}
-%with-delay-16-mask {
-  @extend %with-mask, %delay-16-svg-prop;
-  -webkit-mask-image: var(--delay-16-svg);
-  mask-image: var(--delay-16-svg);
-}
-
-%with-delay-24-icon {
-  @extend %with-icon, %delay-24-svg-prop;
-  background-image: var(--delay-24-svg);
-}
-%with-delay-24-mask {
-  @extend %with-mask, %delay-24-svg-prop;
-  -webkit-mask-image: var(--delay-24-svg);
-  mask-image: var(--delay-24-svg);
-}
-
-%with-delay-icon {
-  @extend %with-icon, %delay-16-svg-prop;
-  background-image: var(--delay-16-svg);
-}
-%with-delay-mask {
-  @extend %with-mask, %delay-16-svg-prop;
-  -webkit-mask-image: var(--delay-16-svg);
-  mask-image: var(--delay-16-svg);
-}
-
-%with-delete-16-icon {
-  @extend %with-icon, %delete-16-svg-prop;
-  background-image: var(--delete-16-svg);
-}
-%with-delete-16-mask {
-  @extend %with-mask, %delete-16-svg-prop;
-  -webkit-mask-image: var(--delete-16-svg);
-  mask-image: var(--delete-16-svg);
-}
-
-%with-delete-24-icon {
-  @extend %with-icon, %delete-24-svg-prop;
-  background-image: var(--delete-24-svg);
-}
-%with-delete-24-mask {
-  @extend %with-mask, %delete-24-svg-prop;
-  -webkit-mask-image: var(--delete-24-svg);
-  mask-image: var(--delete-24-svg);
-}
-
-%with-deny-alt-icon {
-  @extend %with-icon, %skip-16-svg-prop;
-  background-image: var(--skip-16-svg);
-}
-%with-deny-alt-mask {
-  @extend %with-mask, %skip-16-svg-prop;
-  -webkit-mask-image: var(--skip-16-svg);
-  mask-image: var(--skip-16-svg);
-}
-
-%with-deny-color-icon {
-  @extend %with-icon, %deny-color-svg-prop;
-  background-image: var(--deny-color-svg);
-}
-%with-deny-color-mask {
-  @extend %with-mask, %deny-color-svg-prop;
-  -webkit-mask-image: var(--deny-color-svg);
-  mask-image: var(--deny-color-svg);
-}
-
-%with-deny-default-icon {
-  @extend %with-icon, %skip-16-svg-prop;
-  background-image: var(--skip-16-svg);
-}
-%with-deny-default-mask {
-  @extend %with-mask, %skip-16-svg-prop;
-  -webkit-mask-image: var(--skip-16-svg);
-  mask-image: var(--skip-16-svg);
-}
-
-%with-diamond-16-icon {
-  @extend %with-icon, %diamond-16-svg-prop;
-  background-image: var(--diamond-16-svg);
-}
-%with-diamond-16-mask {
-  @extend %with-mask, %diamond-16-svg-prop;
-  -webkit-mask-image: var(--diamond-16-svg);
-  mask-image: var(--diamond-16-svg);
-}
-
-%with-diamond-24-icon {
-  @extend %with-icon, %diamond-24-svg-prop;
-  background-image: var(--diamond-24-svg);
-}
-%with-diamond-24-mask {
-  @extend %with-mask, %diamond-24-svg-prop;
-  -webkit-mask-image: var(--diamond-24-svg);
-  mask-image: var(--diamond-24-svg);
-}
-
-%with-diamond-fill-16-icon {
-  @extend %with-icon, %diamond-fill-16-svg-prop;
-  background-image: var(--diamond-fill-16-svg);
-}
-%with-diamond-fill-16-mask {
-  @extend %with-mask, %diamond-fill-16-svg-prop;
-  -webkit-mask-image: var(--diamond-fill-16-svg);
-  mask-image: var(--diamond-fill-16-svg);
-}
-
-%with-diamond-fill-24-icon {
-  @extend %with-icon, %diamond-fill-24-svg-prop;
-  background-image: var(--diamond-fill-24-svg);
-}
-%with-diamond-fill-24-mask {
-  @extend %with-mask, %diamond-fill-24-svg-prop;
-  -webkit-mask-image: var(--diamond-fill-24-svg);
-  mask-image: var(--diamond-fill-24-svg);
-}
-
-%with-disabled-icon {
-  @extend %with-icon, %skip-16-svg-prop;
-  background-image: var(--skip-16-svg);
-}
-%with-disabled-mask {
-  @extend %with-mask, %skip-16-svg-prop;
-  -webkit-mask-image: var(--skip-16-svg);
-  mask-image: var(--skip-16-svg);
-}
-
-%with-disc-16-icon {
-  @extend %with-icon, %disc-16-svg-prop;
-  background-image: var(--disc-16-svg);
-}
-%with-disc-16-mask {
-  @extend %with-mask, %disc-16-svg-prop;
-  -webkit-mask-image: var(--disc-16-svg);
-  mask-image: var(--disc-16-svg);
-}
-
-%with-disc-24-icon {
-  @extend %with-icon, %disc-24-svg-prop;
-  background-image: var(--disc-24-svg);
-}
-%with-disc-24-mask {
-  @extend %with-mask, %disc-24-svg-prop;
-  -webkit-mask-image: var(--disc-24-svg);
-  mask-image: var(--disc-24-svg);
-}
-
-%with-discussion-circle-16-icon {
-  @extend %with-icon, %discussion-circle-16-svg-prop;
-  background-image: var(--discussion-circle-16-svg);
-}
-%with-discussion-circle-16-mask {
-  @extend %with-mask, %discussion-circle-16-svg-prop;
-  -webkit-mask-image: var(--discussion-circle-16-svg);
-  mask-image: var(--discussion-circle-16-svg);
-}
-
-%with-discussion-circle-24-icon {
-  @extend %with-icon, %discussion-circle-24-svg-prop;
-  background-image: var(--discussion-circle-24-svg);
-}
-%with-discussion-circle-24-mask {
-  @extend %with-mask, %discussion-circle-24-svg-prop;
-  -webkit-mask-image: var(--discussion-circle-24-svg);
-  mask-image: var(--discussion-circle-24-svg);
-}
-
-%with-discussion-square-16-icon {
-  @extend %with-icon, %discussion-square-16-svg-prop;
-  background-image: var(--discussion-square-16-svg);
-}
-%with-discussion-square-16-mask {
-  @extend %with-mask, %discussion-square-16-svg-prop;
-  -webkit-mask-image: var(--discussion-square-16-svg);
-  mask-image: var(--discussion-square-16-svg);
-}
-
-%with-discussion-square-24-icon {
-  @extend %with-icon, %discussion-square-24-svg-prop;
-  background-image: var(--discussion-square-24-svg);
-}
-%with-discussion-square-24-mask {
-  @extend %with-mask, %discussion-square-24-svg-prop;
-  -webkit-mask-image: var(--discussion-square-24-svg);
-  mask-image: var(--discussion-square-24-svg);
-}
-
-%with-docker-16-icon {
-  @extend %with-icon, %docker-16-svg-prop;
-  background-image: var(--docker-16-svg);
-}
-%with-docker-16-mask {
-  @extend %with-mask, %docker-16-svg-prop;
-  -webkit-mask-image: var(--docker-16-svg);
-  mask-image: var(--docker-16-svg);
-}
-
-%with-docker-24-icon {
-  @extend %with-icon, %docker-24-svg-prop;
-  background-image: var(--docker-24-svg);
-}
-%with-docker-24-mask {
-  @extend %with-mask, %docker-24-svg-prop;
-  -webkit-mask-image: var(--docker-24-svg);
-  mask-image: var(--docker-24-svg);
-}
-
-%with-docker-color-16-icon {
-  @extend %with-icon, %docker-color-16-svg-prop;
-  background-image: var(--docker-color-16-svg);
-}
-%with-docker-color-16-mask {
-  @extend %with-mask, %docker-color-16-svg-prop;
-  -webkit-mask-image: var(--docker-color-16-svg);
-  mask-image: var(--docker-color-16-svg);
-}
-
-%with-docker-color-24-icon {
-  @extend %with-icon, %docker-color-24-svg-prop;
-  background-image: var(--docker-color-24-svg);
-}
-%with-docker-color-24-mask {
-  @extend %with-mask, %docker-color-24-svg-prop;
-  -webkit-mask-image: var(--docker-color-24-svg);
-  mask-image: var(--docker-color-24-svg);
-}
-
-%with-docs-16-icon {
-  @extend %with-icon, %docs-16-svg-prop;
-  background-image: var(--docs-16-svg);
-}
-%with-docs-16-mask {
-  @extend %with-mask, %docs-16-svg-prop;
-  -webkit-mask-image: var(--docs-16-svg);
-  mask-image: var(--docs-16-svg);
-}
-
-%with-docs-24-icon {
-  @extend %with-icon, %docs-24-svg-prop;
-  background-image: var(--docs-24-svg);
-}
-%with-docs-24-mask {
-  @extend %with-mask, %docs-24-svg-prop;
-  -webkit-mask-image: var(--docs-24-svg);
-  mask-image: var(--docs-24-svg);
-}
-
-%with-docs-download-16-icon {
-  @extend %with-icon, %docs-download-16-svg-prop;
-  background-image: var(--docs-download-16-svg);
-}
-%with-docs-download-16-mask {
-  @extend %with-mask, %docs-download-16-svg-prop;
-  -webkit-mask-image: var(--docs-download-16-svg);
-  mask-image: var(--docs-download-16-svg);
-}
-
-%with-docs-download-24-icon {
-  @extend %with-icon, %docs-download-24-svg-prop;
-  background-image: var(--docs-download-24-svg);
-}
-%with-docs-download-24-mask {
-  @extend %with-mask, %docs-download-24-svg-prop;
-  -webkit-mask-image: var(--docs-download-24-svg);
-  mask-image: var(--docs-download-24-svg);
-}
-
-%with-docs-link-16-icon {
-  @extend %with-icon, %docs-link-16-svg-prop;
-  background-image: var(--docs-link-16-svg);
-}
-%with-docs-link-16-mask {
-  @extend %with-mask, %docs-link-16-svg-prop;
-  -webkit-mask-image: var(--docs-link-16-svg);
-  mask-image: var(--docs-link-16-svg);
-}
-
-%with-docs-link-24-icon {
-  @extend %with-icon, %docs-link-24-svg-prop;
-  background-image: var(--docs-link-24-svg);
-}
-%with-docs-link-24-mask {
-  @extend %with-mask, %docs-link-24-svg-prop;
-  -webkit-mask-image: var(--docs-link-24-svg);
-  mask-image: var(--docs-link-24-svg);
-}
-
-%with-docs-icon {
-  @extend %with-icon, %docs-link-16-svg-prop;
-  background-image: var(--docs-link-16-svg);
-}
-%with-docs-mask {
-  @extend %with-mask, %docs-link-16-svg-prop;
-  -webkit-mask-image: var(--docs-link-16-svg);
-  mask-image: var(--docs-link-16-svg);
-}
-
-%with-dollar-sign-16-icon {
-  @extend %with-icon, %dollar-sign-16-svg-prop;
-  background-image: var(--dollar-sign-16-svg);
-}
-%with-dollar-sign-16-mask {
-  @extend %with-mask, %dollar-sign-16-svg-prop;
-  -webkit-mask-image: var(--dollar-sign-16-svg);
-  mask-image: var(--dollar-sign-16-svg);
-}
-
-%with-dollar-sign-24-icon {
-  @extend %with-icon, %dollar-sign-24-svg-prop;
-  background-image: var(--dollar-sign-24-svg);
-}
-%with-dollar-sign-24-mask {
-  @extend %with-mask, %dollar-sign-24-svg-prop;
-  -webkit-mask-image: var(--dollar-sign-24-svg);
-  mask-image: var(--dollar-sign-24-svg);
-}
-
-%with-dot-16-icon {
-  @extend %with-icon, %dot-16-svg-prop;
-  background-image: var(--dot-16-svg);
-}
-%with-dot-16-mask {
-  @extend %with-mask, %dot-16-svg-prop;
-  -webkit-mask-image: var(--dot-16-svg);
-  mask-image: var(--dot-16-svg);
-}
-
-%with-dot-24-icon {
-  @extend %with-icon, %dot-24-svg-prop;
-  background-image: var(--dot-24-svg);
-}
-%with-dot-24-mask {
-  @extend %with-mask, %dot-24-svg-prop;
-  -webkit-mask-image: var(--dot-24-svg);
-  mask-image: var(--dot-24-svg);
-}
-
-%with-dot-half-16-icon {
-  @extend %with-icon, %dot-half-16-svg-prop;
-  background-image: var(--dot-half-16-svg);
-}
-%with-dot-half-16-mask {
-  @extend %with-mask, %dot-half-16-svg-prop;
-  -webkit-mask-image: var(--dot-half-16-svg);
-  mask-image: var(--dot-half-16-svg);
-}
-
-%with-dot-half-24-icon {
-  @extend %with-icon, %dot-half-24-svg-prop;
-  background-image: var(--dot-half-24-svg);
-}
-%with-dot-half-24-mask {
-  @extend %with-mask, %dot-half-24-svg-prop;
-  -webkit-mask-image: var(--dot-half-24-svg);
-  mask-image: var(--dot-half-24-svg);
-}
-
-%with-download-16-icon {
-  @extend %with-icon, %download-16-svg-prop;
-  background-image: var(--download-16-svg);
-}
-%with-download-16-mask {
-  @extend %with-mask, %download-16-svg-prop;
-  -webkit-mask-image: var(--download-16-svg);
-  mask-image: var(--download-16-svg);
-}
-
-%with-download-24-icon {
-  @extend %with-icon, %download-24-svg-prop;
-  background-image: var(--download-24-svg);
-}
-%with-download-24-mask {
-  @extend %with-mask, %download-24-svg-prop;
-  -webkit-mask-image: var(--download-24-svg);
-  mask-image: var(--download-24-svg);
-}
-
-%with-download-icon {
-  @extend %with-icon, %download-16-svg-prop;
-  background-image: var(--download-16-svg);
-}
-%with-download-mask {
-  @extend %with-mask, %download-16-svg-prop;
-  -webkit-mask-image: var(--download-16-svg);
-  mask-image: var(--download-16-svg);
-}
-
-%with-droplet-16-icon {
-  @extend %with-icon, %droplet-16-svg-prop;
-  background-image: var(--droplet-16-svg);
-}
-%with-droplet-16-mask {
-  @extend %with-mask, %droplet-16-svg-prop;
-  -webkit-mask-image: var(--droplet-16-svg);
-  mask-image: var(--droplet-16-svg);
-}
-
-%with-droplet-24-icon {
-  @extend %with-icon, %droplet-24-svg-prop;
-  background-image: var(--droplet-24-svg);
-}
-%with-droplet-24-mask {
-  @extend %with-mask, %droplet-24-svg-prop;
-  -webkit-mask-image: var(--droplet-24-svg);
-  mask-image: var(--droplet-24-svg);
-}
-
-%with-duplicate-16-icon {
-  @extend %with-icon, %duplicate-16-svg-prop;
-  background-image: var(--duplicate-16-svg);
-}
-%with-duplicate-16-mask {
-  @extend %with-mask, %duplicate-16-svg-prop;
-  -webkit-mask-image: var(--duplicate-16-svg);
-  mask-image: var(--duplicate-16-svg);
-}
-
-%with-duplicate-24-icon {
-  @extend %with-icon, %duplicate-24-svg-prop;
-  background-image: var(--duplicate-24-svg);
-}
-%with-duplicate-24-mask {
-  @extend %with-mask, %duplicate-24-svg-prop;
-  -webkit-mask-image: var(--duplicate-24-svg);
-  mask-image: var(--duplicate-24-svg);
-}
-
-%with-edit-16-icon {
-  @extend %with-icon, %edit-16-svg-prop;
-  background-image: var(--edit-16-svg);
-}
-%with-edit-16-mask {
-  @extend %with-mask, %edit-16-svg-prop;
-  -webkit-mask-image: var(--edit-16-svg);
-  mask-image: var(--edit-16-svg);
-}
-
-%with-edit-24-icon {
-  @extend %with-icon, %edit-24-svg-prop;
-  background-image: var(--edit-24-svg);
-}
-%with-edit-24-mask {
-  @extend %with-mask, %edit-24-svg-prop;
-  -webkit-mask-image: var(--edit-24-svg);
-  mask-image: var(--edit-24-svg);
-}
-
-%with-edit-icon {
-  @extend %with-icon, %edit-16-svg-prop;
-  background-image: var(--edit-16-svg);
-}
-%with-edit-mask {
-  @extend %with-mask, %edit-16-svg-prop;
-  -webkit-mask-image: var(--edit-16-svg);
-  mask-image: var(--edit-16-svg);
-}
-
-%with-entry-point-16-icon {
-  @extend %with-icon, %entry-point-16-svg-prop;
-  background-image: var(--entry-point-16-svg);
-}
-%with-entry-point-16-mask {
-  @extend %with-mask, %entry-point-16-svg-prop;
-  -webkit-mask-image: var(--entry-point-16-svg);
-  mask-image: var(--entry-point-16-svg);
-}
-
-%with-entry-point-24-icon {
-  @extend %with-icon, %entry-point-24-svg-prop;
-  background-image: var(--entry-point-24-svg);
-}
-%with-entry-point-24-mask {
-  @extend %with-mask, %entry-point-24-svg-prop;
-  -webkit-mask-image: var(--entry-point-24-svg);
-  mask-image: var(--entry-point-24-svg);
-}
-
-%with-envelope-sealed-fill-icon {
-  @extend %with-icon, %mail-16-svg-prop;
-  background-image: var(--mail-16-svg);
-}
-%with-envelope-sealed-fill-mask {
-  @extend %with-mask, %mail-16-svg-prop;
-  -webkit-mask-image: var(--mail-16-svg);
-  mask-image: var(--mail-16-svg);
-}
-
-%with-envelope-sealed-outline-icon {
-  @extend %with-icon, %mail-16-svg-prop;
-  background-image: var(--mail-16-svg);
-}
-%with-envelope-sealed-outline-mask {
-  @extend %with-mask, %mail-16-svg-prop;
-  -webkit-mask-image: var(--mail-16-svg);
-  mask-image: var(--mail-16-svg);
-}
-
-%with-envelope-unsealed--outline-icon {
-  @extend %with-icon, %mail-open-16-svg-prop;
-  background-image: var(--mail-open-16-svg);
-}
-%with-envelope-unsealed--outline-mask {
-  @extend %with-mask, %mail-open-16-svg-prop;
-  -webkit-mask-image: var(--mail-open-16-svg);
-  mask-image: var(--mail-open-16-svg);
-}
-
-%with-envelope-unsealed-fill-icon {
-  @extend %with-icon, %mail-open-16-svg-prop;
-  background-image: var(--mail-open-16-svg);
-}
-%with-envelope-unsealed-fill-mask {
-  @extend %with-mask, %mail-open-16-svg-prop;
-  -webkit-mask-image: var(--mail-open-16-svg);
-  mask-image: var(--mail-open-16-svg);
-}
-
-%with-event-16-icon {
-  @extend %with-icon, %event-16-svg-prop;
-  background-image: var(--event-16-svg);
-}
-%with-event-16-mask {
-  @extend %with-mask, %event-16-svg-prop;
-  -webkit-mask-image: var(--event-16-svg);
-  mask-image: var(--event-16-svg);
-}
-
-%with-event-24-icon {
-  @extend %with-icon, %event-24-svg-prop;
-  background-image: var(--event-24-svg);
-}
-%with-event-24-mask {
-  @extend %with-mask, %event-24-svg-prop;
-  -webkit-mask-image: var(--event-24-svg);
-  mask-image: var(--event-24-svg);
-}
-
-%with-exit-point-16-icon {
-  @extend %with-icon, %exit-point-16-svg-prop;
-  background-image: var(--exit-point-16-svg);
-}
-%with-exit-point-16-mask {
-  @extend %with-mask, %exit-point-16-svg-prop;
-  -webkit-mask-image: var(--exit-point-16-svg);
-  mask-image: var(--exit-point-16-svg);
-}
-
-%with-exit-point-24-icon {
-  @extend %with-icon, %exit-point-24-svg-prop;
-  background-image: var(--exit-point-24-svg);
-}
-%with-exit-point-24-mask {
-  @extend %with-mask, %exit-point-24-svg-prop;
-  -webkit-mask-image: var(--exit-point-24-svg);
-  mask-image: var(--exit-point-24-svg);
-}
-
-%with-exit-icon {
-  @extend %with-icon, %external-link-16-svg-prop;
-  background-image: var(--external-link-16-svg);
-}
-%with-exit-mask {
-  @extend %with-mask, %external-link-16-svg-prop;
-  -webkit-mask-image: var(--external-link-16-svg);
-  mask-image: var(--external-link-16-svg);
-}
-
-%with-expand-less-icon {
-  @extend %with-icon, %minimize-16-svg-prop;
-  background-image: var(--minimize-16-svg);
-}
-%with-expand-less-mask {
-  @extend %with-mask, %minimize-16-svg-prop;
-  -webkit-mask-image: var(--minimize-16-svg);
-  mask-image: var(--minimize-16-svg);
-}
-
-%with-expand-more-icon {
-  @extend %with-icon, %maximize-16-svg-prop;
-  background-image: var(--maximize-16-svg);
-}
-%with-expand-more-mask {
-  @extend %with-mask, %maximize-16-svg-prop;
-  -webkit-mask-image: var(--maximize-16-svg);
-  mask-image: var(--maximize-16-svg);
-}
-
-%with-external-link-16-icon {
-  @extend %with-icon, %external-link-16-svg-prop;
-  background-image: var(--external-link-16-svg);
-}
-%with-external-link-16-mask {
-  @extend %with-mask, %external-link-16-svg-prop;
-  -webkit-mask-image: var(--external-link-16-svg);
-  mask-image: var(--external-link-16-svg);
-}
-
-%with-external-link-24-icon {
-  @extend %with-icon, %external-link-24-svg-prop;
-  background-image: var(--external-link-24-svg);
-}
-%with-external-link-24-mask {
-  @extend %with-mask, %external-link-24-svg-prop;
-  -webkit-mask-image: var(--external-link-24-svg);
-  mask-image: var(--external-link-24-svg);
-}
-
-%with-eye-16-icon {
-  @extend %with-icon, %eye-16-svg-prop;
-  background-image: var(--eye-16-svg);
-}
-%with-eye-16-mask {
-  @extend %with-mask, %eye-16-svg-prop;
-  -webkit-mask-image: var(--eye-16-svg);
-  mask-image: var(--eye-16-svg);
-}
-
-%with-eye-24-icon {
-  @extend %with-icon, %eye-24-svg-prop;
-  background-image: var(--eye-24-svg);
-}
-%with-eye-24-mask {
-  @extend %with-mask, %eye-24-svg-prop;
-  -webkit-mask-image: var(--eye-24-svg);
-  mask-image: var(--eye-24-svg);
-}
-
-%with-eye-off-16-icon {
-  @extend %with-icon, %eye-off-16-svg-prop;
-  background-image: var(--eye-off-16-svg);
-}
-%with-eye-off-16-mask {
-  @extend %with-mask, %eye-off-16-svg-prop;
-  -webkit-mask-image: var(--eye-off-16-svg);
-  mask-image: var(--eye-off-16-svg);
-}
-
-%with-eye-off-24-icon {
-  @extend %with-icon, %eye-off-24-svg-prop;
-  background-image: var(--eye-off-24-svg);
-}
-%with-eye-off-24-mask {
-  @extend %with-mask, %eye-off-24-svg-prop;
-  -webkit-mask-image: var(--eye-off-24-svg);
-  mask-image: var(--eye-off-24-svg);
-}
-
-%with-f5-16-icon {
-  @extend %with-icon, %f5-16-svg-prop;
-  background-image: var(--f5-16-svg);
-}
-%with-f5-16-mask {
-  @extend %with-mask, %f5-16-svg-prop;
-  -webkit-mask-image: var(--f5-16-svg);
-  mask-image: var(--f5-16-svg);
-}
-
-%with-f5-24-icon {
-  @extend %with-icon, %f5-24-svg-prop;
-  background-image: var(--f5-24-svg);
-}
-%with-f5-24-mask {
-  @extend %with-mask, %f5-24-svg-prop;
-  -webkit-mask-image: var(--f5-24-svg);
-  mask-image: var(--f5-24-svg);
-}
-
-%with-f5-color-16-icon {
-  @extend %with-icon, %f5-color-16-svg-prop;
-  background-image: var(--f5-color-16-svg);
-}
-%with-f5-color-16-mask {
-  @extend %with-mask, %f5-color-16-svg-prop;
-  -webkit-mask-image: var(--f5-color-16-svg);
-  mask-image: var(--f5-color-16-svg);
-}
-
-%with-f5-color-24-icon {
-  @extend %with-icon, %f5-color-24-svg-prop;
-  background-image: var(--f5-color-24-svg);
-}
-%with-f5-color-24-mask {
-  @extend %with-mask, %f5-color-24-svg-prop;
-  -webkit-mask-image: var(--f5-color-24-svg);
-  mask-image: var(--f5-color-24-svg);
-}
-
-%with-facebook-16-icon {
-  @extend %with-icon, %facebook-16-svg-prop;
-  background-image: var(--facebook-16-svg);
-}
-%with-facebook-16-mask {
-  @extend %with-mask, %facebook-16-svg-prop;
-  -webkit-mask-image: var(--facebook-16-svg);
-  mask-image: var(--facebook-16-svg);
-}
-
-%with-facebook-24-icon {
-  @extend %with-icon, %facebook-24-svg-prop;
-  background-image: var(--facebook-24-svg);
-}
-%with-facebook-24-mask {
-  @extend %with-mask, %facebook-24-svg-prop;
-  -webkit-mask-image: var(--facebook-24-svg);
-  mask-image: var(--facebook-24-svg);
-}
-
-%with-facebook-color-16-icon {
-  @extend %with-icon, %facebook-color-16-svg-prop;
-  background-image: var(--facebook-color-16-svg);
-}
-%with-facebook-color-16-mask {
-  @extend %with-mask, %facebook-color-16-svg-prop;
-  -webkit-mask-image: var(--facebook-color-16-svg);
-  mask-image: var(--facebook-color-16-svg);
-}
-
-%with-facebook-color-24-icon {
-  @extend %with-icon, %facebook-color-24-svg-prop;
-  background-image: var(--facebook-color-24-svg);
-}
-%with-facebook-color-24-mask {
-  @extend %with-mask, %facebook-color-24-svg-prop;
-  -webkit-mask-image: var(--facebook-color-24-svg);
-  mask-image: var(--facebook-color-24-svg);
-}
-
-%with-fast-forward-16-icon {
-  @extend %with-icon, %fast-forward-16-svg-prop;
-  background-image: var(--fast-forward-16-svg);
-}
-%with-fast-forward-16-mask {
-  @extend %with-mask, %fast-forward-16-svg-prop;
-  -webkit-mask-image: var(--fast-forward-16-svg);
-  mask-image: var(--fast-forward-16-svg);
-}
-
-%with-fast-forward-24-icon {
-  @extend %with-icon, %fast-forward-24-svg-prop;
-  background-image: var(--fast-forward-24-svg);
-}
-%with-fast-forward-24-mask {
-  @extend %with-mask, %fast-forward-24-svg-prop;
-  -webkit-mask-image: var(--fast-forward-24-svg);
-  mask-image: var(--fast-forward-24-svg);
-}
-
-%with-file-16-icon {
-  @extend %with-icon, %file-16-svg-prop;
-  background-image: var(--file-16-svg);
-}
-%with-file-16-mask {
-  @extend %with-mask, %file-16-svg-prop;
-  -webkit-mask-image: var(--file-16-svg);
-  mask-image: var(--file-16-svg);
-}
-
-%with-file-24-icon {
-  @extend %with-icon, %file-24-svg-prop;
-  background-image: var(--file-24-svg);
-}
-%with-file-24-mask {
-  @extend %with-mask, %file-24-svg-prop;
-  -webkit-mask-image: var(--file-24-svg);
-  mask-image: var(--file-24-svg);
-}
-
-%with-file-change-16-icon {
-  @extend %with-icon, %file-change-16-svg-prop;
-  background-image: var(--file-change-16-svg);
-}
-%with-file-change-16-mask {
-  @extend %with-mask, %file-change-16-svg-prop;
-  -webkit-mask-image: var(--file-change-16-svg);
-  mask-image: var(--file-change-16-svg);
-}
-
-%with-file-change-24-icon {
-  @extend %with-icon, %file-change-24-svg-prop;
-  background-image: var(--file-change-24-svg);
-}
-%with-file-change-24-mask {
-  @extend %with-mask, %file-change-24-svg-prop;
-  -webkit-mask-image: var(--file-change-24-svg);
-  mask-image: var(--file-change-24-svg);
-}
-
-%with-file-check-16-icon {
-  @extend %with-icon, %file-check-16-svg-prop;
-  background-image: var(--file-check-16-svg);
-}
-%with-file-check-16-mask {
-  @extend %with-mask, %file-check-16-svg-prop;
-  -webkit-mask-image: var(--file-check-16-svg);
-  mask-image: var(--file-check-16-svg);
-}
-
-%with-file-check-24-icon {
-  @extend %with-icon, %file-check-24-svg-prop;
-  background-image: var(--file-check-24-svg);
-}
-%with-file-check-24-mask {
-  @extend %with-mask, %file-check-24-svg-prop;
-  -webkit-mask-image: var(--file-check-24-svg);
-  mask-image: var(--file-check-24-svg);
-}
-
-%with-file-diff-16-icon {
-  @extend %with-icon, %file-diff-16-svg-prop;
-  background-image: var(--file-diff-16-svg);
-}
-%with-file-diff-16-mask {
-  @extend %with-mask, %file-diff-16-svg-prop;
-  -webkit-mask-image: var(--file-diff-16-svg);
-  mask-image: var(--file-diff-16-svg);
-}
-
-%with-file-diff-24-icon {
-  @extend %with-icon, %file-diff-24-svg-prop;
-  background-image: var(--file-diff-24-svg);
-}
-%with-file-diff-24-mask {
-  @extend %with-mask, %file-diff-24-svg-prop;
-  -webkit-mask-image: var(--file-diff-24-svg);
-  mask-image: var(--file-diff-24-svg);
-}
-
-%with-file-fill-icon {
-  @extend %with-icon, %file-16-svg-prop;
-  background-image: var(--file-16-svg);
-}
-%with-file-fill-mask {
-  @extend %with-mask, %file-16-svg-prop;
-  -webkit-mask-image: var(--file-16-svg);
-  mask-image: var(--file-16-svg);
-}
-
-%with-file-minus-16-icon {
-  @extend %with-icon, %file-minus-16-svg-prop;
-  background-image: var(--file-minus-16-svg);
-}
-%with-file-minus-16-mask {
-  @extend %with-mask, %file-minus-16-svg-prop;
-  -webkit-mask-image: var(--file-minus-16-svg);
-  mask-image: var(--file-minus-16-svg);
-}
-
-%with-file-minus-24-icon {
-  @extend %with-icon, %file-minus-24-svg-prop;
-  background-image: var(--file-minus-24-svg);
-}
-%with-file-minus-24-mask {
-  @extend %with-mask, %file-minus-24-svg-prop;
-  -webkit-mask-image: var(--file-minus-24-svg);
-  mask-image: var(--file-minus-24-svg);
-}
-
-%with-file-outline-icon {
-  @extend %with-icon, %file-16-svg-prop;
-  background-image: var(--file-16-svg);
-}
-%with-file-outline-mask {
-  @extend %with-mask, %file-16-svg-prop;
-  -webkit-mask-image: var(--file-16-svg);
-  mask-image: var(--file-16-svg);
-}
-
-%with-file-plus-16-icon {
-  @extend %with-icon, %file-plus-16-svg-prop;
-  background-image: var(--file-plus-16-svg);
-}
-%with-file-plus-16-mask {
-  @extend %with-mask, %file-plus-16-svg-prop;
-  -webkit-mask-image: var(--file-plus-16-svg);
-  mask-image: var(--file-plus-16-svg);
-}
-
-%with-file-plus-24-icon {
-  @extend %with-icon, %file-plus-24-svg-prop;
-  background-image: var(--file-plus-24-svg);
-}
-%with-file-plus-24-mask {
-  @extend %with-mask, %file-plus-24-svg-prop;
-  -webkit-mask-image: var(--file-plus-24-svg);
-  mask-image: var(--file-plus-24-svg);
-}
-
-%with-file-source-16-icon {
-  @extend %with-icon, %file-source-16-svg-prop;
-  background-image: var(--file-source-16-svg);
-}
-%with-file-source-16-mask {
-  @extend %with-mask, %file-source-16-svg-prop;
-  -webkit-mask-image: var(--file-source-16-svg);
-  mask-image: var(--file-source-16-svg);
-}
-
-%with-file-source-24-icon {
-  @extend %with-icon, %file-source-24-svg-prop;
-  background-image: var(--file-source-24-svg);
-}
-%with-file-source-24-mask {
-  @extend %with-mask, %file-source-24-svg-prop;
-  -webkit-mask-image: var(--file-source-24-svg);
-  mask-image: var(--file-source-24-svg);
-}
-
-%with-file-text-16-icon {
-  @extend %with-icon, %file-text-16-svg-prop;
-  background-image: var(--file-text-16-svg);
-}
-%with-file-text-16-mask {
-  @extend %with-mask, %file-text-16-svg-prop;
-  -webkit-mask-image: var(--file-text-16-svg);
-  mask-image: var(--file-text-16-svg);
-}
-
-%with-file-text-24-icon {
-  @extend %with-icon, %file-text-24-svg-prop;
-  background-image: var(--file-text-24-svg);
-}
-%with-file-text-24-mask {
-  @extend %with-mask, %file-text-24-svg-prop;
-  -webkit-mask-image: var(--file-text-24-svg);
-  mask-image: var(--file-text-24-svg);
-}
-
-%with-file-x-16-icon {
-  @extend %with-icon, %file-x-16-svg-prop;
-  background-image: var(--file-x-16-svg);
-}
-%with-file-x-16-mask {
-  @extend %with-mask, %file-x-16-svg-prop;
-  -webkit-mask-image: var(--file-x-16-svg);
-  mask-image: var(--file-x-16-svg);
-}
-
-%with-file-x-24-icon {
-  @extend %with-icon, %file-x-24-svg-prop;
-  background-image: var(--file-x-24-svg);
-}
-%with-file-x-24-mask {
-  @extend %with-mask, %file-x-24-svg-prop;
-  -webkit-mask-image: var(--file-x-24-svg);
-  mask-image: var(--file-x-24-svg);
-}
-
-%with-files-16-icon {
-  @extend %with-icon, %files-16-svg-prop;
-  background-image: var(--files-16-svg);
-}
-%with-files-16-mask {
-  @extend %with-mask, %files-16-svg-prop;
-  -webkit-mask-image: var(--files-16-svg);
-  mask-image: var(--files-16-svg);
-}
-
-%with-files-24-icon {
-  @extend %with-icon, %files-24-svg-prop;
-  background-image: var(--files-24-svg);
-}
-%with-files-24-mask {
-  @extend %with-mask, %files-24-svg-prop;
-  -webkit-mask-image: var(--files-24-svg);
-  mask-image: var(--files-24-svg);
-}
-
-%with-film-16-icon {
-  @extend %with-icon, %film-16-svg-prop;
-  background-image: var(--film-16-svg);
-}
-%with-film-16-mask {
-  @extend %with-mask, %film-16-svg-prop;
-  -webkit-mask-image: var(--film-16-svg);
-  mask-image: var(--film-16-svg);
-}
-
-%with-film-24-icon {
-  @extend %with-icon, %film-24-svg-prop;
-  background-image: var(--film-24-svg);
-}
-%with-film-24-mask {
-  @extend %with-mask, %film-24-svg-prop;
-  -webkit-mask-image: var(--film-24-svg);
-  mask-image: var(--film-24-svg);
-}
-
-%with-filter-16-icon {
-  @extend %with-icon, %filter-16-svg-prop;
-  background-image: var(--filter-16-svg);
-}
-%with-filter-16-mask {
-  @extend %with-mask, %filter-16-svg-prop;
-  -webkit-mask-image: var(--filter-16-svg);
-  mask-image: var(--filter-16-svg);
-}
-
-%with-filter-24-icon {
-  @extend %with-icon, %filter-24-svg-prop;
-  background-image: var(--filter-24-svg);
-}
-%with-filter-24-mask {
-  @extend %with-mask, %filter-24-svg-prop;
-  -webkit-mask-image: var(--filter-24-svg);
-  mask-image: var(--filter-24-svg);
-}
-
-%with-filter-circle-16-icon {
-  @extend %with-icon, %filter-circle-16-svg-prop;
-  background-image: var(--filter-circle-16-svg);
-}
-%with-filter-circle-16-mask {
-  @extend %with-mask, %filter-circle-16-svg-prop;
-  -webkit-mask-image: var(--filter-circle-16-svg);
-  mask-image: var(--filter-circle-16-svg);
-}
-
-%with-filter-circle-24-icon {
-  @extend %with-icon, %filter-circle-24-svg-prop;
-  background-image: var(--filter-circle-24-svg);
-}
-%with-filter-circle-24-mask {
-  @extend %with-mask, %filter-circle-24-svg-prop;
-  -webkit-mask-image: var(--filter-circle-24-svg);
-  mask-image: var(--filter-circle-24-svg);
-}
-
-%with-filter-fill-16-icon {
-  @extend %with-icon, %filter-fill-16-svg-prop;
-  background-image: var(--filter-fill-16-svg);
-}
-%with-filter-fill-16-mask {
-  @extend %with-mask, %filter-fill-16-svg-prop;
-  -webkit-mask-image: var(--filter-fill-16-svg);
-  mask-image: var(--filter-fill-16-svg);
-}
-
-%with-filter-fill-24-icon {
-  @extend %with-icon, %filter-fill-24-svg-prop;
-  background-image: var(--filter-fill-24-svg);
-}
-%with-filter-fill-24-mask {
-  @extend %with-mask, %filter-fill-24-svg-prop;
-  -webkit-mask-image: var(--filter-fill-24-svg);
-  mask-image: var(--filter-fill-24-svg);
-}
-
-%with-filter-icon {
-  @extend %with-icon, %filter-16-svg-prop;
-  background-image: var(--filter-16-svg);
-}
-%with-filter-mask {
-  @extend %with-mask, %filter-16-svg-prop;
-  -webkit-mask-image: var(--filter-16-svg);
-  mask-image: var(--filter-16-svg);
-}
-
-%with-fingerprint-16-icon {
-  @extend %with-icon, %fingerprint-16-svg-prop;
-  background-image: var(--fingerprint-16-svg);
-}
-%with-fingerprint-16-mask {
-  @extend %with-mask, %fingerprint-16-svg-prop;
-  -webkit-mask-image: var(--fingerprint-16-svg);
-  mask-image: var(--fingerprint-16-svg);
-}
-
-%with-fingerprint-24-icon {
-  @extend %with-icon, %fingerprint-24-svg-prop;
-  background-image: var(--fingerprint-24-svg);
-}
-%with-fingerprint-24-mask {
-  @extend %with-mask, %fingerprint-24-svg-prop;
-  -webkit-mask-image: var(--fingerprint-24-svg);
-  mask-image: var(--fingerprint-24-svg);
-}
-
-%with-flag-16-icon {
-  @extend %with-icon, %flag-16-svg-prop;
-  background-image: var(--flag-16-svg);
-}
-%with-flag-16-mask {
-  @extend %with-mask, %flag-16-svg-prop;
-  -webkit-mask-image: var(--flag-16-svg);
-  mask-image: var(--flag-16-svg);
-}
-
-%with-flag-24-icon {
-  @extend %with-icon, %flag-24-svg-prop;
-  background-image: var(--flag-24-svg);
-}
-%with-flag-24-mask {
-  @extend %with-mask, %flag-24-svg-prop;
-  -webkit-mask-image: var(--flag-24-svg);
-  mask-image: var(--flag-24-svg);
-}
-
-%with-flag-icon {
-  @extend %with-icon, %flag-16-svg-prop;
-  background-image: var(--flag-16-svg);
-}
-%with-flag-mask {
-  @extend %with-mask, %flag-16-svg-prop;
-  -webkit-mask-image: var(--flag-16-svg);
-  mask-image: var(--flag-16-svg);
-}
-
-%with-folder-16-icon {
-  @extend %with-icon, %folder-16-svg-prop;
-  background-image: var(--folder-16-svg);
-}
-%with-folder-16-mask {
-  @extend %with-mask, %folder-16-svg-prop;
-  -webkit-mask-image: var(--folder-16-svg);
-  mask-image: var(--folder-16-svg);
-}
-
-%with-folder-24-icon {
-  @extend %with-icon, %folder-24-svg-prop;
-  background-image: var(--folder-24-svg);
-}
-%with-folder-24-mask {
-  @extend %with-mask, %folder-24-svg-prop;
-  -webkit-mask-image: var(--folder-24-svg);
-  mask-image: var(--folder-24-svg);
-}
-
-%with-folder-fill-16-icon {
-  @extend %with-icon, %folder-fill-16-svg-prop;
-  background-image: var(--folder-fill-16-svg);
-}
-%with-folder-fill-16-mask {
-  @extend %with-mask, %folder-fill-16-svg-prop;
-  -webkit-mask-image: var(--folder-fill-16-svg);
-  mask-image: var(--folder-fill-16-svg);
-}
-
-%with-folder-fill-24-icon {
-  @extend %with-icon, %folder-fill-24-svg-prop;
-  background-image: var(--folder-fill-24-svg);
-}
-%with-folder-fill-24-mask {
-  @extend %with-mask, %folder-fill-24-svg-prop;
-  -webkit-mask-image: var(--folder-fill-24-svg);
-  mask-image: var(--folder-fill-24-svg);
-}
-
-%with-folder-fill-icon {
-  @extend %with-icon, %folder-fill-16-svg-prop;
-  background-image: var(--folder-fill-16-svg);
-}
-%with-folder-fill-mask {
-  @extend %with-mask, %folder-fill-16-svg-prop;
-  -webkit-mask-image: var(--folder-fill-16-svg);
-  mask-image: var(--folder-fill-16-svg);
-}
-
-%with-folder-minus-16-icon {
-  @extend %with-icon, %folder-minus-16-svg-prop;
-  background-image: var(--folder-minus-16-svg);
-}
-%with-folder-minus-16-mask {
-  @extend %with-mask, %folder-minus-16-svg-prop;
-  -webkit-mask-image: var(--folder-minus-16-svg);
-  mask-image: var(--folder-minus-16-svg);
-}
-
-%with-folder-minus-24-icon {
-  @extend %with-icon, %folder-minus-24-svg-prop;
-  background-image: var(--folder-minus-24-svg);
-}
-%with-folder-minus-24-mask {
-  @extend %with-mask, %folder-minus-24-svg-prop;
-  -webkit-mask-image: var(--folder-minus-24-svg);
-  mask-image: var(--folder-minus-24-svg);
-}
-
-%with-folder-minus-fill-16-icon {
-  @extend %with-icon, %folder-minus-fill-16-svg-prop;
-  background-image: var(--folder-minus-fill-16-svg);
-}
-%with-folder-minus-fill-16-mask {
-  @extend %with-mask, %folder-minus-fill-16-svg-prop;
-  -webkit-mask-image: var(--folder-minus-fill-16-svg);
-  mask-image: var(--folder-minus-fill-16-svg);
-}
-
-%with-folder-minus-fill-24-icon {
-  @extend %with-icon, %folder-minus-fill-24-svg-prop;
-  background-image: var(--folder-minus-fill-24-svg);
-}
-%with-folder-minus-fill-24-mask {
-  @extend %with-mask, %folder-minus-fill-24-svg-prop;
-  -webkit-mask-image: var(--folder-minus-fill-24-svg);
-  mask-image: var(--folder-minus-fill-24-svg);
-}
-
-%with-folder-outline-icon {
-  @extend %with-icon, %folder-16-svg-prop;
-  background-image: var(--folder-16-svg);
-}
-%with-folder-outline-mask {
-  @extend %with-mask, %folder-16-svg-prop;
-  -webkit-mask-image: var(--folder-16-svg);
-  mask-image: var(--folder-16-svg);
-}
-
-%with-folder-plus-16-icon {
-  @extend %with-icon, %folder-plus-16-svg-prop;
-  background-image: var(--folder-plus-16-svg);
-}
-%with-folder-plus-16-mask {
-  @extend %with-mask, %folder-plus-16-svg-prop;
-  -webkit-mask-image: var(--folder-plus-16-svg);
-  mask-image: var(--folder-plus-16-svg);
-}
-
-%with-folder-plus-24-icon {
-  @extend %with-icon, %folder-plus-24-svg-prop;
-  background-image: var(--folder-plus-24-svg);
-}
-%with-folder-plus-24-mask {
-  @extend %with-mask, %folder-plus-24-svg-prop;
-  -webkit-mask-image: var(--folder-plus-24-svg);
-  mask-image: var(--folder-plus-24-svg);
-}
-
-%with-folder-plus-fill-16-icon {
-  @extend %with-icon, %folder-plus-fill-16-svg-prop;
-  background-image: var(--folder-plus-fill-16-svg);
-}
-%with-folder-plus-fill-16-mask {
-  @extend %with-mask, %folder-plus-fill-16-svg-prop;
-  -webkit-mask-image: var(--folder-plus-fill-16-svg);
-  mask-image: var(--folder-plus-fill-16-svg);
-}
-
-%with-folder-plus-fill-24-icon {
-  @extend %with-icon, %folder-plus-fill-24-svg-prop;
-  background-image: var(--folder-plus-fill-24-svg);
-}
-%with-folder-plus-fill-24-mask {
-  @extend %with-mask, %folder-plus-fill-24-svg-prop;
-  -webkit-mask-image: var(--folder-plus-fill-24-svg);
-  mask-image: var(--folder-plus-fill-24-svg);
-}
-
-%with-folder-star-16-icon {
-  @extend %with-icon, %folder-star-16-svg-prop;
-  background-image: var(--folder-star-16-svg);
-}
-%with-folder-star-16-mask {
-  @extend %with-mask, %folder-star-16-svg-prop;
-  -webkit-mask-image: var(--folder-star-16-svg);
-  mask-image: var(--folder-star-16-svg);
-}
-
-%with-folder-star-24-icon {
-  @extend %with-icon, %folder-star-24-svg-prop;
-  background-image: var(--folder-star-24-svg);
-}
-%with-folder-star-24-mask {
-  @extend %with-mask, %folder-star-24-svg-prop;
-  -webkit-mask-image: var(--folder-star-24-svg);
-  mask-image: var(--folder-star-24-svg);
-}
-
-%with-folder-users-16-icon {
-  @extend %with-icon, %folder-users-16-svg-prop;
-  background-image: var(--folder-users-16-svg);
-}
-%with-folder-users-16-mask {
-  @extend %with-mask, %folder-users-16-svg-prop;
-  -webkit-mask-image: var(--folder-users-16-svg);
-  mask-image: var(--folder-users-16-svg);
-}
-
-%with-folder-users-24-icon {
-  @extend %with-icon, %folder-users-24-svg-prop;
-  background-image: var(--folder-users-24-svg);
-}
-%with-folder-users-24-mask {
-  @extend %with-mask, %folder-users-24-svg-prop;
-  -webkit-mask-image: var(--folder-users-24-svg);
-  mask-image: var(--folder-users-24-svg);
-}
-
-%with-frown-16-icon {
-  @extend %with-icon, %frown-16-svg-prop;
-  background-image: var(--frown-16-svg);
-}
-%with-frown-16-mask {
-  @extend %with-mask, %frown-16-svg-prop;
-  -webkit-mask-image: var(--frown-16-svg);
-  mask-image: var(--frown-16-svg);
-}
-
-%with-frown-24-icon {
-  @extend %with-icon, %frown-24-svg-prop;
-  background-image: var(--frown-24-svg);
-}
-%with-frown-24-mask {
-  @extend %with-mask, %frown-24-svg-prop;
-  -webkit-mask-image: var(--frown-24-svg);
-  mask-image: var(--frown-24-svg);
-}
-
-%with-gateway-16-icon {
-  @extend %with-icon, %gateway-16-svg-prop;
-  background-image: var(--gateway-16-svg);
-}
-%with-gateway-16-mask {
-  @extend %with-mask, %gateway-16-svg-prop;
-  -webkit-mask-image: var(--gateway-16-svg);
-  mask-image: var(--gateway-16-svg);
-}
-
-%with-gateway-24-icon {
-  @extend %with-icon, %gateway-24-svg-prop;
-  background-image: var(--gateway-24-svg);
-}
-%with-gateway-24-mask {
-  @extend %with-mask, %gateway-24-svg-prop;
-  -webkit-mask-image: var(--gateway-24-svg);
-  mask-image: var(--gateway-24-svg);
-}
-
-%with-gateway-icon {
-  @extend %with-icon, %gateway-16-svg-prop;
-  background-image: var(--gateway-16-svg);
-}
-%with-gateway-mask {
-  @extend %with-mask, %gateway-16-svg-prop;
-  -webkit-mask-image: var(--gateway-16-svg);
-  mask-image: var(--gateway-16-svg);
-}
-
-%with-gcp-16-icon {
-  @extend %with-icon, %gcp-16-svg-prop;
-  background-image: var(--gcp-16-svg);
-}
-%with-gcp-16-mask {
-  @extend %with-mask, %gcp-16-svg-prop;
-  -webkit-mask-image: var(--gcp-16-svg);
-  mask-image: var(--gcp-16-svg);
-}
-
-%with-gcp-24-icon {
-  @extend %with-icon, %gcp-24-svg-prop;
-  background-image: var(--gcp-24-svg);
-}
-%with-gcp-24-mask {
-  @extend %with-mask, %gcp-24-svg-prop;
-  -webkit-mask-image: var(--gcp-24-svg);
-  mask-image: var(--gcp-24-svg);
-}
-
-%with-gcp-color-16-icon {
-  @extend %with-icon, %gcp-color-16-svg-prop;
-  background-image: var(--gcp-color-16-svg);
-}
-%with-gcp-color-16-mask {
-  @extend %with-mask, %gcp-color-16-svg-prop;
-  -webkit-mask-image: var(--gcp-color-16-svg);
-  mask-image: var(--gcp-color-16-svg);
-}
-
-%with-gcp-color-24-icon {
-  @extend %with-icon, %gcp-color-24-svg-prop;
-  background-image: var(--gcp-color-24-svg);
-}
-%with-gcp-color-24-mask {
-  @extend %with-mask, %gcp-color-24-svg-prop;
-  -webkit-mask-image: var(--gcp-color-24-svg);
-  mask-image: var(--gcp-color-24-svg);
-}
-
-%with-gift-16-icon {
-  @extend %with-icon, %gift-16-svg-prop;
-  background-image: var(--gift-16-svg);
-}
-%with-gift-16-mask {
-  @extend %with-mask, %gift-16-svg-prop;
-  -webkit-mask-image: var(--gift-16-svg);
-  mask-image: var(--gift-16-svg);
-}
-
-%with-gift-24-icon {
-  @extend %with-icon, %gift-24-svg-prop;
-  background-image: var(--gift-24-svg);
-}
-%with-gift-24-mask {
-  @extend %with-mask, %gift-24-svg-prop;
-  -webkit-mask-image: var(--gift-24-svg);
-  mask-image: var(--gift-24-svg);
-}
-
-%with-gift-fill-icon {
-  @extend %with-icon, %gift-16-svg-prop;
-  background-image: var(--gift-16-svg);
-}
-%with-gift-fill-mask {
-  @extend %with-mask, %gift-16-svg-prop;
-  -webkit-mask-image: var(--gift-16-svg);
-  mask-image: var(--gift-16-svg);
-}
-
-%with-gift-outline-icon {
-  @extend %with-icon, %gift-16-svg-prop;
-  background-image: var(--gift-16-svg);
-}
-%with-gift-outline-mask {
-  @extend %with-mask, %gift-16-svg-prop;
-  -webkit-mask-image: var(--gift-16-svg);
-  mask-image: var(--gift-16-svg);
-}
-
-%with-git-branch-16-icon {
-  @extend %with-icon, %git-branch-16-svg-prop;
-  background-image: var(--git-branch-16-svg);
-}
-%with-git-branch-16-mask {
-  @extend %with-mask, %git-branch-16-svg-prop;
-  -webkit-mask-image: var(--git-branch-16-svg);
-  mask-image: var(--git-branch-16-svg);
-}
-
-%with-git-branch-24-icon {
-  @extend %with-icon, %git-branch-24-svg-prop;
-  background-image: var(--git-branch-24-svg);
-}
-%with-git-branch-24-mask {
-  @extend %with-mask, %git-branch-24-svg-prop;
-  -webkit-mask-image: var(--git-branch-24-svg);
-  mask-image: var(--git-branch-24-svg);
-}
-
-%with-git-branch-icon {
-  @extend %with-icon, %git-branch-16-svg-prop;
-  background-image: var(--git-branch-16-svg);
-}
-%with-git-branch-mask {
-  @extend %with-mask, %git-branch-16-svg-prop;
-  -webkit-mask-image: var(--git-branch-16-svg);
-  mask-image: var(--git-branch-16-svg);
-}
-
-%with-git-commit-16-icon {
-  @extend %with-icon, %git-commit-16-svg-prop;
-  background-image: var(--git-commit-16-svg);
-}
-%with-git-commit-16-mask {
-  @extend %with-mask, %git-commit-16-svg-prop;
-  -webkit-mask-image: var(--git-commit-16-svg);
-  mask-image: var(--git-commit-16-svg);
-}
-
-%with-git-commit-24-icon {
-  @extend %with-icon, %git-commit-24-svg-prop;
-  background-image: var(--git-commit-24-svg);
-}
-%with-git-commit-24-mask {
-  @extend %with-mask, %git-commit-24-svg-prop;
-  -webkit-mask-image: var(--git-commit-24-svg);
-  mask-image: var(--git-commit-24-svg);
-}
-
-%with-git-commit-icon {
-  @extend %with-icon, %git-commit-16-svg-prop;
-  background-image: var(--git-commit-16-svg);
-}
-%with-git-commit-mask {
-  @extend %with-mask, %git-commit-16-svg-prop;
-  -webkit-mask-image: var(--git-commit-16-svg);
-  mask-image: var(--git-commit-16-svg);
-}
-
-%with-git-merge-16-icon {
-  @extend %with-icon, %git-merge-16-svg-prop;
-  background-image: var(--git-merge-16-svg);
-}
-%with-git-merge-16-mask {
-  @extend %with-mask, %git-merge-16-svg-prop;
-  -webkit-mask-image: var(--git-merge-16-svg);
-  mask-image: var(--git-merge-16-svg);
-}
-
-%with-git-merge-24-icon {
-  @extend %with-icon, %git-merge-24-svg-prop;
-  background-image: var(--git-merge-24-svg);
-}
-%with-git-merge-24-mask {
-  @extend %with-mask, %git-merge-24-svg-prop;
-  -webkit-mask-image: var(--git-merge-24-svg);
-  mask-image: var(--git-merge-24-svg);
-}
-
-%with-git-pull-request-16-icon {
-  @extend %with-icon, %git-pull-request-16-svg-prop;
-  background-image: var(--git-pull-request-16-svg);
-}
-%with-git-pull-request-16-mask {
-  @extend %with-mask, %git-pull-request-16-svg-prop;
-  -webkit-mask-image: var(--git-pull-request-16-svg);
-  mask-image: var(--git-pull-request-16-svg);
-}
-
-%with-git-pull-request-24-icon {
-  @extend %with-icon, %git-pull-request-24-svg-prop;
-  background-image: var(--git-pull-request-24-svg);
-}
-%with-git-pull-request-24-mask {
-  @extend %with-mask, %git-pull-request-24-svg-prop;
-  -webkit-mask-image: var(--git-pull-request-24-svg);
-  mask-image: var(--git-pull-request-24-svg);
-}
-
-%with-git-pull-request-icon {
-  @extend %with-icon, %git-pull-request-16-svg-prop;
-  background-image: var(--git-pull-request-16-svg);
-}
-%with-git-pull-request-mask {
-  @extend %with-mask, %git-pull-request-16-svg-prop;
-  -webkit-mask-image: var(--git-pull-request-16-svg);
-  mask-image: var(--git-pull-request-16-svg);
-}
-
-%with-git-repo-16-icon {
-  @extend %with-icon, %git-repo-16-svg-prop;
-  background-image: var(--git-repo-16-svg);
-}
-%with-git-repo-16-mask {
-  @extend %with-mask, %git-repo-16-svg-prop;
-  -webkit-mask-image: var(--git-repo-16-svg);
-  mask-image: var(--git-repo-16-svg);
-}
-
-%with-git-repo-24-icon {
-  @extend %with-icon, %git-repo-24-svg-prop;
-  background-image: var(--git-repo-24-svg);
-}
-%with-git-repo-24-mask {
-  @extend %with-mask, %git-repo-24-svg-prop;
-  -webkit-mask-image: var(--git-repo-24-svg);
-  mask-image: var(--git-repo-24-svg);
-}
-
-%with-git-repository-icon {
-  @extend %with-icon, %git-repo-16-svg-prop;
-  background-image: var(--git-repo-16-svg);
-}
-%with-git-repository-mask {
-  @extend %with-mask, %git-repo-16-svg-prop;
-  -webkit-mask-image: var(--git-repo-16-svg);
-  mask-image: var(--git-repo-16-svg);
-}
-
-%with-github-16-icon {
-  @extend %with-icon, %github-16-svg-prop;
-  background-image: var(--github-16-svg);
-}
-%with-github-16-mask {
-  @extend %with-mask, %github-16-svg-prop;
-  -webkit-mask-image: var(--github-16-svg);
-  mask-image: var(--github-16-svg);
-}
-
-%with-github-24-icon {
-  @extend %with-icon, %github-24-svg-prop;
-  background-image: var(--github-24-svg);
-}
-%with-github-24-mask {
-  @extend %with-mask, %github-24-svg-prop;
-  -webkit-mask-image: var(--github-24-svg);
-  mask-image: var(--github-24-svg);
-}
-
-%with-github-color-16-icon {
-  @extend %with-icon, %github-color-16-svg-prop;
-  background-image: var(--github-color-16-svg);
-}
-%with-github-color-16-mask {
-  @extend %with-mask, %github-color-16-svg-prop;
-  -webkit-mask-image: var(--github-color-16-svg);
-  mask-image: var(--github-color-16-svg);
-}
-
-%with-github-color-24-icon {
-  @extend %with-icon, %github-color-24-svg-prop;
-  background-image: var(--github-color-24-svg);
-}
-%with-github-color-24-mask {
-  @extend %with-mask, %github-color-24-svg-prop;
-  -webkit-mask-image: var(--github-color-24-svg);
-  mask-image: var(--github-color-24-svg);
-}
-
-%with-gitlab-16-icon {
-  @extend %with-icon, %gitlab-16-svg-prop;
-  background-image: var(--gitlab-16-svg);
-}
-%with-gitlab-16-mask {
-  @extend %with-mask, %gitlab-16-svg-prop;
-  -webkit-mask-image: var(--gitlab-16-svg);
-  mask-image: var(--gitlab-16-svg);
-}
-
-%with-gitlab-24-icon {
-  @extend %with-icon, %gitlab-24-svg-prop;
-  background-image: var(--gitlab-24-svg);
-}
-%with-gitlab-24-mask {
-  @extend %with-mask, %gitlab-24-svg-prop;
-  -webkit-mask-image: var(--gitlab-24-svg);
-  mask-image: var(--gitlab-24-svg);
-}
-
-%with-gitlab-color-16-icon {
-  @extend %with-icon, %gitlab-color-16-svg-prop;
-  background-image: var(--gitlab-color-16-svg);
-}
-%with-gitlab-color-16-mask {
-  @extend %with-mask, %gitlab-color-16-svg-prop;
-  -webkit-mask-image: var(--gitlab-color-16-svg);
-  mask-image: var(--gitlab-color-16-svg);
-}
-
-%with-gitlab-color-24-icon {
-  @extend %with-icon, %gitlab-color-24-svg-prop;
-  background-image: var(--gitlab-color-24-svg);
-}
-%with-gitlab-color-24-mask {
-  @extend %with-mask, %gitlab-color-24-svg-prop;
-  -webkit-mask-image: var(--gitlab-color-24-svg);
-  mask-image: var(--gitlab-color-24-svg);
-}
-
-%with-globe-16-icon {
-  @extend %with-icon, %globe-16-svg-prop;
-  background-image: var(--globe-16-svg);
-}
-%with-globe-16-mask {
-  @extend %with-mask, %globe-16-svg-prop;
-  -webkit-mask-image: var(--globe-16-svg);
-  mask-image: var(--globe-16-svg);
-}
-
-%with-globe-24-icon {
-  @extend %with-icon, %globe-24-svg-prop;
-  background-image: var(--globe-24-svg);
-}
-%with-globe-24-mask {
-  @extend %with-mask, %globe-24-svg-prop;
-  -webkit-mask-image: var(--globe-24-svg);
-  mask-image: var(--globe-24-svg);
-}
-
-%with-globe-private-16-icon {
-  @extend %with-icon, %globe-private-16-svg-prop;
-  background-image: var(--globe-private-16-svg);
-}
-%with-globe-private-16-mask {
-  @extend %with-mask, %globe-private-16-svg-prop;
-  -webkit-mask-image: var(--globe-private-16-svg);
-  mask-image: var(--globe-private-16-svg);
-}
-
-%with-globe-private-24-icon {
-  @extend %with-icon, %globe-private-24-svg-prop;
-  background-image: var(--globe-private-24-svg);
-}
-%with-globe-private-24-mask {
-  @extend %with-mask, %globe-private-24-svg-prop;
-  -webkit-mask-image: var(--globe-private-24-svg);
-  mask-image: var(--globe-private-24-svg);
-}
-
-%with-google-16-icon {
-  @extend %with-icon, %google-16-svg-prop;
-  background-image: var(--google-16-svg);
-}
-%with-google-16-mask {
-  @extend %with-mask, %google-16-svg-prop;
-  -webkit-mask-image: var(--google-16-svg);
-  mask-image: var(--google-16-svg);
-}
-
-%with-google-24-icon {
-  @extend %with-icon, %google-24-svg-prop;
-  background-image: var(--google-24-svg);
-}
-%with-google-24-mask {
-  @extend %with-mask, %google-24-svg-prop;
-  -webkit-mask-image: var(--google-24-svg);
-  mask-image: var(--google-24-svg);
-}
-
-%with-google-color-16-icon {
-  @extend %with-icon, %google-color-16-svg-prop;
-  background-image: var(--google-color-16-svg);
-}
-%with-google-color-16-mask {
-  @extend %with-mask, %google-color-16-svg-prop;
-  -webkit-mask-image: var(--google-color-16-svg);
-  mask-image: var(--google-color-16-svg);
-}
-
-%with-google-color-24-icon {
-  @extend %with-icon, %google-color-24-svg-prop;
-  background-image: var(--google-color-24-svg);
-}
-%with-google-color-24-mask {
-  @extend %with-mask, %google-color-24-svg-prop;
-  -webkit-mask-image: var(--google-color-24-svg);
-  mask-image: var(--google-color-24-svg);
-}
-
-%with-grid-16-icon {
-  @extend %with-icon, %grid-16-svg-prop;
-  background-image: var(--grid-16-svg);
-}
-%with-grid-16-mask {
-  @extend %with-mask, %grid-16-svg-prop;
-  -webkit-mask-image: var(--grid-16-svg);
-  mask-image: var(--grid-16-svg);
-}
-
-%with-grid-24-icon {
-  @extend %with-icon, %grid-24-svg-prop;
-  background-image: var(--grid-24-svg);
-}
-%with-grid-24-mask {
-  @extend %with-mask, %grid-24-svg-prop;
-  -webkit-mask-image: var(--grid-24-svg);
-  mask-image: var(--grid-24-svg);
-}
-
-%with-grid-alt-16-icon {
-  @extend %with-icon, %grid-alt-16-svg-prop;
-  background-image: var(--grid-alt-16-svg);
-}
-%with-grid-alt-16-mask {
-  @extend %with-mask, %grid-alt-16-svg-prop;
-  -webkit-mask-image: var(--grid-alt-16-svg);
-  mask-image: var(--grid-alt-16-svg);
-}
-
-%with-grid-alt-24-icon {
-  @extend %with-icon, %grid-alt-24-svg-prop;
-  background-image: var(--grid-alt-24-svg);
-}
-%with-grid-alt-24-mask {
-  @extend %with-mask, %grid-alt-24-svg-prop;
-  -webkit-mask-image: var(--grid-alt-24-svg);
-  mask-image: var(--grid-alt-24-svg);
-}
-
-%with-guide-16-icon {
-  @extend %with-icon, %guide-16-svg-prop;
-  background-image: var(--guide-16-svg);
-}
-%with-guide-16-mask {
-  @extend %with-mask, %guide-16-svg-prop;
-  -webkit-mask-image: var(--guide-16-svg);
-  mask-image: var(--guide-16-svg);
-}
-
-%with-guide-24-icon {
-  @extend %with-icon, %guide-24-svg-prop;
-  background-image: var(--guide-24-svg);
-}
-%with-guide-24-mask {
-  @extend %with-mask, %guide-24-svg-prop;
-  -webkit-mask-image: var(--guide-24-svg);
-  mask-image: var(--guide-24-svg);
-}
-
-%with-guide-link-16-icon {
-  @extend %with-icon, %guide-link-16-svg-prop;
-  background-image: var(--guide-link-16-svg);
-}
-%with-guide-link-16-mask {
-  @extend %with-mask, %guide-link-16-svg-prop;
-  -webkit-mask-image: var(--guide-link-16-svg);
-  mask-image: var(--guide-link-16-svg);
-}
-
-%with-guide-link-24-icon {
-  @extend %with-icon, %guide-link-24-svg-prop;
-  background-image: var(--guide-link-24-svg);
-}
-%with-guide-link-24-mask {
-  @extend %with-mask, %guide-link-24-svg-prop;
-  -webkit-mask-image: var(--guide-link-24-svg);
-  mask-image: var(--guide-link-24-svg);
-}
-
-%with-guide-icon {
-  @extend %with-icon, %guide-16-svg-prop;
-  background-image: var(--guide-16-svg);
-}
-%with-guide-mask {
-  @extend %with-mask, %guide-16-svg-prop;
-  -webkit-mask-image: var(--guide-16-svg);
-  mask-image: var(--guide-16-svg);
-}
-
-%with-hammer-16-icon {
-  @extend %with-icon, %hammer-16-svg-prop;
-  background-image: var(--hammer-16-svg);
-}
-%with-hammer-16-mask {
-  @extend %with-mask, %hammer-16-svg-prop;
-  -webkit-mask-image: var(--hammer-16-svg);
-  mask-image: var(--hammer-16-svg);
-}
-
-%with-hammer-24-icon {
-  @extend %with-icon, %hammer-24-svg-prop;
-  background-image: var(--hammer-24-svg);
-}
-%with-hammer-24-mask {
-  @extend %with-mask, %hammer-24-svg-prop;
-  -webkit-mask-image: var(--hammer-24-svg);
-  mask-image: var(--hammer-24-svg);
-}
-
-%with-handshake-16-icon {
-  @extend %with-icon, %handshake-16-svg-prop;
-  background-image: var(--handshake-16-svg);
-}
-%with-handshake-16-mask {
-  @extend %with-mask, %handshake-16-svg-prop;
-  -webkit-mask-image: var(--handshake-16-svg);
-  mask-image: var(--handshake-16-svg);
-}
-
-%with-handshake-24-icon {
-  @extend %with-icon, %handshake-24-svg-prop;
-  background-image: var(--handshake-24-svg);
-}
-%with-handshake-24-mask {
-  @extend %with-mask, %handshake-24-svg-prop;
-  -webkit-mask-image: var(--handshake-24-svg);
-  mask-image: var(--handshake-24-svg);
-}
-
-%with-hard-drive-16-icon {
-  @extend %with-icon, %hard-drive-16-svg-prop;
-  background-image: var(--hard-drive-16-svg);
-}
-%with-hard-drive-16-mask {
-  @extend %with-mask, %hard-drive-16-svg-prop;
-  -webkit-mask-image: var(--hard-drive-16-svg);
-  mask-image: var(--hard-drive-16-svg);
-}
-
-%with-hard-drive-24-icon {
-  @extend %with-icon, %hard-drive-24-svg-prop;
-  background-image: var(--hard-drive-24-svg);
-}
-%with-hard-drive-24-mask {
-  @extend %with-mask, %hard-drive-24-svg-prop;
-  -webkit-mask-image: var(--hard-drive-24-svg);
-  mask-image: var(--hard-drive-24-svg);
-}
-
-%with-hash-16-icon {
-  @extend %with-icon, %hash-16-svg-prop;
-  background-image: var(--hash-16-svg);
-}
-%with-hash-16-mask {
-  @extend %with-mask, %hash-16-svg-prop;
-  -webkit-mask-image: var(--hash-16-svg);
-  mask-image: var(--hash-16-svg);
-}
-
-%with-hash-24-icon {
-  @extend %with-icon, %hash-24-svg-prop;
-  background-image: var(--hash-24-svg);
-}
-%with-hash-24-mask {
-  @extend %with-mask, %hash-24-svg-prop;
-  -webkit-mask-image: var(--hash-24-svg);
-  mask-image: var(--hash-24-svg);
-}
-
-%with-hashicorp-16-icon {
-  @extend %with-icon, %hashicorp-16-svg-prop;
-  background-image: var(--hashicorp-16-svg);
-}
-%with-hashicorp-16-mask {
-  @extend %with-mask, %hashicorp-16-svg-prop;
-  -webkit-mask-image: var(--hashicorp-16-svg);
-  mask-image: var(--hashicorp-16-svg);
-}
-
-%with-hashicorp-24-icon {
-  @extend %with-icon, %hashicorp-24-svg-prop;
-  background-image: var(--hashicorp-24-svg);
-}
-%with-hashicorp-24-mask {
-  @extend %with-mask, %hashicorp-24-svg-prop;
-  -webkit-mask-image: var(--hashicorp-24-svg);
-  mask-image: var(--hashicorp-24-svg);
-}
-
-%with-hashicorp-color-16-icon {
-  @extend %with-icon, %hashicorp-color-16-svg-prop;
-  background-image: var(--hashicorp-color-16-svg);
-}
-%with-hashicorp-color-16-mask {
-  @extend %with-mask, %hashicorp-color-16-svg-prop;
-  -webkit-mask-image: var(--hashicorp-color-16-svg);
-  mask-image: var(--hashicorp-color-16-svg);
-}
-
-%with-hashicorp-color-24-icon {
-  @extend %with-icon, %hashicorp-color-24-svg-prop;
-  background-image: var(--hashicorp-color-24-svg);
-}
-%with-hashicorp-color-24-mask {
-  @extend %with-mask, %hashicorp-color-24-svg-prop;
-  -webkit-mask-image: var(--hashicorp-color-24-svg);
-  mask-image: var(--hashicorp-color-24-svg);
-}
-
-%with-hcp-16-icon {
-  @extend %with-icon, %hcp-16-svg-prop;
-  background-image: var(--hcp-16-svg);
-}
-%with-hcp-16-mask {
-  @extend %with-mask, %hcp-16-svg-prop;
-  -webkit-mask-image: var(--hcp-16-svg);
-  mask-image: var(--hcp-16-svg);
-}
-
-%with-hcp-24-icon {
-  @extend %with-icon, %hcp-24-svg-prop;
-  background-image: var(--hcp-24-svg);
-}
-%with-hcp-24-mask {
-  @extend %with-mask, %hcp-24-svg-prop;
-  -webkit-mask-image: var(--hcp-24-svg);
-  mask-image: var(--hcp-24-svg);
-}
-
-%with-hcp-color-16-icon {
-  @extend %with-icon, %hcp-color-16-svg-prop;
-  background-image: var(--hcp-color-16-svg);
-}
-%with-hcp-color-16-mask {
-  @extend %with-mask, %hcp-color-16-svg-prop;
-  -webkit-mask-image: var(--hcp-color-16-svg);
-  mask-image: var(--hcp-color-16-svg);
-}
-
-%with-hcp-color-24-icon {
-  @extend %with-icon, %hcp-color-24-svg-prop;
-  background-image: var(--hcp-color-24-svg);
-}
-%with-hcp-color-24-mask {
-  @extend %with-mask, %hcp-color-24-svg-prop;
-  -webkit-mask-image: var(--hcp-color-24-svg);
-  mask-image: var(--hcp-color-24-svg);
-}
-
-%with-headphones-16-icon {
-  @extend %with-icon, %headphones-16-svg-prop;
-  background-image: var(--headphones-16-svg);
-}
-%with-headphones-16-mask {
-  @extend %with-mask, %headphones-16-svg-prop;
-  -webkit-mask-image: var(--headphones-16-svg);
-  mask-image: var(--headphones-16-svg);
-}
-
-%with-headphones-24-icon {
-  @extend %with-icon, %headphones-24-svg-prop;
-  background-image: var(--headphones-24-svg);
-}
-%with-headphones-24-mask {
-  @extend %with-mask, %headphones-24-svg-prop;
-  -webkit-mask-image: var(--headphones-24-svg);
-  mask-image: var(--headphones-24-svg);
-}
-
-%with-health-icon {
-  @extend %with-icon, %activity-16-svg-prop;
-  background-image: var(--activity-16-svg);
-}
-%with-health-mask {
-  @extend %with-mask, %activity-16-svg-prop;
-  -webkit-mask-image: var(--activity-16-svg);
-  mask-image: var(--activity-16-svg);
-}
-
-%with-heart-16-icon {
-  @extend %with-icon, %heart-16-svg-prop;
-  background-image: var(--heart-16-svg);
-}
-%with-heart-16-mask {
-  @extend %with-mask, %heart-16-svg-prop;
-  -webkit-mask-image: var(--heart-16-svg);
-  mask-image: var(--heart-16-svg);
-}
-
-%with-heart-24-icon {
-  @extend %with-icon, %heart-24-svg-prop;
-  background-image: var(--heart-24-svg);
-}
-%with-heart-24-mask {
-  @extend %with-mask, %heart-24-svg-prop;
-  -webkit-mask-image: var(--heart-24-svg);
-  mask-image: var(--heart-24-svg);
-}
-
-%with-heart-fill-16-icon {
-  @extend %with-icon, %heart-fill-16-svg-prop;
-  background-image: var(--heart-fill-16-svg);
-}
-%with-heart-fill-16-mask {
-  @extend %with-mask, %heart-fill-16-svg-prop;
-  -webkit-mask-image: var(--heart-fill-16-svg);
-  mask-image: var(--heart-fill-16-svg);
-}
-
-%with-heart-fill-24-icon {
-  @extend %with-icon, %heart-fill-24-svg-prop;
-  background-image: var(--heart-fill-24-svg);
-}
-%with-heart-fill-24-mask {
-  @extend %with-mask, %heart-fill-24-svg-prop;
-  -webkit-mask-image: var(--heart-fill-24-svg);
-  mask-image: var(--heart-fill-24-svg);
-}
-
-%with-heart-off-16-icon {
-  @extend %with-icon, %heart-off-16-svg-prop;
-  background-image: var(--heart-off-16-svg);
-}
-%with-heart-off-16-mask {
-  @extend %with-mask, %heart-off-16-svg-prop;
-  -webkit-mask-image: var(--heart-off-16-svg);
-  mask-image: var(--heart-off-16-svg);
-}
-
-%with-heart-off-24-icon {
-  @extend %with-icon, %heart-off-24-svg-prop;
-  background-image: var(--heart-off-24-svg);
-}
-%with-heart-off-24-mask {
-  @extend %with-mask, %heart-off-24-svg-prop;
-  -webkit-mask-image: var(--heart-off-24-svg);
-  mask-image: var(--heart-off-24-svg);
-}
-
-%with-help-16-icon {
-  @extend %with-icon, %help-16-svg-prop;
-  background-image: var(--help-16-svg);
-}
-%with-help-16-mask {
-  @extend %with-mask, %help-16-svg-prop;
-  -webkit-mask-image: var(--help-16-svg);
-  mask-image: var(--help-16-svg);
-}
-
-%with-help-24-icon {
-  @extend %with-icon, %help-24-svg-prop;
-  background-image: var(--help-24-svg);
-}
-%with-help-24-mask {
-  @extend %with-mask, %help-24-svg-prop;
-  -webkit-mask-image: var(--help-24-svg);
-  mask-image: var(--help-24-svg);
-}
-
-%with-help-circle-fill-icon {
-  @extend %with-icon, %help-16-svg-prop;
-  background-image: var(--help-16-svg);
-}
-%with-help-circle-fill-mask {
-  @extend %with-mask, %help-16-svg-prop;
-  -webkit-mask-image: var(--help-16-svg);
-  mask-image: var(--help-16-svg);
-}
-
-%with-help-circle-outline-icon {
-  @extend %with-icon, %help-16-svg-prop;
-  background-image: var(--help-16-svg);
-}
-%with-help-circle-outline-mask {
-  @extend %with-mask, %help-16-svg-prop;
-  -webkit-mask-image: var(--help-16-svg);
-  mask-image: var(--help-16-svg);
-}
-
-%with-hexagon-16-icon {
-  @extend %with-icon, %hexagon-16-svg-prop;
-  background-image: var(--hexagon-16-svg);
-}
-%with-hexagon-16-mask {
-  @extend %with-mask, %hexagon-16-svg-prop;
-  -webkit-mask-image: var(--hexagon-16-svg);
-  mask-image: var(--hexagon-16-svg);
-}
-
-%with-hexagon-24-icon {
-  @extend %with-icon, %hexagon-24-svg-prop;
-  background-image: var(--hexagon-24-svg);
-}
-%with-hexagon-24-mask {
-  @extend %with-mask, %hexagon-24-svg-prop;
-  -webkit-mask-image: var(--hexagon-24-svg);
-  mask-image: var(--hexagon-24-svg);
-}
-
-%with-hexagon-fill-16-icon {
-  @extend %with-icon, %hexagon-fill-16-svg-prop;
-  background-image: var(--hexagon-fill-16-svg);
-}
-%with-hexagon-fill-16-mask {
-  @extend %with-mask, %hexagon-fill-16-svg-prop;
-  -webkit-mask-image: var(--hexagon-fill-16-svg);
-  mask-image: var(--hexagon-fill-16-svg);
-}
-
-%with-hexagon-fill-24-icon {
-  @extend %with-icon, %hexagon-fill-24-svg-prop;
-  background-image: var(--hexagon-fill-24-svg);
-}
-%with-hexagon-fill-24-mask {
-  @extend %with-mask, %hexagon-fill-24-svg-prop;
-  -webkit-mask-image: var(--hexagon-fill-24-svg);
-  mask-image: var(--hexagon-fill-24-svg);
-}
-
-%with-history-16-icon {
-  @extend %with-icon, %history-16-svg-prop;
-  background-image: var(--history-16-svg);
-}
-%with-history-16-mask {
-  @extend %with-mask, %history-16-svg-prop;
-  -webkit-mask-image: var(--history-16-svg);
-  mask-image: var(--history-16-svg);
-}
-
-%with-history-24-icon {
-  @extend %with-icon, %history-24-svg-prop;
-  background-image: var(--history-24-svg);
-}
-%with-history-24-mask {
-  @extend %with-mask, %history-24-svg-prop;
-  -webkit-mask-image: var(--history-24-svg);
-  mask-image: var(--history-24-svg);
-}
-
-%with-history-icon {
-  @extend %with-icon, %history-16-svg-prop;
-  background-image: var(--history-16-svg);
-}
-%with-history-mask {
-  @extend %with-mask, %history-16-svg-prop;
-  -webkit-mask-image: var(--history-16-svg);
-  mask-image: var(--history-16-svg);
-}
-
-%with-home-16-icon {
-  @extend %with-icon, %home-16-svg-prop;
-  background-image: var(--home-16-svg);
-}
-%with-home-16-mask {
-  @extend %with-mask, %home-16-svg-prop;
-  -webkit-mask-image: var(--home-16-svg);
-  mask-image: var(--home-16-svg);
-}
-
-%with-home-24-icon {
-  @extend %with-icon, %home-24-svg-prop;
-  background-image: var(--home-24-svg);
-}
-%with-home-24-mask {
-  @extend %with-mask, %home-24-svg-prop;
-  -webkit-mask-image: var(--home-24-svg);
-  mask-image: var(--home-24-svg);
-}
-
-%with-hourglass-16-icon {
-  @extend %with-icon, %hourglass-16-svg-prop;
-  background-image: var(--hourglass-16-svg);
-}
-%with-hourglass-16-mask {
-  @extend %with-mask, %hourglass-16-svg-prop;
-  -webkit-mask-image: var(--hourglass-16-svg);
-  mask-image: var(--hourglass-16-svg);
-}
-
-%with-hourglass-24-icon {
-  @extend %with-icon, %hourglass-24-svg-prop;
-  background-image: var(--hourglass-24-svg);
-}
-%with-hourglass-24-mask {
-  @extend %with-mask, %hourglass-24-svg-prop;
-  -webkit-mask-image: var(--hourglass-24-svg);
-  mask-image: var(--hourglass-24-svg);
-}
-
-%with-identity-service-16-icon {
-  @extend %with-icon, %identity-service-16-svg-prop;
-  background-image: var(--identity-service-16-svg);
-}
-%with-identity-service-16-mask {
-  @extend %with-mask, %identity-service-16-svg-prop;
-  -webkit-mask-image: var(--identity-service-16-svg);
-  mask-image: var(--identity-service-16-svg);
-}
-
-%with-identity-service-24-icon {
-  @extend %with-icon, %identity-service-24-svg-prop;
-  background-image: var(--identity-service-24-svg);
-}
-%with-identity-service-24-mask {
-  @extend %with-mask, %identity-service-24-svg-prop;
-  -webkit-mask-image: var(--identity-service-24-svg);
-  mask-image: var(--identity-service-24-svg);
-}
-
-%with-identity-user-16-icon {
-  @extend %with-icon, %identity-user-16-svg-prop;
-  background-image: var(--identity-user-16-svg);
-}
-%with-identity-user-16-mask {
-  @extend %with-mask, %identity-user-16-svg-prop;
-  -webkit-mask-image: var(--identity-user-16-svg);
-  mask-image: var(--identity-user-16-svg);
-}
-
-%with-identity-user-24-icon {
-  @extend %with-icon, %identity-user-24-svg-prop;
-  background-image: var(--identity-user-24-svg);
-}
-%with-identity-user-24-mask {
-  @extend %with-mask, %identity-user-24-svg-prop;
-  -webkit-mask-image: var(--identity-user-24-svg);
-  mask-image: var(--identity-user-24-svg);
-}
-
-%with-image-16-icon {
-  @extend %with-icon, %image-16-svg-prop;
-  background-image: var(--image-16-svg);
-}
-%with-image-16-mask {
-  @extend %with-mask, %image-16-svg-prop;
-  -webkit-mask-image: var(--image-16-svg);
-  mask-image: var(--image-16-svg);
-}
-
-%with-image-24-icon {
-  @extend %with-icon, %image-24-svg-prop;
-  background-image: var(--image-24-svg);
-}
-%with-image-24-mask {
-  @extend %with-mask, %image-24-svg-prop;
-  -webkit-mask-image: var(--image-24-svg);
-  mask-image: var(--image-24-svg);
-}
-
-%with-inbox-16-icon {
-  @extend %with-icon, %inbox-16-svg-prop;
-  background-image: var(--inbox-16-svg);
-}
-%with-inbox-16-mask {
-  @extend %with-mask, %inbox-16-svg-prop;
-  -webkit-mask-image: var(--inbox-16-svg);
-  mask-image: var(--inbox-16-svg);
-}
-
-%with-inbox-24-icon {
-  @extend %with-icon, %inbox-24-svg-prop;
-  background-image: var(--inbox-24-svg);
-}
-%with-inbox-24-mask {
-  @extend %with-mask, %inbox-24-svg-prop;
-  -webkit-mask-image: var(--inbox-24-svg);
-  mask-image: var(--inbox-24-svg);
-}
-
-%with-info-16-icon {
-  @extend %with-icon, %info-16-svg-prop;
-  background-image: var(--info-16-svg);
-}
-%with-info-16-mask {
-  @extend %with-mask, %info-16-svg-prop;
-  -webkit-mask-image: var(--info-16-svg);
-  mask-image: var(--info-16-svg);
-}
-
-%with-info-24-icon {
-  @extend %with-icon, %info-24-svg-prop;
-  background-image: var(--info-24-svg);
-}
-%with-info-24-mask {
-  @extend %with-mask, %info-24-svg-prop;
-  -webkit-mask-image: var(--info-24-svg);
-  mask-image: var(--info-24-svg);
-}
-
-%with-info-circle-fill-icon {
-  @extend %with-icon, %info-16-svg-prop;
-  background-image: var(--info-16-svg);
-}
-%with-info-circle-fill-mask {
-  @extend %with-mask, %info-16-svg-prop;
-  -webkit-mask-image: var(--info-16-svg);
-  mask-image: var(--info-16-svg);
-}
-
-%with-info-circle-outline-icon {
-  @extend %with-icon, %info-16-svg-prop;
-  background-image: var(--info-16-svg);
-}
-%with-info-circle-outline-mask {
-  @extend %with-mask, %info-16-svg-prop;
-  -webkit-mask-image: var(--info-16-svg);
-  mask-image: var(--info-16-svg);
-}
-
-%with-jump-link-16-icon {
-  @extend %with-icon, %jump-link-16-svg-prop;
-  background-image: var(--jump-link-16-svg);
-}
-%with-jump-link-16-mask {
-  @extend %with-mask, %jump-link-16-svg-prop;
-  -webkit-mask-image: var(--jump-link-16-svg);
-  mask-image: var(--jump-link-16-svg);
-}
-
-%with-jump-link-24-icon {
-  @extend %with-icon, %jump-link-24-svg-prop;
-  background-image: var(--jump-link-24-svg);
-}
-%with-jump-link-24-mask {
-  @extend %with-mask, %jump-link-24-svg-prop;
-  -webkit-mask-image: var(--jump-link-24-svg);
-  mask-image: var(--jump-link-24-svg);
-}
-
-%with-key-16-icon {
-  @extend %with-icon, %key-16-svg-prop;
-  background-image: var(--key-16-svg);
-}
-%with-key-16-mask {
-  @extend %with-mask, %key-16-svg-prop;
-  -webkit-mask-image: var(--key-16-svg);
-  mask-image: var(--key-16-svg);
-}
-
-%with-key-24-icon {
-  @extend %with-icon, %key-24-svg-prop;
-  background-image: var(--key-24-svg);
-}
-%with-key-24-mask {
-  @extend %with-mask, %key-24-svg-prop;
-  -webkit-mask-image: var(--key-24-svg);
-  mask-image: var(--key-24-svg);
-}
-
-%with-key-values-16-icon {
-  @extend %with-icon, %key-values-16-svg-prop;
-  background-image: var(--key-values-16-svg);
-}
-%with-key-values-16-mask {
-  @extend %with-mask, %key-values-16-svg-prop;
-  -webkit-mask-image: var(--key-values-16-svg);
-  mask-image: var(--key-values-16-svg);
-}
-
-%with-key-values-24-icon {
-  @extend %with-icon, %key-values-24-svg-prop;
-  background-image: var(--key-values-24-svg);
-}
-%with-key-values-24-mask {
-  @extend %with-mask, %key-values-24-svg-prop;
-  -webkit-mask-image: var(--key-values-24-svg);
-  mask-image: var(--key-values-24-svg);
-}
-
-%with-key-icon {
-  @extend %with-icon, %key-16-svg-prop;
-  background-image: var(--key-16-svg);
-}
-%with-key-mask {
-  @extend %with-mask, %key-16-svg-prop;
-  -webkit-mask-image: var(--key-16-svg);
-  mask-image: var(--key-16-svg);
-}
-
-%with-keychain-16-icon {
-  @extend %with-icon, %keychain-16-svg-prop;
-  background-image: var(--keychain-16-svg);
-}
-%with-keychain-16-mask {
-  @extend %with-mask, %keychain-16-svg-prop;
-  -webkit-mask-image: var(--keychain-16-svg);
-  mask-image: var(--keychain-16-svg);
-}
-
-%with-keychain-24-icon {
-  @extend %with-icon, %keychain-24-svg-prop;
-  background-image: var(--keychain-24-svg);
-}
-%with-keychain-24-mask {
-  @extend %with-mask, %keychain-24-svg-prop;
-  -webkit-mask-image: var(--keychain-24-svg);
-  mask-image: var(--keychain-24-svg);
-}
-
-%with-kubernetes-16-icon {
-  @extend %with-icon, %kubernetes-16-svg-prop;
-  background-image: var(--kubernetes-16-svg);
-}
-%with-kubernetes-16-mask {
-  @extend %with-mask, %kubernetes-16-svg-prop;
-  -webkit-mask-image: var(--kubernetes-16-svg);
-  mask-image: var(--kubernetes-16-svg);
-}
-
-%with-kubernetes-24-icon {
-  @extend %with-icon, %kubernetes-24-svg-prop;
-  background-image: var(--kubernetes-24-svg);
-}
-%with-kubernetes-24-mask {
-  @extend %with-mask, %kubernetes-24-svg-prop;
-  -webkit-mask-image: var(--kubernetes-24-svg);
-  mask-image: var(--kubernetes-24-svg);
-}
-
-%with-kubernetes-color-16-icon {
-  @extend %with-icon, %kubernetes-color-16-svg-prop;
-  background-image: var(--kubernetes-color-16-svg);
-}
-%with-kubernetes-color-16-mask {
-  @extend %with-mask, %kubernetes-color-16-svg-prop;
-  -webkit-mask-image: var(--kubernetes-color-16-svg);
-  mask-image: var(--kubernetes-color-16-svg);
-}
-
-%with-kubernetes-color-24-icon {
-  @extend %with-icon, %kubernetes-color-24-svg-prop;
-  background-image: var(--kubernetes-color-24-svg);
-}
-%with-kubernetes-color-24-mask {
-  @extend %with-mask, %kubernetes-color-24-svg-prop;
-  -webkit-mask-image: var(--kubernetes-color-24-svg);
-  mask-image: var(--kubernetes-color-24-svg);
-}
-
-%with-labyrinth-16-icon {
-  @extend %with-icon, %labyrinth-16-svg-prop;
-  background-image: var(--labyrinth-16-svg);
-}
-%with-labyrinth-16-mask {
-  @extend %with-mask, %labyrinth-16-svg-prop;
-  -webkit-mask-image: var(--labyrinth-16-svg);
-  mask-image: var(--labyrinth-16-svg);
-}
-
-%with-labyrinth-24-icon {
-  @extend %with-icon, %labyrinth-24-svg-prop;
-  background-image: var(--labyrinth-24-svg);
-}
-%with-labyrinth-24-mask {
-  @extend %with-mask, %labyrinth-24-svg-prop;
-  -webkit-mask-image: var(--labyrinth-24-svg);
-  mask-image: var(--labyrinth-24-svg);
-}
-
-%with-layers-16-icon {
-  @extend %with-icon, %layers-16-svg-prop;
-  background-image: var(--layers-16-svg);
-}
-%with-layers-16-mask {
-  @extend %with-mask, %layers-16-svg-prop;
-  -webkit-mask-image: var(--layers-16-svg);
-  mask-image: var(--layers-16-svg);
-}
-
-%with-layers-24-icon {
-  @extend %with-icon, %layers-24-svg-prop;
-  background-image: var(--layers-24-svg);
-}
-%with-layers-24-mask {
-  @extend %with-mask, %layers-24-svg-prop;
-  -webkit-mask-image: var(--layers-24-svg);
-  mask-image: var(--layers-24-svg);
-}
-
-%with-layers-icon {
-  @extend %with-icon, %layers-16-svg-prop;
-  background-image: var(--layers-16-svg);
-}
-%with-layers-mask {
-  @extend %with-mask, %layers-16-svg-prop;
-  -webkit-mask-image: var(--layers-16-svg);
-  mask-image: var(--layers-16-svg);
-}
-
-%with-layout-16-icon {
-  @extend %with-icon, %layout-16-svg-prop;
-  background-image: var(--layout-16-svg);
-}
-%with-layout-16-mask {
-  @extend %with-mask, %layout-16-svg-prop;
-  -webkit-mask-image: var(--layout-16-svg);
-  mask-image: var(--layout-16-svg);
-}
-
-%with-layout-24-icon {
-  @extend %with-icon, %layout-24-svg-prop;
-  background-image: var(--layout-24-svg);
-}
-%with-layout-24-mask {
-  @extend %with-mask, %layout-24-svg-prop;
-  -webkit-mask-image: var(--layout-24-svg);
-  mask-image: var(--layout-24-svg);
-}
-
-%with-learn-16-icon {
-  @extend %with-icon, %learn-16-svg-prop;
-  background-image: var(--learn-16-svg);
-}
-%with-learn-16-mask {
-  @extend %with-mask, %learn-16-svg-prop;
-  -webkit-mask-image: var(--learn-16-svg);
-  mask-image: var(--learn-16-svg);
-}
-
-%with-learn-24-icon {
-  @extend %with-icon, %learn-24-svg-prop;
-  background-image: var(--learn-24-svg);
-}
-%with-learn-24-mask {
-  @extend %with-mask, %learn-24-svg-prop;
-  -webkit-mask-image: var(--learn-24-svg);
-  mask-image: var(--learn-24-svg);
-}
-
-%with-learn-link-16-icon {
-  @extend %with-icon, %learn-link-16-svg-prop;
-  background-image: var(--learn-link-16-svg);
-}
-%with-learn-link-16-mask {
-  @extend %with-mask, %learn-link-16-svg-prop;
-  -webkit-mask-image: var(--learn-link-16-svg);
-  mask-image: var(--learn-link-16-svg);
-}
-
-%with-learn-link-24-icon {
-  @extend %with-icon, %learn-link-24-svg-prop;
-  background-image: var(--learn-link-24-svg);
-}
-%with-learn-link-24-mask {
-  @extend %with-mask, %learn-link-24-svg-prop;
-  -webkit-mask-image: var(--learn-link-24-svg);
-  mask-image: var(--learn-link-24-svg);
-}
-
-%with-learn-icon {
-  @extend %with-icon, %learn-16-svg-prop;
-  background-image: var(--learn-16-svg);
-}
-%with-learn-mask {
-  @extend %with-mask, %learn-16-svg-prop;
-  -webkit-mask-image: var(--learn-16-svg);
-  mask-image: var(--learn-16-svg);
-}
-
-%with-line-chart-16-icon {
-  @extend %with-icon, %line-chart-16-svg-prop;
-  background-image: var(--line-chart-16-svg);
-}
-%with-line-chart-16-mask {
-  @extend %with-mask, %line-chart-16-svg-prop;
-  -webkit-mask-image: var(--line-chart-16-svg);
-  mask-image: var(--line-chart-16-svg);
-}
-
-%with-line-chart-24-icon {
-  @extend %with-icon, %line-chart-24-svg-prop;
-  background-image: var(--line-chart-24-svg);
-}
-%with-line-chart-24-mask {
-  @extend %with-mask, %line-chart-24-svg-prop;
-  -webkit-mask-image: var(--line-chart-24-svg);
-  mask-image: var(--line-chart-24-svg);
-}
-
-%with-line-chart-up-16-icon {
-  @extend %with-icon, %line-chart-up-16-svg-prop;
-  background-image: var(--line-chart-up-16-svg);
-}
-%with-line-chart-up-16-mask {
-  @extend %with-mask, %line-chart-up-16-svg-prop;
-  -webkit-mask-image: var(--line-chart-up-16-svg);
-  mask-image: var(--line-chart-up-16-svg);
-}
-
-%with-line-chart-up-24-icon {
-  @extend %with-icon, %line-chart-up-24-svg-prop;
-  background-image: var(--line-chart-up-24-svg);
-}
-%with-line-chart-up-24-mask {
-  @extend %with-mask, %line-chart-up-24-svg-prop;
-  -webkit-mask-image: var(--line-chart-up-24-svg);
-  mask-image: var(--line-chart-up-24-svg);
-}
-
-%with-link-16-icon {
-  @extend %with-icon, %link-16-svg-prop;
-  background-image: var(--link-16-svg);
-}
-%with-link-16-mask {
-  @extend %with-mask, %link-16-svg-prop;
-  -webkit-mask-image: var(--link-16-svg);
-  mask-image: var(--link-16-svg);
-}
-
-%with-link-24-icon {
-  @extend %with-icon, %link-24-svg-prop;
-  background-image: var(--link-24-svg);
-}
-%with-link-24-mask {
-  @extend %with-mask, %link-24-svg-prop;
-  -webkit-mask-image: var(--link-24-svg);
-  mask-image: var(--link-24-svg);
-}
-
-%with-link-icon {
-  @extend %with-icon, %link-16-svg-prop;
-  background-image: var(--link-16-svg);
-}
-%with-link-mask {
-  @extend %with-mask, %link-16-svg-prop;
-  -webkit-mask-image: var(--link-16-svg);
-  mask-image: var(--link-16-svg);
-}
-
-%with-linkedin-16-icon {
-  @extend %with-icon, %linkedin-16-svg-prop;
-  background-image: var(--linkedin-16-svg);
-}
-%with-linkedin-16-mask {
-  @extend %with-mask, %linkedin-16-svg-prop;
-  -webkit-mask-image: var(--linkedin-16-svg);
-  mask-image: var(--linkedin-16-svg);
-}
-
-%with-linkedin-24-icon {
-  @extend %with-icon, %linkedin-24-svg-prop;
-  background-image: var(--linkedin-24-svg);
-}
-%with-linkedin-24-mask {
-  @extend %with-mask, %linkedin-24-svg-prop;
-  -webkit-mask-image: var(--linkedin-24-svg);
-  mask-image: var(--linkedin-24-svg);
-}
-
-%with-linkedin-color-16-icon {
-  @extend %with-icon, %linkedin-color-16-svg-prop;
-  background-image: var(--linkedin-color-16-svg);
-}
-%with-linkedin-color-16-mask {
-  @extend %with-mask, %linkedin-color-16-svg-prop;
-  -webkit-mask-image: var(--linkedin-color-16-svg);
-  mask-image: var(--linkedin-color-16-svg);
-}
-
-%with-linkedin-color-24-icon {
-  @extend %with-icon, %linkedin-color-24-svg-prop;
-  background-image: var(--linkedin-color-24-svg);
-}
-%with-linkedin-color-24-mask {
-  @extend %with-mask, %linkedin-color-24-svg-prop;
-  -webkit-mask-image: var(--linkedin-color-24-svg);
-  mask-image: var(--linkedin-color-24-svg);
-}
-
-%with-list-16-icon {
-  @extend %with-icon, %list-16-svg-prop;
-  background-image: var(--list-16-svg);
-}
-%with-list-16-mask {
-  @extend %with-mask, %list-16-svg-prop;
-  -webkit-mask-image: var(--list-16-svg);
-  mask-image: var(--list-16-svg);
-}
-
-%with-list-24-icon {
-  @extend %with-icon, %list-24-svg-prop;
-  background-image: var(--list-24-svg);
-}
-%with-list-24-mask {
-  @extend %with-mask, %list-24-svg-prop;
-  -webkit-mask-image: var(--list-24-svg);
-  mask-image: var(--list-24-svg);
-}
-
-%with-load-balancer-16-icon {
-  @extend %with-icon, %load-balancer-16-svg-prop;
-  background-image: var(--load-balancer-16-svg);
-}
-%with-load-balancer-16-mask {
-  @extend %with-mask, %load-balancer-16-svg-prop;
-  -webkit-mask-image: var(--load-balancer-16-svg);
-  mask-image: var(--load-balancer-16-svg);
-}
-
-%with-load-balancer-24-icon {
-  @extend %with-icon, %load-balancer-24-svg-prop;
-  background-image: var(--load-balancer-24-svg);
-}
-%with-load-balancer-24-mask {
-  @extend %with-mask, %load-balancer-24-svg-prop;
-  -webkit-mask-image: var(--load-balancer-24-svg);
-  mask-image: var(--load-balancer-24-svg);
-}
-
-%with-loading-icon {
-  @extend %with-icon, %loading-svg-prop;
-  background-image: var(--loading-svg);
-}
-%with-loading-mask {
-  @extend %with-mask, %loading-svg-prop;
-  -webkit-mask-image: var(--loading-svg);
-  mask-image: var(--loading-svg);
-}
-
-%with-lock-16-icon {
-  @extend %with-icon, %lock-16-svg-prop;
-  background-image: var(--lock-16-svg);
-}
-%with-lock-16-mask {
-  @extend %with-mask, %lock-16-svg-prop;
-  -webkit-mask-image: var(--lock-16-svg);
-  mask-image: var(--lock-16-svg);
-}
-
-%with-lock-24-icon {
-  @extend %with-icon, %lock-24-svg-prop;
-  background-image: var(--lock-24-svg);
-}
-%with-lock-24-mask {
-  @extend %with-mask, %lock-24-svg-prop;
-  -webkit-mask-image: var(--lock-24-svg);
-  mask-image: var(--lock-24-svg);
-}
-
-%with-lock-closed-fill-icon {
-  @extend %with-icon, %lock-fill-16-svg-prop;
-  background-image: var(--lock-fill-16-svg);
-}
-%with-lock-closed-fill-mask {
-  @extend %with-mask, %lock-fill-16-svg-prop;
-  -webkit-mask-image: var(--lock-fill-16-svg);
-  mask-image: var(--lock-fill-16-svg);
-}
-
-%with-lock-closed-outline-icon {
-  @extend %with-icon, %lock-16-svg-prop;
-  background-image: var(--lock-16-svg);
-}
-%with-lock-closed-outline-mask {
-  @extend %with-mask, %lock-16-svg-prop;
-  -webkit-mask-image: var(--lock-16-svg);
-  mask-image: var(--lock-16-svg);
-}
-
-%with-lock-closed-icon {
-  @extend %with-icon, %lock-fill-16-svg-prop;
-  background-image: var(--lock-fill-16-svg);
-}
-%with-lock-closed-mask {
-  @extend %with-mask, %lock-fill-16-svg-prop;
-  -webkit-mask-image: var(--lock-fill-16-svg);
-  mask-image: var(--lock-fill-16-svg);
-}
-
-%with-lock-disabled-icon {
-  @extend %with-icon, %lock-off-16-svg-prop;
-  background-image: var(--lock-off-16-svg);
-}
-%with-lock-disabled-mask {
-  @extend %with-mask, %lock-off-16-svg-prop;
-  -webkit-mask-image: var(--lock-off-16-svg);
-  mask-image: var(--lock-off-16-svg);
-}
-
-%with-lock-fill-16-icon {
-  @extend %with-icon, %lock-fill-16-svg-prop;
-  background-image: var(--lock-fill-16-svg);
-}
-%with-lock-fill-16-mask {
-  @extend %with-mask, %lock-fill-16-svg-prop;
-  -webkit-mask-image: var(--lock-fill-16-svg);
-  mask-image: var(--lock-fill-16-svg);
-}
-
-%with-lock-fill-24-icon {
-  @extend %with-icon, %lock-fill-24-svg-prop;
-  background-image: var(--lock-fill-24-svg);
-}
-%with-lock-fill-24-mask {
-  @extend %with-mask, %lock-fill-24-svg-prop;
-  -webkit-mask-image: var(--lock-fill-24-svg);
-  mask-image: var(--lock-fill-24-svg);
-}
-
-%with-lock-off-16-icon {
-  @extend %with-icon, %lock-off-16-svg-prop;
-  background-image: var(--lock-off-16-svg);
-}
-%with-lock-off-16-mask {
-  @extend %with-mask, %lock-off-16-svg-prop;
-  -webkit-mask-image: var(--lock-off-16-svg);
-  mask-image: var(--lock-off-16-svg);
-}
-
-%with-lock-off-24-icon {
-  @extend %with-icon, %lock-off-24-svg-prop;
-  background-image: var(--lock-off-24-svg);
-}
-%with-lock-off-24-mask {
-  @extend %with-mask, %lock-off-24-svg-prop;
-  -webkit-mask-image: var(--lock-off-24-svg);
-  mask-image: var(--lock-off-24-svg);
-}
-
-%with-lock-open-icon {
-  @extend %with-icon, %unlock-16-svg-prop;
-  background-image: var(--unlock-16-svg);
-}
-%with-lock-open-mask {
-  @extend %with-mask, %unlock-16-svg-prop;
-  -webkit-mask-image: var(--unlock-16-svg);
-  mask-image: var(--unlock-16-svg);
-}
-
-%with-logo-alicloud-color-icon {
-  @extend %with-icon, %alibaba-color-16-svg-prop;
-  background-image: var(--alibaba-color-16-svg);
-}
-%with-logo-alicloud-color-mask {
-  @extend %with-mask, %alibaba-color-16-svg-prop;
-  -webkit-mask-image: var(--alibaba-color-16-svg);
-  mask-image: var(--alibaba-color-16-svg);
-}
-
-%with-logo-alicloud-monochrome-icon {
-  @extend %with-icon, %alibaba-16-svg-prop;
-  background-image: var(--alibaba-16-svg);
-}
-%with-logo-alicloud-monochrome-mask {
-  @extend %with-mask, %alibaba-16-svg-prop;
-  -webkit-mask-image: var(--alibaba-16-svg);
-  mask-image: var(--alibaba-16-svg);
-}
-
-%with-logo-auth0-color-icon {
-  @extend %with-icon, %auth0-color-16-svg-prop;
-  background-image: var(--auth0-color-16-svg);
-}
-%with-logo-auth0-color-mask {
-  @extend %with-mask, %auth0-color-16-svg-prop;
-  -webkit-mask-image: var(--auth0-color-16-svg);
-  mask-image: var(--auth0-color-16-svg);
-}
-
-%with-logo-aws-color-icon {
-  @extend %with-icon, %aws-color-16-svg-prop;
-  background-image: var(--aws-color-16-svg);
-}
-%with-logo-aws-color-mask {
-  @extend %with-mask, %aws-color-16-svg-prop;
-  -webkit-mask-image: var(--aws-color-16-svg);
-  mask-image: var(--aws-color-16-svg);
-}
-
-%with-logo-aws-monochrome-icon {
-  @extend %with-icon, %aws-16-svg-prop;
-  background-image: var(--aws-16-svg);
-}
-%with-logo-aws-monochrome-mask {
-  @extend %with-mask, %aws-16-svg-prop;
-  -webkit-mask-image: var(--aws-16-svg);
-  mask-image: var(--aws-16-svg);
-}
-
-%with-logo-azure-color-icon {
-  @extend %with-icon, %azure-color-16-svg-prop;
-  background-image: var(--azure-color-16-svg);
-}
-%with-logo-azure-color-mask {
-  @extend %with-mask, %azure-color-16-svg-prop;
-  -webkit-mask-image: var(--azure-color-16-svg);
-  mask-image: var(--azure-color-16-svg);
-}
-
-%with-logo-azure-dev-ops-color-icon {
-  @extend %with-icon, %azure-devops-color-16-svg-prop;
-  background-image: var(--azure-devops-color-16-svg);
-}
-%with-logo-azure-dev-ops-color-mask {
-  @extend %with-mask, %azure-devops-color-16-svg-prop;
-  -webkit-mask-image: var(--azure-devops-color-16-svg);
-  mask-image: var(--azure-devops-color-16-svg);
-}
-
-%with-logo-azure-dev-ops-monochrome-icon {
-  @extend %with-icon, %azure-devops-16-svg-prop;
-  background-image: var(--azure-devops-16-svg);
-}
-%with-logo-azure-dev-ops-monochrome-mask {
-  @extend %with-mask, %azure-devops-16-svg-prop;
-  -webkit-mask-image: var(--azure-devops-16-svg);
-  mask-image: var(--azure-devops-16-svg);
-}
-
-%with-logo-azure-monochrome-icon {
-  @extend %with-icon, %azure-16-svg-prop;
-  background-image: var(--azure-16-svg);
-}
-%with-logo-azure-monochrome-mask {
-  @extend %with-mask, %azure-16-svg-prop;
-  -webkit-mask-image: var(--azure-16-svg);
-  mask-image: var(--azure-16-svg);
-}
-
-%with-logo-bitbucket-color-icon {
-  @extend %with-icon, %bitbucket-color-16-svg-prop;
-  background-image: var(--bitbucket-color-16-svg);
-}
-%with-logo-bitbucket-color-mask {
-  @extend %with-mask, %bitbucket-color-16-svg-prop;
-  -webkit-mask-image: var(--bitbucket-color-16-svg);
-  mask-image: var(--bitbucket-color-16-svg);
-}
-
-%with-logo-bitbucket-monochrome-icon {
-  @extend %with-icon, %bitbucket-16-svg-prop;
-  background-image: var(--bitbucket-16-svg);
-}
-%with-logo-bitbucket-monochrome-mask {
-  @extend %with-mask, %bitbucket-16-svg-prop;
-  -webkit-mask-image: var(--bitbucket-16-svg);
-  mask-image: var(--bitbucket-16-svg);
-}
-
-%with-logo-consul-color-icon {
-  @extend %with-icon, %consul-color-16-svg-prop;
-  background-image: var(--consul-color-16-svg);
-}
-%with-logo-consul-color-mask {
-  @extend %with-mask, %consul-color-16-svg-prop;
-  -webkit-mask-image: var(--consul-color-16-svg);
-  mask-image: var(--consul-color-16-svg);
-}
-
-%with-logo-ember-circle-color-icon {
-  @extend %with-icon, %logo-ember-circle-color-svg-prop;
-  background-image: var(--logo-ember-circle-color-svg);
-}
-%with-logo-ember-circle-color-mask {
-  @extend %with-mask, %logo-ember-circle-color-svg-prop;
-  -webkit-mask-image: var(--logo-ember-circle-color-svg);
-  mask-image: var(--logo-ember-circle-color-svg);
-}
-
-%with-logo-gcp-color-icon {
-  @extend %with-icon, %gcp-color-16-svg-prop;
-  background-image: var(--gcp-color-16-svg);
-}
-%with-logo-gcp-color-mask {
-  @extend %with-mask, %gcp-color-16-svg-prop;
-  -webkit-mask-image: var(--gcp-color-16-svg);
-  mask-image: var(--gcp-color-16-svg);
-}
-
-%with-logo-gcp-monochrome-icon {
-  @extend %with-icon, %gcp-16-svg-prop;
-  background-image: var(--gcp-16-svg);
-}
-%with-logo-gcp-monochrome-mask {
-  @extend %with-mask, %gcp-16-svg-prop;
-  -webkit-mask-image: var(--gcp-16-svg);
-  mask-image: var(--gcp-16-svg);
-}
-
-%with-logo-github-color-icon {
-  @extend %with-icon, %github-color-16-svg-prop;
-  background-image: var(--github-color-16-svg);
-}
-%with-logo-github-color-mask {
-  @extend %with-mask, %github-color-16-svg-prop;
-  -webkit-mask-image: var(--github-color-16-svg);
-  mask-image: var(--github-color-16-svg);
-}
-
-%with-logo-github-monochrome-icon {
-  @extend %with-icon, %github-16-svg-prop;
-  background-image: var(--github-16-svg);
-}
-%with-logo-github-monochrome-mask {
-  @extend %with-mask, %github-16-svg-prop;
-  -webkit-mask-image: var(--github-16-svg);
-  mask-image: var(--github-16-svg);
-}
-
-%with-logo-gitlab-color-icon {
-  @extend %with-icon, %gitlab-color-16-svg-prop;
-  background-image: var(--gitlab-color-16-svg);
-}
-%with-logo-gitlab-color-mask {
-  @extend %with-mask, %gitlab-color-16-svg-prop;
-  -webkit-mask-image: var(--gitlab-color-16-svg);
-  mask-image: var(--gitlab-color-16-svg);
-}
-
-%with-logo-gitlab-monochrome-icon {
-  @extend %with-icon, %gitlab-16-svg-prop;
-  background-image: var(--gitlab-16-svg);
-}
-%with-logo-gitlab-monochrome-mask {
-  @extend %with-mask, %gitlab-16-svg-prop;
-  -webkit-mask-image: var(--gitlab-16-svg);
-  mask-image: var(--gitlab-16-svg);
-}
-
-%with-logo-glimmer-color-icon {
-  @extend %with-icon, %logo-glimmer-color-svg-prop;
-  background-image: var(--logo-glimmer-color-svg);
-}
-%with-logo-glimmer-color-mask {
-  @extend %with-mask, %logo-glimmer-color-svg-prop;
-  -webkit-mask-image: var(--logo-glimmer-color-svg);
-  mask-image: var(--logo-glimmer-color-svg);
-}
-
-%with-logo-google-color-icon {
-  @extend %with-icon, %google-color-16-svg-prop;
-  background-image: var(--google-color-16-svg);
-}
-%with-logo-google-color-mask {
-  @extend %with-mask, %google-color-16-svg-prop;
-  -webkit-mask-image: var(--google-color-16-svg);
-  mask-image: var(--google-color-16-svg);
-}
-
-%with-logo-google-monochrome-icon {
-  @extend %with-icon, %google-16-svg-prop;
-  background-image: var(--google-16-svg);
-}
-%with-logo-google-monochrome-mask {
-  @extend %with-mask, %google-16-svg-prop;
-  -webkit-mask-image: var(--google-16-svg);
-  mask-image: var(--google-16-svg);
-}
-
-%with-logo-hashicorp-color-icon {
-  @extend %with-icon, %logo-hashicorp-color-svg-prop;
-  background-image: var(--logo-hashicorp-color-svg);
-}
-%with-logo-hashicorp-color-mask {
-  @extend %with-mask, %logo-hashicorp-color-svg-prop;
-  -webkit-mask-image: var(--logo-hashicorp-color-svg);
-  mask-image: var(--logo-hashicorp-color-svg);
-}
-
-%with-logo-jwt-color-icon {
-  @extend %with-icon, %logo-jwt-color-svg-prop;
-  background-image: var(--logo-jwt-color-svg);
-}
-%with-logo-jwt-color-mask {
-  @extend %with-mask, %logo-jwt-color-svg-prop;
-  -webkit-mask-image: var(--logo-jwt-color-svg);
-  mask-image: var(--logo-jwt-color-svg);
-}
-
-%with-logo-kubernetes-color-icon {
-  @extend %with-icon, %kubernetes-color-16-svg-prop;
-  background-image: var(--kubernetes-color-16-svg);
-}
-%with-logo-kubernetes-color-mask {
-  @extend %with-mask, %kubernetes-color-16-svg-prop;
-  -webkit-mask-image: var(--kubernetes-color-16-svg);
-  mask-image: var(--kubernetes-color-16-svg);
-}
-
-%with-logo-kubernetes-monochrome-icon {
-  @extend %with-icon, %kubernetes-16-svg-prop;
-  background-image: var(--kubernetes-16-svg);
-}
-%with-logo-kubernetes-monochrome-mask {
-  @extend %with-mask, %kubernetes-16-svg-prop;
-  -webkit-mask-image: var(--kubernetes-16-svg);
-  mask-image: var(--kubernetes-16-svg);
-}
-
-%with-logo-microsoft-color-icon {
-  @extend %with-icon, %microsoft-color-16-svg-prop;
-  background-image: var(--microsoft-color-16-svg);
-}
-%with-logo-microsoft-color-mask {
-  @extend %with-mask, %microsoft-color-16-svg-prop;
-  -webkit-mask-image: var(--microsoft-color-16-svg);
-  mask-image: var(--microsoft-color-16-svg);
-}
-
-%with-logo-nomad-color-icon {
-  @extend %with-icon, %nomad-color-16-svg-prop;
-  background-image: var(--nomad-color-16-svg);
-}
-%with-logo-nomad-color-mask {
-  @extend %with-mask, %nomad-color-16-svg-prop;
-  -webkit-mask-image: var(--nomad-color-16-svg);
-  mask-image: var(--nomad-color-16-svg);
-}
-
-%with-logo-oidc-color-icon {
-  @extend %with-icon, %logo-oidc-color-svg-prop;
-  background-image: var(--logo-oidc-color-svg);
-}
-%with-logo-oidc-color-mask {
-  @extend %with-mask, %logo-oidc-color-svg-prop;
-  -webkit-mask-image: var(--logo-oidc-color-svg);
-  mask-image: var(--logo-oidc-color-svg);
-}
-
-%with-logo-okta-color-icon {
-  @extend %with-icon, %okta-color-16-svg-prop;
-  background-image: var(--okta-color-16-svg);
-}
-%with-logo-okta-color-mask {
-  @extend %with-mask, %okta-color-16-svg-prop;
-  -webkit-mask-image: var(--okta-color-16-svg);
-  mask-image: var(--okta-color-16-svg);
-}
-
-%with-logo-oracle-color-icon {
-  @extend %with-icon, %oracle-color-16-svg-prop;
-  background-image: var(--oracle-color-16-svg);
-}
-%with-logo-oracle-color-mask {
-  @extend %with-mask, %oracle-color-16-svg-prop;
-  -webkit-mask-image: var(--oracle-color-16-svg);
-  mask-image: var(--oracle-color-16-svg);
-}
-
-%with-logo-oracle-monochrome-icon {
-  @extend %with-icon, %oracle-16-svg-prop;
-  background-image: var(--oracle-16-svg);
-}
-%with-logo-oracle-monochrome-mask {
-  @extend %with-mask, %oracle-16-svg-prop;
-  -webkit-mask-image: var(--oracle-16-svg);
-  mask-image: var(--oracle-16-svg);
-}
-
-%with-logo-slack-color-icon {
-  @extend %with-icon, %slack-color-16-svg-prop;
-  background-image: var(--slack-color-16-svg);
-}
-%with-logo-slack-color-mask {
-  @extend %with-mask, %slack-color-16-svg-prop;
-  -webkit-mask-image: var(--slack-color-16-svg);
-  mask-image: var(--slack-color-16-svg);
-}
-
-%with-logo-slack-monochrome-icon {
-  @extend %with-icon, %slack-16-svg-prop;
-  background-image: var(--slack-16-svg);
-}
-%with-logo-slack-monochrome-mask {
-  @extend %with-mask, %slack-16-svg-prop;
-  -webkit-mask-image: var(--slack-16-svg);
-  mask-image: var(--slack-16-svg);
-}
-
-%with-logo-terraform-color-icon {
-  @extend %with-icon, %terraform-color-16-svg-prop;
-  background-image: var(--terraform-color-16-svg);
-}
-%with-logo-terraform-color-mask {
-  @extend %with-mask, %terraform-color-16-svg-prop;
-  -webkit-mask-image: var(--terraform-color-16-svg);
-  mask-image: var(--terraform-color-16-svg);
-}
-
-%with-logo-vault-color-icon {
-  @extend %with-icon, %logo-vault-color-svg-prop;
-  background-image: var(--logo-vault-color-svg);
-}
-%with-logo-vault-color-mask {
-  @extend %with-mask, %logo-vault-color-svg-prop;
-  -webkit-mask-image: var(--logo-vault-color-svg);
-  mask-image: var(--logo-vault-color-svg);
-}
-
-%with-logo-vmware-color-icon {
-  @extend %with-icon, %vmware-color-16-svg-prop;
-  background-image: var(--vmware-color-16-svg);
-}
-%with-logo-vmware-color-mask {
-  @extend %with-mask, %vmware-color-16-svg-prop;
-  -webkit-mask-image: var(--vmware-color-16-svg);
-  mask-image: var(--vmware-color-16-svg);
-}
-
-%with-logo-vmware-monochrome-icon {
-  @extend %with-icon, %vmware-16-svg-prop;
-  background-image: var(--vmware-16-svg);
-}
-%with-logo-vmware-monochrome-mask {
-  @extend %with-mask, %vmware-16-svg-prop;
-  -webkit-mask-image: var(--vmware-16-svg);
-  mask-image: var(--vmware-16-svg);
-}
-
-%with-mail-16-icon {
-  @extend %with-icon, %mail-16-svg-prop;
-  background-image: var(--mail-16-svg);
-}
-%with-mail-16-mask {
-  @extend %with-mask, %mail-16-svg-prop;
-  -webkit-mask-image: var(--mail-16-svg);
-  mask-image: var(--mail-16-svg);
-}
-
-%with-mail-24-icon {
-  @extend %with-icon, %mail-24-svg-prop;
-  background-image: var(--mail-24-svg);
-}
-%with-mail-24-mask {
-  @extend %with-mask, %mail-24-svg-prop;
-  -webkit-mask-image: var(--mail-24-svg);
-  mask-image: var(--mail-24-svg);
-}
-
-%with-mail-open-16-icon {
-  @extend %with-icon, %mail-open-16-svg-prop;
-  background-image: var(--mail-open-16-svg);
-}
-%with-mail-open-16-mask {
-  @extend %with-mask, %mail-open-16-svg-prop;
-  -webkit-mask-image: var(--mail-open-16-svg);
-  mask-image: var(--mail-open-16-svg);
-}
-
-%with-mail-open-24-icon {
-  @extend %with-icon, %mail-open-24-svg-prop;
-  background-image: var(--mail-open-24-svg);
-}
-%with-mail-open-24-mask {
-  @extend %with-mask, %mail-open-24-svg-prop;
-  -webkit-mask-image: var(--mail-open-24-svg);
-  mask-image: var(--mail-open-24-svg);
-}
-
-%with-mainframe-16-icon {
-  @extend %with-icon, %mainframe-16-svg-prop;
-  background-image: var(--mainframe-16-svg);
-}
-%with-mainframe-16-mask {
-  @extend %with-mask, %mainframe-16-svg-prop;
-  -webkit-mask-image: var(--mainframe-16-svg);
-  mask-image: var(--mainframe-16-svg);
-}
-
-%with-mainframe-24-icon {
-  @extend %with-icon, %mainframe-24-svg-prop;
-  background-image: var(--mainframe-24-svg);
-}
-%with-mainframe-24-mask {
-  @extend %with-mask, %mainframe-24-svg-prop;
-  -webkit-mask-image: var(--mainframe-24-svg);
-  mask-image: var(--mainframe-24-svg);
-}
-
-%with-map-16-icon {
-  @extend %with-icon, %map-16-svg-prop;
-  background-image: var(--map-16-svg);
-}
-%with-map-16-mask {
-  @extend %with-mask, %map-16-svg-prop;
-  -webkit-mask-image: var(--map-16-svg);
-  mask-image: var(--map-16-svg);
-}
-
-%with-map-24-icon {
-  @extend %with-icon, %map-24-svg-prop;
-  background-image: var(--map-24-svg);
-}
-%with-map-24-mask {
-  @extend %with-mask, %map-24-svg-prop;
-  -webkit-mask-image: var(--map-24-svg);
-  mask-image: var(--map-24-svg);
-}
-
-%with-map-pin-16-icon {
-  @extend %with-icon, %map-pin-16-svg-prop;
-  background-image: var(--map-pin-16-svg);
-}
-%with-map-pin-16-mask {
-  @extend %with-mask, %map-pin-16-svg-prop;
-  -webkit-mask-image: var(--map-pin-16-svg);
-  mask-image: var(--map-pin-16-svg);
-}
-
-%with-map-pin-24-icon {
-  @extend %with-icon, %map-pin-24-svg-prop;
-  background-image: var(--map-pin-24-svg);
-}
-%with-map-pin-24-mask {
-  @extend %with-mask, %map-pin-24-svg-prop;
-  -webkit-mask-image: var(--map-pin-24-svg);
-  mask-image: var(--map-pin-24-svg);
-}
-
-%with-maximize-16-icon {
-  @extend %with-icon, %maximize-16-svg-prop;
-  background-image: var(--maximize-16-svg);
-}
-%with-maximize-16-mask {
-  @extend %with-mask, %maximize-16-svg-prop;
-  -webkit-mask-image: var(--maximize-16-svg);
-  mask-image: var(--maximize-16-svg);
-}
-
-%with-maximize-24-icon {
-  @extend %with-icon, %maximize-24-svg-prop;
-  background-image: var(--maximize-24-svg);
-}
-%with-maximize-24-mask {
-  @extend %with-mask, %maximize-24-svg-prop;
-  -webkit-mask-image: var(--maximize-24-svg);
-  mask-image: var(--maximize-24-svg);
-}
-
-%with-maximize-alt-16-icon {
-  @extend %with-icon, %maximize-alt-16-svg-prop;
-  background-image: var(--maximize-alt-16-svg);
-}
-%with-maximize-alt-16-mask {
-  @extend %with-mask, %maximize-alt-16-svg-prop;
-  -webkit-mask-image: var(--maximize-alt-16-svg);
-  mask-image: var(--maximize-alt-16-svg);
-}
-
-%with-maximize-alt-24-icon {
-  @extend %with-icon, %maximize-alt-24-svg-prop;
-  background-image: var(--maximize-alt-24-svg);
-}
-%with-maximize-alt-24-mask {
-  @extend %with-mask, %maximize-alt-24-svg-prop;
-  -webkit-mask-image: var(--maximize-alt-24-svg);
-  mask-image: var(--maximize-alt-24-svg);
-}
-
-%with-meh-16-icon {
-  @extend %with-icon, %meh-16-svg-prop;
-  background-image: var(--meh-16-svg);
-}
-%with-meh-16-mask {
-  @extend %with-mask, %meh-16-svg-prop;
-  -webkit-mask-image: var(--meh-16-svg);
-  mask-image: var(--meh-16-svg);
-}
-
-%with-meh-24-icon {
-  @extend %with-icon, %meh-24-svg-prop;
-  background-image: var(--meh-24-svg);
-}
-%with-meh-24-mask {
-  @extend %with-mask, %meh-24-svg-prop;
-  -webkit-mask-image: var(--meh-24-svg);
-  mask-image: var(--meh-24-svg);
-}
-
-%with-menu-16-icon {
-  @extend %with-icon, %menu-16-svg-prop;
-  background-image: var(--menu-16-svg);
-}
-%with-menu-16-mask {
-  @extend %with-mask, %menu-16-svg-prop;
-  -webkit-mask-image: var(--menu-16-svg);
-  mask-image: var(--menu-16-svg);
-}
-
-%with-menu-24-icon {
-  @extend %with-icon, %menu-24-svg-prop;
-  background-image: var(--menu-24-svg);
-}
-%with-menu-24-mask {
-  @extend %with-mask, %menu-24-svg-prop;
-  -webkit-mask-image: var(--menu-24-svg);
-  mask-image: var(--menu-24-svg);
-}
-
-%with-menu-icon {
-  @extend %with-icon, %menu-16-svg-prop;
-  background-image: var(--menu-16-svg);
-}
-%with-menu-mask {
-  @extend %with-mask, %menu-16-svg-prop;
-  -webkit-mask-image: var(--menu-16-svg);
-  mask-image: var(--menu-16-svg);
-}
-
-%with-mesh-16-icon {
-  @extend %with-icon, %mesh-16-svg-prop;
-  background-image: var(--mesh-16-svg);
-}
-%with-mesh-16-mask {
-  @extend %with-mask, %mesh-16-svg-prop;
-  -webkit-mask-image: var(--mesh-16-svg);
-  mask-image: var(--mesh-16-svg);
-}
-
-%with-mesh-24-icon {
-  @extend %with-icon, %mesh-24-svg-prop;
-  background-image: var(--mesh-24-svg);
-}
-%with-mesh-24-mask {
-  @extend %with-mask, %mesh-24-svg-prop;
-  -webkit-mask-image: var(--mesh-24-svg);
-  mask-image: var(--mesh-24-svg);
-}
-
-%with-mesh-icon {
-  @extend %with-icon, %mesh-16-svg-prop;
-  background-image: var(--mesh-16-svg);
-}
-%with-mesh-mask {
-  @extend %with-mask, %mesh-16-svg-prop;
-  -webkit-mask-image: var(--mesh-16-svg);
-  mask-image: var(--mesh-16-svg);
-}
-
-%with-message-circle-16-icon {
-  @extend %with-icon, %message-circle-16-svg-prop;
-  background-image: var(--message-circle-16-svg);
-}
-%with-message-circle-16-mask {
-  @extend %with-mask, %message-circle-16-svg-prop;
-  -webkit-mask-image: var(--message-circle-16-svg);
-  mask-image: var(--message-circle-16-svg);
-}
-
-%with-message-circle-24-icon {
-  @extend %with-icon, %message-circle-24-svg-prop;
-  background-image: var(--message-circle-24-svg);
-}
-%with-message-circle-24-mask {
-  @extend %with-mask, %message-circle-24-svg-prop;
-  -webkit-mask-image: var(--message-circle-24-svg);
-  mask-image: var(--message-circle-24-svg);
-}
-
-%with-message-circle-fill-16-icon {
-  @extend %with-icon, %message-circle-fill-16-svg-prop;
-  background-image: var(--message-circle-fill-16-svg);
-}
-%with-message-circle-fill-16-mask {
-  @extend %with-mask, %message-circle-fill-16-svg-prop;
-  -webkit-mask-image: var(--message-circle-fill-16-svg);
-  mask-image: var(--message-circle-fill-16-svg);
-}
-
-%with-message-circle-fill-24-icon {
-  @extend %with-icon, %message-circle-fill-24-svg-prop;
-  background-image: var(--message-circle-fill-24-svg);
-}
-%with-message-circle-fill-24-mask {
-  @extend %with-mask, %message-circle-fill-24-svg-prop;
-  -webkit-mask-image: var(--message-circle-fill-24-svg);
-  mask-image: var(--message-circle-fill-24-svg);
-}
-
-%with-message-square-16-icon {
-  @extend %with-icon, %message-square-16-svg-prop;
-  background-image: var(--message-square-16-svg);
-}
-%with-message-square-16-mask {
-  @extend %with-mask, %message-square-16-svg-prop;
-  -webkit-mask-image: var(--message-square-16-svg);
-  mask-image: var(--message-square-16-svg);
-}
-
-%with-message-square-24-icon {
-  @extend %with-icon, %message-square-24-svg-prop;
-  background-image: var(--message-square-24-svg);
-}
-%with-message-square-24-mask {
-  @extend %with-mask, %message-square-24-svg-prop;
-  -webkit-mask-image: var(--message-square-24-svg);
-  mask-image: var(--message-square-24-svg);
-}
-
-%with-message-square-fill-16-icon {
-  @extend %with-icon, %message-square-fill-16-svg-prop;
-  background-image: var(--message-square-fill-16-svg);
-}
-%with-message-square-fill-16-mask {
-  @extend %with-mask, %message-square-fill-16-svg-prop;
-  -webkit-mask-image: var(--message-square-fill-16-svg);
-  mask-image: var(--message-square-fill-16-svg);
-}
-
-%with-message-square-fill-24-icon {
-  @extend %with-icon, %message-square-fill-24-svg-prop;
-  background-image: var(--message-square-fill-24-svg);
-}
-%with-message-square-fill-24-mask {
-  @extend %with-mask, %message-square-fill-24-svg-prop;
-  -webkit-mask-image: var(--message-square-fill-24-svg);
-  mask-image: var(--message-square-fill-24-svg);
-}
-
-%with-message-icon {
-  @extend %with-icon, %message-square-fill-16-svg-prop;
-  background-image: var(--message-square-fill-16-svg);
-}
-%with-message-mask {
-  @extend %with-mask, %message-square-fill-16-svg-prop;
-  -webkit-mask-image: var(--message-square-fill-16-svg);
-  mask-image: var(--message-square-fill-16-svg);
-}
-
-%with-mic-16-icon {
-  @extend %with-icon, %mic-16-svg-prop;
-  background-image: var(--mic-16-svg);
-}
-%with-mic-16-mask {
-  @extend %with-mask, %mic-16-svg-prop;
-  -webkit-mask-image: var(--mic-16-svg);
-  mask-image: var(--mic-16-svg);
-}
-
-%with-mic-24-icon {
-  @extend %with-icon, %mic-24-svg-prop;
-  background-image: var(--mic-24-svg);
-}
-%with-mic-24-mask {
-  @extend %with-mask, %mic-24-svg-prop;
-  -webkit-mask-image: var(--mic-24-svg);
-  mask-image: var(--mic-24-svg);
-}
-
-%with-mic-off-16-icon {
-  @extend %with-icon, %mic-off-16-svg-prop;
-  background-image: var(--mic-off-16-svg);
-}
-%with-mic-off-16-mask {
-  @extend %with-mask, %mic-off-16-svg-prop;
-  -webkit-mask-image: var(--mic-off-16-svg);
-  mask-image: var(--mic-off-16-svg);
-}
-
-%with-mic-off-24-icon {
-  @extend %with-icon, %mic-off-24-svg-prop;
-  background-image: var(--mic-off-24-svg);
-}
-%with-mic-off-24-mask {
-  @extend %with-mask, %mic-off-24-svg-prop;
-  -webkit-mask-image: var(--mic-off-24-svg);
-  mask-image: var(--mic-off-24-svg);
-}
-
-%with-microsoft-16-icon {
-  @extend %with-icon, %microsoft-16-svg-prop;
-  background-image: var(--microsoft-16-svg);
-}
-%with-microsoft-16-mask {
-  @extend %with-mask, %microsoft-16-svg-prop;
-  -webkit-mask-image: var(--microsoft-16-svg);
-  mask-image: var(--microsoft-16-svg);
-}
-
-%with-microsoft-24-icon {
-  @extend %with-icon, %microsoft-24-svg-prop;
-  background-image: var(--microsoft-24-svg);
-}
-%with-microsoft-24-mask {
-  @extend %with-mask, %microsoft-24-svg-prop;
-  -webkit-mask-image: var(--microsoft-24-svg);
-  mask-image: var(--microsoft-24-svg);
-}
-
-%with-microsoft-color-16-icon {
-  @extend %with-icon, %microsoft-color-16-svg-prop;
-  background-image: var(--microsoft-color-16-svg);
-}
-%with-microsoft-color-16-mask {
-  @extend %with-mask, %microsoft-color-16-svg-prop;
-  -webkit-mask-image: var(--microsoft-color-16-svg);
-  mask-image: var(--microsoft-color-16-svg);
-}
-
-%with-microsoft-color-24-icon {
-  @extend %with-icon, %microsoft-color-24-svg-prop;
-  background-image: var(--microsoft-color-24-svg);
-}
-%with-microsoft-color-24-mask {
-  @extend %with-mask, %microsoft-color-24-svg-prop;
-  -webkit-mask-image: var(--microsoft-color-24-svg);
-  mask-image: var(--microsoft-color-24-svg);
-}
-
-%with-migrate-16-icon {
-  @extend %with-icon, %migrate-16-svg-prop;
-  background-image: var(--migrate-16-svg);
-}
-%with-migrate-16-mask {
-  @extend %with-mask, %migrate-16-svg-prop;
-  -webkit-mask-image: var(--migrate-16-svg);
-  mask-image: var(--migrate-16-svg);
-}
-
-%with-migrate-24-icon {
-  @extend %with-icon, %migrate-24-svg-prop;
-  background-image: var(--migrate-24-svg);
-}
-%with-migrate-24-mask {
-  @extend %with-mask, %migrate-24-svg-prop;
-  -webkit-mask-image: var(--migrate-24-svg);
-  mask-image: var(--migrate-24-svg);
-}
-
-%with-minimize-16-icon {
-  @extend %with-icon, %minimize-16-svg-prop;
-  background-image: var(--minimize-16-svg);
-}
-%with-minimize-16-mask {
-  @extend %with-mask, %minimize-16-svg-prop;
-  -webkit-mask-image: var(--minimize-16-svg);
-  mask-image: var(--minimize-16-svg);
-}
-
-%with-minimize-24-icon {
-  @extend %with-icon, %minimize-24-svg-prop;
-  background-image: var(--minimize-24-svg);
-}
-%with-minimize-24-mask {
-  @extend %with-mask, %minimize-24-svg-prop;
-  -webkit-mask-image: var(--minimize-24-svg);
-  mask-image: var(--minimize-24-svg);
-}
-
-%with-minimize-alt-16-icon {
-  @extend %with-icon, %minimize-alt-16-svg-prop;
-  background-image: var(--minimize-alt-16-svg);
-}
-%with-minimize-alt-16-mask {
-  @extend %with-mask, %minimize-alt-16-svg-prop;
-  -webkit-mask-image: var(--minimize-alt-16-svg);
-  mask-image: var(--minimize-alt-16-svg);
-}
-
-%with-minimize-alt-24-icon {
-  @extend %with-icon, %minimize-alt-24-svg-prop;
-  background-image: var(--minimize-alt-24-svg);
-}
-%with-minimize-alt-24-mask {
-  @extend %with-mask, %minimize-alt-24-svg-prop;
-  -webkit-mask-image: var(--minimize-alt-24-svg);
-  mask-image: var(--minimize-alt-24-svg);
-}
-
-%with-minus-16-icon {
-  @extend %with-icon, %minus-16-svg-prop;
-  background-image: var(--minus-16-svg);
-}
-%with-minus-16-mask {
-  @extend %with-mask, %minus-16-svg-prop;
-  -webkit-mask-image: var(--minus-16-svg);
-  mask-image: var(--minus-16-svg);
-}
-
-%with-minus-24-icon {
-  @extend %with-icon, %minus-24-svg-prop;
-  background-image: var(--minus-24-svg);
-}
-%with-minus-24-mask {
-  @extend %with-mask, %minus-24-svg-prop;
-  -webkit-mask-image: var(--minus-24-svg);
-  mask-image: var(--minus-24-svg);
-}
-
-%with-minus-circle-16-icon {
-  @extend %with-icon, %minus-circle-16-svg-prop;
-  background-image: var(--minus-circle-16-svg);
-}
-%with-minus-circle-16-mask {
-  @extend %with-mask, %minus-circle-16-svg-prop;
-  -webkit-mask-image: var(--minus-circle-16-svg);
-  mask-image: var(--minus-circle-16-svg);
-}
-
-%with-minus-circle-24-icon {
-  @extend %with-icon, %minus-circle-24-svg-prop;
-  background-image: var(--minus-circle-24-svg);
-}
-%with-minus-circle-24-mask {
-  @extend %with-mask, %minus-circle-24-svg-prop;
-  -webkit-mask-image: var(--minus-circle-24-svg);
-  mask-image: var(--minus-circle-24-svg);
-}
-
-%with-minus-circle-fill-icon {
-  @extend %with-icon, %minus-circle-16-svg-prop;
-  background-image: var(--minus-circle-16-svg);
-}
-%with-minus-circle-fill-mask {
-  @extend %with-mask, %minus-circle-16-svg-prop;
-  -webkit-mask-image: var(--minus-circle-16-svg);
-  mask-image: var(--minus-circle-16-svg);
-}
-
-%with-minus-circle-outline-icon {
-  @extend %with-icon, %minus-circle-16-svg-prop;
-  background-image: var(--minus-circle-16-svg);
-}
-%with-minus-circle-outline-mask {
-  @extend %with-mask, %minus-circle-16-svg-prop;
-  -webkit-mask-image: var(--minus-circle-16-svg);
-  mask-image: var(--minus-circle-16-svg);
-}
-
-%with-minus-plain-icon {
-  @extend %with-icon, %minus-16-svg-prop;
-  background-image: var(--minus-16-svg);
-}
-%with-minus-plain-mask {
-  @extend %with-mask, %minus-16-svg-prop;
-  -webkit-mask-image: var(--minus-16-svg);
-  mask-image: var(--minus-16-svg);
-}
-
-%with-minus-plus-16-icon {
-  @extend %with-icon, %minus-plus-16-svg-prop;
-  background-image: var(--minus-plus-16-svg);
-}
-%with-minus-plus-16-mask {
-  @extend %with-mask, %minus-plus-16-svg-prop;
-  -webkit-mask-image: var(--minus-plus-16-svg);
-  mask-image: var(--minus-plus-16-svg);
-}
-
-%with-minus-plus-24-icon {
-  @extend %with-icon, %minus-plus-24-svg-prop;
-  background-image: var(--minus-plus-24-svg);
-}
-%with-minus-plus-24-mask {
-  @extend %with-mask, %minus-plus-24-svg-prop;
-  -webkit-mask-image: var(--minus-plus-24-svg);
-  mask-image: var(--minus-plus-24-svg);
-}
-
-%with-minus-plus-circle-16-icon {
-  @extend %with-icon, %minus-plus-circle-16-svg-prop;
-  background-image: var(--minus-plus-circle-16-svg);
-}
-%with-minus-plus-circle-16-mask {
-  @extend %with-mask, %minus-plus-circle-16-svg-prop;
-  -webkit-mask-image: var(--minus-plus-circle-16-svg);
-  mask-image: var(--minus-plus-circle-16-svg);
-}
-
-%with-minus-plus-circle-24-icon {
-  @extend %with-icon, %minus-plus-circle-24-svg-prop;
-  background-image: var(--minus-plus-circle-24-svg);
-}
-%with-minus-plus-circle-24-mask {
-  @extend %with-mask, %minus-plus-circle-24-svg-prop;
-  -webkit-mask-image: var(--minus-plus-circle-24-svg);
-  mask-image: var(--minus-plus-circle-24-svg);
-}
-
-%with-minus-plus-square-16-icon {
-  @extend %with-icon, %minus-plus-square-16-svg-prop;
-  background-image: var(--minus-plus-square-16-svg);
-}
-%with-minus-plus-square-16-mask {
-  @extend %with-mask, %minus-plus-square-16-svg-prop;
-  -webkit-mask-image: var(--minus-plus-square-16-svg);
-  mask-image: var(--minus-plus-square-16-svg);
-}
-
-%with-minus-plus-square-24-icon {
-  @extend %with-icon, %minus-plus-square-24-svg-prop;
-  background-image: var(--minus-plus-square-24-svg);
-}
-%with-minus-plus-square-24-mask {
-  @extend %with-mask, %minus-plus-square-24-svg-prop;
-  -webkit-mask-image: var(--minus-plus-square-24-svg);
-  mask-image: var(--minus-plus-square-24-svg);
-}
-
-%with-minus-square-16-icon {
-  @extend %with-icon, %minus-square-16-svg-prop;
-  background-image: var(--minus-square-16-svg);
-}
-%with-minus-square-16-mask {
-  @extend %with-mask, %minus-square-16-svg-prop;
-  -webkit-mask-image: var(--minus-square-16-svg);
-  mask-image: var(--minus-square-16-svg);
-}
-
-%with-minus-square-24-icon {
-  @extend %with-icon, %minus-square-24-svg-prop;
-  background-image: var(--minus-square-24-svg);
-}
-%with-minus-square-24-mask {
-  @extend %with-mask, %minus-square-24-svg-prop;
-  -webkit-mask-image: var(--minus-square-24-svg);
-  mask-image: var(--minus-square-24-svg);
-}
-
-%with-minus-square-fill-icon {
-  @extend %with-icon, %minus-square-16-svg-prop;
-  background-image: var(--minus-square-16-svg);
-}
-%with-minus-square-fill-mask {
-  @extend %with-mask, %minus-square-16-svg-prop;
-  -webkit-mask-image: var(--minus-square-16-svg);
-  mask-image: var(--minus-square-16-svg);
-}
-
-%with-module-16-icon {
-  @extend %with-icon, %module-16-svg-prop;
-  background-image: var(--module-16-svg);
-}
-%with-module-16-mask {
-  @extend %with-mask, %module-16-svg-prop;
-  -webkit-mask-image: var(--module-16-svg);
-  mask-image: var(--module-16-svg);
-}
-
-%with-module-24-icon {
-  @extend %with-icon, %module-24-svg-prop;
-  background-image: var(--module-24-svg);
-}
-%with-module-24-mask {
-  @extend %with-mask, %module-24-svg-prop;
-  -webkit-mask-image: var(--module-24-svg);
-  mask-image: var(--module-24-svg);
-}
-
-%with-module-icon {
-  @extend %with-icon, %module-16-svg-prop;
-  background-image: var(--module-16-svg);
-}
-%with-module-mask {
-  @extend %with-mask, %module-16-svg-prop;
-  -webkit-mask-image: var(--module-16-svg);
-  mask-image: var(--module-16-svg);
-}
-
-%with-monitor-16-icon {
-  @extend %with-icon, %monitor-16-svg-prop;
-  background-image: var(--monitor-16-svg);
-}
-%with-monitor-16-mask {
-  @extend %with-mask, %monitor-16-svg-prop;
-  -webkit-mask-image: var(--monitor-16-svg);
-  mask-image: var(--monitor-16-svg);
-}
-
-%with-monitor-24-icon {
-  @extend %with-icon, %monitor-24-svg-prop;
-  background-image: var(--monitor-24-svg);
-}
-%with-monitor-24-mask {
-  @extend %with-mask, %monitor-24-svg-prop;
-  -webkit-mask-image: var(--monitor-24-svg);
-  mask-image: var(--monitor-24-svg);
-}
-
-%with-moon-16-icon {
-  @extend %with-icon, %moon-16-svg-prop;
-  background-image: var(--moon-16-svg);
-}
-%with-moon-16-mask {
-  @extend %with-mask, %moon-16-svg-prop;
-  -webkit-mask-image: var(--moon-16-svg);
-  mask-image: var(--moon-16-svg);
-}
-
-%with-moon-24-icon {
-  @extend %with-icon, %moon-24-svg-prop;
-  background-image: var(--moon-24-svg);
-}
-%with-moon-24-mask {
-  @extend %with-mask, %moon-24-svg-prop;
-  -webkit-mask-image: var(--moon-24-svg);
-  mask-image: var(--moon-24-svg);
-}
-
-%with-more-horizontal-16-icon {
-  @extend %with-icon, %more-horizontal-16-svg-prop;
-  background-image: var(--more-horizontal-16-svg);
-}
-%with-more-horizontal-16-mask {
-  @extend %with-mask, %more-horizontal-16-svg-prop;
-  -webkit-mask-image: var(--more-horizontal-16-svg);
-  mask-image: var(--more-horizontal-16-svg);
-}
-
-%with-more-horizontal-24-icon {
-  @extend %with-icon, %more-horizontal-24-svg-prop;
-  background-image: var(--more-horizontal-24-svg);
-}
-%with-more-horizontal-24-mask {
-  @extend %with-mask, %more-horizontal-24-svg-prop;
-  -webkit-mask-image: var(--more-horizontal-24-svg);
-  mask-image: var(--more-horizontal-24-svg);
-}
-
-%with-more-horizontal-icon {
-  @extend %with-icon, %more-horizontal-16-svg-prop;
-  background-image: var(--more-horizontal-16-svg);
-}
-%with-more-horizontal-mask {
-  @extend %with-mask, %more-horizontal-16-svg-prop;
-  -webkit-mask-image: var(--more-horizontal-16-svg);
-  mask-image: var(--more-horizontal-16-svg);
-}
-
-%with-more-vertical-16-icon {
-  @extend %with-icon, %more-vertical-16-svg-prop;
-  background-image: var(--more-vertical-16-svg);
-}
-%with-more-vertical-16-mask {
-  @extend %with-mask, %more-vertical-16-svg-prop;
-  -webkit-mask-image: var(--more-vertical-16-svg);
-  mask-image: var(--more-vertical-16-svg);
-}
-
-%with-more-vertical-24-icon {
-  @extend %with-icon, %more-vertical-24-svg-prop;
-  background-image: var(--more-vertical-24-svg);
-}
-%with-more-vertical-24-mask {
-  @extend %with-mask, %more-vertical-24-svg-prop;
-  -webkit-mask-image: var(--more-vertical-24-svg);
-  mask-image: var(--more-vertical-24-svg);
-}
-
-%with-more-vertical-icon {
-  @extend %with-icon, %more-vertical-16-svg-prop;
-  background-image: var(--more-vertical-16-svg);
-}
-%with-more-vertical-mask {
-  @extend %with-mask, %more-vertical-16-svg-prop;
-  -webkit-mask-image: var(--more-vertical-16-svg);
-  mask-image: var(--more-vertical-16-svg);
-}
-
-%with-mouse-pointer-16-icon {
-  @extend %with-icon, %mouse-pointer-16-svg-prop;
-  background-image: var(--mouse-pointer-16-svg);
-}
-%with-mouse-pointer-16-mask {
-  @extend %with-mask, %mouse-pointer-16-svg-prop;
-  -webkit-mask-image: var(--mouse-pointer-16-svg);
-  mask-image: var(--mouse-pointer-16-svg);
-}
-
-%with-mouse-pointer-24-icon {
-  @extend %with-icon, %mouse-pointer-24-svg-prop;
-  background-image: var(--mouse-pointer-24-svg);
-}
-%with-mouse-pointer-24-mask {
-  @extend %with-mask, %mouse-pointer-24-svg-prop;
-  -webkit-mask-image: var(--mouse-pointer-24-svg);
-  mask-image: var(--mouse-pointer-24-svg);
-}
-
-%with-move-16-icon {
-  @extend %with-icon, %move-16-svg-prop;
-  background-image: var(--move-16-svg);
-}
-%with-move-16-mask {
-  @extend %with-mask, %move-16-svg-prop;
-  -webkit-mask-image: var(--move-16-svg);
-  mask-image: var(--move-16-svg);
-}
-
-%with-move-24-icon {
-  @extend %with-icon, %move-24-svg-prop;
-  background-image: var(--move-24-svg);
-}
-%with-move-24-mask {
-  @extend %with-mask, %move-24-svg-prop;
-  -webkit-mask-image: var(--move-24-svg);
-  mask-image: var(--move-24-svg);
-}
-
-%with-music-16-icon {
-  @extend %with-icon, %music-16-svg-prop;
-  background-image: var(--music-16-svg);
-}
-%with-music-16-mask {
-  @extend %with-mask, %music-16-svg-prop;
-  -webkit-mask-image: var(--music-16-svg);
-  mask-image: var(--music-16-svg);
-}
-
-%with-music-24-icon {
-  @extend %with-icon, %music-24-svg-prop;
-  background-image: var(--music-24-svg);
-}
-%with-music-24-mask {
-  @extend %with-mask, %music-24-svg-prop;
-  -webkit-mask-image: var(--music-24-svg);
-  mask-image: var(--music-24-svg);
-}
-
-%with-navigation-16-icon {
-  @extend %with-icon, %navigation-16-svg-prop;
-  background-image: var(--navigation-16-svg);
-}
-%with-navigation-16-mask {
-  @extend %with-mask, %navigation-16-svg-prop;
-  -webkit-mask-image: var(--navigation-16-svg);
-  mask-image: var(--navigation-16-svg);
-}
-
-%with-navigation-24-icon {
-  @extend %with-icon, %navigation-24-svg-prop;
-  background-image: var(--navigation-24-svg);
-}
-%with-navigation-24-mask {
-  @extend %with-mask, %navigation-24-svg-prop;
-  -webkit-mask-image: var(--navigation-24-svg);
-  mask-image: var(--navigation-24-svg);
-}
-
-%with-navigation-alt-16-icon {
-  @extend %with-icon, %navigation-alt-16-svg-prop;
-  background-image: var(--navigation-alt-16-svg);
-}
-%with-navigation-alt-16-mask {
-  @extend %with-mask, %navigation-alt-16-svg-prop;
-  -webkit-mask-image: var(--navigation-alt-16-svg);
-  mask-image: var(--navigation-alt-16-svg);
-}
-
-%with-navigation-alt-24-icon {
-  @extend %with-icon, %navigation-alt-24-svg-prop;
-  background-image: var(--navigation-alt-24-svg);
-}
-%with-navigation-alt-24-mask {
-  @extend %with-mask, %navigation-alt-24-svg-prop;
-  -webkit-mask-image: var(--navigation-alt-24-svg);
-  mask-image: var(--navigation-alt-24-svg);
-}
-
-%with-network-16-icon {
-  @extend %with-icon, %network-16-svg-prop;
-  background-image: var(--network-16-svg);
-}
-%with-network-16-mask {
-  @extend %with-mask, %network-16-svg-prop;
-  -webkit-mask-image: var(--network-16-svg);
-  mask-image: var(--network-16-svg);
-}
-
-%with-network-24-icon {
-  @extend %with-icon, %network-24-svg-prop;
-  background-image: var(--network-24-svg);
-}
-%with-network-24-mask {
-  @extend %with-mask, %network-24-svg-prop;
-  -webkit-mask-image: var(--network-24-svg);
-  mask-image: var(--network-24-svg);
-}
-
-%with-network-alt-16-icon {
-  @extend %with-icon, %network-alt-16-svg-prop;
-  background-image: var(--network-alt-16-svg);
-}
-%with-network-alt-16-mask {
-  @extend %with-mask, %network-alt-16-svg-prop;
-  -webkit-mask-image: var(--network-alt-16-svg);
-  mask-image: var(--network-alt-16-svg);
-}
-
-%with-network-alt-24-icon {
-  @extend %with-icon, %network-alt-24-svg-prop;
-  background-image: var(--network-alt-24-svg);
-}
-%with-network-alt-24-mask {
-  @extend %with-mask, %network-alt-24-svg-prop;
-  -webkit-mask-image: var(--network-alt-24-svg);
-  mask-image: var(--network-alt-24-svg);
-}
-
-%with-newspaper-16-icon {
-  @extend %with-icon, %newspaper-16-svg-prop;
-  background-image: var(--newspaper-16-svg);
-}
-%with-newspaper-16-mask {
-  @extend %with-mask, %newspaper-16-svg-prop;
-  -webkit-mask-image: var(--newspaper-16-svg);
-  mask-image: var(--newspaper-16-svg);
-}
-
-%with-newspaper-24-icon {
-  @extend %with-icon, %newspaper-24-svg-prop;
-  background-image: var(--newspaper-24-svg);
-}
-%with-newspaper-24-mask {
-  @extend %with-mask, %newspaper-24-svg-prop;
-  -webkit-mask-image: var(--newspaper-24-svg);
-  mask-image: var(--newspaper-24-svg);
-}
-
-%with-node-16-icon {
-  @extend %with-icon, %node-16-svg-prop;
-  background-image: var(--node-16-svg);
-}
-%with-node-16-mask {
-  @extend %with-mask, %node-16-svg-prop;
-  -webkit-mask-image: var(--node-16-svg);
-  mask-image: var(--node-16-svg);
-}
-
-%with-node-24-icon {
-  @extend %with-icon, %node-24-svg-prop;
-  background-image: var(--node-24-svg);
-}
-%with-node-24-mask {
-  @extend %with-mask, %node-24-svg-prop;
-  -webkit-mask-image: var(--node-24-svg);
-  mask-image: var(--node-24-svg);
-}
-
-%with-nomad-16-icon {
-  @extend %with-icon, %nomad-16-svg-prop;
-  background-image: var(--nomad-16-svg);
-}
-%with-nomad-16-mask {
-  @extend %with-mask, %nomad-16-svg-prop;
-  -webkit-mask-image: var(--nomad-16-svg);
-  mask-image: var(--nomad-16-svg);
-}
-
-%with-nomad-24-icon {
-  @extend %with-icon, %nomad-24-svg-prop;
-  background-image: var(--nomad-24-svg);
-}
-%with-nomad-24-mask {
-  @extend %with-mask, %nomad-24-svg-prop;
-  -webkit-mask-image: var(--nomad-24-svg);
-  mask-image: var(--nomad-24-svg);
-}
-
-%with-nomad-color-16-icon {
-  @extend %with-icon, %nomad-color-16-svg-prop;
-  background-image: var(--nomad-color-16-svg);
-}
-%with-nomad-color-16-mask {
-  @extend %with-mask, %nomad-color-16-svg-prop;
-  -webkit-mask-image: var(--nomad-color-16-svg);
-  mask-image: var(--nomad-color-16-svg);
-}
-
-%with-nomad-color-24-icon {
-  @extend %with-icon, %nomad-color-24-svg-prop;
-  background-image: var(--nomad-color-24-svg);
-}
-%with-nomad-color-24-mask {
-  @extend %with-mask, %nomad-color-24-svg-prop;
-  -webkit-mask-image: var(--nomad-color-24-svg);
-  mask-image: var(--nomad-color-24-svg);
-}
-
-%with-notification-disabled-icon {
-  @extend %with-icon, %bell-off-16-svg-prop;
-  background-image: var(--bell-off-16-svg);
-}
-%with-notification-disabled-mask {
-  @extend %with-mask, %bell-off-16-svg-prop;
-  -webkit-mask-image: var(--bell-off-16-svg);
-  mask-image: var(--bell-off-16-svg);
-}
-
-%with-notification-fill-icon {
-  @extend %with-icon, %bell-active-fill-16-svg-prop;
-  background-image: var(--bell-active-fill-16-svg);
-}
-%with-notification-fill-mask {
-  @extend %with-mask, %bell-active-fill-16-svg-prop;
-  -webkit-mask-image: var(--bell-active-fill-16-svg);
-  mask-image: var(--bell-active-fill-16-svg);
-}
-
-%with-notification-outline-icon {
-  @extend %with-icon, %bell-16-svg-prop;
-  background-image: var(--bell-16-svg);
-}
-%with-notification-outline-mask {
-  @extend %with-mask, %bell-16-svg-prop;
-  -webkit-mask-image: var(--bell-16-svg);
-  mask-image: var(--bell-16-svg);
-}
-
-%with-octagon-16-icon {
-  @extend %with-icon, %octagon-16-svg-prop;
-  background-image: var(--octagon-16-svg);
-}
-%with-octagon-16-mask {
-  @extend %with-mask, %octagon-16-svg-prop;
-  -webkit-mask-image: var(--octagon-16-svg);
-  mask-image: var(--octagon-16-svg);
-}
-
-%with-octagon-24-icon {
-  @extend %with-icon, %octagon-24-svg-prop;
-  background-image: var(--octagon-24-svg);
-}
-%with-octagon-24-mask {
-  @extend %with-mask, %octagon-24-svg-prop;
-  -webkit-mask-image: var(--octagon-24-svg);
-  mask-image: var(--octagon-24-svg);
-}
-
-%with-okta-16-icon {
-  @extend %with-icon, %okta-16-svg-prop;
-  background-image: var(--okta-16-svg);
-}
-%with-okta-16-mask {
-  @extend %with-mask, %okta-16-svg-prop;
-  -webkit-mask-image: var(--okta-16-svg);
-  mask-image: var(--okta-16-svg);
-}
-
-%with-okta-24-icon {
-  @extend %with-icon, %okta-24-svg-prop;
-  background-image: var(--okta-24-svg);
-}
-%with-okta-24-mask {
-  @extend %with-mask, %okta-24-svg-prop;
-  -webkit-mask-image: var(--okta-24-svg);
-  mask-image: var(--okta-24-svg);
-}
-
-%with-okta-color-16-icon {
-  @extend %with-icon, %okta-color-16-svg-prop;
-  background-image: var(--okta-color-16-svg);
-}
-%with-okta-color-16-mask {
-  @extend %with-mask, %okta-color-16-svg-prop;
-  -webkit-mask-image: var(--okta-color-16-svg);
-  mask-image: var(--okta-color-16-svg);
-}
-
-%with-okta-color-24-icon {
-  @extend %with-icon, %okta-color-24-svg-prop;
-  background-image: var(--okta-color-24-svg);
-}
-%with-okta-color-24-mask {
-  @extend %with-mask, %okta-color-24-svg-prop;
-  -webkit-mask-image: var(--okta-color-24-svg);
-  mask-image: var(--okta-color-24-svg);
-}
-
-%with-oracle-16-icon {
-  @extend %with-icon, %oracle-16-svg-prop;
-  background-image: var(--oracle-16-svg);
-}
-%with-oracle-16-mask {
-  @extend %with-mask, %oracle-16-svg-prop;
-  -webkit-mask-image: var(--oracle-16-svg);
-  mask-image: var(--oracle-16-svg);
-}
-
-%with-oracle-24-icon {
-  @extend %with-icon, %oracle-24-svg-prop;
-  background-image: var(--oracle-24-svg);
-}
-%with-oracle-24-mask {
-  @extend %with-mask, %oracle-24-svg-prop;
-  -webkit-mask-image: var(--oracle-24-svg);
-  mask-image: var(--oracle-24-svg);
-}
-
-%with-oracle-color-16-icon {
-  @extend %with-icon, %oracle-color-16-svg-prop;
-  background-image: var(--oracle-color-16-svg);
-}
-%with-oracle-color-16-mask {
-  @extend %with-mask, %oracle-color-16-svg-prop;
-  -webkit-mask-image: var(--oracle-color-16-svg);
-  mask-image: var(--oracle-color-16-svg);
-}
-
-%with-oracle-color-24-icon {
-  @extend %with-icon, %oracle-color-24-svg-prop;
-  background-image: var(--oracle-color-24-svg);
-}
-%with-oracle-color-24-mask {
-  @extend %with-mask, %oracle-color-24-svg-prop;
-  -webkit-mask-image: var(--oracle-color-24-svg);
-  mask-image: var(--oracle-color-24-svg);
-}
-
-%with-org-16-icon {
-  @extend %with-icon, %org-16-svg-prop;
-  background-image: var(--org-16-svg);
-}
-%with-org-16-mask {
-  @extend %with-mask, %org-16-svg-prop;
-  -webkit-mask-image: var(--org-16-svg);
-  mask-image: var(--org-16-svg);
-}
-
-%with-org-24-icon {
-  @extend %with-icon, %org-24-svg-prop;
-  background-image: var(--org-24-svg);
-}
-%with-org-24-mask {
-  @extend %with-mask, %org-24-svg-prop;
-  -webkit-mask-image: var(--org-24-svg);
-  mask-image: var(--org-24-svg);
-}
-
-%with-outline-16-icon {
-  @extend %with-icon, %outline-16-svg-prop;
-  background-image: var(--outline-16-svg);
-}
-%with-outline-16-mask {
-  @extend %with-mask, %outline-16-svg-prop;
-  -webkit-mask-image: var(--outline-16-svg);
-  mask-image: var(--outline-16-svg);
-}
-
-%with-outline-24-icon {
-  @extend %with-icon, %outline-24-svg-prop;
-  background-image: var(--outline-24-svg);
-}
-%with-outline-24-mask {
-  @extend %with-mask, %outline-24-svg-prop;
-  -webkit-mask-image: var(--outline-24-svg);
-  mask-image: var(--outline-24-svg);
-}
-
-%with-outline-icon {
-  @extend %with-icon, %outline-16-svg-prop;
-  background-image: var(--outline-16-svg);
-}
-%with-outline-mask {
-  @extend %with-mask, %outline-16-svg-prop;
-  -webkit-mask-image: var(--outline-16-svg);
-  mask-image: var(--outline-16-svg);
-}
-
-%with-pack-16-icon {
-  @extend %with-icon, %pack-16-svg-prop;
-  background-image: var(--pack-16-svg);
-}
-%with-pack-16-mask {
-  @extend %with-mask, %pack-16-svg-prop;
-  -webkit-mask-image: var(--pack-16-svg);
-  mask-image: var(--pack-16-svg);
-}
-
-%with-pack-24-icon {
-  @extend %with-icon, %pack-24-svg-prop;
-  background-image: var(--pack-24-svg);
-}
-%with-pack-24-mask {
-  @extend %with-mask, %pack-24-svg-prop;
-  -webkit-mask-image: var(--pack-24-svg);
-  mask-image: var(--pack-24-svg);
-}
-
-%with-pack-color-16-icon {
-  @extend %with-icon, %pack-color-16-svg-prop;
-  background-image: var(--pack-color-16-svg);
-}
-%with-pack-color-16-mask {
-  @extend %with-mask, %pack-color-16-svg-prop;
-  -webkit-mask-image: var(--pack-color-16-svg);
-  mask-image: var(--pack-color-16-svg);
-}
-
-%with-pack-color-24-icon {
-  @extend %with-icon, %pack-color-24-svg-prop;
-  background-image: var(--pack-color-24-svg);
-}
-%with-pack-color-24-mask {
-  @extend %with-mask, %pack-color-24-svg-prop;
-  -webkit-mask-image: var(--pack-color-24-svg);
-  mask-image: var(--pack-color-24-svg);
-}
-
-%with-package-16-icon {
-  @extend %with-icon, %package-16-svg-prop;
-  background-image: var(--package-16-svg);
-}
-%with-package-16-mask {
-  @extend %with-mask, %package-16-svg-prop;
-  -webkit-mask-image: var(--package-16-svg);
-  mask-image: var(--package-16-svg);
-}
-
-%with-package-24-icon {
-  @extend %with-icon, %package-24-svg-prop;
-  background-image: var(--package-24-svg);
-}
-%with-package-24-mask {
-  @extend %with-mask, %package-24-svg-prop;
-  -webkit-mask-image: var(--package-24-svg);
-  mask-image: var(--package-24-svg);
-}
-
-%with-packer-16-icon {
-  @extend %with-icon, %packer-16-svg-prop;
-  background-image: var(--packer-16-svg);
-}
-%with-packer-16-mask {
-  @extend %with-mask, %packer-16-svg-prop;
-  -webkit-mask-image: var(--packer-16-svg);
-  mask-image: var(--packer-16-svg);
-}
-
-%with-packer-24-icon {
-  @extend %with-icon, %packer-24-svg-prop;
-  background-image: var(--packer-24-svg);
-}
-%with-packer-24-mask {
-  @extend %with-mask, %packer-24-svg-prop;
-  -webkit-mask-image: var(--packer-24-svg);
-  mask-image: var(--packer-24-svg);
-}
-
-%with-packer-color-16-icon {
-  @extend %with-icon, %packer-color-16-svg-prop;
-  background-image: var(--packer-color-16-svg);
-}
-%with-packer-color-16-mask {
-  @extend %with-mask, %packer-color-16-svg-prop;
-  -webkit-mask-image: var(--packer-color-16-svg);
-  mask-image: var(--packer-color-16-svg);
-}
-
-%with-packer-color-24-icon {
-  @extend %with-icon, %packer-color-24-svg-prop;
-  background-image: var(--packer-color-24-svg);
-}
-%with-packer-color-24-mask {
-  @extend %with-mask, %packer-color-24-svg-prop;
-  -webkit-mask-image: var(--packer-color-24-svg);
-  mask-image: var(--packer-color-24-svg);
-}
-
-%with-page-outline-icon {
-  @extend %with-icon, %outline-16-svg-prop;
-  background-image: var(--outline-16-svg);
-}
-%with-page-outline-mask {
-  @extend %with-mask, %outline-16-svg-prop;
-  -webkit-mask-image: var(--outline-16-svg);
-  mask-image: var(--outline-16-svg);
-}
-
-%with-paperclip-16-icon {
-  @extend %with-icon, %paperclip-16-svg-prop;
-  background-image: var(--paperclip-16-svg);
-}
-%with-paperclip-16-mask {
-  @extend %with-mask, %paperclip-16-svg-prop;
-  -webkit-mask-image: var(--paperclip-16-svg);
-  mask-image: var(--paperclip-16-svg);
-}
-
-%with-paperclip-24-icon {
-  @extend %with-icon, %paperclip-24-svg-prop;
-  background-image: var(--paperclip-24-svg);
-}
-%with-paperclip-24-mask {
-  @extend %with-mask, %paperclip-24-svg-prop;
-  -webkit-mask-image: var(--paperclip-24-svg);
-  mask-image: var(--paperclip-24-svg);
-}
-
-%with-partner-icon {
-  @extend %with-icon, %users-16-svg-prop;
-  background-image: var(--users-16-svg);
-}
-%with-partner-mask {
-  @extend %with-mask, %users-16-svg-prop;
-  -webkit-mask-image: var(--users-16-svg);
-  mask-image: var(--users-16-svg);
-}
-
-%with-path-16-icon {
-  @extend %with-icon, %path-16-svg-prop;
-  background-image: var(--path-16-svg);
-}
-%with-path-16-mask {
-  @extend %with-mask, %path-16-svg-prop;
-  -webkit-mask-image: var(--path-16-svg);
-  mask-image: var(--path-16-svg);
-}
-
-%with-path-24-icon {
-  @extend %with-icon, %path-24-svg-prop;
-  background-image: var(--path-24-svg);
-}
-%with-path-24-mask {
-  @extend %with-mask, %path-24-svg-prop;
-  -webkit-mask-image: var(--path-24-svg);
-  mask-image: var(--path-24-svg);
-}
-
-%with-path-icon {
-  @extend %with-icon, %path-16-svg-prop;
-  background-image: var(--path-16-svg);
-}
-%with-path-mask {
-  @extend %with-mask, %path-16-svg-prop;
-  -webkit-mask-image: var(--path-16-svg);
-  mask-image: var(--path-16-svg);
-}
-
-%with-pause-16-icon {
-  @extend %with-icon, %pause-16-svg-prop;
-  background-image: var(--pause-16-svg);
-}
-%with-pause-16-mask {
-  @extend %with-mask, %pause-16-svg-prop;
-  -webkit-mask-image: var(--pause-16-svg);
-  mask-image: var(--pause-16-svg);
-}
-
-%with-pause-24-icon {
-  @extend %with-icon, %pause-24-svg-prop;
-  background-image: var(--pause-24-svg);
-}
-%with-pause-24-mask {
-  @extend %with-mask, %pause-24-svg-prop;
-  -webkit-mask-image: var(--pause-24-svg);
-  mask-image: var(--pause-24-svg);
-}
-
-%with-pause-circle-16-icon {
-  @extend %with-icon, %pause-circle-16-svg-prop;
-  background-image: var(--pause-circle-16-svg);
-}
-%with-pause-circle-16-mask {
-  @extend %with-mask, %pause-circle-16-svg-prop;
-  -webkit-mask-image: var(--pause-circle-16-svg);
-  mask-image: var(--pause-circle-16-svg);
-}
-
-%with-pause-circle-24-icon {
-  @extend %with-icon, %pause-circle-24-svg-prop;
-  background-image: var(--pause-circle-24-svg);
-}
-%with-pause-circle-24-mask {
-  @extend %with-mask, %pause-circle-24-svg-prop;
-  -webkit-mask-image: var(--pause-circle-24-svg);
-  mask-image: var(--pause-circle-24-svg);
-}
-
-%with-pen-tool-16-icon {
-  @extend %with-icon, %pen-tool-16-svg-prop;
-  background-image: var(--pen-tool-16-svg);
-}
-%with-pen-tool-16-mask {
-  @extend %with-mask, %pen-tool-16-svg-prop;
-  -webkit-mask-image: var(--pen-tool-16-svg);
-  mask-image: var(--pen-tool-16-svg);
-}
-
-%with-pen-tool-24-icon {
-  @extend %with-icon, %pen-tool-24-svg-prop;
-  background-image: var(--pen-tool-24-svg);
-}
-%with-pen-tool-24-mask {
-  @extend %with-mask, %pen-tool-24-svg-prop;
-  -webkit-mask-image: var(--pen-tool-24-svg);
-  mask-image: var(--pen-tool-24-svg);
-}
-
-%with-pencil-tool-16-icon {
-  @extend %with-icon, %pencil-tool-16-svg-prop;
-  background-image: var(--pencil-tool-16-svg);
-}
-%with-pencil-tool-16-mask {
-  @extend %with-mask, %pencil-tool-16-svg-prop;
-  -webkit-mask-image: var(--pencil-tool-16-svg);
-  mask-image: var(--pencil-tool-16-svg);
-}
-
-%with-pencil-tool-24-icon {
-  @extend %with-icon, %pencil-tool-24-svg-prop;
-  background-image: var(--pencil-tool-24-svg);
-}
-%with-pencil-tool-24-mask {
-  @extend %with-mask, %pencil-tool-24-svg-prop;
-  -webkit-mask-image: var(--pencil-tool-24-svg);
-  mask-image: var(--pencil-tool-24-svg);
-}
-
-%with-phone-16-icon {
-  @extend %with-icon, %phone-16-svg-prop;
-  background-image: var(--phone-16-svg);
-}
-%with-phone-16-mask {
-  @extend %with-mask, %phone-16-svg-prop;
-  -webkit-mask-image: var(--phone-16-svg);
-  mask-image: var(--phone-16-svg);
-}
-
-%with-phone-24-icon {
-  @extend %with-icon, %phone-24-svg-prop;
-  background-image: var(--phone-24-svg);
-}
-%with-phone-24-mask {
-  @extend %with-mask, %phone-24-svg-prop;
-  -webkit-mask-image: var(--phone-24-svg);
-  mask-image: var(--phone-24-svg);
-}
-
-%with-phone-call-16-icon {
-  @extend %with-icon, %phone-call-16-svg-prop;
-  background-image: var(--phone-call-16-svg);
-}
-%with-phone-call-16-mask {
-  @extend %with-mask, %phone-call-16-svg-prop;
-  -webkit-mask-image: var(--phone-call-16-svg);
-  mask-image: var(--phone-call-16-svg);
-}
-
-%with-phone-call-24-icon {
-  @extend %with-icon, %phone-call-24-svg-prop;
-  background-image: var(--phone-call-24-svg);
-}
-%with-phone-call-24-mask {
-  @extend %with-mask, %phone-call-24-svg-prop;
-  -webkit-mask-image: var(--phone-call-24-svg);
-  mask-image: var(--phone-call-24-svg);
-}
-
-%with-phone-off-16-icon {
-  @extend %with-icon, %phone-off-16-svg-prop;
-  background-image: var(--phone-off-16-svg);
-}
-%with-phone-off-16-mask {
-  @extend %with-mask, %phone-off-16-svg-prop;
-  -webkit-mask-image: var(--phone-off-16-svg);
-  mask-image: var(--phone-off-16-svg);
-}
-
-%with-phone-off-24-icon {
-  @extend %with-icon, %phone-off-24-svg-prop;
-  background-image: var(--phone-off-24-svg);
-}
-%with-phone-off-24-mask {
-  @extend %with-mask, %phone-off-24-svg-prop;
-  -webkit-mask-image: var(--phone-off-24-svg);
-  mask-image: var(--phone-off-24-svg);
-}
-
-%with-pie-chart-16-icon {
-  @extend %with-icon, %pie-chart-16-svg-prop;
-  background-image: var(--pie-chart-16-svg);
-}
-%with-pie-chart-16-mask {
-  @extend %with-mask, %pie-chart-16-svg-prop;
-  -webkit-mask-image: var(--pie-chart-16-svg);
-  mask-image: var(--pie-chart-16-svg);
-}
-
-%with-pie-chart-24-icon {
-  @extend %with-icon, %pie-chart-24-svg-prop;
-  background-image: var(--pie-chart-24-svg);
-}
-%with-pie-chart-24-mask {
-  @extend %with-mask, %pie-chart-24-svg-prop;
-  -webkit-mask-image: var(--pie-chart-24-svg);
-  mask-image: var(--pie-chart-24-svg);
-}
-
-%with-pin-16-icon {
-  @extend %with-icon, %pin-16-svg-prop;
-  background-image: var(--pin-16-svg);
-}
-%with-pin-16-mask {
-  @extend %with-mask, %pin-16-svg-prop;
-  -webkit-mask-image: var(--pin-16-svg);
-  mask-image: var(--pin-16-svg);
-}
-
-%with-pin-24-icon {
-  @extend %with-icon, %pin-24-svg-prop;
-  background-image: var(--pin-24-svg);
-}
-%with-pin-24-mask {
-  @extend %with-mask, %pin-24-svg-prop;
-  -webkit-mask-image: var(--pin-24-svg);
-  mask-image: var(--pin-24-svg);
-}
-
-%with-play-16-icon {
-  @extend %with-icon, %play-16-svg-prop;
-  background-image: var(--play-16-svg);
-}
-%with-play-16-mask {
-  @extend %with-mask, %play-16-svg-prop;
-  -webkit-mask-image: var(--play-16-svg);
-  mask-image: var(--play-16-svg);
-}
-
-%with-play-24-icon {
-  @extend %with-icon, %play-24-svg-prop;
-  background-image: var(--play-24-svg);
-}
-%with-play-24-mask {
-  @extend %with-mask, %play-24-svg-prop;
-  -webkit-mask-image: var(--play-24-svg);
-  mask-image: var(--play-24-svg);
-}
-
-%with-play-circle-16-icon {
-  @extend %with-icon, %play-circle-16-svg-prop;
-  background-image: var(--play-circle-16-svg);
-}
-%with-play-circle-16-mask {
-  @extend %with-mask, %play-circle-16-svg-prop;
-  -webkit-mask-image: var(--play-circle-16-svg);
-  mask-image: var(--play-circle-16-svg);
-}
-
-%with-play-circle-24-icon {
-  @extend %with-icon, %play-circle-24-svg-prop;
-  background-image: var(--play-circle-24-svg);
-}
-%with-play-circle-24-mask {
-  @extend %with-mask, %play-circle-24-svg-prop;
-  -webkit-mask-image: var(--play-circle-24-svg);
-  mask-image: var(--play-circle-24-svg);
-}
-
-%with-play-fill-icon {
-  @extend %with-icon, %play-circle-16-svg-prop;
-  background-image: var(--play-circle-16-svg);
-}
-%with-play-fill-mask {
-  @extend %with-mask, %play-circle-16-svg-prop;
-  -webkit-mask-image: var(--play-circle-16-svg);
-  mask-image: var(--play-circle-16-svg);
-}
-
-%with-play-outline-icon {
-  @extend %with-icon, %play-circle-16-svg-prop;
-  background-image: var(--play-circle-16-svg);
-}
-%with-play-outline-mask {
-  @extend %with-mask, %play-circle-16-svg-prop;
-  -webkit-mask-image: var(--play-circle-16-svg);
-  mask-image: var(--play-circle-16-svg);
-}
-
-%with-play-plain-icon {
-  @extend %with-icon, %play-16-svg-prop;
-  background-image: var(--play-16-svg);
-}
-%with-play-plain-mask {
-  @extend %with-mask, %play-16-svg-prop;
-  -webkit-mask-image: var(--play-16-svg);
-  mask-image: var(--play-16-svg);
-}
-
-%with-plus-16-icon {
-  @extend %with-icon, %plus-16-svg-prop;
-  background-image: var(--plus-16-svg);
-}
-%with-plus-16-mask {
-  @extend %with-mask, %plus-16-svg-prop;
-  -webkit-mask-image: var(--plus-16-svg);
-  mask-image: var(--plus-16-svg);
-}
-
-%with-plus-24-icon {
-  @extend %with-icon, %plus-24-svg-prop;
-  background-image: var(--plus-24-svg);
-}
-%with-plus-24-mask {
-  @extend %with-mask, %plus-24-svg-prop;
-  -webkit-mask-image: var(--plus-24-svg);
-  mask-image: var(--plus-24-svg);
-}
-
-%with-plus-circle-16-icon {
-  @extend %with-icon, %plus-circle-16-svg-prop;
-  background-image: var(--plus-circle-16-svg);
-}
-%with-plus-circle-16-mask {
-  @extend %with-mask, %plus-circle-16-svg-prop;
-  -webkit-mask-image: var(--plus-circle-16-svg);
-  mask-image: var(--plus-circle-16-svg);
-}
-
-%with-plus-circle-24-icon {
-  @extend %with-icon, %plus-circle-24-svg-prop;
-  background-image: var(--plus-circle-24-svg);
-}
-%with-plus-circle-24-mask {
-  @extend %with-mask, %plus-circle-24-svg-prop;
-  -webkit-mask-image: var(--plus-circle-24-svg);
-  mask-image: var(--plus-circle-24-svg);
-}
-
-%with-plus-circle-fill-icon {
-  @extend %with-icon, %plus-circle-16-svg-prop;
-  background-image: var(--plus-circle-16-svg);
-}
-%with-plus-circle-fill-mask {
-  @extend %with-mask, %plus-circle-16-svg-prop;
-  -webkit-mask-image: var(--plus-circle-16-svg);
-  mask-image: var(--plus-circle-16-svg);
-}
-
-%with-plus-circle-outline-icon {
-  @extend %with-icon, %plus-circle-16-svg-prop;
-  background-image: var(--plus-circle-16-svg);
-}
-%with-plus-circle-outline-mask {
-  @extend %with-mask, %plus-circle-16-svg-prop;
-  -webkit-mask-image: var(--plus-circle-16-svg);
-  mask-image: var(--plus-circle-16-svg);
-}
-
-%with-plus-plain-icon {
-  @extend %with-icon, %plus-16-svg-prop;
-  background-image: var(--plus-16-svg);
-}
-%with-plus-plain-mask {
-  @extend %with-mask, %plus-16-svg-prop;
-  -webkit-mask-image: var(--plus-16-svg);
-  mask-image: var(--plus-16-svg);
-}
-
-%with-plus-square-16-icon {
-  @extend %with-icon, %plus-square-16-svg-prop;
-  background-image: var(--plus-square-16-svg);
-}
-%with-plus-square-16-mask {
-  @extend %with-mask, %plus-square-16-svg-prop;
-  -webkit-mask-image: var(--plus-square-16-svg);
-  mask-image: var(--plus-square-16-svg);
-}
-
-%with-plus-square-24-icon {
-  @extend %with-icon, %plus-square-24-svg-prop;
-  background-image: var(--plus-square-24-svg);
-}
-%with-plus-square-24-mask {
-  @extend %with-mask, %plus-square-24-svg-prop;
-  -webkit-mask-image: var(--plus-square-24-svg);
-  mask-image: var(--plus-square-24-svg);
-}
-
-%with-plus-square-fill-icon {
-  @extend %with-icon, %plus-square-16-svg-prop;
-  background-image: var(--plus-square-16-svg);
-}
-%with-plus-square-fill-mask {
-  @extend %with-mask, %plus-square-16-svg-prop;
-  -webkit-mask-image: var(--plus-square-16-svg);
-  mask-image: var(--plus-square-16-svg);
-}
-
-%with-port-icon {
-  @extend %with-icon, %port-svg-prop;
-  background-image: var(--port-svg);
-}
-%with-port-mask {
-  @extend %with-mask, %port-svg-prop;
-  -webkit-mask-image: var(--port-svg);
-  mask-image: var(--port-svg);
-}
-
-%with-power-16-icon {
-  @extend %with-icon, %power-16-svg-prop;
-  background-image: var(--power-16-svg);
-}
-%with-power-16-mask {
-  @extend %with-mask, %power-16-svg-prop;
-  -webkit-mask-image: var(--power-16-svg);
-  mask-image: var(--power-16-svg);
-}
-
-%with-power-24-icon {
-  @extend %with-icon, %power-24-svg-prop;
-  background-image: var(--power-24-svg);
-}
-%with-power-24-mask {
-  @extend %with-mask, %power-24-svg-prop;
-  -webkit-mask-image: var(--power-24-svg);
-  mask-image: var(--power-24-svg);
-}
-
-%with-printer-16-icon {
-  @extend %with-icon, %printer-16-svg-prop;
-  background-image: var(--printer-16-svg);
-}
-%with-printer-16-mask {
-  @extend %with-mask, %printer-16-svg-prop;
-  -webkit-mask-image: var(--printer-16-svg);
-  mask-image: var(--printer-16-svg);
-}
-
-%with-printer-24-icon {
-  @extend %with-icon, %printer-24-svg-prop;
-  background-image: var(--printer-24-svg);
-}
-%with-printer-24-mask {
-  @extend %with-mask, %printer-24-svg-prop;
-  -webkit-mask-image: var(--printer-24-svg);
-  mask-image: var(--printer-24-svg);
-}
-
-%with-protocol-icon {
-  @extend %with-icon, %protocol-svg-prop;
-  background-image: var(--protocol-svg);
-}
-%with-protocol-mask {
-  @extend %with-mask, %protocol-svg-prop;
-  -webkit-mask-image: var(--protocol-svg);
-  mask-image: var(--protocol-svg);
-}
-
-%with-provider-16-icon {
-  @extend %with-icon, %provider-16-svg-prop;
-  background-image: var(--provider-16-svg);
-}
-%with-provider-16-mask {
-  @extend %with-mask, %provider-16-svg-prop;
-  -webkit-mask-image: var(--provider-16-svg);
-  mask-image: var(--provider-16-svg);
-}
-
-%with-provider-24-icon {
-  @extend %with-icon, %provider-24-svg-prop;
-  background-image: var(--provider-24-svg);
-}
-%with-provider-24-mask {
-  @extend %with-mask, %provider-24-svg-prop;
-  -webkit-mask-image: var(--provider-24-svg);
-  mask-image: var(--provider-24-svg);
-}
-
-%with-provider-icon {
-  @extend %with-icon, %provider-16-svg-prop;
-  background-image: var(--provider-16-svg);
-}
-%with-provider-mask {
-  @extend %with-mask, %provider-16-svg-prop;
-  -webkit-mask-image: var(--provider-16-svg);
-  mask-image: var(--provider-16-svg);
-}
-
-%with-public-default-icon {
-  @extend %with-icon, %globe-16-svg-prop;
-  background-image: var(--globe-16-svg);
-}
-%with-public-default-mask {
-  @extend %with-mask, %globe-16-svg-prop;
-  -webkit-mask-image: var(--globe-16-svg);
-  mask-image: var(--globe-16-svg);
-}
-
-%with-public-locked-icon {
-  @extend %with-icon, %globe-private-16-svg-prop;
-  background-image: var(--globe-private-16-svg);
-}
-%with-public-locked-mask {
-  @extend %with-mask, %globe-private-16-svg-prop;
-  -webkit-mask-image: var(--globe-private-16-svg);
-  mask-image: var(--globe-private-16-svg);
-}
-
-%with-queue-16-icon {
-  @extend %with-icon, %queue-16-svg-prop;
-  background-image: var(--queue-16-svg);
-}
-%with-queue-16-mask {
-  @extend %with-mask, %queue-16-svg-prop;
-  -webkit-mask-image: var(--queue-16-svg);
-  mask-image: var(--queue-16-svg);
-}
-
-%with-queue-24-icon {
-  @extend %with-icon, %queue-24-svg-prop;
-  background-image: var(--queue-24-svg);
-}
-%with-queue-24-mask {
-  @extend %with-mask, %queue-24-svg-prop;
-  -webkit-mask-image: var(--queue-24-svg);
-  mask-image: var(--queue-24-svg);
-}
-
-%with-queue-icon {
-  @extend %with-icon, %queue-16-svg-prop;
-  background-image: var(--queue-16-svg);
-}
-%with-queue-mask {
-  @extend %with-mask, %queue-16-svg-prop;
-  -webkit-mask-image: var(--queue-16-svg);
-  mask-image: var(--queue-16-svg);
-}
-
-%with-radio-16-icon {
-  @extend %with-icon, %radio-16-svg-prop;
-  background-image: var(--radio-16-svg);
-}
-%with-radio-16-mask {
-  @extend %with-mask, %radio-16-svg-prop;
-  -webkit-mask-image: var(--radio-16-svg);
-  mask-image: var(--radio-16-svg);
-}
-
-%with-radio-24-icon {
-  @extend %with-icon, %radio-24-svg-prop;
-  background-image: var(--radio-24-svg);
-}
-%with-radio-24-mask {
-  @extend %with-mask, %radio-24-svg-prop;
-  -webkit-mask-image: var(--radio-24-svg);
-  mask-image: var(--radio-24-svg);
-}
-
-%with-radio-button-checked-icon {
-  @extend %with-icon, %circle-dot-16-svg-prop;
-  background-image: var(--circle-dot-16-svg);
-}
-%with-radio-button-checked-mask {
-  @extend %with-mask, %circle-dot-16-svg-prop;
-  -webkit-mask-image: var(--circle-dot-16-svg);
-  mask-image: var(--circle-dot-16-svg);
-}
-
-%with-radio-button-unchecked-icon {
-  @extend %with-icon, %circle-16-svg-prop;
-  background-image: var(--circle-16-svg);
-}
-%with-radio-button-unchecked-mask {
-  @extend %with-mask, %circle-16-svg-prop;
-  -webkit-mask-image: var(--circle-16-svg);
-  mask-image: var(--circle-16-svg);
-}
-
-%with-random-16-icon {
-  @extend %with-icon, %random-16-svg-prop;
-  background-image: var(--random-16-svg);
-}
-%with-random-16-mask {
-  @extend %with-mask, %random-16-svg-prop;
-  -webkit-mask-image: var(--random-16-svg);
-  mask-image: var(--random-16-svg);
-}
-
-%with-random-24-icon {
-  @extend %with-icon, %random-24-svg-prop;
-  background-image: var(--random-24-svg);
-}
-%with-random-24-mask {
-  @extend %with-mask, %random-24-svg-prop;
-  -webkit-mask-image: var(--random-24-svg);
-  mask-image: var(--random-24-svg);
-}
-
-%with-random-icon {
-  @extend %with-icon, %random-16-svg-prop;
-  background-image: var(--random-16-svg);
-}
-%with-random-mask {
-  @extend %with-mask, %random-16-svg-prop;
-  -webkit-mask-image: var(--random-16-svg);
-  mask-image: var(--random-16-svg);
-}
-
-%with-redirect-16-icon {
-  @extend %with-icon, %redirect-16-svg-prop;
-  background-image: var(--redirect-16-svg);
-}
-%with-redirect-16-mask {
-  @extend %with-mask, %redirect-16-svg-prop;
-  -webkit-mask-image: var(--redirect-16-svg);
-  mask-image: var(--redirect-16-svg);
-}
-
-%with-redirect-24-icon {
-  @extend %with-icon, %redirect-24-svg-prop;
-  background-image: var(--redirect-24-svg);
-}
-%with-redirect-24-mask {
-  @extend %with-mask, %redirect-24-svg-prop;
-  -webkit-mask-image: var(--redirect-24-svg);
-  mask-image: var(--redirect-24-svg);
-}
-
-%with-redirect-icon {
-  @extend %with-icon, %redirect-16-svg-prop;
-  background-image: var(--redirect-16-svg);
-}
-%with-redirect-mask {
-  @extend %with-mask, %redirect-16-svg-prop;
-  -webkit-mask-image: var(--redirect-16-svg);
-  mask-image: var(--redirect-16-svg);
-}
-
-%with-refresh-alert-icon {
-  @extend %with-icon, %sync-alert-16-svg-prop;
-  background-image: var(--sync-alert-16-svg);
-}
-%with-refresh-alert-mask {
-  @extend %with-mask, %sync-alert-16-svg-prop;
-  -webkit-mask-image: var(--sync-alert-16-svg);
-  mask-image: var(--sync-alert-16-svg);
-}
-
-%with-refresh-default-icon {
-  @extend %with-icon, %sync-16-svg-prop;
-  background-image: var(--sync-16-svg);
-}
-%with-refresh-default-mask {
-  @extend %with-mask, %sync-16-svg-prop;
-  -webkit-mask-image: var(--sync-16-svg);
-  mask-image: var(--sync-16-svg);
-}
-
-%with-reload-16-icon {
-  @extend %with-icon, %reload-16-svg-prop;
-  background-image: var(--reload-16-svg);
-}
-%with-reload-16-mask {
-  @extend %with-mask, %reload-16-svg-prop;
-  -webkit-mask-image: var(--reload-16-svg);
-  mask-image: var(--reload-16-svg);
-}
-
-%with-reload-24-icon {
-  @extend %with-icon, %reload-24-svg-prop;
-  background-image: var(--reload-24-svg);
-}
-%with-reload-24-mask {
-  @extend %with-mask, %reload-24-svg-prop;
-  -webkit-mask-image: var(--reload-24-svg);
-  mask-image: var(--reload-24-svg);
-}
-
-%with-remix-icon {
-  @extend %with-icon, %shuffle-16-svg-prop;
-  background-image: var(--shuffle-16-svg);
-}
-%with-remix-mask {
-  @extend %with-mask, %shuffle-16-svg-prop;
-  -webkit-mask-image: var(--shuffle-16-svg);
-  mask-image: var(--shuffle-16-svg);
-}
-
-%with-repeat-16-icon {
-  @extend %with-icon, %repeat-16-svg-prop;
-  background-image: var(--repeat-16-svg);
-}
-%with-repeat-16-mask {
-  @extend %with-mask, %repeat-16-svg-prop;
-  -webkit-mask-image: var(--repeat-16-svg);
-  mask-image: var(--repeat-16-svg);
-}
-
-%with-repeat-24-icon {
-  @extend %with-icon, %repeat-24-svg-prop;
-  background-image: var(--repeat-24-svg);
-}
-%with-repeat-24-mask {
-  @extend %with-mask, %repeat-24-svg-prop;
-  -webkit-mask-image: var(--repeat-24-svg);
-  mask-image: var(--repeat-24-svg);
-}
-
-%with-replication-direct-16-icon {
-  @extend %with-icon, %replication-direct-16-svg-prop;
-  background-image: var(--replication-direct-16-svg);
-}
-%with-replication-direct-16-mask {
-  @extend %with-mask, %replication-direct-16-svg-prop;
-  -webkit-mask-image: var(--replication-direct-16-svg);
-  mask-image: var(--replication-direct-16-svg);
-}
-
-%with-replication-direct-24-icon {
-  @extend %with-icon, %replication-direct-24-svg-prop;
-  background-image: var(--replication-direct-24-svg);
-}
-%with-replication-direct-24-mask {
-  @extend %with-mask, %replication-direct-24-svg-prop;
-  -webkit-mask-image: var(--replication-direct-24-svg);
-  mask-image: var(--replication-direct-24-svg);
-}
-
-%with-replication-perf-16-icon {
-  @extend %with-icon, %replication-perf-16-svg-prop;
-  background-image: var(--replication-perf-16-svg);
-}
-%with-replication-perf-16-mask {
-  @extend %with-mask, %replication-perf-16-svg-prop;
-  -webkit-mask-image: var(--replication-perf-16-svg);
-  mask-image: var(--replication-perf-16-svg);
-}
-
-%with-replication-perf-24-icon {
-  @extend %with-icon, %replication-perf-24-svg-prop;
-  background-image: var(--replication-perf-24-svg);
-}
-%with-replication-perf-24-mask {
-  @extend %with-mask, %replication-perf-24-svg-prop;
-  -webkit-mask-image: var(--replication-perf-24-svg);
-  mask-image: var(--replication-perf-24-svg);
-}
-
-%with-rewind-16-icon {
-  @extend %with-icon, %rewind-16-svg-prop;
-  background-image: var(--rewind-16-svg);
-}
-%with-rewind-16-mask {
-  @extend %with-mask, %rewind-16-svg-prop;
-  -webkit-mask-image: var(--rewind-16-svg);
-  mask-image: var(--rewind-16-svg);
-}
-
-%with-rewind-24-icon {
-  @extend %with-icon, %rewind-24-svg-prop;
-  background-image: var(--rewind-24-svg);
-}
-%with-rewind-24-mask {
-  @extend %with-mask, %rewind-24-svg-prop;
-  -webkit-mask-image: var(--rewind-24-svg);
-  mask-image: var(--rewind-24-svg);
-}
-
-%with-ribbon-icon {
-  @extend %with-icon, %award-16-svg-prop;
-  background-image: var(--award-16-svg);
-}
-%with-ribbon-mask {
-  @extend %with-mask, %award-16-svg-prop;
-  -webkit-mask-image: var(--award-16-svg);
-  mask-image: var(--award-16-svg);
-}
-
-%with-rocket-16-icon {
-  @extend %with-icon, %rocket-16-svg-prop;
-  background-image: var(--rocket-16-svg);
-}
-%with-rocket-16-mask {
-  @extend %with-mask, %rocket-16-svg-prop;
-  -webkit-mask-image: var(--rocket-16-svg);
-  mask-image: var(--rocket-16-svg);
-}
-
-%with-rocket-24-icon {
-  @extend %with-icon, %rocket-24-svg-prop;
-  background-image: var(--rocket-24-svg);
-}
-%with-rocket-24-mask {
-  @extend %with-mask, %rocket-24-svg-prop;
-  -webkit-mask-image: var(--rocket-24-svg);
-  mask-image: var(--rocket-24-svg);
-}
-
-%with-rotate-ccw-16-icon {
-  @extend %with-icon, %rotate-ccw-16-svg-prop;
-  background-image: var(--rotate-ccw-16-svg);
-}
-%with-rotate-ccw-16-mask {
-  @extend %with-mask, %rotate-ccw-16-svg-prop;
-  -webkit-mask-image: var(--rotate-ccw-16-svg);
-  mask-image: var(--rotate-ccw-16-svg);
-}
-
-%with-rotate-ccw-24-icon {
-  @extend %with-icon, %rotate-ccw-24-svg-prop;
-  background-image: var(--rotate-ccw-24-svg);
-}
-%with-rotate-ccw-24-mask {
-  @extend %with-mask, %rotate-ccw-24-svg-prop;
-  -webkit-mask-image: var(--rotate-ccw-24-svg);
-  mask-image: var(--rotate-ccw-24-svg);
-}
-
-%with-rotate-cw-16-icon {
-  @extend %with-icon, %rotate-cw-16-svg-prop;
-  background-image: var(--rotate-cw-16-svg);
-}
-%with-rotate-cw-16-mask {
-  @extend %with-mask, %rotate-cw-16-svg-prop;
-  -webkit-mask-image: var(--rotate-cw-16-svg);
-  mask-image: var(--rotate-cw-16-svg);
-}
-
-%with-rotate-cw-24-icon {
-  @extend %with-icon, %rotate-cw-24-svg-prop;
-  background-image: var(--rotate-cw-24-svg);
-}
-%with-rotate-cw-24-mask {
-  @extend %with-mask, %rotate-cw-24-svg-prop;
-  -webkit-mask-image: var(--rotate-cw-24-svg);
-  mask-image: var(--rotate-cw-24-svg);
-}
-
-%with-rss-16-icon {
-  @extend %with-icon, %rss-16-svg-prop;
-  background-image: var(--rss-16-svg);
-}
-%with-rss-16-mask {
-  @extend %with-mask, %rss-16-svg-prop;
-  -webkit-mask-image: var(--rss-16-svg);
-  mask-image: var(--rss-16-svg);
-}
-
-%with-rss-24-icon {
-  @extend %with-icon, %rss-24-svg-prop;
-  background-image: var(--rss-24-svg);
-}
-%with-rss-24-mask {
-  @extend %with-mask, %rss-24-svg-prop;
-  -webkit-mask-image: var(--rss-24-svg);
-  mask-image: var(--rss-24-svg);
-}
-
-%with-run-icon {
-  @extend %with-icon, %run-svg-prop;
-  background-image: var(--run-svg);
-}
-%with-run-mask {
-  @extend %with-mask, %run-svg-prop;
-  -webkit-mask-image: var(--run-svg);
-  mask-image: var(--run-svg);
-}
-
-%with-save-16-icon {
-  @extend %with-icon, %save-16-svg-prop;
-  background-image: var(--save-16-svg);
-}
-%with-save-16-mask {
-  @extend %with-mask, %save-16-svg-prop;
-  -webkit-mask-image: var(--save-16-svg);
-  mask-image: var(--save-16-svg);
-}
-
-%with-save-24-icon {
-  @extend %with-icon, %save-24-svg-prop;
-  background-image: var(--save-24-svg);
-}
-%with-save-24-mask {
-  @extend %with-mask, %save-24-svg-prop;
-  -webkit-mask-image: var(--save-24-svg);
-  mask-image: var(--save-24-svg);
-}
-
-%with-scissors-16-icon {
-  @extend %with-icon, %scissors-16-svg-prop;
-  background-image: var(--scissors-16-svg);
-}
-%with-scissors-16-mask {
-  @extend %with-mask, %scissors-16-svg-prop;
-  -webkit-mask-image: var(--scissors-16-svg);
-  mask-image: var(--scissors-16-svg);
-}
-
-%with-scissors-24-icon {
-  @extend %with-icon, %scissors-24-svg-prop;
-  background-image: var(--scissors-24-svg);
-}
-%with-scissors-24-mask {
-  @extend %with-mask, %scissors-24-svg-prop;
-  -webkit-mask-image: var(--scissors-24-svg);
-  mask-image: var(--scissors-24-svg);
-}
-
-%with-search-16-icon {
-  @extend %with-icon, %search-16-svg-prop;
-  background-image: var(--search-16-svg);
-}
-%with-search-16-mask {
-  @extend %with-mask, %search-16-svg-prop;
-  -webkit-mask-image: var(--search-16-svg);
-  mask-image: var(--search-16-svg);
-}
-
-%with-search-24-icon {
-  @extend %with-icon, %search-24-svg-prop;
-  background-image: var(--search-24-svg);
-}
-%with-search-24-mask {
-  @extend %with-mask, %search-24-svg-prop;
-  -webkit-mask-image: var(--search-24-svg);
-  mask-image: var(--search-24-svg);
-}
-
-%with-search-color-icon {
-  @extend %with-icon, %search-color-svg-prop;
-  background-image: var(--search-color-svg);
-}
-%with-search-color-mask {
-  @extend %with-mask, %search-color-svg-prop;
-  -webkit-mask-image: var(--search-color-svg);
-  mask-image: var(--search-color-svg);
-}
-
-%with-search-icon {
-  @extend %with-icon, %search-16-svg-prop;
-  background-image: var(--search-16-svg);
-}
-%with-search-mask {
-  @extend %with-mask, %search-16-svg-prop;
-  -webkit-mask-image: var(--search-16-svg);
-  mask-image: var(--search-16-svg);
-}
-
-%with-send-16-icon {
-  @extend %with-icon, %send-16-svg-prop;
-  background-image: var(--send-16-svg);
-}
-%with-send-16-mask {
-  @extend %with-mask, %send-16-svg-prop;
-  -webkit-mask-image: var(--send-16-svg);
-  mask-image: var(--send-16-svg);
-}
-
-%with-send-24-icon {
-  @extend %with-icon, %send-24-svg-prop;
-  background-image: var(--send-24-svg);
-}
-%with-send-24-mask {
-  @extend %with-mask, %send-24-svg-prop;
-  -webkit-mask-image: var(--send-24-svg);
-  mask-image: var(--send-24-svg);
-}
-
-%with-server-16-icon {
-  @extend %with-icon, %server-16-svg-prop;
-  background-image: var(--server-16-svg);
-}
-%with-server-16-mask {
-  @extend %with-mask, %server-16-svg-prop;
-  -webkit-mask-image: var(--server-16-svg);
-  mask-image: var(--server-16-svg);
-}
-
-%with-server-24-icon {
-  @extend %with-icon, %server-24-svg-prop;
-  background-image: var(--server-24-svg);
-}
-%with-server-24-mask {
-  @extend %with-mask, %server-24-svg-prop;
-  -webkit-mask-image: var(--server-24-svg);
-  mask-image: var(--server-24-svg);
-}
-
-%with-server-cluster-16-icon {
-  @extend %with-icon, %server-cluster-16-svg-prop;
-  background-image: var(--server-cluster-16-svg);
-}
-%with-server-cluster-16-mask {
-  @extend %with-mask, %server-cluster-16-svg-prop;
-  -webkit-mask-image: var(--server-cluster-16-svg);
-  mask-image: var(--server-cluster-16-svg);
-}
-
-%with-server-cluster-24-icon {
-  @extend %with-icon, %server-cluster-24-svg-prop;
-  background-image: var(--server-cluster-24-svg);
-}
-%with-server-cluster-24-mask {
-  @extend %with-mask, %server-cluster-24-svg-prop;
-  -webkit-mask-image: var(--server-cluster-24-svg);
-  mask-image: var(--server-cluster-24-svg);
-}
-
-%with-serverless-16-icon {
-  @extend %with-icon, %serverless-16-svg-prop;
-  background-image: var(--serverless-16-svg);
-}
-%with-serverless-16-mask {
-  @extend %with-mask, %serverless-16-svg-prop;
-  -webkit-mask-image: var(--serverless-16-svg);
-  mask-image: var(--serverless-16-svg);
-}
-
-%with-serverless-24-icon {
-  @extend %with-icon, %serverless-24-svg-prop;
-  background-image: var(--serverless-24-svg);
-}
-%with-serverless-24-mask {
-  @extend %with-mask, %serverless-24-svg-prop;
-  -webkit-mask-image: var(--serverless-24-svg);
-  mask-image: var(--serverless-24-svg);
-}
-
-%with-settings-16-icon {
-  @extend %with-icon, %settings-16-svg-prop;
-  background-image: var(--settings-16-svg);
-}
-%with-settings-16-mask {
-  @extend %with-mask, %settings-16-svg-prop;
-  -webkit-mask-image: var(--settings-16-svg);
-  mask-image: var(--settings-16-svg);
-}
-
-%with-settings-24-icon {
-  @extend %with-icon, %settings-24-svg-prop;
-  background-image: var(--settings-24-svg);
-}
-%with-settings-24-mask {
-  @extend %with-mask, %settings-24-svg-prop;
-  -webkit-mask-image: var(--settings-24-svg);
-  mask-image: var(--settings-24-svg);
-}
-
-%with-settings-icon {
-  @extend %with-icon, %settings-16-svg-prop;
-  background-image: var(--settings-16-svg);
-}
-%with-settings-mask {
-  @extend %with-mask, %settings-16-svg-prop;
-  -webkit-mask-image: var(--settings-16-svg);
-  mask-image: var(--settings-16-svg);
-}
-
-%with-share-16-icon {
-  @extend %with-icon, %share-16-svg-prop;
-  background-image: var(--share-16-svg);
-}
-%with-share-16-mask {
-  @extend %with-mask, %share-16-svg-prop;
-  -webkit-mask-image: var(--share-16-svg);
-  mask-image: var(--share-16-svg);
-}
-
-%with-share-24-icon {
-  @extend %with-icon, %share-24-svg-prop;
-  background-image: var(--share-24-svg);
-}
-%with-share-24-mask {
-  @extend %with-mask, %share-24-svg-prop;
-  -webkit-mask-image: var(--share-24-svg);
-  mask-image: var(--share-24-svg);
-}
-
-%with-shield-16-icon {
-  @extend %with-icon, %shield-16-svg-prop;
-  background-image: var(--shield-16-svg);
-}
-%with-shield-16-mask {
-  @extend %with-mask, %shield-16-svg-prop;
-  -webkit-mask-image: var(--shield-16-svg);
-  mask-image: var(--shield-16-svg);
-}
-
-%with-shield-24-icon {
-  @extend %with-icon, %shield-24-svg-prop;
-  background-image: var(--shield-24-svg);
-}
-%with-shield-24-mask {
-  @extend %with-mask, %shield-24-svg-prop;
-  -webkit-mask-image: var(--shield-24-svg);
-  mask-image: var(--shield-24-svg);
-}
-
-%with-shield-alert-16-icon {
-  @extend %with-icon, %shield-alert-16-svg-prop;
-  background-image: var(--shield-alert-16-svg);
-}
-%with-shield-alert-16-mask {
-  @extend %with-mask, %shield-alert-16-svg-prop;
-  -webkit-mask-image: var(--shield-alert-16-svg);
-  mask-image: var(--shield-alert-16-svg);
-}
-
-%with-shield-alert-24-icon {
-  @extend %with-icon, %shield-alert-24-svg-prop;
-  background-image: var(--shield-alert-24-svg);
-}
-%with-shield-alert-24-mask {
-  @extend %with-mask, %shield-alert-24-svg-prop;
-  -webkit-mask-image: var(--shield-alert-24-svg);
-  mask-image: var(--shield-alert-24-svg);
-}
-
-%with-shield-check-16-icon {
-  @extend %with-icon, %shield-check-16-svg-prop;
-  background-image: var(--shield-check-16-svg);
-}
-%with-shield-check-16-mask {
-  @extend %with-mask, %shield-check-16-svg-prop;
-  -webkit-mask-image: var(--shield-check-16-svg);
-  mask-image: var(--shield-check-16-svg);
-}
-
-%with-shield-check-24-icon {
-  @extend %with-icon, %shield-check-24-svg-prop;
-  background-image: var(--shield-check-24-svg);
-}
-%with-shield-check-24-mask {
-  @extend %with-mask, %shield-check-24-svg-prop;
-  -webkit-mask-image: var(--shield-check-24-svg);
-  mask-image: var(--shield-check-24-svg);
-}
-
-%with-shield-off-16-icon {
-  @extend %with-icon, %shield-off-16-svg-prop;
-  background-image: var(--shield-off-16-svg);
-}
-%with-shield-off-16-mask {
-  @extend %with-mask, %shield-off-16-svg-prop;
-  -webkit-mask-image: var(--shield-off-16-svg);
-  mask-image: var(--shield-off-16-svg);
-}
-
-%with-shield-off-24-icon {
-  @extend %with-icon, %shield-off-24-svg-prop;
-  background-image: var(--shield-off-24-svg);
-}
-%with-shield-off-24-mask {
-  @extend %with-mask, %shield-off-24-svg-prop;
-  -webkit-mask-image: var(--shield-off-24-svg);
-  mask-image: var(--shield-off-24-svg);
-}
-
-%with-shield-x-16-icon {
-  @extend %with-icon, %shield-x-16-svg-prop;
-  background-image: var(--shield-x-16-svg);
-}
-%with-shield-x-16-mask {
-  @extend %with-mask, %shield-x-16-svg-prop;
-  -webkit-mask-image: var(--shield-x-16-svg);
-  mask-image: var(--shield-x-16-svg);
-}
-
-%with-shield-x-24-icon {
-  @extend %with-icon, %shield-x-24-svg-prop;
-  background-image: var(--shield-x-24-svg);
-}
-%with-shield-x-24-mask {
-  @extend %with-mask, %shield-x-24-svg-prop;
-  -webkit-mask-image: var(--shield-x-24-svg);
-  mask-image: var(--shield-x-24-svg);
-}
-
-%with-shopping-bag-16-icon {
-  @extend %with-icon, %shopping-bag-16-svg-prop;
-  background-image: var(--shopping-bag-16-svg);
-}
-%with-shopping-bag-16-mask {
-  @extend %with-mask, %shopping-bag-16-svg-prop;
-  -webkit-mask-image: var(--shopping-bag-16-svg);
-  mask-image: var(--shopping-bag-16-svg);
-}
-
-%with-shopping-bag-24-icon {
-  @extend %with-icon, %shopping-bag-24-svg-prop;
-  background-image: var(--shopping-bag-24-svg);
-}
-%with-shopping-bag-24-mask {
-  @extend %with-mask, %shopping-bag-24-svg-prop;
-  -webkit-mask-image: var(--shopping-bag-24-svg);
-  mask-image: var(--shopping-bag-24-svg);
-}
-
-%with-shopping-cart-16-icon {
-  @extend %with-icon, %shopping-cart-16-svg-prop;
-  background-image: var(--shopping-cart-16-svg);
-}
-%with-shopping-cart-16-mask {
-  @extend %with-mask, %shopping-cart-16-svg-prop;
-  -webkit-mask-image: var(--shopping-cart-16-svg);
-  mask-image: var(--shopping-cart-16-svg);
-}
-
-%with-shopping-cart-24-icon {
-  @extend %with-icon, %shopping-cart-24-svg-prop;
-  background-image: var(--shopping-cart-24-svg);
-}
-%with-shopping-cart-24-mask {
-  @extend %with-mask, %shopping-cart-24-svg-prop;
-  -webkit-mask-image: var(--shopping-cart-24-svg);
-  mask-image: var(--shopping-cart-24-svg);
-}
-
-%with-shuffle-16-icon {
-  @extend %with-icon, %shuffle-16-svg-prop;
-  background-image: var(--shuffle-16-svg);
-}
-%with-shuffle-16-mask {
-  @extend %with-mask, %shuffle-16-svg-prop;
-  -webkit-mask-image: var(--shuffle-16-svg);
-  mask-image: var(--shuffle-16-svg);
-}
-
-%with-shuffle-24-icon {
-  @extend %with-icon, %shuffle-24-svg-prop;
-  background-image: var(--shuffle-24-svg);
-}
-%with-shuffle-24-mask {
-  @extend %with-mask, %shuffle-24-svg-prop;
-  -webkit-mask-image: var(--shuffle-24-svg);
-  mask-image: var(--shuffle-24-svg);
-}
-
-%with-sidebar-16-icon {
-  @extend %with-icon, %sidebar-16-svg-prop;
-  background-image: var(--sidebar-16-svg);
-}
-%with-sidebar-16-mask {
-  @extend %with-mask, %sidebar-16-svg-prop;
-  -webkit-mask-image: var(--sidebar-16-svg);
-  mask-image: var(--sidebar-16-svg);
-}
-
-%with-sidebar-24-icon {
-  @extend %with-icon, %sidebar-24-svg-prop;
-  background-image: var(--sidebar-24-svg);
-}
-%with-sidebar-24-mask {
-  @extend %with-mask, %sidebar-24-svg-prop;
-  -webkit-mask-image: var(--sidebar-24-svg);
-  mask-image: var(--sidebar-24-svg);
-}
-
-%with-sidebar-hide-16-icon {
-  @extend %with-icon, %sidebar-hide-16-svg-prop;
-  background-image: var(--sidebar-hide-16-svg);
-}
-%with-sidebar-hide-16-mask {
-  @extend %with-mask, %sidebar-hide-16-svg-prop;
-  -webkit-mask-image: var(--sidebar-hide-16-svg);
-  mask-image: var(--sidebar-hide-16-svg);
-}
-
-%with-sidebar-hide-24-icon {
-  @extend %with-icon, %sidebar-hide-24-svg-prop;
-  background-image: var(--sidebar-hide-24-svg);
-}
-%with-sidebar-hide-24-mask {
-  @extend %with-mask, %sidebar-hide-24-svg-prop;
-  -webkit-mask-image: var(--sidebar-hide-24-svg);
-  mask-image: var(--sidebar-hide-24-svg);
-}
-
-%with-sidebar-show-16-icon {
-  @extend %with-icon, %sidebar-show-16-svg-prop;
-  background-image: var(--sidebar-show-16-svg);
-}
-%with-sidebar-show-16-mask {
-  @extend %with-mask, %sidebar-show-16-svg-prop;
-  -webkit-mask-image: var(--sidebar-show-16-svg);
-  mask-image: var(--sidebar-show-16-svg);
-}
-
-%with-sidebar-show-24-icon {
-  @extend %with-icon, %sidebar-show-24-svg-prop;
-  background-image: var(--sidebar-show-24-svg);
-}
-%with-sidebar-show-24-mask {
-  @extend %with-mask, %sidebar-show-24-svg-prop;
-  -webkit-mask-image: var(--sidebar-show-24-svg);
-  mask-image: var(--sidebar-show-24-svg);
-}
-
-%with-sign-in-16-icon {
-  @extend %with-icon, %sign-in-16-svg-prop;
-  background-image: var(--sign-in-16-svg);
-}
-%with-sign-in-16-mask {
-  @extend %with-mask, %sign-in-16-svg-prop;
-  -webkit-mask-image: var(--sign-in-16-svg);
-  mask-image: var(--sign-in-16-svg);
-}
-
-%with-sign-in-24-icon {
-  @extend %with-icon, %sign-in-24-svg-prop;
-  background-image: var(--sign-in-24-svg);
-}
-%with-sign-in-24-mask {
-  @extend %with-mask, %sign-in-24-svg-prop;
-  -webkit-mask-image: var(--sign-in-24-svg);
-  mask-image: var(--sign-in-24-svg);
-}
-
-%with-sign-out-16-icon {
-  @extend %with-icon, %sign-out-16-svg-prop;
-  background-image: var(--sign-out-16-svg);
-}
-%with-sign-out-16-mask {
-  @extend %with-mask, %sign-out-16-svg-prop;
-  -webkit-mask-image: var(--sign-out-16-svg);
-  mask-image: var(--sign-out-16-svg);
-}
-
-%with-sign-out-24-icon {
-  @extend %with-icon, %sign-out-24-svg-prop;
-  background-image: var(--sign-out-24-svg);
-}
-%with-sign-out-24-mask {
-  @extend %with-mask, %sign-out-24-svg-prop;
-  -webkit-mask-image: var(--sign-out-24-svg);
-  mask-image: var(--sign-out-24-svg);
-}
-
-%with-skip-16-icon {
-  @extend %with-icon, %skip-16-svg-prop;
-  background-image: var(--skip-16-svg);
-}
-%with-skip-16-mask {
-  @extend %with-mask, %skip-16-svg-prop;
-  -webkit-mask-image: var(--skip-16-svg);
-  mask-image: var(--skip-16-svg);
-}
-
-%with-skip-24-icon {
-  @extend %with-icon, %skip-24-svg-prop;
-  background-image: var(--skip-24-svg);
-}
-%with-skip-24-mask {
-  @extend %with-mask, %skip-24-svg-prop;
-  -webkit-mask-image: var(--skip-24-svg);
-  mask-image: var(--skip-24-svg);
-}
-
-%with-skip-back-16-icon {
-  @extend %with-icon, %skip-back-16-svg-prop;
-  background-image: var(--skip-back-16-svg);
-}
-%with-skip-back-16-mask {
-  @extend %with-mask, %skip-back-16-svg-prop;
-  -webkit-mask-image: var(--skip-back-16-svg);
-  mask-image: var(--skip-back-16-svg);
-}
-
-%with-skip-back-24-icon {
-  @extend %with-icon, %skip-back-24-svg-prop;
-  background-image: var(--skip-back-24-svg);
-}
-%with-skip-back-24-mask {
-  @extend %with-mask, %skip-back-24-svg-prop;
-  -webkit-mask-image: var(--skip-back-24-svg);
-  mask-image: var(--skip-back-24-svg);
-}
-
-%with-skip-forward-16-icon {
-  @extend %with-icon, %skip-forward-16-svg-prop;
-  background-image: var(--skip-forward-16-svg);
-}
-%with-skip-forward-16-mask {
-  @extend %with-mask, %skip-forward-16-svg-prop;
-  -webkit-mask-image: var(--skip-forward-16-svg);
-  mask-image: var(--skip-forward-16-svg);
-}
-
-%with-skip-forward-24-icon {
-  @extend %with-icon, %skip-forward-24-svg-prop;
-  background-image: var(--skip-forward-24-svg);
-}
-%with-skip-forward-24-mask {
-  @extend %with-mask, %skip-forward-24-svg-prop;
-  -webkit-mask-image: var(--skip-forward-24-svg);
-  mask-image: var(--skip-forward-24-svg);
-}
-
-%with-slack-16-icon {
-  @extend %with-icon, %slack-16-svg-prop;
-  background-image: var(--slack-16-svg);
-}
-%with-slack-16-mask {
-  @extend %with-mask, %slack-16-svg-prop;
-  -webkit-mask-image: var(--slack-16-svg);
-  mask-image: var(--slack-16-svg);
-}
-
-%with-slack-24-icon {
-  @extend %with-icon, %slack-24-svg-prop;
-  background-image: var(--slack-24-svg);
-}
-%with-slack-24-mask {
-  @extend %with-mask, %slack-24-svg-prop;
-  -webkit-mask-image: var(--slack-24-svg);
-  mask-image: var(--slack-24-svg);
-}
-
-%with-slack-color-16-icon {
-  @extend %with-icon, %slack-color-16-svg-prop;
-  background-image: var(--slack-color-16-svg);
-}
-%with-slack-color-16-mask {
-  @extend %with-mask, %slack-color-16-svg-prop;
-  -webkit-mask-image: var(--slack-color-16-svg);
-  mask-image: var(--slack-color-16-svg);
-}
-
-%with-slack-color-24-icon {
-  @extend %with-icon, %slack-color-24-svg-prop;
-  background-image: var(--slack-color-24-svg);
-}
-%with-slack-color-24-mask {
-  @extend %with-mask, %slack-color-24-svg-prop;
-  -webkit-mask-image: var(--slack-color-24-svg);
-  mask-image: var(--slack-color-24-svg);
-}
-
-%with-slash-16-icon {
-  @extend %with-icon, %slash-16-svg-prop;
-  background-image: var(--slash-16-svg);
-}
-%with-slash-16-mask {
-  @extend %with-mask, %slash-16-svg-prop;
-  -webkit-mask-image: var(--slash-16-svg);
-  mask-image: var(--slash-16-svg);
-}
-
-%with-slash-24-icon {
-  @extend %with-icon, %slash-24-svg-prop;
-  background-image: var(--slash-24-svg);
-}
-%with-slash-24-mask {
-  @extend %with-mask, %slash-24-svg-prop;
-  -webkit-mask-image: var(--slash-24-svg);
-  mask-image: var(--slash-24-svg);
-}
-
-%with-slash-square-16-icon {
-  @extend %with-icon, %slash-square-16-svg-prop;
-  background-image: var(--slash-square-16-svg);
-}
-%with-slash-square-16-mask {
-  @extend %with-mask, %slash-square-16-svg-prop;
-  -webkit-mask-image: var(--slash-square-16-svg);
-  mask-image: var(--slash-square-16-svg);
-}
-
-%with-slash-square-24-icon {
-  @extend %with-icon, %slash-square-24-svg-prop;
-  background-image: var(--slash-square-24-svg);
-}
-%with-slash-square-24-mask {
-  @extend %with-mask, %slash-square-24-svg-prop;
-  -webkit-mask-image: var(--slash-square-24-svg);
-  mask-image: var(--slash-square-24-svg);
-}
-
-%with-sliders-16-icon {
-  @extend %with-icon, %sliders-16-svg-prop;
-  background-image: var(--sliders-16-svg);
-}
-%with-sliders-16-mask {
-  @extend %with-mask, %sliders-16-svg-prop;
-  -webkit-mask-image: var(--sliders-16-svg);
-  mask-image: var(--sliders-16-svg);
-}
-
-%with-sliders-24-icon {
-  @extend %with-icon, %sliders-24-svg-prop;
-  background-image: var(--sliders-24-svg);
-}
-%with-sliders-24-mask {
-  @extend %with-mask, %sliders-24-svg-prop;
-  -webkit-mask-image: var(--sliders-24-svg);
-  mask-image: var(--sliders-24-svg);
-}
-
-%with-smartphone-16-icon {
-  @extend %with-icon, %smartphone-16-svg-prop;
-  background-image: var(--smartphone-16-svg);
-}
-%with-smartphone-16-mask {
-  @extend %with-mask, %smartphone-16-svg-prop;
-  -webkit-mask-image: var(--smartphone-16-svg);
-  mask-image: var(--smartphone-16-svg);
-}
-
-%with-smartphone-24-icon {
-  @extend %with-icon, %smartphone-24-svg-prop;
-  background-image: var(--smartphone-24-svg);
-}
-%with-smartphone-24-mask {
-  @extend %with-mask, %smartphone-24-svg-prop;
-  -webkit-mask-image: var(--smartphone-24-svg);
-  mask-image: var(--smartphone-24-svg);
-}
-
-%with-smile-16-icon {
-  @extend %with-icon, %smile-16-svg-prop;
-  background-image: var(--smile-16-svg);
-}
-%with-smile-16-mask {
-  @extend %with-mask, %smile-16-svg-prop;
-  -webkit-mask-image: var(--smile-16-svg);
-  mask-image: var(--smile-16-svg);
-}
-
-%with-smile-24-icon {
-  @extend %with-icon, %smile-24-svg-prop;
-  background-image: var(--smile-24-svg);
-}
-%with-smile-24-mask {
-  @extend %with-mask, %smile-24-svg-prop;
-  -webkit-mask-image: var(--smile-24-svg);
-  mask-image: var(--smile-24-svg);
-}
-
-%with-socket-16-icon {
-  @extend %with-icon, %socket-16-svg-prop;
-  background-image: var(--socket-16-svg);
-}
-%with-socket-16-mask {
-  @extend %with-mask, %socket-16-svg-prop;
-  -webkit-mask-image: var(--socket-16-svg);
-  mask-image: var(--socket-16-svg);
-}
-
-%with-socket-24-icon {
-  @extend %with-icon, %socket-24-svg-prop;
-  background-image: var(--socket-24-svg);
-}
-%with-socket-24-mask {
-  @extend %with-mask, %socket-24-svg-prop;
-  -webkit-mask-image: var(--socket-24-svg);
-  mask-image: var(--socket-24-svg);
-}
-
-%with-socket-icon {
-  @extend %with-icon, %socket-svg-prop;
-  background-image: var(--socket-svg);
-}
-%with-socket-mask {
-  @extend %with-mask, %socket-svg-prop;
-  -webkit-mask-image: var(--socket-svg);
-  mask-image: var(--socket-svg);
-}
-
-%with-sort-asc-16-icon {
-  @extend %with-icon, %sort-asc-16-svg-prop;
-  background-image: var(--sort-asc-16-svg);
-}
-%with-sort-asc-16-mask {
-  @extend %with-mask, %sort-asc-16-svg-prop;
-  -webkit-mask-image: var(--sort-asc-16-svg);
-  mask-image: var(--sort-asc-16-svg);
-}
-
-%with-sort-asc-24-icon {
-  @extend %with-icon, %sort-asc-24-svg-prop;
-  background-image: var(--sort-asc-24-svg);
-}
-%with-sort-asc-24-mask {
-  @extend %with-mask, %sort-asc-24-svg-prop;
-  -webkit-mask-image: var(--sort-asc-24-svg);
-  mask-image: var(--sort-asc-24-svg);
-}
-
-%with-sort-desc-16-icon {
-  @extend %with-icon, %sort-desc-16-svg-prop;
-  background-image: var(--sort-desc-16-svg);
-}
-%with-sort-desc-16-mask {
-  @extend %with-mask, %sort-desc-16-svg-prop;
-  -webkit-mask-image: var(--sort-desc-16-svg);
-  mask-image: var(--sort-desc-16-svg);
-}
-
-%with-sort-desc-24-icon {
-  @extend %with-icon, %sort-desc-24-svg-prop;
-  background-image: var(--sort-desc-24-svg);
-}
-%with-sort-desc-24-mask {
-  @extend %with-mask, %sort-desc-24-svg-prop;
-  -webkit-mask-image: var(--sort-desc-24-svg);
-  mask-image: var(--sort-desc-24-svg);
-}
-
-%with-sort-icon {
-  @extend %with-icon, %sort-desc-16-svg-prop;
-  background-image: var(--sort-desc-16-svg);
-}
-%with-sort-mask {
-  @extend %with-mask, %sort-desc-16-svg-prop;
-  -webkit-mask-image: var(--sort-desc-16-svg);
-  mask-image: var(--sort-desc-16-svg);
-}
-
-%with-source-file-icon {
-  @extend %with-icon, %file-source-16-svg-prop;
-  background-image: var(--file-source-16-svg);
-}
-%with-source-file-mask {
-  @extend %with-mask, %file-source-16-svg-prop;
-  -webkit-mask-image: var(--file-source-16-svg);
-  mask-image: var(--file-source-16-svg);
-}
-
-%with-speaker-16-icon {
-  @extend %with-icon, %speaker-16-svg-prop;
-  background-image: var(--speaker-16-svg);
-}
-%with-speaker-16-mask {
-  @extend %with-mask, %speaker-16-svg-prop;
-  -webkit-mask-image: var(--speaker-16-svg);
-  mask-image: var(--speaker-16-svg);
-}
-
-%with-speaker-24-icon {
-  @extend %with-icon, %speaker-24-svg-prop;
-  background-image: var(--speaker-24-svg);
-}
-%with-speaker-24-mask {
-  @extend %with-mask, %speaker-24-svg-prop;
-  -webkit-mask-image: var(--speaker-24-svg);
-  mask-image: var(--speaker-24-svg);
-}
-
-%with-square-16-icon {
-  @extend %with-icon, %square-16-svg-prop;
-  background-image: var(--square-16-svg);
-}
-%with-square-16-mask {
-  @extend %with-mask, %square-16-svg-prop;
-  -webkit-mask-image: var(--square-16-svg);
-  mask-image: var(--square-16-svg);
-}
-
-%with-square-24-icon {
-  @extend %with-icon, %square-24-svg-prop;
-  background-image: var(--square-24-svg);
-}
-%with-square-24-mask {
-  @extend %with-mask, %square-24-svg-prop;
-  -webkit-mask-image: var(--square-24-svg);
-  mask-image: var(--square-24-svg);
-}
-
-%with-square-fill-16-icon {
-  @extend %with-icon, %square-fill-16-svg-prop;
-  background-image: var(--square-fill-16-svg);
-}
-%with-square-fill-16-mask {
-  @extend %with-mask, %square-fill-16-svg-prop;
-  -webkit-mask-image: var(--square-fill-16-svg);
-  mask-image: var(--square-fill-16-svg);
-}
-
-%with-square-fill-24-icon {
-  @extend %with-icon, %square-fill-24-svg-prop;
-  background-image: var(--square-fill-24-svg);
-}
-%with-square-fill-24-mask {
-  @extend %with-mask, %square-fill-24-svg-prop;
-  -webkit-mask-image: var(--square-fill-24-svg);
-  mask-image: var(--square-fill-24-svg);
-}
-
-%with-star-16-icon {
-  @extend %with-icon, %star-16-svg-prop;
-  background-image: var(--star-16-svg);
-}
-%with-star-16-mask {
-  @extend %with-mask, %star-16-svg-prop;
-  -webkit-mask-image: var(--star-16-svg);
-  mask-image: var(--star-16-svg);
-}
-
-%with-star-24-icon {
-  @extend %with-icon, %star-24-svg-prop;
-  background-image: var(--star-24-svg);
-}
-%with-star-24-mask {
-  @extend %with-mask, %star-24-svg-prop;
-  -webkit-mask-image: var(--star-24-svg);
-  mask-image: var(--star-24-svg);
-}
-
-%with-star-circle-16-icon {
-  @extend %with-icon, %star-circle-16-svg-prop;
-  background-image: var(--star-circle-16-svg);
-}
-%with-star-circle-16-mask {
-  @extend %with-mask, %star-circle-16-svg-prop;
-  -webkit-mask-image: var(--star-circle-16-svg);
-  mask-image: var(--star-circle-16-svg);
-}
-
-%with-star-circle-24-icon {
-  @extend %with-icon, %star-circle-24-svg-prop;
-  background-image: var(--star-circle-24-svg);
-}
-%with-star-circle-24-mask {
-  @extend %with-mask, %star-circle-24-svg-prop;
-  -webkit-mask-image: var(--star-circle-24-svg);
-  mask-image: var(--star-circle-24-svg);
-}
-
-%with-star-fill-16-icon {
-  @extend %with-icon, %star-fill-16-svg-prop;
-  background-image: var(--star-fill-16-svg);
-}
-%with-star-fill-16-mask {
-  @extend %with-mask, %star-fill-16-svg-prop;
-  -webkit-mask-image: var(--star-fill-16-svg);
-  mask-image: var(--star-fill-16-svg);
-}
-
-%with-star-fill-24-icon {
-  @extend %with-icon, %star-fill-24-svg-prop;
-  background-image: var(--star-fill-24-svg);
-}
-%with-star-fill-24-mask {
-  @extend %with-mask, %star-fill-24-svg-prop;
-  -webkit-mask-image: var(--star-fill-24-svg);
-  mask-image: var(--star-fill-24-svg);
-}
-
-%with-star-fill-icon {
-  @extend %with-icon, %star-fill-16-svg-prop;
-  background-image: var(--star-fill-16-svg);
-}
-%with-star-fill-mask {
-  @extend %with-mask, %star-fill-16-svg-prop;
-  -webkit-mask-image: var(--star-fill-16-svg);
-  mask-image: var(--star-fill-16-svg);
-}
-
-%with-star-off-16-icon {
-  @extend %with-icon, %star-off-16-svg-prop;
-  background-image: var(--star-off-16-svg);
-}
-%with-star-off-16-mask {
-  @extend %with-mask, %star-off-16-svg-prop;
-  -webkit-mask-image: var(--star-off-16-svg);
-  mask-image: var(--star-off-16-svg);
-}
-
-%with-star-off-24-icon {
-  @extend %with-icon, %star-off-24-svg-prop;
-  background-image: var(--star-off-24-svg);
-}
-%with-star-off-24-mask {
-  @extend %with-mask, %star-off-24-svg-prop;
-  -webkit-mask-image: var(--star-off-24-svg);
-  mask-image: var(--star-off-24-svg);
-}
-
-%with-star-outline-icon {
-  @extend %with-icon, %star-16-svg-prop;
-  background-image: var(--star-16-svg);
-}
-%with-star-outline-mask {
-  @extend %with-mask, %star-16-svg-prop;
-  -webkit-mask-image: var(--star-16-svg);
-  mask-image: var(--star-16-svg);
-}
-
-%with-stop-circle-16-icon {
-  @extend %with-icon, %stop-circle-16-svg-prop;
-  background-image: var(--stop-circle-16-svg);
-}
-%with-stop-circle-16-mask {
-  @extend %with-mask, %stop-circle-16-svg-prop;
-  -webkit-mask-image: var(--stop-circle-16-svg);
-  mask-image: var(--stop-circle-16-svg);
-}
-
-%with-stop-circle-24-icon {
-  @extend %with-icon, %stop-circle-24-svg-prop;
-  background-image: var(--stop-circle-24-svg);
-}
-%with-stop-circle-24-mask {
-  @extend %with-mask, %stop-circle-24-svg-prop;
-  -webkit-mask-image: var(--stop-circle-24-svg);
-  mask-image: var(--stop-circle-24-svg);
-}
-
-%with-sub-left-icon {
-  @extend %with-icon, %corner-down-left-16-svg-prop;
-  background-image: var(--corner-down-left-16-svg);
-}
-%with-sub-left-mask {
-  @extend %with-mask, %corner-down-left-16-svg-prop;
-  -webkit-mask-image: var(--corner-down-left-16-svg);
-  mask-image: var(--corner-down-left-16-svg);
-}
-
-%with-sub-right-icon {
-  @extend %with-icon, %corner-down-right-16-svg-prop;
-  background-image: var(--corner-down-right-16-svg);
-}
-%with-sub-right-mask {
-  @extend %with-mask, %corner-down-right-16-svg-prop;
-  -webkit-mask-image: var(--corner-down-right-16-svg);
-  mask-image: var(--corner-down-right-16-svg);
-}
-
-%with-sun-16-icon {
-  @extend %with-icon, %sun-16-svg-prop;
-  background-image: var(--sun-16-svg);
-}
-%with-sun-16-mask {
-  @extend %with-mask, %sun-16-svg-prop;
-  -webkit-mask-image: var(--sun-16-svg);
-  mask-image: var(--sun-16-svg);
-}
-
-%with-sun-24-icon {
-  @extend %with-icon, %sun-24-svg-prop;
-  background-image: var(--sun-24-svg);
-}
-%with-sun-24-mask {
-  @extend %with-mask, %sun-24-svg-prop;
-  -webkit-mask-image: var(--sun-24-svg);
-  mask-image: var(--sun-24-svg);
-}
-
-%with-support-16-icon {
-  @extend %with-icon, %support-16-svg-prop;
-  background-image: var(--support-16-svg);
-}
-%with-support-16-mask {
-  @extend %with-mask, %support-16-svg-prop;
-  -webkit-mask-image: var(--support-16-svg);
-  mask-image: var(--support-16-svg);
-}
-
-%with-support-24-icon {
-  @extend %with-icon, %support-24-svg-prop;
-  background-image: var(--support-24-svg);
-}
-%with-support-24-mask {
-  @extend %with-mask, %support-24-svg-prop;
-  -webkit-mask-image: var(--support-24-svg);
-  mask-image: var(--support-24-svg);
-}
-
-%with-support-icon {
-  @extend %with-icon, %support-16-svg-prop;
-  background-image: var(--support-16-svg);
-}
-%with-support-mask {
-  @extend %with-mask, %support-16-svg-prop;
-  -webkit-mask-image: var(--support-16-svg);
-  mask-image: var(--support-16-svg);
-}
-
-%with-swap-horizontal-16-icon {
-  @extend %with-icon, %swap-horizontal-16-svg-prop;
-  background-image: var(--swap-horizontal-16-svg);
-}
-%with-swap-horizontal-16-mask {
-  @extend %with-mask, %swap-horizontal-16-svg-prop;
-  -webkit-mask-image: var(--swap-horizontal-16-svg);
-  mask-image: var(--swap-horizontal-16-svg);
-}
-
-%with-swap-horizontal-24-icon {
-  @extend %with-icon, %swap-horizontal-24-svg-prop;
-  background-image: var(--swap-horizontal-24-svg);
-}
-%with-swap-horizontal-24-mask {
-  @extend %with-mask, %swap-horizontal-24-svg-prop;
-  -webkit-mask-image: var(--swap-horizontal-24-svg);
-  mask-image: var(--swap-horizontal-24-svg);
-}
-
-%with-swap-horizontal-icon {
-  @extend %with-icon, %swap-horizontal-16-svg-prop;
-  background-image: var(--swap-horizontal-16-svg);
-}
-%with-swap-horizontal-mask {
-  @extend %with-mask, %swap-horizontal-16-svg-prop;
-  -webkit-mask-image: var(--swap-horizontal-16-svg);
-  mask-image: var(--swap-horizontal-16-svg);
-}
-
-%with-swap-vertical-16-icon {
-  @extend %with-icon, %swap-vertical-16-svg-prop;
-  background-image: var(--swap-vertical-16-svg);
-}
-%with-swap-vertical-16-mask {
-  @extend %with-mask, %swap-vertical-16-svg-prop;
-  -webkit-mask-image: var(--swap-vertical-16-svg);
-  mask-image: var(--swap-vertical-16-svg);
-}
-
-%with-swap-vertical-24-icon {
-  @extend %with-icon, %swap-vertical-24-svg-prop;
-  background-image: var(--swap-vertical-24-svg);
-}
-%with-swap-vertical-24-mask {
-  @extend %with-mask, %swap-vertical-24-svg-prop;
-  -webkit-mask-image: var(--swap-vertical-24-svg);
-  mask-image: var(--swap-vertical-24-svg);
-}
-
-%with-swap-vertical-icon {
-  @extend %with-icon, %swap-vertical-16-svg-prop;
-  background-image: var(--swap-vertical-16-svg);
-}
-%with-swap-vertical-mask {
-  @extend %with-mask, %swap-vertical-16-svg-prop;
-  -webkit-mask-image: var(--swap-vertical-16-svg);
-  mask-image: var(--swap-vertical-16-svg);
-}
-
-%with-switcher-16-icon {
-  @extend %with-icon, %switcher-16-svg-prop;
-  background-image: var(--switcher-16-svg);
-}
-%with-switcher-16-mask {
-  @extend %with-mask, %switcher-16-svg-prop;
-  -webkit-mask-image: var(--switcher-16-svg);
-  mask-image: var(--switcher-16-svg);
-}
-
-%with-switcher-24-icon {
-  @extend %with-icon, %switcher-24-svg-prop;
-  background-image: var(--switcher-24-svg);
-}
-%with-switcher-24-mask {
-  @extend %with-mask, %switcher-24-svg-prop;
-  -webkit-mask-image: var(--switcher-24-svg);
-  mask-image: var(--switcher-24-svg);
-}
-
-%with-sync-16-icon {
-  @extend %with-icon, %sync-16-svg-prop;
-  background-image: var(--sync-16-svg);
-}
-%with-sync-16-mask {
-  @extend %with-mask, %sync-16-svg-prop;
-  -webkit-mask-image: var(--sync-16-svg);
-  mask-image: var(--sync-16-svg);
-}
-
-%with-sync-24-icon {
-  @extend %with-icon, %sync-24-svg-prop;
-  background-image: var(--sync-24-svg);
-}
-%with-sync-24-mask {
-  @extend %with-mask, %sync-24-svg-prop;
-  -webkit-mask-image: var(--sync-24-svg);
-  mask-image: var(--sync-24-svg);
-}
-
-%with-sync-alert-16-icon {
-  @extend %with-icon, %sync-alert-16-svg-prop;
-  background-image: var(--sync-alert-16-svg);
-}
-%with-sync-alert-16-mask {
-  @extend %with-mask, %sync-alert-16-svg-prop;
-  -webkit-mask-image: var(--sync-alert-16-svg);
-  mask-image: var(--sync-alert-16-svg);
-}
-
-%with-sync-alert-24-icon {
-  @extend %with-icon, %sync-alert-24-svg-prop;
-  background-image: var(--sync-alert-24-svg);
-}
-%with-sync-alert-24-mask {
-  @extend %with-mask, %sync-alert-24-svg-prop;
-  -webkit-mask-image: var(--sync-alert-24-svg);
-  mask-image: var(--sync-alert-24-svg);
-}
-
-%with-sync-reverse-16-icon {
-  @extend %with-icon, %sync-reverse-16-svg-prop;
-  background-image: var(--sync-reverse-16-svg);
-}
-%with-sync-reverse-16-mask {
-  @extend %with-mask, %sync-reverse-16-svg-prop;
-  -webkit-mask-image: var(--sync-reverse-16-svg);
-  mask-image: var(--sync-reverse-16-svg);
-}
-
-%with-sync-reverse-24-icon {
-  @extend %with-icon, %sync-reverse-24-svg-prop;
-  background-image: var(--sync-reverse-24-svg);
-}
-%with-sync-reverse-24-mask {
-  @extend %with-mask, %sync-reverse-24-svg-prop;
-  -webkit-mask-image: var(--sync-reverse-24-svg);
-  mask-image: var(--sync-reverse-24-svg);
-}
-
-%with-tablet-16-icon {
-  @extend %with-icon, %tablet-16-svg-prop;
-  background-image: var(--tablet-16-svg);
-}
-%with-tablet-16-mask {
-  @extend %with-mask, %tablet-16-svg-prop;
-  -webkit-mask-image: var(--tablet-16-svg);
-  mask-image: var(--tablet-16-svg);
-}
-
-%with-tablet-24-icon {
-  @extend %with-icon, %tablet-24-svg-prop;
-  background-image: var(--tablet-24-svg);
-}
-%with-tablet-24-mask {
-  @extend %with-mask, %tablet-24-svg-prop;
-  -webkit-mask-image: var(--tablet-24-svg);
-  mask-image: var(--tablet-24-svg);
-}
-
-%with-tag-16-icon {
-  @extend %with-icon, %tag-16-svg-prop;
-  background-image: var(--tag-16-svg);
-}
-%with-tag-16-mask {
-  @extend %with-mask, %tag-16-svg-prop;
-  -webkit-mask-image: var(--tag-16-svg);
-  mask-image: var(--tag-16-svg);
-}
-
-%with-tag-24-icon {
-  @extend %with-icon, %tag-24-svg-prop;
-  background-image: var(--tag-24-svg);
-}
-%with-tag-24-mask {
-  @extend %with-mask, %tag-24-svg-prop;
-  -webkit-mask-image: var(--tag-24-svg);
-  mask-image: var(--tag-24-svg);
-}
-
-%with-tag-icon {
-  @extend %with-icon, %tag-16-svg-prop;
-  background-image: var(--tag-16-svg);
-}
-%with-tag-mask {
-  @extend %with-mask, %tag-16-svg-prop;
-  -webkit-mask-image: var(--tag-16-svg);
-  mask-image: var(--tag-16-svg);
-}
-
-%with-target-16-icon {
-  @extend %with-icon, %target-16-svg-prop;
-  background-image: var(--target-16-svg);
-}
-%with-target-16-mask {
-  @extend %with-mask, %target-16-svg-prop;
-  -webkit-mask-image: var(--target-16-svg);
-  mask-image: var(--target-16-svg);
-}
-
-%with-target-24-icon {
-  @extend %with-icon, %target-24-svg-prop;
-  background-image: var(--target-24-svg);
-}
-%with-target-24-mask {
-  @extend %with-mask, %target-24-svg-prop;
-  -webkit-mask-image: var(--target-24-svg);
-  mask-image: var(--target-24-svg);
-}
-
-%with-terminal-16-icon {
-  @extend %with-icon, %terminal-16-svg-prop;
-  background-image: var(--terminal-16-svg);
-}
-%with-terminal-16-mask {
-  @extend %with-mask, %terminal-16-svg-prop;
-  -webkit-mask-image: var(--terminal-16-svg);
-  mask-image: var(--terminal-16-svg);
-}
-
-%with-terminal-24-icon {
-  @extend %with-icon, %terminal-24-svg-prop;
-  background-image: var(--terminal-24-svg);
-}
-%with-terminal-24-mask {
-  @extend %with-mask, %terminal-24-svg-prop;
-  -webkit-mask-image: var(--terminal-24-svg);
-  mask-image: var(--terminal-24-svg);
-}
-
-%with-terminal-screen-16-icon {
-  @extend %with-icon, %terminal-screen-16-svg-prop;
-  background-image: var(--terminal-screen-16-svg);
-}
-%with-terminal-screen-16-mask {
-  @extend %with-mask, %terminal-screen-16-svg-prop;
-  -webkit-mask-image: var(--terminal-screen-16-svg);
-  mask-image: var(--terminal-screen-16-svg);
-}
-
-%with-terminal-screen-24-icon {
-  @extend %with-icon, %terminal-screen-24-svg-prop;
-  background-image: var(--terminal-screen-24-svg);
-}
-%with-terminal-screen-24-mask {
-  @extend %with-mask, %terminal-screen-24-svg-prop;
-  -webkit-mask-image: var(--terminal-screen-24-svg);
-  mask-image: var(--terminal-screen-24-svg);
-}
-
-%with-terraform-16-icon {
-  @extend %with-icon, %terraform-16-svg-prop;
-  background-image: var(--terraform-16-svg);
-}
-%with-terraform-16-mask {
-  @extend %with-mask, %terraform-16-svg-prop;
-  -webkit-mask-image: var(--terraform-16-svg);
-  mask-image: var(--terraform-16-svg);
-}
-
-%with-terraform-24-icon {
-  @extend %with-icon, %terraform-24-svg-prop;
-  background-image: var(--terraform-24-svg);
-}
-%with-terraform-24-mask {
-  @extend %with-mask, %terraform-24-svg-prop;
-  -webkit-mask-image: var(--terraform-24-svg);
-  mask-image: var(--terraform-24-svg);
-}
-
-%with-terraform-color-16-icon {
-  @extend %with-icon, %terraform-color-16-svg-prop;
-  background-image: var(--terraform-color-16-svg);
-}
-%with-terraform-color-16-mask {
-  @extend %with-mask, %terraform-color-16-svg-prop;
-  -webkit-mask-image: var(--terraform-color-16-svg);
-  mask-image: var(--terraform-color-16-svg);
-}
-
-%with-terraform-color-24-icon {
-  @extend %with-icon, %terraform-color-24-svg-prop;
-  background-image: var(--terraform-color-24-svg);
-}
-%with-terraform-color-24-mask {
-  @extend %with-mask, %terraform-color-24-svg-prop;
-  -webkit-mask-image: var(--terraform-color-24-svg);
-  mask-image: var(--terraform-color-24-svg);
-}
-
-%with-thumbs-down-16-icon {
-  @extend %with-icon, %thumbs-down-16-svg-prop;
-  background-image: var(--thumbs-down-16-svg);
-}
-%with-thumbs-down-16-mask {
-  @extend %with-mask, %thumbs-down-16-svg-prop;
-  -webkit-mask-image: var(--thumbs-down-16-svg);
-  mask-image: var(--thumbs-down-16-svg);
-}
-
-%with-thumbs-down-24-icon {
-  @extend %with-icon, %thumbs-down-24-svg-prop;
-  background-image: var(--thumbs-down-24-svg);
-}
-%with-thumbs-down-24-mask {
-  @extend %with-mask, %thumbs-down-24-svg-prop;
-  -webkit-mask-image: var(--thumbs-down-24-svg);
-  mask-image: var(--thumbs-down-24-svg);
-}
-
-%with-thumbs-up-16-icon {
-  @extend %with-icon, %thumbs-up-16-svg-prop;
-  background-image: var(--thumbs-up-16-svg);
-}
-%with-thumbs-up-16-mask {
-  @extend %with-mask, %thumbs-up-16-svg-prop;
-  -webkit-mask-image: var(--thumbs-up-16-svg);
-  mask-image: var(--thumbs-up-16-svg);
-}
-
-%with-thumbs-up-24-icon {
-  @extend %with-icon, %thumbs-up-24-svg-prop;
-  background-image: var(--thumbs-up-24-svg);
-}
-%with-thumbs-up-24-mask {
-  @extend %with-mask, %thumbs-up-24-svg-prop;
-  -webkit-mask-image: var(--thumbs-up-24-svg);
-  mask-image: var(--thumbs-up-24-svg);
-}
-
-%with-toggle-left-16-icon {
-  @extend %with-icon, %toggle-left-16-svg-prop;
-  background-image: var(--toggle-left-16-svg);
-}
-%with-toggle-left-16-mask {
-  @extend %with-mask, %toggle-left-16-svg-prop;
-  -webkit-mask-image: var(--toggle-left-16-svg);
-  mask-image: var(--toggle-left-16-svg);
-}
-
-%with-toggle-left-24-icon {
-  @extend %with-icon, %toggle-left-24-svg-prop;
-  background-image: var(--toggle-left-24-svg);
-}
-%with-toggle-left-24-mask {
-  @extend %with-mask, %toggle-left-24-svg-prop;
-  -webkit-mask-image: var(--toggle-left-24-svg);
-  mask-image: var(--toggle-left-24-svg);
-}
-
-%with-toggle-right-16-icon {
-  @extend %with-icon, %toggle-right-16-svg-prop;
-  background-image: var(--toggle-right-16-svg);
-}
-%with-toggle-right-16-mask {
-  @extend %with-mask, %toggle-right-16-svg-prop;
-  -webkit-mask-image: var(--toggle-right-16-svg);
-  mask-image: var(--toggle-right-16-svg);
-}
-
-%with-toggle-right-24-icon {
-  @extend %with-icon, %toggle-right-24-svg-prop;
-  background-image: var(--toggle-right-24-svg);
-}
-%with-toggle-right-24-mask {
-  @extend %with-mask, %toggle-right-24-svg-prop;
-  -webkit-mask-image: var(--toggle-right-24-svg);
-  mask-image: var(--toggle-right-24-svg);
-}
-
-%with-token-16-icon {
-  @extend %with-icon, %token-16-svg-prop;
-  background-image: var(--token-16-svg);
-}
-%with-token-16-mask {
-  @extend %with-mask, %token-16-svg-prop;
-  -webkit-mask-image: var(--token-16-svg);
-  mask-image: var(--token-16-svg);
-}
-
-%with-token-24-icon {
-  @extend %with-icon, %token-24-svg-prop;
-  background-image: var(--token-24-svg);
-}
-%with-token-24-mask {
-  @extend %with-mask, %token-24-svg-prop;
-  -webkit-mask-image: var(--token-24-svg);
-  mask-image: var(--token-24-svg);
-}
-
-%with-tools-16-icon {
-  @extend %with-icon, %tools-16-svg-prop;
-  background-image: var(--tools-16-svg);
-}
-%with-tools-16-mask {
-  @extend %with-mask, %tools-16-svg-prop;
-  -webkit-mask-image: var(--tools-16-svg);
-  mask-image: var(--tools-16-svg);
-}
-
-%with-tools-24-icon {
-  @extend %with-icon, %tools-24-svg-prop;
-  background-image: var(--tools-24-svg);
-}
-%with-tools-24-mask {
-  @extend %with-mask, %tools-24-svg-prop;
-  -webkit-mask-image: var(--tools-24-svg);
-  mask-image: var(--tools-24-svg);
-}
-
-%with-top-16-icon {
-  @extend %with-icon, %top-16-svg-prop;
-  background-image: var(--top-16-svg);
-}
-%with-top-16-mask {
-  @extend %with-mask, %top-16-svg-prop;
-  -webkit-mask-image: var(--top-16-svg);
-  mask-image: var(--top-16-svg);
-}
-
-%with-top-24-icon {
-  @extend %with-icon, %top-24-svg-prop;
-  background-image: var(--top-24-svg);
-}
-%with-top-24-mask {
-  @extend %with-mask, %top-24-svg-prop;
-  -webkit-mask-image: var(--top-24-svg);
-  mask-image: var(--top-24-svg);
-}
-
-%with-trash-16-icon {
-  @extend %with-icon, %trash-16-svg-prop;
-  background-image: var(--trash-16-svg);
-}
-%with-trash-16-mask {
-  @extend %with-mask, %trash-16-svg-prop;
-  -webkit-mask-image: var(--trash-16-svg);
-  mask-image: var(--trash-16-svg);
-}
-
-%with-trash-24-icon {
-  @extend %with-icon, %trash-24-svg-prop;
-  background-image: var(--trash-24-svg);
-}
-%with-trash-24-mask {
-  @extend %with-mask, %trash-24-svg-prop;
-  -webkit-mask-image: var(--trash-24-svg);
-  mask-image: var(--trash-24-svg);
-}
-
-%with-trash-icon {
-  @extend %with-icon, %trash-16-svg-prop;
-  background-image: var(--trash-16-svg);
-}
-%with-trash-mask {
-  @extend %with-mask, %trash-16-svg-prop;
-  -webkit-mask-image: var(--trash-16-svg);
-  mask-image: var(--trash-16-svg);
-}
-
-%with-trend-down-16-icon {
-  @extend %with-icon, %trend-down-16-svg-prop;
-  background-image: var(--trend-down-16-svg);
-}
-%with-trend-down-16-mask {
-  @extend %with-mask, %trend-down-16-svg-prop;
-  -webkit-mask-image: var(--trend-down-16-svg);
-  mask-image: var(--trend-down-16-svg);
-}
-
-%with-trend-down-24-icon {
-  @extend %with-icon, %trend-down-24-svg-prop;
-  background-image: var(--trend-down-24-svg);
-}
-%with-trend-down-24-mask {
-  @extend %with-mask, %trend-down-24-svg-prop;
-  -webkit-mask-image: var(--trend-down-24-svg);
-  mask-image: var(--trend-down-24-svg);
-}
-
-%with-trend-up-16-icon {
-  @extend %with-icon, %trend-up-16-svg-prop;
-  background-image: var(--trend-up-16-svg);
-}
-%with-trend-up-16-mask {
-  @extend %with-mask, %trend-up-16-svg-prop;
-  -webkit-mask-image: var(--trend-up-16-svg);
-  mask-image: var(--trend-up-16-svg);
-}
-
-%with-trend-up-24-icon {
-  @extend %with-icon, %trend-up-24-svg-prop;
-  background-image: var(--trend-up-24-svg);
-}
-%with-trend-up-24-mask {
-  @extend %with-mask, %trend-up-24-svg-prop;
-  -webkit-mask-image: var(--trend-up-24-svg);
-  mask-image: var(--trend-up-24-svg);
-}
-
-%with-triangle-16-icon {
-  @extend %with-icon, %triangle-16-svg-prop;
-  background-image: var(--triangle-16-svg);
-}
-%with-triangle-16-mask {
-  @extend %with-mask, %triangle-16-svg-prop;
-  -webkit-mask-image: var(--triangle-16-svg);
-  mask-image: var(--triangle-16-svg);
-}
-
-%with-triangle-24-icon {
-  @extend %with-icon, %triangle-24-svg-prop;
-  background-image: var(--triangle-24-svg);
-}
-%with-triangle-24-mask {
-  @extend %with-mask, %triangle-24-svg-prop;
-  -webkit-mask-image: var(--triangle-24-svg);
-  mask-image: var(--triangle-24-svg);
-}
-
-%with-triangle-fill-16-icon {
-  @extend %with-icon, %triangle-fill-16-svg-prop;
-  background-image: var(--triangle-fill-16-svg);
-}
-%with-triangle-fill-16-mask {
-  @extend %with-mask, %triangle-fill-16-svg-prop;
-  -webkit-mask-image: var(--triangle-fill-16-svg);
-  mask-image: var(--triangle-fill-16-svg);
-}
-
-%with-triangle-fill-24-icon {
-  @extend %with-icon, %triangle-fill-24-svg-prop;
-  background-image: var(--triangle-fill-24-svg);
-}
-%with-triangle-fill-24-mask {
-  @extend %with-mask, %triangle-fill-24-svg-prop;
-  -webkit-mask-image: var(--triangle-fill-24-svg);
-  mask-image: var(--triangle-fill-24-svg);
-}
-
-%with-truck-16-icon {
-  @extend %with-icon, %truck-16-svg-prop;
-  background-image: var(--truck-16-svg);
-}
-%with-truck-16-mask {
-  @extend %with-mask, %truck-16-svg-prop;
-  -webkit-mask-image: var(--truck-16-svg);
-  mask-image: var(--truck-16-svg);
-}
-
-%with-truck-24-icon {
-  @extend %with-icon, %truck-24-svg-prop;
-  background-image: var(--truck-24-svg);
-}
-%with-truck-24-mask {
-  @extend %with-mask, %truck-24-svg-prop;
-  -webkit-mask-image: var(--truck-24-svg);
-  mask-image: var(--truck-24-svg);
-}
-
-%with-tune-icon {
-  @extend %with-icon, %sliders-16-svg-prop;
-  background-image: var(--sliders-16-svg);
-}
-%with-tune-mask {
-  @extend %with-mask, %sliders-16-svg-prop;
-  -webkit-mask-image: var(--sliders-16-svg);
-  mask-image: var(--sliders-16-svg);
-}
-
-%with-tv-16-icon {
-  @extend %with-icon, %tv-16-svg-prop;
-  background-image: var(--tv-16-svg);
-}
-%with-tv-16-mask {
-  @extend %with-mask, %tv-16-svg-prop;
-  -webkit-mask-image: var(--tv-16-svg);
-  mask-image: var(--tv-16-svg);
-}
-
-%with-tv-24-icon {
-  @extend %with-icon, %tv-24-svg-prop;
-  background-image: var(--tv-24-svg);
-}
-%with-tv-24-mask {
-  @extend %with-mask, %tv-24-svg-prop;
-  -webkit-mask-image: var(--tv-24-svg);
-  mask-image: var(--tv-24-svg);
-}
-
-%with-twitch-16-icon {
-  @extend %with-icon, %twitch-16-svg-prop;
-  background-image: var(--twitch-16-svg);
-}
-%with-twitch-16-mask {
-  @extend %with-mask, %twitch-16-svg-prop;
-  -webkit-mask-image: var(--twitch-16-svg);
-  mask-image: var(--twitch-16-svg);
-}
-
-%with-twitch-24-icon {
-  @extend %with-icon, %twitch-24-svg-prop;
-  background-image: var(--twitch-24-svg);
-}
-%with-twitch-24-mask {
-  @extend %with-mask, %twitch-24-svg-prop;
-  -webkit-mask-image: var(--twitch-24-svg);
-  mask-image: var(--twitch-24-svg);
-}
-
-%with-twitch-color-16-icon {
-  @extend %with-icon, %twitch-color-16-svg-prop;
-  background-image: var(--twitch-color-16-svg);
-}
-%with-twitch-color-16-mask {
-  @extend %with-mask, %twitch-color-16-svg-prop;
-  -webkit-mask-image: var(--twitch-color-16-svg);
-  mask-image: var(--twitch-color-16-svg);
-}
-
-%with-twitch-color-24-icon {
-  @extend %with-icon, %twitch-color-24-svg-prop;
-  background-image: var(--twitch-color-24-svg);
-}
-%with-twitch-color-24-mask {
-  @extend %with-mask, %twitch-color-24-svg-prop;
-  -webkit-mask-image: var(--twitch-color-24-svg);
-  mask-image: var(--twitch-color-24-svg);
-}
-
-%with-twitter-16-icon {
-  @extend %with-icon, %twitter-16-svg-prop;
-  background-image: var(--twitter-16-svg);
-}
-%with-twitter-16-mask {
-  @extend %with-mask, %twitter-16-svg-prop;
-  -webkit-mask-image: var(--twitter-16-svg);
-  mask-image: var(--twitter-16-svg);
-}
-
-%with-twitter-24-icon {
-  @extend %with-icon, %twitter-24-svg-prop;
-  background-image: var(--twitter-24-svg);
-}
-%with-twitter-24-mask {
-  @extend %with-mask, %twitter-24-svg-prop;
-  -webkit-mask-image: var(--twitter-24-svg);
-  mask-image: var(--twitter-24-svg);
-}
-
-%with-twitter-color-16-icon {
-  @extend %with-icon, %twitter-color-16-svg-prop;
-  background-image: var(--twitter-color-16-svg);
-}
-%with-twitter-color-16-mask {
-  @extend %with-mask, %twitter-color-16-svg-prop;
-  -webkit-mask-image: var(--twitter-color-16-svg);
-  mask-image: var(--twitter-color-16-svg);
-}
-
-%with-twitter-color-24-icon {
-  @extend %with-icon, %twitter-color-24-svg-prop;
-  background-image: var(--twitter-color-24-svg);
-}
-%with-twitter-color-24-mask {
-  @extend %with-mask, %twitter-color-24-svg-prop;
-  -webkit-mask-image: var(--twitter-color-24-svg);
-  mask-image: var(--twitter-color-24-svg);
-}
-
-%with-type-16-icon {
-  @extend %with-icon, %type-16-svg-prop;
-  background-image: var(--type-16-svg);
-}
-%with-type-16-mask {
-  @extend %with-mask, %type-16-svg-prop;
-  -webkit-mask-image: var(--type-16-svg);
-  mask-image: var(--type-16-svg);
-}
-
-%with-type-24-icon {
-  @extend %with-icon, %type-24-svg-prop;
-  background-image: var(--type-24-svg);
-}
-%with-type-24-mask {
-  @extend %with-mask, %type-24-svg-prop;
-  -webkit-mask-image: var(--type-24-svg);
-  mask-image: var(--type-24-svg);
-}
-
-%with-unfold-close-16-icon {
-  @extend %with-icon, %unfold-close-16-svg-prop;
-  background-image: var(--unfold-close-16-svg);
-}
-%with-unfold-close-16-mask {
-  @extend %with-mask, %unfold-close-16-svg-prop;
-  -webkit-mask-image: var(--unfold-close-16-svg);
-  mask-image: var(--unfold-close-16-svg);
-}
-
-%with-unfold-close-24-icon {
-  @extend %with-icon, %unfold-close-24-svg-prop;
-  background-image: var(--unfold-close-24-svg);
-}
-%with-unfold-close-24-mask {
-  @extend %with-mask, %unfold-close-24-svg-prop;
-  -webkit-mask-image: var(--unfold-close-24-svg);
-  mask-image: var(--unfold-close-24-svg);
-}
-
-%with-unfold-less-icon {
-  @extend %with-icon, %unfold-close-16-svg-prop;
-  background-image: var(--unfold-close-16-svg);
-}
-%with-unfold-less-mask {
-  @extend %with-mask, %unfold-close-16-svg-prop;
-  -webkit-mask-image: var(--unfold-close-16-svg);
-  mask-image: var(--unfold-close-16-svg);
-}
-
-%with-unfold-more-icon {
-  @extend %with-icon, %unfold-open-16-svg-prop;
-  background-image: var(--unfold-open-16-svg);
-}
-%with-unfold-more-mask {
-  @extend %with-mask, %unfold-open-16-svg-prop;
-  -webkit-mask-image: var(--unfold-open-16-svg);
-  mask-image: var(--unfold-open-16-svg);
-}
-
-%with-unfold-open-16-icon {
-  @extend %with-icon, %unfold-open-16-svg-prop;
-  background-image: var(--unfold-open-16-svg);
-}
-%with-unfold-open-16-mask {
-  @extend %with-mask, %unfold-open-16-svg-prop;
-  -webkit-mask-image: var(--unfold-open-16-svg);
-  mask-image: var(--unfold-open-16-svg);
-}
-
-%with-unfold-open-24-icon {
-  @extend %with-icon, %unfold-open-24-svg-prop;
-  background-image: var(--unfold-open-24-svg);
-}
-%with-unfold-open-24-mask {
-  @extend %with-mask, %unfold-open-24-svg-prop;
-  -webkit-mask-image: var(--unfold-open-24-svg);
-  mask-image: var(--unfold-open-24-svg);
-}
-
-%with-union-icon {
-  @extend %with-icon, %union-svg-prop;
-  background-image: var(--union-svg);
-}
-%with-union-mask {
-  @extend %with-mask, %union-svg-prop;
-  -webkit-mask-image: var(--union-svg);
-  mask-image: var(--union-svg);
-}
-
-%with-unlock-16-icon {
-  @extend %with-icon, %unlock-16-svg-prop;
-  background-image: var(--unlock-16-svg);
-}
-%with-unlock-16-mask {
-  @extend %with-mask, %unlock-16-svg-prop;
-  -webkit-mask-image: var(--unlock-16-svg);
-  mask-image: var(--unlock-16-svg);
-}
-
-%with-unlock-24-icon {
-  @extend %with-icon, %unlock-24-svg-prop;
-  background-image: var(--unlock-24-svg);
-}
-%with-unlock-24-mask {
-  @extend %with-mask, %unlock-24-svg-prop;
-  -webkit-mask-image: var(--unlock-24-svg);
-  mask-image: var(--unlock-24-svg);
-}
-
-%with-upload-16-icon {
-  @extend %with-icon, %upload-16-svg-prop;
-  background-image: var(--upload-16-svg);
-}
-%with-upload-16-mask {
-  @extend %with-mask, %upload-16-svg-prop;
-  -webkit-mask-image: var(--upload-16-svg);
-  mask-image: var(--upload-16-svg);
-}
-
-%with-upload-24-icon {
-  @extend %with-icon, %upload-24-svg-prop;
-  background-image: var(--upload-24-svg);
-}
-%with-upload-24-mask {
-  @extend %with-mask, %upload-24-svg-prop;
-  -webkit-mask-image: var(--upload-24-svg);
-  mask-image: var(--upload-24-svg);
-}
-
-%with-upload-icon {
-  @extend %with-icon, %upload-16-svg-prop;
-  background-image: var(--upload-16-svg);
-}
-%with-upload-mask {
-  @extend %with-mask, %upload-16-svg-prop;
-  -webkit-mask-image: var(--upload-16-svg);
-  mask-image: var(--upload-16-svg);
-}
-
-%with-user-16-icon {
-  @extend %with-icon, %user-16-svg-prop;
-  background-image: var(--user-16-svg);
-}
-%with-user-16-mask {
-  @extend %with-mask, %user-16-svg-prop;
-  -webkit-mask-image: var(--user-16-svg);
-  mask-image: var(--user-16-svg);
-}
-
-%with-user-24-icon {
-  @extend %with-icon, %user-24-svg-prop;
-  background-image: var(--user-24-svg);
-}
-%with-user-24-mask {
-  @extend %with-mask, %user-24-svg-prop;
-  -webkit-mask-image: var(--user-24-svg);
-  mask-image: var(--user-24-svg);
-}
-
-%with-user-add-icon {
-  @extend %with-icon, %user-plus-16-svg-prop;
-  background-image: var(--user-plus-16-svg);
-}
-%with-user-add-mask {
-  @extend %with-mask, %user-plus-16-svg-prop;
-  -webkit-mask-image: var(--user-plus-16-svg);
-  mask-image: var(--user-plus-16-svg);
-}
-
-%with-user-check-16-icon {
-  @extend %with-icon, %user-check-16-svg-prop;
-  background-image: var(--user-check-16-svg);
-}
-%with-user-check-16-mask {
-  @extend %with-mask, %user-check-16-svg-prop;
-  -webkit-mask-image: var(--user-check-16-svg);
-  mask-image: var(--user-check-16-svg);
-}
-
-%with-user-check-24-icon {
-  @extend %with-icon, %user-check-24-svg-prop;
-  background-image: var(--user-check-24-svg);
-}
-%with-user-check-24-mask {
-  @extend %with-mask, %user-check-24-svg-prop;
-  -webkit-mask-image: var(--user-check-24-svg);
-  mask-image: var(--user-check-24-svg);
-}
-
-%with-user-circle-16-icon {
-  @extend %with-icon, %user-circle-16-svg-prop;
-  background-image: var(--user-circle-16-svg);
-}
-%with-user-circle-16-mask {
-  @extend %with-mask, %user-circle-16-svg-prop;
-  -webkit-mask-image: var(--user-circle-16-svg);
-  mask-image: var(--user-circle-16-svg);
-}
-
-%with-user-circle-24-icon {
-  @extend %with-icon, %user-circle-24-svg-prop;
-  background-image: var(--user-circle-24-svg);
-}
-%with-user-circle-24-mask {
-  @extend %with-mask, %user-circle-24-svg-prop;
-  -webkit-mask-image: var(--user-circle-24-svg);
-  mask-image: var(--user-circle-24-svg);
-}
-
-%with-user-circle-fill-16-icon {
-  @extend %with-icon, %user-circle-fill-16-svg-prop;
-  background-image: var(--user-circle-fill-16-svg);
-}
-%with-user-circle-fill-16-mask {
-  @extend %with-mask, %user-circle-fill-16-svg-prop;
-  -webkit-mask-image: var(--user-circle-fill-16-svg);
-  mask-image: var(--user-circle-fill-16-svg);
-}
-
-%with-user-circle-fill-24-icon {
-  @extend %with-icon, %user-circle-fill-24-svg-prop;
-  background-image: var(--user-circle-fill-24-svg);
-}
-%with-user-circle-fill-24-mask {
-  @extend %with-mask, %user-circle-fill-24-svg-prop;
-  -webkit-mask-image: var(--user-circle-fill-24-svg);
-  mask-image: var(--user-circle-fill-24-svg);
-}
-
-%with-user-minus-16-icon {
-  @extend %with-icon, %user-minus-16-svg-prop;
-  background-image: var(--user-minus-16-svg);
-}
-%with-user-minus-16-mask {
-  @extend %with-mask, %user-minus-16-svg-prop;
-  -webkit-mask-image: var(--user-minus-16-svg);
-  mask-image: var(--user-minus-16-svg);
-}
-
-%with-user-minus-24-icon {
-  @extend %with-icon, %user-minus-24-svg-prop;
-  background-image: var(--user-minus-24-svg);
-}
-%with-user-minus-24-mask {
-  @extend %with-mask, %user-minus-24-svg-prop;
-  -webkit-mask-image: var(--user-minus-24-svg);
-  mask-image: var(--user-minus-24-svg);
-}
-
-%with-user-organization-icon {
-  @extend %with-icon, %org-16-svg-prop;
-  background-image: var(--org-16-svg);
-}
-%with-user-organization-mask {
-  @extend %with-mask, %org-16-svg-prop;
-  -webkit-mask-image: var(--org-16-svg);
-  mask-image: var(--org-16-svg);
-}
-
-%with-user-plain-icon {
-  @extend %with-icon, %user-16-svg-prop;
-  background-image: var(--user-16-svg);
-}
-%with-user-plain-mask {
-  @extend %with-mask, %user-16-svg-prop;
-  -webkit-mask-image: var(--user-16-svg);
-  mask-image: var(--user-16-svg);
-}
-
-%with-user-plus-16-icon {
-  @extend %with-icon, %user-plus-16-svg-prop;
-  background-image: var(--user-plus-16-svg);
-}
-%with-user-plus-16-mask {
-  @extend %with-mask, %user-plus-16-svg-prop;
-  -webkit-mask-image: var(--user-plus-16-svg);
-  mask-image: var(--user-plus-16-svg);
-}
-
-%with-user-plus-24-icon {
-  @extend %with-icon, %user-plus-24-svg-prop;
-  background-image: var(--user-plus-24-svg);
-}
-%with-user-plus-24-mask {
-  @extend %with-mask, %user-plus-24-svg-prop;
-  -webkit-mask-image: var(--user-plus-24-svg);
-  mask-image: var(--user-plus-24-svg);
-}
-
-%with-user-square-fill-icon {
-  @extend %with-icon, %user-circle-fill-16-svg-prop;
-  background-image: var(--user-circle-fill-16-svg);
-}
-%with-user-square-fill-mask {
-  @extend %with-mask, %user-circle-fill-16-svg-prop;
-  -webkit-mask-image: var(--user-circle-fill-16-svg);
-  mask-image: var(--user-circle-fill-16-svg);
-}
-
-%with-user-square-outline-icon {
-  @extend %with-icon, %user-circle-16-svg-prop;
-  background-image: var(--user-circle-16-svg);
-}
-%with-user-square-outline-mask {
-  @extend %with-mask, %user-circle-16-svg-prop;
-  -webkit-mask-image: var(--user-circle-16-svg);
-  mask-image: var(--user-circle-16-svg);
-}
-
-%with-user-team-icon {
-  @extend %with-icon, %users-16-svg-prop;
-  background-image: var(--users-16-svg);
-}
-%with-user-team-mask {
-  @extend %with-mask, %users-16-svg-prop;
-  -webkit-mask-image: var(--users-16-svg);
-  mask-image: var(--users-16-svg);
-}
-
-%with-user-x-16-icon {
-  @extend %with-icon, %user-x-16-svg-prop;
-  background-image: var(--user-x-16-svg);
-}
-%with-user-x-16-mask {
-  @extend %with-mask, %user-x-16-svg-prop;
-  -webkit-mask-image: var(--user-x-16-svg);
-  mask-image: var(--user-x-16-svg);
-}
-
-%with-user-x-24-icon {
-  @extend %with-icon, %user-x-24-svg-prop;
-  background-image: var(--user-x-24-svg);
-}
-%with-user-x-24-mask {
-  @extend %with-mask, %user-x-24-svg-prop;
-  -webkit-mask-image: var(--user-x-24-svg);
-  mask-image: var(--user-x-24-svg);
-}
-
-%with-users-16-icon {
-  @extend %with-icon, %users-16-svg-prop;
-  background-image: var(--users-16-svg);
-}
-%with-users-16-mask {
-  @extend %with-mask, %users-16-svg-prop;
-  -webkit-mask-image: var(--users-16-svg);
-  mask-image: var(--users-16-svg);
-}
-
-%with-users-24-icon {
-  @extend %with-icon, %users-24-svg-prop;
-  background-image: var(--users-24-svg);
-}
-%with-users-24-mask {
-  @extend %with-mask, %users-24-svg-prop;
-  -webkit-mask-image: var(--users-24-svg);
-  mask-image: var(--users-24-svg);
-}
-
-%with-vagrant-16-icon {
-  @extend %with-icon, %vagrant-16-svg-prop;
-  background-image: var(--vagrant-16-svg);
-}
-%with-vagrant-16-mask {
-  @extend %with-mask, %vagrant-16-svg-prop;
-  -webkit-mask-image: var(--vagrant-16-svg);
-  mask-image: var(--vagrant-16-svg);
-}
-
-%with-vagrant-24-icon {
-  @extend %with-icon, %vagrant-24-svg-prop;
-  background-image: var(--vagrant-24-svg);
-}
-%with-vagrant-24-mask {
-  @extend %with-mask, %vagrant-24-svg-prop;
-  -webkit-mask-image: var(--vagrant-24-svg);
-  mask-image: var(--vagrant-24-svg);
-}
-
-%with-vagrant-color-16-icon {
-  @extend %with-icon, %vagrant-color-16-svg-prop;
-  background-image: var(--vagrant-color-16-svg);
-}
-%with-vagrant-color-16-mask {
-  @extend %with-mask, %vagrant-color-16-svg-prop;
-  -webkit-mask-image: var(--vagrant-color-16-svg);
-  mask-image: var(--vagrant-color-16-svg);
-}
-
-%with-vagrant-color-24-icon {
-  @extend %with-icon, %vagrant-color-24-svg-prop;
-  background-image: var(--vagrant-color-24-svg);
-}
-%with-vagrant-color-24-mask {
-  @extend %with-mask, %vagrant-color-24-svg-prop;
-  -webkit-mask-image: var(--vagrant-color-24-svg);
-  mask-image: var(--vagrant-color-24-svg);
-}
-
-%with-vault-16-icon {
-  @extend %with-icon, %vault-16-svg-prop;
-  background-image: var(--vault-16-svg);
-}
-%with-vault-16-mask {
-  @extend %with-mask, %vault-16-svg-prop;
-  -webkit-mask-image: var(--vault-16-svg);
-  mask-image: var(--vault-16-svg);
-}
-
-%with-vault-24-icon {
-  @extend %with-icon, %vault-24-svg-prop;
-  background-image: var(--vault-24-svg);
-}
-%with-vault-24-mask {
-  @extend %with-mask, %vault-24-svg-prop;
-  -webkit-mask-image: var(--vault-24-svg);
-  mask-image: var(--vault-24-svg);
-}
-
-%with-vault-color-16-icon {
-  @extend %with-icon, %vault-color-16-svg-prop;
-  background-image: var(--vault-color-16-svg);
-}
-%with-vault-color-16-mask {
-  @extend %with-mask, %vault-color-16-svg-prop;
-  -webkit-mask-image: var(--vault-color-16-svg);
-  mask-image: var(--vault-color-16-svg);
-}
-
-%with-vault-color-24-icon {
-  @extend %with-icon, %vault-color-24-svg-prop;
-  background-image: var(--vault-color-24-svg);
-}
-%with-vault-color-24-mask {
-  @extend %with-mask, %vault-color-24-svg-prop;
-  -webkit-mask-image: var(--vault-color-24-svg);
-  mask-image: var(--vault-color-24-svg);
-}
-
-%with-verified-16-icon {
-  @extend %with-icon, %verified-16-svg-prop;
-  background-image: var(--verified-16-svg);
-}
-%with-verified-16-mask {
-  @extend %with-mask, %verified-16-svg-prop;
-  -webkit-mask-image: var(--verified-16-svg);
-  mask-image: var(--verified-16-svg);
-}
-
-%with-verified-24-icon {
-  @extend %with-icon, %verified-24-svg-prop;
-  background-image: var(--verified-24-svg);
-}
-%with-verified-24-mask {
-  @extend %with-mask, %verified-24-svg-prop;
-  -webkit-mask-image: var(--verified-24-svg);
-  mask-image: var(--verified-24-svg);
-}
-
-%with-video-16-icon {
-  @extend %with-icon, %video-16-svg-prop;
-  background-image: var(--video-16-svg);
-}
-%with-video-16-mask {
-  @extend %with-mask, %video-16-svg-prop;
-  -webkit-mask-image: var(--video-16-svg);
-  mask-image: var(--video-16-svg);
-}
-
-%with-video-24-icon {
-  @extend %with-icon, %video-24-svg-prop;
-  background-image: var(--video-24-svg);
-}
-%with-video-24-mask {
-  @extend %with-mask, %video-24-svg-prop;
-  -webkit-mask-image: var(--video-24-svg);
-  mask-image: var(--video-24-svg);
-}
-
-%with-video-off-16-icon {
-  @extend %with-icon, %video-off-16-svg-prop;
-  background-image: var(--video-off-16-svg);
-}
-%with-video-off-16-mask {
-  @extend %with-mask, %video-off-16-svg-prop;
-  -webkit-mask-image: var(--video-off-16-svg);
-  mask-image: var(--video-off-16-svg);
-}
-
-%with-video-off-24-icon {
-  @extend %with-icon, %video-off-24-svg-prop;
-  background-image: var(--video-off-24-svg);
-}
-%with-video-off-24-mask {
-  @extend %with-mask, %video-off-24-svg-prop;
-  -webkit-mask-image: var(--video-off-24-svg);
-  mask-image: var(--video-off-24-svg);
-}
-
-%with-visibility-hide-icon {
-  @extend %with-icon, %eye-off-16-svg-prop;
-  background-image: var(--eye-off-16-svg);
-}
-%with-visibility-hide-mask {
-  @extend %with-mask, %eye-off-16-svg-prop;
-  -webkit-mask-image: var(--eye-off-16-svg);
-  mask-image: var(--eye-off-16-svg);
-}
-
-%with-visibility-show-icon {
-  @extend %with-icon, %eye-16-svg-prop;
-  background-image: var(--eye-16-svg);
-}
-%with-visibility-show-mask {
-  @extend %with-mask, %eye-16-svg-prop;
-  -webkit-mask-image: var(--eye-16-svg);
-  mask-image: var(--eye-16-svg);
-}
-
-%with-vmware-16-icon {
-  @extend %with-icon, %vmware-16-svg-prop;
-  background-image: var(--vmware-16-svg);
-}
-%with-vmware-16-mask {
-  @extend %with-mask, %vmware-16-svg-prop;
-  -webkit-mask-image: var(--vmware-16-svg);
-  mask-image: var(--vmware-16-svg);
-}
-
-%with-vmware-24-icon {
-  @extend %with-icon, %vmware-24-svg-prop;
-  background-image: var(--vmware-24-svg);
-}
-%with-vmware-24-mask {
-  @extend %with-mask, %vmware-24-svg-prop;
-  -webkit-mask-image: var(--vmware-24-svg);
-  mask-image: var(--vmware-24-svg);
-}
-
-%with-vmware-color-16-icon {
-  @extend %with-icon, %vmware-color-16-svg-prop;
-  background-image: var(--vmware-color-16-svg);
-}
-%with-vmware-color-16-mask {
-  @extend %with-mask, %vmware-color-16-svg-prop;
-  -webkit-mask-image: var(--vmware-color-16-svg);
-  mask-image: var(--vmware-color-16-svg);
-}
-
-%with-vmware-color-24-icon {
-  @extend %with-icon, %vmware-color-24-svg-prop;
-  background-image: var(--vmware-color-24-svg);
-}
-%with-vmware-color-24-mask {
-  @extend %with-mask, %vmware-color-24-svg-prop;
-  -webkit-mask-image: var(--vmware-color-24-svg);
-  mask-image: var(--vmware-color-24-svg);
-}
-
-%with-volume-16-icon {
-  @extend %with-icon, %volume-16-svg-prop;
-  background-image: var(--volume-16-svg);
-}
-%with-volume-16-mask {
-  @extend %with-mask, %volume-16-svg-prop;
-  -webkit-mask-image: var(--volume-16-svg);
-  mask-image: var(--volume-16-svg);
-}
-
-%with-volume-2-16-icon {
-  @extend %with-icon, %volume-2-16-svg-prop;
-  background-image: var(--volume-2-16-svg);
-}
-%with-volume-2-16-mask {
-  @extend %with-mask, %volume-2-16-svg-prop;
-  -webkit-mask-image: var(--volume-2-16-svg);
-  mask-image: var(--volume-2-16-svg);
-}
-
-%with-volume-2-24-icon {
-  @extend %with-icon, %volume-2-24-svg-prop;
-  background-image: var(--volume-2-24-svg);
-}
-%with-volume-2-24-mask {
-  @extend %with-mask, %volume-2-24-svg-prop;
-  -webkit-mask-image: var(--volume-2-24-svg);
-  mask-image: var(--volume-2-24-svg);
-}
-
-%with-volume-24-icon {
-  @extend %with-icon, %volume-24-svg-prop;
-  background-image: var(--volume-24-svg);
-}
-%with-volume-24-mask {
-  @extend %with-mask, %volume-24-svg-prop;
-  -webkit-mask-image: var(--volume-24-svg);
-  mask-image: var(--volume-24-svg);
-}
-
-%with-volume-down-16-icon {
-  @extend %with-icon, %volume-down-16-svg-prop;
-  background-image: var(--volume-down-16-svg);
-}
-%with-volume-down-16-mask {
-  @extend %with-mask, %volume-down-16-svg-prop;
-  -webkit-mask-image: var(--volume-down-16-svg);
-  mask-image: var(--volume-down-16-svg);
-}
-
-%with-volume-down-24-icon {
-  @extend %with-icon, %volume-down-24-svg-prop;
-  background-image: var(--volume-down-24-svg);
-}
-%with-volume-down-24-mask {
-  @extend %with-mask, %volume-down-24-svg-prop;
-  -webkit-mask-image: var(--volume-down-24-svg);
-  mask-image: var(--volume-down-24-svg);
-}
-
-%with-volume-x-16-icon {
-  @extend %with-icon, %volume-x-16-svg-prop;
-  background-image: var(--volume-x-16-svg);
-}
-%with-volume-x-16-mask {
-  @extend %with-mask, %volume-x-16-svg-prop;
-  -webkit-mask-image: var(--volume-x-16-svg);
-  mask-image: var(--volume-x-16-svg);
-}
-
-%with-volume-x-24-icon {
-  @extend %with-icon, %volume-x-24-svg-prop;
-  background-image: var(--volume-x-24-svg);
-}
-%with-volume-x-24-mask {
-  @extend %with-mask, %volume-x-24-svg-prop;
-  -webkit-mask-image: var(--volume-x-24-svg);
-  mask-image: var(--volume-x-24-svg);
-}
-
-%with-wall-16-icon {
-  @extend %with-icon, %wall-16-svg-prop;
-  background-image: var(--wall-16-svg);
-}
-%with-wall-16-mask {
-  @extend %with-mask, %wall-16-svg-prop;
-  -webkit-mask-image: var(--wall-16-svg);
-  mask-image: var(--wall-16-svg);
-}
-
-%with-wall-24-icon {
-  @extend %with-icon, %wall-24-svg-prop;
-  background-image: var(--wall-24-svg);
-}
-%with-wall-24-mask {
-  @extend %with-mask, %wall-24-svg-prop;
-  -webkit-mask-image: var(--wall-24-svg);
-  mask-image: var(--wall-24-svg);
-}
-
-%with-watch-16-icon {
-  @extend %with-icon, %watch-16-svg-prop;
-  background-image: var(--watch-16-svg);
-}
-%with-watch-16-mask {
-  @extend %with-mask, %watch-16-svg-prop;
-  -webkit-mask-image: var(--watch-16-svg);
-  mask-image: var(--watch-16-svg);
-}
-
-%with-watch-24-icon {
-  @extend %with-icon, %watch-24-svg-prop;
-  background-image: var(--watch-24-svg);
-}
-%with-watch-24-mask {
-  @extend %with-mask, %watch-24-svg-prop;
-  -webkit-mask-image: var(--watch-24-svg);
-  mask-image: var(--watch-24-svg);
-}
-
-%with-waypoint-16-icon {
-  @extend %with-icon, %waypoint-16-svg-prop;
-  background-image: var(--waypoint-16-svg);
-}
-%with-waypoint-16-mask {
-  @extend %with-mask, %waypoint-16-svg-prop;
-  -webkit-mask-image: var(--waypoint-16-svg);
-  mask-image: var(--waypoint-16-svg);
-}
-
-%with-waypoint-24-icon {
-  @extend %with-icon, %waypoint-24-svg-prop;
-  background-image: var(--waypoint-24-svg);
-}
-%with-waypoint-24-mask {
-  @extend %with-mask, %waypoint-24-svg-prop;
-  -webkit-mask-image: var(--waypoint-24-svg);
-  mask-image: var(--waypoint-24-svg);
-}
-
-%with-waypoint-color-16-icon {
-  @extend %with-icon, %waypoint-color-16-svg-prop;
-  background-image: var(--waypoint-color-16-svg);
-}
-%with-waypoint-color-16-mask {
-  @extend %with-mask, %waypoint-color-16-svg-prop;
-  -webkit-mask-image: var(--waypoint-color-16-svg);
-  mask-image: var(--waypoint-color-16-svg);
-}
-
-%with-waypoint-color-24-icon {
-  @extend %with-icon, %waypoint-color-24-svg-prop;
-  background-image: var(--waypoint-color-24-svg);
-}
-%with-waypoint-color-24-mask {
-  @extend %with-mask, %waypoint-color-24-svg-prop;
-  -webkit-mask-image: var(--waypoint-color-24-svg);
-  mask-image: var(--waypoint-color-24-svg);
-}
-
-%with-webhook-16-icon {
-  @extend %with-icon, %webhook-16-svg-prop;
-  background-image: var(--webhook-16-svg);
-}
-%with-webhook-16-mask {
-  @extend %with-mask, %webhook-16-svg-prop;
-  -webkit-mask-image: var(--webhook-16-svg);
-  mask-image: var(--webhook-16-svg);
-}
-
-%with-webhook-24-icon {
-  @extend %with-icon, %webhook-24-svg-prop;
-  background-image: var(--webhook-24-svg);
-}
-%with-webhook-24-mask {
-  @extend %with-mask, %webhook-24-svg-prop;
-  -webkit-mask-image: var(--webhook-24-svg);
-  mask-image: var(--webhook-24-svg);
-}
-
-%with-webhook-icon {
-  @extend %with-icon, %webhook-16-svg-prop;
-  background-image: var(--webhook-16-svg);
-}
-%with-webhook-mask {
-  @extend %with-mask, %webhook-16-svg-prop;
-  -webkit-mask-image: var(--webhook-16-svg);
-  mask-image: var(--webhook-16-svg);
-}
-
-%with-wifi-16-icon {
-  @extend %with-icon, %wifi-16-svg-prop;
-  background-image: var(--wifi-16-svg);
-}
-%with-wifi-16-mask {
-  @extend %with-mask, %wifi-16-svg-prop;
-  -webkit-mask-image: var(--wifi-16-svg);
-  mask-image: var(--wifi-16-svg);
-}
-
-%with-wifi-24-icon {
-  @extend %with-icon, %wifi-24-svg-prop;
-  background-image: var(--wifi-24-svg);
-}
-%with-wifi-24-mask {
-  @extend %with-mask, %wifi-24-svg-prop;
-  -webkit-mask-image: var(--wifi-24-svg);
-  mask-image: var(--wifi-24-svg);
-}
-
-%with-wifi-off-16-icon {
-  @extend %with-icon, %wifi-off-16-svg-prop;
-  background-image: var(--wifi-off-16-svg);
-}
-%with-wifi-off-16-mask {
-  @extend %with-mask, %wifi-off-16-svg-prop;
-  -webkit-mask-image: var(--wifi-off-16-svg);
-  mask-image: var(--wifi-off-16-svg);
-}
-
-%with-wifi-off-24-icon {
-  @extend %with-icon, %wifi-off-24-svg-prop;
-  background-image: var(--wifi-off-24-svg);
-}
-%with-wifi-off-24-mask {
-  @extend %with-mask, %wifi-off-24-svg-prop;
-  -webkit-mask-image: var(--wifi-off-24-svg);
-  mask-image: var(--wifi-off-24-svg);
-}
-
-%with-wrench-16-icon {
-  @extend %with-icon, %wrench-16-svg-prop;
-  background-image: var(--wrench-16-svg);
-}
-%with-wrench-16-mask {
-  @extend %with-mask, %wrench-16-svg-prop;
-  -webkit-mask-image: var(--wrench-16-svg);
-  mask-image: var(--wrench-16-svg);
-}
-
-%with-wrench-24-icon {
-  @extend %with-icon, %wrench-24-svg-prop;
-  background-image: var(--wrench-24-svg);
-}
-%with-wrench-24-mask {
-  @extend %with-mask, %wrench-24-svg-prop;
-  -webkit-mask-image: var(--wrench-24-svg);
-  mask-image: var(--wrench-24-svg);
-}
-
-%with-x-16-icon {
-  @extend %with-icon, %x-16-svg-prop;
-  background-image: var(--x-16-svg);
-}
-%with-x-16-mask {
-  @extend %with-mask, %x-16-svg-prop;
-  -webkit-mask-image: var(--x-16-svg);
-  mask-image: var(--x-16-svg);
-}
-
-%with-x-24-icon {
-  @extend %with-icon, %x-24-svg-prop;
-  background-image: var(--x-24-svg);
-}
-%with-x-24-mask {
-  @extend %with-mask, %x-24-svg-prop;
-  -webkit-mask-image: var(--x-24-svg);
-  mask-image: var(--x-24-svg);
-}
-
-%with-x-circle-16-icon {
-  @extend %with-icon, %x-circle-16-svg-prop;
-  background-image: var(--x-circle-16-svg);
-}
-%with-x-circle-16-mask {
-  @extend %with-mask, %x-circle-16-svg-prop;
-  -webkit-mask-image: var(--x-circle-16-svg);
-  mask-image: var(--x-circle-16-svg);
-}
-
-%with-x-circle-24-icon {
-  @extend %with-icon, %x-circle-24-svg-prop;
-  background-image: var(--x-circle-24-svg);
-}
-%with-x-circle-24-mask {
-  @extend %with-mask, %x-circle-24-svg-prop;
-  -webkit-mask-image: var(--x-circle-24-svg);
-  mask-image: var(--x-circle-24-svg);
-}
-
-%with-x-circle-fill-16-icon {
-  @extend %with-icon, %x-circle-fill-16-svg-prop;
-  background-image: var(--x-circle-fill-16-svg);
-}
-%with-x-circle-fill-16-mask {
-  @extend %with-mask, %x-circle-fill-16-svg-prop;
-  -webkit-mask-image: var(--x-circle-fill-16-svg);
-  mask-image: var(--x-circle-fill-16-svg);
-}
-
-%with-x-circle-fill-24-icon {
-  @extend %with-icon, %x-circle-fill-24-svg-prop;
-  background-image: var(--x-circle-fill-24-svg);
-}
-%with-x-circle-fill-24-mask {
-  @extend %with-mask, %x-circle-fill-24-svg-prop;
-  -webkit-mask-image: var(--x-circle-fill-24-svg);
-  mask-image: var(--x-circle-fill-24-svg);
-}
-
-%with-x-diamond-16-icon {
-  @extend %with-icon, %x-diamond-16-svg-prop;
-  background-image: var(--x-diamond-16-svg);
-}
-%with-x-diamond-16-mask {
-  @extend %with-mask, %x-diamond-16-svg-prop;
-  -webkit-mask-image: var(--x-diamond-16-svg);
-  mask-image: var(--x-diamond-16-svg);
-}
-
-%with-x-diamond-24-icon {
-  @extend %with-icon, %x-diamond-24-svg-prop;
-  background-image: var(--x-diamond-24-svg);
-}
-%with-x-diamond-24-mask {
-  @extend %with-mask, %x-diamond-24-svg-prop;
-  -webkit-mask-image: var(--x-diamond-24-svg);
-  mask-image: var(--x-diamond-24-svg);
-}
-
-%with-x-diamond-fill-16-icon {
-  @extend %with-icon, %x-diamond-fill-16-svg-prop;
-  background-image: var(--x-diamond-fill-16-svg);
-}
-%with-x-diamond-fill-16-mask {
-  @extend %with-mask, %x-diamond-fill-16-svg-prop;
-  -webkit-mask-image: var(--x-diamond-fill-16-svg);
-  mask-image: var(--x-diamond-fill-16-svg);
-}
-
-%with-x-diamond-fill-24-icon {
-  @extend %with-icon, %x-diamond-fill-24-svg-prop;
-  background-image: var(--x-diamond-fill-24-svg);
-}
-%with-x-diamond-fill-24-mask {
-  @extend %with-mask, %x-diamond-fill-24-svg-prop;
-  -webkit-mask-image: var(--x-diamond-fill-24-svg);
-  mask-image: var(--x-diamond-fill-24-svg);
-}
-
-%with-x-hexagon-16-icon {
-  @extend %with-icon, %x-hexagon-16-svg-prop;
-  background-image: var(--x-hexagon-16-svg);
-}
-%with-x-hexagon-16-mask {
-  @extend %with-mask, %x-hexagon-16-svg-prop;
-  -webkit-mask-image: var(--x-hexagon-16-svg);
-  mask-image: var(--x-hexagon-16-svg);
-}
-
-%with-x-hexagon-24-icon {
-  @extend %with-icon, %x-hexagon-24-svg-prop;
-  background-image: var(--x-hexagon-24-svg);
-}
-%with-x-hexagon-24-mask {
-  @extend %with-mask, %x-hexagon-24-svg-prop;
-  -webkit-mask-image: var(--x-hexagon-24-svg);
-  mask-image: var(--x-hexagon-24-svg);
-}
-
-%with-x-hexagon-fill-16-icon {
-  @extend %with-icon, %x-hexagon-fill-16-svg-prop;
-  background-image: var(--x-hexagon-fill-16-svg);
-}
-%with-x-hexagon-fill-16-mask {
-  @extend %with-mask, %x-hexagon-fill-16-svg-prop;
-  -webkit-mask-image: var(--x-hexagon-fill-16-svg);
-  mask-image: var(--x-hexagon-fill-16-svg);
-}
-
-%with-x-hexagon-fill-24-icon {
-  @extend %with-icon, %x-hexagon-fill-24-svg-prop;
-  background-image: var(--x-hexagon-fill-24-svg);
-}
-%with-x-hexagon-fill-24-mask {
-  @extend %with-mask, %x-hexagon-fill-24-svg-prop;
-  -webkit-mask-image: var(--x-hexagon-fill-24-svg);
-  mask-image: var(--x-hexagon-fill-24-svg);
-}
-
-%with-x-square-16-icon {
-  @extend %with-icon, %x-square-16-svg-prop;
-  background-image: var(--x-square-16-svg);
-}
-%with-x-square-16-mask {
-  @extend %with-mask, %x-square-16-svg-prop;
-  -webkit-mask-image: var(--x-square-16-svg);
-  mask-image: var(--x-square-16-svg);
-}
-
-%with-x-square-24-icon {
-  @extend %with-icon, %x-square-24-svg-prop;
-  background-image: var(--x-square-24-svg);
-}
-%with-x-square-24-mask {
-  @extend %with-mask, %x-square-24-svg-prop;
-  -webkit-mask-image: var(--x-square-24-svg);
-  mask-image: var(--x-square-24-svg);
-}
-
-%with-x-square-fill-16-icon {
-  @extend %with-icon, %x-square-fill-16-svg-prop;
-  background-image: var(--x-square-fill-16-svg);
-}
-%with-x-square-fill-16-mask {
-  @extend %with-mask, %x-square-fill-16-svg-prop;
-  -webkit-mask-image: var(--x-square-fill-16-svg);
-  mask-image: var(--x-square-fill-16-svg);
-}
-
-%with-x-square-fill-24-icon {
-  @extend %with-icon, %x-square-fill-24-svg-prop;
-  background-image: var(--x-square-fill-24-svg);
-}
-%with-x-square-fill-24-mask {
-  @extend %with-mask, %x-square-fill-24-svg-prop;
-  -webkit-mask-image: var(--x-square-fill-24-svg);
-  mask-image: var(--x-square-fill-24-svg);
-}
-
-%with-youtube-16-icon {
-  @extend %with-icon, %youtube-16-svg-prop;
-  background-image: var(--youtube-16-svg);
-}
-%with-youtube-16-mask {
-  @extend %with-mask, %youtube-16-svg-prop;
-  -webkit-mask-image: var(--youtube-16-svg);
-  mask-image: var(--youtube-16-svg);
-}
-
-%with-youtube-24-icon {
-  @extend %with-icon, %youtube-24-svg-prop;
-  background-image: var(--youtube-24-svg);
-}
-%with-youtube-24-mask {
-  @extend %with-mask, %youtube-24-svg-prop;
-  -webkit-mask-image: var(--youtube-24-svg);
-  mask-image: var(--youtube-24-svg);
-}
-
-%with-youtube-color-16-icon {
-  @extend %with-icon, %youtube-color-16-svg-prop;
-  background-image: var(--youtube-color-16-svg);
-}
-%with-youtube-color-16-mask {
-  @extend %with-mask, %youtube-color-16-svg-prop;
-  -webkit-mask-image: var(--youtube-color-16-svg);
-  mask-image: var(--youtube-color-16-svg);
-}
-
-%with-youtube-color-24-icon {
-  @extend %with-icon, %youtube-color-24-svg-prop;
-  background-image: var(--youtube-color-24-svg);
-}
-%with-youtube-color-24-mask {
-  @extend %with-mask, %youtube-color-24-svg-prop;
-  -webkit-mask-image: var(--youtube-color-24-svg);
-  mask-image: var(--youtube-color-24-svg);
-}
-
-%with-zap-16-icon {
-  @extend %with-icon, %zap-16-svg-prop;
-  background-image: var(--zap-16-svg);
-}
-%with-zap-16-mask {
-  @extend %with-mask, %zap-16-svg-prop;
-  -webkit-mask-image: var(--zap-16-svg);
-  mask-image: var(--zap-16-svg);
-}
-
-%with-zap-24-icon {
-  @extend %with-icon, %zap-24-svg-prop;
-  background-image: var(--zap-24-svg);
-}
-%with-zap-24-mask {
-  @extend %with-mask, %zap-24-svg-prop;
-  -webkit-mask-image: var(--zap-24-svg);
-  mask-image: var(--zap-24-svg);
-}
-
-%with-zap-off-16-icon {
-  @extend %with-icon, %zap-off-16-svg-prop;
-  background-image: var(--zap-off-16-svg);
-}
-%with-zap-off-16-mask {
-  @extend %with-mask, %zap-off-16-svg-prop;
-  -webkit-mask-image: var(--zap-off-16-svg);
-  mask-image: var(--zap-off-16-svg);
-}
-
-%with-zap-off-24-icon {
-  @extend %with-icon, %zap-off-24-svg-prop;
-  background-image: var(--zap-off-24-svg);
-}
-%with-zap-off-24-mask {
-  @extend %with-mask, %zap-off-24-svg-prop;
-  -webkit-mask-image: var(--zap-off-24-svg);
-  mask-image: var(--zap-off-24-svg);
-}
-
-%with-zoom-in-16-icon {
-  @extend %with-icon, %zoom-in-16-svg-prop;
-  background-image: var(--zoom-in-16-svg);
-}
-%with-zoom-in-16-mask {
-  @extend %with-mask, %zoom-in-16-svg-prop;
-  -webkit-mask-image: var(--zoom-in-16-svg);
-  mask-image: var(--zoom-in-16-svg);
-}
-
-%with-zoom-in-24-icon {
-  @extend %with-icon, %zoom-in-24-svg-prop;
-  background-image: var(--zoom-in-24-svg);
-}
-%with-zoom-in-24-mask {
-  @extend %with-mask, %zoom-in-24-svg-prop;
-  -webkit-mask-image: var(--zoom-in-24-svg);
-  mask-image: var(--zoom-in-24-svg);
-}
-
-%with-zoom-out-16-icon {
-  @extend %with-icon, %zoom-out-16-svg-prop;
-  background-image: var(--zoom-out-16-svg);
-}
-%with-zoom-out-16-mask {
-  @extend %with-mask, %zoom-out-16-svg-prop;
-  -webkit-mask-image: var(--zoom-out-16-svg);
-  mask-image: var(--zoom-out-16-svg);
-}
-
-%with-zoom-out-24-icon {
-  @extend %with-icon, %zoom-out-24-svg-prop;
-  background-image: var(--zoom-out-24-svg);
-}
-%with-zoom-out-24-mask {
-  @extend %with-mask, %zoom-out-24-svg-prop;
-  -webkit-mask-image: var(--zoom-out-24-svg);
-  mask-image: var(--zoom-out-24-svg);
-}
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/activity/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/activity/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/activity/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/activity/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/activity/keyframes.scss
new file mode 100644
index 0000000000..d93de6ea36
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/activity/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-activity {
+  50% {
+
+    background-color: var(--icon-color, var(--color-activity-500, currentColor));
+    -webkit-mask-image: var(--icon-activity-24);
+    mask-image: var(--icon-activity-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-activity-500, currentColor));
+    -webkit-mask-image: var(--icon-activity-16);
+    mask-image: var(--icon-activity-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/activity/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/activity/placeholders.scss
new file mode 100644
index 0000000000..22d918ee1a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/activity/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-activity-icon {
+  --icon-name: icon-activity;
+  content: '';
+}
+%with-activity-mask {
+  --icon-name: icon-activity;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-16.scss
new file mode 100644
index 0000000000..1f689c9b4c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-activity-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.016 1a.75.75 0 01.698.521l3.306 10.33 1.47-4.341A.75.75 0 0112.2 7H15a.75.75 0 010 1.5h-2.262l-2.028 5.99a.75.75 0 01-1.424-.011L5.952 4.06 4.504 8.008A.75.75 0 013.8 8.5H1A.75.75 0 111 7h2.276l2.02-5.508c.11-.301.4-.499.72-.492z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-24.scss
new file mode 100644
index 0000000000..b1f5745b83
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/activity/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-activity-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.003 2a.75.75 0 01.71.519l5.278 16.27 2.294-7.265A.75.75 0 0118 11h4a.75.75 0 010 1.5h-3.45l-2.835 8.976a.75.75 0 01-1.428.005L8.99 5.151l-2.278 6.836A.75.75 0 016 12.5H2A.75.75 0 012 11h3.46l2.828-8.487A.75.75 0 019.003 2z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/keyframes.scss
new file mode 100644
index 0000000000..b25f574dbd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-alert-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-fill-24);
+    mask-image: var(--icon-alert-circle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-fill-16);
+    mask-image: var(--icon-alert-circle-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/placeholders.scss
new file mode 100644
index 0000000000..7e2dee7476
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-alert-circle-fill-icon {
+  --icon-name: icon-alert-circle-fill;
+  content: '';
+}
+%with-alert-circle-fill-mask {
+  --icon-name: icon-alert-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-16.scss
new file mode 100644
index 0000000000..c31082f2a4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-circle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 6a1 1 0 100 2h.007a1 1 0 100-2H8z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-24.scss
new file mode 100644
index 0000000000..9580d5ef58
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-circle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm-.75 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/index.scss
new file mode 100644
index 0000000000..a963b0b952
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../alert-circle/property-16';
+        @import '../alert-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/keyframes.scss
new file mode 100644
index 0000000000..ebbb1c7cdb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-alert-circle-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-24);
+    mask-image: var(--icon-alert-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-16);
+    mask-image: var(--icon-alert-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/placeholders.scss
new file mode 100644
index 0000000000..488160184c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-alert-circle-outline-icon {
+  --icon-name: icon-alert-circle-outline;
+  content: '';
+}
+%with-alert-circle-outline-mask {
+  --icon-name: icon-alert-circle-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/keyframes.scss
new file mode 100644
index 0000000000..0dff2ba970
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-alert-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-24);
+    mask-image: var(--icon-alert-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-circle-16);
+    mask-image: var(--icon-alert-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/placeholders.scss
new file mode 100644
index 0000000000..cff1862614
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-alert-circle-icon {
+  --icon-name: icon-alert-circle;
+  content: '';
+}
+%with-alert-circle-mask {
+  --icon-name: icon-alert-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-16.scss
new file mode 100644
index 0000000000..b0bf7ac028
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zM8 10a1 1 0 100 2h.007a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-24.scss
new file mode 100644
index 0000000000..e2698487aa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/keyframes.scss
new file mode 100644
index 0000000000..8a60f995e8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-alert-octagon-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-octagon-fill-24);
+    mask-image: var(--icon-alert-octagon-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-octagon-fill-16);
+    mask-image: var(--icon-alert-octagon-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/placeholders.scss
new file mode 100644
index 0000000000..985987361f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-alert-octagon-fill-icon {
+  --icon-name: icon-alert-octagon-fill;
+  content: '';
+}
+%with-alert-octagon-fill-mask {
+  --icon-name: icon-alert-octagon-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-16.scss
new file mode 100644
index 0000000000..c9f09fb6b7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-octagon-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.882.805A2.75 2.75 0 015.827 0h4.346c.73 0 1.429.29 1.945.805l3.076 3.077A2.75 2.75 0 0116 5.827v4.346c0 .73-.29 1.429-.806 1.945l-3.076 3.076a2.75 2.75 0 01-1.945.806H5.827a2.75 2.75 0 01-1.945-.806L.805 12.118A2.75 2.75 0 010 10.173V5.827c0-.73.29-1.429.805-1.945L3.882.805zM7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zm1.75-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-24.scss
new file mode 100644
index 0000000000..a75f4f74d8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-octagon-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.585 1c-.73 0-1.429.29-1.945.805L1.805 6.64A2.75 2.75 0 001 8.585v6.83c0 .73.29 1.429.805 1.945l4.835 4.835A2.75 2.75 0 008.585 23h6.83c.73 0 1.429-.29 1.945-.805l4.835-4.835A2.75 2.75 0 0023 15.415v-6.83c0-.73-.29-1.429-.805-1.945L17.36 1.805A2.75 2.75 0 0015.415 1h-6.83zm2.665 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/keyframes.scss
new file mode 100644
index 0000000000..0f9cad04b4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-alert-octagon {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-octagon-24);
+    mask-image: var(--icon-alert-octagon-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-octagon-16);
+    mask-image: var(--icon-alert-octagon-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/placeholders.scss
new file mode 100644
index 0000000000..63250a3c82
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-alert-octagon-icon {
+  --icon-name: icon-alert-octagon;
+  content: '';
+}
+%with-alert-octagon-mask {
+  --icon-name: icon-alert-octagon;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-16.scss
new file mode 100644
index 0000000000..1ccfea0a49
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-octagon-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/><path fill-rule="evenodd" d="M3.882.805A2.75 2.75 0 015.827 0h4.346c.73 0 1.429.29 1.945.805l3.076 3.077A2.75 2.75 0 0116 5.827v4.346c0 .73-.29 1.429-.806 1.945l-3.076 3.076a2.75 2.75 0 01-1.945.806H5.827a2.75 2.75 0 01-1.945-.806L.805 12.118A2.75 2.75 0 010 10.173V5.827c0-.73.29-1.429.805-1.945L3.882.805zm1.945.695c-.332 0-.65.132-.884.366L1.866 4.943a1.25 1.25 0 00-.366.884v4.346c0 .332.132.65.366.884l3.077 3.077c.234.234.552.366.884.366h4.346c.332 0 .65-.132.884-.366l3.077-3.077a1.25 1.25 0 00.366-.884V5.827c0-.332-.132-.65-.366-.884l-3.077-3.077a1.25 1.25 0 00-.884-.366H5.827z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-24.scss
new file mode 100644
index 0000000000..62e55da9ca
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-octagon-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM12.75 7.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M6.64 1.805A2.75 2.75 0 018.585 1h6.83c.73 0 1.429.29 1.945.805l4.835 4.835A2.75 2.75 0 0123 8.585v6.83c0 .73-.29 1.429-.805 1.945l-4.835 4.835a2.75 2.75 0 01-1.945.805h-6.83a2.75 2.75 0 01-1.945-.805L1.805 17.36A2.75 2.75 0 011 15.415v-6.83c0-.73.29-1.429.805-1.945L6.64 1.805zm1.945.695c-.332 0-.65.132-.884.366L2.866 7.701a1.25 1.25 0 00-.366.884v6.83c0 .332.132.65.366.884l4.835 4.835c.234.234.552.366.884.366h6.83c.332 0 .65-.132.884-.366l4.835-4.835a1.25 1.25 0 00.366-.884v-6.83c0-.332-.132-.65-.366-.884l-4.835-4.835a1.25 1.25 0 00-.884-.366h-6.83z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/keyframes.scss
new file mode 100644
index 0000000000..90747339ae
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-alert-triangle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-triangle-fill-24);
+    mask-image: var(--icon-alert-triangle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-triangle-fill-16);
+    mask-image: var(--icon-alert-triangle-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/placeholders.scss
new file mode 100644
index 0000000000..d930c7c936
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-alert-triangle-fill-icon {
+  --icon-name: icon-alert-triangle-fill;
+  content: '';
+}
+%with-alert-triangle-fill-mask {
+  --icon-name: icon-alert-triangle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-16.scss
new file mode 100644
index 0000000000..279744f713
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-triangle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1a2.143 2.143 0 00-1.827 1.024l-5.88 9.768a2.125 2.125 0 00.762 2.915c.322.188.687.289 1.06.293h11.77a2.143 2.143 0 001.834-1.074 2.126 2.126 0 00-.006-2.124L9.829 2.028A2.149 2.149 0 008 1zM7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zm1.75-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-24.scss
new file mode 100644
index 0000000000..027ef17bc5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-triangle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2c-.472 0-.934.127-1.342.366a2.75 2.75 0 00-.984.99L1.363 17.81l-.006.01a2.86 2.86 0 00-.007 2.758c.23.423.566.778.975 1.03.41.25.877.386 1.357.392h16.637c.479-.006.947-.142 1.356-.393.41-.25.744-.606.976-1.029a2.86 2.86 0 00-.008-2.758L14.328 3.36l-.002-.004a2.75 2.75 0 00-.984-.99A2.651 2.651 0 0012 2zm-.75 6.75a.75.75 0 011.5 0v4.5a.75.75 0 01-1.5 0v-4.5zM11 17a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/keyframes.scss
new file mode 100644
index 0000000000..ebb4b46639
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-alert-triangle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-triangle-24);
+    mask-image: var(--icon-alert-triangle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
+    -webkit-mask-image: var(--icon-alert-triangle-16);
+    mask-image: var(--icon-alert-triangle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/placeholders.scss
new file mode 100644
index 0000000000..b4672e87eb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-alert-triangle-icon {
+  --icon-name: icon-alert-triangle;
+  content: '';
+}
+%with-alert-triangle-mask {
+  --icon-name: icon-alert-triangle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-16.scss
new file mode 100644
index 0000000000..10b72c4082
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-triangle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 5.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/><path fill-rule="evenodd" d="M6.953 1.273a2.143 2.143 0 012.874.751l.002.004 5.884 9.774a2.126 2.126 0 01-.768 2.905c-.322.188-.687.289-1.06.293H2.115a2.143 2.143 0 01-1.833-1.074 2.125 2.125 0 01.006-2.124l.006-.01 5.878-9.764.002-.004c.191-.313.46-.571.78-.75zm.502 1.53l-.001.002-5.872 9.754a.626.626 0 00.231.853.644.644 0 00.314.088h11.746a.643.643 0 00.544-.32.626.626 0 000-.62l-5.87-9.755-.002-.001A.635.635 0 008 2.5a.643.643 0 00-.545.304z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-24.scss
new file mode 100644
index 0000000000..9ff79e1002
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alert-triangle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11 17a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM12.75 8.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M10.658 2.366a2.651 2.651 0 012.684 0c.407.239.745.581.984.99l.002.004 8.315 14.46a2.86 2.86 0 01.008 2.758 2.757 2.757 0 01-.976 1.03c-.41.25-.877.386-1.357.392H3.682a2.653 2.653 0 01-1.357-.393 2.757 2.757 0 01-.975-1.029 2.86 2.86 0 01.007-2.758l.006-.01 8.31-14.45.001-.004a2.75 2.75 0 01.984-.99zm.313 1.744v.001L2.665 18.552a1.36 1.36 0 000 1.306c.108.198.262.36.443.47.18.11.382.169.586.172h16.61c.204-.003.406-.061.586-.172.181-.11.335-.272.444-.47a1.361 1.361 0 00-.001-1.306L13.03 4.112l-.001-.002a1.25 1.25 0 00-.446-.45 1.151 1.151 0 00-1.166 0 1.25 1.25 0 00-.446.45z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/keyframes.scss
new file mode 100644
index 0000000000..c627c25b01
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-alibaba-color {
+  50% {
+    background-image: var(--icon-alibaba-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-alibaba-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/placeholders.scss
new file mode 100644
index 0000000000..a17b145740
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-alibaba-color-icon {
+  --icon-name: icon-alibaba-color;
+  content: '';
+}
+%with-alibaba-color-mask {
+  --icon-name: icon-alibaba-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-16.scss
new file mode 100644
index 0000000000..20dfffbf2c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alibaba-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23ED6B1E"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-24.scss
new file mode 100644
index 0000000000..e960532eb9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alibaba-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23ED6B1E"><path d="M15.21 11.248H8.805v1.44h6.405v-1.44z"/><path d="M18.405 6h-4.233l1.022 1.456 3.1.944c.574.176.942.72.926 1.28v4.64a1.34 1.34 0 01-.927 1.28l-3.082.944L14.171 18h4.233a3.196 3.196 0 003.195-3.2V9.2c.016-1.76-1.422-3.2-3.195-3.2zM5.595 6h4.232L8.805 7.456 5.722 8.4c-.575.176-.942.72-.926 1.28v4.64c0 .576.367 1.104.926 1.28l3.083.944L9.827 18H5.595A3.207 3.207 0 012.4 14.8V9.2C2.4 7.44 3.838 6 5.595 6z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/index.scss
new file mode 100644
index 0000000000..273941a41a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../alibaba-color/property-16';
+        @import '../alibaba-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/keyframes.scss
new file mode 100644
index 0000000000..5ee3d3e4ff
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-alibaba {
+  50% {
+
+    background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
+    -webkit-mask-image: var(--icon-alibaba-color-24);
+    mask-image: var(--icon-alibaba-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
+    -webkit-mask-image: var(--icon-alibaba-color-16);
+    mask-image: var(--icon-alibaba-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/placeholders.scss
new file mode 100644
index 0000000000..e5ee4e0bee
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-alibaba-icon {
+  --icon-name: icon-alibaba;
+  content: '';
+}
+%with-alibaba-mask {
+  --icon-name: icon-alibaba;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-16.scss
new file mode 100644
index 0000000000..44de5affac
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alibaba-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-24.scss
new file mode 100644
index 0000000000..7234eb99bd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-alibaba-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.676 7.373H5.338v1.2h5.338v-1.2z"/><path d="M13.338 3H9.81l.852 1.213L13.244 5c.48.147.786.6.773 1.067v3.866c0 .48-.307.92-.772 1.067l-2.57.787L9.81 13h3.528C14.815 13 16 11.8 16 10.333V5.667C16.013 4.2 14.815 3 13.338 3zM2.662 3H6.19l-.852 1.213L2.768 5c-.478.147-.785.6-.771 1.067v3.866c0 .48.306.92.772 1.067l2.569.787L6.19 13H2.662A2.672 2.672 0 010 10.333V5.667A2.672 2.672 0 012.662 3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/keyframes.scss
new file mode 100644
index 0000000000..1298dfbe44
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-align-center {
+  50% {
+
+    background-color: var(--icon-color, var(--color-align-center-500, currentColor));
+    -webkit-mask-image: var(--icon-align-center-24);
+    mask-image: var(--icon-align-center-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-align-center-500, currentColor));
+    -webkit-mask-image: var(--icon-align-center-16);
+    mask-image: var(--icon-align-center-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/placeholders.scss
new file mode 100644
index 0000000000..8a76bfb670
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-align-center-icon {
+  --icon-name: icon-align-center;
+  content: '';
+}
+%with-align-center-mask {
+  --icon-name: icon-align-center;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-16.scss
new file mode 100644
index 0000000000..0a574f2c1e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-align-center-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM3.75 6a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM3.75 12a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-24.scss
new file mode 100644
index 0000000000..b86305eac6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-center/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-align-center-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM5.75 9a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H5.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM5.75 17a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H5.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/keyframes.scss
new file mode 100644
index 0000000000..596918634b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-align-justify {
+  50% {
+
+    background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
+    -webkit-mask-image: var(--icon-align-justify-24);
+    mask-image: var(--icon-align-justify-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
+    -webkit-mask-image: var(--icon-align-justify-16);
+    mask-image: var(--icon-align-justify-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/placeholders.scss
new file mode 100644
index 0000000000..f8ba5d41fe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-align-justify-icon {
+  --icon-name: icon-align-justify;
+  content: '';
+}
+%with-align-justify-mask {
+  --icon-name: icon-align-justify;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-16.scss
new file mode 100644
index 0000000000..7d89e8d890
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-align-justify-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1.75 6a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM1.75 12a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-24.scss
new file mode 100644
index 0000000000..181c47211b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-align-justify-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2.75 9a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/keyframes.scss
new file mode 100644
index 0000000000..7febe2c220
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-align-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-align-left-500, currentColor));
+    -webkit-mask-image: var(--icon-align-left-24);
+    mask-image: var(--icon-align-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-align-left-500, currentColor));
+    -webkit-mask-image: var(--icon-align-left-16);
+    mask-image: var(--icon-align-left-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/placeholders.scss
new file mode 100644
index 0000000000..207209857a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-align-left-icon {
+  --icon-name: icon-align-left;
+  content: '';
+}
+%with-align-left-mask {
+  --icon-name: icon-align-left;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-16.scss
new file mode 100644
index 0000000000..0f53c2474c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-align-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM1.75 6a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM1.75 12a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-24.scss
new file mode 100644
index 0000000000..2038936a92
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-left/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-align-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM2.75 9a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H2.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/keyframes.scss
new file mode 100644
index 0000000000..5bb687c047
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-align-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-align-right-500, currentColor));
+    -webkit-mask-image: var(--icon-align-right-24);
+    mask-image: var(--icon-align-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-align-right-500, currentColor));
+    -webkit-mask-image: var(--icon-align-right-16);
+    mask-image: var(--icon-align-right-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/placeholders.scss
new file mode 100644
index 0000000000..20491a9b21
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-align-right-icon {
+  --icon-name: icon-align-right;
+  content: '';
+}
+%with-align-right-mask {
+  --icon-name: icon-align-right;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-16.scss
new file mode 100644
index 0000000000..4982305a13
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-align-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 3a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM4.75 6a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM1 9.75A.75.75 0 011.75 9h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 9.75zM4.75 12a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-24.scss
new file mode 100644
index 0000000000..e122ceaeed
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/align-right/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-align-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.75 5a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75zM6.75 9a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H6.75zM2 13.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM6.75 17a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H6.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/keyframes.scss
new file mode 100644
index 0000000000..38ce14cd7f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-amazon-eks-color {
+  50% {
+    background-image: var(--icon-amazon-eks-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-amazon-eks-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/placeholders.scss
new file mode 100644
index 0000000000..0519daccfe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-amazon-eks-color-icon {
+  --icon-name: icon-amazon-eks-color;
+  content: '';
+}
+%with-amazon-eks-color-mask {
+  --icon-name: icon-amazon-eks-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-16.scss
new file mode 100644
index 0000000000..180700adda
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-amazon-eks-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="url(%23amazon-eks-color-16__paint0_linear_879_141)" fill-rule="evenodd" d="M6.381 10.148h.897V8.121l1.837 2.027h1.164L7.997 7.642l2.169-2.195H8.963L7.278 7.146V5.447h-.897v4.701z" clip-rule="evenodd"/><path fill="url(%23amazon-eks-color-16__paint1_linear_879_141)" d="M8.532 3.803l3.186 1.81a.173.173 0 01.088.149v3.62c0 .06.033.118.088.149l2.842 1.615a.176.176 0 00.264-.15V3.947a.173.173 0 00-.088-.15L8.708.274a.176.176 0 00-.264.15v3.23c0 .062.034.119.088.15z"/><path fill="url(%23amazon-eks-color-16__paint2_linear_879_141)" d="M11.273 10.288l-3.185 1.81a.178.178 0 01-.176 0l-3.63-2.062a.173.173 0 01-.088-.15V5.762c0-.062.034-.119.088-.15l3.186-1.81a.172.172 0 00.088-.15V.424a.176.176 0 00-.264-.15L1.088 3.798a.173.173 0 00-.088.15V11.7c0 .061.033.118.088.15l6.824 3.876c.054.03.122.03.176 0l6.204-3.524a.172.172 0 000-.3l-2.843-1.615a.178.178 0 00-.176 0z"/><defs><linearGradient id="amazon-eks-color-16__paint0_linear_879_141" x1="10.691" x2="8.521" y1="9.879" y2="4.634" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-16__paint1_linear_879_141" x1="15.693" x2="9.546" y1="10.544" y2="-.213" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-16__paint2_linear_879_141" x1="9.433" x2="2.732" y1="14.904" y2="2.88" gradientUnits="userSpaceOnUse"><stop stop-color="%232775FF"/><stop offset="1" stop-color="%23188DFF"/></linearGradient></defs></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-24.scss
new file mode 100644
index 0000000000..7a5030427a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-amazon-eks-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="url(%23amazon-eks-color-24__paint0_linear_879_136)" d="M9.866 8.473h.924v2.725l2.661-2.725h1.22l-2.92 3.002 3.105 3.465h-1.183l-2.883-3.233v3.233h-.924V8.473z"/><path fill="url(%23amazon-eks-color-24__paint1_linear_879_136)" d="M12.76 5.907l4.551 2.627a.252.252 0 01.126.217v5.254c0 .09.048.172.125.217l4.061 2.344A.251.251 0 0022 16.35V6.117a.251.251 0 00-.125-.217L13.012.784a.251.251 0 00-.377.217V5.69c0 .09.048.172.126.217z"/><path fill="url(%23amazon-eks-color-24__paint2_linear_879_136)" d="M16.676 15.322l-4.55 2.626a.25.25 0 01-.252 0L6.69 14.955a.252.252 0 01-.126-.217V8.75c0-.09.048-.172.126-.217l4.55-2.627a.25.25 0 00.126-.217V1a.251.251 0 00-.377-.217L2.125 5.9A.251.251 0 002 6.117v11.255c0 .09.048.172.125.217l9.75 5.627a.25.25 0 00.25 0l8.863-5.115a.251.251 0 000-.435l-4.06-2.344a.25.25 0 00-.252 0z"/><defs><linearGradient id="amazon-eks-color-24__paint0_linear_879_136" x1="15.383" x2="12.246" y1="14.57" y2="7.514" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-24__paint1_linear_879_136" x1="22.99" x2="13.995" y1="15.694" y2=".202" gradientUnits="userSpaceOnUse"><stop stop-color="%23426DDB"/><stop offset="1" stop-color="%233B4BDB"/></linearGradient><linearGradient id="amazon-eks-color-24__paint2_linear_879_136" x1="14.046" x2="4.239" y1="22.021" y2="4.702" gradientUnits="userSpaceOnUse"><stop stop-color="%232775FF"/><stop offset="1" stop-color="%23188DFF"/></linearGradient></defs></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/index.scss
new file mode 100644
index 0000000000..6e79aade9a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../amazon-eks-color/property-16';
+        @import '../amazon-eks-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/keyframes.scss
new file mode 100644
index 0000000000..903bdbf068
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-amazon-eks {
+  50% {
+
+    background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
+    -webkit-mask-image: var(--icon-amazon-eks-color-24);
+    mask-image: var(--icon-amazon-eks-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
+    -webkit-mask-image: var(--icon-amazon-eks-color-16);
+    mask-image: var(--icon-amazon-eks-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/placeholders.scss
new file mode 100644
index 0000000000..3e75be00b0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-amazon-eks-icon {
+  --icon-name: icon-amazon-eks;
+  content: '';
+}
+%with-amazon-eks-mask {
+  --icon-name: icon-amazon-eks;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/property-16.scss
new file mode 100644
index 0000000000..769cdd3af8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-amazon-eks-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.088 12.098l3.185-1.81a.178.178 0 01.176 0l2.843 1.615a.172.172 0 010 .3l-6.204 3.524a.178.178 0 01-.176 0L1.088 11.85A.173.173 0 011 11.7V3.947c0-.061.033-.118.088-.15L7.292.274a.176.176 0 01.264.15v3.23a.172.172 0 01-.088.15l-3.186 1.81a.173.173 0 00-.088.149v4.124c0 .062.034.119.088.15l3.63 2.062c.054.03.122.03.176 0z"/><path d="M8.532 3.803l3.186 1.81a.173.173 0 01.088.149v3.62c0 .06.033.118.088.149l2.842 1.615a.176.176 0 00.264-.15V3.947a.173.173 0 00-.088-.15L8.708.274a.176.176 0 00-.264.15v3.23c0 .062.034.119.088.15z"/><path d="M6.381 10.148h.897V8.121l1.837 2.027h1.164L7.997 7.642l2.168-2.195H8.963L7.278 7.146V5.447h-.897v4.701z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/property-24.scss
new file mode 100644
index 0000000000..03ffc21b81
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-amazon-eks-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.088 12.098l3.185-1.81a.178.178 0 01.176 0l2.843 1.615a.172.172 0 010 .3l-6.204 3.524a.178.178 0 01-.176 0L1.088 11.85A.173.173 0 011 11.7V3.947c0-.061.033-.118.088-.15L7.292.274a.176.176 0 01.264.15v3.23a.172.172 0 01-.088.15l-3.186 1.81a.173.173 0 00-.088.149v4.124c0 .062.034.119.088.15l3.63 2.062c.054.03.122.03.176 0z"/><path d="M8.532 3.803l3.186 1.81a.173.173 0 01.088.149v3.62c0 .06.033.118.088.149l2.842 1.615a.176.176 0 00.264-.15V3.947a.173.173 0 00-.088-.15L8.708.274a.176.176 0 00-.264.15v3.23c0 .062.034.119.088.15z"/><path d="M6.381 10.148h.897V8.121l1.837 2.027h1.164L7.997 7.642l2.168-2.195H8.963L7.278 7.146V5.447h-.897v4.701z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/keyframes.scss
new file mode 100644
index 0000000000..093b3147ed
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-apple-color {
+  50% {
+    background-image: var(--icon-apple-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-apple-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/placeholders.scss
new file mode 100644
index 0000000000..5571b8471a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-apple-color-icon {
+  --icon-name: icon-apple-color;
+  content: '';
+}
+%with-apple-color-mask {
+  --icon-name: icon-apple-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/property-16.scss
new file mode 100644
index 0000000000..877e851c29
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-apple-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M10.167 3.242c.435-.523.742-1.24.742-1.958 0-.105-.008-.202-.03-.284-.704.03-1.55.47-2.06 1.069-.397.448-.772 1.173-.772 1.891 0 .112.023.217.03.254.045.008.12.015.188.015.636 0 1.43-.419 1.902-.987zm.495 1.144c-1.057 0-1.918.643-2.465.643-.591 0-1.355-.606-2.284-.606C4.168 4.423 2.4 5.866 2.4 8.58c0 1.697.652 3.49 1.46 4.642C4.557 14.193 5.164 15 6.04 15c.869 0 1.251-.575 2.33-.575 1.093 0 1.333.56 2.292.56.95 0 1.587-.867 2.18-1.727.673-.986.95-1.943.958-1.988-.053-.015-1.873-.755-1.873-2.833 0-1.794 1.431-2.6 1.513-2.66-.943-1.354-2.381-1.391-2.778-1.391z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/property-24.scss
new file mode 100644
index 0000000000..37436ded7a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-apple-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M15.073 5.203c.62-.747 1.057-1.772 1.057-2.797 0-.15-.01-.289-.042-.406-1.004.043-2.21.673-2.937 1.527-.566.64-1.1 1.676-1.1 2.702 0 .16.032.31.043.363.064.01.17.02.267.02.908 0 2.04-.597 2.712-1.409zm.705 1.634c-1.506 0-2.734.918-3.513.918-.844 0-1.933-.864-3.257-.864C6.52 6.89 4 8.95 4 12.828c0 2.424.929 4.986 2.082 6.63C7.075 20.848 7.94 22 9.19 22c1.238 0 1.783-.822 3.32-.822 1.56 0 1.901.8 3.268.8 1.356 0 2.264-1.238 3.107-2.466.961-1.41 1.356-2.776 1.367-2.84-.075-.022-2.67-1.079-2.67-4.047 0-2.563 2.04-3.716 2.157-3.802-1.345-1.932-3.395-1.986-3.961-1.986z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/apple/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/apple/index.scss
new file mode 100644
index 0000000000..44e7424844
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/apple/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../apple-color/property-16';
+        @import '../apple-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/apple/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/apple/keyframes.scss
new file mode 100644
index 0000000000..58ab71fcca
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/apple/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-apple {
+  50% {
+
+    background-color: var(--icon-color, var(--color-apple-500, currentColor));
+    -webkit-mask-image: var(--icon-apple-color-24);
+    mask-image: var(--icon-apple-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-apple-500, currentColor));
+    -webkit-mask-image: var(--icon-apple-color-16);
+    mask-image: var(--icon-apple-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/apple/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/apple/placeholders.scss
new file mode 100644
index 0000000000..f20003f851
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/apple/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-apple-icon {
+  --icon-name: icon-apple;
+  content: '';
+}
+%with-apple-mask {
+  --icon-name: icon-apple;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/apple/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/apple/property-16.scss
new file mode 100644
index 0000000000..2972ce9ca0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/apple/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-apple-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M10.167 3.242c.435-.523.742-1.24.742-1.958 0-.105-.008-.202-.03-.284-.704.03-1.55.47-2.06 1.069-.397.448-.772 1.173-.772 1.891 0 .112.023.217.03.254.045.008.12.015.188.015.636 0 1.43-.419 1.902-.987zm.495 1.144c-1.057 0-1.918.643-2.465.643-.591 0-1.355-.606-2.284-.606C4.168 4.423 2.4 5.866 2.4 8.58c0 1.697.652 3.491 1.46 4.642C4.557 14.193 5.164 15 6.04 15c.869 0 1.251-.575 2.33-.575 1.093 0 1.333.56 2.292.56.95 0 1.587-.867 2.18-1.727.673-.986.95-1.943.958-1.988-.053-.015-1.873-.755-1.873-2.833 0-1.794 1.431-2.6 1.513-2.66-.943-1.354-2.381-1.391-2.778-1.391z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/apple/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/apple/property-24.scss
new file mode 100644
index 0000000000..43d83405b4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/apple/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-apple-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M10.167 3.242c.435-.523.742-1.24.742-1.958 0-.105-.008-.202-.03-.284-.704.03-1.55.47-2.06 1.069-.397.448-.772 1.173-.772 1.891 0 .112.023.217.03.254.045.008.12.015.188.015.636 0 1.43-.419 1.902-.987zm.495 1.144c-1.057 0-1.918.643-2.465.643-.591 0-1.355-.606-2.284-.606C4.168 4.423 2.4 5.866 2.4 8.58c0 1.697.652 3.491 1.46 4.642C4.557 14.193 5.164 15 6.04 15c.869 0 1.251-.575 2.33-.575 1.093 0 1.333.56 2.292.56.95 0 1.587-.867 2.18-1.727.673-.986.95-1.943.958-1.988-.053-.015-1.873-.755-1.873-2.833 0-1.794 1.431-2.6 1.513-2.66-.943-1.354-2.381-1.391-2.778-1.391z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/archive/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/archive/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/archive/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/archive/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/archive/keyframes.scss
new file mode 100644
index 0000000000..531cf21f06
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/archive/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-archive {
+  50% {
+
+    background-color: var(--icon-color, var(--color-archive-500, currentColor));
+    -webkit-mask-image: var(--icon-archive-24);
+    mask-image: var(--icon-archive-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-archive-500, currentColor));
+    -webkit-mask-image: var(--icon-archive-16);
+    mask-image: var(--icon-archive-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/archive/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/archive/placeholders.scss
new file mode 100644
index 0000000000..369b753d4a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/archive/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-archive-icon {
+  --icon-name: icon-archive;
+  content: '';
+}
+%with-archive-mask {
+  --icon-name: icon-archive;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/archive/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/archive/property-16.scss
new file mode 100644
index 0000000000..2ff75b256d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/archive/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-archive-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.75 8a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"/><path fill-rule="evenodd" d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v1.5c0 .698-.409 1.3-1 1.582v6.918A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75V5.832A1.75 1.75 0 010 4.25v-1.5zm13.5 10V6h-11v6.75c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75zm1-8.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-1.5a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v1.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/archive/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/archive/property-24.scss
new file mode 100644
index 0000000000..5bc3aa6c23
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/archive/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-archive-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.75 11a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/><path fill-rule="evenodd" d="M1 4.25A2.25 2.25 0 013.25 2h17.5A2.25 2.25 0 0123 4.25v1.5c0 .78-.397 1.467-1 1.871V19.25A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V7.621A2.248 2.248 0 011 5.75v-1.5zM3.5 8h17v11.25c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V8zm-.25-4.5a.75.75 0 00-.75.75v1.5c0 .414.336.75.75.75h17.5a.75.75 0 00.75-.75v-1.5a.75.75 0 00-.75-.75H3.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/keyframes.scss
new file mode 100644
index 0000000000..bd1289cd7e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-down-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-down-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-down-circle-24);
+    mask-image: var(--icon-arrow-down-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-down-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-down-circle-16);
+    mask-image: var(--icon-arrow-down-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/placeholders.scss
new file mode 100644
index 0000000000..f15373c44d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-down-circle-icon {
+  --icon-name: icon-arrow-down-circle;
+  content: '';
+}
+%with-arrow-down-circle-mask {
+  --icon-name: icon-arrow-down-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/property-16.scss
new file mode 100644
index 0000000000..495522b58e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-down-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/><path d="M5.755 8.195a.75.75 0 00-1.01 1.11l2.75 2.5a.748.748 0 001.01 0l2.75-2.5a.75.75 0 10-1.01-1.11L8.75 9.555V4.75a.75.75 0 00-1.5 0v4.805l-1.495-1.36z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/property-24.scss
new file mode 100644
index 0000000000..28ae582660
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-down-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 6a.75.75 0 01.75.75v8.614l2.955-3.129a.75.75 0 011.09 1.03l-4.25 4.5a.541.541 0 01-.068.064.747.747 0 01-.465.17L12 18h-.012a.748.748 0 01-.535-.237l-4.248-4.498a.75.75 0 011.09-1.03l2.955 3.129V6.75A.75.75 0 0112 6z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/keyframes.scss
new file mode 100644
index 0000000000..1fcc8aa1d0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-down-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-down-left-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-down-left-24);
+    mask-image: var(--icon-arrow-down-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-down-left-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-down-left-16);
+    mask-image: var(--icon-arrow-down-left-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/placeholders.scss
new file mode 100644
index 0000000000..e9e2c73fcc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-down-left-icon {
+  --icon-name: icon-arrow-down-left;
+  content: '';
+}
+%with-arrow-down-left-mask {
+  --icon-name: icon-arrow-down-left;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/property-16.scss
new file mode 100644
index 0000000000..0c18ddd2c9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-down-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.78 4.28a.75.75 0 00-1.06-1.06L4.5 10.44V6.75a.75.75 0 00-1.5 0v5.5a.748.748 0 00.75.75h5.5a.75.75 0 000-1.5H5.56l7.22-7.22z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/property-24.scss
new file mode 100644
index 0000000000..22ea7f7c5b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-down-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M18.78 6.28a.75.75 0 00-1.06-1.06L6.5 16.44V8.75a.75.75 0 00-1.5 0v9.5a.748.748 0 00.218.529l.002.001.001.002A.748.748 0 005.75 19h9.5a.75.75 0 000-1.5H7.56L18.78 6.28z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/keyframes.scss
new file mode 100644
index 0000000000..1774cc95d7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-down-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-down-right-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-down-right-24);
+    mask-image: var(--icon-arrow-down-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-down-right-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-down-right-16);
+    mask-image: var(--icon-arrow-down-right-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/placeholders.scss
new file mode 100644
index 0000000000..1d3b5dd7cc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-down-right-icon {
+  --icon-name: icon-arrow-down-right;
+  content: '';
+}
+%with-arrow-down-right-mask {
+  --icon-name: icon-arrow-down-right;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/property-16.scss
new file mode 100644
index 0000000000..099d6a7fd8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-down-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M3.22 4.28a.75.75 0 011.06-1.06l7.22 7.22V6.75a.75.75 0 011.5 0v5.5a.747.747 0 01-.75.75h-5.5a.75.75 0 010-1.5h3.69L3.22 4.28z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/property-24.scss
new file mode 100644
index 0000000000..5acf913ac4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-down-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M5.22 7.28a.75.75 0 011.06-1.06L17.5 17.44V9.75a.75.75 0 011.5 0v9.5a.747.747 0 01-.75.75h-9.5a.75.75 0 010-1.5h7.69L5.22 7.28z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/keyframes.scss
new file mode 100644
index 0000000000..86b99ff7bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-down {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-down-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-down-24);
+    mask-image: var(--icon-arrow-down-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-down-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-down-16);
+    mask-image: var(--icon-arrow-down-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/placeholders.scss
new file mode 100644
index 0000000000..18c88f7209
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-down-icon {
+  --icon-name: icon-arrow-down;
+  content: '';
+}
+%with-arrow-down-mask {
+  --icon-name: icon-arrow-down;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/property-16.scss
new file mode 100644
index 0000000000..88097c7cd3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-down-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8.5 2.75a.75.75 0 00-1.5 0v8.614L4.045 8.235a.75.75 0 00-1.09 1.03l4.248 4.498a.862.862 0 00.025.026.747.747 0 00.51.21L7.75 14h.012a.747.747 0 00.533-.235l4.25-4.5a.75.75 0 00-1.09-1.03L8.5 11.364V2.75z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/property-24.scss
new file mode 100644
index 0000000000..3055692ce0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-down-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12.5 3.75a.75.75 0 00-1.5 0v14.645l-5.96-6.166a.75.75 0 00-1.08 1.042l7.25 7.5a.75.75 0 001.08 0l7.25-7.5a.75.75 0 10-1.08-1.042l-5.96 6.166V3.75z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/keyframes.scss
new file mode 100644
index 0000000000..1cee4a95f8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-left-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-left-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-left-circle-24);
+    mask-image: var(--icon-arrow-left-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-left-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-left-circle-16);
+    mask-image: var(--icon-arrow-left-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/placeholders.scss
new file mode 100644
index 0000000000..669ec363c4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-left-circle-icon {
+  --icon-name: icon-arrow-left-circle;
+  content: '';
+}
+%with-arrow-left-circle-mask {
+  --icon-name: icon-arrow-left-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/property-16.scss
new file mode 100644
index 0000000000..79146ff1f9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-left-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.755 4.695a.75.75 0 01.05 1.06L6.445 7.25h4.805a.75.75 0 010 1.5H6.445l1.36 1.495a.75.75 0 01-1.11 1.01l-2.499-2.75A.747.747 0 014 8.003v-.004c0-.195.075-.372.197-.505l2.498-2.748a.75.75 0 011.06-.05z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/property-24.scss
new file mode 100644
index 0000000000..a86e4a4685
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-left-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.636 11.25l3.129-2.955a.75.75 0 00-1.03-1.09l-4.498 4.248a.748.748 0 00-.007 1.088M6.236 12.546l4.499 4.25a.75.75 0 001.03-1.091L8.636 12.75h8.614a.75.75 0 000-1.5H8.636"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/keyframes.scss
new file mode 100644
index 0000000000..8cce9418b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-left-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-left-24);
+    mask-image: var(--icon-arrow-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-left-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-left-16);
+    mask-image: var(--icon-arrow-left-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/placeholders.scss
new file mode 100644
index 0000000000..3d0050397f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-left-icon {
+  --icon-name: icon-arrow-left;
+  content: '';
+}
+%with-arrow-left-mask {
+  --icon-name: icon-arrow-left;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/property-16.scss
new file mode 100644
index 0000000000..2deb9ffc80
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M7.765 4.045a.75.75 0 10-1.03-1.09L2.237 7.203a.748.748 0 00-.001 1.093l4.499 4.25a.75.75 0 001.03-1.091L4.636 8.5h8.614a.75.75 0 000-1.5H4.636l3.129-2.955z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/property-24.scss
new file mode 100644
index 0000000000..9c8953d803
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M11.771 5.04a.75.75 0 00-1.042-1.08l-7.5 7.25a.75.75 0 000 1.08l7.5 7.25a.75.75 0 101.042-1.08L5.605 12.5H20.25a.75.75 0 000-1.5H5.605l6.166-5.96z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/keyframes.scss
new file mode 100644
index 0000000000..fd5a19fda6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-right-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-right-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-right-circle-24);
+    mask-image: var(--icon-arrow-right-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-right-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-right-circle-16);
+    mask-image: var(--icon-arrow-right-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/placeholders.scss
new file mode 100644
index 0000000000..fa174ffa6f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-right-circle-icon {
+  --icon-name: icon-arrow-right-circle;
+  content: '';
+}
+%with-arrow-right-circle-mask {
+  --icon-name: icon-arrow-right-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/property-16.scss
new file mode 100644
index 0000000000..46fa970b4d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-right-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.245 4.695a.75.75 0 00-.05 1.06l1.36 1.495H4.75a.75.75 0 000 1.5h4.805l-1.36 1.495a.75.75 0 001.11 1.01l2.5-2.75a.75.75 0 000-1.01l-2.5-2.75a.75.75 0 00-1.06-.05z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/property-24.scss
new file mode 100644
index 0000000000..8ff08392f3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-right-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6 12a.75.75 0 01.75-.75h8.614l-3.129-2.955a.75.75 0 011.03-1.09l4.5 4.25a.75.75 0 010 1.09l-4.5 4.25a.75.75 0 01-1.03-1.09l3.129-2.955H6.75A.75.75 0 016 12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/keyframes.scss
new file mode 100644
index 0000000000..080afe5de8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-right-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-right-24);
+    mask-image: var(--icon-arrow-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-right-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-right-16);
+    mask-image: var(--icon-arrow-right-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/placeholders.scss
new file mode 100644
index 0000000000..6acc5f41a9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-right-icon {
+  --icon-name: icon-arrow-right;
+  content: '';
+}
+%with-arrow-right-mask {
+  --icon-name: icon-arrow-right;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/property-16.scss
new file mode 100644
index 0000000000..566239898a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8.235 4.045a.75.75 0 111.03-1.09l4.5 4.25a.75.75 0 010 1.09l-4.5 4.25a.75.75 0 01-1.03-1.09L11.364 8.5H2.75a.75.75 0 010-1.5h8.614L8.235 4.045z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/property-24.scss
new file mode 100644
index 0000000000..064daa1a90
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12.229 5.04a.75.75 0 011.042-1.08l7.5 7.25a.75.75 0 010 1.08l-7.5 7.25a.75.75 0 11-1.042-1.08l6.166-5.96H3.75a.75.75 0 010-1.5h14.645l-6.166-5.96z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/keyframes.scss
new file mode 100644
index 0000000000..38fc7a22db
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-up-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-up-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-up-circle-24);
+    mask-image: var(--icon-arrow-up-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-up-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-up-circle-16);
+    mask-image: var(--icon-arrow-up-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/placeholders.scss
new file mode 100644
index 0000000000..2f01389520
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-up-circle-icon {
+  --icon-name: icon-arrow-up-circle;
+  content: '';
+}
+%with-arrow-up-circle-mask {
+  --icon-name: icon-arrow-up-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/property-16.scss
new file mode 100644
index 0000000000..f1976b8251
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-up-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.695 7.755a.75.75 0 001.06.05l1.495-1.36v4.805a.75.75 0 001.5 0V6.445l1.495 1.36a.75.75 0 001.01-1.11l-2.75-2.5a.75.75 0 00-1.01 0l-2.75 2.5a.75.75 0 00-.05 1.06z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/property-24.scss
new file mode 100644
index 0000000000..b44ffd2208
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-up-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.75 8.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 001.09 1.03l2.955-3.129v8.614a.75.75 0 001.5 0V8.636z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/keyframes.scss
new file mode 100644
index 0000000000..821fed4c4c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-up-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-up-left-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-up-left-24);
+    mask-image: var(--icon-arrow-up-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-up-left-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-up-left-16);
+    mask-image: var(--icon-arrow-up-left-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/placeholders.scss
new file mode 100644
index 0000000000..0573bc8e8d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-up-left-icon {
+  --icon-name: icon-arrow-up-left;
+  content: '';
+}
+%with-arrow-up-left-mask {
+  --icon-name: icon-arrow-up-left;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/property-16.scss
new file mode 100644
index 0000000000..f579464acc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-up-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M3.057 3.463A.748.748 0 013.75 3h5.5a.75.75 0 010 1.5H5.56l7.22 7.22a.75.75 0 11-1.06 1.06L4.5 5.56v3.69a.75.75 0 01-1.5 0v-5.5c0-.102.02-.199.057-.287z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/property-24.scss
new file mode 100644
index 0000000000..e10c56c066
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-up-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M6.5 15.25a.75.75 0 01-1.5 0v-9.5c0-.206.083-.393.218-.529l.002-.001.001-.002A.748.748 0 015.75 5h9.5a.75.75 0 010 1.5H7.56l11.22 11.22a.75.75 0 11-1.06 1.06L6.5 7.56v7.69z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/keyframes.scss
new file mode 100644
index 0000000000..3f79cdbdf6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-up-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-up-right-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-up-right-24);
+    mask-image: var(--icon-arrow-up-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-up-right-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-up-right-16);
+    mask-image: var(--icon-arrow-up-right-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/placeholders.scss
new file mode 100644
index 0000000000..1c7af1b121
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-up-right-icon {
+  --icon-name: icon-arrow-up-right;
+  content: '';
+}
+%with-arrow-up-right-mask {
+  --icon-name: icon-arrow-up-right;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/property-16.scss
new file mode 100644
index 0000000000..77d57b411a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-up-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.943 3.463A.748.748 0 0012.25 3h-5.5a.75.75 0 000 1.5h3.69l-7.22 7.22a.75.75 0 101.06 1.06l7.22-7.22v3.69a.75.75 0 001.5 0v-5.5a.747.747 0 00-.057-.287z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/property-24.scss
new file mode 100644
index 0000000000..632486722e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-up-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M18.943 5.463a.748.748 0 00-.161-.242l-.002-.001-.001-.002A.748.748 0 0018.25 5h-9.5a.75.75 0 000 1.5h7.69L5.22 17.72a.75.75 0 101.06 1.06L17.5 7.56v7.69a.75.75 0 001.5 0v-9.5a.747.747 0 00-.057-.287z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/keyframes.scss
new file mode 100644
index 0000000000..f68bf3d022
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-arrow-up {
+  50% {
+
+    background-color: var(--icon-color, var(--color-arrow-up-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-up-24);
+    mask-image: var(--icon-arrow-up-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-arrow-up-500, currentColor));
+    -webkit-mask-image: var(--icon-arrow-up-16);
+    mask-image: var(--icon-arrow-up-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/placeholders.scss
new file mode 100644
index 0000000000..3b4a24e209
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-arrow-up-icon {
+  --icon-name: icon-arrow-up;
+  content: '';
+}
+%with-arrow-up-mask {
+  --icon-name: icon-arrow-up;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/property-16.scss
new file mode 100644
index 0000000000..c9eeaa208a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-up-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M4.045 7.765a.75.75 0 11-1.09-1.03l4.25-4.5a.75.75 0 011.09 0l4.25 4.5a.75.75 0 01-1.09 1.03L8.5 4.636v8.614a.75.75 0 01-1.5 0V4.636L4.045 7.765z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/property-24.scss
new file mode 100644
index 0000000000..7e7240b420
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-arrow-up-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M5.04 10.771A.75.75 0 013.96 9.73l7.25-7.5a.75.75 0 011.08 0l7.25 7.5a.75.75 0 11-1.08 1.042L12.5 4.605V20.25a.75.75 0 01-1.5 0V4.605l-5.96 6.166z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/keyframes.scss
new file mode 100644
index 0000000000..c3fa6f70cf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-at-sign {
+  50% {
+
+    background-color: var(--icon-color, var(--color-at-sign-500, currentColor));
+    -webkit-mask-image: var(--icon-at-sign-24);
+    mask-image: var(--icon-at-sign-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-at-sign-500, currentColor));
+    -webkit-mask-image: var(--icon-at-sign-16);
+    mask-image: var(--icon-at-sign-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/placeholders.scss
new file mode 100644
index 0000000000..93ebf35b67
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-at-sign-icon {
+  --icon-name: icon-at-sign;
+  content: '';
+}
+%with-at-sign-mask {
+  --icon-name: icon-at-sign;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/property-16.scss
new file mode 100644
index 0000000000..27c8a77986
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-at-sign-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.818.21a8 8 0 103.046 14.141.75.75 0 10-.912-1.19A6.5 6.5 0 1114.5 8v1c0 .908-.54 1.5-1.25 1.5-.4 0-.691-.157-.894-.399C12.142 9.847 12 9.463 12 9V4.75a.75.75 0 00-1.5 0v.127a4 4 0 10.449 5.825c.076.128.162.25.258.364.484.577 1.194.934 2.043.934C15.04 12 16 10.461 16 9V8A8 8 0 009.818.21zM10.5 8a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/property-24.scss
new file mode 100644
index 0000000000..b7d543c215
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-at-sign-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M14.5 1.288a11 11 0 104.188 19.445.75.75 0 10-.912-1.19 9.5 9.5 0 113.724-7.544v1.025c0 1.258-.995 2.476-2.325 2.476-1.288 0-2.175-1.142-2.175-2.476V7.75a.75.75 0 00-1.5 0v.68a5 5 0 10.488 6.587c.58 1.12 1.666 1.983 3.187 1.983C21.495 17 23 14.94 23 13.024V12a11 11 0 00-8.5-10.711zM15.5 12a3.5 3.5 0 10-7 0 3.5 3.5 0 007 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/keyframes.scss
new file mode 100644
index 0000000000..2ad533ae15
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-auth0-color {
+  50% {
+    background-image: var(--icon-auth0-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-auth0-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/placeholders.scss
new file mode 100644
index 0000000000..f7d2ad3b92
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-auth0-color-icon {
+  --icon-name: icon-auth0-color;
+  content: '';
+}
+%with-auth0-color-mask {
+  --icon-name: icon-auth0-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/property-16.scss
new file mode 100644
index 0000000000..a12861d500
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-auth0-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.549 1h-4.55l1.407 4.38h4.548l-3.68 2.61 1.406 4.405c2.37-1.725 3.143-4.336 2.274-7.016L12.55 1zM2.045 5.38h4.55L8 1H3.45L2.045 5.38c-.868 2.68-.094 5.29 2.275 7.015L5.725 7.99l-3.68-2.612zm2.275 7.015L8 15l3.68-2.605L8 9.745l-3.68 2.65z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/property-24.scss
new file mode 100644
index 0000000000..32e38d8981
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-auth0-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M17.848 3H12l1.807 5.63h5.849l-4.732 3.358 1.807 5.663c3.046-2.218 4.042-5.575 2.925-9.02L17.848 3zM4.344 8.63h5.848L12 3H6.15L4.344 8.63c-1.117 3.446-.122 6.802 2.924 9.02l1.808-5.662-4.732-3.357zm2.924 9.02L12 21l4.731-3.35L12 14.244 7.268 17.65z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/index.scss
new file mode 100644
index 0000000000..83889c28e8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../auth0-color/property-16';
+        @import '../auth0-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/keyframes.scss
new file mode 100644
index 0000000000..3e1d5463d6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-auth0 {
+  50% {
+
+    background-color: var(--icon-color, var(--color-auth0-500, currentColor));
+    -webkit-mask-image: var(--icon-auth0-color-24);
+    mask-image: var(--icon-auth0-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-auth0-500, currentColor));
+    -webkit-mask-image: var(--icon-auth0-color-16);
+    mask-image: var(--icon-auth0-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/placeholders.scss
new file mode 100644
index 0000000000..2a67e3aa71
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-auth0-icon {
+  --icon-name: icon-auth0;
+  content: '';
+}
+%with-auth0-mask {
+  --icon-name: icon-auth0;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/property-16.scss
new file mode 100644
index 0000000000..a12861d500
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-auth0-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.549 1h-4.55l1.407 4.38h4.548l-3.68 2.61 1.406 4.405c2.37-1.725 3.143-4.336 2.274-7.016L12.55 1zM2.045 5.38h4.55L8 1H3.45L2.045 5.38c-.868 2.68-.094 5.29 2.275 7.015L5.725 7.99l-3.68-2.612zm2.275 7.015L8 15l3.68-2.605L8 9.745l-3.68 2.65z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/property-24.scss
new file mode 100644
index 0000000000..5b19c691ac
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auth0/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-auth0-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.549 1h-4.55l1.407 4.38h4.548l-3.68 2.61 1.406 4.405c2.37-1.725 3.143-4.336 2.274-7.016L12.55 1zM2.045 5.38h4.55L8 1H3.45L2.045 5.38c-.868 2.68-.094 5.29 2.275 7.015L5.725 7.99l-3.68-2.612zm2.275 7.015L8 15l3.68-2.605L8 9.745l-3.68 2.65z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/keyframes.scss
new file mode 100644
index 0000000000..4465779c4b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-auto-apply {
+  50% {
+
+    background-color: var(--icon-color, var(--color-auto-apply-500, currentColor));
+    -webkit-mask-image: var(--icon-auto-apply-24);
+    mask-image: var(--icon-auto-apply-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-auto-apply-500, currentColor));
+    -webkit-mask-image: var(--icon-auto-apply-16);
+    mask-image: var(--icon-auto-apply-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/placeholders.scss
new file mode 100644
index 0000000000..0706678298
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-auto-apply-icon {
+  --icon-name: icon-auto-apply;
+  content: '';
+}
+%with-auto-apply-mask {
+  --icon-name: icon-auto-apply;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/property-16.scss
new file mode 100644
index 0000000000..77fe3b9e28
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-auto-apply-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M7.734 4.192C6.572 3.402 5 4.234 5 5.64v4.722c0 1.405 1.572 2.237 2.734 1.447l3.472-2.36a1.75 1.75 0 000-2.895l-3.472-2.36zM6.5 5.64c0-.2.225-.32.39-.206l3.472 2.36a.25.25 0 010 .414l-3.471 2.36a.25.25 0 01-.391-.206V5.639z"/><path d="M7.25 0A1.75 1.75 0 005.5 1.728a6.715 6.715 0 00-.167.07 1.75 1.75 0 00-2.46.015l-1.06 1.06a1.75 1.75 0 00-.015 2.46 6.712 6.712 0 00-.07.167A1.75 1.75 0 000 7.25v1.5c0 .96.772 1.738 1.728 1.75l.07.167a1.75 1.75 0 00.015 2.46l1.06 1.06a1.75 1.75 0 002.46.015l.167.07A1.75 1.75 0 007.25 16h1.5a1.75 1.75 0 001.75-1.728l.167-.07a1.75 1.75 0 002.46-.015l1.06-1.06a1.75 1.75 0 00.015-2.46l.07-.167A1.75 1.75 0 0016 8.75v-1.5a1.75 1.75 0 00-1.728-1.75 6.185 6.185 0 00-.07-.167 1.75 1.75 0 00-.015-2.46l-1.06-1.06a1.75 1.75 0 00-2.46-.015 6.794 6.794 0 00-.167-.07A1.75 1.75 0 008.75 0h-1.5zM7 1.75a.25.25 0 01.25-.25h1.5a.25.25 0 01.25.25v.51c0 .33.216.62.532.717.326.1.64.23.936.388a.75.75 0 00.884-.131l.36-.36a.25.25 0 01.354 0l1.06 1.06a.25.25 0 010 .354l-.36.36a.75.75 0 00-.131.884c.158.296.289.61.388.936a.75.75 0 00.718.532h.509a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25h-.51a.75.75 0 00-.717.532c-.1.326-.23.64-.388.936a.75.75 0 00.131.884l.36.36a.25.25 0 010 .354l-1.06 1.06a.25.25 0 01-.354 0l-.36-.36a.75.75 0 00-.884-.131c-.296.158-.61.289-.936.388a.75.75 0 00-.532.718v.509a.25.25 0 01-.25.25h-1.5a.25.25 0 01-.25-.25v-.51a.75.75 0 00-.532-.717c-.326-.1-.64-.23-.936-.388a.75.75 0 00-.884.131l-.36.36a.25.25 0 01-.354 0l-1.06-1.06a.25.25 0 010-.354l.36-.36a.75.75 0 00.131-.884 5.213 5.213 0 01-.388-.936A.75.75 0 002.259 9H1.75a.25.25 0 01-.25-.25v-1.5A.25.25 0 011.75 7h.51a.75.75 0 00.717-.532c.1-.326.23-.64.388-.936a.75.75 0 00-.131-.884l-.36-.36a.25.25 0 010-.354l1.06-1.06a.25.25 0 01.354 0l.36.36a.75.75 0 00.884.131c.296-.158.61-.289.936-.388A.75.75 0 007 2.259V1.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/property-24.scss
new file mode 100644
index 0000000000..5746ddfff7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-auto-apply-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.23 6.684c-1.162-.786-2.73.047-2.73 1.45v7.732c0 1.403 1.568 2.236 2.73 1.45l5.716-3.866a1.75 1.75 0 000-2.9L11.23 6.684zM10 8.134c0-.2.224-.32.39-.207l5.715 3.866a.25.25 0 010 .414l-5.715 3.866a.25.25 0 01-.39-.207V8.134z"/><path d="M11.305 0a2.25 2.25 0 00-2.25 2.25v.395a9.747 9.747 0 00-1.587.658l-.28-.28a2.25 2.25 0 00-3.182 0l-.983.983a2.25 2.25 0 000 3.182l.28.28a9.748 9.748 0 00-.658 1.587H2.25A2.25 2.25 0 000 11.305v1.39a2.25 2.25 0 002.25 2.25h.395c.174.552.395 1.082.658 1.587l-.28.28a2.25 2.25 0 000 3.182l.983.983a2.25 2.25 0 003.182 0l.28-.28a9.744 9.744 0 001.587.658v.395a2.25 2.25 0 002.25 2.25h1.39a2.25 2.25 0 002.25-2.25v-.395a9.743 9.743 0 001.587-.658l.28.28a2.25 2.25 0 003.182 0l.983-.983a2.25 2.25 0 000-3.182l-.28-.28a9.742 9.742 0 00.658-1.587h.395a2.25 2.25 0 002.25-2.25v-1.39a2.25 2.25 0 00-2.25-2.25h-.395a9.744 9.744 0 00-.658-1.587l.28-.28a2.25 2.25 0 000-3.182l-.983-.983a2.25 2.25 0 00-3.182 0l-.28.28a9.748 9.748 0 00-1.587-.658V2.25A2.25 2.25 0 0012.695 0h-1.39zm-.75 2.25a.75.75 0 01.75-.75h1.39a.75.75 0 01.75.75v.963a.75.75 0 00.569.728c.806.2 1.566.52 2.26.937a.75.75 0 00.917-.113l.681-.681a.75.75 0 011.061 0l.983.983a.75.75 0 010 1.06l-.681.682a.75.75 0 00-.113.917c.418.694.736 1.454.937 2.26a.75.75 0 00.728.569h.963a.75.75 0 01.75.75v1.39a.75.75 0 01-.75.75h-.963a.75.75 0 00-.728.569 8.25 8.25 0 01-.937 2.26.75.75 0 00.113.917l.681.681a.75.75 0 010 1.061l-.983.983a.75.75 0 01-1.06 0l-.682-.681a.75.75 0 00-.917-.113 8.253 8.253 0 01-2.26.937.75.75 0 00-.569.728v.963a.75.75 0 01-.75.75h-1.39a.75.75 0 01-.75-.75v-.963a.75.75 0 00-.569-.728 8.253 8.253 0 01-2.26-.937.75.75 0 00-.917.113l-.681.681a.75.75 0 01-1.061 0l-.983-.983a.75.75 0 010-1.06l.681-.682a.75.75 0 00.113-.917 8.251 8.251 0 01-.937-2.26.75.75 0 00-.728-.569H2.25a.75.75 0 01-.75-.75v-1.39a.75.75 0 01.75-.75h.963a.75.75 0 00.728-.569c.2-.806.52-1.566.937-2.26a.75.75 0 00-.113-.917l-.681-.681a.75.75 0 010-1.061l.983-.983a.75.75 0 011.06 0l.682.681a.75.75 0 00.917.113 8.251 8.251 0 012.26-.937.75.75 0 00.569-.728V2.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/award/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/award/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/award/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/award/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/award/keyframes.scss
new file mode 100644
index 0000000000..75e369a0c0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/award/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-award {
+  50% {
+
+    background-color: var(--icon-color, var(--color-award-500, currentColor));
+    -webkit-mask-image: var(--icon-award-24);
+    mask-image: var(--icon-award-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-award-500, currentColor));
+    -webkit-mask-image: var(--icon-award-16);
+    mask-image: var(--icon-award-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/award/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/award/placeholders.scss
new file mode 100644
index 0000000000..7977e3f37b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/award/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-award-icon {
+  --icon-name: icon-award;
+  content: '';
+}
+%with-award-mask {
+  --icon-name: icon-award;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/award/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/award/property-16.scss
new file mode 100644
index 0000000000..ae056de674
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/award/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-award-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a6 6 0 00-4.214 10.27.756.756 0 00-.027.113l-.75 4.75a.75.75 0 00.99.824L8 14.545l4 1.412a.75.75 0 00.99-.824l-.75-4.75a.764.764 0 00-.026-.112A6 6 0 008 0zM3.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zm7.363 5.274A5.974 5.974 0 018 12a5.973 5.973 0 01-2.863-.726l-.45 2.85 3.063-1.081a.75.75 0 01.5 0l3.063 1.08-.45-2.849z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/award/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/award/property-24.scss
new file mode 100644
index 0000000000..d317c69470
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/award/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-award-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1a8 8 0 00-4.751 14.437l-1.236 6.676a.75.75 0 001.004.838L12 21.053l4.983 1.898a.75.75 0 001.005-.838l-1.237-6.676A8 8 0 0012 1zM5.5 9a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm9.877 7.254A7.97 7.97 0 0112 17a7.97 7.97 0 01-3.377-.746l-.892 4.82 4.002-1.525a.75.75 0 01.534 0l4.003 1.525-.893-4.82z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/keyframes.scss
new file mode 100644
index 0000000000..49fdf1f2fa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-aws-color {
+  50% {
+    background-image: var(--icon-aws-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-aws-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/placeholders.scss
new file mode 100644
index 0000000000..49812edc7a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-aws-color-icon {
+  --icon-name: icon-aws-color;
+  content: '';
+}
+%with-aws-color-mask {
+  --icon-name: icon-aws-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-16.scss
new file mode 100644
index 0000000000..49cbd83c17
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-aws-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23252F3E" d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.165-.315c-.415.491-.936.737-1.564.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.191-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.618.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.049-.214c0-.085.043-.133.128-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.1-.208a.365.365 0 01.214-.053h.425c.102 0 .17.016.213.053.043.032.08.107.101.208l.841 3.578.92-3.578a.458.458 0 01.107-.208.346.346 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.76.76 0 01-.038.133l-1.283 4.127c-.032.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.378.378 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.46.46 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.427 2.427 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.436 1.436 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><g fill="%23F90" fill-rule="evenodd" clip-rule="evenodd"><path d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z"/><path d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.218-.1.213-.53.687-1.72.463-2.003z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-24.scss
new file mode 100644
index 0000000000..50edae1674
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-aws-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23252F3E" d="M6.895 10.085c0 .288.031.521.085.692.063.172.14.359.25.561a.338.338 0 01.054.18c0 .077-.047.155-.148.233l-.49.327a.373.373 0 01-.203.07c-.077 0-.155-.039-.233-.11a2.408 2.408 0 01-.28-.365 6.031 6.031 0 01-.241-.46c-.607.717-1.37 1.075-2.288 1.075-.654 0-1.176-.187-1.557-.56-.381-.374-.576-.873-.576-1.495 0-.662.234-1.2.708-1.605.475-.404 1.105-.607 1.907-.607.265 0 .537.023.825.062.288.04.584.102.895.172v-.569c0-.591-.125-1.004-.366-1.246-.249-.24-.67-.358-1.268-.358a3.54 3.54 0 00-.84.102 6.2 6.2 0 00-.841.264 2.234 2.234 0 01-.273.101.477.477 0 01-.124.024c-.11 0-.164-.078-.164-.242V5.95c0-.125.016-.218.055-.273A.583.583 0 012 5.514c.272-.14.599-.257.98-.35a4.716 4.716 0 011.214-.148c.926 0 1.604.21 2.04.63.427.42.645 1.06.645 1.916v2.522h.016zm-3.16 1.183c.257 0 .522-.047.802-.14.28-.094.529-.265.74-.498.124-.148.217-.312.264-.499.046-.187.078-.412.078-.677v-.327a6.494 6.494 0 00-.716-.133 5.86 5.86 0 00-.732-.046c-.521 0-.903.1-1.16.311-.256.21-.381.506-.381.896 0 .366.093.638.288.825.187.195.46.288.817.288zm6.25.841c-.14 0-.234-.023-.296-.078-.062-.047-.117-.156-.164-.304L7.696 5.71a1.364 1.364 0 01-.07-.312c0-.124.063-.195.187-.195h.763c.148 0 .249.024.303.078.063.047.11.156.156.304l1.308 5.155 1.214-5.155c.039-.156.085-.257.147-.304a.535.535 0 01.312-.078h.622c.148 0 .25.024.312.078.062.047.117.156.148.304l1.23 5.217 1.346-5.217c.046-.156.1-.257.155-.304a.508.508 0 01.304-.078h.724c.124 0 .194.063.194.195 0 .039-.008.078-.015.125a1.104 1.104 0 01-.055.194l-1.876 6.02c-.046.155-.1.256-.163.303a.497.497 0 01-.296.078h-.669c-.148 0-.249-.024-.311-.078-.063-.055-.117-.156-.148-.312l-1.206-5.022-1.199 5.015c-.039.155-.086.257-.148.311-.062.055-.171.078-.311.078h-.67zm10 .21a5.15 5.15 0 01-1.198-.14c-.39-.093-.693-.195-.895-.311-.125-.07-.21-.148-.242-.218a.55.55 0 01-.046-.218v-.398c0-.163.062-.24.179-.24a.44.44 0 01.14.022c.047.016.117.047.194.078.265.117.553.21.857.273.31.062.614.093.926.093.49 0 .871-.085 1.136-.257a.838.838 0 00.404-.74.758.758 0 00-.21-.544c-.14-.148-.404-.28-.786-.405l-1.128-.35c-.568-.18-.988-.445-1.245-.795a1.856 1.856 0 01-.39-1.129c0-.327.07-.615.21-.864.14-.25.328-.467.561-.639a2.47 2.47 0 01.81-.405 3.39 3.39 0 01.98-.132c.171 0 .35.008.521.031.18.024.343.055.506.086.156.039.304.078.444.124.14.047.249.094.327.14a.673.673 0 01.233.195.42.42 0 01.07.257V6.2c0 .164-.062.25-.179.25a.81.81 0 01-.295-.094 3.559 3.559 0 00-1.495-.304c-.443 0-.793.07-1.035.218-.241.148-.365.374-.365.693 0 .218.077.405.233.553.156.148.444.296.856.428l1.105.35c.56.18.965.429 1.207.748.24.32.358.685.358 1.09 0 .335-.07.639-.203.903-.14.265-.327.499-.568.686-.241.194-.53.335-.864.436a3.7 3.7 0 01-1.113.163z"/><g fill="%23F90" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.456 16.103c-2.56 1.892-6.28 2.897-9.48 2.897-4.482 0-8.522-1.659-11.572-4.415-.242-.218-.024-.514.264-.343 3.3 1.916 7.37 3.076 11.58 3.076 2.841 0 5.962-.592 8.834-1.806.428-.195.794.28.374.591z"/><path d="M22.522 14.889c-.327-.42-2.164-.203-2.996-.101-.25.03-.288-.187-.063-.35 1.463-1.029 3.868-.733 4.148-.39.28.35-.077 2.756-1.447 3.909-.21.179-.413.085-.32-.148.312-.771 1.005-2.508.678-2.92z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/keyframes.scss
new file mode 100644
index 0000000000..0efdbb9b40
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-aws-ec2-color {
+  50% {
+    background-image: var(--icon-aws-ec2-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-aws-ec2-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/placeholders.scss
new file mode 100644
index 0000000000..5d755fce96
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-aws-ec2-color-icon {
+  --icon-name: icon-aws-ec2-color;
+  content: '';
+}
+%with-aws-ec2-color-mask {
+  --icon-name: icon-aws-ec2-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-16.scss
new file mode 100644
index 0000000000..733f7111cb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-aws-ec2-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%239D5025" d="M1.702 2.98L1 3.312v9.376l.702.332 2.842-4.777L1.702 2.98z"/><path fill="%23F58536" d="M3.339 12.657l-1.637.363V2.98l1.637.353v9.324z"/><path fill="%239D5025" d="M2.476 2.612l.863-.406 4.096 6.216-4.096 5.372-.863-.406V2.612z"/><path fill="%23F58536" d="M5.38 13.248l-2.041.546V2.206l2.04.548v10.494z"/><path fill="%239D5025" d="M4.3 1.75l1.08-.512 6.043 7.864-6.043 5.66-1.08-.511V1.749z"/><path fill="%23F58536" d="M7.998 13.856l-2.618.906V1.238l2.618.908v11.71z"/><path fill="%239D5025" d="M6.602.66L7.998 0l6.538 8.453L7.998 16l-1.396-.66V.66z"/><path fill="%23F58536" d="M15 12.686L7.998 16V0L15 3.314v9.372z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-24.scss
new file mode 100644
index 0000000000..ce4f1c44bc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-aws-ec2-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%239D5025" d="M3.003 4.47L2 4.967v14.064l1.003.499 4.06-7.167-4.06-7.895z"/><path fill="%23F58536" d="M5.341 18.985l-2.338.546V4.469L5.341 5v13.985z"/><path fill="%239D5025" d="M4.11 3.918L5.34 3.31l5.852 9.324-5.852 8.058-1.232-.61V3.919z"/><path fill="%23F58536" d="M8.257 19.872l-2.916.819V3.309l2.916.822v15.74z"/><path fill="%239D5025" d="M6.714 2.624l1.543-.767 8.633 11.796-8.633 8.49-1.543-.767V2.624z"/><path fill="%23F58536" d="M11.997 20.784l-3.74 1.359V1.857l3.74 1.362v17.565z"/><path fill="%239D5025" d="M10.002.991L11.997 0l9.34 12.68L11.997 24l-1.995-.991V.99z"/><path fill="%23F58536" d="M22 19.03L11.997 24V0L22 4.97v14.06z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/index.scss
new file mode 100644
index 0000000000..d0b08b41a2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../aws-ec2-color/property-16';
+        @import '../aws-ec2-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/keyframes.scss
new file mode 100644
index 0000000000..ea638851aa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-aws-ec2 {
+  50% {
+
+    background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
+    -webkit-mask-image: var(--icon-aws-ec2-color-24);
+    mask-image: var(--icon-aws-ec2-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
+    -webkit-mask-image: var(--icon-aws-ec2-color-16);
+    mask-image: var(--icon-aws-ec2-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/placeholders.scss
new file mode 100644
index 0000000000..85140264d3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-aws-ec2-icon {
+  --icon-name: icon-aws-ec2;
+  content: '';
+}
+%with-aws-ec2-mask {
+  --icon-name: icon-aws-ec2;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-16.scss
new file mode 100644
index 0000000000..361e260334
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-aws-ec2-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.602.66L7.998 0 15 3.314v9.372L7.998 16l-1.396-.66V.66zM5.38 1.238L4.3 1.75v12.502l1.08.51V1.239zM2.476 2.612l.863-.406v11.588l-.863-.406V2.612zM1.7 2.98V13.02l-.7-.332V3.312l.7-.33z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-24.scss
new file mode 100644
index 0000000000..15622c3a8a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-aws-ec2-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.602.66L7.998 0 15 3.314v9.372L7.998 16l-1.396-.66V.66zM5.38 1.238L4.3 1.75v12.502l1.08.51V1.239zM2.476 2.612l.863-.406v11.588l-.863-.406V2.612zM1.7 2.98V13.02l-.7-.332V3.312l.7-.33z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws/index.scss
new file mode 100644
index 0000000000..a8b4b9693f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../aws-color/property-16';
+        @import '../aws-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws/keyframes.scss
new file mode 100644
index 0000000000..9b4024fe28
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-aws {
+  50% {
+
+    background-color: var(--icon-color, var(--color-aws-500, currentColor));
+    -webkit-mask-image: var(--icon-aws-color-24);
+    mask-image: var(--icon-aws-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-aws-500, currentColor));
+    -webkit-mask-image: var(--icon-aws-color-16);
+    mask-image: var(--icon-aws-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws/placeholders.scss
new file mode 100644
index 0000000000..f89a3799bf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-aws-icon {
+  --icon-name: icon-aws;
+  content: '';
+}
+%with-aws-mask {
+  --icon-name: icon-aws;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-16.scss
new file mode 100644
index 0000000000..6241882d33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-aws-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.164-.315c-.416.491-.937.737-1.565.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.192-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.617.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.048-.214c0-.085.042-.133.127-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.101-.208a.365.365 0 01.213-.053h.426c.1 0 .17.016.212.053.043.032.08.107.102.208l.84 3.578.92-3.578a.459.459 0 01.107-.208.347.347 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.768.768 0 01-.038.133l-1.283 4.127c-.031.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.38.38 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.461.461 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.428 2.428 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.435 1.435 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><path fill-rule="evenodd" d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.217-.1.212-.53.686-1.72.462-2.003z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-24.scss
new file mode 100644
index 0000000000..a84d413b91
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/aws/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-aws-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.164-.315c-.416.491-.937.737-1.565.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.192-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.617.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.048-.214c0-.085.042-.133.127-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.101-.208a.365.365 0 01.213-.053h.426c.1 0 .17.016.212.053.043.032.08.107.102.208l.84 3.578.92-3.578a.459.459 0 01.107-.208.347.347 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.768.768 0 01-.038.133l-1.283 4.127c-.031.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.38.38 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.461.461 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.428 2.428 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.435 1.435 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/><path fill-rule="evenodd" d="M14.465 11.813c-1.75 1.297-4.294 1.986-6.481 1.986-3.065 0-5.827-1.137-7.913-3.027-.165-.15-.016-.353.18-.235 2.257 1.313 5.04 2.109 7.92 2.109 1.941 0 4.075-.406 6.039-1.239.293-.133.543.192.255.406z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M15.194 10.98c-.223-.287-1.479-.138-2.048-.069-.17.022-.197-.128-.043-.24 1-.705 2.645-.502 2.836-.267.192.24-.053 1.89-.99 2.68-.143.123-.281.06-.217-.1.212-.53.686-1.72.462-2.003z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/keyframes.scss
new file mode 100644
index 0000000000..13572a18c6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-azure-color {
+  50% {
+    background-image: var(--icon-azure-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-azure-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/placeholders.scss
new file mode 100644
index 0000000000..115ce2bf24
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-azure-color-icon {
+  --icon-name: icon-azure-color;
+  content: '';
+}
+%with-azure-color-mask {
+  --icon-name: icon-azure-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/property-16.scss
new file mode 100644
index 0000000000..5bbddccf1b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-azure-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%230089D6"><path d="M7.47 12.412l3.348-.592.031-.007-1.722-2.049a291.474 291.474 0 01-1.723-2.058c0-.01 1.779-4.909 1.789-4.926a788.95 788.95 0 012.934 5.066l2.95 5.115.023.039-10.948-.001 3.317-.587zM.9 11.788c0-.003.811-1.412 1.803-3.131L4.507 5.53l2.102-1.764C7.765 2.797 8.714 2 8.717 2a.37.37 0 01-.033.085L6.4 6.981 4.16 11.789l-1.63.002c-.897.001-1.63 0-1.63-.003z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/property-24.scss
new file mode 100644
index 0000000000..00ac62087e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-azure-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%230089D6"><path d="M11.275 18.199l4.575-.808.043-.01-2.353-2.793a400.617 400.617 0 01-2.353-2.808c0-.013 2.43-6.693 2.443-6.717.004-.008 1.658 2.842 4.008 6.908 2.2 3.807 4.015 6.946 4.031 6.976L21.7 19l-14.957-.002 4.532-.8zM2.3 17.347c0-.004 1.109-1.925 2.464-4.27l2.464-4.262 2.871-2.406A1076.68 1076.68 0 0112.98 4a.504.504 0 01-.046.116l-3.118 6.676-3.062 6.557-2.227.002c-1.225.002-2.227 0-2.227-.004z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/keyframes.scss
new file mode 100644
index 0000000000..45b98e07f0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-azure-devops-color {
+  50% {
+    background-image: var(--icon-azure-devops-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-azure-devops-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/placeholders.scss
new file mode 100644
index 0000000000..95d07ea7d8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-azure-devops-color-icon {
+  --icon-name: icon-azure-devops-color;
+  content: '';
+}
+%with-azure-devops-color-mask {
+  --icon-name: icon-azure-devops-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/property-16.scss
new file mode 100644
index 0000000000..2090328017
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-azure-devops-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="url(%23azure-devops-color-16__paint0_linear_707_116)" d="M15 3.622v8.512L11.5 15l-5.425-1.975v1.958L3.004 10.97l8.951.7V4.005L15 3.622zm-2.984.428L6.994 1v2.001L2.382 4.356 1 6.13v4.029l1.978.873V5.869l9.038-1.818z"/><defs><linearGradient id="azure-devops-color-16__paint0_linear_707_116" x1="8" x2="8" y1="14.956" y2="1.026" gradientUnits="userSpaceOnUse"><stop stop-color="%230078D4"/><stop offset=".16" stop-color="%231380DA"/><stop offset=".53" stop-color="%233C91E5"/><stop offset=".82" stop-color="%23559CEC"/><stop offset="1" stop-color="%235EA0EF"/></linearGradient></defs></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/property-24.scss
new file mode 100644
index 0000000000..6b3f605ef5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-azure-devops-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="url(%23azure-devops-color-24__paint0_linear_707_113)" d="M21 6.37v10.945L16.5 21l-6.975-2.54v2.518L5.576 15.82l11.509.9V6.864L21 6.371zm-3.836.551L10.706 3v2.573L4.778 7.315 3 9.595v5.18L5.543 15.9v-6.64l11.62-2.338z"/><defs><linearGradient id="azure-devops-color-24__paint0_linear_707_113" x1="12" x2="12" y1="20.944" y2="3.034" gradientUnits="userSpaceOnUse"><stop stop-color="%230078D4"/><stop offset=".16" stop-color="%231380DA"/><stop offset=".53" stop-color="%233C91E5"/><stop offset=".82" stop-color="%23559CEC"/><stop offset="1" stop-color="%235EA0EF"/></linearGradient></defs></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/index.scss
new file mode 100644
index 0000000000..f681224d99
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../azure-devops-color/property-16';
+        @import '../azure-devops-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/keyframes.scss
new file mode 100644
index 0000000000..6136e4df7c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-azure-devops {
+  50% {
+
+    background-color: var(--icon-color, var(--color-azure-devops-500, currentColor));
+    -webkit-mask-image: var(--icon-azure-devops-color-24);
+    mask-image: var(--icon-azure-devops-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-azure-devops-500, currentColor));
+    -webkit-mask-image: var(--icon-azure-devops-color-16);
+    mask-image: var(--icon-azure-devops-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/placeholders.scss
new file mode 100644
index 0000000000..55d52c7e2c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-azure-devops-icon {
+  --icon-name: icon-azure-devops;
+  content: '';
+}
+%with-azure-devops-mask {
+  --icon-name: icon-azure-devops;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/property-16.scss
new file mode 100644
index 0000000000..773a2b7f1f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-azure-devops-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M15 3.622v8.512L11.5 15l-5.425-1.975v1.958L3.004 10.97l8.951.7V4.005L15 3.622zm-2.984.428L6.994 1v2.001L2.382 4.356 1 6.13v4.029l1.978.873V5.869l9.038-1.818z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/property-24.scss
new file mode 100644
index 0000000000..0e1738d224
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-azure-devops-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M15 3.622v8.512L11.5 15l-5.425-1.975v1.958L3.004 10.97l8.951.7V4.005L15 3.622zm-2.984.428L6.994 1v2.001L2.382 4.356 1 6.13v4.029l1.978.873V5.869l9.038-1.818z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure/index.scss
new file mode 100644
index 0000000000..a37795b7ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../azure-color/property-16';
+        @import '../azure-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure/keyframes.scss
new file mode 100644
index 0000000000..4357fdeb57
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-azure {
+  50% {
+
+    background-color: var(--icon-color, var(--color-azure-500, currentColor));
+    -webkit-mask-image: var(--icon-azure-color-24);
+    mask-image: var(--icon-azure-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-azure-500, currentColor));
+    -webkit-mask-image: var(--icon-azure-color-16);
+    mask-image: var(--icon-azure-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure/placeholders.scss
new file mode 100644
index 0000000000..a42cbeb243
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-azure-icon {
+  --icon-name: icon-azure;
+  content: '';
+}
+%with-azure-mask {
+  --icon-name: icon-azure;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure/property-16.scss
new file mode 100644
index 0000000000..5340576166
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-azure-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.47 12.412l3.348-.592.031-.007-1.722-2.049a291.474 291.474 0 01-1.723-2.058c0-.01 1.779-4.909 1.789-4.926a788.95 788.95 0 012.934 5.066l2.95 5.115.023.039-10.948-.001 3.317-.587zM.9 11.788c0-.003.811-1.412 1.803-3.131L4.507 5.53l2.102-1.764C7.765 2.797 8.714 2 8.717 2a.37.37 0 01-.033.085L6.4 6.981 4.16 11.789l-1.63.002c-.897.001-1.63 0-1.63-.003z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/azure/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/azure/property-24.scss
new file mode 100644
index 0000000000..0b916118fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/azure/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-azure-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.47 12.412l3.348-.592.031-.007-1.722-2.049a291.474 291.474 0 01-1.723-2.058c0-.01 1.779-4.909 1.789-4.926a788.95 788.95 0 012.934 5.066l2.95 5.115.023.039-10.948-.001 3.317-.587zM.9 11.788c0-.003.811-1.412 1.803-3.131L4.507 5.53l2.102-1.764C7.765 2.797 8.714 2 8.717 2a.37.37 0 01-.033.085L6.4 6.981 4.16 11.789l-1.63.002c-.897.001-1.63 0-1.63-.003z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/keyframes.scss
new file mode 100644
index 0000000000..f79804ae53
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bank-vault {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bank-vault-500, currentColor));
+    -webkit-mask-image: var(--icon-bank-vault-24);
+    mask-image: var(--icon-bank-vault-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bank-vault-500, currentColor));
+    -webkit-mask-image: var(--icon-bank-vault-16);
+    mask-image: var(--icon-bank-vault-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/placeholders.scss
new file mode 100644
index 0000000000..784c86a525
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bank-vault-icon {
+  --icon-name: icon-bank-vault;
+  content: '';
+}
+%with-bank-vault-mask {
+  --icon-name: icon-bank-vault;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/property-16.scss
new file mode 100644
index 0000000000..58025bfd41
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bank-vault-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6.035 3.974A4.978 4.978 0 019 3c1.11 0 2.136.362 2.965.974l.005-.004a.75.75 0 111.06 1.06l-.004.005C13.638 5.865 14 6.89 14 8c0 1.11-.362 2.136-.974 2.965l.004.005a.75.75 0 11-1.06 1.06l-.005-.004A4.978 4.978 0 019 13a4.978 4.978 0 01-2.965-.974l-.005.004a.75.75 0 01-1.06-1.06l.004-.005A4.977 4.977 0 014 8c0-1.11.362-2.136.974-2.965L4.97 5.03a.75.75 0 011.06-1.06l.005.004zm1.078 1.078A3.484 3.484 0 019 4.5c.695 0 1.343.203 1.887.552l-.917.918a.75.75 0 001.06 1.06l.918-.917c.35.544.552 1.192.552 1.887 0 .695-.203 1.343-.552 1.887l-.918-.917a.75.75 0 10-1.06 1.06l.917.918A3.484 3.484 0 019 11.5a3.483 3.483 0 01-1.887-.552l.917-.918a.75.75 0 10-1.06-1.06l-.918.917A3.484 3.484 0 015.5 8c0-.695.203-1.343.552-1.887l.918.917a.75.75 0 001.06-1.06l-.917-.918z" clip-rule="evenodd"/><path d="M2.75 3.25A.75.75 0 013.5 4v1.5a.75.75 0 01-1.5 0V4a.75.75 0 01.75-.75zM3.5 10.5a.75.75 0 00-1.5 0V12a.75.75 0 001.5 0v-1.5z"/><path fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15H3v.25a.75.75 0 001.5 0V15h7v.25a.75.75 0 001.5 0V15h.75A2.25 2.25 0 0016 12.75v-9.5A2.25 2.25 0 0013.75 1H2.25zm11.5 12.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75H2.25a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h11.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/property-24.scss
new file mode 100644
index 0000000000..2e12f1842f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bank-vault-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M8 12a6 6 0 1112 0 6 6 0 01-12 0zm2.332-2.607A4.48 4.48 0 009.5 12c0 .972.308 1.872.832 2.607l1.45-1.45A2.49 2.49 0 0111.5 12c0-.417.102-.81.283-1.156l-1.451-1.451zm1.06-1.061l1.452 1.45A2.49 2.49 0 0114 9.5c.417 0 .81.102 1.156.283l1.451-1.451A4.48 4.48 0 0014 7.5a4.48 4.48 0 00-2.607.832zm1.452 5.885l-1.451 1.451A4.48 4.48 0 0014 16.5a4.48 4.48 0 002.607-.832l-1.45-1.45A2.49 2.49 0 0114 14.5a2.49 2.49 0 01-1.156-.283zM18.5 12a4.48 4.48 0 01-.832 2.607l-1.45-1.45c.18-.346.282-.74.282-1.157 0-.417-.102-.81-.283-1.156l1.451-1.451A4.48 4.48 0 0118.5 12zM13 12a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"/><path d="M4.75 5a.75.75 0 01.75.75v2.5a.75.75 0 01-1.5 0v-2.5A.75.75 0 014.75 5zM5.5 15.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/><path fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h16.5A2.75 2.75 0 0123 4.75v14.5A2.75 2.75 0 0120.25 22h-.125v1a.875.875 0 01-1.75 0v-1H5.625v1a.875.875 0 01-1.75 0v-1H3.75A2.75 2.75 0 011 19.25V4.75zM3.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/keyframes.scss
new file mode 100644
index 0000000000..3f5d859014
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bar-chart-alt {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bar-chart-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-bar-chart-alt-24);
+    mask-image: var(--icon-bar-chart-alt-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bar-chart-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-bar-chart-alt-16);
+    mask-image: var(--icon-bar-chart-alt-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/placeholders.scss
new file mode 100644
index 0000000000..9f538c13d2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bar-chart-alt-icon {
+  --icon-name: icon-bar-chart-alt;
+  content: '';
+}
+%with-bar-chart-alt-mask {
+  --icon-name: icon-bar-chart-alt;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/property-16.scss
new file mode 100644
index 0000000000..1c9938baa2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bar-chart-alt-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 2a1 1 0 011 1v10a1 1 0 11-2 0V3a1 1 0 011-1zM12 6a1 1 0 011 1v6a1 1 0 11-2 0V7a1 1 0 011-1zM5 9a1 1 0 00-2 0v4a1 1 0 102 0V9z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/property-24.scss
new file mode 100644
index 0000000000..afe6c741d2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bar-chart-alt-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3a1 1 0 011 1v16a1 1 0 11-2 0V4a1 1 0 011-1zM18 9a1 1 0 011 1v10a1 1 0 11-2 0V10a1 1 0 011-1zM7 14a1 1 0 10-2 0v6a1 1 0 102 0v-6z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/keyframes.scss
new file mode 100644
index 0000000000..3322ea1763
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bar-chart {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bar-chart-500, currentColor));
+    -webkit-mask-image: var(--icon-bar-chart-24);
+    mask-image: var(--icon-bar-chart-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bar-chart-500, currentColor));
+    -webkit-mask-image: var(--icon-bar-chart-16);
+    mask-image: var(--icon-bar-chart-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/placeholders.scss
new file mode 100644
index 0000000000..9398145302
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bar-chart-icon {
+  --icon-name: icon-bar-chart;
+  content: '';
+}
+%with-bar-chart-mask {
+  --icon-name: icon-bar-chart;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/property-16.scss
new file mode 100644
index 0000000000..b80cc198af
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bar-chart-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M12 2a1 1 0 011 1v10a1 1 0 11-2 0V3a1 1 0 011-1zM8 6a1 1 0 011 1v6a1 1 0 11-2 0V7a1 1 0 011-1zM5 10a1 1 0 00-2 0v3a1 1 0 102 0v-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/property-24.scss
new file mode 100644
index 0000000000..5d09d34506
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bar-chart-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M18 3a1 1 0 011 1v16a1 1 0 11-2 0V4a1 1 0 011-1zM12 9a1 1 0 011 1v10a1 1 0 11-2 0V10a1 1 0 011-1zM7 16a1 1 0 10-2 0v4a1 1 0 102 0v-4z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/keyframes.scss
new file mode 100644
index 0000000000..26f40376ba
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-battery-charging {
+  50% {
+
+    background-color: var(--icon-color, var(--color-battery-charging-500, currentColor));
+    -webkit-mask-image: var(--icon-battery-charging-24);
+    mask-image: var(--icon-battery-charging-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-battery-charging-500, currentColor));
+    -webkit-mask-image: var(--icon-battery-charging-16);
+    mask-image: var(--icon-battery-charging-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/placeholders.scss
new file mode 100644
index 0000000000..915ab228fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-battery-charging-icon {
+  --icon-name: icon-battery-charging;
+  content: '';
+}
+%with-battery-charging-mask {
+  --icon-name: icon-battery-charging;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/property-16.scss
new file mode 100644
index 0000000000..befdf660d4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-battery-charging-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.605 3.944a.75.75 0 10-1.21-.888l-2.75 3.75a.75.75 0 00.368 1.155l3.524 1.175-2.142 2.92a.75.75 0 101.21.888l2.75-3.75a.75.75 0 00-.368-1.156L5.463 6.864l2.142-2.92z"/><path d="M2.25 4.5a.75.75 0 00-.75.75v5.5c0 .414.336.75.75.75h.5a.75.75 0 010 1.5h-.5A2.25 2.25 0 010 10.75v-5.5A2.25 2.25 0 012.25 3h.5a.75.75 0 010 1.5h-.5zM9.5 3.75a.75.75 0 01.75-.75h.5A2.25 2.25 0 0113 5.25v5.5A2.25 2.25 0 0110.75 13h-.5a.75.75 0 010-1.5h.5a.75.75 0 00.75-.75v-5.5a.75.75 0 00-.75-.75h-.5a.75.75 0 01-.75-.75zM14.75 6a.75.75 0 01.75.75v2.5a.75.75 0 01-1.5 0v-2.5a.75.75 0 01.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/property-24.scss
new file mode 100644
index 0000000000..9f0b3793af
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-battery-charging-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M13.056 6.003a.75.75 0 10-1.112-1.006l-4.75 5.25a.75.75 0 00.335 1.22l5.428 1.67-4.035 4.885a.75.75 0 001.156.956l4.75-5.75a.75.75 0 00-.357-1.195L9.097 10.38l3.96-4.377z"/><path d="M3.75 6.5c-.69 0-1.25.56-1.25 1.25v8.5c0 .69.56 1.25 1.25 1.25h2.5a.75.75 0 010 1.5h-2.5A2.75 2.75 0 011 16.25v-8.5A2.75 2.75 0 013.75 5h4.5a.75.75 0 010 1.5h-4.5zM15 5.75a.75.75 0 01.75-.75h2.5A2.75 2.75 0 0121 7.75v8.5A2.75 2.75 0 0118.25 19h-4.5a.75.75 0 010-1.5h4.5c.69 0 1.25-.56 1.25-1.25v-8.5c0-.69-.56-1.25-1.25-1.25h-2.5a.75.75 0 01-.75-.75zM22.75 10a.75.75 0 01.75.75v2.5a.75.75 0 01-1.5 0v-2.5a.75.75 0 01.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/battery/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/battery/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/battery/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/battery/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/battery/keyframes.scss
new file mode 100644
index 0000000000..90b7c3f21a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/battery/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-battery {
+  50% {
+
+    background-color: var(--icon-color, var(--color-battery-500, currentColor));
+    -webkit-mask-image: var(--icon-battery-24);
+    mask-image: var(--icon-battery-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-battery-500, currentColor));
+    -webkit-mask-image: var(--icon-battery-16);
+    mask-image: var(--icon-battery-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/battery/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/battery/placeholders.scss
new file mode 100644
index 0000000000..532ca3de13
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/battery/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-battery-icon {
+  --icon-name: icon-battery;
+  content: '';
+}
+%with-battery-mask {
+  --icon-name: icon-battery;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/battery/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/battery/property-16.scss
new file mode 100644
index 0000000000..917ba58862
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/battery/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-battery-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M2.25 3A2.25 2.25 0 000 5.25v5.5A2.25 2.25 0 002.25 13h8.5A2.25 2.25 0 0013 10.75v-5.5A2.25 2.25 0 0010.75 3h-8.5zM1.5 5.25a.75.75 0 01.75-.75h8.5a.75.75 0 01.75.75v5.5a.75.75 0 01-.75.75h-8.5a.75.75 0 01-.75-.75v-5.5z" clip-rule="evenodd"/><path d="M15.5 6.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/battery/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/battery/property-24.scss
new file mode 100644
index 0000000000..63e421bcce
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/battery/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-battery-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M3.75 5A2.75 2.75 0 001 7.75v8.5A2.75 2.75 0 003.75 19h14.5A2.75 2.75 0 0021 16.25v-8.5A2.75 2.75 0 0018.25 5H3.75zM2.5 7.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v8.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25v-8.5z" clip-rule="evenodd"/><path d="M23.5 10.75a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/keyframes.scss
new file mode 100644
index 0000000000..7d214c8b7a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-beaker {
+  50% {
+
+    background-color: var(--icon-color, var(--color-beaker-500, currentColor));
+    -webkit-mask-image: var(--icon-beaker-24);
+    mask-image: var(--icon-beaker-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-beaker-500, currentColor));
+    -webkit-mask-image: var(--icon-beaker-16);
+    mask-image: var(--icon-beaker-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/placeholders.scss
new file mode 100644
index 0000000000..9db2d0d593
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-beaker-icon {
+  --icon-name: icon-beaker;
+  content: '';
+}
+%with-beaker-mask {
+  --icon-name: icon-beaker;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/property-16.scss
new file mode 100644
index 0000000000..2e3d252569
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-beaker-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.608 2H3.75a.75.75 0 000 1.5h.394l.987 2.154c.03.065.03.14.001.205l-2.949 6.685A1.75 1.75 0 003.784 15h8.432a1.75 1.75 0 001.6-2.456l-2.948-6.685a.25.25 0 01.001-.205l.987-2.154h.394a.75.75 0 000-1.5h-.858a.76.76 0 00-.033 0H4.64a.76.76 0 00-.033 0zm5.598 1.5H5.794l.7 1.529c.209.455.213.977.01 1.435L5.828 8h4.346l-.678-1.536a1.75 1.75 0 01.01-1.435l.701-1.529zm-6.65 9.65l1.61-3.65h5.669l1.61 3.65a.25.25 0 01-.23.35h-8.43a.25.25 0 01-.23-.35z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/property-24.scss
new file mode 100644
index 0000000000..e44a958f66
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/beaker/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-beaker-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M6.75 4a.75.75 0 000 1.5h.662l1.441 2.883a.25.25 0 010 .226l-4.657 9.118C3.432 19.224 4.52 21 6.2 21h11.6c1.68 0 2.768-1.776 2.004-3.273l-4.656-9.118a.25.25 0 01-.001-.226L16.588 5.5h.662a.75.75 0 000-1.5H6.75zm8.162 1.5H9.088l1.106 2.213a1.75 1.75 0 01-.007 1.578L8.805 12h6.39l-1.383-2.709a1.75 1.75 0 01-.007-1.578L14.912 5.5zm-9.38 12.909L8.04 13.5h7.922l2.507 4.909A.75.75 0 0117.8 19.5H6.2a.75.75 0 01-.668-1.091z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/keyframes.scss
new file mode 100644
index 0000000000..e088e2e90c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bell-active-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bell-active-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-active-fill-24);
+    mask-image: var(--icon-bell-active-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bell-active-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-active-fill-16);
+    mask-image: var(--icon-bell-active-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/placeholders.scss
new file mode 100644
index 0000000000..0f5dcc27d2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bell-active-fill-icon {
+  --icon-name: icon-bell-active-fill;
+  content: '';
+}
+%with-bell-active-fill-mask {
+  --icon-name: icon-bell-active-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/property-16.scss
new file mode 100644
index 0000000000..8e30a3c66f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bell-active-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M14.25 10.5c-.462 0-1.25-.386-1.25-1.72V6.742a.75.75 0 00-.8-.749 3 3 0 01-3.037-3.975.75.75 0 00-.63-.99A5.092 5.092 0 008 1C4.907 1 3 3.665 3 6.405V8.78c0 1.334-.788 1.72-1.25 1.72a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5z"/><path d="M12 5a2 2 0 100-4 2 2 0 000 4zM6.898 12.872a.75.75 0 00-1.296.756A2.773 2.773 0 008 15c1.023 0 1.918-.55 2.398-1.372a.75.75 0 00-1.296-.756c-.219.374-.63.628-1.102.628-.473 0-.883-.254-1.102-.628z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/property-24.scss
new file mode 100644
index 0000000000..0f0cd3fc01
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bell-active-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M22.25 16.5c-1.231 0-2.25-1.046-2.25-2.35V8.983a7.54 7.54 0 00-.05-.872.75.75 0 00-.856-.655 4 4 0 01-4.402-5.185.75.75 0 00-.499-.948A7.643 7.643 0 0012 1C7.702 1 4 4.665 4 8.983v5.167c0 1.304-1.019 2.35-2.25 2.35a.75.75 0 000 1.5h20.5a.75.75 0 000-1.5z"/><path d="M18.5 6a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM10.42 20.414a.75.75 0 00-1.34.672C9.63 22.188 10.703 23 12 23c1.296 0 2.369-.812 2.92-1.914a.75.75 0 10-1.34-.672c-.347.691-.953 1.086-1.58 1.086-.627 0-1.233-.395-1.58-1.086z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/keyframes.scss
new file mode 100644
index 0000000000..727f630571
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bell-active {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bell-active-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-active-24);
+    mask-image: var(--icon-bell-active-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bell-active-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-active-16);
+    mask-image: var(--icon-bell-active-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/placeholders.scss
new file mode 100644
index 0000000000..db6673e869
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bell-active-icon {
+  --icon-name: icon-bell-active;
+  content: '';
+}
+%with-bell-active-mask {
+  --icon-name: icon-bell-active;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/property-16.scss
new file mode 100644
index 0000000000..9424b3819f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bell-active-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 2.5c-2.062 0-3.5 1.776-3.5 3.905V8.78c0 .677-.145 1.252-.387 1.72h7.774c-.242-.468-.387-1.043-.387-1.72V6.781a.75.75 0 011.5 0V8.78c0 1.334.788 1.72 1.25 1.72a.75.75 0 010 1.5H1.75a.75.75 0 010-1.5c.462 0 1.25-.386 1.25-1.72V6.405C3 3.665 4.907 1 8 1c.2 0 .395.011.587.034a.75.75 0 01-.174 1.49A3.578 3.578 0 008 2.5z"/><path d="M14 3a2 2 0 11-4 0 2 2 0 014 0zM6.898 12.872a.75.75 0 00-1.296.756A2.773 2.773 0 008 15c1.023 0 1.918-.55 2.398-1.372a.75.75 0 00-1.296-.756c-.219.374-.63.628-1.102.628-.473 0-.883-.254-1.102-.628z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/property-24.scss
new file mode 100644
index 0000000000..a6e9d9097d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bell-active-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 2.5c-3.476 0-6.5 3-6.5 6.483v5.167c0 .873-.29 1.693-.782 2.35h14.564a3.917 3.917 0 01-.782-2.35V8.983c0-.295-.022-.587-.064-.875a.75.75 0 011.485-.216c.052.357.079.722.079 1.091v5.167c0 1.304 1.019 2.35 2.25 2.35a.75.75 0 010 1.5H1.75a.75.75 0 010-1.5C2.981 16.5 4 15.454 4 14.15V8.983C4 4.665 7.702 1 12 1a7.631 7.631 0 012.389.385.75.75 0 11-.468 1.425A6.131 6.131 0 0012 2.5z"/><path d="M21 3.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10.42 20.414a.75.75 0 00-1.34.672C9.63 22.188 10.703 23 12 23c1.296 0 2.369-.812 2.92-1.914a.75.75 0 10-1.34-.672c-.347.691-.953 1.086-1.58 1.086-.627 0-1.233-.395-1.58-1.086z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/keyframes.scss
new file mode 100644
index 0000000000..5605c4b648
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bell-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bell-off-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-off-24);
+    mask-image: var(--icon-bell-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bell-off-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-off-16);
+    mask-image: var(--icon-bell-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/placeholders.scss
new file mode 100644
index 0000000000..a46d120a5b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bell-off-icon {
+  --icon-name: icon-bell-off;
+  content: '';
+}
+%with-bell-off-mask {
+  --icon-name: icon-bell-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/property-16.scss
new file mode 100644
index 0000000000..7f4015ed42
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bell-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 2.5c-.546 0-1.033.12-1.457.326a.75.75 0 01-.655-1.35A4.802 4.802 0 018 1c3.093 0 5 2.665 5 5.405v1.78a.75.75 0 01-1.5 0v-1.78C11.5 4.275 10.062 2.5 8 2.5z"/><path fill-rule="evenodd" d="M3.343 4.404L1.22 2.28a.75.75 0 011.06-1.06l12.5 12.5a.75.75 0 11-1.06 1.06L10.94 12H1.75a.75.75 0 010-1.5c.462 0 1.25-.386 1.25-1.72V6.405c0-.691.118-1.37.343-2.001zM9.44 10.5H4.113c.242-.468.387-1.043.387-1.72V6.405c0-.264.023-.524.067-.777L9.439 10.5z" clip-rule="evenodd"/><path d="M5.872 12.602a.75.75 0 011.026.27c.219.374.63.628 1.102.628.473 0 .883-.254 1.102-.628a.75.75 0 011.296.756A2.773 2.773 0 018 15a2.773 2.773 0 01-2.398-1.372.75.75 0 01.27-1.026z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/property-24.scss
new file mode 100644
index 0000000000..0819e55631
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bell-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 2.5c-1.4 0-2.734.487-3.83 1.31a.75.75 0 01-.9-1.2C8.602 1.609 10.247 1 12 1c4.298 0 8 3.665 8 7.983v5.167c0 .173.018.341.052.504a.75.75 0 11-1.467.31 3.939 3.939 0 01-.085-.814V8.983C18.5 5.5 15.476 2.5 12 2.5z"/><path fill-rule="evenodd" d="M4.71 5.77L1.22 2.28a.75.75 0 011.06-1.06l20.5 20.5a.75.75 0 11-1.06 1.06L16.94 18H1.75a.75.75 0 010-1.5C2.981 16.5 4 15.454 4 14.15V8.983c0-1.136.257-2.225.71-3.212zM15.44 16.5H4.717a3.917 3.917 0 00.782-2.35V8.983c0-.714.127-1.408.36-2.062l9.58 9.579z" clip-rule="evenodd"/><path d="M9.414 20.08a.75.75 0 011.007.334c.346.691.952 1.086 1.579 1.086s1.233-.395 1.58-1.086a.75.75 0 111.34.672C14.37 22.188 13.297 23 12 23c-1.296 0-2.369-.812-2.92-1.914a.75.75 0 01.334-1.007z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell/keyframes.scss
new file mode 100644
index 0000000000..44377ef7a6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bell {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bell-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-24);
+    mask-image: var(--icon-bell-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bell-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-16);
+    mask-image: var(--icon-bell-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell/placeholders.scss
new file mode 100644
index 0000000000..4d9289ff36
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bell-icon {
+  --icon-name: icon-bell;
+  content: '';
+}
+%with-bell-mask {
+  --icon-name: icon-bell;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell/property-16.scss
new file mode 100644
index 0000000000..ff365806e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bell-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M13 8.78c0 1.334.788 1.72 1.25 1.72a.75.75 0 010 1.5H1.75a.75.75 0 010-1.5c.462 0 1.25-.386 1.25-1.72V6.405C3 3.665 4.907 1 8 1s5 2.665 5 5.405V8.78zM4.5 6.405C4.5 4.275 5.938 2.5 8 2.5c2.062 0 3.5 1.776 3.5 3.905V8.78c0 .677.145 1.252.387 1.72H4.113c.242-.468.387-1.043.387-1.72V6.405z" clip-rule="evenodd"/><path d="M6.898 12.872a.75.75 0 00-1.296.756A2.773 2.773 0 008 15c1.023 0 1.918-.55 2.398-1.372a.75.75 0 00-1.296-.756c-.219.374-.63.628-1.102.628-.473 0-.883-.254-1.102-.628z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bell/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bell/property-24.scss
new file mode 100644
index 0000000000..29eb8ebddb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bell/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bell-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M20 14.15c0 1.304 1.019 2.35 2.25 2.35a.75.75 0 010 1.5H1.75a.75.75 0 010-1.5C2.981 16.5 4 15.454 4 14.15V8.983C4 4.665 7.702 1 12 1s8 3.665 8 7.983v5.167zM5.5 8.983C5.5 5.5 8.524 2.5 12 2.5s6.5 3 6.5 6.483v5.167c0 .873.29 1.693.782 2.35H4.718a3.917 3.917 0 00.782-2.35V8.983z" clip-rule="evenodd"/><path d="M10.42 20.414a.75.75 0 00-1.34.672C9.63 22.188 10.703 23 12 23c1.296 0 2.369-.812 2.92-1.914a.75.75 0 10-1.34-.672c-.347.691-.953 1.086-1.58 1.086-.627 0-1.233-.395-1.58-1.086z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/keyframes.scss
new file mode 100644
index 0000000000..abcddbf2fb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-bitbucket-color {
+  50% {
+    background-image: var(--icon-bitbucket-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-bitbucket-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/placeholders.scss
new file mode 100644
index 0000000000..2e2a066ca3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bitbucket-color-icon {
+  --icon-name: icon-bitbucket-color;
+  content: '';
+}
+%with-bitbucket-color-mask {
+  --icon-name: icon-bitbucket-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/property-16.scss
new file mode 100644
index 0000000000..7ecc1693a9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bitbucket-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%232684FF" fill-rule="evenodd" d="M1.403 2.15A.43.43 0 011.73 2l12.54.002a.43.43 0 01.424.496l-1.81 11.135a.43.43 0 01-.425.36H3.693a.585.585 0 01-.568-.478l-1.82-11.02a.425.425 0 01.098-.345zm5.203 7.814H9.41l.677-3.93H5.859l.747 3.93z" clip-rule="evenodd"/><path fill="url(%23bitbucket-color-16__paint0_linear_707_135)" d="M14.122 6.033H10.1l-.67 3.931H6.604L3.317 13.86c.105.09.238.139.376.14h8.766a.43.43 0 00.425-.36l1.238-7.607z"/><defs><linearGradient id="bitbucket-color-16__paint0_linear_707_135" x1="11.544" x2="6.918" y1="4.676" y2="11.282" gradientUnits="userSpaceOnUse"><stop offset=".18" stop-color="%230052CC"/><stop offset="1" stop-color="%232684FF"/></linearGradient></defs></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/property-24.scss
new file mode 100644
index 0000000000..addb090b92
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bitbucket-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%232684FF" fill-rule="evenodd" d="M2.153 3.225A.64.64 0 012.643 3l18.715.003a.64.64 0 01.634.744L19.289 20.45a.644.644 0 01-.634.54H5.572a.874.874 0 01-.847-.717L2.008 3.743a.64.64 0 01.145-.518zm7.765 11.722h4.187l1.011-5.897H8.804l1.114 5.897z" clip-rule="evenodd"/><path fill="url(%23bitbucket-color-24__paint0_linear_707_129)" d="M21.138 9.05h-6.005l-1.001 5.897H9.918L5.011 20.79a.871.871 0 00.56.21h13.085c.315 0 .583-.23.634-.54l1.848-11.41z"/><defs><linearGradient id="bitbucket-color-24__paint0_linear_707_129" x1="17.29" x2="10.339" y1="7.014" y2="16.89" gradientUnits="userSpaceOnUse"><stop offset=".18" stop-color="%230052CC"/><stop offset="1" stop-color="%232684FF"/></linearGradient></defs></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/index.scss
new file mode 100644
index 0000000000..1a1c620f33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../bitbucket-color/property-16';
+        @import '../bitbucket-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/keyframes.scss
new file mode 100644
index 0000000000..bd7b81bec1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bitbucket {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bitbucket-500, currentColor));
+    -webkit-mask-image: var(--icon-bitbucket-color-24);
+    mask-image: var(--icon-bitbucket-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bitbucket-500, currentColor));
+    -webkit-mask-image: var(--icon-bitbucket-color-16);
+    mask-image: var(--icon-bitbucket-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/placeholders.scss
new file mode 100644
index 0000000000..e8dc684233
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bitbucket-icon {
+  --icon-name: icon-bitbucket;
+  content: '';
+}
+%with-bitbucket-mask {
+  --icon-name: icon-bitbucket;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/property-16.scss
new file mode 100644
index 0000000000..38f7e42240
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bitbucket-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1.403 2.15A.43.43 0 011.73 2l12.54.002a.43.43 0 01.424.496l-1.81 11.135a.43.43 0 01-.425.36H3.693a.585.585 0 01-.568-.478l-1.82-11.02a.425.425 0 01.098-.345zm5.203 7.814H9.41l.677-3.93H5.859l.747 3.93z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/property-24.scss
new file mode 100644
index 0000000000..fc4d650fc4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bitbucket-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1.403 2.15A.43.43 0 011.73 2l12.54.002a.43.43 0 01.424.496l-1.81 11.135a.43.43 0 01-.425.36H3.693a.585.585 0 01-.568-.478l-1.82-11.02a.425.425 0 01.098-.345zm5.203 7.814H9.41l.677-3.93H5.859l.747 3.93z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bolt/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bolt/index.scss
new file mode 100644
index 0000000000..839de29a14
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bolt/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../zap/property-16';
+        @import '../zap/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bolt/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bolt/keyframes.scss
new file mode 100644
index 0000000000..8b4ff23df7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bolt/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bolt {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bolt-500, currentColor));
+    -webkit-mask-image: var(--icon-zap-24);
+    mask-image: var(--icon-zap-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bolt-500, currentColor));
+    -webkit-mask-image: var(--icon-zap-16);
+    mask-image: var(--icon-zap-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bolt/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bolt/placeholders.scss
new file mode 100644
index 0000000000..f8d2399ea5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bolt/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bolt-icon {
+  --icon-name: icon-bolt;
+  content: '';
+}
+%with-bolt-mask {
+  --icon-name: icon-bolt;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/keyframes.scss
new file mode 100644
index 0000000000..d42f3ddf7b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bookmark-add-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bookmark-add-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-add-fill-24);
+    mask-image: var(--icon-bookmark-add-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bookmark-add-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-add-fill-16);
+    mask-image: var(--icon-bookmark-add-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/placeholders.scss
new file mode 100644
index 0000000000..1992f13008
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bookmark-add-fill-icon {
+  --icon-name: icon-bookmark-add-fill;
+  content: '';
+}
+%with-bookmark-add-fill-mask {
+  --icon-name: icon-bookmark-add-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/property-16.scss
new file mode 100644
index 0000000000..040ebdfd35
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-add-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.25 1A2.25 2.25 0 002 3.25v10.83a1 1 0 001.478.878l4.403-2.394a.25.25 0 01.238 0l4.403 2.394A1 1 0 0014 14.08V3.25A2.25 2.25 0 0011.75 1h-7.5zM7 4.75a.75.75 0 011.5 0V6h1.25a.75.75 0 010 1.5H8.5v1.25a.75.75 0 01-1.5 0V7.5H5.75a.75.75 0 010-1.5H7V4.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/property-24.scss
new file mode 100644
index 0000000000..a4fd1b5b2a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-add-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4 4.75A2.75 2.75 0 016.75 2h10.5A2.75 2.75 0 0120 4.75v16.376a1 1 0 01-1.382.924l-6.522-2.699a.25.25 0 00-.192 0L5.382 22.05A1 1 0 014 21.126V4.75zM11.75 7a.75.75 0 00-.75.75V10H8.75a.75.75 0 000 1.5H11v2.25a.75.75 0 001.5 0V11.5h2.25a.75.75 0 000-1.5H12.5V7.75a.75.75 0 00-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/keyframes.scss
new file mode 100644
index 0000000000..a056a218ef
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bookmark-add {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bookmark-add-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-add-24);
+    mask-image: var(--icon-bookmark-add-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bookmark-add-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-add-16);
+    mask-image: var(--icon-bookmark-add-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/placeholders.scss
new file mode 100644
index 0000000000..ff2424ab96
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bookmark-add-icon {
+  --icon-name: icon-bookmark-add;
+  content: '';
+}
+%with-bookmark-add-mask {
+  --icon-name: icon-bookmark-add;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/property-16.scss
new file mode 100644
index 0000000000..e6e71d6f04
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-add-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 4a.75.75 0 01.75.75V6h1.25a.75.75 0 010 1.5H8.5v1.25a.75.75 0 01-1.5 0V7.5H5.75a.75.75 0 010-1.5H7V4.75A.75.75 0 017.75 4z"/><path fill-rule="evenodd" d="M2 3.25A2.25 2.25 0 014.25 1h7.5A2.25 2.25 0 0114 3.25v10.83a1 1 0 01-1.478.878L8.12 12.564a.25.25 0 00-.238 0l-4.403 2.394A1 1 0 012 14.08V3.25zm2.25-.75a.75.75 0 00-.75.75v9.989l3.664-1.992a1.75 1.75 0 011.672 0l3.664 1.992V3.25a.75.75 0 00-.75-.75h-7.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/property-24.scss
new file mode 100644
index 0000000000..982429205a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-add-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 7a.75.75 0 01.75.75V10h2.25a.75.75 0 010 1.5H12.5v2.25a.75.75 0 01-1.5 0V11.5H8.75a.75.75 0 010-1.5H11V7.75a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M4 4.75A2.75 2.75 0 016.75 2h10.5A2.75 2.75 0 0120 4.75v16.376a1 1 0 01-1.382.924l-6.522-2.699a.25.25 0 00-.192 0L5.382 22.05A1 1 0 014 21.126V4.75zM6.75 3.5c-.69 0-1.25.56-1.25 1.25v15.628l5.83-2.413a1.75 1.75 0 011.34 0l5.83 2.413V4.75c0-.69-.56-1.25-1.25-1.25H6.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/keyframes.scss
new file mode 100644
index 0000000000..9775466054
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bookmark-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bookmark-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-fill-24);
+    mask-image: var(--icon-bookmark-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bookmark-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-fill-16);
+    mask-image: var(--icon-bookmark-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/placeholders.scss
new file mode 100644
index 0000000000..cbf8bf0ab0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bookmark-fill-icon {
+  --icon-name: icon-bookmark-fill;
+  content: '';
+}
+%with-bookmark-fill-mask {
+  --icon-name: icon-bookmark-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/property-16.scss
new file mode 100644
index 0000000000..dce6e2f8c8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M4.25 1A2.25 2.25 0 002 3.25v10.83a1 1 0 001.478.878l4.403-2.394a.25.25 0 01.238 0l4.403 2.394A1 1 0 0014 14.08V3.25A2.25 2.25 0 0011.75 1h-7.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/property-24.scss
new file mode 100644
index 0000000000..278b147816
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M6.75 2A2.75 2.75 0 004 4.75v16.376a1 1 0 001.382.924l6.522-2.699a.25.25 0 01.192 0l6.522 2.699A1 1 0 0020 21.126V4.75A2.75 2.75 0 0017.25 2H6.75z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/keyframes.scss
new file mode 100644
index 0000000000..bdfff323f9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bookmark-remove-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bookmark-remove-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-remove-fill-24);
+    mask-image: var(--icon-bookmark-remove-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bookmark-remove-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-remove-fill-16);
+    mask-image: var(--icon-bookmark-remove-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/placeholders.scss
new file mode 100644
index 0000000000..faebcfa3af
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bookmark-remove-fill-icon {
+  --icon-name: icon-bookmark-remove-fill;
+  content: '';
+}
+%with-bookmark-remove-fill-mask {
+  --icon-name: icon-bookmark-remove-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/property-16.scss
new file mode 100644
index 0000000000..f8f7a2eb4e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-remove-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2 3.25A2.25 2.25 0 014.25 1h7.5A2.25 2.25 0 0114 3.25v10.83a1 1 0 01-1.478.878L8.12 12.564a.25.25 0 00-.238 0l-4.403 2.394A1 1 0 012 14.08V3.25zM5.75 6a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/property-24.scss
new file mode 100644
index 0000000000..034c0b6aa0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-remove-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4 4.75A2.75 2.75 0 016.75 2h10.5A2.75 2.75 0 0120 4.75v16.376a1 1 0 01-1.382.924l-6.522-2.699a.25.25 0 00-.192 0L5.382 22.05A1 1 0 014 21.126V4.75zM8.75 10a.75.75 0 000 1.5h6a.75.75 0 000-1.5h-6z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/keyframes.scss
new file mode 100644
index 0000000000..1fe3dc167c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bookmark-remove {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bookmark-remove-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-remove-24);
+    mask-image: var(--icon-bookmark-remove-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bookmark-remove-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-remove-16);
+    mask-image: var(--icon-bookmark-remove-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/placeholders.scss
new file mode 100644
index 0000000000..2dfa111566
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bookmark-remove-icon {
+  --icon-name: icon-bookmark-remove;
+  content: '';
+}
+%with-bookmark-remove-mask {
+  --icon-name: icon-bookmark-remove;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/property-16.scss
new file mode 100644
index 0000000000..c924f970c9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-remove-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.75 6a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z"/><path fill-rule="evenodd" d="M4.25 1A2.25 2.25 0 002 3.25v10.83a1 1 0 001.478.878l4.403-2.394a.25.25 0 01.238 0l4.403 2.394A1 1 0 0014 14.08V3.25A2.25 2.25 0 0011.75 1h-7.5zM3.5 3.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v9.989l-3.664-1.992a1.75 1.75 0 00-1.672 0L3.5 13.239V3.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/property-24.scss
new file mode 100644
index 0000000000..e9fd2ffc29
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-remove-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.75 10a.75.75 0 000 1.5h6a.75.75 0 000-1.5h-6z"/><path fill-rule="evenodd" d="M6.75 2A2.75 2.75 0 004 4.75v16.376a1 1 0 001.382.924l6.522-2.699a.25.25 0 01.192 0l6.522 2.699A1 1 0 0020 21.126V4.75A2.75 2.75 0 0017.25 2H6.75zM5.5 4.75c0-.69.56-1.25 1.25-1.25h10.5c.69 0 1.25.56 1.25 1.25v15.628l-5.83-2.413a1.75 1.75 0 00-1.34 0L5.5 20.378V4.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/keyframes.scss
new file mode 100644
index 0000000000..18c81ddcb2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bookmark {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bookmark-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-24);
+    mask-image: var(--icon-bookmark-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bookmark-500, currentColor));
+    -webkit-mask-image: var(--icon-bookmark-16);
+    mask-image: var(--icon-bookmark-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/placeholders.scss
new file mode 100644
index 0000000000..a425058f57
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bookmark-icon {
+  --icon-name: icon-bookmark;
+  content: '';
+}
+%with-bookmark-mask {
+  --icon-name: icon-bookmark;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/property-16.scss
new file mode 100644
index 0000000000..7b0ece7906
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2 3.25A2.25 2.25 0 014.25 1h7.5A2.25 2.25 0 0114 3.25v10.83a1 1 0 01-1.478.878L8.12 12.564a.25.25 0 00-.238 0l-4.403 2.394A1 1 0 012 14.08V3.25zm2.25-.75a.75.75 0 00-.75.75v9.989l3.664-1.992a1.75 1.75 0 011.672 0l3.664 1.992V3.25a.75.75 0 00-.75-.75h-7.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/property-24.scss
new file mode 100644
index 0000000000..388d4fd8b6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bookmark-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4 4.75A2.75 2.75 0 016.75 2h10.5A2.75 2.75 0 0120 4.75v16.376a1 1 0 01-1.382.924l-6.522-2.699a.25.25 0 00-.192 0L5.382 22.05A1 1 0 014 21.126V4.75zM6.75 3.5c-.69 0-1.25.56-1.25 1.25v15.628l5.83-2.413a1.75 1.75 0 011.34 0l5.83 2.413V4.75c0-.69-.56-1.25-1.25-1.25H6.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/keyframes.scss
new file mode 100644
index 0000000000..d828bbfa3e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bottom {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bottom-500, currentColor));
+    -webkit-mask-image: var(--icon-bottom-24);
+    mask-image: var(--icon-bottom-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bottom-500, currentColor));
+    -webkit-mask-image: var(--icon-bottom-16);
+    mask-image: var(--icon-bottom-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/placeholders.scss
new file mode 100644
index 0000000000..18e0ebd706
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bottom-icon {
+  --icon-name: icon-bottom;
+  content: '';
+}
+%with-bottom-mask {
+  --icon-name: icon-bottom;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/property-16.scss
new file mode 100644
index 0000000000..f5a9af9b25
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bottom-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 1a.75.75 0 01.75.75v7.614l2.955-3.129a.75.75 0 011.09 1.03l-4.25 4.5a.747.747 0 01-.533.235h-.024a.747.747 0 01-.51-.211l-.004-.005a.862.862 0 01-.02-.02l-4.25-4.499a.75.75 0 011.091-1.03L7 9.364V1.75A.75.75 0 017.75 1zM2.5 13.5a.75.75 0 000 1.5H13a.75.75 0 000-1.5H2.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/property-24.scss
new file mode 100644
index 0000000000..c9a24d32d8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bottom/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bottom-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 2a.75.75 0 01.75.75v12.638l4.96-5.158a.75.75 0 111.08 1.04l-6.25 6.5a.75.75 0 01-1.08 0l-6.25-6.5a.75.75 0 111.08-1.04L11 15.388V2.75a.75.75 0 01.75-.75zM3.5 20.5a.75.75 0 000 1.5H20a.75.75 0 000-1.5H3.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/keyframes.scss
new file mode 100644
index 0000000000..0a3df03910
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-boundary-color {
+  50% {
+    background-image: var(--icon-boundary-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-boundary-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/placeholders.scss
new file mode 100644
index 0000000000..001c5d751b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-boundary-color-icon {
+  --icon-name: icon-boundary-color;
+  content: '';
+}
+%with-boundary-color-mask {
+  --icon-name: icon-boundary-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/property-16.scss
new file mode 100644
index 0000000000..283994f728
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-boundary-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23F24C53"><path d="M4.81 15v-1.085h2.25v-.67H5.968v-1.093h5.149L8.726 8l2.392-4.154H5.84v5.76H3V1h9.775l1.631 2.832L12.006 8l2.448 4.252L12.872 15H4.81z"/><path d="M5.248 12.152h-1.09v1.092h1.09v-1.092zM4.09 13.907H3v1.092h1.09v-1.092z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/property-24.scss
new file mode 100644
index 0000000000..7a06a29209
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-boundary-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23F24C53"><path d="M6.586 22v-1.55H9.8v-.958H8.241v-1.56h7.356L12.18 12l3.417-5.934H8.058v8.229H4V2h13.964l2.33 4.046L16.866 12l3.498 6.074L18.103 22H6.586z"/><path d="M7.21 17.932H5.656v1.56H7.21v-1.56zM5.556 20.438H4v1.56h1.556v-1.56z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/index.scss
new file mode 100644
index 0000000000..30424e4103
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../boundary-color/property-16';
+        @import '../boundary-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/keyframes.scss
new file mode 100644
index 0000000000..aee814260d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-boundary {
+  50% {
+
+    background-color: var(--icon-color, var(--color-boundary-500, currentColor));
+    -webkit-mask-image: var(--icon-boundary-color-24);
+    mask-image: var(--icon-boundary-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-boundary-500, currentColor));
+    -webkit-mask-image: var(--icon-boundary-color-16);
+    mask-image: var(--icon-boundary-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/placeholders.scss
new file mode 100644
index 0000000000..11911365c9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-boundary-icon {
+  --icon-name: icon-boundary;
+  content: '';
+}
+%with-boundary-mask {
+  --icon-name: icon-boundary;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/property-16.scss
new file mode 100644
index 0000000000..019af7bfa1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-boundary-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.81 15v-1.085h2.25v-.67H5.968v-1.093h5.149L8.726 8l2.392-4.154H5.84v5.76H3V1h9.775l1.631 2.832L12.006 8l2.448 4.252L12.872 15H4.81z"/><path d="M5.248 12.152h-1.09v1.092h1.09v-1.092zM3 13.907h1.09v1.092H3v-1.092z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/property-24.scss
new file mode 100644
index 0000000000..c243db4642
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/boundary/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-boundary-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.81 15v-1.085h2.25v-.67H5.968v-1.093h5.149L8.726 8l2.392-4.154H5.84v5.76H3V1h9.775l1.631 2.832L12.006 8l2.448 4.252L12.872 15H4.81z"/><path d="M5.248 12.152h-1.09v1.092h1.09v-1.092zM3 13.907h1.09v1.092H3v-1.092z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/index.scss
new file mode 100644
index 0000000000..626934f911
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../check-square-fill/property-16';
+        @import '../check-square-fill/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/keyframes.scss
new file mode 100644
index 0000000000..f6fc4444ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-box-check-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-box-check-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-check-square-fill-24);
+    mask-image: var(--icon-check-square-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-box-check-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-check-square-fill-16);
+    mask-image: var(--icon-check-square-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/placeholders.scss
new file mode 100644
index 0000000000..8448aedb07
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-box-check-fill-icon {
+  --icon-name: icon-box-check-fill;
+  content: '';
+}
+%with-box-check-fill-mask {
+  --icon-name: icon-box-check-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/index.scss
new file mode 100644
index 0000000000..d9656ffd8f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../square/property-16';
+        @import '../square/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/keyframes.scss
new file mode 100644
index 0000000000..96e5c98cd5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-box-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-box-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-square-24);
+    mask-image: var(--icon-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-box-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-square-16);
+    mask-image: var(--icon-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/placeholders.scss
new file mode 100644
index 0000000000..0c20a1270a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-box-outline-icon {
+  --icon-name: icon-box-outline;
+  content: '';
+}
+%with-box-outline-mask {
+  --icon-name: icon-box-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box/keyframes.scss
new file mode 100644
index 0000000000..d04e8bab2e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-box {
+  50% {
+
+    background-color: var(--icon-color, var(--color-box-500, currentColor));
+    -webkit-mask-image: var(--icon-box-24);
+    mask-image: var(--icon-box-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-box-500, currentColor));
+    -webkit-mask-image: var(--icon-box-16);
+    mask-image: var(--icon-box-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box/placeholders.scss
new file mode 100644
index 0000000000..7ffe2d4e80
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-box-icon {
+  --icon-name: icon-box;
+  content: '';
+}
+%with-box-mask {
+  --icon-name: icon-box;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box/property-16.scss
new file mode 100644
index 0000000000..b0e4e00988
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-box-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.98.678a2.25 2.25 0 012.04 0l5.297 2.696c.42.214.683.644.683 1.114v6.717c0 .658-.37 1.261-.956 1.56L9.02 15.322a2.25 2.25 0 01-2.042 0l-5.023-2.557A1.75 1.75 0 011 11.205V4.488c0-.47.264-.9.683-1.114L6.979.678zm1.36 1.337a.75.75 0 00-.68 0L3.224 4.273 8 6.661l4.776-2.388L8.34 2.015zm-5.84 9.19V5.588l4.75 2.375v5.814l-4.613-2.35a.25.25 0 01-.137-.222zm6.25 2.572l4.613-2.35a.25.25 0 00.137-.222V5.588L8.75 7.963v5.814z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/box/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/box/property-24.scss
new file mode 100644
index 0000000000..2bc182091b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/box/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-box-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.206.754a2.75 2.75 0 00-2.412 0L1.983 5.052A1.75 1.75 0 001 6.625v9.902a2.75 2.75 0 001.496 2.448l8.25 4.226a2.75 2.75 0 002.508 0l8.25-4.226A2.75 2.75 0 0023 16.527V6.625a1.75 1.75 0 00-.983-1.573L13.206.754zm-1.754 1.348a1.25 1.25 0 011.096 0l8.11 3.956L12 10.17 3.343 6.058l8.109-3.956zM2.5 7.318v9.21c0 .468.263.898.68 1.112l8.07 4.133V11.474L2.5 7.318zm10.25 14.455l8.07-4.133a1.25 1.25 0 00.68-1.113v-9.21l-8.75 4.157v10.3z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/keyframes.scss
new file mode 100644
index 0000000000..48fdbcd884
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-briefcase {
+  50% {
+
+    background-color: var(--icon-color, var(--color-briefcase-500, currentColor));
+    -webkit-mask-image: var(--icon-briefcase-24);
+    mask-image: var(--icon-briefcase-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-briefcase-500, currentColor));
+    -webkit-mask-image: var(--icon-briefcase-16);
+    mask-image: var(--icon-briefcase-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/placeholders.scss
new file mode 100644
index 0000000000..373830fb45
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-briefcase-icon {
+  --icon-name: icon-briefcase;
+  content: '';
+}
+%with-briefcase-mask {
+  --icon-name: icon-briefcase;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/property-16.scss
new file mode 100644
index 0000000000..6e9408a16b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-briefcase-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.75 1A1.75 1.75 0 004 2.75V4H2.25A2.25 2.25 0 000 6.25v6.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-6.5A2.25 2.25 0 0013.75 4H12V2.75A1.75 1.75 0 0010.25 1h-4.5zm6.75 12.5h1.25a.75.75 0 00.75-.75v-6.5a.75.75 0 00-.75-.75H12.5v8zm-1.5-8v8H5v-8h6zm-7.5 8v-8H2.25a.75.75 0 00-.75.75v6.5c0 .414.336.75.75.75H3.5zm7-9.5V2.75a.25.25 0 00-.25-.25h-4.5a.25.25 0 00-.25.25V4h5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/property-24.scss
new file mode 100644
index 0000000000..0b287c0079
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-briefcase-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.75 2A2.75 2.75 0 007 4.75V6H3.75A2.75 2.75 0 001 8.75v10.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V8.75A2.75 2.75 0 0020.25 6H17V4.75A2.75 2.75 0 0014.25 2h-4.5zm6.75 5.5h-9v13h9v-13zm1.5 13v-13h2.25c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H18zM3.75 7.5H6v13H3.75c-.69 0-1.25-.56-1.25-1.25V8.75c0-.69.56-1.25 1.25-1.25zM15.5 6V4.75c0-.69-.56-1.25-1.25-1.25h-4.5c-.69 0-1.25.56-1.25 1.25V6h7z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/index.scss
new file mode 100644
index 0000000000..23884d4269
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../radio/property-16';
+        @import '../radio/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/keyframes.scss
new file mode 100644
index 0000000000..ebd7347b08
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-broadcast {
+  50% {
+
+    background-color: var(--icon-color, var(--color-broadcast-500, currentColor));
+    -webkit-mask-image: var(--icon-radio-24);
+    mask-image: var(--icon-radio-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-broadcast-500, currentColor));
+    -webkit-mask-image: var(--icon-radio-16);
+    mask-image: var(--icon-radio-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/placeholders.scss
new file mode 100644
index 0000000000..85b59489a3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-broadcast-icon {
+  --icon-name: icon-broadcast;
+  content: '';
+}
+%with-broadcast-mask {
+  --icon-name: icon-broadcast;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bug/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bug/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bug/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bug/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bug/keyframes.scss
new file mode 100644
index 0000000000..1aa1aa29d1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bug/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bug {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bug-500, currentColor));
+    -webkit-mask-image: var(--icon-bug-24);
+    mask-image: var(--icon-bug-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bug-500, currentColor));
+    -webkit-mask-image: var(--icon-bug-16);
+    mask-image: var(--icon-bug-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bug/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bug/placeholders.scss
new file mode 100644
index 0000000000..b71b5792aa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bug/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bug-icon {
+  --icon-name: icon-bug;
+  content: '';
+}
+%with-bug-mask {
+  --icon-name: icon-bug;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bug/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bug/property-16.scss
new file mode 100644
index 0000000000..533374f9ad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bug/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bug-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.136.803a.75.75 0 011.061 1.06l-.415.416C11.525 2.932 12 3.853 12 4.909c0 .103-.005.205-.014.306.094.016.173.03.238.045a.973.973 0 01.776.951V6.6l1.571-.629a.75.75 0 01.557 1.393L13 8.214v1.13l1.849.246a.75.75 0 11-.198 1.487l-1.659-.221a3.935 3.935 0 01-.426 1.555l2.364.887a.75.75 0 01-.527 1.404l-2.667-1a.752.752 0 01-.12-.058C10.687 14.491 9.384 15 8 15s-2.687-.509-3.616-1.356a.752.752 0 01-.12.058l-2.667 1a.75.75 0 11-.527-1.404l2.364-.887a3.935 3.935 0 01-.426-1.555l-1.659.22a.75.75 0 01-.198-1.486L3 9.343V8.174L.971 7.363a.75.75 0 01.557-1.393L3 6.56V6.21c0-.474.334-.854.776-.95.065-.015.144-.03.238-.046C4.004 5.114 4 5.012 4 4.909c0-1.056.475-1.977 1.218-2.63l-.415-.415A.75.75 0 015.863.803l.695.694a4.318 4.318 0 012.884 0l.694-.694zm-4.63 4.26C6.133 5.026 6.946 5 8 5c1.054 0 1.867.026 2.494.063.004-.051.006-.102.006-.154C10.5 3.793 9.461 2.75 8 2.75S5.5 3.793 5.5 4.91c0 .05.002.102.006.153zM4.5 7.652v-.994C5.043 6.586 6.093 6.5 8 6.5s2.957.086 3.5.158v3.949c0 1.494-1.454 2.893-3.5 2.893-2.046 0-3.5-1.4-3.5-2.893v-.59-2.335-.03z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bug/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bug/property-24.scss
new file mode 100644
index 0000000000..87ed5c294e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bug/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bug-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M15.72 1.22a.75.75 0 111.06 1.06l-1.176 1.177a4.597 4.597 0 011.293 4.256c.612.071 1.008.147 1.258.208.54.133.845.61.845 1.089v1.408l2.987-1.12a.75.75 0 01.526 1.404L19 12.02v2.318l3.343.418a.75.75 0 11-.186 1.488L19 15.85v.4c0 .931-.195 1.816-.545 2.62l3.808 1.428a.75.75 0 01-.526 1.404l-4-1.5a.754.754 0 01-.046-.019C16.415 21.894 14.332 23 12 23s-4.415-1.106-5.69-2.817a.775.775 0 01-.047.02l-4 1.5a.75.75 0 11-.526-1.405l3.808-1.429A6.523 6.523 0 015 16.25v-.4l-3.157.394a.75.75 0 01-.186-1.488L5 14.338V12.02l-3.513-1.318a.75.75 0 01.526-1.404L5 10.418V9.01c0-.479.305-.956.845-1.089.25-.06.646-.137 1.258-.208a4.597 4.597 0 011.293-4.256L7.22 2.28a.75.75 0 011.06-1.06L9.63 2.568A5.196 5.196 0 0112 2c.852 0 1.661.205 2.371.568L15.72 1.22zM8.617 7.586A58.06 58.06 0 0112 7.5c1.4 0 2.508.035 3.383.086.076-.266.117-.547.117-.836 0-1.753-1.524-3.25-3.5-3.25S8.5 4.997 8.5 6.75c0 .29.04.57.117.836zM6.5 11.485v-2.17C7.198 9.188 8.772 9 12 9s4.802.187 5.5.316v6.934c0 2.87-2.433 5.25-5.5 5.25s-5.5-2.38-5.5-5.25v-1.234-3.5-.031z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/build/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/build/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/build/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/build/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/build/keyframes.scss
new file mode 100644
index 0000000000..4ec74640e9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/build/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-build {
+  50% {
+
+    background-color: var(--icon-color, var(--color-build-500, currentColor));
+    -webkit-mask-image: var(--icon-build-24);
+    mask-image: var(--icon-build-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-build-500, currentColor));
+    -webkit-mask-image: var(--icon-build-16);
+    mask-image: var(--icon-build-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/build/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/build/placeholders.scss
new file mode 100644
index 0000000000..bdb4219833
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/build/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-build-icon {
+  --icon-name: icon-build;
+  content: '';
+}
+%with-build-mask {
+  --icon-name: icon-build;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/build/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/build/property-16.scss
new file mode 100644
index 0000000000..d934203500
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/build/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-build-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.603 2.549A4.251 4.251 0 005.47 8.696a1.076 1.076 0 01-.255 1.312l-3 2.374a.75.75 0 01-.93-1.176l2.701-2.139A5.75 5.75 0 019.47 1.004c.53.02.924.363 1.066.797.137.42.035.902-.306 1.243L8.75 4.523v1.596l1.13 1.13h1.597l1.48-1.479a1.22 1.22 0 011.241-.306c.435.142.778.537.798 1.066a5.75 5.75 0 01-7.978 5.52l-2.102 2.664a.75.75 0 01-1.177-.928l2.333-2.959a1.076 1.076 0 011.297-.265 4.251 4.251 0 006.082-3.165L12.41 8.438c-.199.2-.47.312-.75.312h-1.96c-.282 0-.552-.112-.751-.312L7.56 7.052c-.2-.2-.311-.47-.311-.751V4.34c0-.281.112-.551.311-.75l1.042-1.042z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/build/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/build/property-24.scss
new file mode 100644
index 0000000000..19875f37d8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/build/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-build-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M14.05 2.5a7.45 7.45 0 00-6.625 10.86 1.284 1.284 0 01-.29 1.556l-4.92 3.894a.75.75 0 01-.93-1.176l4.727-3.743a8.95 8.95 0 019.013-12.839c1.1.12 1.369 1.403.703 2.068L12.75 6.1v3.016l2.135 2.134H17.9l2.979-2.978c.665-.666 1.948-.396 2.067.703a8.95 8.95 0 01-12.704 9.078l-3.677 4.663a.75.75 0 01-1.178-.93l3.827-4.851a.763.763 0 01.059-.066 1.284 1.284 0 011.478-.236 7.45 7.45 0 0010.746-6.859l-2.606 2.607c-.237.236-.558.37-.893.37h-3.212c-.335 0-.657-.133-.893-.37l-2.274-2.274a1.262 1.262 0 01-.37-.893V6c0-.335.133-.656.37-.892l2.605-2.606a7.62 7.62 0 00-.175-.002z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/keyframes.scss
new file mode 100644
index 0000000000..512424d7cd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-bulb {
+  50% {
+
+    background-color: var(--icon-color, var(--color-bulb-500, currentColor));
+    -webkit-mask-image: var(--icon-bulb-24);
+    mask-image: var(--icon-bulb-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-bulb-500, currentColor));
+    -webkit-mask-image: var(--icon-bulb-16);
+    mask-image: var(--icon-bulb-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/placeholders.scss
new file mode 100644
index 0000000000..80727c6f97
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-bulb-icon {
+  --icon-name: icon-bulb;
+  content: '';
+}
+%with-bulb-mask {
+  --icon-name: icon-bulb;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/property-16.scss
new file mode 100644
index 0000000000..0ba1d124d5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bulb-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 0a.75.75 0 01.75.75v1a.75.75 0 01-1.5 0v-1A.75.75 0 018 0zM13.28 2.22a.75.75 0 010 1.06l-.707.707a.75.75 0 11-1.06-1.06l.707-.707a.75.75 0 011.06 0zM2.72 3.28a.75.75 0 011.06-1.06l.707.707a.75.75 0 01-1.06 1.06L2.72 3.28zM15.5 7.5a.75.75 0 01-.75.75h-1a.75.75 0 010-1.5h1a.75.75 0 01.75.75zM2.25 8.25a.75.75 0 000-1.5h-1a.75.75 0 000 1.5h1zM6.25 15.25A.75.75 0 017 14.5h2A.75.75 0 019 16H7a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M8 3.5A4.5 4.5 0 003.5 8c0 1.53.926 2.465 1.718 3.264l.2.203c.05.05.081.124.081.208.001 1.008.818 1.825 1.826 1.825H8.69c1 0 1.811-.81 1.811-1.81 0-.083.033-.159.088-.213l.067-.066C11.492 10.592 12.5 9.605 12.5 8A4.5 4.5 0 008 3.5zM5 8a3 3 0 016 0c0 .928-.54 1.502-1.462 2.406-.347.34-.538.803-.538 1.283a.31.31 0 01-.31.311H7.324A.326.326 0 017 11.674c0-.461-.175-.914-.507-1.255l-.115-.117C5.49 9.397 5 8.894 5 8z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/property-24.scss
new file mode 100644
index 0000000000..1bf52a5e2b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/bulb/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-bulb-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 1a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0112 1zM22.5 11.75a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5a.75.75 0 01.75.75zM3.75 12.5a.75.75 0 000-1.5h-1.5a.75.75 0 000 1.5h1.5zM19.53 4.22a.75.75 0 010 1.06l-1.06 1.061a.75.75 0 01-1.061-1.06l1.06-1.061a.75.75 0 011.061 0zM4.47 5.28a.75.75 0 011.06-1.06l1.061 1.06a.75.75 0 01-1.06 1.061L4.47 5.281zM9.5 22.25a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M12 5.5a6 6 0 00-6 6c0 1.993 1.186 3.18 2.287 4.281l.316.318a.702.702 0 01.196.494v.658a2.25 2.25 0 002.25 2.249h1.901a2.25 2.25 0 002.25-2.25v-.629c0-.199.08-.386.216-.52l.122-.118C16.704 14.851 18 13.593 18 11.5a6 6 0 00-6-6zm-4.5 6a4.5 4.5 0 019 0c0 1.436-.85 2.28-2.13 3.527-.433.421-.67.998-.67 1.594v.629a.75.75 0 01-.75.75h-1.9a.75.75 0 01-.75-.75l-.001-.658c0-.569-.216-1.127-.626-1.544l-.264-.268C8.239 13.596 7.5 12.848 7.5 11.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/keyframes.scss
new file mode 100644
index 0000000000..5010f320d9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-calendar {
+  50% {
+
+    background-color: var(--icon-color, var(--color-calendar-500, currentColor));
+    -webkit-mask-image: var(--icon-calendar-24);
+    mask-image: var(--icon-calendar-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-calendar-500, currentColor));
+    -webkit-mask-image: var(--icon-calendar-16);
+    mask-image: var(--icon-calendar-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/placeholders.scss
new file mode 100644
index 0000000000..574363a670
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-calendar-icon {
+  --icon-name: icon-calendar;
+  content: '';
+}
+%with-calendar-mask {
+  --icon-name: icon-calendar;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/property-16.scss
new file mode 100644
index 0000000000..fbcb6f8aed
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-calendar-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/property-24.scss
new file mode 100644
index 0000000000..c1b0743cc9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/calendar/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-calendar-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M17 1a.75.75 0 00-1.5 0v1h-7V1A.75.75 0 007 1v1H4.75A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H17V1zm3.5 7V4.75c0-.69-.56-1.25-1.25-1.25H17V5a.75.75 0 01-1.5 0V3.5h-7V5A.75.75 0 017 5V3.5H4.75c-.69 0-1.25.56-1.25 1.25V8h17zm-17 1.5h17v9.75c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V9.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/keyframes.scss
new file mode 100644
index 0000000000..9357bae6be
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-camera-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-camera-off-500, currentColor));
+    -webkit-mask-image: var(--icon-camera-off-24);
+    mask-image: var(--icon-camera-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-camera-off-500, currentColor));
+    -webkit-mask-image: var(--icon-camera-off-16);
+    mask-image: var(--icon-camera-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/placeholders.scss
new file mode 100644
index 0000000000..d480378678
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-camera-off-icon {
+  --icon-name: icon-camera-off;
+  content: '';
+}
+%with-camera-off-mask {
+  --icon-name: icon-camera-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/property-16.scss
new file mode 100644
index 0000000000..16bbbcdeaf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-camera-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1.22 1.22a.75.75 0 011.06 0l12.5 12.5a.75.75 0 11-1.06 1.06l-.78-.78H3.25A2.25 2.25 0 011 11.75V5.155a2.25 2.25 0 011.138-1.957L1.22 2.28a.75.75 0 010-1.06zm8.304 9.364l1.915 1.916H3.25a.75.75 0 01-.75-.75V5.155a.75.75 0 01.686-.748l.148-.012 2.081 2.081a3 3 0 004.108 4.108zM8.389 9.45L6.55 7.611A1.5 1.5 0 008.389 9.45z" clip-rule="evenodd"/><path d="M5.866 1h3.958c.475 0 .91.27 1.12.696l.54 1.093 1.457.124A2.25 2.25 0 0115 5.155v5.595a.75.75 0 01-1.5 0V5.155a.75.75 0 00-.686-.748l-1.878-.16a.75.75 0 01-.608-.414L9.668 2.5H5.866a.75.75 0 010-1.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/property-24.scss
new file mode 100644
index 0000000000..9eeeb8beb0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-camera-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5 8a1 1 0 000 2h.01a1 1 0 100-2H5z"/><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06l2.615 2.616-.221.01A2.75 2.75 0 001 7.654V19.25A2.75 2.75 0 003.75 22h17.19l.78.78a.75.75 0 101.06-1.06L2.28 1.22zM19.44 20.5l-3.935-3.934a5 5 0 01-7.07-7.07l-3.17-3.17-1.577.079A1.25 1.25 0 002.5 7.653V19.25c0 .69.56 1.25 1.25 1.25h15.69zm-9.945-9.944l4.95 4.949a3.5 3.5 0 01-4.95-4.95z" clip-rule="evenodd"/><path d="M9.094 2c-.64 0-1.23.35-1.537.912l-.421.773a.75.75 0 101.317.718l.421-.773a.25.25 0 01.22-.13h5.812a.25.25 0 01.22.13l1.216 2.23a.75.75 0 00.622.39l3.346.158a1.25 1.25 0 011.19 1.249V18.5a.75.75 0 001.5 0V7.657a2.75 2.75 0 00-2.62-2.747l-2.923-.14-1.014-1.858A1.75 1.75 0 0014.906 2H9.094z"/><path d="M12.345 8.698a.75.75 0 01.915-.538 5.007 5.007 0 013.58 3.58.75.75 0 01-1.452.377 3.507 3.507 0 00-2.505-2.505.75.75 0 01-.538-.914z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/camera/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/camera/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/camera/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/camera/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/camera/keyframes.scss
new file mode 100644
index 0000000000..bcd19bab4c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/camera/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-camera {
+  50% {
+
+    background-color: var(--icon-color, var(--color-camera-500, currentColor));
+    -webkit-mask-image: var(--icon-camera-24);
+    mask-image: var(--icon-camera-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-camera-500, currentColor));
+    -webkit-mask-image: var(--icon-camera-16);
+    mask-image: var(--icon-camera-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/camera/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/camera/placeholders.scss
new file mode 100644
index 0000000000..2fec80d617
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/camera/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-camera-icon {
+  --icon-name: icon-camera;
+  content: '';
+}
+%with-camera-mask {
+  --icon-name: icon-camera;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/camera/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/camera/property-16.scss
new file mode 100644
index 0000000000..a05d36cebc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/camera/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-camera-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3 6a1 1 0 011-1h.01a1 1 0 010 2H4a1 1 0 01-1-1z"/><path fill-rule="evenodd" d="M8 5a3 3 0 100 6 3 3 0 000-6zM6.5 8a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M5.056 1.696A1.25 1.25 0 016.176 1h3.648c.475 0 .91.27 1.12.696l.54 1.093 1.457.124A2.25 2.25 0 0115 5.155v6.595A2.25 2.25 0 0112.75 14h-9.5A2.25 2.25 0 011 11.75V5.155a2.25 2.25 0 012.059-2.242l1.456-.124.541-1.093zm1.276.804l-.66 1.333a.75.75 0 01-.608.414l-1.878.16a.75.75 0 00-.686.748v6.595c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V5.155a.75.75 0 00-.686-.748l-1.878-.16a.75.75 0 01-.608-.414L9.668 2.5H6.332z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/camera/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/camera/property-24.scss
new file mode 100644
index 0000000000..7f35d16f03
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/camera/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-camera-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M7 13a5 5 0 1110 0 5 5 0 01-10 0zm5-3.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z" clip-rule="evenodd"/><path d="M5 8a1 1 0 000 2h.01a1 1 0 000-2H5z"/><path fill-rule="evenodd" d="M7.557 2.912A1.75 1.75 0 019.094 2h5.812c.64 0 1.23.35 1.537.912l1.014 1.859 2.924.14A2.75 2.75 0 0123 7.656V19.25A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25V7.657A2.75 2.75 0 013.62 4.91l2.923-.14 1.014-1.858zm1.537.588a.25.25 0 00-.22.13L7.658 5.86a.75.75 0 01-.622.39l-3.345.158A1.25 1.25 0 002.5 7.657V19.25c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V7.657a1.25 1.25 0 00-1.19-1.249l-3.346-.159a.75.75 0 01-.622-.39L15.126 3.63a.25.25 0 00-.22-.13H9.094z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/index.scss
new file mode 100644
index 0000000000..8e7da4442e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../x-circle-fill/property-16';
+        @import '../x-circle-fill/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/keyframes.scss
new file mode 100644
index 0000000000..e3222eae5e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cancel-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cancel-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-circle-fill-24);
+    mask-image: var(--icon-x-circle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cancel-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-circle-fill-16);
+    mask-image: var(--icon-x-circle-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/placeholders.scss
new file mode 100644
index 0000000000..136f1a88c3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cancel-circle-fill-icon {
+  --icon-name: icon-cancel-circle-fill;
+  content: '';
+}
+%with-cancel-circle-fill-mask {
+  --icon-name: icon-cancel-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/index.scss
new file mode 100644
index 0000000000..b7a1e026d1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../x-circle/property-16';
+        @import '../x-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/keyframes.scss
new file mode 100644
index 0000000000..f9ca748976
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cancel-circle-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cancel-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-x-circle-24);
+    mask-image: var(--icon-x-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cancel-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-x-circle-16);
+    mask-image: var(--icon-x-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/placeholders.scss
new file mode 100644
index 0000000000..112ff786ff
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cancel-circle-outline-icon {
+  --icon-name: icon-cancel-circle-outline;
+  content: '';
+}
+%with-cancel-circle-outline-mask {
+  --icon-name: icon-cancel-circle-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/index.scss
new file mode 100644
index 0000000000..d6f0d8652b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../x/property-16';
+        @import '../x/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/keyframes.scss
new file mode 100644
index 0000000000..4366ef177c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cancel-plain {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cancel-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-x-24);
+    mask-image: var(--icon-x-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cancel-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-x-16);
+    mask-image: var(--icon-x-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/placeholders.scss
new file mode 100644
index 0000000000..a98d4a95b3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cancel-plain-icon {
+  --icon-name: icon-cancel-plain;
+  content: '';
+}
+%with-cancel-plain-mask {
+  --icon-name: icon-cancel-plain;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/index.scss
new file mode 100644
index 0000000000..948f9a6faf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../x-square-fill/property-16';
+        @import '../x-square-fill/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/keyframes.scss
new file mode 100644
index 0000000000..b116b2e4cc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cancel-square-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cancel-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-square-fill-24);
+    mask-image: var(--icon-x-square-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cancel-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-square-fill-16);
+    mask-image: var(--icon-x-square-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/placeholders.scss
new file mode 100644
index 0000000000..c71686414c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cancel-square-fill-icon {
+  --icon-name: icon-cancel-square-fill;
+  content: '';
+}
+%with-cancel-square-fill-mask {
+  --icon-name: icon-cancel-square-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/index.scss
new file mode 100644
index 0000000000..fb603dfa1e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../x-square/property-16';
+        @import '../x-square/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/keyframes.scss
new file mode 100644
index 0000000000..e118bb05c7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cancel-square-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cancel-square-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-x-square-24);
+    mask-image: var(--icon-x-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cancel-square-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-x-square-16);
+    mask-image: var(--icon-x-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/placeholders.scss
new file mode 100644
index 0000000000..535051a1b5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cancel-square-outline-icon {
+  --icon-name: icon-cancel-square-outline;
+  content: '';
+}
+%with-cancel-square-outline-mask {
+  --icon-name: icon-cancel-square-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/index.scss
new file mode 100644
index 0000000000..35011c5863
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../caret/property-16';
+        @import '../caret/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/keyframes.scss
new file mode 100644
index 0000000000..bbb7d2e049
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-caret-down {
+  50% {
+
+    background-color: var(--icon-color, var(--color-caret-down-500, currentColor));
+    -webkit-mask-image: var(--icon-caret-24);
+    mask-image: var(--icon-caret-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-caret-down-500, currentColor));
+    -webkit-mask-image: var(--icon-caret-16);
+    mask-image: var(--icon-caret-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/placeholders.scss
new file mode 100644
index 0000000000..7ea82a6053
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-caret-down-icon {
+  --icon-name: icon-caret-down;
+  content: '';
+}
+%with-caret-down-mask {
+  --icon-name: icon-caret-down;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/index.scss
new file mode 100644
index 0000000000..9c7a440a02
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../chevron-up/property-16';
+        @import '../chevron-up/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/keyframes.scss
new file mode 100644
index 0000000000..3c60376612
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-caret-up {
+  50% {
+
+    background-color: var(--icon-color, var(--color-caret-up-500, currentColor));
+    -webkit-mask-image: var(--icon-chevron-up-24);
+    mask-image: var(--icon-chevron-up-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-caret-up-500, currentColor));
+    -webkit-mask-image: var(--icon-chevron-up-16);
+    mask-image: var(--icon-chevron-up-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/placeholders.scss
new file mode 100644
index 0000000000..9d97c84d55
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-caret-up-icon {
+  --icon-name: icon-caret-up;
+  content: '';
+}
+%with-caret-up-mask {
+  --icon-name: icon-caret-up;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret/keyframes.scss
new file mode 100644
index 0000000000..6947bbeb7a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-caret {
+  50% {
+
+    background-color: var(--icon-color, var(--color-caret-500, currentColor));
+    -webkit-mask-image: var(--icon-caret-24);
+    mask-image: var(--icon-caret-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-caret-500, currentColor));
+    -webkit-mask-image: var(--icon-caret-16);
+    mask-image: var(--icon-caret-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret/placeholders.scss
new file mode 100644
index 0000000000..612d4a5ddf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-caret-icon {
+  --icon-name: icon-caret;
+  content: '';
+}
+%with-caret-mask {
+  --icon-name: icon-caret;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret/property-16.scss
new file mode 100644
index 0000000000..436ce0ee53
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-caret-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.55 2.24a.75.75 0 00-1.1 0L4.2 5.74a.75.75 0 101.1 1.02L8 3.852l2.7 2.908a.75.75 0 101.1-1.02l-3.25-3.5zM7.45 13.76a.75.75 0 001.1 0l3.25-3.5a.75.75 0 10-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 00-1.1 1.02l3.25 3.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/caret/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/caret/property-24.scss
new file mode 100644
index 0000000000..f7dab6ee15
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/caret/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-caret-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.543 3.232a.75.75 0 00-1.085 0l-5.25 5.5a.75.75 0 101.085 1.036L12 4.836l4.707 4.932a.75.75 0 001.085-1.036l-5.25-5.5zM11.457 20.768a.75.75 0 001.085 0l5.25-5.5a.75.75 0 00-1.085-1.036L12 19.164l-4.707-4.932a.75.75 0 00-1.086 1.036l5.25 5.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cast/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cast/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cast/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cast/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cast/keyframes.scss
new file mode 100644
index 0000000000..e4f49a630b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cast/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cast {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cast-500, currentColor));
+    -webkit-mask-image: var(--icon-cast-24);
+    mask-image: var(--icon-cast-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cast-500, currentColor));
+    -webkit-mask-image: var(--icon-cast-16);
+    mask-image: var(--icon-cast-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cast/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cast/placeholders.scss
new file mode 100644
index 0000000000..88ac6e4bba
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cast/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cast-icon {
+  --icon-name: icon-cast;
+  content: '';
+}
+%with-cast-mask {
+  --icon-name: icon-cast;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cast/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cast/property-16.scss
new file mode 100644
index 0000000000..de5c80c7c0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cast/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cast-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.25 2A2.25 2.25 0 001 4.25v1.23a.75.75 0 001.5 0V4.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75H9.724a.75.75 0 000 1.5h3.026A2.25 2.25 0 0015 11.75v-7.5A2.25 2.25 0 0012.75 2h-9.5z"/><path d="M1.833 7.505a.75.75 0 10-.166 1.49 4.91 4.91 0 014.338 4.338.75.75 0 101.49-.166 6.41 6.41 0 00-5.662-5.662z"/><path d="M1.9 10.062a.75.75 0 00-.3 1.47A2.394 2.394 0 013.468 13.4a.75.75 0 101.47-.3A3.894 3.894 0 001.9 10.062z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cast/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cast/property-24.scss
new file mode 100644
index 0000000000..190ac80dcd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cast/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cast-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 3A2.75 2.75 0 001 5.75V8a.75.75 0 001.5 0V5.75c0-.69.56-1.25 1.25-1.25h16.5c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25H14a.75.75 0 000 1.5h6.25A2.75 2.75 0 0023 18.25V5.75A2.75 2.75 0 0020.25 3H3.75z"/><path d="M1.833 11.005a.75.75 0 10-.166 1.49 8.873 8.873 0 017.838 7.838.75.75 0 101.49-.166 10.373 10.373 0 00-9.162-9.162zM1.9 15.345a.75.75 0 00-.3 1.47A4.596 4.596 0 015.185 20.4a.75.75 0 001.47-.3A6.096 6.096 0 001.9 15.345z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/keyframes.scss
new file mode 100644
index 0000000000..9cf189ebf9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-certificate {
+  50% {
+
+    background-color: var(--icon-color, var(--color-certificate-500, currentColor));
+    -webkit-mask-image: var(--icon-certificate-24);
+    mask-image: var(--icon-certificate-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-certificate-500, currentColor));
+    -webkit-mask-image: var(--icon-certificate-16);
+    mask-image: var(--icon-certificate-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/placeholders.scss
new file mode 100644
index 0000000000..fe82ffafcd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-certificate-icon {
+  --icon-name: icon-certificate;
+  content: '';
+}
+%with-certificate-mask {
+  --icon-name: icon-certificate;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/property-16.scss
new file mode 100644
index 0000000000..3179fd8bef
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-certificate-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.25 3.25A.75.75 0 017 2.5h2A.75.75 0 019 4H7a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v9.5A2.25 2.25 0 003.25 14h1.67l-.115.913a.7.7 0 00.955.737L8 14.754l2.24.896a.7.7 0 00.955-.737L11.08 14h1.669A2.25 2.25 0 0015 11.75v-9.5A2.25 2.25 0 0012.75 0h-9.5zm7.643 12.5h1.857a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-9.5a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h1.857l.172-1.378a3.45 3.45 0 115.441 0l.173 1.378zm-1.456-.362c-.438.2-.924.312-1.437.312s-1-.112-1.437-.312l-.221 1.771 1.398-.559a.7.7 0 01.52 0l1.398.56-.221-1.772zM5.95 9a2.05 2.05 0 114.1 0 2.05 2.05 0 01-4.1 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/property-24.scss
new file mode 100644
index 0000000000..9e06844133
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/certificate/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-certificate-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10 5a.75.75 0 000 1.5h4A.75.75 0 0014 5h-4z"/><path fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v14.5A2.75 2.75 0 005.75 21h1.485l-.22 1.103a.75.75 0 001.054.826L12 21.079l3.93 1.85a.75.75 0 001.055-.826L16.765 21h1.485A2.75 2.75 0 0021 18.25V3.75A2.75 2.75 0 0018.25 1H5.75zm2.438 15.236L7.535 19.5H5.75c-.69 0-1.25-.56-1.25-1.25V3.75c0-.69.56-1.25 1.25-1.25h12.5c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25h-1.785l-.653-3.264a5 5 0 10-7.624 0zm6.219-.695a.75.75 0 01.135-.135 3.5 3.5 0 10-5.084 0c.051.04.096.085.135.135A3.488 3.488 0 0012 16.5c.932 0 1.78-.364 2.407-.959zM12 18a4.977 4.977 0 01-2.501-.67l-.722 3.608 2.904-1.367a.75.75 0 01.638 0l2.904 1.367-.722-3.608c-.736.426-1.59.67-2.501.67z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/keyframes.scss
new file mode 100644
index 0000000000..e945a7a06a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-change-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-change-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-change-circle-24);
+    mask-image: var(--icon-change-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-change-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-change-circle-16);
+    mask-image: var(--icon-change-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/placeholders.scss
new file mode 100644
index 0000000000..2e72a989bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-change-circle-icon {
+  --icon-name: icon-change-circle;
+  content: '';
+}
+%with-change-circle-mask {
+  --icon-name: icon-change-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/property-16.scss
new file mode 100644
index 0000000000..dba072b698
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-change-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.586 7.532c.477.597.864.834 1.135.92a.936.936 0 00.69-.04c.228-.1.442-.27.627-.458.09-.09.168-.18.234-.257l.03-.036c.048-.058.12-.143.17-.193a.75.75 0 011.062 1.06l-.023.026-.025.03-.07.082a5.846 5.846 0 01-.312.344c-.253.256-.623.572-1.095.778a2.434 2.434 0 01-1.743.094c-.64-.204-1.257-.67-1.852-1.414-.477-.597-.864-.834-1.135-.92a.936.936 0 00-.69.04c-.228.1-.442.27-.627.458-.09.09-.168.18-.234.257l-.03.036a3.3 3.3 0 01-.17.193.75.75 0 01-1.063-1.057l.024-.03.025-.028.07-.083c.077-.092.183-.214.312-.344.253-.256.623-.572 1.095-.777a2.434 2.434 0 011.743-.095c.64.204 1.257.67 1.852 1.414z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/property-24.scss
new file mode 100644
index 0000000000..c172a9d37d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-change-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.071 12.486c.056-.065.116-.143.182-.229.284-.366.677-.874 1.264-1.128a1.5 1.5 0 011.117-.041c.46.152 1.064.539 1.795 1.398.84.988 1.66 1.583 2.465 1.85a2.998 2.998 0 002.185-.089c1.012-.438 1.715-1.388 1.933-1.682.028-.038.048-.066.06-.08a.75.75 0 00-1.143-.97 6.64 6.64 0 00-.182.227c-.284.367-.677.875-1.264 1.129a1.5 1.5 0 01-1.117.041c-.46-.152-1.064-.539-1.795-1.398-.84-.988-1.66-1.584-2.465-1.85a2.998 2.998 0 00-2.185.089c-1.012.438-1.715 1.388-1.933 1.682-.028.038-.048.066-.06.08a.75.75 0 101.143.97z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/keyframes.scss
new file mode 100644
index 0000000000..d9a2d9b382
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-change-square {
+  50% {
+
+    background-color: var(--icon-color, var(--color-change-square-500, currentColor));
+    -webkit-mask-image: var(--icon-change-square-24);
+    mask-image: var(--icon-change-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-change-square-500, currentColor));
+    -webkit-mask-image: var(--icon-change-square-16);
+    mask-image: var(--icon-change-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/placeholders.scss
new file mode 100644
index 0000000000..496b141863
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-change-square-icon {
+  --icon-name: icon-change-square;
+  content: '';
+}
+%with-change-square-mask {
+  --icon-name: icon-change-square;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/property-16.scss
new file mode 100644
index 0000000000..90bb618996
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-change-square-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.586 7.532c.477.597.864.834 1.135.92a.936.936 0 00.69-.04c.228-.1.442-.27.627-.458.09-.09.168-.18.234-.257l.03-.036c.048-.058.12-.143.17-.193a.75.75 0 011.062 1.06l-.023.026-.025.03-.07.082a5.846 5.846 0 01-.312.344c-.253.256-.623.572-1.095.778a2.434 2.434 0 01-1.743.094c-.64-.204-1.257-.67-1.852-1.414-.477-.597-.864-.834-1.135-.92a.936.936 0 00-.69.04c-.228.1-.442.27-.627.458-.09.09-.168.18-.234.257l-.03.036a3.3 3.3 0 01-.17.193.75.75 0 01-1.063-1.057l.001-.002.023-.027.025-.03.07-.082c.077-.092.183-.214.312-.344.253-.256.623-.572 1.095-.777a2.434 2.434 0 011.743-.095c.64.204 1.257.67 1.852 1.414z"/><path fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zM2.5 3.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/property-24.scss
new file mode 100644
index 0000000000..6912e15635
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change-square/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-change-square-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.071 12.486c.056-.065.116-.143.182-.229.284-.366.677-.874 1.264-1.128a1.5 1.5 0 011.117-.041c.46.152 1.064.539 1.795 1.398.84.988 1.66 1.583 2.465 1.85a2.998 2.998 0 002.185-.089c1.012-.438 1.715-1.388 1.933-1.682.028-.038.048-.066.06-.08a.75.75 0 00-1.143-.97 6.64 6.64 0 00-.182.227c-.284.367-.677.875-1.264 1.129a1.5 1.5 0 01-1.117.041c-.46-.152-1.064-.539-1.795-1.398-.84-.988-1.66-1.584-2.465-1.85a2.998 2.998 0 00-2.185.089c-1.012.438-1.715 1.388-1.933 1.682a2.056 2.056 0 01-.06.08.75.75 0 101.143.97z"/><path fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V4.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change/keyframes.scss
new file mode 100644
index 0000000000..e8fc7424e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-change {
+  50% {
+
+    background-color: var(--icon-color, var(--color-change-500, currentColor));
+    -webkit-mask-image: var(--icon-change-24);
+    mask-image: var(--icon-change-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-change-500, currentColor));
+    -webkit-mask-image: var(--icon-change-16);
+    mask-image: var(--icon-change-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change/placeholders.scss
new file mode 100644
index 0000000000..530243c4da
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-change-icon {
+  --icon-name: icon-change;
+  content: '';
+}
+%with-change-mask {
+  --icon-name: icon-change;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change/property-16.scss
new file mode 100644
index 0000000000..69544fb5c9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-change-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.721 8.453c-.27-.087-.658-.324-1.135-.921-.595-.745-1.211-1.21-1.852-1.414a2.434 2.434 0 00-1.743.094c-.472.206-.842.522-1.095.778a5.881 5.881 0 00-.382.427l-.025.029-.024.029a.75.75 0 001.064 1.057 3.3 3.3 0 00.2-.229c.065-.078.143-.166.233-.257.185-.188.399-.359.627-.458a.936.936 0 01.69-.04c.27.086.658.323 1.135.92.595.745 1.211 1.21 1.852 1.414a2.434 2.434 0 001.743-.094c.472-.206.841-.522 1.095-.778.129-.13.235-.252.313-.344l.069-.082a4.562 4.562 0 01.05-.059.75.75 0 00-1.065-1.057 3.292 3.292 0 00-.2.229 4.393 4.393 0 01-.233.257 2.102 2.102 0 01-.627.458.936.936 0 01-.69.04z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/change/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/change/property-24.scss
new file mode 100644
index 0000000000..a851c186a2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/change/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-change-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.534 12.224c-.082.104-.155.195-.219.269a.75.75 0 11-1.13-.986c.02-.023.053-.066.097-.123.308-.404 1.183-1.548 2.442-2.08a3.783 3.783 0 012.699-.106c1.003.324 2.05 1.056 3.142 2.31.98 1.122 1.81 1.652 2.473 1.866a2.285 2.285 0 001.654-.06c.837-.354 1.402-1.068 1.774-1.538.082-.104.155-.195.219-.269a.75.75 0 011.13.986c-.02.023-.053.066-.097.123-.308.404-1.183 1.548-2.442 2.08a3.783 3.783 0 01-2.699.106c-1.003-.324-2.05-1.056-3.142-2.31-.98-1.122-1.81-1.652-2.473-1.866a2.284 2.284 0 00-1.654.06c-.837.354-1.402 1.068-1.774 1.538z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/keyframes.scss
new file mode 100644
index 0000000000..85b864b772
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-check-circle-fill-24);
+    mask-image: var(--icon-check-circle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-check-circle-fill-16);
+    mask-image: var(--icon-check-circle-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/placeholders.scss
new file mode 100644
index 0000000000..1918607508
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-circle-fill-icon {
+  --icon-name: icon-check-circle-fill;
+  content: '';
+}
+%with-check-circle-fill-mask {
+  --icon-name: icon-check-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/property-16.scss
new file mode 100644
index 0000000000..a0efbf29c5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-circle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm2.72 5.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/property-24.scss
new file mode 100644
index 0000000000..b063a5b264
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-circle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm4.72 7.22a.75.75 0 111.06 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 6.97-6.97z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/index.scss
new file mode 100644
index 0000000000..ba784d5f9b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../check-circle/property-16';
+        @import '../check-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/keyframes.scss
new file mode 100644
index 0000000000..f5c5ebb0b5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check-circle-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-check-circle-24);
+    mask-image: var(--icon-check-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-check-circle-16);
+    mask-image: var(--icon-check-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/placeholders.scss
new file mode 100644
index 0000000000..869789ae57
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-circle-outline-icon {
+  --icon-name: icon-check-circle-outline;
+  content: '';
+}
+%with-check-circle-outline-mask {
+  --icon-name: icon-check-circle-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/keyframes.scss
new file mode 100644
index 0000000000..af175fb862
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-check-circle-24);
+    mask-image: var(--icon-check-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-check-circle-16);
+    mask-image: var(--icon-check-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/placeholders.scss
new file mode 100644
index 0000000000..2404521496
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-circle-icon {
+  --icon-name: icon-check-circle;
+  content: '';
+}
+%with-check-circle-mask {
+  --icon-name: icon-check-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/property-16.scss
new file mode 100644
index 0000000000..8497beda68
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.78 5.22a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/property-24.scss
new file mode 100644
index 0000000000..aaa14b749a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M17.78 8.22a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 6.97-6.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/keyframes.scss
new file mode 100644
index 0000000000..331a70f52e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check-diamond-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-diamond-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-check-diamond-fill-24);
+    mask-image: var(--icon-check-diamond-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-diamond-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-check-diamond-fill-16);
+    mask-image: var(--icon-check-diamond-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/placeholders.scss
new file mode 100644
index 0000000000..e08ba28ce4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-diamond-fill-icon {
+  --icon-name: icon-check-diamond-fill;
+  content: '';
+}
+%with-check-diamond-fill-mask {
+  --icon-name: icon-check-diamond-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/property-16.scss
new file mode 100644
index 0000000000..4a32598093
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-diamond-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.57.752a2.25 2.25 0 00-3.183 0L.73 6.41a2.25 2.25 0 000 3.182l5.657 5.657a2.25 2.25 0 003.182 0l5.657-5.657a2.25 2.25 0 000-3.182L9.569.752zm1.71 6.028l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.47-3.47a.75.75 0 011.06 1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/property-24.scss
new file mode 100644
index 0000000000..0eb1a17f54
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-diamond-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.945 1.884a2.75 2.75 0 00-3.89 0l-8.171 8.172a2.75 2.75 0 000 3.889l8.171 8.171a2.75 2.75 0 003.89 0l8.171-8.171a2.75 2.75 0 000-3.89l-8.171-8.17zM16.28 9.78l-5.5 5.5a.75.75 0 01-1.06 0l-2.5-2.5a.75.75 0 111.06-1.06l1.97 1.97 4.97-4.97a.75.75 0 011.06 1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/keyframes.scss
new file mode 100644
index 0000000000..58ae52d09f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check-diamond {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-diamond-500, currentColor));
+    -webkit-mask-image: var(--icon-check-diamond-24);
+    mask-image: var(--icon-check-diamond-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-diamond-500, currentColor));
+    -webkit-mask-image: var(--icon-check-diamond-16);
+    mask-image: var(--icon-check-diamond-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/placeholders.scss
new file mode 100644
index 0000000000..cacf15ae1c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-diamond-icon {
+  --icon-name: icon-check-diamond;
+  content: '';
+}
+%with-check-diamond-mask {
+  --icon-name: icon-check-diamond;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/property-16.scss
new file mode 100644
index 0000000000..04930628eb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-diamond-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.28 5.72a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.47-3.47a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M.75 6.41L6.407.752a2.25 2.25 0 013.182 0l5.657 5.656a2.25 2.25 0 010 3.182l-5.657 5.657a2.25 2.25 0 01-3.182 0L.75 9.591a2.25 2.25 0 010-3.182zm6.718-4.597L1.81 7.47a.75.75 0 000 1.06l5.657 5.657a.75.75 0 001.06 0l5.657-5.656a.75.75 0 000-1.061L8.528 1.813a.75.75 0 00-1.06 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/property-24.scss
new file mode 100644
index 0000000000..cdc0e18683
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-diamond/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-diamond-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.28 8.72a.75.75 0 010 1.06l-5.5 5.5a.75.75 0 01-1.06 0l-2.5-2.5a.75.75 0 011.06-1.06l1.97 1.97 4.97-4.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M1.884 10.056l8.171-8.172a2.75 2.75 0 013.89 0l8.171 8.172a2.75 2.75 0 010 3.889l-8.171 8.171a2.75 2.75 0 01-3.89 0l-8.171-8.171a2.75 2.75 0 010-3.89zm9.232-7.111l-8.172 8.171a1.25 1.25 0 000 1.768l8.172 8.172a1.25 1.25 0 001.768 0l8.171-8.172a1.25 1.25 0 000-1.768l-8.171-8.171a1.25 1.25 0 00-1.768 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/keyframes.scss
new file mode 100644
index 0000000000..9619cd23f6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check-hexagon-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-hexagon-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-check-hexagon-fill-24);
+    mask-image: var(--icon-check-hexagon-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-hexagon-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-check-hexagon-fill-16);
+    mask-image: var(--icon-check-hexagon-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/placeholders.scss
new file mode 100644
index 0000000000..a6f858143d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-hexagon-fill-icon {
+  --icon-name: icon-check-hexagon-fill;
+  content: '';
+}
+%with-check-hexagon-fill-mask {
+  --icon-name: icon-check-hexagon-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/property-16.scss
new file mode 100644
index 0000000000..4db6780282
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-hexagon-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.166.33a2.25 2.25 0 00-2.332 0l-5.25 3.182A2.25 2.25 0 00.5 5.436v5.128a2.25 2.25 0 001.084 1.924l5.25 3.182a2.25 2.25 0 002.332 0l5.25-3.182a2.25 2.25 0 001.084-1.924V5.436a2.25 2.25 0 00-1.084-1.924L9.166.33zm1.054 5.39a.75.75 0 111.06 1.06l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.47-3.47z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/property-24.scss
new file mode 100644
index 0000000000..6137c02b65
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-hexagon-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.441 1.006a2.75 2.75 0 00-2.882 0l-7.75 4.77a2.75 2.75 0 00-1.31 2.342v7.764a2.75 2.75 0 001.31 2.342l7.75 4.77a2.75 2.75 0 002.882 0l7.75-4.77a2.75 2.75 0 001.309-2.342V8.118a2.75 2.75 0 00-1.309-2.342l-7.75-4.77zm2.84 8.774l-5.5 5.5a.75.75 0 01-1.061 0l-2.5-2.5a.75.75 0 111.06-1.06l1.97 1.97 4.97-4.97a.75.75 0 111.06 1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/keyframes.scss
new file mode 100644
index 0000000000..7dc94f90e9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check-hexagon {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-hexagon-500, currentColor));
+    -webkit-mask-image: var(--icon-check-hexagon-24);
+    mask-image: var(--icon-check-hexagon-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-hexagon-500, currentColor));
+    -webkit-mask-image: var(--icon-check-hexagon-16);
+    mask-image: var(--icon-check-hexagon-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/placeholders.scss
new file mode 100644
index 0000000000..591349e12e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-hexagon-icon {
+  --icon-name: icon-check-hexagon;
+  content: '';
+}
+%with-check-hexagon-mask {
+  --icon-name: icon-check-hexagon;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/property-16.scss
new file mode 100644
index 0000000000..4ddf2118ef
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-hexagon-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.28 5.72a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.47-3.47a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M6.834.33a2.25 2.25 0 012.332 0l5.25 3.182A2.25 2.25 0 0115.5 5.436v5.128a2.25 2.25 0 01-1.084 1.924l-5.25 3.182a2.25 2.25 0 01-2.332 0l-5.25-3.182A2.25 2.25 0 01.5 10.564V5.436a2.25 2.25 0 011.084-1.924L6.834.33zm1.555 1.283a.75.75 0 00-.778 0l-5.25 3.181A.75.75 0 002 5.436v5.128a.75.75 0 00.361.642l5.25 3.181a.75.75 0 00.778 0l5.25-3.181a.75.75 0 00.361-.642V5.436a.75.75 0 00-.361-.642l-5.25-3.181z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/property-24.scss
new file mode 100644
index 0000000000..b304a9f6eb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-hexagon/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-hexagon-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.28 8.72a.75.75 0 010 1.06l-5.5 5.5a.75.75 0 01-1.06 0l-2.5-2.5a.75.75 0 111.06-1.06l1.97 1.97 4.97-4.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M10.559 1.006a2.75 2.75 0 012.882 0l7.75 4.77A2.75 2.75 0 0122.5 8.118v7.764a2.75 2.75 0 01-1.309 2.342l-7.75 4.77a2.75 2.75 0 01-2.882 0l-7.75-4.77A2.75 2.75 0 011.5 15.882V8.118a2.75 2.75 0 011.309-2.342l7.75-4.77zm2.096 1.278a1.25 1.25 0 00-1.31 0l-7.75 4.77A1.25 1.25 0 003 8.117v7.764c0 .435.225.838.595 1.065l7.75 4.77a1.25 1.25 0 001.31 0l7.75-4.77c.37-.227.595-.63.595-1.065V8.118a1.25 1.25 0 00-.595-1.065l-7.75-4.77z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/index.scss
new file mode 100644
index 0000000000..0c03b32ddb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../check/property-16';
+        @import '../check/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/keyframes.scss
new file mode 100644
index 0000000000..6eadecba0c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check-plain {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-check-24);
+    mask-image: var(--icon-check-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-check-16);
+    mask-image: var(--icon-check-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/placeholders.scss
new file mode 100644
index 0000000000..2fe07fe481
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-plain/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-plain-icon {
+  --icon-name: icon-check-plain;
+  content: '';
+}
+%with-check-plain-mask {
+  --icon-name: icon-check-plain;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/keyframes.scss
new file mode 100644
index 0000000000..331d6b71a6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check-square-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-check-square-fill-24);
+    mask-image: var(--icon-check-square-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-check-square-fill-16);
+    mask-image: var(--icon-check-square-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/placeholders.scss
new file mode 100644
index 0000000000..458917ed37
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-square-fill-icon {
+  --icon-name: icon-check-square-fill;
+  content: '';
+}
+%with-check-square-fill-mask {
+  --icon-name: icon-check-square-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/property-16.scss
new file mode 100644
index 0000000000..b2086397b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-square-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zm7.47 4.22a.75.75 0 111.06 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/property-24.scss
new file mode 100644
index 0000000000..da9843d253
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-square-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zm11.97 6.22a.75.75 0 111.06 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 6.97-6.97z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/keyframes.scss
new file mode 100644
index 0000000000..503b670b16
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check-square {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-square-500, currentColor));
+    -webkit-mask-image: var(--icon-check-square-24);
+    mask-image: var(--icon-check-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-square-500, currentColor));
+    -webkit-mask-image: var(--icon-check-square-16);
+    mask-image: var(--icon-check-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/placeholders.scss
new file mode 100644
index 0000000000..b200d3f12e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-square-icon {
+  --icon-name: icon-check-square;
+  content: '';
+}
+%with-check-square-mask {
+  --icon-name: icon-check-square;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/property-16.scss
new file mode 100644
index 0000000000..7a2d54f319
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-square-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.78 5.22a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-9.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/property-24.scss
new file mode 100644
index 0000000000..5e8dd5224b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check-square/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-square-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M17.78 8.22a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 6.97-6.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check/keyframes.scss
new file mode 100644
index 0000000000..79b8658335
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-check {
+  50% {
+
+    background-color: var(--icon-color, var(--color-check-500, currentColor));
+    -webkit-mask-image: var(--icon-check-24);
+    mask-image: var(--icon-check-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-check-500, currentColor));
+    -webkit-mask-image: var(--icon-check-16);
+    mask-image: var(--icon-check-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check/placeholders.scss
new file mode 100644
index 0000000000..5e9e3585b9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-check-icon {
+  --icon-name: icon-check;
+  content: '';
+}
+%with-check-mask {
+  --icon-name: icon-check;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check/property-16.scss
new file mode 100644
index 0000000000..9f61f6e453
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M14.78 4.28a.75.75 0 00-1.06-1.06l-7.97 7.97-3.47-3.47a.75.75 0 00-1.06 1.06l4 4a.75.75 0 001.06 0l8.5-8.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/check/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/check/property-24.scss
new file mode 100644
index 0000000000..d46f813d18
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/check/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-check-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M21.78 6.28a.75.75 0 00-1.06-1.06L8.75 17.19l-5.47-5.47a.75.75 0 00-1.06 1.06l6 6a.75.75 0 001.06 0l12.5-12.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/keyframes.scss
new file mode 100644
index 0000000000..df9e8ae2f7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-chevron-down {
+  50% {
+
+    background-color: var(--icon-color, var(--color-chevron-down-500, currentColor));
+    -webkit-mask-image: var(--icon-chevron-down-24);
+    mask-image: var(--icon-chevron-down-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-chevron-down-500, currentColor));
+    -webkit-mask-image: var(--icon-chevron-down-16);
+    mask-image: var(--icon-chevron-down-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/placeholders.scss
new file mode 100644
index 0000000000..849575d449
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-chevron-down-icon {
+  --icon-name: icon-chevron-down;
+  content: '';
+}
+%with-chevron-down-mask {
+  --icon-name: icon-chevron-down;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/property-16.scss
new file mode 100644
index 0000000000..a5cc402c5d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevron-down-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.235 5.205a.75.75 0 011.06.03L8 9.158l3.705-3.923a.75.75 0 011.09 1.03l-4.25 4.5a.75.75 0 01-1.09 0l-4.25-4.5a.75.75 0 01.03-1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/property-24.scss
new file mode 100644
index 0000000000..9a3e28dfdb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-down/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevron-down-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.23 8.21a.75.75 0 011.06.02L12 14.168l5.71-5.938a.75.75 0 111.08 1.04l-6.25 6.5a.75.75 0 01-1.08 0l-6.25-6.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/keyframes.scss
new file mode 100644
index 0000000000..d5686975ad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-chevron-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-chevron-left-500, currentColor));
+    -webkit-mask-image: var(--icon-chevron-left-24);
+    mask-image: var(--icon-chevron-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-chevron-left-500, currentColor));
+    -webkit-mask-image: var(--icon-chevron-left-16);
+    mask-image: var(--icon-chevron-left-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/placeholders.scss
new file mode 100644
index 0000000000..7e47457e65
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-chevron-left-icon {
+  --icon-name: icon-chevron-left;
+  content: '';
+}
+%with-chevron-left-mask {
+  --icon-name: icon-chevron-left;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/property-16.scss
new file mode 100644
index 0000000000..b09b7d45d2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevron-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.795 3.235a.75.75 0 01-.03 1.06L6.842 8l3.923 3.705a.75.75 0 01-1.03 1.09l-4.5-4.25a.75.75 0 010-1.09l4.5-4.25a.75.75 0 011.06.03z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/property-24.scss
new file mode 100644
index 0000000000..f887dbf7c1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-left/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevron-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M15.79 18.77a.75.75 0 00-.02-1.06L9.832 12l5.938-5.71a.75.75 0 10-1.04-1.08l-6.5 6.25a.75.75 0 000 1.08l6.5 6.25a.75.75 0 001.06-.02z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/keyframes.scss
new file mode 100644
index 0000000000..df56988d00
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-chevron-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-chevron-right-500, currentColor));
+    -webkit-mask-image: var(--icon-chevron-right-24);
+    mask-image: var(--icon-chevron-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-chevron-right-500, currentColor));
+    -webkit-mask-image: var(--icon-chevron-right-16);
+    mask-image: var(--icon-chevron-right-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/placeholders.scss
new file mode 100644
index 0000000000..d74b695f25
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-chevron-right-icon {
+  --icon-name: icon-chevron-right;
+  content: '';
+}
+%with-chevron-right-mask {
+  --icon-name: icon-chevron-right;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/property-16.scss
new file mode 100644
index 0000000000..19209f7a99
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevron-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.205 3.235a.75.75 0 00.03 1.06L9.158 8l-3.923 3.705a.75.75 0 001.03 1.09l4.5-4.25a.75.75 0 000-1.09l-4.5-4.25a.75.75 0 00-1.06.03z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/property-24.scss
new file mode 100644
index 0000000000..c9428036e1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-right/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevron-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.21 18.77a.75.75 0 01.02-1.06L14.168 12 8.23 6.29a.75.75 0 111.04-1.08l6.5 6.25a.75.75 0 010 1.08l-6.5 6.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/keyframes.scss
new file mode 100644
index 0000000000..87b67ffb58
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-chevron-up {
+  50% {
+
+    background-color: var(--icon-color, var(--color-chevron-up-500, currentColor));
+    -webkit-mask-image: var(--icon-chevron-up-24);
+    mask-image: var(--icon-chevron-up-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-chevron-up-500, currentColor));
+    -webkit-mask-image: var(--icon-chevron-up-16);
+    mask-image: var(--icon-chevron-up-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/placeholders.scss
new file mode 100644
index 0000000000..33ebec8b37
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-chevron-up-icon {
+  --icon-name: icon-chevron-up;
+  content: '';
+}
+%with-chevron-up-mask {
+  --icon-name: icon-chevron-up;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/property-16.scss
new file mode 100644
index 0000000000..6f078c85fa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevron-up-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.235 10.795a.75.75 0 001.06-.03L8 6.842l3.705 3.923a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 00.03 1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/property-24.scss
new file mode 100644
index 0000000000..ebbafb1590
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevron-up/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevron-up-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.23 15.79a.75.75 0 001.06-.02L12 9.832l5.71 5.938a.75.75 0 101.08-1.04l-6.25-6.5a.75.75 0 00-1.08 0l-6.25 6.5a.75.75 0 00.02 1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/keyframes.scss
new file mode 100644
index 0000000000..b8deda9514
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-chevrons-down {
+  50% {
+
+    background-color: var(--icon-color, var(--color-chevrons-down-500, currentColor));
+    -webkit-mask-image: var(--icon-chevrons-down-24);
+    mask-image: var(--icon-chevrons-down-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-chevrons-down-500, currentColor));
+    -webkit-mask-image: var(--icon-chevrons-down-16);
+    mask-image: var(--icon-chevrons-down-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/placeholders.scss
new file mode 100644
index 0000000000..800ccd6149
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-chevrons-down-icon {
+  --icon-name: icon-chevrons-down;
+  content: '';
+}
+%with-chevrons-down-mask {
+  --icon-name: icon-chevrons-down;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/property-16.scss
new file mode 100644
index 0000000000..a980052e8d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevrons-down-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.3 3.24a.75.75 0 00-1.1 1.02l3.25 3.5a.75.75 0 001.1 0l3.25-3.5a.75.75 0 10-1.1-1.02L8 6.148 5.3 3.24z"/><path d="M5.3 8.24a.75.75 0 10-1.1 1.02l3.25 3.5a.75.75 0 001.1 0l3.25-3.5a.75.75 0 10-1.1-1.02L8 11.148 5.3 8.24z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/property-24.scss
new file mode 100644
index 0000000000..135ddf3e60
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-down/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevrons-down-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.293 5.232a.75.75 0 00-1.086 1.036l5.25 5.5a.75.75 0 001.085 0l5.25-5.5a.75.75 0 10-1.085-1.036L12 10.164 7.293 5.232z"/><path d="M7.293 12.232a.75.75 0 00-1.086 1.036l5.25 5.5a.75.75 0 001.085 0l5.25-5.5a.75.75 0 00-1.085-1.036L12 17.164l-4.707-4.932z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/keyframes.scss
new file mode 100644
index 0000000000..0194f191c6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-chevrons-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-chevrons-left-500, currentColor));
+    -webkit-mask-image: var(--icon-chevrons-left-24);
+    mask-image: var(--icon-chevrons-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-chevrons-left-500, currentColor));
+    -webkit-mask-image: var(--icon-chevrons-left-16);
+    mask-image: var(--icon-chevrons-left-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/placeholders.scss
new file mode 100644
index 0000000000..a607076a04
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-chevrons-left-icon {
+  --icon-name: icon-chevrons-left;
+  content: '';
+}
+%with-chevrons-left-mask {
+  --icon-name: icon-chevrons-left;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/property-16.scss
new file mode 100644
index 0000000000..975c0f2b4d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevrons-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.76 5.3a.75.75 0 00-1.02-1.1l-3.5 3.25a.75.75 0 000 1.1l3.5 3.25a.75.75 0 101.02-1.1L4.852 8 7.76 5.3z"/><path d="M12.76 5.3a.75.75 0 10-1.02-1.1l-3.5 3.25a.75.75 0 000 1.1l3.5 3.25a.75.75 0 101.02-1.1L9.852 8l2.908-2.7z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/property-24.scss
new file mode 100644
index 0000000000..dbebb11754
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-left/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevrons-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.768 16.707a.75.75 0 01-1.036 1.085l-5.5-5.25a.75.75 0 010-1.085l5.5-5.25a.75.75 0 011.036 1.086L6.836 12l4.932 4.707z"/><path d="M18.768 16.707a.75.75 0 01-1.036 1.085l-5.5-5.25a.75.75 0 010-1.085l5.5-5.25a.75.75 0 011.036 1.086L13.836 12l4.932 4.707z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/keyframes.scss
new file mode 100644
index 0000000000..a8b8f1fdfc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-chevrons-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-chevrons-right-500, currentColor));
+    -webkit-mask-image: var(--icon-chevrons-right-24);
+    mask-image: var(--icon-chevrons-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-chevrons-right-500, currentColor));
+    -webkit-mask-image: var(--icon-chevrons-right-16);
+    mask-image: var(--icon-chevrons-right-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/placeholders.scss
new file mode 100644
index 0000000000..f8b702773c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-chevrons-right-icon {
+  --icon-name: icon-chevrons-right;
+  content: '';
+}
+%with-chevrons-right-mask {
+  --icon-name: icon-chevrons-right;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/property-16.scss
new file mode 100644
index 0000000000..5b3af18311
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevrons-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.24 5.3a.75.75 0 011.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1L6.148 8 3.24 5.3z"/><path d="M8.24 5.3a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1L11.148 8 8.24 5.3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/property-24.scss
new file mode 100644
index 0000000000..f2bd52085d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-right/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevrons-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5.232 16.707a.75.75 0 001.036 1.085l5.5-5.25a.75.75 0 000-1.085l-5.5-5.25a.75.75 0 00-1.036 1.086L10.164 12l-4.932 4.707z"/><path d="M12.232 16.707a.75.75 0 001.036 1.085l5.5-5.25a.75.75 0 000-1.085l-5.5-5.25a.75.75 0 00-1.036 1.086L17.164 12l-4.932 4.707z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/keyframes.scss
new file mode 100644
index 0000000000..c0e4e4390a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-chevrons-up {
+  50% {
+
+    background-color: var(--icon-color, var(--color-chevrons-up-500, currentColor));
+    -webkit-mask-image: var(--icon-chevrons-up-24);
+    mask-image: var(--icon-chevrons-up-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-chevrons-up-500, currentColor));
+    -webkit-mask-image: var(--icon-chevrons-up-16);
+    mask-image: var(--icon-chevrons-up-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/placeholders.scss
new file mode 100644
index 0000000000..a1f7ef062b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-chevrons-up-icon {
+  --icon-name: icon-chevrons-up;
+  content: '';
+}
+%with-chevrons-up-mask {
+  --icon-name: icon-chevrons-up;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/property-16.scss
new file mode 100644
index 0000000000..99b8cb0277
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevrons-up-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5a.75.75 0 011.1 0l3.25 3.5a.75.75 0 11-1.1 1.02L8 4.852 5.3 7.76z"/><path d="M5.3 12.76a.75.75 0 11-1.1-1.02l3.25-3.5a.75.75 0 011.1 0l3.25 3.5a.75.75 0 11-1.1 1.02L8 9.852 5.3 12.76z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/property-24.scss
new file mode 100644
index 0000000000..bfa5148413
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/chevrons-up/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-chevrons-up-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.293 11.768a.75.75 0 01-1.086-1.036l5.25-5.5a.75.75 0 011.085 0l5.25 5.5a.75.75 0 01-1.085 1.036L12 6.836l-4.707 4.932z"/><path d="M7.293 18.768a.75.75 0 01-1.086-1.036l5.25-5.5a.75.75 0 011.085 0l5.25 5.5a.75.75 0 01-1.085 1.036L12 13.836l-4.707 4.932z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/keyframes.scss
new file mode 100644
index 0000000000..372fb2587b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-circle-dot {
+  50% {
+
+    background-color: var(--icon-color, var(--color-circle-dot-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-dot-24);
+    mask-image: var(--icon-circle-dot-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-circle-dot-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-dot-16);
+    mask-image: var(--icon-circle-dot-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/placeholders.scss
new file mode 100644
index 0000000000..295be013d0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-circle-dot-icon {
+  --icon-name: icon-circle-dot;
+  content: '';
+}
+%with-circle-dot-mask {
+  --icon-name: icon-circle-dot;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/property-16.scss
new file mode 100644
index 0000000000..683411c79b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-circle-dot-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 3a5 5 0 100 10A5 5 0 008 3z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/property-24.scss
new file mode 100644
index 0000000000..17cf0ca974
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-dot/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-circle-dot-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 5a7 7 0 100 14 7 7 0 000-14z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/keyframes.scss
new file mode 100644
index 0000000000..b2fdda9666
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-fill-24);
+    mask-image: var(--icon-circle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-fill-16);
+    mask-image: var(--icon-circle-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/placeholders.scss
new file mode 100644
index 0000000000..1267a5e869
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-circle-fill-icon {
+  --icon-name: icon-circle-fill;
+  content: '';
+}
+%with-circle-fill-mask {
+  --icon-name: icon-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/property-16.scss
new file mode 100644
index 0000000000..76b386e56a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-circle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 0a8 8 0 100 16A8 8 0 008 0z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/property-24.scss
new file mode 100644
index 0000000000..7a2e025e97
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-circle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/keyframes.scss
new file mode 100644
index 0000000000..dad412d21e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-circle-half {
+  50% {
+
+    background-color: var(--icon-color, var(--color-circle-half-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-half-24);
+    mask-image: var(--icon-circle-half-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-circle-half-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-half-16);
+    mask-image: var(--icon-circle-half-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/placeholders.scss
new file mode 100644
index 0000000000..578b1ce6a3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-circle-half-icon {
+  --icon-name: icon-circle-half;
+  content: '';
+}
+%with-circle-half-mask {
+  --icon-name: icon-circle-half;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/property-16.scss
new file mode 100644
index 0000000000..cba2751f13
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-circle-half-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm0 1.5v13a6.5 6.5 0 100-13z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/property-24.scss
new file mode 100644
index 0000000000..dc78c6b920
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle-half/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-circle-half-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm0 1.5v19a9.5 9.5 0 000-19z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle/keyframes.scss
new file mode 100644
index 0000000000..d1236d44cc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-24);
+    mask-image: var(--icon-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-16);
+    mask-image: var(--icon-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle/placeholders.scss
new file mode 100644
index 0000000000..6074e76a8c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-circle-icon {
+  --icon-name: icon-circle;
+  content: '';
+}
+%with-circle-mask {
+  --icon-name: icon-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle/property-16.scss
new file mode 100644
index 0000000000..5a8a751d7b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/circle/property-24.scss
new file mode 100644
index 0000000000..4b86012712
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19zM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/keyframes.scss
new file mode 100644
index 0000000000..e48f089cac
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-clipboard-checked {
+  50% {
+
+    background-color: var(--icon-color, var(--color-clipboard-checked-500, currentColor));
+    -webkit-mask-image: var(--icon-clipboard-checked-24);
+    mask-image: var(--icon-clipboard-checked-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-clipboard-checked-500, currentColor));
+    -webkit-mask-image: var(--icon-clipboard-checked-16);
+    mask-image: var(--icon-clipboard-checked-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/placeholders.scss
new file mode 100644
index 0000000000..9a02f5d5f0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-clipboard-checked-icon {
+  --icon-name: icon-clipboard-checked;
+  content: '';
+}
+%with-clipboard-checked-mask {
+  --icon-name: icon-clipboard-checked;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/property-16.scss
new file mode 100644
index 0000000000..01fc67781f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-clipboard-checked-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.975 1h.775A2.25 2.25 0 0115 3.25v10.5A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V3.25A2.25 2.25 0 013.25 1h.775c.116-.57.62-1 1.225-1h5.5c.605 0 1.11.43 1.225 1zM5.5 2.5v-1h5v1h-5zm6.28 3.72a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/property-24.scss
new file mode 100644
index 0000000000..b64ec594ff
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-checked/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-clipboard-checked-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.75 1A1.75 1.75 0 007 2.75V3H5.75A2.75 2.75 0 003 5.75v14.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V5.75A2.75 2.75 0 0018.25 3H17v-.25A1.75 1.75 0 0015.25 1h-6.5zM8.5 2.75a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25v-1.5zm8.28 7.47a.75.75 0 00-1.06 0l-5.47 5.47-1.97-1.97a.75.75 0 00-1.06 1.06l2.5 2.5a.75.75 0 001.06 0l6-6a.75.75 0 000-1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/keyframes.scss
new file mode 100644
index 0000000000..cbfb31a873
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-clipboard-copy {
+  50% {
+
+    background-color: var(--icon-color, var(--color-clipboard-copy-500, currentColor));
+    -webkit-mask-image: var(--icon-clipboard-copy-24);
+    mask-image: var(--icon-clipboard-copy-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-clipboard-copy-500, currentColor));
+    -webkit-mask-image: var(--icon-clipboard-copy-16);
+    mask-image: var(--icon-clipboard-copy-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/placeholders.scss
new file mode 100644
index 0000000000..e2981bcd44
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-clipboard-copy-icon {
+  --icon-name: icon-clipboard-copy;
+  content: '';
+}
+%with-clipboard-copy-mask {
+  --icon-name: icon-clipboard-copy;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/property-16.scss
new file mode 100644
index 0000000000..4d788c795e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-clipboard-copy-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M3.25 2.5H4v.25C4 3.44 4.56 4 5.25 4h5.5C11.44 4 12 3.44 12 2.75V2.5h.75a.75.75 0 01.75.75v3a.75.75 0 001.5 0v-3A2.25 2.25 0 0012.75 1h-.775c-.116-.57-.62-1-1.225-1h-5.5c-.605 0-1.11.43-1.225 1H3.25A2.25 2.25 0 001 3.25v10.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75v-1a.75.75 0 00-1.5 0v1a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V3.25a.75.75 0 01.75-.75zm2.25-1v1h5v-1h-5z" clip-rule="evenodd"/><path d="M4.75 5.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3zM4 12.25a.75.75 0 01.75-.75h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zM4.75 8.5a.75.75 0 000 1.5h2a.75.75 0 000-1.5h-2zM16 9.25a.75.75 0 01-.75.75h-4.19l1.22 1.22a.75.75 0 11-1.06 1.06l-2.5-2.5a.752.752 0 010-1.06l2.5-2.5a.75.75 0 111.06 1.06L11.06 8.5h4.19a.75.75 0 01.75.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/property-24.scss
new file mode 100644
index 0000000000..24b816b143
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard-copy/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-clipboard-copy-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M8.75 1A1.75 1.75 0 007 2.75V3H5.75A2.75 2.75 0 003 5.75v14.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V5.75c0-.69.56-1.25 1.25-1.25h1.268c.121.848.85 1.5 1.732 1.5h6.5a1.75 1.75 0 001.732-1.5h1.268c.69 0 1.25.56 1.25 1.25v4.5a.75.75 0 001.5 0v-4.5A2.75 2.75 0 0018.25 3H17v-.25A1.75 1.75 0 0015.25 1h-6.5zM8.5 2.75a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25v-1.5z" clip-rule="evenodd"/><path d="M7 9.75A.75.75 0 017.75 9h4.5a.75.75 0 010 1.5h-4.5A.75.75 0 017 9.75zM7 17.75a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zM7.75 13a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5zM22.75 14a.75.75 0 01-.75.75h-6.34l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.747.747 0 01-.24-.533v-.034a.748.748 0 01.227-.521l.014-.013L16.74 10.2a.75.75 0 111.02 1.1l-2.1 1.95H22a.75.75 0 01.75.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/keyframes.scss
new file mode 100644
index 0000000000..e29c31ca80
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-clipboard {
+  50% {
+
+    background-color: var(--icon-color, var(--color-clipboard-500, currentColor));
+    -webkit-mask-image: var(--icon-clipboard-24);
+    mask-image: var(--icon-clipboard-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-clipboard-500, currentColor));
+    -webkit-mask-image: var(--icon-clipboard-16);
+    mask-image: var(--icon-clipboard-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/placeholders.scss
new file mode 100644
index 0000000000..c9f305a159
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-clipboard-icon {
+  --icon-name: icon-clipboard;
+  content: '';
+}
+%with-clipboard-mask {
+  --icon-name: icon-clipboard;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/property-16.scss
new file mode 100644
index 0000000000..6b4a241973
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-clipboard-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.975 1h.775A2.25 2.25 0 0115 3.25v10.5A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V3.25A2.25 2.25 0 013.25 1h.775c.116-.57.62-1 1.225-1h5.5c.605 0 1.11.43 1.225 1zM4 2.5h-.75a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V3.25a.75.75 0 00-.75-.75H12v.25C12 3.44 11.44 4 10.75 4h-5.5C4.56 4 4 3.44 4 2.75V2.5zm1.5 0v-1h5v1h-5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/property-24.scss
new file mode 100644
index 0000000000..cb4a9028b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clipboard/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-clipboard-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.75 1A1.75 1.75 0 007 2.75V3H5.75A2.75 2.75 0 003 5.75v14.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V5.75A2.75 2.75 0 0018.25 3H17v-.25A1.75 1.75 0 0015.25 1h-6.5zm8.232 3.5A1.75 1.75 0 0115.25 6h-6.5a1.75 1.75 0 01-1.732-1.5H5.75c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25h-1.268zM8.5 2.75a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v1.5a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25v-1.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/index.scss
new file mode 100644
index 0000000000..a78035ca48
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../clock/property-16';
+        @import '../clock/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/keyframes.scss
new file mode 100644
index 0000000000..a048178a61
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-clock-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-clock-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-clock-24);
+    mask-image: var(--icon-clock-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-clock-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-clock-16);
+    mask-image: var(--icon-clock-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/placeholders.scss
new file mode 100644
index 0000000000..2c8a8f2a10
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-clock-fill-icon {
+  --icon-name: icon-clock-fill;
+  content: '';
+}
+%with-clock-fill-mask {
+  --icon-name: icon-clock-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/index.scss
new file mode 100644
index 0000000000..a78035ca48
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../clock/property-16';
+        @import '../clock/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/keyframes.scss
new file mode 100644
index 0000000000..f89534520f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-clock-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-clock-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-clock-24);
+    mask-image: var(--icon-clock-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-clock-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-clock-16);
+    mask-image: var(--icon-clock-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/placeholders.scss
new file mode 100644
index 0000000000..33a567bb18
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-clock-outline-icon {
+  --icon-name: icon-clock-outline;
+  content: '';
+}
+%with-clock-outline-mask {
+  --icon-name: icon-clock-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock/keyframes.scss
new file mode 100644
index 0000000000..b62926d8b2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-clock {
+  50% {
+
+    background-color: var(--icon-color, var(--color-clock-500, currentColor));
+    -webkit-mask-image: var(--icon-clock-24);
+    mask-image: var(--icon-clock-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-clock-500, currentColor));
+    -webkit-mask-image: var(--icon-clock-16);
+    mask-image: var(--icon-clock-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock/placeholders.scss
new file mode 100644
index 0000000000..e780415ef7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-clock-icon {
+  --icon-name: icon-clock;
+  content: '';
+}
+%with-clock-mask {
+  --icon-name: icon-clock;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock/property-16.scss
new file mode 100644
index 0000000000..fb0f15d7f2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-clock-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/clock/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/clock/property-24.scss
new file mode 100644
index 0000000000..c9999f09f1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/clock/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-clock-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.5 5.75a.75.75 0 00-1.5 0V12c0 .284.16.544.415.67l4.5 2.25a.75.75 0 10.67-1.34L12.5 11.536V5.75z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/keyframes.scss
new file mode 100644
index 0000000000..3eedfceaa7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cloud-check {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cloud-check-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-check-24);
+    mask-image: var(--icon-cloud-check-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cloud-check-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-check-16);
+    mask-image: var(--icon-cloud-check-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/placeholders.scss
new file mode 100644
index 0000000000..8ae05f7135
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cloud-check-icon {
+  --icon-name: icon-cloud-check;
+  content: '';
+}
+%with-cloud-check-mask {
+  --icon-name: icon-cloud-check;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/property-16.scss
new file mode 100644
index 0000000000..45754a56ce
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-check-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.932 1.373a6.041 6.041 0 016.239 1.28 5.998 5.998 0 011.505 2.284h.28c1.071 0 2.1.424 2.858 1.18a4.025 4.025 0 01-.665 6.239.75.75 0 01-.812-1.262 2.524 2.524 0 00.418-3.914 2.551 2.551 0 00-1.8-.742h-.83a.75.75 0 01-.726-.562A4.496 4.496 0 009.14 3.74a4.541 4.541 0 00-4.688-.96 4.52 4.52 0 00-2.006 1.466 4.488 4.488 0 00.386 5.942.75.75 0 01-1.055 1.066 5.982 5.982 0 01-.515-7.928 6.02 6.02 0 012.67-1.954z"/><path d="M11.78 9.22a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 111.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/property-24.scss
new file mode 100644
index 0000000000..d6e633e7bc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-check/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-check-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.026 1.046a8.87 8.87 0 014.152.57 8.932 8.932 0 013.436 2.412 9.017 9.017 0 011.802 3.16h.726a5.84 5.84 0 013.698 1.326 5.914 5.914 0 012.037 3.374 5.945 5.945 0 01-.528 3.91 5.882 5.882 0 01-2.858 2.705.75.75 0 01-.606-1.372 4.381 4.381 0 002.129-2.016c.46-.9.599-1.932.394-2.923a4.413 4.413 0 00-1.52-2.518 4.338 4.338 0 00-2.746-.987h-1.288a.75.75 0 01-.727-.564 7.521 7.521 0 00-1.639-3.104 7.431 7.431 0 00-2.859-2.008 7.37 7.37 0 00-6.734.692 7.472 7.472 0 00-2.4 2.549 7.55 7.55 0 00-.338 6.832 7.49 7.49 0 002.138 2.777.75.75 0 01-.941 1.168 8.99 8.99 0 01-2.566-3.333 9.06 9.06 0 01.404-8.189 8.971 8.971 0 012.883-3.06 8.888 8.888 0 013.951-1.4z"/><path d="M17.78 14.22a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 6.97-6.97a.75.75 0 011.06 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/keyframes.scss
new file mode 100644
index 0000000000..f94b62d180
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cloud-cross {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cloud-cross-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-cross-24);
+    mask-image: var(--icon-cloud-cross-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cloud-cross-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-cross-16);
+    mask-image: var(--icon-cloud-cross-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/placeholders.scss
new file mode 100644
index 0000000000..4490fe63e1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cloud-cross-icon {
+  --icon-name: icon-cloud-cross;
+  content: '';
+}
+%with-cloud-cross-mask {
+  --icon-name: icon-cloud-cross;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/property-16.scss
new file mode 100644
index 0000000000..2b099ba0ce
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-cross-16: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 23 20" xmlns="http://www.w3.org/2000/svg"><path d="M12 13.586l3-3L16.414 12l-3 3 3 3L15 19.414l-3-3-3 3L7.586 18l3-3-2.75-2.75 1.414-1.414 2.75 2.75zM13.905.856c2.706.498 4.595 2.544 4.816 5.64l.234.066c2.46.754 3.884 2.79 3.5 5.036-.445 2.592-2.083 4.371-5.876 4.371v-2c5.054 0 4.868-5.46.23-6.152.242-2.277-1.278-4.628-3.267-4.995-1.789-.33-3.757.564-4.572 2.164-1.629-.727-2.605-.345-3.442.362-.836.706-.527 2.194-.225 2.823-1.089.915-1.901 2.013-2.152 2.987-.101.395-.091 1.014 0 1.212.428.928 1.016 1.6 4.403 1.6v2c-4.117 0-5.672-.96-6.448-2.874-.652-1.61.137-3.457 1.882-5.118-.544-1.734.01-3.297 1.391-4.267a4.89 4.89 0 013.689-.77C9.222 1.26 11.603.431 13.905.855z" fill="%236F7682" fill-rule="nonzero"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/property-24.scss
new file mode 100644
index 0000000000..2d398cbf9a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-cross/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-cross-24: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 23 20" xmlns="http://www.w3.org/2000/svg"><path d="M12 13.586l3-3L16.414 12l-3 3 3 3L15 19.414l-3-3-3 3L7.586 18l3-3-2.75-2.75 1.414-1.414 2.75 2.75zM13.905.856c2.706.498 4.595 2.544 4.816 5.64l.234.066c2.46.754 3.884 2.79 3.5 5.036-.445 2.592-2.083 4.371-5.876 4.371v-2c5.054 0 4.868-5.46.23-6.152.242-2.277-1.278-4.628-3.267-4.995-1.789-.33-3.757.564-4.572 2.164-1.629-.727-2.605-.345-3.442.362-.836.706-.527 2.194-.225 2.823-1.089.915-1.901 2.013-2.152 2.987-.101.395-.091 1.014 0 1.212.428.928 1.016 1.6 4.403 1.6v2c-4.117 0-5.672-.96-6.448-2.874-.652-1.61.137-3.457 1.882-5.118-.544-1.734.01-3.297 1.391-4.267a4.89 4.89 0 013.689-.77C9.222 1.26 11.603.431 13.905.855z" fill="%236F7682" fill-rule="nonzero"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/keyframes.scss
new file mode 100644
index 0000000000..7da7593c11
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cloud-download {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cloud-download-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-download-24);
+    mask-image: var(--icon-cloud-download-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cloud-download-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-download-16);
+    mask-image: var(--icon-cloud-download-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/placeholders.scss
new file mode 100644
index 0000000000..5afd91857f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cloud-download-icon {
+  --icon-name: icon-cloud-download;
+  content: '';
+}
+%with-cloud-download-mask {
+  --icon-name: icon-cloud-download;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/property-16.scss
new file mode 100644
index 0000000000..efb6786a16
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-download-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.235 1.123a6.041 6.041 0 00-3.303.25A6.02 6.02 0 001.26 3.326a5.988 5.988 0 00.515 7.929.75.75 0 001.055-1.066 4.482 4.482 0 01-.386-5.942A4.52 4.52 0 014.451 2.78a4.541 4.541 0 014.688.961 4.496 4.496 0 011.26 2.135.75.75 0 00.726.561h.83c.676 0 1.324.268 1.8.743a2.524 2.524 0 01-.418 3.914.75.75 0 00.812 1.262 4.024 4.024 0 00.665-6.239 4.051 4.051 0 00-2.859-1.18h-.28a5.998 5.998 0 00-1.504-2.285 6.028 6.028 0 00-2.936-1.529z"/><path d="M8 7.25a.75.75 0 01.75.75v4.44l1.47-1.47a.75.75 0 111.06 1.06l-2.75 2.75a.75.75 0 01-1.06 0l-2.75-2.75a.75.75 0 111.06-1.06l1.47 1.47V8A.75.75 0 018 7.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/property-24.scss
new file mode 100644
index 0000000000..22377cc6cd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-download/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-download-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.178 1.615a8.87 8.87 0 00-8.103.832 8.971 8.971 0 00-2.883 3.06 9.05 9.05 0 00-.404 8.189 8.99 8.99 0 002.566 3.333.75.75 0 10.94-1.168 7.49 7.49 0 01-2.137-2.777 7.56 7.56 0 01.338-6.832 7.472 7.472 0 012.4-2.549 7.37 7.37 0 016.734-.692 7.431 7.431 0 012.859 2.008 7.521 7.521 0 011.64 3.104.75.75 0 00.726.564h1.288c1 .001 1.97.35 2.746.987a4.413 4.413 0 011.52 2.518 4.444 4.444 0 01-.394 2.923c-.46.9-1.212 1.61-2.13 2.016a.75.75 0 00.607 1.372 5.882 5.882 0 002.858-2.705 5.945 5.945 0 00.527-3.91 5.914 5.914 0 00-2.036-3.374 5.84 5.84 0 00-3.698-1.327h-.726a9.017 9.017 0 00-1.802-3.159 8.932 8.932 0 00-3.436-2.413z"/><path d="M12 22h.012a.747.747 0 00.533-.235l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V12.75a.75.75 0 00-1.5 0v6.614l-2.955-3.129a.75.75 0 00-1.09 1.03l4.248 4.498a.748.748 0 00.535.237H12z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/keyframes.scss
new file mode 100644
index 0000000000..231acb692b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cloud-lightning {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cloud-lightning-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-lightning-24);
+    mask-image: var(--icon-cloud-lightning-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cloud-lightning-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-lightning-16);
+    mask-image: var(--icon-cloud-lightning-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/placeholders.scss
new file mode 100644
index 0000000000..6631855167
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cloud-lightning-icon {
+  --icon-name: icon-cloud-lightning;
+  content: '';
+}
+%with-cloud-lightning-mask {
+  --icon-name: icon-cloud-lightning;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/property-16.scss
new file mode 100644
index 0000000000..99734fe989
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-lightning-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.235 1.123a6.041 6.041 0 00-3.303.25A6.02 6.02 0 001.26 3.326a5.988 5.988 0 00.515 7.929.75.75 0 001.055-1.066 4.482 4.482 0 01-.386-5.942A4.52 4.52 0 014.451 2.78a4.541 4.541 0 014.688.961 4.496 4.496 0 011.26 2.135.75.75 0 00.726.561h.83c.676 0 1.324.268 1.8.743a2.524 2.524 0 01-.418 3.914.75.75 0 00.812 1.262 4.024 4.024 0 00.665-6.239 4.051 4.051 0 00-2.859-1.18h-.28a5.998 5.998 0 00-1.504-2.285 6.028 6.028 0 00-2.936-1.529z"/><path d="M9.053 7.257a.75.75 0 00-1.106-1.014l-2.75 3a.75.75 0 00.316 1.218l3.403 1.135-1.969 2.147a.75.75 0 001.106 1.014l2.75-3a.75.75 0 00-.316-1.218L7.084 9.404l1.969-2.147z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/property-24.scss
new file mode 100644
index 0000000000..df3f2a373b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lightning/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-lightning-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.819 1.485a8.86 8.86 0 00-4.357-.363 8.892 8.892 0 00-4.004 1.765A8.99 8.99 0 00.766 6.353a9.065 9.065 0 00.649 8.509 8.958 8.958 0 003.187 3.01.75.75 0 00.731-1.309 7.457 7.457 0 01-2.653-2.507 7.565 7.565 0 01-.54-7.1A7.49 7.49 0 014.381 4.07 7.392 7.392 0 017.711 2.6a7.36 7.36 0 013.618.302 7.421 7.421 0 013.046 1.999 7.522 7.522 0 011.744 3.22.75.75 0 00.727.565c1.732 0 3.082.103 4.213 1.134a4.44 4.44 0 01.589 5.888 4.356 4.356 0 01-2.643 1.702.75.75 0 00.302 1.47 5.857 5.857 0 003.553-2.288 5.94 5.94 0 00-.79-7.88c-1.427-1.3-3.094-1.495-4.66-1.522a9.017 9.017 0 00-1.93-3.304 8.92 8.92 0 00-3.662-2.402z"/><path d="M14.031 11.03a.75.75 0 10-1.062-1.06l-4.75 4.77a.75.75 0 00.31 1.246l5.372 1.653-3.956 4.357a.75.75 0 001.11 1.008l4.75-5.23a.75.75 0 00-.334-1.222l-5.313-1.634 3.873-3.889z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/keyframes.scss
new file mode 100644
index 0000000000..8ef5c09d8f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cloud-lock {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cloud-lock-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-lock-24);
+    mask-image: var(--icon-cloud-lock-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cloud-lock-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-lock-16);
+    mask-image: var(--icon-cloud-lock-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/placeholders.scss
new file mode 100644
index 0000000000..050355fa6c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cloud-lock-icon {
+  --icon-name: icon-cloud-lock;
+  content: '';
+}
+%with-cloud-lock-mask {
+  --icon-name: icon-cloud-lock;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/property-16.scss
new file mode 100644
index 0000000000..bde4307c30
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-lock-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.235 1.123a6.041 6.041 0 00-3.303.25A6.02 6.02 0 001.26 3.326a5.988 5.988 0 00-.404 6.76.75.75 0 101.286-.774 4.49 4.49 0 01-.62-2.766 4.488 4.488 0 01.922-2.3A4.52 4.52 0 014.451 2.78a4.541 4.541 0 014.688.961 4.496 4.496 0 011.26 2.135.75.75 0 00.726.561h.83c.676 0 1.324.268 1.8.743a2.524 2.524 0 01.451 2.969.75.75 0 101.326.702 4.02 4.02 0 00-.718-4.734 4.051 4.051 0 00-2.859-1.18h-.28a5.998 5.998 0 00-1.504-2.285 6.028 6.028 0 00-2.936-1.529zM8.75 12.25a.75.75 0 00-1.5 0v.5a.75.75 0 001.5 0v-.5z"/><path fill-rule="evenodd" d="M5.518 9.012c.035-.627.13-1.235.366-1.738.174-.37.435-.704.816-.94C7.08 6.101 7.52 6 8 6c.48 0 .921.1 1.3.334.381.236.642.57.816.94.236.503.331 1.111.366 1.738A2.25 2.25 0 0112.5 11.25v2.5A2.25 2.25 0 0110.25 16h-4.5a2.25 2.25 0 01-2.25-2.25v-2.5a2.25 2.25 0 012.018-2.238zM7.022 9c.032-.481.102-.838.22-1.087a.662.662 0 01.245-.302c.09-.055.243-.111.513-.111s.423.056.513.111c.087.054.17.141.246.302.117.249.187.606.219 1.087H7.022zm3.228 1.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-2.5a.75.75 0 01.75-.75h4.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/property-24.scss
new file mode 100644
index 0000000000..0c8b945b11
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-lock/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-lock-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.178 1.615a8.87 8.87 0 00-8.103.832 8.971 8.971 0 00-2.883 3.06 9.05 9.05 0 00-.404 8.189c.386.863 1.302 2.042 1.848 2.665a.75.75 0 101.129-.987c-.533-.609-1.32-1.645-1.608-2.29a7.56 7.56 0 01.338-6.832 7.472 7.472 0 012.4-2.549 7.37 7.37 0 016.734-.692 7.431 7.431 0 012.859 2.008 7.521 7.521 0 011.64 3.104.75.75 0 00.726.564h1.288c1 .001 1.97.35 2.746.987a4.413 4.413 0 011.52 2.518 4.444 4.444 0 01-.394 2.923 4.394 4.394 0 01-1.37 1.585.75.75 0 00.867 1.224 5.895 5.895 0 001.838-2.126 5.945 5.945 0 00.527-3.91 5.914 5.914 0 00-2.036-3.374 5.84 5.84 0 00-3.698-1.327h-.726a9.017 9.017 0 00-1.802-3.159 8.932 8.932 0 00-3.436-2.413zM12.75 18.75a.75.75 0 00-1.5 0v.5a.75.75 0 001.5 0v-.5z"/><path fill-rule="evenodd" d="M8 14.014v-.93c0-1.078.417-2.114 1.165-2.881A3.96 3.96 0 0112 9a3.96 3.96 0 012.835 1.203A4.127 4.127 0 0116 13.083v.93a2.25 2.25 0 012 2.237v4.5A2.25 2.25 0 0115.75 23h-7.5A2.25 2.25 0 016 20.75v-4.5a2.25 2.25 0 012-2.236zM9.5 14v-.917c0-.69.268-1.35.739-1.833A2.46 2.46 0 0112 10.5c.657 0 1.29.267 1.761.75.471.483.739 1.142.739 1.833V14h-5zm6.25 1.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75v-4.5a.75.75 0 01.75-.75h7.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/keyframes.scss
new file mode 100644
index 0000000000..799a918494
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cloud-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cloud-off-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-off-24);
+    mask-image: var(--icon-cloud-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cloud-off-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-off-16);
+    mask-image: var(--icon-cloud-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/placeholders.scss
new file mode 100644
index 0000000000..b6ec58ecdd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cloud-off-icon {
+  --icon-name: icon-cloud-off;
+  content: '';
+}
+%with-cloud-off-mask {
+  --icon-name: icon-cloud-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/property-16.scss
new file mode 100644
index 0000000000..b100adce83
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1.22 1.22a.75.75 0 011.06 0l12.5 12.5a.75.75 0 11-1.06 1.06l-1.11-1.11c-.258.053-.523.08-.791.08H6.094a5.907 5.907 0 01-3.085-.865A5.783 5.783 0 01.85 10.539a5.674 5.674 0 01-.57-3.117v-.004a5.701 5.701 0 011.196-2.943c.284-.361.61-.686.97-.968L1.22 2.28a.75.75 0 010-1.06zm2.297 3.357a4.299 4.299 0 00-.863.827 4.201 4.201 0 00-.882 2.165v.003a4.174 4.174 0 00.42 2.296c.356.713.91 1.315 1.6 1.737a4.407 4.407 0 002.298.645h5.099L3.517 4.577z" clip-rule="evenodd"/><path d="M6.38 2.954a.75.75 0 01.884-.586A5.87 5.87 0 0110.11 3.83 5.743 5.743 0 0111.564 6h.255a3.96 3.96 0 012.775 1.13 3.848 3.848 0 011.156 2.745c0 .409-.066.81-.19 1.193a.75.75 0 11-1.426-.468c.076-.232.116-.477.116-.725 0-.626-.253-1.228-.707-1.675a2.46 2.46 0 00-1.724-.7h-.802a.75.75 0 01-.725-.56 4.233 4.233 0 00-1.206-2.014 4.37 4.37 0 00-2.119-1.088.75.75 0 01-.587-.884z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/property-24.scss
new file mode 100644
index 0000000000..1fee641181
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06l2.447 2.448a8.96 8.96 0 00-1.801 1.766 9.041 9.041 0 00-1.82 4.598v.003a9.064 9.064 0 00.867 4.87 8.975 8.975 0 003.294 3.674A8.873 8.873 0 008.934 21h9.2c.54 0 1.073-.075 1.585-.22l2 2a.75.75 0 101.061-1.06L2.28 1.22zm16.15 18.27L4.742 5.804c-.639.44-1.209.98-1.687 1.603a7.541 7.541 0 00-1.518 3.832v.003a7.564 7.564 0 00.723 4.066 7.475 7.475 0 002.744 3.06A7.374 7.374 0 008.923 19.5H18.133c.1 0 .198-.003.296-.01z" clip-rule="evenodd"/><path d="M9.702 3.003a.75.75 0 10-.133 1.494 7.394 7.394 0 014.16 1.757 7.51 7.51 0 012.387 3.867.75.75 0 00.727.566h.061c1.304 0 2.327 0 3.292.522.635.343 1.176.84 1.575 1.447a4.436 4.436 0 01.383 4.158.75.75 0 101.383.581 5.946 5.946 0 00-.512-5.563 5.879 5.879 0 00-2.116-1.943c-1.17-.632-2.393-.696-3.5-.701a9.005 9.005 0 00-2.704-4.072 8.894 8.894 0 00-5.003-2.113z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/keyframes.scss
new file mode 100644
index 0000000000..630c50892c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cloud-upload {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cloud-upload-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-upload-24);
+    mask-image: var(--icon-cloud-upload-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cloud-upload-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-upload-16);
+    mask-image: var(--icon-cloud-upload-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/placeholders.scss
new file mode 100644
index 0000000000..69f1a23559
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cloud-upload-icon {
+  --icon-name: icon-cloud-upload;
+  content: '';
+}
+%with-cloud-upload-mask {
+  --icon-name: icon-cloud-upload;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/property-16.scss
new file mode 100644
index 0000000000..7b08104df1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-upload-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.235 1.123a6.041 6.041 0 00-3.303.25A6.02 6.02 0 001.26 3.326a5.988 5.988 0 00.515 7.929.75.75 0 001.055-1.066 4.482 4.482 0 01-.386-5.942A4.52 4.52 0 014.451 2.78a4.541 4.541 0 014.688.961 4.496 4.496 0 011.26 2.135.75.75 0 00.726.561h.83c.676 0 1.324.268 1.8.743a2.524 2.524 0 01-.418 3.914.75.75 0 00.812 1.262 4.024 4.024 0 00.665-6.239 4.051 4.051 0 00-2.859-1.18h-.28a5.998 5.998 0 00-1.504-2.285 6.028 6.028 0 00-2.936-1.529z"/><path d="M4.72 11.28a.75.75 0 001.06 0l1.47-1.47v4.44a.75.75 0 001.5 0V9.81l1.47 1.47a.75.75 0 101.06-1.06L8.53 7.47l-.01-.01a.747.747 0 00-1.05.01l-2.75 2.75a.75.75 0 000 1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/property-24.scss
new file mode 100644
index 0000000000..48e5a5386e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-upload/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-upload-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.178 1.615a8.87 8.87 0 00-8.103.832 8.971 8.971 0 00-2.883 3.06 9.05 9.05 0 00-.404 8.189 8.99 8.99 0 002.566 3.333.75.75 0 10.94-1.168 7.49 7.49 0 01-2.137-2.777 7.56 7.56 0 01.338-6.832 7.472 7.472 0 012.4-2.549 7.37 7.37 0 016.734-.692 7.431 7.431 0 012.859 2.008 7.521 7.521 0 011.64 3.104.75.75 0 00.726.564h1.288c1 .001 1.97.35 2.746.987a4.413 4.413 0 011.52 2.518 4.444 4.444 0 01-.394 2.923c-.46.9-1.212 1.61-2.13 2.016a.75.75 0 00.607 1.372 5.882 5.882 0 002.858-2.705 5.945 5.945 0 00.527-3.91 5.914 5.914 0 00-2.036-3.374 5.84 5.84 0 00-3.698-1.327h-.726a9.017 9.017 0 00-1.802-3.159 8.932 8.932 0 00-3.436-2.413z"/><path d="M7.235 17.795a.75.75 0 001.06-.03l2.955-3.129v6.614a.75.75 0 001.5 0v-6.614l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-.533-.235h-.024a.748.748 0 00-.535.237l-4.248 4.498a.75.75 0 00.03 1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/keyframes.scss
new file mode 100644
index 0000000000..7801790e41
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cloud-x {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cloud-x-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-x-24);
+    mask-image: var(--icon-cloud-x-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cloud-x-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-x-16);
+    mask-image: var(--icon-cloud-x-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/placeholders.scss
new file mode 100644
index 0000000000..45ef15464d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cloud-x-icon {
+  --icon-name: icon-cloud-x;
+  content: '';
+}
+%with-cloud-x-mask {
+  --icon-name: icon-cloud-x;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/property-16.scss
new file mode 100644
index 0000000000..c1a9ff315d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-x-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.932 1.373a6.041 6.041 0 016.239 1.28 5.998 5.998 0 011.505 2.284h.28c1.071 0 2.1.424 2.858 1.18a4.025 4.025 0 01-.665 6.239.75.75 0 01-.812-1.262 2.524 2.524 0 00.418-3.914 2.551 2.551 0 00-1.8-.742h-.83a.75.75 0 01-.726-.562A4.496 4.496 0 009.14 3.74a4.541 4.541 0 00-4.688-.96 4.52 4.52 0 00-2.006 1.466 4.488 4.488 0 00.386 5.942.75.75 0 01-1.055 1.066 5.982 5.982 0 01-.515-7.928 6.02 6.02 0 012.67-1.954z"/><path d="M10.78 9.22a.75.75 0 010 1.06L9.06 12l1.72 1.72a.75.75 0 11-1.06 1.06L8 13.06l-1.72 1.72a.75.75 0 01-1.06-1.06L6.94 12l-1.72-1.72a.75.75 0 111.06-1.06L8 10.94l1.72-1.72a.75.75 0 011.06 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/property-24.scss
new file mode 100644
index 0000000000..456f608c33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud-x/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-x-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.026 1.046a8.87 8.87 0 014.152.57 8.932 8.932 0 013.436 2.412 9.017 9.017 0 011.802 3.16h.726a5.84 5.84 0 013.698 1.326 5.914 5.914 0 012.037 3.374 5.945 5.945 0 01-.528 3.91 5.882 5.882 0 01-2.858 2.705.75.75 0 01-.606-1.372 4.381 4.381 0 002.129-2.016c.46-.9.599-1.932.394-2.923a4.413 4.413 0 00-1.52-2.518 4.338 4.338 0 00-2.746-.987h-1.288a.75.75 0 01-.727-.564 7.521 7.521 0 00-1.639-3.104 7.431 7.431 0 00-2.859-2.008 7.37 7.37 0 00-6.734.692 7.472 7.472 0 00-2.4 2.549 7.55 7.55 0 00-.338 6.832 7.49 7.49 0 002.138 2.777.75.75 0 01-.941 1.168 8.99 8.99 0 01-2.566-3.333 9.06 9.06 0 01.404-8.189 8.971 8.971 0 012.883-3.06 8.888 8.888 0 013.951-1.4z"/><path d="M8.22 14.22a.75.75 0 011.06 0L12 16.94l2.72-2.72a.75.75 0 111.06 1.06L13.06 18l2.72 2.72a.75.75 0 11-1.06 1.06L12 19.06l-2.72 2.72a.75.75 0 01-1.06-1.06L10.94 18l-2.72-2.72a.75.75 0 010-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/keyframes.scss
new file mode 100644
index 0000000000..fc3d17076e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cloud {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cloud-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-24);
+    mask-image: var(--icon-cloud-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cloud-500, currentColor));
+    -webkit-mask-image: var(--icon-cloud-16);
+    mask-image: var(--icon-cloud-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/placeholders.scss
new file mode 100644
index 0000000000..090680875e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cloud-icon {
+  --icon-name: icon-cloud;
+  content: '';
+}
+%with-cloud-mask {
+  --icon-name: icon-cloud;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/property-16.scss
new file mode 100644
index 0000000000..43e2250aea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.932 2.373a6.041 6.041 0 016.239 1.28 5.998 5.998 0 011.505 2.284h.28c1.071 0 2.1.424 2.858 1.18a4.025 4.025 0 010 5.703A4.051 4.051 0 0111.955 14H6.026a6.037 6.037 0 01-3.186-.906 6.008 6.008 0 01-2.223-2.448 5.982 5.982 0 01.644-6.32 6.02 6.02 0 012.67-1.953zm.526 1.405a4.52 4.52 0 00-2.013 1.47 4.488 4.488 0 001.186 6.572c.716.444 1.542.68 2.386.68h5.938c.676 0 1.324-.268 1.8-.742a2.524 2.524 0 000-3.578 2.551 2.551 0 00-1.8-.743h-.83a.75.75 0 01-.726-.561A4.496 4.496 0 009.14 4.74a4.541 4.541 0 00-4.681-.963z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/property-24.scss
new file mode 100644
index 0000000000..9cd27c4ec0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cloud/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cloud-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.836 3.558a8.864 8.864 0 014.895-.373 8.906 8.906 0 014.356 2.297 9.009 9.009 0 012.325 3.705h.726a5.84 5.84 0 014.147 1.733A5.929 5.929 0 0124 15.094a5.929 5.929 0 01-1.715 4.174A5.84 5.84 0 0118.138 21H8.929a8.878 8.878 0 01-4.721-1.361 8.976 8.976 0 01-3.295-3.675 9.062 9.062 0 01.953-9.47 8.934 8.934 0 013.97-2.936zm.509 1.41a7.434 7.434 0 00-3.289 2.439 7.562 7.562 0 00-.795 7.9 7.475 7.475 0 002.745 3.062 7.378 7.378 0 003.93 1.131h9.202a4.34 4.34 0 003.082-1.288 4.429 4.429 0 001.28-3.118c0-1.17-.461-2.292-1.28-3.118a4.34 4.34 0 00-3.082-1.289h-1.289a.75.75 0 01-.726-.563 7.515 7.515 0 00-2.074-3.56 7.407 7.407 0 00-3.623-1.91 7.364 7.364 0 00-4.081.314z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/code/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/code/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/code/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/code/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/code/keyframes.scss
new file mode 100644
index 0000000000..8493d50db1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/code/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-code {
+  50% {
+
+    background-color: var(--icon-color, var(--color-code-500, currentColor));
+    -webkit-mask-image: var(--icon-code-24);
+    mask-image: var(--icon-code-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-code-500, currentColor));
+    -webkit-mask-image: var(--icon-code-16);
+    mask-image: var(--icon-code-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/code/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/code/placeholders.scss
new file mode 100644
index 0000000000..ccafa796c6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/code/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-code-icon {
+  --icon-name: icon-code;
+  content: '';
+}
+%with-code-mask {
+  --icon-name: icon-code;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/code/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/code/property-16.scss
new file mode 100644
index 0000000000..a6149298d2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/code/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-code-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.424 2.02a.75.75 0 00-.904.556l-2.5 10.5a.75.75 0 001.46.348l2.5-10.5a.75.75 0 00-.556-.904zM11.2 4.24a.75.75 0 011.06-.04l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1L14.148 8 11.24 5.3a.75.75 0 01-.04-1.06zM4.76 5.3a.75.75 0 00-1.02-1.1L.24 7.45a.75.75 0 000 1.1l3.5 3.25a.75.75 0 101.02-1.1L1.852 8 4.76 5.3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/code/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/code/property-24.scss
new file mode 100644
index 0000000000..9fc69f2f53
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/code/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-code-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.447 3.026a.75.75 0 00-.92.527l-4.5 16.5a.75.75 0 001.447.394l4.5-16.5a.75.75 0 00-.527-.92zM16.207 6.232a.75.75 0 011.06-.025l5.5 5.25a.75.75 0 010 1.085l-5.5 5.25a.75.75 0 01-1.035-1.085L21.164 12l-4.932-4.707a.75.75 0 01-.024-1.06zM7.768 7.293a.75.75 0 00-1.036-1.086l-5.5 5.25a.75.75 0 000 1.085l5.5 5.25a.75.75 0 101.036-1.085L2.836 12l4.932-4.707z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/keyframes.scss
new file mode 100644
index 0000000000..dd15ca3c50
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-codepen-color {
+  50% {
+    background-image: var(--icon-codepen-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-codepen-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/placeholders.scss
new file mode 100644
index 0000000000..3aa38509a3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-codepen-color-icon {
+  --icon-name: icon-codepen-color;
+  content: '';
+}
+%with-codepen-color-mask {
+  --icon-name: icon-codepen-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/property-16.scss
new file mode 100644
index 0000000000..0a6b064080
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-codepen-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.416 7.378v1.244L5.346 8l-.93-.622zM7.627 6.473V4.738L4.712 6.683l1.302.87 1.613-1.08zM11.285 6.683L8.37 4.738v1.735l1.613 1.08 1.302-.87zM4.712 9.32l2.915 1.942V9.527l-1.613-1.08-1.302.873zM8.37 9.527v1.735l2.915-1.942-1.302-.873-1.613 1.08zM8 7.12L6.683 8 8 8.879 9.314 8 8 7.12z"/><path d="M8 1a7 7 0 10.001 14.001A7 7 0 008 1zm4.327 8.32c0 .018 0 .033-.003.047 0 .006-.003.012-.003.015l-.006.033c-.002.006-.002.012-.005.018l-.01.026-.008.018c-.003.009-.01.018-.012.024a.06.06 0 01-.012.017l-.015.024a.065.065 0 01-.012.015c-.005.006-.011.015-.017.02l-.015.015c-.006.006-.015.012-.02.018-.007.003-.013.009-.019.012-.003 0-.003.003-.005.006l-3.96 2.64a.377.377 0 01-.414 0L3.832 9.631c-.003 0-.003-.003-.006-.006l-.018-.012c-.006-.006-.015-.012-.02-.018l-.016-.014a.129.129 0 01-.017-.021c-.003-.006-.01-.012-.012-.015a.064.064 0 01-.015-.024.062.062 0 00-.012-.017l-.012-.024-.009-.018-.008-.026-.006-.018a.106.106 0 01-.006-.033c0-.006-.003-.012-.003-.015-.003-.014-.003-.032-.003-.047V6.686c0-.018 0-.033.003-.048 0-.005.003-.011.003-.014l.006-.033.006-.018.008-.026.01-.018c.002-.009.008-.018.011-.024a.062.062 0 01.012-.017l.015-.024a.065.065 0 01.012-.015c.006-.006.011-.015.017-.02l.015-.015c.006-.006.015-.012.02-.018.007-.003.013-.01.019-.012.003 0 .003-.003.006-.006L7.79 3.741a.372.372 0 01.411 0l3.958 2.637c.002 0 .002.003.005.006l.018.012.021.018.015.014c.006.006.012.012.018.021l.011.015a.065.065 0 01.015.024.06.06 0 00.012.017.087.087 0 01.012.024l.009.018.009.026c.003.006.003.012.005.018.004.009.006.02.006.033 0 .006.003.012.003.014a.251.251 0 01.003.048V9.32h.006z"/><path d="M11.584 8.622V7.378L10.652 8l.932.622z"/></g><path fill="%23fff" fill-rule="evenodd" d="M12.327 9.32c0 .018 0 .033-.003.047 0 .004 0 .007-.002.01v.005a.14.14 0 00-.004.017c0 .003 0 .007-.002.011v.005a.044.044 0 00-.004.009c0 .002 0 .004-.002.006v.003l-.01.026-.008.018-.009.018-.003.006a.06.06 0 01-.012.017l-.003.005-.004.007a.322.322 0 01-.02.027.129.129 0 00-.008.01l-.01.01-.014.015a.137.137 0 01-.01.01.118.118 0 00-.01.008l-.01.006-.009.006-.003.003-.003.003-3.96 2.64a.377.377 0 01-.414 0L3.832 9.631l-.003-.003-.002-.003a.062.062 0 01-.01-.006.062.062 0 00-.008-.006.13.13 0 00-.01-.009.127.127 0 01-.01-.009l-.016-.014a.129.129 0 01-.017-.021.065.065 0 00-.012-.015.064.064 0 01-.015-.024c-.003-.006-.006-.011-.012-.017l-.009-.018-.003-.006-.009-.018-.009-.026-.003-.01a.042.042 0 00-.002-.008.106.106 0 01-.006-.033l-.002-.01-.001-.005c-.003-.014-.003-.032-.003-.047V6.686c0-.018 0-.033.003-.048l.001-.01.002-.004a.153.153 0 00.003-.017c0-.003 0-.007.002-.012v-.004l.003-.009.003-.009.01-.026.008-.018a.104.104 0 01.009-.018l.003-.006a.275.275 0 00.02-.03l.007-.011a.065.065 0 01.012-.015l.008-.01a.129.129 0 01.01-.01l.014-.015.01-.01c.004-.002.008-.005.01-.008l.004-.002.006-.004a.06.06 0 01.009-.006l.003-.003.002-.003L7.79 3.741a.371.371 0 01.411 0l3.957 2.637.004.003.002.003.01.006.005.004.003.002a.089.089 0 00.006.005l.005.004.01.009.015.014.017.021.008.01.004.005a.065.065 0 01.015.024.06.06 0 00.012.017.087.087 0 01.012.024l.009.018.008.026c.002.003.003.006.003.01l.003.008c.003.009.006.02.006.033l.002.01.001.004c.003.015.003.033.003.048V9.32h.006zm-7.911-.698V7.378L5.345 8l-.93.622zm3.211-3.884v1.735l-1.613 1.08-1.302-.87 2.915-1.945zm.743 0l2.915 1.945-1.302.87-1.613-1.08V4.738zm-.743 6.524L4.712 9.32l1.302-.873 1.613 1.08v1.735zm.743 0V9.527l1.613-1.08 1.302.873-2.915 1.942zM8 8.879L6.683 8 8 7.12 9.314 8 8 8.879zm3.584-1.5v1.243L10.652 8l.932-.622z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/property-24.scss
new file mode 100644
index 0000000000..9713bdc71d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-codepen-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.368 11.023v1.954L7.828 12l-1.46-.977zM11.414 9.6V6.874L6.833 9.93l2.046 1.368L11.414 9.6zM17.163 9.93L12.58 6.874V9.6l2.535 1.698 2.047-1.368zM6.833 14.074l4.581 3.052V14.4l-2.535-1.698-2.046 1.372zM12.581 14.4v2.726l4.582-3.052-2.047-1.372-2.535 1.698zM12 10.619L9.93 12 12 13.381 14.065 12 12 10.619z"/><path d="M12 1C5.926 1 1 5.926 1 12s4.926 11 11 11 11-4.926 11-11S18.074 1 12 1zm6.8 13.074c0 .028 0 .052-.005.075 0 .01-.004.018-.004.023-.005.019-.005.033-.01.051-.004.01-.004.019-.009.028l-.014.042-.014.028c-.005.014-.014.028-.018.037-.005.01-.01.019-.019.028-.01.014-.014.023-.023.037a.097.097 0 01-.019.024c-.01.009-.018.023-.028.032l-.023.023c-.01.01-.023.019-.033.028-.009.005-.018.014-.027.019-.005 0-.005.005-.01.01l-6.223 4.148a.592.592 0 01-.651 0L5.45 14.563c-.004 0-.004-.005-.01-.01-.008-.004-.018-.014-.027-.018-.01-.01-.023-.019-.033-.028l-.023-.023c-.01-.01-.018-.019-.028-.033-.004-.01-.014-.018-.018-.023a.102.102 0 01-.024-.037.097.097 0 00-.018-.028c-.01-.014-.014-.028-.019-.037l-.014-.028-.014-.042c-.004-.01-.004-.019-.01-.028a.167.167 0 01-.008-.051c0-.01-.005-.019-.005-.024-.005-.023-.005-.05-.005-.074V9.935c0-.028 0-.051.005-.075 0-.009.005-.018.005-.023.004-.018.004-.032.009-.051.005-.01.005-.019.01-.028l.013-.042.014-.028c.005-.014.014-.028.019-.037a.097.097 0 01.018-.028l.024-.037c.004-.01.014-.019.018-.023.01-.01.019-.023.028-.033l.023-.023c.01-.01.024-.019.033-.028.01-.005.019-.014.028-.019.005 0 .005-.004.01-.009l6.218-4.144a.584.584 0 01.646 0l6.219 4.144c.005 0 .005.005.01.01.008.004.018.013.027.018.01.01.023.019.033.028l.023.023c.01.01.018.019.028.033.01.01.014.018.018.023.01.01.019.023.024.037.004.01.009.019.018.028a.14.14 0 01.019.037l.014.028.014.042c.004.01.004.019.01.028.004.014.008.033.008.051 0 .01.005.019.005.023.005.024.005.052.005.075v4.14h.009z"/><path d="M17.633 12.977v-1.954L16.166 12l1.465.977z"/></g><path fill="%23fff" fill-rule="evenodd" d="M18.8 14.074c0 .028 0 .052-.005.075 0 .01-.004.018-.004.023-.005.019-.005.033-.01.051-.004.01-.004.019-.009.028l-.014.042-.014.028c-.005.014-.014.028-.018.037a.096.096 0 01-.02.028l-.022.037c-.005.01-.014.019-.019.024-.01.009-.018.023-.028.032l-.023.023c-.01.01-.023.019-.033.028-.009.005-.018.014-.027.019-.005 0-.005.005-.01.01l-6.223 4.148a.593.593 0 01-.651 0L5.45 14.563c-.005 0-.005-.005-.01-.01-.008-.004-.018-.014-.027-.018-.01-.01-.023-.019-.033-.028l-.023-.023c-.01-.01-.018-.019-.028-.033a.1.1 0 00-.018-.023.102.102 0 01-.024-.037c-.004-.01-.009-.019-.018-.028-.01-.014-.014-.028-.019-.037l-.014-.028-.014-.042c-.004-.01-.004-.019-.01-.028a.168.168 0 01-.008-.051c0-.01-.005-.019-.005-.024-.005-.023-.005-.05-.005-.074V9.935c0-.028 0-.051.005-.075 0-.009.005-.018.005-.023.004-.018.004-.032.009-.051.005-.01.005-.019.01-.028l.013-.042.014-.028c.005-.014.014-.028.019-.037.004-.01.009-.018.018-.028l.024-.037a.101.101 0 01.018-.023c.01-.01.019-.023.028-.033l.023-.023c.01-.01.024-.019.033-.028.01-.005.019-.014.028-.019.004 0 .004-.004.01-.009l6.218-4.144a.584.584 0 01.646 0l6.219 4.144c.005 0 .005.005.01.01.008.004.018.013.027.018.01.01.023.019.033.028l.023.023c.01.01.018.019.028.033.01.01.014.018.018.023a.1.1 0 01.024.037c.004.01.009.019.018.028.01.014.014.023.019.037l.014.028.014.042c.004.01.004.019.01.028.004.014.008.033.008.051 0 .01.005.019.005.023.005.024.005.052.005.075v4.14h.009zM6.367 12.977v-1.954L7.829 12l-1.46.977zm5.047-6.103V9.6l-2.535 1.698L6.833 9.93l4.581-3.056zm1.167 0l4.582 3.056-2.047 1.368L12.581 9.6V6.874zm-1.167 10.252l-4.581-3.052 2.046-1.372 2.535 1.698v2.726zm1.167 0V14.4l2.535-1.698 2.047 1.372-4.582 3.052zM9.931 12L12 10.618 14.065 12 12 13.38 9.93 12zm7.701-.977v1.954L16.167 12l1.465-.977z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/index.scss
new file mode 100644
index 0000000000..4bdda184bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../codepen-color/property-16';
+        @import '../codepen-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/keyframes.scss
new file mode 100644
index 0000000000..d8de8ecbc1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-codepen {
+  50% {
+
+    background-color: var(--icon-color, var(--color-codepen-500, currentColor));
+    -webkit-mask-image: var(--icon-codepen-color-24);
+    mask-image: var(--icon-codepen-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-codepen-500, currentColor));
+    -webkit-mask-image: var(--icon-codepen-color-16);
+    mask-image: var(--icon-codepen-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/placeholders.scss
new file mode 100644
index 0000000000..675a6db470
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-codepen-icon {
+  --icon-name: icon-codepen;
+  content: '';
+}
+%with-codepen-mask {
+  --icon-name: icon-codepen;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/property-16.scss
new file mode 100644
index 0000000000..9bfbaff65b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-codepen-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.416 7.378v1.244L5.346 8l-.93-.622zM7.627 6.473V4.738L4.712 6.683l1.302.87 1.613-1.08zM11.285 6.683L8.37 4.738v1.735l1.613 1.08 1.302-.87zM4.712 9.32l2.915 1.942V9.527l-1.613-1.08-1.302.873zM8.37 9.527v1.735l2.915-1.942-1.302-.873-1.613 1.08zM8 7.12L6.683 8 8 8.879 9.314 8 8 7.12z"/><path d="M8 1a7 7 0 10.001 14.001A7 7 0 008 1zm4.327 8.32c0 .018 0 .033-.003.047 0 .006-.003.012-.003.015l-.006.033c-.002.006-.002.012-.005.018l-.01.026-.008.018c-.003.009-.01.018-.012.024a.06.06 0 01-.012.017l-.015.024a.065.065 0 01-.012.015c-.005.006-.011.015-.017.02l-.015.015c-.006.006-.015.012-.02.018-.007.003-.013.009-.019.012-.003 0-.003.003-.005.006l-3.96 2.64a.377.377 0 01-.414 0L3.832 9.631c-.003 0-.003-.003-.006-.006l-.018-.012c-.006-.006-.015-.012-.02-.018l-.016-.014a.129.129 0 01-.017-.021c-.003-.006-.01-.012-.012-.015a.064.064 0 01-.015-.024.062.062 0 00-.012-.017l-.012-.024-.009-.018-.008-.026-.006-.018a.106.106 0 01-.006-.033c0-.006-.003-.012-.003-.015-.003-.014-.003-.032-.003-.047V6.686c0-.018 0-.033.003-.048 0-.005.003-.011.003-.014l.006-.033.006-.018.008-.026.01-.018c.002-.009.008-.018.011-.024a.062.062 0 01.012-.017l.015-.024a.065.065 0 01.012-.015c.006-.006.011-.015.017-.02l.015-.015c.006-.006.015-.012.02-.018.007-.003.013-.01.019-.012.003 0 .003-.003.006-.006L7.79 3.741a.372.372 0 01.411 0l3.958 2.637c.002 0 .002.003.005.006l.018.012.021.018.015.014c.006.006.012.012.018.021l.011.015a.065.065 0 01.015.024.06.06 0 00.012.017.087.087 0 01.012.024l.009.018.009.026c.003.006.003.012.005.018.004.009.006.02.006.033 0 .006.003.012.003.014a.251.251 0 01.003.048V9.32h.006z"/><path d="M11.584 8.622V7.378L10.652 8l.932.622z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/property-24.scss
new file mode 100644
index 0000000000..be5bd7794c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/codepen/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-codepen-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.416 7.378v1.244L5.346 8l-.93-.622zM7.627 6.473V4.738L4.712 6.683l1.302.87 1.613-1.08zM11.285 6.683L8.37 4.738v1.735l1.613 1.08 1.302-.87zM4.712 9.32l2.915 1.942V9.527l-1.613-1.08-1.302.873zM8.37 9.527v1.735l2.915-1.942-1.302-.873-1.613 1.08zM8 7.12L6.683 8 8 8.879 9.314 8 8 7.12z"/><path d="M8 1a7 7 0 10.001 14.001A7 7 0 008 1zm4.327 8.32c0 .018 0 .033-.003.047 0 .006-.003.012-.003.015l-.006.033c-.002.006-.002.012-.005.018l-.01.026-.008.018c-.003.009-.01.018-.012.024a.06.06 0 01-.012.017l-.015.024a.065.065 0 01-.012.015c-.005.006-.011.015-.017.02l-.015.015c-.006.006-.015.012-.02.018-.007.003-.013.009-.019.012-.003 0-.003.003-.005.006l-3.96 2.64a.377.377 0 01-.414 0L3.832 9.631c-.003 0-.003-.003-.006-.006l-.018-.012c-.006-.006-.015-.012-.02-.018l-.016-.014a.129.129 0 01-.017-.021c-.003-.006-.01-.012-.012-.015a.064.064 0 01-.015-.024.062.062 0 00-.012-.017l-.012-.024-.009-.018-.008-.026-.006-.018a.106.106 0 01-.006-.033c0-.006-.003-.012-.003-.015-.003-.014-.003-.032-.003-.047V6.686c0-.018 0-.033.003-.048 0-.005.003-.011.003-.014l.006-.033.006-.018.008-.026.01-.018c.002-.009.008-.018.011-.024a.062.062 0 01.012-.017l.015-.024a.065.065 0 01.012-.015c.006-.006.011-.015.017-.02l.015-.015c.006-.006.015-.012.02-.018.007-.003.013-.01.019-.012.003 0 .003-.003.006-.006L7.79 3.741a.372.372 0 01.411 0l3.958 2.637c.002 0 .002.003.005.006l.018.012.021.018.015.014c.006.006.012.012.018.021l.011.015a.065.065 0 01.015.024.06.06 0 00.012.017.087.087 0 01.012.024l.009.018.009.026c.003.006.003.012.005.018.004.009.006.02.006.033 0 .006.003.012.003.014a.251.251 0 01.003.048V9.32h.006z"/><path d="M11.584 8.622V7.378L10.652 8l.932.622z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/collections/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/collections/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/collections/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/collections/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/collections/keyframes.scss
new file mode 100644
index 0000000000..8dd1aadc6f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/collections/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-collections {
+  50% {
+
+    background-color: var(--icon-color, var(--color-collections-500, currentColor));
+    -webkit-mask-image: var(--icon-collections-24);
+    mask-image: var(--icon-collections-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-collections-500, currentColor));
+    -webkit-mask-image: var(--icon-collections-16);
+    mask-image: var(--icon-collections-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/collections/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/collections/placeholders.scss
new file mode 100644
index 0000000000..12bf68e2e5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/collections/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-collections-icon {
+  --icon-name: icon-collections;
+  content: '';
+}
+%with-collections-mask {
+  --icon-name: icon-collections;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/collections/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/collections/property-16.scss
new file mode 100644
index 0000000000..4be2d4046f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/collections/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-collections-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.05 4.75a.7.7 0 01.7-.7h3.5a.7.7 0 110 1.4h-3.5a.7.7 0 01-.7-.7zM3.75 7.05a.7.7 0 100 1.4h2.5a.7.7 0 100-1.4h-2.5z"/><path fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h6.5c.883 0 1.648.51 2.016 1.25h.984c.698 0 1.3.409 1.582 1h.918c.966 0 1.75.784 1.75 1.75v6a1.75 1.75 0 01-1.75 1.75h-.918c-.281.591-.884 1-1.582 1h-.984A2.25 2.25 0 018.75 15h-6.5A2.25 2.25 0 010 12.75v-9.5zm13.5 8h.75a.25.25 0 00.25-.25V5a.25.25 0 00-.25-.25h-.75v6.5zm-2.5 1v-8.5h.75A.25.25 0 0112 4v8a.25.25 0 01-.25.25H11zM2.25 2.5a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-6.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/collections/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/collections/property-24.scss
new file mode 100644
index 0000000000..ebd2a2c936
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/collections/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-collections-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5 6.75A.75.75 0 015.75 6h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 015 6.75zM5.75 9a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/><path fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h10.5c.854 0 1.617.39 2.121 1h.879c.854 0 1.617.39 2.121 1h.879A2.75 2.75 0 0123 6.75v10.5A2.75 2.75 0 0120.25 20h-.879c-.504.61-1.267 1-2.121 1h-.879c-.504.61-1.267 1-2.121 1H3.75A2.75 2.75 0 011 19.25V4.75zM19.989 18.5h.261c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25h-.261c.007.082.011.166.011.25v12.5c0 .084-.004.168-.011.25zM17 4.75c0-.084-.004-.168-.011-.25h.261c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25h-.261c.007-.082.011-.166.011-.25V4.75zM3.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/command/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/command/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/command/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/command/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/command/keyframes.scss
new file mode 100644
index 0000000000..9fdfbd322c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/command/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-command {
+  50% {
+
+    background-color: var(--icon-color, var(--color-command-500, currentColor));
+    -webkit-mask-image: var(--icon-command-24);
+    mask-image: var(--icon-command-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-command-500, currentColor));
+    -webkit-mask-image: var(--icon-command-16);
+    mask-image: var(--icon-command-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/command/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/command/placeholders.scss
new file mode 100644
index 0000000000..a45486204b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/command/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-command-icon {
+  --icon-name: icon-command;
+  content: '';
+}
+%with-command-mask {
+  --icon-name: icon-command;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/command/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/command/property-16.scss
new file mode 100644
index 0000000000..65f74cb489
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/command/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-command-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.5 3.75V5h3V3.75a2.75 2.75 0 112.75 2.75H11v3h1.25a2.75 2.75 0 11-2.75 2.75V11h-3v1.25A2.75 2.75 0 113.75 9.5H5v-3H3.75A2.75 2.75 0 116.5 3.75zM3.75 2.5a1.25 1.25 0 100 2.5H5V3.75c0-.69-.56-1.25-1.25-1.25zM11 11v1.25A1.25 1.25 0 1012.25 11H11zM9.5 9.5v-3h-3v3h3zM3.75 11H5v1.25A1.25 1.25 0 113.75 11zM11 5h1.25A1.25 1.25 0 1011 3.75V5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/command/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/command/property-24.scss
new file mode 100644
index 0000000000..dd1911b391
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/command/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-command-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.5 5.75V8h5V5.75a3.75 3.75 0 113.75 3.75H16v5h2.25a3.75 3.75 0 11-3.75 3.75V16h-5v2.25a3.75 3.75 0 11-3.75-3.75H8v-5H5.75A3.75 3.75 0 119.5 5.75zM5.75 3.5a2.25 2.25 0 000 4.5H8V5.75A2.25 2.25 0 005.75 3.5zM16 16v2.25A2.25 2.25 0 1018.25 16H16zm-1.5-1.5v-5h-5v5h5zM5.75 16H8v2.25A2.25 2.25 0 115.75 16zM16 8h2.25A2.25 2.25 0 1016 5.75V8z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/compass/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/compass/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/compass/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/compass/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/compass/keyframes.scss
new file mode 100644
index 0000000000..4f657bb918
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/compass/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-compass {
+  50% {
+
+    background-color: var(--icon-color, var(--color-compass-500, currentColor));
+    -webkit-mask-image: var(--icon-compass-24);
+    mask-image: var(--icon-compass-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-compass-500, currentColor));
+    -webkit-mask-image: var(--icon-compass-16);
+    mask-image: var(--icon-compass-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/compass/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/compass/placeholders.scss
new file mode 100644
index 0000000000..b4a299dc28
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/compass/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-compass-icon {
+  --icon-name: icon-compass;
+  content: '';
+}
+%with-compass-mask {
+  --icon-name: icon-compass;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/compass/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/compass/property-16.scss
new file mode 100644
index 0000000000..042898fad1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/compass/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-compass-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.914 4.971a.7.7 0 00-.885-.885L6.154 5.71a.7.7 0 00-.443.443l-1.625 4.875a.7.7 0 00.885.885l4.875-1.625a.7.7 0 00.443-.443l1.625-4.875zm-6.057 5.172l1.071-3.215 3.215-1.071-1.071 3.215-3.215 1.071z"/><path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/compass/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/compass/property-24.scss
new file mode 100644
index 0000000000..4597820d62
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/compass/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-compass-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M16.951 7.997a.75.75 0 00-.948-.948l-6.36 2.12a.75.75 0 00-.474.474l-2.12 6.36a.75.75 0 00.948.948l6.36-2.12a.75.75 0 00.475-.474l2.12-6.36zm-8.005 7.057l1.527-4.581 4.581-1.527-1.527 4.581-4.581 1.527z"/><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/keyframes.scss
new file mode 100644
index 0000000000..479495f0ae
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-connection-gateway {
+  50% {
+
+    background-color: var(--icon-color, var(--color-connection-gateway-500, currentColor));
+    -webkit-mask-image: var(--icon-connection-gateway-24);
+    mask-image: var(--icon-connection-gateway-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-connection-gateway-500, currentColor));
+    -webkit-mask-image: var(--icon-connection-gateway-16);
+    mask-image: var(--icon-connection-gateway-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/placeholders.scss
new file mode 100644
index 0000000000..4b5c4efc46
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-connection-gateway-icon {
+  --icon-name: icon-connection-gateway;
+  content: '';
+}
+%with-connection-gateway-mask {
+  --icon-name: icon-connection-gateway;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/property-16.scss
new file mode 100644
index 0000000000..9c73c65797
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-connection-gateway-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M13.75.5a2.25 2.25 0 00-1.847 3.536l-.933.934a.752.752 0 00-.11.14c-.19-.071-.396-.11-.61-.11h-2.5A1.75 1.75 0 006 6.75v.5H4.372a2.25 2.25 0 100 1.5H6v.5c0 .966.784 1.75 1.75 1.75h2.5c.214 0 .42-.039.61-.11.03.05.067.097.11.14l.933.934a2.25 2.25 0 101.24-.881L12.03 9.97a.75.75 0 00-.14-.11c.071-.19.11-.396.11-.61v-2.5c0-.214-.039-.42-.11-.61a.75.75 0 00.14-.11l1.113-1.113A2.252 2.252 0 0016 2.75 2.25 2.25 0 0013.75.5zM13 2.75a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM7.75 6.5a.25.25 0 00-.25.25v2.5c0 .138.112.25.25.25h2.5a.25.25 0 00.25-.25v-2.5a.25.25 0 00-.25-.25h-2.5zm6 6a.75.75 0 100 1.5.75.75 0 000-1.5zM1.5 8A.75.75 0 113 8a.75.75 0 01-1.5 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/property-24.scss
new file mode 100644
index 0000000000..a115c81918
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/connection-gateway/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-connection-gateway-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M20.5 1.75a3 3 0 00-2.665 4.378l-2.441 2.184A2.24 2.24 0 0014.25 8h-3A2.25 2.25 0 009 10.25V11H6.405a3.001 3.001 0 00-5.905.75 3 3 0 005.905.75H9v.75a2.25 2.25 0 002.25 2.25h3a2.24 2.24 0 001.144-.312l2.44 2.184a3 3 0 101-1.118l-2.476-2.216c.092-.245.142-.51.142-.788v-3c0-.277-.05-.543-.142-.788l2.477-2.216A3 3 0 1020.5 1.75zm-1.5 3a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM11.25 9.5a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-3zm9.25 7.75a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM2 11.75a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/connection/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/connection/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/connection/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/connection/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/connection/keyframes.scss
new file mode 100644
index 0000000000..d3f102f83f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/connection/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-connection {
+  50% {
+
+    background-color: var(--icon-color, var(--color-connection-500, currentColor));
+    -webkit-mask-image: var(--icon-connection-24);
+    mask-image: var(--icon-connection-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-connection-500, currentColor));
+    -webkit-mask-image: var(--icon-connection-16);
+    mask-image: var(--icon-connection-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/connection/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/connection/placeholders.scss
new file mode 100644
index 0000000000..8fb574d90b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/connection/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-connection-icon {
+  --icon-name: icon-connection;
+  content: '';
+}
+%with-connection-mask {
+  --icon-name: icon-connection;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/connection/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/connection/property-16.scss
new file mode 100644
index 0000000000..0f95643917
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/connection/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-connection-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 7.75A3 3 0 015.905 7h4.19a3.001 3.001 0 110 1.5h-4.19A3.001 3.001 0 010 7.75zm3-1.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm10 0a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/connection/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/connection/property-24.scss
new file mode 100644
index 0000000000..827831b3e4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/connection/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-connection-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 11.75A3.5 3.5 0 017.92 11h8.16a3.501 3.501 0 016.92.75 3.5 3.5 0 01-6.92.75H7.92A3.501 3.501 0 011 11.75zm3.5-2a2 2 0 100 4 2 2 0 000-4zm15 0a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/console/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/console/index.scss
new file mode 100644
index 0000000000..ab5e03fee1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/console/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../terminal/property-16';
+        @import '../terminal/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/console/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/console/keyframes.scss
new file mode 100644
index 0000000000..a246e64bb3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/console/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-console {
+  50% {
+
+    background-color: var(--icon-color, var(--color-console-500, currentColor));
+    -webkit-mask-image: var(--icon-terminal-24);
+    mask-image: var(--icon-terminal-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-console-500, currentColor));
+    -webkit-mask-image: var(--icon-terminal-16);
+    mask-image: var(--icon-terminal-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/console/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/console/placeholders.scss
new file mode 100644
index 0000000000..2c63ab6bd0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/console/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-console-icon {
+  --icon-name: icon-console;
+  content: '';
+}
+%with-console-mask {
+  --icon-name: icon-console;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/keyframes.scss
new file mode 100644
index 0000000000..758184922b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-consul-color {
+  50% {
+    background-image: var(--icon-consul-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-consul-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/placeholders.scss
new file mode 100644
index 0000000000..b87af96610
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-consul-color-icon {
+  --icon-name: icon-consul-color;
+  content: '';
+}
+%with-consul-color-mask {
+  --icon-name: icon-consul-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-16.scss
new file mode 100644
index 0000000000..a145e145eb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-consul-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23E03875"><path d="M8.006 15A7 7 0 1112.74 2.85l-1.66 1.738a4.6 4.6 0 100 6.828l1.66 1.737A6.98 6.98 0 018.006 15zM13.638 11.499a.573.573 0 110-1.147.573.573 0 010 1.147z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM14.296 9.544a.574.574 0 110-1.148.574.574 0 010 1.148zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM14.296 7.61a.574.574 0 110-1.147.574.574 0 010 1.147zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.672 5.68a.574.574 0 11-.003-1.147.574.574 0 01.003 1.148z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-24.scss
new file mode 100644
index 0000000000..8d8b74e645
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/consul-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-consul-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23E03875"><path d="M12.009 23a11 11 0 117.442-19.092l-2.61 2.73a7.229 7.229 0 100 10.73l2.61 2.73A10.97 10.97 0 0112.009 23zM20.86 17.498a.901.901 0 110-1.802.901.901 0 010 1.802z"/><path d="M11.939 14.383a2.383 2.383 0 11-.02-4.766 2.383 2.383 0 01.02 4.766zM21.895 14.426a.902.902 0 110-1.805.902.902 0 010 1.805zM19.214 14.313a.902.902 0 110-1.804.902.902 0 010 1.804zM21.895 11.387a.901.901 0 110-1.802.901.901 0 010 1.802zM19.214 11.49a.901.901 0 110-1.803.901.901 0 010 1.803zM20.913 8.355a.901.901 0 11-.004-1.803.901.901 0 01.004 1.803z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/consul/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/consul/index.scss
new file mode 100644
index 0000000000..a38fca4e33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/consul/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../consul-color/property-16';
+        @import '../consul-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/consul/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/consul/keyframes.scss
new file mode 100644
index 0000000000..e67c60042b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/consul/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-consul {
+  50% {
+
+    background-color: var(--icon-color, var(--color-consul-500, currentColor));
+    -webkit-mask-image: var(--icon-consul-color-24);
+    mask-image: var(--icon-consul-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-consul-500, currentColor));
+    -webkit-mask-image: var(--icon-consul-color-16);
+    mask-image: var(--icon-consul-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/consul/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/consul/placeholders.scss
new file mode 100644
index 0000000000..cadb171497
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/consul/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-consul-icon {
+  --icon-name: icon-consul;
+  content: '';
+}
+%with-consul-mask {
+  --icon-name: icon-consul;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-16.scss
new file mode 100644
index 0000000000..8a92821a43
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-consul-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.737 14.193A7 7 0 008.006 15a6.98 6.98 0 004.735-1.847l-1.66-1.737a4.6 4.6 0 110-6.828l1.66-1.738a7 7 0 10-8.004 11.343zM13.32 11.402a.573.573 0 10.637-.953.573.573 0 00-.637.953z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM13.978 9.447a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM13.978 7.514a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.353 5.585a.574.574 0 10.635-.956.574.574 0 00-.635.956z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-24.scss
new file mode 100644
index 0000000000..ccac81c7ac
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/consul/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-consul-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.737 14.193A7 7 0 008.006 15a6.98 6.98 0 004.735-1.847l-1.66-1.737a4.6 4.6 0 110-6.828l1.66-1.738a7 7 0 10-8.004 11.343zM13.32 11.402a.573.573 0 10.637-.953.573.573 0 00-.637.953z"/><path d="M7.96 9.517a1.517 1.517 0 11-.012-3.034 1.517 1.517 0 01.013 3.034zM13.978 9.447a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 9.472a.574.574 0 110-1.148.574.574 0 010 1.148zM13.978 7.514a.574.574 0 10.637-.954.574.574 0 00-.637.954zM12.59 7.675a.574.574 0 110-1.148.574.574 0 010 1.148zM13.353 5.585a.574.574 0 10.635-.956.574.574 0 00-.635.956z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/index.scss
new file mode 100644
index 0000000000..2c72293f75
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../clipboard-copy/property-16';
+        @import '../clipboard-copy/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/keyframes.scss
new file mode 100644
index 0000000000..f89196c186
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-copy-action {
+  50% {
+
+    background-color: var(--icon-color, var(--color-copy-action-500, currentColor));
+    -webkit-mask-image: var(--icon-clipboard-copy-24);
+    mask-image: var(--icon-clipboard-copy-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-copy-action-500, currentColor));
+    -webkit-mask-image: var(--icon-clipboard-copy-16);
+    mask-image: var(--icon-clipboard-copy-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/placeholders.scss
new file mode 100644
index 0000000000..301ca21198
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-action/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-copy-action-icon {
+  --icon-name: icon-copy-action;
+  content: '';
+}
+%with-copy-action-mask {
+  --icon-name: icon-copy-action;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/index.scss
new file mode 100644
index 0000000000..cd1bd1b3ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../clipboard-checked/property-16';
+        @import '../clipboard-checked/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/keyframes.scss
new file mode 100644
index 0000000000..cf60548226
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-copy-success {
+  50% {
+
+    background-color: var(--icon-color, var(--color-copy-success-500, currentColor));
+    -webkit-mask-image: var(--icon-clipboard-checked-24);
+    mask-image: var(--icon-clipboard-checked-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-copy-success-500, currentColor));
+    -webkit-mask-image: var(--icon-clipboard-checked-16);
+    mask-image: var(--icon-clipboard-checked-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/placeholders.scss
new file mode 100644
index 0000000000..0e561fda4b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/copy-success/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-copy-success-icon {
+  --icon-name: icon-copy-success;
+  content: '';
+}
+%with-copy-success-mask {
+  --icon-name: icon-copy-success;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/keyframes.scss
new file mode 100644
index 0000000000..ac1c631256
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-corner-down-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-corner-down-left-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-down-left-24);
+    mask-image: var(--icon-corner-down-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-corner-down-left-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-down-left-16);
+    mask-image: var(--icon-corner-down-left-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/placeholders.scss
new file mode 100644
index 0000000000..90dc579742
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-corner-down-left-icon {
+  --icon-name: icon-corner-down-left;
+  content: '';
+}
+%with-corner-down-left-mask {
+  --icon-name: icon-corner-down-left;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/property-16.scss
new file mode 100644
index 0000000000..be94b1e4d5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-down-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.5 2.75a.75.75 0 00-1.5 0v4.5A1.75 1.75 0 0110.25 9H4.56l2.22-2.22a.75.75 0 00-1.06-1.06l-3.5 3.5a.748.748 0 000 1.06l3.5 3.5a.75.75 0 001.06-1.06L4.56 10.5h5.69a3.25 3.25 0 003.25-3.25v-4.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/property-24.scss
new file mode 100644
index 0000000000..cfbfa1082d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-left/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-down-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M21.5 3.75a.75.75 0 00-1.5 0v7c0 .847-.357 1.669-1.009 2.282A3.639 3.639 0 0116.5 14H5.622l4.146-3.957a.75.75 0 10-1.036-1.086l-5.498 5.25a.748.748 0 00-.002 1.085l5.5 5.25a.75.75 0 101.036-1.085L5.622 15.5H16.5c1.312 0 2.578-.49 3.52-1.375a4.634 4.634 0 001.48-3.375v-7z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/keyframes.scss
new file mode 100644
index 0000000000..c10c6d901f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-corner-down-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-corner-down-right-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-down-right-24);
+    mask-image: var(--icon-corner-down-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-corner-down-right-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-down-right-16);
+    mask-image: var(--icon-corner-down-right-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/placeholders.scss
new file mode 100644
index 0000000000..d6d76f2e33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-corner-down-right-icon {
+  --icon-name: icon-corner-down-right;
+  content: '';
+}
+%with-corner-down-right-mask {
+  --icon-name: icon-corner-down-right;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/property-16.scss
new file mode 100644
index 0000000000..d95a9bc192
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-down-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M2.5 2.75a.75.75 0 011.5 0v4.5A1.75 1.75 0 005.75 9h5.69L9.22 6.78a.75.75 0 011.06-1.06l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06l2.22-2.22H5.75A3.25 3.25 0 012.5 7.25v-4.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/property-24.scss
new file mode 100644
index 0000000000..efc4c478ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-down-right/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-down-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M2.5 3.75a.75.75 0 011.5 0v7c0 .847.357 1.669 1.009 2.282A3.639 3.639 0 007.5 14h10.878l-4.146-3.957a.75.75 0 011.036-1.086l5.498 5.25a.748.748 0 01.002 1.085l-5.5 5.25a.75.75 0 01-1.036-1.085l4.146-3.957H7.5a5.139 5.139 0 01-3.52-1.375A4.634 4.634 0 012.5 10.75v-7z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/keyframes.scss
new file mode 100644
index 0000000000..7accdb92c7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-corner-left-down {
+  50% {
+
+    background-color: var(--icon-color, var(--color-corner-left-down-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-left-down-24);
+    mask-image: var(--icon-corner-left-down-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-corner-left-down-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-left-down-16);
+    mask-image: var(--icon-corner-left-down-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/placeholders.scss
new file mode 100644
index 0000000000..18c8543e88
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-corner-left-down-icon {
+  --icon-name: icon-corner-left-down;
+  content: '';
+}
+%with-corner-left-down-mask {
+  --icon-name: icon-corner-left-down;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/property-16.scss
new file mode 100644
index 0000000000..08132d9b6a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-left-down-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.25 2.5a.75.75 0 010 1.5h-4.5A1.75 1.75 0 007 5.75v5.69l2.22-2.22a.75.75 0 111.06 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-3.5-3.5a.75.75 0 111.06-1.06l2.22 2.22V5.75A3.25 3.25 0 018.75 2.5h4.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/property-24.scss
new file mode 100644
index 0000000000..d729e18e89
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-down/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-left-down-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M20.25 2.5a.75.75 0 010 1.5h-7c-.847 0-1.669.357-2.282 1.009A3.639 3.639 0 0010 7.5v10.878l3.957-4.146a.75.75 0 011.085 1.036l-5.25 5.5a.75.75 0 01-1.085 0l-5.25-5.5a.75.75 0 011.086-1.036L8.5 18.378V7.5c0-1.312.49-2.579 1.375-3.52A4.634 4.634 0 0113.25 2.5h7z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/keyframes.scss
new file mode 100644
index 0000000000..6cb0b78a63
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-corner-left-up {
+  50% {
+
+    background-color: var(--icon-color, var(--color-corner-left-up-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-left-up-24);
+    mask-image: var(--icon-corner-left-up-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-corner-left-up-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-left-up-16);
+    mask-image: var(--icon-corner-left-up-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/placeholders.scss
new file mode 100644
index 0000000000..8b56c6feaa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-corner-left-up-icon {
+  --icon-name: icon-corner-left-up;
+  content: '';
+}
+%with-corner-left-up-mask {
+  --icon-name: icon-corner-left-up;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/property-16.scss
new file mode 100644
index 0000000000..459f5476cd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-left-up-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M9.22 6.78a.75.75 0 101.06-1.06l-3.5-3.5a.75.75 0 00-1.06 0l-3.5 3.5a.75.75 0 001.06 1.06L5.5 4.56v5.69a3.25 3.25 0 003.25 3.25h4.5a.75.75 0 000-1.5h-4.5A1.75 1.75 0 017 10.25V4.56l2.22 2.22z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/property-24.scss
new file mode 100644
index 0000000000..0d8eb289e9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-left-up/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-left-up-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M13.957 9.768a.75.75 0 001.085-1.036l-5.25-5.5a.75.75 0 00-1.085 0l-5.25 5.5a.75.75 0 001.086 1.036L8.5 5.622V16.5c0 1.312.49 2.578 1.375 3.52.887.942 2.1 1.48 3.375 1.48h7a.75.75 0 000-1.5h-7a3.135 3.135 0 01-2.282-1.009A3.639 3.639 0 0110 16.5V5.622l3.957 4.146z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/keyframes.scss
new file mode 100644
index 0000000000..c84808804a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-corner-right-down {
+  50% {
+
+    background-color: var(--icon-color, var(--color-corner-right-down-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-right-down-24);
+    mask-image: var(--icon-corner-right-down-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-corner-right-down-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-right-down-16);
+    mask-image: var(--icon-corner-right-down-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/placeholders.scss
new file mode 100644
index 0000000000..99b5cda49a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-corner-right-down-icon {
+  --icon-name: icon-corner-right-down;
+  content: '';
+}
+%with-corner-right-down-mask {
+  --icon-name: icon-corner-right-down;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/property-16.scss
new file mode 100644
index 0000000000..b527b95d32
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-right-down-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M2.75 2.5a.75.75 0 000 1.5h4.5A1.75 1.75 0 019 5.75v5.69L6.78 9.22a.75.75 0 00-1.06 1.06l3.5 3.5a.75.75 0 001.06 0l3.5-3.5a.75.75 0 10-1.06-1.06l-2.22 2.22V5.75A3.25 3.25 0 007.25 2.5h-4.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/property-24.scss
new file mode 100644
index 0000000000..9ec7622b33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-down/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-right-down-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M3.75 2.5a.75.75 0 000 1.5h7c.847 0 1.669.357 2.282 1.009.615.653.968 1.549.968 2.491v10.878l-3.957-4.146a.75.75 0 00-1.086 1.036l5.25 5.5a.75.75 0 001.085 0l5.25-5.5a.75.75 0 00-1.085-1.036L15.5 18.378V7.5c0-1.312-.49-2.579-1.375-3.52A4.634 4.634 0 0010.75 2.5h-7z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/keyframes.scss
new file mode 100644
index 0000000000..a6cf117939
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-corner-right-up {
+  50% {
+
+    background-color: var(--icon-color, var(--color-corner-right-up-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-right-up-24);
+    mask-image: var(--icon-corner-right-up-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-corner-right-up-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-right-up-16);
+    mask-image: var(--icon-corner-right-up-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/placeholders.scss
new file mode 100644
index 0000000000..62cdb20d6a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-corner-right-up-icon {
+  --icon-name: icon-corner-right-up;
+  content: '';
+}
+%with-corner-right-up-mask {
+  --icon-name: icon-corner-right-up;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/property-16.scss
new file mode 100644
index 0000000000..be32c0f2cb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-right-up-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M6.78 6.78a.75.75 0 01-1.06-1.06l3.5-3.5a.75.75 0 011.06 0l3.5 3.5a.75.75 0 01-1.06 1.06L10.5 4.56v5.69a3.25 3.25 0 01-3.25 3.25h-4.5a.75.75 0 010-1.5h4.5A1.75 1.75 0 009 10.25V4.56L6.78 6.78z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/property-24.scss
new file mode 100644
index 0000000000..74fe1881c2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-right-up/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-right-up-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M10.043 9.768a.75.75 0 11-1.086-1.036l5.25-5.5a.75.75 0 011.085 0l5.25 5.5a.75.75 0 11-1.085 1.036L15.5 5.622V16.5c0 1.312-.49 2.578-1.375 3.52a4.634 4.634 0 01-3.375 1.48h-7a.75.75 0 010-1.5h7c.847 0 1.669-.357 2.282-1.009A3.639 3.639 0 0014 16.5V5.622l-3.957 4.146z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/keyframes.scss
new file mode 100644
index 0000000000..edde3e549c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-corner-up-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-corner-up-left-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-up-left-24);
+    mask-image: var(--icon-corner-up-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-corner-up-left-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-up-left-16);
+    mask-image: var(--icon-corner-up-left-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/placeholders.scss
new file mode 100644
index 0000000000..d45fa29fc3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-corner-up-left-icon {
+  --icon-name: icon-corner-up-left;
+  content: '';
+}
+%with-corner-up-left-mask {
+  --icon-name: icon-corner-up-left;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/property-16.scss
new file mode 100644
index 0000000000..a2bf638cda
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-up-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M6.78 9.22a.75.75 0 11-1.06 1.06l-3.5-3.5a.75.75 0 010-1.06l3.5-3.5a.75.75 0 011.06 1.06L4.56 5.5h5.69a3.25 3.25 0 013.25 3.25v4.5a.75.75 0 01-1.5 0v-4.5A1.75 1.75 0 0010.25 7H4.56l2.22 2.22z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/property-24.scss
new file mode 100644
index 0000000000..bc48909bfc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-left/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-up-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M9.768 13.957a.75.75 0 01-1.036 1.085l-5.5-5.25a.75.75 0 010-1.085l5.5-5.25a.75.75 0 011.036 1.086L5.622 8.5H16.5c1.312 0 2.578.49 3.52 1.375.942.887 1.48 2.1 1.48 3.375v7a.75.75 0 01-1.5 0v-7c0-.847-.357-1.669-1.009-2.282A3.639 3.639 0 0016.5 10H5.622l4.146 3.957z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/keyframes.scss
new file mode 100644
index 0000000000..c8ee6d88d1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-corner-up-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-corner-up-right-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-up-right-24);
+    mask-image: var(--icon-corner-up-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-corner-up-right-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-up-right-16);
+    mask-image: var(--icon-corner-up-right-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/placeholders.scss
new file mode 100644
index 0000000000..c2bef0a447
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-corner-up-right-icon {
+  --icon-name: icon-corner-up-right;
+  content: '';
+}
+%with-corner-up-right-mask {
+  --icon-name: icon-corner-up-right;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/property-16.scss
new file mode 100644
index 0000000000..18bc4dcea9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-up-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M9.22 9.22a.75.75 0 101.06 1.06l3.5-3.5a.75.75 0 000-1.06l-3.5-3.5a.75.75 0 10-1.06 1.06l2.22 2.22H5.75A3.25 3.25 0 002.5 8.75v4.5a.75.75 0 001.5 0v-4.5A1.75 1.75 0 015.75 7h5.69L9.22 9.22z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/property-24.scss
new file mode 100644
index 0000000000..206e022eb6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/corner-up-right/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-corner-up-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M14.232 13.957a.75.75 0 001.036 1.085l5.5-5.25a.75.75 0 000-1.085l-5.5-5.25a.75.75 0 00-1.036 1.086L18.378 8.5H7.5c-1.312 0-2.579.49-3.52 1.375A4.634 4.634 0 002.5 13.25v7a.75.75 0 001.5 0v-7c0-.847.357-1.669 1.009-2.282A3.639 3.639 0 017.5 10h10.878l-4.146 3.957z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/keyframes.scss
new file mode 100644
index 0000000000..af2ffefdd2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-cpu {
+  50% {
+
+    background-color: var(--icon-color, var(--color-cpu-500, currentColor));
+    -webkit-mask-image: var(--icon-cpu-24);
+    mask-image: var(--icon-cpu-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-cpu-500, currentColor));
+    -webkit-mask-image: var(--icon-cpu-16);
+    mask-image: var(--icon-cpu-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/placeholders.scss
new file mode 100644
index 0000000000..9bbf70c5dc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-cpu-icon {
+  --icon-name: icon-cpu;
+  content: '';
+}
+%with-cpu-mask {
+  --icon-name: icon-cpu;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/property-16.scss
new file mode 100644
index 0000000000..c66e4e708f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cpu-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M6.25 5C5.56 5 5 5.56 5 6.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C11 5.56 10.44 5 9.75 5h-3.5zm.25 4.5v-3h3v3h-3z"/><path d="M6.25.05a.7.7 0 01.7.7V2h2.1V.75a.7.7 0 111.4 0V2h1.3A2.25 2.25 0 0114 4.25v1.3h1.25a.7.7 0 110 1.4H14v2.1h1.25a.7.7 0 110 1.4H14v1.3A2.25 2.25 0 0111.75 14h-1.3v1.25a.7.7 0 11-1.4 0V14h-2.1v1.25a.7.7 0 11-1.4 0V14h-1.3A2.25 2.25 0 012 11.75v-1.3H.75a.7.7 0 110-1.4H2v-2.1H.75a.7.7 0 110-1.4H2v-1.3A2.25 2.25 0 014.25 2h1.3V.75a.7.7 0 01.7-.7zM3.5 4.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75v-7.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/property-24.scss
new file mode 100644
index 0000000000..85a9a217ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/cpu/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-cpu-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M9.75 8A1.75 1.75 0 008 9.75v4.5c0 .966.784 1.75 1.75 1.75h4.5A1.75 1.75 0 0016 14.25v-4.5A1.75 1.75 0 0014.25 8h-4.5zM9.5 9.75a.25.25 0 01.25-.25h4.5a.25.25 0 01.25.25v4.5a.25.25 0 01-.25.25h-4.5a.25.25 0 01-.25-.25v-4.5z"/><path d="M9.25 0a.75.75 0 01.75.75V3h4V.75a.75.75 0 011.5 0V3h2.75A2.75 2.75 0 0121 5.75V8.5h2.25a.75.75 0 010 1.5H21v3h2.25a.75.75 0 010 1.5H21v3.75A2.75 2.75 0 0118.25 21H15.5v2.25a.75.75 0 01-1.5 0V21h-4v2.25a.75.75 0 01-1.5 0V21H5.75A2.75 2.75 0 013 18.25V14.5H.75a.75.75 0 010-1.5H3v-3H.75a.75.75 0 010-1.5H3V5.75A2.75 2.75 0 015.75 3H8.5V.75A.75.75 0 019.25 0zM4.5 18.25c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25H5.75c-.69 0-1.25.56-1.25 1.25v12.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/keyframes.scss
new file mode 100644
index 0000000000..c6a4e3a30c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-credit-card {
+  50% {
+
+    background-color: var(--icon-color, var(--color-credit-card-500, currentColor));
+    -webkit-mask-image: var(--icon-credit-card-24);
+    mask-image: var(--icon-credit-card-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-credit-card-500, currentColor));
+    -webkit-mask-image: var(--icon-credit-card-16);
+    mask-image: var(--icon-credit-card-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/placeholders.scss
new file mode 100644
index 0000000000..330b8f323f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-credit-card-icon {
+  --icon-name: icon-credit-card;
+  content: '';
+}
+%with-credit-card-mask {
+  --icon-name: icon-credit-card;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/property-16.scss
new file mode 100644
index 0000000000..8c576bcb8f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-credit-card-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.75 9a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5z"/><path fill-rule="evenodd" d="M0 4.25A2.25 2.25 0 012.25 2h11.5A2.25 2.25 0 0116 4.25v7.5A2.25 2.25 0 0113.75 14H2.25A2.25 2.25 0 010 11.75v-7.5zm14.5 0V5h-13v-.75a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75zm0 2.75h-13v4.75c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75V7z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/property-24.scss
new file mode 100644
index 0000000000..0ab1ba76b4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/credit-card/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-credit-card-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M4.75 15a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"/><path fill-rule="evenodd" d="M0 5.75A2.75 2.75 0 012.75 3h18.5A2.75 2.75 0 0124 5.75v12.5A2.75 2.75 0 0121.25 21H2.75A2.75 2.75 0 010 18.25V5.75zm22.5 0V8h-21V5.75c0-.69.56-1.25 1.25-1.25h18.5c.69 0 1.25.56 1.25 1.25zm0 5.25h-21v7.25c0 .69.56 1.25 1.25 1.25h18.5c.69 0 1.25-.56 1.25-1.25V11z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/crop/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/crop/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/crop/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/crop/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/crop/keyframes.scss
new file mode 100644
index 0000000000..fb62f3807d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/crop/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-crop {
+  50% {
+
+    background-color: var(--icon-color, var(--color-crop-500, currentColor));
+    -webkit-mask-image: var(--icon-crop-24);
+    mask-image: var(--icon-crop-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-crop-500, currentColor));
+    -webkit-mask-image: var(--icon-crop-16);
+    mask-image: var(--icon-crop-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/crop/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/crop/placeholders.scss
new file mode 100644
index 0000000000..1b6863646b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/crop/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-crop-icon {
+  --icon-name: icon-crop;
+  content: '';
+}
+%with-crop-mask {
+  --icon-name: icon-crop;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/crop/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/crop/property-16.scss
new file mode 100644
index 0000000000..43da401144
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/crop/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-crop-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.5 1.25a.75.75 0 00-1.5 0V3H1.25a.75.75 0 000 1.5H3v6.456A2.044 2.044 0 005.044 13H11.5v1.75a.75.75 0 001.5 0V13h1.75a.75.75 0 000-1.5H13V5.044A2.044 2.044 0 0010.956 3H4.5V1.25zm0 3.25v6.456a.544.544 0 00.544.544H11.5V5.044a.544.544 0 00-.544-.544H4.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/crop/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/crop/property-24.scss
new file mode 100644
index 0000000000..bef19cd3dc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/crop/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-crop-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M6.5 1.25a.75.75 0 00-1.5 0V5H1.25a.75.75 0 000 1.5H5v9.75A2.75 2.75 0 007.75 19h9.75v3.75a.75.75 0 001.5 0V19h3.75a.75.75 0 000-1.5H19V7.75A2.75 2.75 0 0016.25 5H6.5V1.25zm0 5.25v9.75a1.25 1.25 0 001.25 1.25h9.75V7.75a1.25 1.25 0 00-1.25-1.25H6.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/keyframes.scss
new file mode 100644
index 0000000000..26d7eebf4d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-crosshair {
+  50% {
+
+    background-color: var(--icon-color, var(--color-crosshair-500, currentColor));
+    -webkit-mask-image: var(--icon-crosshair-24);
+    mask-image: var(--icon-crosshair-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-crosshair-500, currentColor));
+    -webkit-mask-image: var(--icon-crosshair-16);
+    mask-image: var(--icon-crosshair-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/placeholders.scss
new file mode 100644
index 0000000000..dc0b27d066
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-crosshair-icon {
+  --icon-name: icon-crosshair;
+  content: '';
+}
+%with-crosshair-mask {
+  --icon-name: icon-crosshair;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/property-16.scss
new file mode 100644
index 0000000000..582848c8bf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-crosshair-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8.75 6.457V12.75a.75.75 0 00-1.5 0v1.707A6.503 6.503 0 011.543 8.75H3.25a.75.75 0 000-1.5H1.543A6.503 6.503 0 017.25 1.543V3.25a.75.75 0 001.5 0V1.543a6.503 6.503 0 015.707 5.707H12.75a.75.75 0 000 1.5h1.707a6.503 6.503 0 01-5.707 5.707z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/property-24.scss
new file mode 100644
index 0000000000..f1727466dc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/crosshair/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-crosshair-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11.75 9.47v-2.72a.75.75 0 00-1.5 0v2.72a9.502 9.502 0 01-8.72-8.72h2.72a.75.75 0 000-1.5H2.53a9.502 9.502 0 018.72-8.72v2.72a.75.75 0 001.5 0V2.53a9.502 9.502 0 018.72 8.72h-2.72a.75.75 0 000 1.5h2.72a9.502 9.502 0 01-8.72 8.72z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/keyframes.scss
new file mode 100644
index 0000000000..63aebfe8ed
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-dashboard {
+  50% {
+
+    background-color: var(--icon-color, var(--color-dashboard-500, currentColor));
+    -webkit-mask-image: var(--icon-dashboard-24);
+    mask-image: var(--icon-dashboard-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-dashboard-500, currentColor));
+    -webkit-mask-image: var(--icon-dashboard-16);
+    mask-image: var(--icon-dashboard-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/placeholders.scss
new file mode 100644
index 0000000000..150689340a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-dashboard-icon {
+  --icon-name: icon-dashboard;
+  content: '';
+}
+%with-dashboard-mask {
+  --icon-name: icon-dashboard;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/property-16.scss
new file mode 100644
index 0000000000..e05a380f8c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-dashboard-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M1 2.25C1 1.56 1.56 1 2.25 1h3.5C6.44 1 7 1.56 7 2.25v11.5C7 14.44 6.44 15 5.75 15h-3.5C1.56 15 1 14.44 1 13.75V2.25zm1.5.25v11h3v-11h-3zM9 2.25C9 1.56 9.56 1 10.25 1h3.5c.69 0 1.25.56 1.25 1.25v3.5C15 6.44 14.44 7 13.75 7h-3.5C9.56 7 9 6.44 9 5.75v-3.5zm1.5.25v3h3v-3h-3zM10.25 9C9.56 9 9 9.56 9 10.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C15 9.56 14.44 9 13.75 9h-3.5zm.25 4.5v-3h3v3h-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/property-24.scss
new file mode 100644
index 0000000000..8f45f0a368
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dashboard/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-dashboard-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2 3.75C2 2.784 2.784 2 3.75 2h5.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 019.25 22h-5.5A1.75 1.75 0 012 20.25V3.75zm1.75-.25a.25.25 0 00-.25.25v16.5c0 .138.112.25.25.25h5.5a.25.25 0 00.25-.25V3.75a.25.25 0 00-.25-.25h-5.5zM13 3.75c0-.966.784-1.75 1.75-1.75h5.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0120.25 11h-5.5A1.75 1.75 0 0113 9.25v-5.5zm1.75-.25a.25.25 0 00-.25.25v5.5c0 .138.112.25.25.25h5.5a.25.25 0 00.25-.25v-5.5a.25.25 0 00-.25-.25h-5.5zM14.75 13A1.75 1.75 0 0013 14.75v5.5c0 .966.784 1.75 1.75 1.75h5.5A1.75 1.75 0 0022 20.25v-5.5A1.75 1.75 0 0020.25 13h-5.5zm-.25 1.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-5.5a.25.25 0 01-.25-.25v-5.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/database/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/database/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/database/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/database/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/database/keyframes.scss
new file mode 100644
index 0000000000..67417f2e31
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/database/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-database {
+  50% {
+
+    background-color: var(--icon-color, var(--color-database-500, currentColor));
+    -webkit-mask-image: var(--icon-database-24);
+    mask-image: var(--icon-database-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-database-500, currentColor));
+    -webkit-mask-image: var(--icon-database-16);
+    mask-image: var(--icon-database-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/database/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/database/placeholders.scss
new file mode 100644
index 0000000000..32cf2d9587
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/database/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-database-icon {
+  --icon-name: icon-database;
+  content: '';
+}
+%with-database-mask {
+  --icon-name: icon-database;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/database/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/database/property-16.scss
new file mode 100644
index 0000000000..d30d0f985b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/database/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-database-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.352 1.621C4.575 1.23 6.218 1 8 1c1.782 0 3.425.23 4.648.621.607.195 1.153.442 1.563.752.398.301.789.76.789 1.377v8.5c0 .616-.386 1.074-.784 1.376-.41.311-.954.559-1.56.753C11.435 14.771 9.791 15 8 15c-1.791 0-3.435-.23-4.656-.62-.606-.195-1.15-.443-1.56-.754-.398-.302-.784-.76-.784-1.376v-8.5c0-.618.39-1.076.789-1.377.41-.31.956-.557 1.563-.752zM2.509 3.75a.738.738 0 01.185-.18c.222-.169.591-.352 1.115-.52C4.848 2.718 6.33 2.5 8 2.5c1.67 0 3.152.218 4.19.55.524.168.894.351 1.116.52a.74.74 0 01.185.18.74.74 0 01-.185.18c-.222.169-.591.352-1.115.52C11.152 4.782 9.67 5 8 5c-1.67 0-3.152-.218-4.19-.55-.525-.168-.894-.351-1.116-.52a.738.738 0 01-.185-.18zM2.5 9.723v2.511c.01.021.049.09.192.198.22.168.588.351 1.11.519 1.035.332 2.517.549 4.198.549 1.681 0 3.162-.217 4.198-.55.522-.166.89-.35 1.11-.518.143-.109.183-.177.192-.198V9.723c-.272.113-.57.21-.88.292-1.215.322-2.848.485-4.62.485-1.772 0-3.405-.163-4.62-.485a6.903 6.903 0 01-.88-.292zm11-1.746a.591.591 0 01-.163.145c-.213.146-.575.303-1.102.443C11.192 8.841 9.7 9 8 9c-1.7 0-3.192-.159-4.235-.435-.527-.14-.889-.297-1.102-.443a.59.59 0 01-.163-.145v-2.43c.263.125.55.235.852.332C4.575 6.27 6.218 6.5 8 6.5c1.782 0 3.425-.23 4.648-.621.302-.097.59-.207.852-.331v2.429z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/database/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/database/property-24.scss
new file mode 100644
index 0000000000..fb6a75232e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/database/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-database-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M22 5.75c0-.751-.47-1.34-1.02-1.763-.563-.43-1.329-.787-2.208-1.072C17.005 2.342 14.611 2 12 2c-2.61 0-5.005.342-6.772.915-.88.285-1.646.641-2.207 1.072C2.469 4.41 2 5 2 5.75v12.412c0 .752.454 1.352 1.006 1.79.56.445 1.325.812 2.204 1.106 1.766.59 4.163.942 6.79.942s5.024-.352 6.79-.942c.88-.294 1.644-.66 2.204-1.105.552-.439 1.006-1.039 1.006-1.791V5.75zM3.933 5.177c-.385.296-.433.496-.433.573 0 .077.048.277.433.573.374.286.963.577 1.758.835C7.27 7.67 9.502 8 12 8s4.729-.33 6.31-.842c.794-.258 1.383-.549 1.757-.835.385-.296.433-.496.433-.573 0-.077-.048-.277-.433-.573-.375-.286-.963-.577-1.758-.835C16.73 3.83 14.498 3.5 12 3.5s-4.729.33-6.31.842c-.794.258-1.383.549-1.757.835zM20.5 7.835c-.49.29-1.078.539-1.728.75-1.767.573-4.161.915-6.772.915-2.61 0-5.005-.342-6.772-.915-.65-.211-1.238-.46-1.728-.75v3.915c0 .08.05.281.43.575.372.287.957.577 1.75.834C7.256 13.671 9.486 14 12 14c2.514 0 4.744-.329 6.32-.84.793-.258 1.378-.549 1.75-.835.38-.294.43-.495.43-.575V7.835zm0 6.005c-.486.288-1.07.536-1.716.746-1.764.573-4.159.914-6.784.914s-5.02-.341-6.784-.914c-.646-.21-1.23-.458-1.716-.746v4.322c0 .102.06.315.439.616.371.295.956.593 1.747.857 1.574.527 3.802.865 6.314.865s4.74-.338 6.314-.865c.791-.264 1.376-.563 1.747-.857.379-.3.439-.514.439-.616V13.84z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/delay/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/delay/index.scss
new file mode 100644
index 0000000000..31e524d9fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/delay/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../delay/property-16';
+        @import '../delay/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/delay/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/delay/keyframes.scss
new file mode 100644
index 0000000000..13c1fef928
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/delay/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-delay {
+  50% {
+
+    background-color: var(--icon-color, var(--color-delay-500, currentColor));
+    -webkit-mask-image: var(--icon-delay-24);
+    mask-image: var(--icon-delay-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-delay-500, currentColor));
+    -webkit-mask-image: var(--icon-delay-16);
+    mask-image: var(--icon-delay-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/delay/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/delay/placeholders.scss
new file mode 100644
index 0000000000..f50a355e6e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/delay/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-delay-icon {
+  --icon-name: icon-delay;
+  content: '';
+}
+%with-delay-mask {
+  --icon-name: icon-delay;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/delay/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/delay/property-16.scss
new file mode 100644
index 0000000000..c2f4838e8b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/delay/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-delay-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.5 8a6.5 6.5 0 016.744-6.496.75.75 0 10.055-1.499 8 8 0 107.036 11.193.75.75 0 00-1.375-.6 6.722 6.722 0 01-.22.453A6.5 6.5 0 011.5 8zM10.726 1.238a.75.75 0 011.013-.312c.177.094.35.194.518.3a.75.75 0 01-.799 1.27 6.512 6.512 0 00-.42-.244.75.75 0 01-.312-1.014zM13.74 3.508a.75.75 0 011.034.235c.106.168.206.34.3.518a.75.75 0 11-1.326.702 6.452 6.452 0 00-.243-.421.75.75 0 01.235-1.034zM15.217 6.979a.75.75 0 01.777.722 8.034 8.034 0 01.002.552.75.75 0 01-1.5-.047 6.713 6.713 0 000-.45.75.75 0 01.721-.777z"/><path d="M7.75 3a.75.75 0 01.75.75v3.786l2.085 1.043a.75.75 0 11-.67 1.342l-2.5-1.25A.75.75 0 017 8V3.75A.75.75 0 017.75 3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/delay/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/delay/property-24.scss
new file mode 100644
index 0000000000..4cae14ce28
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/delay/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-delay-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 2.5a9.5 9.5 0 100 19 9.5 9.5 0 008.747-5.788.75.75 0 111.382.583c-.072.17-.148.338-.23.506v.002A11 11 0 0112 23C5.925 23 1 18.075 1 12S5.925 1 12 1c.186 0 .371.005.555.014a.75.75 0 01-.079 1.498A9.14 9.14 0 0012 2.5zM14.822 2.136a.75.75 0 01.971-.427c.346.135.683.287 1.01.455a.75.75 0 01-.687 1.334 9.08 9.08 0 00-.866-.39.75.75 0 01-.428-.972zM18.414 4.112a.75.75 0 011.06-.011c.263.257.513.527.749.807a.75.75 0 11-1.147.966 10.025 10.025 0 00-.651-.702.75.75 0 01-.01-1.06zM20.977 7.315a.75.75 0 01.99.381c.149.335.282.677.398 1.026a.75.75 0 11-1.422.476c-.102-.303-.218-.601-.347-.893a.75.75 0 01.38-.99zM22.174 11.239a.75.75 0 01.768.73c.01.368 0 .737-.029 1.107a.75.75 0 01-1.495-.118c.025-.317.033-.634.025-.95a.75.75 0 01.73-.77z"/><path d="M12.5 5.75a.75.75 0 00-1.5 0V12c0 .284.16.544.415.67l4.5 2.25a.75.75 0 10.67-1.34L12.5 11.536V5.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/delete/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/delete/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/delete/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/delete/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/delete/keyframes.scss
new file mode 100644
index 0000000000..edf768bdd6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/delete/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-delete {
+  50% {
+
+    background-color: var(--icon-color, var(--color-delete-500, currentColor));
+    -webkit-mask-image: var(--icon-delete-24);
+    mask-image: var(--icon-delete-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-delete-500, currentColor));
+    -webkit-mask-image: var(--icon-delete-16);
+    mask-image: var(--icon-delete-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/delete/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/delete/placeholders.scss
new file mode 100644
index 0000000000..5474c1e651
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/delete/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-delete-icon {
+  --icon-name: icon-delete;
+  content: '';
+}
+%with-delete-mask {
+  --icon-name: icon-delete;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/delete/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/delete/property-16.scss
new file mode 100644
index 0000000000..71ea861fe0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/delete/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-delete-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.78 5.22a.75.75 0 010 1.06L10.06 8l1.72 1.72a.75.75 0 11-1.06 1.06L9 9.06l-1.72 1.72a.75.75 0 11-1.06-1.06L7.94 8 6.22 6.28a.75.75 0 011.06-1.06L9 6.94l1.72-1.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M4.393 2.61A1.75 1.75 0 015.72 2h8.03A2.25 2.25 0 0116 4.25v7.5A2.25 2.25 0 0113.75 14H5.72a1.75 1.75 0 01-1.327-.61L.181 8.49a.75.75 0 010-.978L4.393 2.61zm1.327.89a.25.25 0 00-.19.087L1.74 8l3.792 4.413a.25.25 0 00.19.087h8.029a.75.75 0 00.75-.75v-7.5a.75.75 0 00-.75-.75H5.72z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/delete/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/delete/property-24.scss
new file mode 100644
index 0000000000..c878401e7d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/delete/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-delete-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.22 8.22a.75.75 0 011.06 0L15 10.94l2.72-2.72a.75.75 0 111.06 1.06L16.06 12l2.72 2.72a.75.75 0 11-1.06 1.06L15 13.06l-2.72 2.72a.75.75 0 11-1.06-1.06L13.94 12l-2.72-2.72a.75.75 0 010-1.06z"/><path fill-rule="evenodd" d="M6.579 3.97A2.75 2.75 0 018.676 3H21.25A2.75 2.75 0 0124 5.75v12.5A2.75 2.75 0 0121.25 21H8.676a2.75 2.75 0 01-2.097-.97l-6.4-7.545a.75.75 0 010-.97l6.4-7.544zm2.097.53a1.25 1.25 0 00-.953.441L1.733 12l5.99 7.059c.237.28.586.441.953.441H21.25c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25H8.676z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/index.scss
new file mode 100644
index 0000000000..fc60a239bd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../skip/property-16';
+        @import '../skip/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/keyframes.scss
new file mode 100644
index 0000000000..82b82d66bc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-deny-alt {
+  50% {
+
+    background-color: var(--icon-color, var(--color-deny-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-24);
+    mask-image: var(--icon-skip-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-deny-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-16);
+    mask-image: var(--icon-skip-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/placeholders.scss
new file mode 100644
index 0000000000..83b73d0ef9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-alt/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-deny-alt-icon {
+  --icon-name: icon-deny-alt;
+  content: '';
+}
+%with-deny-alt-mask {
+  --icon-name: icon-deny-alt;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/keyframes.scss
new file mode 100644
index 0000000000..3ef5c7efe9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-deny-color {
+  50% {
+    background-image: var(--icon-deny-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-deny-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/placeholders.scss
new file mode 100644
index 0000000000..5ac7d63b76
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-deny-color-icon {
+  --icon-name: icon-deny-color;
+  content: '';
+}
+%with-deny-color-mask {
+  --icon-name: icon-deny-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/property-16.scss
new file mode 100644
index 0000000000..e804717a3f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-deny-color-16: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 16 " xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/property-24.scss
new file mode 100644
index 0000000000..3f3e9e2b1b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-deny-color-24: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 16 " xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/index.scss
new file mode 100644
index 0000000000..fc60a239bd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../skip/property-16';
+        @import '../skip/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/keyframes.scss
new file mode 100644
index 0000000000..fbaf628676
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-deny-default {
+  50% {
+
+    background-color: var(--icon-color, var(--color-deny-default-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-24);
+    mask-image: var(--icon-skip-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-deny-default-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-16);
+    mask-image: var(--icon-skip-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/placeholders.scss
new file mode 100644
index 0000000000..2f7f06e707
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/deny-default/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-deny-default-icon {
+  --icon-name: icon-deny-default;
+  content: '';
+}
+%with-deny-default-mask {
+  --icon-name: icon-deny-default;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/keyframes.scss
new file mode 100644
index 0000000000..0a7603c368
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-diamond-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-diamond-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-diamond-fill-24);
+    mask-image: var(--icon-diamond-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-diamond-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-diamond-fill-16);
+    mask-image: var(--icon-diamond-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/placeholders.scss
new file mode 100644
index 0000000000..a920d2ffd8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-diamond-fill-icon {
+  --icon-name: icon-diamond-fill;
+  content: '';
+}
+%with-diamond-fill-mask {
+  --icon-name: icon-diamond-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/property-16.scss
new file mode 100644
index 0000000000..0a1945fff1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-diamond-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M6.407.753L.75 6.409a2.25 2.25 0 000 3.182l5.657 5.657a2.25 2.25 0 003.182 0l5.657-5.657a2.25 2.25 0 000-3.182L9.589.753a2.25 2.25 0 00-3.182 0z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/property-24.scss
new file mode 100644
index 0000000000..bceb7a6044
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-diamond-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M10.056 1.924l-8.132 8.132a2.75 2.75 0 000 3.889l8.132 8.131a2.75 2.75 0 003.889 0l8.131-8.131a2.75 2.75 0 000-3.89l-8.131-8.13a2.75 2.75 0 00-3.89 0z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/keyframes.scss
new file mode 100644
index 0000000000..96d5d743e4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-diamond {
+  50% {
+
+    background-color: var(--icon-color, var(--color-diamond-500, currentColor));
+    -webkit-mask-image: var(--icon-diamond-24);
+    mask-image: var(--icon-diamond-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-diamond-500, currentColor));
+    -webkit-mask-image: var(--icon-diamond-16);
+    mask-image: var(--icon-diamond-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/placeholders.scss
new file mode 100644
index 0000000000..c2640d8a5b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-diamond-icon {
+  --icon-name: icon-diamond;
+  content: '';
+}
+%with-diamond-mask {
+  --icon-name: icon-diamond;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/property-16.scss
new file mode 100644
index 0000000000..11525f72bf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-diamond-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.468 1.813L1.81 7.47a.75.75 0 000 1.06l5.657 5.657a.75.75 0 001.06 0l5.657-5.656a.75.75 0 000-1.061L8.528 1.813a.75.75 0 00-1.06 0zM.75 6.41L6.407.753a2.25 2.25 0 013.182 0l5.657 5.656a2.25 2.25 0 010 3.182l-5.657 5.657a2.25 2.25 0 01-3.182 0L.75 9.591a2.25 2.25 0 010-3.182z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/property-24.scss
new file mode 100644
index 0000000000..c5baa14045
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/diamond/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-diamond-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M11.116 2.985l-8.131 8.132a1.25 1.25 0 000 1.767l8.131 8.132a1.25 1.25 0 001.768 0l8.132-8.132a1.25 1.25 0 000-1.768l-8.132-8.131a1.25 1.25 0 00-1.768 0zm-9.192 7.07l8.132-8.13a2.75 2.75 0 013.889 0l8.131 8.13a2.75 2.75 0 010 3.89l-8.131 8.131a2.75 2.75 0 01-3.89 0l-8.131-8.131a2.75 2.75 0 010-3.89z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/disabled/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/disabled/index.scss
new file mode 100644
index 0000000000..fc60a239bd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/disabled/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../skip/property-16';
+        @import '../skip/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/disabled/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/disabled/keyframes.scss
new file mode 100644
index 0000000000..1eaec05f14
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/disabled/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-disabled {
+  50% {
+
+    background-color: var(--icon-color, var(--color-disabled-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-24);
+    mask-image: var(--icon-skip-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-disabled-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-16);
+    mask-image: var(--icon-skip-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/disabled/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/disabled/placeholders.scss
new file mode 100644
index 0000000000..efce6e128b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/disabled/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-disabled-icon {
+  --icon-name: icon-disabled;
+  content: '';
+}
+%with-disabled-mask {
+  --icon-name: icon-disabled;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/disc/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/disc/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/disc/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/disc/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/disc/keyframes.scss
new file mode 100644
index 0000000000..a9dad30bda
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/disc/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-disc {
+  50% {
+
+    background-color: var(--icon-color, var(--color-disc-500, currentColor));
+    -webkit-mask-image: var(--icon-disc-24);
+    mask-image: var(--icon-disc-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-disc-500, currentColor));
+    -webkit-mask-image: var(--icon-disc-16);
+    mask-image: var(--icon-disc-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/disc/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/disc/placeholders.scss
new file mode 100644
index 0000000000..622f9fe7ca
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/disc/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-disc-icon {
+  --icon-name: icon-disc;
+  content: '';
+}
+%with-disc-mask {
+  --icon-name: icon-disc;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/disc/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/disc/property-16.scss
new file mode 100644
index 0000000000..22e6d13d62
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/disc/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-disc-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 5.05a2.95 2.95 0 100 5.9 2.95 2.95 0 000-5.9zM6.45 8a1.55 1.55 0 113.1 0 1.55 1.55 0 01-3.1 0z"/><path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/disc/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/disc/property-24.scss
new file mode 100644
index 0000000000..9d4158a52e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/disc/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-disc-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm-2.5 4a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"/><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/keyframes.scss
new file mode 100644
index 0000000000..c46d20efaa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-discussion-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-discussion-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-discussion-circle-24);
+    mask-image: var(--icon-discussion-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-discussion-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-discussion-circle-16);
+    mask-image: var(--icon-discussion-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/placeholders.scss
new file mode 100644
index 0000000000..a57a697c8c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-discussion-circle-icon {
+  --icon-name: icon-discussion-circle;
+  content: '';
+}
+%with-discussion-circle-mask {
+  --icon-name: icon-discussion-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/property-16.scss
new file mode 100644
index 0000000000..6e25b059ab
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-discussion-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.302 3.288A3.633 3.633 0 002.756 7.76c.124.237.112.49.102.61a2.984 2.984 0 01-.084.468 7.853 7.853 0 01-.2.655c.26-.09.52-.17.75-.223a.7.7 0 11.312 1.365c-.34.078-.837.258-1.278.434a23.211 23.211 0 00-.701.295l-.042.018-.01.005-.003.001a.7.7 0 01-.925-.927v-.001l.002-.004.008-.018.03-.07a21.252 21.252 0 00.43-1.047c.113-.3.211-.592.27-.822.021-.09.034-.157.041-.205a5.033 5.033 0 017.74-6.082.7.7 0 11-.896 1.076zM1.463 8.226v0z"/><path d="M4.75 9.333a5.083 5.083 0 119.657 2.221c.006.033.015.077.03.133.05.197.139.453.247.734.087.223.178.443.262.646l.06.146c.049.118.095.23.131.326.03.082.074.2.097.306a.75.75 0 01-.734.905c-.169 0-.332-.04-.447-.072a4.853 4.853 0 01-.394-.134 21.027 21.027 0 01-.606-.248l-.216-.09a7.645 7.645 0 00-.705-.265 1.763 1.763 0 00-.095-.026A5.083 5.083 0 014.75 9.333zm1.5 0a3.583 3.583 0 116.764 1.654c-.125.239-.12.485-.11.614.01.155.042.313.078.456.055.214.133.448.217.676a7.367 7.367 0 00-.643-.231 2.455 2.455 0 00-.443-.093 1.113 1.113 0 00-.626.104 3.583 3.583 0 01-5.237-3.18zm8.15 2.16v-.012l-.001.004v.009z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/property-24.scss
new file mode 100644
index 0000000000..587ff4b295
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-discussion-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M13.02 4.827a5.75 5.75 0 00-8.777 7.077c.144.275.134.58.12.751a4.182 4.182 0 01-.118.655 13.903 13.903 0 01-.512 1.557c.563-.214 1.188-.429 1.694-.545a.75.75 0 11.335 1.463c-.535.122-1.3.401-1.961.666a34.515 34.515 0 00-1.061.445l-.065.029-.016.007-.004.002h-.001a.75.75 0 01-.99-.994v-.002l.003-.006.012-.027a20.233 20.233 0 00.214-.49c.137-.322.316-.755.484-1.204.17-.453.323-.903.413-1.265.046-.183.07-.32.078-.413l.001-.022a7.25 7.25 0 0111.11-8.837.75.75 0 01-.958 1.153z"/><path d="M21.781 20.78a.75.75 0 00.152-.84l-.004-.008-.012-.027a20.257 20.257 0 01-.214-.49 30.272 30.272 0 01-.484-1.204c-.17-.453-.322-.903-.413-1.265a2.76 2.76 0 01-.077-.414l-.002-.021a7.25 7.25 0 10-3.22 3.219h.018c.092.009.23.033.413.08.363.09.814.243 1.268.413a31.27 31.27 0 011.595.649l.106.046.027.012.008.004a.75.75 0 00.84-.155zm-13.28-7.53a5.75 5.75 0 1110.852 2.653c-.144.276-.134.58-.12.752.018.208.063.434.118.655a13.896 13.896 0 00.512 1.557 14.298 14.298 0 00-1.56-.512c-.218-.056-.443-.101-.649-.119-.167-.014-.474-.028-.75.117A5.75 5.75 0 018.5 13.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/keyframes.scss
new file mode 100644
index 0000000000..1933614c30
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-discussion-square {
+  50% {
+
+    background-color: var(--icon-color, var(--color-discussion-square-500, currentColor));
+    -webkit-mask-image: var(--icon-discussion-square-24);
+    mask-image: var(--icon-discussion-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-discussion-square-500, currentColor));
+    -webkit-mask-image: var(--icon-discussion-square-16);
+    mask-image: var(--icon-discussion-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/placeholders.scss
new file mode 100644
index 0000000000..5fc32bcb81
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-discussion-square-icon {
+  --icon-name: icon-discussion-square;
+  content: '';
+}
+%with-discussion-square-mask {
+  --icon-name: icon-discussion-square;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/property-16.scss
new file mode 100644
index 0000000000..5ebb509ef6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-discussion-square-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.25 1a.75.75 0 010 1.5h-9a.75.75 0 00-.75.75v6.531l.706-.51a.75.75 0 01.88 1.214L1.19 11.858A.75.75 0 010 11.25v-8A2.25 2.25 0 012.25 1h9z"/><path fill-rule="evenodd" d="M6.25 4A2.25 2.25 0 004 6.25v4.534a2.25 2.25 0 002.25 2.25h6.041l2.52 1.824A.75.75 0 0016 14.25v-8A2.25 2.25 0 0013.75 4h-7.5zM5.5 6.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v6.531l-1.526-1.104a.75.75 0 00-.44-.143H6.25a.75.75 0 01-.75-.75V6.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/property-24.scss
new file mode 100644
index 0000000000..0ddcaf70a3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/discussion-square/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-discussion-square-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.25 2A2.75 2.75 0 0117 4.75v.5a.75.75 0 01-1.5 0v-.5c0-.69-.56-1.25-1.25-1.25H3.75c-.69 0-1.25.56-1.25 1.25v10.94l2.531-2.026a.75.75 0 01.938 1.172l-3.75 3A.75.75 0 011 17.25V4.75A2.75 2.75 0 013.75 2h10.5z"/><path fill-rule="evenodd" d="M9.75 7A2.75 2.75 0 007 9.75v7.5A2.75 2.75 0 009.75 20h8.048c.284 0 .56.097.781.274l3.203 2.562A.75.75 0 0023 22.25V9.75A2.75 2.75 0 0020.25 7H9.75zM8.5 9.75c0-.69.56-1.25 1.25-1.25h10.5c.69 0 1.25.56 1.25 1.25v10.94l-1.984-1.587a2.75 2.75 0 00-1.718-.603H9.75c-.69 0-1.25-.56-1.25-1.25v-7.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/keyframes.scss
new file mode 100644
index 0000000000..727a2e1539
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-docker-color {
+  50% {
+    background-image: var(--icon-docker-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-docker-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/placeholders.scss
new file mode 100644
index 0000000000..6ca6bf107a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-docker-color-icon {
+  --icon-name: icon-docker-color;
+  content: '';
+}
+%with-docker-color-mask {
+  --icon-name: icon-docker-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/property-16.scss
new file mode 100644
index 0000000000..e5983ae013
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-docker-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%232396ED" d="M12.342 4.536l.15-.227.262.159.116.083c.28.216.869.768.996 1.684.223-.04.448-.06.673-.06.534 0 .893.124 1.097.227l.105.057.068.045.191.156-.066.2a2.044 2.044 0 01-.47.73c-.29.299-.8.652-1.609.698l-.178.005h-.148c-.37.977-.867 2.078-1.702 3.066a7.081 7.081 0 01-1.74 1.488 7.941 7.941 0 01-2.549.968c-.644.125-1.298.187-1.953.185-1.45 0-2.73-.288-3.517-.792-.703-.449-1.243-1.182-1.606-2.177a8.25 8.25 0 01-.461-2.83.516.516 0 01.432-.516l.068-.005h10.54l.092-.007.149-.016c.256-.034.646-.11.92-.27-.328-.543-.421-1.178-.268-1.854a3.3 3.3 0 01.3-.81l.108-.187zM2.89 5.784l.04.007a.127.127 0 01.077.082l.006.04v1.315l-.006.041a.127.127 0 01-.078.082l-.039.006H1.478a.124.124 0 01-.117-.088l-.007-.04V5.912l.007-.04a.127.127 0 01.078-.083l.039-.006H2.89zm1.947 0l.039.007a.127.127 0 01.078.082l.006.04v1.315l-.007.041a.127.127 0 01-.078.082l-.039.006H3.424a.125.125 0 01-.117-.088L3.3 7.23V5.913a.13.13 0 01.085-.123l.039-.007h1.413zm1.976 0l.039.007a.127.127 0 01.077.082l.007.04v1.315l-.007.041a.127.127 0 01-.078.082l-.039.006H5.4a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.039-.006h1.413zm1.952 0l.039.007a.127.127 0 01.078.082l.007.04v1.315a.13.13 0 01-.085.123l-.04.006H7.353a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.04-.006h1.412zm1.97 0l.039.007a.127.127 0 01.078.082l.006.04v1.315a.13.13 0 01-.085.123l-.039.006H9.322a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.04-.006h1.411zM4.835 3.892l.04.007a.127.127 0 01.077.081l.007.041v1.315a.13.13 0 01-.085.123l-.039.007H3.424a.125.125 0 01-.117-.09l-.007-.04V4.021a.13.13 0 01.085-.122l.039-.007h1.412zm1.976 0l.04.007a.127.127 0 01.077.081l.007.041v1.315a.13.13 0 01-.085.123l-.039.007H5.4a.125.125 0 01-.117-.09l-.006-.04V4.021l.006-.04a.127.127 0 01.078-.082l.039-.007h1.412zm1.953 0c.054 0 .1.037.117.088l.007.041v1.315a.13.13 0 01-.085.123l-.04.007H7.353a.125.125 0 01-.117-.09l-.006-.04V4.021l.006-.04a.127.127 0 01.078-.082l.04-.007h1.412zm0-1.892c.054 0 .1.037.117.088l.007.04v1.316a.13.13 0 01-.085.123l-.04.006H7.353a.124.124 0 01-.117-.088l-.006-.04V2.128l.006-.04a.127.127 0 01.078-.082L7.353 2h1.412z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/property-24.scss
new file mode 100644
index 0000000000..042912ee23
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docker-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-docker-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%232396ED" d="M17.97 7.445l.207-.31.36.217.159.112c.385.294 1.194 1.045 1.37 2.288.306-.053.616-.08.926-.082.734 0 1.227.17 1.508.309l.143.078.094.061.263.212-.09.272a2.775 2.775 0 01-.648.99c-.398.407-1.098.887-2.211.949l-.245.006h-.203c-.509 1.329-1.193 2.823-2.34 4.165a9.708 9.708 0 01-2.393 2.022 11.005 11.005 0 01-3.505 1.314c-.885.17-1.784.255-2.685.252-1.994 0-3.753-.391-4.836-1.076-.966-.61-1.71-1.605-2.208-2.957A11.082 11.082 0 011 12.422a.704.704 0 01.595-.7l.093-.007H16.18l.128-.009.204-.022c.353-.046.889-.15 1.267-.367-.452-.737-.58-1.6-.37-2.519.09-.384.228-.754.413-1.1l.148-.253zM4.974 9.14l.054.01c.05.017.09.058.107.11l.008.056v1.786l-.008.055a.173.173 0 01-.108.111l-.053.009H3.032a.17.17 0 01-.161-.12l-.009-.055V9.315l.009-.055a.173.173 0 01.107-.111l.054-.01h1.942zm2.676 0l.054.01c.05.017.09.058.107.11l.009.056v1.786l-.01.055a.173.173 0 01-.106.111l-.054.009H5.708a.171.171 0 01-.162-.12l-.009-.055V9.316c0-.078.05-.144.117-.167l.054-.01H7.65zm2.717 0l.054.01c.05.017.09.058.107.11l.008.056v1.786l-.008.055a.172.172 0 01-.108.111l-.053.009H8.425a.17.17 0 01-.161-.12l-.009-.055V9.315l.009-.055a.173.173 0 01.107-.111l.054-.01h1.942zm2.684 0l.054.009c.051.017.091.059.108.111l.009.056v1.786c0 .077-.05.143-.117.166l-.053.009H11.11a.17.17 0 01-.161-.12l-.01-.055V9.315l.01-.055a.173.173 0 01.107-.111l.054-.01h1.942zm2.709 0l.054.009c.05.017.09.059.108.111l.008.056v1.786c0 .077-.049.143-.117.166l-.053.009h-1.942a.17.17 0 01-.161-.12l-.009-.055V9.315l.009-.055a.173.173 0 01.107-.111l.054-.01h1.942zM7.65 6.57l.054.01c.05.017.09.058.107.11l.009.055v1.786a.176.176 0 01-.116.167l-.054.01H5.708a.172.172 0 01-.162-.121l-.008-.056V6.745c0-.077.049-.143.116-.166l.054-.009H7.65zm2.717 0l.053.01c.05.017.09.058.108.11l.008.055v1.786a.176.176 0 01-.115.167l-.054.01H8.425a.171.171 0 01-.161-.121l-.009-.056V6.745l.009-.055a.173.173 0 01.107-.11l.054-.01h1.942zm2.684 0c.075 0 .14.05.162.12l.009.055v1.786c0 .078-.05.144-.117.167l-.053.01H11.11a.171.171 0 01-.161-.121l-.01-.056V6.745l.01-.055a.173.173 0 01.107-.11l.054-.01h1.942zm0-2.57c.075 0 .14.05.162.12l.009.055v1.787c0 .078-.05.143-.117.166l-.053.01H11.11a.17.17 0 01-.161-.12l-.01-.056V4.175l.01-.055a.173.173 0 01.107-.111L11.11 4h1.942z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docker/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docker/index.scss
new file mode 100644
index 0000000000..d8f2040671
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docker/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../docker-color/property-16';
+        @import '../docker-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docker/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docker/keyframes.scss
new file mode 100644
index 0000000000..4f08dc7a05
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docker/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-docker {
+  50% {
+
+    background-color: var(--icon-color, var(--color-docker-500, currentColor));
+    -webkit-mask-image: var(--icon-docker-color-24);
+    mask-image: var(--icon-docker-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-docker-500, currentColor));
+    -webkit-mask-image: var(--icon-docker-color-16);
+    mask-image: var(--icon-docker-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docker/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docker/placeholders.scss
new file mode 100644
index 0000000000..350d5b9e11
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docker/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-docker-icon {
+  --icon-name: icon-docker;
+  content: '';
+}
+%with-docker-mask {
+  --icon-name: icon-docker;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docker/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docker/property-16.scss
new file mode 100644
index 0000000000..2bd44cde96
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docker/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-docker-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.342 4.536l.15-.227.262.159.116.083c.28.216.869.768.996 1.684.223-.04.448-.06.673-.06.534 0 .893.124 1.097.227l.105.057.068.045.191.156-.066.2a2.044 2.044 0 01-.47.73c-.29.299-.8.652-1.609.698l-.178.005h-.148c-.37.977-.867 2.078-1.702 3.066a7.081 7.081 0 01-1.74 1.488 7.941 7.941 0 01-2.549.968c-.644.125-1.298.187-1.953.185-1.45 0-2.73-.288-3.517-.792-.703-.449-1.243-1.182-1.606-2.177a8.25 8.25 0 01-.461-2.83.516.516 0 01.432-.516l.068-.005h10.54l.092-.007.149-.016c.256-.034.646-.11.92-.27-.328-.543-.421-1.178-.268-1.854a3.3 3.3 0 01.3-.81l.108-.187zM2.89 5.784l.04.007a.127.127 0 01.077.082l.006.04v1.315l-.006.041a.127.127 0 01-.078.082l-.039.006H1.478a.124.124 0 01-.117-.088l-.007-.04V5.912l.007-.04a.127.127 0 01.078-.083l.039-.006H2.89zm1.947 0l.039.007a.127.127 0 01.078.082l.006.04v1.315l-.007.041a.127.127 0 01-.078.082l-.039.006H3.424a.125.125 0 01-.117-.088L3.3 7.23V5.913a.13.13 0 01.085-.123l.039-.007h1.413zm1.976 0l.039.007a.127.127 0 01.077.082l.007.04v1.315l-.007.041a.127.127 0 01-.078.082l-.039.006H5.4a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.039-.006h1.413zm1.952 0l.039.007a.127.127 0 01.078.082l.007.04v1.315a.13.13 0 01-.085.123l-.04.006H7.353a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.04-.006h1.412zm1.97 0l.039.007a.127.127 0 01.078.082l.006.04v1.315a.13.13 0 01-.085.123l-.039.006H9.322a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.04-.006h1.411zM4.835 3.892l.04.007a.127.127 0 01.077.081l.007.041v1.315a.13.13 0 01-.085.123l-.039.007H3.424a.125.125 0 01-.117-.09l-.007-.04V4.021a.13.13 0 01.085-.122l.039-.007h1.412zm1.976 0l.04.007a.127.127 0 01.077.081l.007.041v1.315a.13.13 0 01-.085.123l-.039.007H5.4a.125.125 0 01-.117-.09l-.006-.04V4.021l.006-.04a.127.127 0 01.078-.082l.039-.007h1.412zm1.953 0c.054 0 .1.037.117.088l.007.041v1.315a.13.13 0 01-.085.123l-.04.007H7.353a.125.125 0 01-.117-.09l-.006-.04V4.021l.006-.04a.127.127 0 01.078-.082l.04-.007h1.412zm0-1.892c.054 0 .1.037.117.088l.007.04v1.316a.13.13 0 01-.085.123l-.04.006H7.353a.124.124 0 01-.117-.088l-.006-.04V2.128l.006-.04a.127.127 0 01.078-.082L7.353 2h1.412z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docker/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docker/property-24.scss
new file mode 100644
index 0000000000..6e43259125
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docker/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-docker-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.342 4.536l.15-.227.262.159.116.083c.28.216.869.768.996 1.684.223-.04.448-.06.673-.06.534 0 .893.124 1.097.227l.105.057.068.045.191.156-.066.2a2.044 2.044 0 01-.47.73c-.29.299-.8.652-1.609.698l-.178.005h-.148c-.37.977-.867 2.078-1.702 3.066a7.081 7.081 0 01-1.74 1.488 7.941 7.941 0 01-2.549.968c-.644.125-1.298.187-1.953.185-1.45 0-2.73-.288-3.517-.792-.703-.449-1.243-1.182-1.606-2.177a8.25 8.25 0 01-.461-2.83.516.516 0 01.432-.516l.068-.005h10.54l.092-.007.149-.016c.256-.034.646-.11.92-.27-.328-.543-.421-1.178-.268-1.854a3.3 3.3 0 01.3-.81l.108-.187zM2.89 5.784l.04.007a.127.127 0 01.077.082l.006.04v1.315l-.006.041a.127.127 0 01-.078.082l-.039.006H1.478a.124.124 0 01-.117-.088l-.007-.04V5.912l.007-.04a.127.127 0 01.078-.083l.039-.006H2.89zm1.947 0l.039.007a.127.127 0 01.078.082l.006.04v1.315l-.007.041a.127.127 0 01-.078.082l-.039.006H3.424a.125.125 0 01-.117-.088L3.3 7.23V5.913a.13.13 0 01.085-.123l.039-.007h1.413zm1.976 0l.039.007a.127.127 0 01.077.082l.007.04v1.315l-.007.041a.127.127 0 01-.078.082l-.039.006H5.4a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.039-.006h1.413zm1.952 0l.039.007a.127.127 0 01.078.082l.007.04v1.315a.13.13 0 01-.085.123l-.04.006H7.353a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.04-.006h1.412zm1.97 0l.039.007a.127.127 0 01.078.082l.006.04v1.315a.13.13 0 01-.085.123l-.039.006H9.322a.124.124 0 01-.117-.088l-.006-.04V5.912l.006-.04a.127.127 0 01.078-.083l.04-.006h1.411zM4.835 3.892l.04.007a.127.127 0 01.077.081l.007.041v1.315a.13.13 0 01-.085.123l-.039.007H3.424a.125.125 0 01-.117-.09l-.007-.04V4.021a.13.13 0 01.085-.122l.039-.007h1.412zm1.976 0l.04.007a.127.127 0 01.077.081l.007.041v1.315a.13.13 0 01-.085.123l-.039.007H5.4a.125.125 0 01-.117-.09l-.006-.04V4.021l.006-.04a.127.127 0 01.078-.082l.039-.007h1.412zm1.953 0c.054 0 .1.037.117.088l.007.041v1.315a.13.13 0 01-.085.123l-.04.007H7.353a.125.125 0 01-.117-.09l-.006-.04V4.021l.006-.04a.127.127 0 01.078-.082l.04-.007h1.412zm0-1.892c.054 0 .1.037.117.088l.007.04v1.316a.13.13 0 01-.085.123l-.04.006H7.353a.124.124 0 01-.117-.088l-.006-.04V2.128l.006-.04a.127.127 0 01.078-.082L7.353 2h1.412z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/keyframes.scss
new file mode 100644
index 0000000000..7908ba3674
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-docs-download {
+  50% {
+
+    background-color: var(--icon-color, var(--color-docs-download-500, currentColor));
+    -webkit-mask-image: var(--icon-docs-download-24);
+    mask-image: var(--icon-docs-download-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-docs-download-500, currentColor));
+    -webkit-mask-image: var(--icon-docs-download-16);
+    mask-image: var(--icon-docs-download-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/placeholders.scss
new file mode 100644
index 0000000000..f826b51665
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-docs-download-icon {
+  --icon-name: icon-docs-download;
+  content: '';
+}
+%with-docs-download-mask {
+  --icon-name: icon-docs-download;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/property-16.scss
new file mode 100644
index 0000000000..e318ad98cd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-docs-download-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2 3.25A2.25 2.25 0 014.25 1h8.5c.69 0 1.25.56 1.25 1.25V4.5a.75.75 0 01-1.5 0v-2H4.25a.75.75 0 00-.75.75v6.878c.235-.083.487-.128.75-.128h.25a.75.75 0 010 1.5h-.25a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h1a.75.75 0 010 1.5h-1A2.25 2.25 0 012 12.75v-9.5z"/><path d="M8.826 10.826a.6.6 0 01.848 0l.726.725V9a.6.6 0 011.2 0v2.551l.726-.725a.6.6 0 11.848.848l-1.75 1.75a.6.6 0 01-.848 0l-1.75-1.75a.6.6 0 010-.848z"/><path fill-rule="evenodd" d="M11 6.05a4.95 4.95 0 100 9.9 4.95 4.95 0 000-9.9zM7.45 11a3.55 3.55 0 117.1 0 3.55 3.55 0 01-7.1 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/property-24.scss
new file mode 100644
index 0000000000..144ea4455b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-download/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-docs-download-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3 3.75A2.75 2.75 0 015.75 1h13.5c.966 0 1.75.784 1.75 1.75v6.5a.75.75 0 01-1.5 0v-6.5a.25.25 0 00-.25-.25H5.75c-.69 0-1.25.56-1.25 1.25V17.8c.375-.192.8-.3 1.25-.3h1.5a.75.75 0 010 1.5h-1.5a1.25 1.25 0 100 2.5h3a.75.75 0 010 1.5h-3A2.75 2.75 0 013 20.25V3.75z"/><path d="M12.97 17.22a.75.75 0 011.06 0l1.22 1.22v-4.69a.75.75 0 011.5 0v4.69l1.22-1.22a.75.75 0 111.06 1.06l-2.5 2.5a.747.747 0 01-1.06 0l-2.5-2.5a.75.75 0 010-1.06z"/><path fill-rule="evenodd" d="M16 10a7 7 0 100 14 7 7 0 000-14zm-5.5 7a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/keyframes.scss
new file mode 100644
index 0000000000..c1148d1260
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-docs-link {
+  50% {
+
+    background-color: var(--icon-color, var(--color-docs-link-500, currentColor));
+    -webkit-mask-image: var(--icon-docs-link-24);
+    mask-image: var(--icon-docs-link-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-docs-link-500, currentColor));
+    -webkit-mask-image: var(--icon-docs-link-16);
+    mask-image: var(--icon-docs-link-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/placeholders.scss
new file mode 100644
index 0000000000..7b8f269f0c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-docs-link-icon {
+  --icon-name: icon-docs-link;
+  content: '';
+}
+%with-docs-link-mask {
+  --icon-name: icon-docs-link;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/property-16.scss
new file mode 100644
index 0000000000..4ec1ada2ed
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-docs-link-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M3.5 3.25a.75.75 0 01.75-.75H8A.75.75 0 008 1H4.25A2.25 2.25 0 002 3.25v9.5A2.25 2.25 0 004.25 15h8.5c.69 0 1.25-.56 1.25-1.25V7a.75.75 0 00-1.5 0v3H4.25c-.263 0-.515.045-.75.128V3.25zm0 9v.5c0 .414.336.75.75.75h8.25v-2H4.25a.75.75 0 00-.75.75z" clip-rule="evenodd"/><path d="M12.5 3.56v.69a.75.75 0 001.5 0v-2.5a.75.75 0 00-.75-.75h-2.5a.75.75 0 000 1.5h.69L9.47 4.47a.75.75 0 001.06 1.06l1.97-1.97z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/property-24.scss
new file mode 100644
index 0000000000..1a71dcf9f9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs-link/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-docs-link-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M4.5 3.75c0-.69.56-1.25 1.25-1.25h7.5a.75.75 0 000-1.5h-7.5A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h13.5A1.75 1.75 0 0021 21.25V8.75a.75.75 0 00-1.5 0v8.75H5.75c-.45 0-.875.108-1.25.3V3.75zm0 16.5c0 .69.56 1.25 1.25 1.25h13.5a.25.25 0 00.25-.25V19H5.75c-.69 0-1.25.56-1.25 1.25z" clip-rule="evenodd"/><path d="M19.5 3.56v1.69a.75.75 0 001.5 0v-3.5a.75.75 0 00-.75-.75h-3.5a.75.75 0 000 1.5h1.69l-2.97 2.97a.75.75 0 001.06 1.06l2.97-2.97z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs/keyframes.scss
new file mode 100644
index 0000000000..fb668431e8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-docs {
+  50% {
+
+    background-color: var(--icon-color, var(--color-docs-500, currentColor));
+    -webkit-mask-image: var(--icon-docs-24);
+    mask-image: var(--icon-docs-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-docs-500, currentColor));
+    -webkit-mask-image: var(--icon-docs-16);
+    mask-image: var(--icon-docs-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs/placeholders.scss
new file mode 100644
index 0000000000..e4bb113e0a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-docs-icon {
+  --icon-name: icon-docs;
+  content: '';
+}
+%with-docs-mask {
+  --icon-name: icon-docs;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs/property-16.scss
new file mode 100644
index 0000000000..c112549680
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-docs-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.25 1A2.25 2.25 0 002 3.25v9.5A2.25 2.25 0 004.25 15h8.5c.69 0 1.25-.56 1.25-1.25V2.25C14 1.56 13.44 1 12.75 1h-8.5zM3.5 12.75c0 .414.336.75.75.75h8.25v-2H4.25a.75.75 0 00-.75.75v.5zm0-2.622c.235-.083.487-.128.75-.128h8.25V2.5H4.25a.75.75 0 00-.75.75v6.878z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/docs/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/docs/property-24.scss
new file mode 100644
index 0000000000..cd0d292861
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/docs/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-docs-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h13.5A1.75 1.75 0 0021 21.25V2.75A1.75 1.75 0 0019.25 1H5.75zM19.5 17.5V2.75a.25.25 0 00-.25-.25H5.75c-.69 0-1.25.56-1.25 1.25V17.8c.375-.192.8-.3 1.25-.3H19.5zm-15 2.75c0 .69.56 1.25 1.25 1.25h13.5a.25.25 0 00.25-.25V19H5.75c-.69 0-1.25.56-1.25 1.25z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/keyframes.scss
new file mode 100644
index 0000000000..eb01fd3377
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-dollar-sign {
+  50% {
+
+    background-color: var(--icon-color, var(--color-dollar-sign-500, currentColor));
+    -webkit-mask-image: var(--icon-dollar-sign-24);
+    mask-image: var(--icon-dollar-sign-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-dollar-sign-500, currentColor));
+    -webkit-mask-image: var(--icon-dollar-sign-16);
+    mask-image: var(--icon-dollar-sign-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/placeholders.scss
new file mode 100644
index 0000000000..dc3cfe2cfb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-dollar-sign-icon {
+  --icon-name: icon-dollar-sign;
+  content: '';
+}
+%with-dollar-sign-mask {
+  --icon-name: icon-dollar-sign;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/property-16.scss
new file mode 100644
index 0000000000..e59a2ed3b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-dollar-sign-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.5.75a.75.75 0 00-1.5 0V2h-.594c-.9 0-1.766.353-2.405.985A3.36 3.36 0 003 5.375a3.36 3.36 0 001 2.39c.64.632 1.506.985 2.406.985H7v3.75H4.25a.75.75 0 000 1.5H7v1.25a.75.75 0 001.5 0V14h1.094c.9 0 1.766-.353 2.405-.985A3.36 3.36 0 0013 10.625a3.36 3.36 0 00-1-2.39 3.422 3.422 0 00-2.406-.985H8.5V3.5h3.25a.75.75 0 000-1.5H8.5V.75zM7 3.5h-.594c-.508 0-.994.2-1.35.552A1.86 1.86 0 004.5 5.375c0 .494.199.97.555 1.323.357.352.843.552 1.351.552H7V3.5zm1.5 5.25v3.75h1.094c.508 0 .994-.2 1.35-.552a1.86 1.86 0 00.556-1.323c0-.494-.199-.97-.555-1.323a1.922 1.922 0 00-1.351-.552H8.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/property-24.scss
new file mode 100644
index 0000000000..cf5943fb4e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dollar-sign/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-dollar-sign-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12.5 1.75a.75.75 0 00-1.5 0V4H9.396c-1.165 0-2.282.46-3.107 1.28a4.365 4.365 0 000 6.19 4.406 4.406 0 003.107 1.28H11v5.75H5.75a.75.75 0 000 1.5H11v2.25a.75.75 0 001.5 0V20h2.104c1.165 0 2.282-.46 3.107-1.28a4.365 4.365 0 000-6.19 4.407 4.407 0 00-3.107-1.28H12.5V5.5h4.708a.75.75 0 000-1.5H12.5V1.75zM11 5.5H9.396c-.77 0-1.507.304-2.05.844a2.865 2.865 0 000 4.062c.543.54 1.28.844 2.05.844H11V5.5zm1.5 7.25v5.75h2.104c.77 0 1.507-.304 2.05-.844a2.864 2.864 0 000-4.062 2.906 2.906 0 00-2.05-.844H12.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/keyframes.scss
new file mode 100644
index 0000000000..26f3f0d25f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-dot-half {
+  50% {
+
+    background-color: var(--icon-color, var(--color-dot-half-500, currentColor));
+    -webkit-mask-image: var(--icon-dot-half-24);
+    mask-image: var(--icon-dot-half-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-dot-half-500, currentColor));
+    -webkit-mask-image: var(--icon-dot-half-16);
+    mask-image: var(--icon-dot-half-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/placeholders.scss
new file mode 100644
index 0000000000..ed273d0779
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-dot-half-icon {
+  --icon-name: icon-dot-half;
+  content: '';
+}
+%with-dot-half-mask {
+  --icon-name: icon-dot-half;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/property-16.scss
new file mode 100644
index 0000000000..b0f912dfe4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-dot-half-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 3a5 5 0 100 10A5 5 0 008 3zm0 1.5v7a3.5 3.5 0 100-7z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/property-24.scss
new file mode 100644
index 0000000000..83c9a0ce22
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dot-half/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-dot-half-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 5a7 7 0 100 14 7 7 0 000-14zm0 1.5v11a5.5 5.5 0 100-11z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dot/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dot/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dot/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dot/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dot/keyframes.scss
new file mode 100644
index 0000000000..be9a570c53
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dot/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-dot {
+  50% {
+
+    background-color: var(--icon-color, var(--color-dot-500, currentColor));
+    -webkit-mask-image: var(--icon-dot-24);
+    mask-image: var(--icon-dot-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-dot-500, currentColor));
+    -webkit-mask-image: var(--icon-dot-16);
+    mask-image: var(--icon-dot-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dot/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dot/placeholders.scss
new file mode 100644
index 0000000000..528b9137ef
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dot/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-dot-icon {
+  --icon-name: icon-dot;
+  content: '';
+}
+%with-dot-mask {
+  --icon-name: icon-dot;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dot/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dot/property-16.scss
new file mode 100644
index 0000000000..db41d67691
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dot/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-dot-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 3a5 5 0 100 10A5 5 0 008 3z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/dot/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/dot/property-24.scss
new file mode 100644
index 0000000000..5a5e298b41
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/dot/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-dot-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12 5a7 7 0 100 14 7 7 0 000-14z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/download/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/download/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/download/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/download/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/download/keyframes.scss
new file mode 100644
index 0000000000..b70ec434a4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/download/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-download {
+  50% {
+
+    background-color: var(--icon-color, var(--color-download-500, currentColor));
+    -webkit-mask-image: var(--icon-download-24);
+    mask-image: var(--icon-download-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-download-500, currentColor));
+    -webkit-mask-image: var(--icon-download-16);
+    mask-image: var(--icon-download-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/download/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/download/placeholders.scss
new file mode 100644
index 0000000000..e3896921f0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/download/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-download-icon {
+  --icon-name: icon-download;
+  content: '';
+}
+%with-download-mask {
+  --icon-name: icon-download;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/download/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/download/property-16.scss
new file mode 100644
index 0000000000..714dd1e527
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/download/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-download-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.75 1.75a.75.75 0 00-1.5 0v6.59L5.3 6.24a.75.75 0 10-1.1 1.02L7.45 10.76a.78.78 0 00.038.038.748.748 0 001.063-.037l3.25-3.5a.75.75 0 10-1.1-1.02l-1.95 2.1V1.75z"/><path d="M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/download/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/download/property-24.scss
new file mode 100644
index 0000000000..ed331b72bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/download/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-download-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.75 2.75a.75.75 0 00-1.5 0v10.628L7.293 9.232a.75.75 0 10-1.086 1.036l5.25 5.499A.748.748 0 0012 16h.012a.747.747 0 00.53-.232l5.25-5.5a.75.75 0 00-1.085-1.036l-3.957 4.146V2.75z"/><path d="M2.75 14a.75.75 0 01.75.75v4.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25v-4.5a.75.75 0 011.5 0v4.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25v-4.5a.75.75 0 01.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/keyframes.scss
new file mode 100644
index 0000000000..29865aae6d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-droplet {
+  50% {
+
+    background-color: var(--icon-color, var(--color-droplet-500, currentColor));
+    -webkit-mask-image: var(--icon-droplet-24);
+    mask-image: var(--icon-droplet-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-droplet-500, currentColor));
+    -webkit-mask-image: var(--icon-droplet-16);
+    mask-image: var(--icon-droplet-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/placeholders.scss
new file mode 100644
index 0000000000..b05a26dd51
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-droplet-icon {
+  --icon-name: icon-droplet;
+  content: '';
+}
+%with-droplet-mask {
+  --icon-name: icon-droplet;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/property-16.scss
new file mode 100644
index 0000000000..2b4e2d16f3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-droplet-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.477 1.212a.75.75 0 011.046 0l3.813 3.71A5.92 5.92 0 0114 9.04C13.999 12.337 11.307 15 7.999 15c-3.308 0-6-2.663-6-5.96a5.92 5.92 0 011.665-4.118l3.812-3.71zM4.721 5.987A4.42 4.42 0 003.5 9.04C3.5 11.498 5.51 13.5 8 13.5s4.5-2.002 4.5-4.46a4.42 4.42 0 00-1.22-3.053L8 2.797l-3.28 3.19z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/property-24.scss
new file mode 100644
index 0000000000..626604b92d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/droplet/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-droplet-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1a.75.75 0 01.544.233l5.997 6.314A9.22 9.22 0 0121 13.84c0 5.045-4.016 9.16-9 9.16s-9-4.115-9-9.16c0-2.435.934-4.651 2.46-6.293l.005-.006 5.991-6.308A.75.75 0 0112 1zM6.556 8.571A7.719 7.719 0 004.5 13.84c0 4.244 3.371 7.66 7.5 7.66s7.5-3.416 7.5-7.66a7.719 7.719 0 00-2.056-5.269L12 2.84 6.556 8.571z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/keyframes.scss
new file mode 100644
index 0000000000..5582dd862b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-duplicate {
+  50% {
+
+    background-color: var(--icon-color, var(--color-duplicate-500, currentColor));
+    -webkit-mask-image: var(--icon-duplicate-24);
+    mask-image: var(--icon-duplicate-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-duplicate-500, currentColor));
+    -webkit-mask-image: var(--icon-duplicate-16);
+    mask-image: var(--icon-duplicate-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/placeholders.scss
new file mode 100644
index 0000000000..8f090f4388
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-duplicate-icon {
+  --icon-name: icon-duplicate;
+  content: '';
+}
+%with-duplicate-mask {
+  --icon-name: icon-duplicate;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/property-16.scss
new file mode 100644
index 0000000000..187852ccf0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-duplicate-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.25 0A2.25 2.25 0 000 2.25v7.5A2.25 2.25 0 002.25 12h.25a.75.75 0 000-1.5h-.25a.75.75 0 01-.75-.75v-7.5a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v.25a.75.75 0 001.5 0v-.25A2.25 2.25 0 009.75 0h-7.5z"/><path fill-rule="evenodd" d="M6.25 4A2.25 2.25 0 004 6.25v7.5A2.25 2.25 0 006.25 16h7.5A2.25 2.25 0 0016 13.75v-7.5A2.25 2.25 0 0013.75 4h-7.5zM5.5 6.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75v-7.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/property-24.scss
new file mode 100644
index 0000000000..bc11bf550b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/duplicate/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-duplicate-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 1A2.75 2.75 0 001 3.75v10.5A2.75 2.75 0 003.75 17h1a.75.75 0 000-1.5h-1c-.69 0-1.25-.56-1.25-1.25V3.75c0-.69.56-1.25 1.25-1.25h10.5c.69 0 1.25.56 1.25 1.25v1a.75.75 0 001.5 0v-1A2.75 2.75 0 0014.25 1H3.75z"/><path fill-rule="evenodd" d="M9.75 7A2.75 2.75 0 007 9.75v10.5A2.75 2.75 0 009.75 23h10.5A2.75 2.75 0 0023 20.25V9.75A2.75 2.75 0 0020.25 7H9.75zM8.5 9.75c0-.69.56-1.25 1.25-1.25h10.5c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H9.75c-.69 0-1.25-.56-1.25-1.25V9.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/edit/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/edit/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/edit/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/edit/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/edit/keyframes.scss
new file mode 100644
index 0000000000..d35b804e47
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/edit/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-edit {
+  50% {
+
+    background-color: var(--icon-color, var(--color-edit-500, currentColor));
+    -webkit-mask-image: var(--icon-edit-24);
+    mask-image: var(--icon-edit-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-edit-500, currentColor));
+    -webkit-mask-image: var(--icon-edit-16);
+    mask-image: var(--icon-edit-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/edit/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/edit/placeholders.scss
new file mode 100644
index 0000000000..d33d06a239
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/edit/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-edit-icon {
+  --icon-name: icon-edit;
+  content: '';
+}
+%with-edit-mask {
+  --icon-name: icon-edit;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/edit/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/edit/property-16.scss
new file mode 100644
index 0000000000..d81255db3f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/edit/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-edit-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M11.436 1.005A1.75 1.75 0 0113.902.79l.702.589a1.75 1.75 0 01.216 2.465l-5.704 6.798a4.75 4.75 0 01-1.497 1.187l-2.572 1.299a.75.75 0 01-1.056-.886l.833-2.759a4.75 4.75 0 01.908-1.68l5.704-6.798zm1.502.934a.25.25 0 00-.353.03l-.53.633 1.082.914.534-.636a.25.25 0 00-.031-.352l-.703-.59zm-.765 2.726l-1.082-.914-4.21 5.016a3.25 3.25 0 00-.621 1.15L5.933 11l1.01-.51a3.249 3.249 0 001.024-.812l4.206-5.013z" clip-rule="evenodd"/><path d="M3.25 3.5a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V9A.75.75 0 0115 9v4.75A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75v-9.5A2.25 2.25 0 013.25 2H6a.75.75 0 010 1.5H3.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/edit/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/edit/property-24.scss
new file mode 100644
index 0000000000..d7f9e69ccd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/edit/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-edit-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M17.055 2.884a2.75 2.75 0 013.89 0l.171.171a2.75 2.75 0 010 3.89l-9.005 9.005A4.75 4.75 0 0110.516 17L6.28 18.696a.75.75 0 01-.975-.975l1.695-4.237a4.749 4.749 0 011.051-1.595l9.005-9.005zm2.829 1.06a1.25 1.25 0 00-1.768 0l-.555.556L19.5 6.44l.555-.556a1.25 1.25 0 000-1.768l-.171-.172zM18.439 7.5L16.5 5.56l-7.39 7.39a3.25 3.25 0 00-.719 1.09l-1.045 2.614 2.613-1.046a3.25 3.25 0 001.091-.719L18.44 7.5z" clip-rule="evenodd"/><path d="M3.75 4.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V13a.75.75 0 011.5 0v7.25A2.75 2.75 0 0118.25 23H3.75A2.75 2.75 0 011 20.25V5.75A2.75 2.75 0 013.75 3H11a.75.75 0 010 1.5H3.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/keyframes.scss
new file mode 100644
index 0000000000..2115d4a660
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-enterprise {
+  50% {
+
+    background-color: var(--icon-color, var(--color-enterprise-500, currentColor));
+    -webkit-mask-image: var(--icon-enterprise-24);
+    mask-image: var(--icon-enterprise-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-enterprise-500, currentColor));
+    -webkit-mask-image: var(--icon-enterprise-16);
+    mask-image: var(--icon-enterprise-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/placeholders.scss
new file mode 100644
index 0000000000..54e2ee1d75
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-enterprise-icon {
+  --icon-name: icon-enterprise;
+  content: '';
+}
+%with-enterprise-mask {
+  --icon-name: icon-enterprise;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/property-16.scss
new file mode 100644
index 0000000000..5f282f1a4d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-enterprise-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M9.872 1.774a6.516 6.516 0 013.693 2.864.75.75 0 101.283-.777 8 8 0 10-9.054 11.83.75.75 0 10.412-1.441A6.505 6.505 0 011.52 8.5h2.503a10.929 10.929 0 001.396 4.619.75.75 0 001.307-.736A9.437 9.437 0 015.527 8.5h.723a.75.75 0 000-1.5h-.67C5.835 5.124 6.667 3.335 8 1.836a10.102 10.102 0 011.736 2.71.75.75 0 101.377-.593 11.442 11.442 0 00-1.241-2.18zm-3.744 0A6.508 6.508 0 001.576 7H4.07a11.095 11.095 0 012.06-5.226z" clip-rule="evenodd"/><path d="M7.5 7.75A2.25 2.25 0 019.75 5.5h4A2.25 2.25 0 0116 7.75v7.5a.75.75 0 01-1.5 0v-7.5a.75.75 0 00-.75-.75h-4a.75.75 0 00-.75.75v7.5a.75.75 0 01-1.5 0v-7.5z"/><path d="M10.25 12a.75.75 0 00-.75.75v2.5a.75.75 0 001.5 0V13.5h1.5v1.75a.75.75 0 001.5 0v-2.5a.75.75 0 00-.75-.75h-3zM9.75 8.5a.75.75 0 01.75-.75h.25a.75.75 0 010 1.5h-.25a.75.75 0 01-.75-.75zM12.75 7.75a.75.75 0 000 1.5H13a.75.75 0 000-1.5h-.25zM9.75 10.5a.75.75 0 01.75-.75h.25a.75.75 0 010 1.5h-.25a.75.75 0 01-.75-.75zM12.75 9.75a.75.75 0 000 1.5H13a.75.75 0 000-1.5h-.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/property-24.scss
new file mode 100644
index 0000000000..43fe9e42e2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/enterprise/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-enterprise-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M13.673 2.647a9.462 9.462 0 014.545 2.17.75.75 0 00.983-1.133A10.96 10.96 0 0012 1C5.925 1 1 5.925 1 12c0 5.056 3.41 9.313 8.054 10.601a.75.75 0 10.401-1.445c-3.857-1.07-6.727-4.513-6.942-8.656h4.754c.097 1.97.539 3.892 1.292 5.68a.75.75 0 001.382-.582A15.256 15.256 0 018.769 12.5h.481a.75.75 0 000-1.5h-.446A15.149 15.149 0 0112 2.916c.432.546.824 1.12 1.174 1.718a.75.75 0 101.294-.758 16.46 16.46 0 00-.795-1.23zm-3.346 0A9.506 9.506 0 002.552 11h4.747a16.673 16.673 0 013.028-8.353z" clip-rule="evenodd"/><path d="M11 8.75A2.75 2.75 0 0113.75 6h6.5A2.75 2.75 0 0123 8.75v13.5a.75.75 0 01-1.5 0V8.75c0-.69-.56-1.25-1.25-1.25h-6.5c-.69 0-1.25.56-1.25 1.25v13.5a.75.75 0 01-1.5 0V8.75z"/><path d="M15.75 18c-.69 0-1.25.56-1.25 1.25v3a.75.75 0 001.5 0V19.5h2v2.75a.75.75 0 001.5 0v-3c0-.69-.56-1.25-1.25-1.25h-2.5zM14.5 12.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM18.25 12a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM14.5 9.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM18.25 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM14.5 15.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM18.25 15a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/keyframes.scss
new file mode 100644
index 0000000000..90075a3ef1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-entry-point {
+  50% {
+
+    background-color: var(--icon-color, var(--color-entry-point-500, currentColor));
+    -webkit-mask-image: var(--icon-entry-point-24);
+    mask-image: var(--icon-entry-point-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-entry-point-500, currentColor));
+    -webkit-mask-image: var(--icon-entry-point-16);
+    mask-image: var(--icon-entry-point-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/placeholders.scss
new file mode 100644
index 0000000000..33529e96f6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-entry-point-icon {
+  --icon-name: icon-entry-point;
+  content: '';
+}
+%with-entry-point-mask {
+  --icon-name: icon-entry-point;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/property-16.scss
new file mode 100644
index 0000000000..3d3b244dc9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-entry-point-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 2.5a5.494 5.494 0 00-4.558 2.42.75.75 0 01-1.242-.84 7 7 0 110 7.841.75.75 0 111.242-.841A5.5 5.5 0 108 2.5z"/><path d="M7.245 4.695a.75.75 0 00-.05 1.06l1.36 1.495H1.75a.75.75 0 000 1.5h6.805l-1.36 1.495a.75.75 0 001.11 1.01l2.5-2.75a.75.75 0 000-1.01l-2.5-2.75a.75.75 0 00-1.06-.05z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/property-24.scss
new file mode 100644
index 0000000000..06539c2962
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/entry-point/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-entry-point-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 4.5a7.498 7.498 0 00-6.561 3.864.75.75 0 01-1.312-.728 9 9 0 110 8.728.75.75 0 011.312-.728A7.5 7.5 0 1012 4.5z"/><path d="M3 12a.75.75 0 01.75-.75h9.614l-3.129-2.955a.75.75 0 011.03-1.09l4.5 4.25a.75.75 0 010 1.09l-4.5 4.25a.75.75 0 01-1.03-1.09l3.129-2.955H3.75A.75.75 0 013 12z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/index.scss
new file mode 100644
index 0000000000..05ca47565a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../mail/property-16';
+        @import '../mail/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/keyframes.scss
new file mode 100644
index 0000000000..dfc7f11ff6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-envelope-sealed-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-envelope-sealed-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-24);
+    mask-image: var(--icon-mail-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-envelope-sealed-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-16);
+    mask-image: var(--icon-mail-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/placeholders.scss
new file mode 100644
index 0000000000..7da571284e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-envelope-sealed-fill-icon {
+  --icon-name: icon-envelope-sealed-fill;
+  content: '';
+}
+%with-envelope-sealed-fill-mask {
+  --icon-name: icon-envelope-sealed-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/index.scss
new file mode 100644
index 0000000000..05ca47565a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../mail/property-16';
+        @import '../mail/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/keyframes.scss
new file mode 100644
index 0000000000..4a9e39938a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-envelope-sealed-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-envelope-sealed-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-24);
+    mask-image: var(--icon-mail-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-envelope-sealed-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-16);
+    mask-image: var(--icon-mail-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/placeholders.scss
new file mode 100644
index 0000000000..27c7eaea3c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-sealed-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-envelope-sealed-outline-icon {
+  --icon-name: icon-envelope-sealed-outline;
+  content: '';
+}
+%with-envelope-sealed-outline-mask {
+  --icon-name: icon-envelope-sealed-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/index.scss
new file mode 100644
index 0000000000..d4df26e394
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../mail-open/property-16';
+        @import '../mail-open/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/keyframes.scss
new file mode 100644
index 0000000000..8722dd3078
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-envelope-unsealed--outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-envelope-unsealed--outline-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-open-24);
+    mask-image: var(--icon-mail-open-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-envelope-unsealed--outline-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-open-16);
+    mask-image: var(--icon-mail-open-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/placeholders.scss
new file mode 100644
index 0000000000..ae72b4d0ed
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed--outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-envelope-unsealed--outline-icon {
+  --icon-name: icon-envelope-unsealed--outline;
+  content: '';
+}
+%with-envelope-unsealed--outline-mask {
+  --icon-name: icon-envelope-unsealed--outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/index.scss
new file mode 100644
index 0000000000..d4df26e394
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../mail-open/property-16';
+        @import '../mail-open/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/keyframes.scss
new file mode 100644
index 0000000000..1fc70ec0e3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-envelope-unsealed-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-envelope-unsealed-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-open-24);
+    mask-image: var(--icon-mail-open-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-envelope-unsealed-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-open-16);
+    mask-image: var(--icon-mail-open-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/placeholders.scss
new file mode 100644
index 0000000000..cc12152480
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/envelope-unsealed-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-envelope-unsealed-fill-icon {
+  --icon-name: icon-envelope-unsealed-fill;
+  content: '';
+}
+%with-envelope-unsealed-fill-mask {
+  --icon-name: icon-envelope-unsealed-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/event/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/event/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/event/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/event/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/event/keyframes.scss
new file mode 100644
index 0000000000..12689be203
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/event/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-event {
+  50% {
+
+    background-color: var(--icon-color, var(--color-event-500, currentColor));
+    -webkit-mask-image: var(--icon-event-24);
+    mask-image: var(--icon-event-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-event-500, currentColor));
+    -webkit-mask-image: var(--icon-event-16);
+    mask-image: var(--icon-event-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/event/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/event/placeholders.scss
new file mode 100644
index 0000000000..a12eb46b93
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/event/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-event-icon {
+  --icon-name: icon-event;
+  content: '';
+}
+%with-event-mask {
+  --icon-name: icon-event;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/event/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/event/property-16.scss
new file mode 100644
index 0000000000..c2225aa8c2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/event/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-event-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.675 4.173a.75.75 0 00-1.35 0l-1.14 2.359-2.546.38a.75.75 0 00-.418 1.273l1.85 1.84-.437 2.6a.75.75 0 001.094.786L8 12.19l2.272 1.22a.75.75 0 001.094-.785l-.437-2.602 1.85-1.839a.75.75 0 00-.418-1.273l-2.545-.38-1.14-2.359zM7.362 7.542L8 6.222l.638 1.32a.75.75 0 00.565.415l1.459.218-1.066 1.059a.75.75 0 00-.21.656l.247 1.476-1.278-.686a.75.75 0 00-.71 0l-1.278.686.248-1.476a.75.75 0 00-.211-.656l-1.066-1.06 1.46-.217a.75.75 0 00.564-.415z"/><path d="M12 .75a.75.75 0 00-1.5 0V1h-5V.75a.75.75 0 00-1.5 0V1H2.25A2.25 2.25 0 000 3.25v10.5A2.25 2.25 0 002.25 16h11.5A2.25 2.25 0 0016 13.75V3.25A2.25 2.25 0 0013.75 1H12V.75zm-8 2.5V2.5H2.25a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75V3.25a.75.75 0 00-.75-.75H12v.75a.75.75 0 01-1.5 0V2.5h-5v.75a.75.75 0 01-1.5 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/event/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/event/property-24.scss
new file mode 100644
index 0000000000..dce8856660
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/event/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-event-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12.673 7.668a.75.75 0 00-1.345 0l-1.526 3.09-3.41.498a.75.75 0 00-.415 1.28l2.467 2.403-.582 3.395a.75.75 0 001.088.79L12 17.522l3.05 1.604a.75.75 0 001.088-.79l-.582-3.396 2.467-2.403a.75.75 0 00-.415-1.28l-3.41-.498-1.525-3.09zm-1.7 4.107L12 9.695l1.027 2.08a.75.75 0 00.564.41l2.298.336-1.662 1.619a.75.75 0 00-.216.664l.392 2.286-2.054-1.08a.75.75 0 00-.698 0l-2.054 1.08.392-2.286a.75.75 0 00-.216-.664L8.111 12.52l2.298-.336a.75.75 0 00.564-.41z"/><path d="M17 2a.75.75 0 00-1.5 0v1h-7V2A.75.75 0 007 2v1H4.75A2.75 2.75 0 002 5.75v14.5A2.75 2.75 0 004.75 23h14.5A2.75 2.75 0 0022 20.25V5.75A2.75 2.75 0 0019.25 3H17V2zM7 6V4.5H4.75c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25H17V6a.75.75 0 01-1.5 0V4.5h-7V6A.75.75 0 017 6z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/keyframes.scss
new file mode 100644
index 0000000000..e072d471a9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-exit-point {
+  50% {
+
+    background-color: var(--icon-color, var(--color-exit-point-500, currentColor));
+    -webkit-mask-image: var(--icon-exit-point-24);
+    mask-image: var(--icon-exit-point-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-exit-point-500, currentColor));
+    -webkit-mask-image: var(--icon-exit-point-16);
+    mask-image: var(--icon-exit-point-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/placeholders.scss
new file mode 100644
index 0000000000..d812f09d89
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-exit-point-icon {
+  --icon-name: icon-exit-point;
+  content: '';
+}
+%with-exit-point-mask {
+  --icon-name: icon-exit-point;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/property-16.scss
new file mode 100644
index 0000000000..d16aa09fbf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-exit-point-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 8a6 6 0 018.514-5.45.75.75 0 01-.629 1.363 4.5 4.5 0 100 8.175.75.75 0 11.63 1.361A6 6 0 011 8z"/><path d="M11.245 4.695a.75.75 0 00-.05 1.06l1.36 1.495H6.75a.75.75 0 000 1.5h5.805l-1.36 1.495a.75.75 0 001.11 1.01l2.5-2.75a.748.748 0 00-.002-1.012l-2.498-2.748a.75.75 0 00-1.06-.05z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/property-24.scss
new file mode 100644
index 0000000000..eb50ed2edc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/exit-point/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-exit-point-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3 12a7 7 0 0110.707-5.939.75.75 0 01-.795 1.272 5.5 5.5 0 100 9.334.75.75 0 01.795 1.272A7 7 0 013 12z"/><path d="M9 12a.75.75 0 01.75-.75h9.614l-3.129-2.955a.75.75 0 011.03-1.09l4.498 4.248a.748.748 0 010 1.093l-4.498 4.25a.75.75 0 01-1.03-1.091l3.129-2.955H9.75A.75.75 0 019 12z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/exit/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/exit/index.scss
new file mode 100644
index 0000000000..ea4c49f4b9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/exit/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../external-link/property-16';
+        @import '../external-link/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/exit/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/exit/keyframes.scss
new file mode 100644
index 0000000000..c84b874a86
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/exit/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-exit {
+  50% {
+
+    background-color: var(--icon-color, var(--color-exit-500, currentColor));
+    -webkit-mask-image: var(--icon-external-link-24);
+    mask-image: var(--icon-external-link-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-exit-500, currentColor));
+    -webkit-mask-image: var(--icon-external-link-16);
+    mask-image: var(--icon-external-link-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/exit/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/exit/placeholders.scss
new file mode 100644
index 0000000000..6bceaca78f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/exit/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-exit-icon {
+  --icon-name: icon-exit;
+  content: '';
+}
+%with-exit-mask {
+  --icon-name: icon-exit;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/index.scss
new file mode 100644
index 0000000000..1513630fe5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../minimize/property-16';
+        @import '../minimize/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/keyframes.scss
new file mode 100644
index 0000000000..b41400c48c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-expand-less {
+  50% {
+
+    background-color: var(--icon-color, var(--color-expand-less-500, currentColor));
+    -webkit-mask-image: var(--icon-minimize-24);
+    mask-image: var(--icon-minimize-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-expand-less-500, currentColor));
+    -webkit-mask-image: var(--icon-minimize-16);
+    mask-image: var(--icon-minimize-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/placeholders.scss
new file mode 100644
index 0000000000..318d7f50bd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-less/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-expand-less-icon {
+  --icon-name: icon-expand-less;
+  content: '';
+}
+%with-expand-less-mask {
+  --icon-name: icon-expand-less;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/index.scss
new file mode 100644
index 0000000000..f7f03acf35
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../maximize/property-16';
+        @import '../maximize/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/keyframes.scss
new file mode 100644
index 0000000000..aa6a33ad55
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-expand-more {
+  50% {
+
+    background-color: var(--icon-color, var(--color-expand-more-500, currentColor));
+    -webkit-mask-image: var(--icon-maximize-24);
+    mask-image: var(--icon-maximize-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-expand-more-500, currentColor));
+    -webkit-mask-image: var(--icon-maximize-16);
+    mask-image: var(--icon-maximize-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/placeholders.scss
new file mode 100644
index 0000000000..c4eace8789
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/expand-more/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-expand-more-icon {
+  --icon-name: icon-expand-more;
+  content: '';
+}
+%with-expand-more-mask {
+  --icon-name: icon-expand-more;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/keyframes.scss
new file mode 100644
index 0000000000..4ec11d765f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-external-link {
+  50% {
+
+    background-color: var(--icon-color, var(--color-external-link-500, currentColor));
+    -webkit-mask-image: var(--icon-external-link-24);
+    mask-image: var(--icon-external-link-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-external-link-500, currentColor));
+    -webkit-mask-image: var(--icon-external-link-16);
+    mask-image: var(--icon-external-link-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/placeholders.scss
new file mode 100644
index 0000000000..4d4ad3a38d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-external-link-icon {
+  --icon-name: icon-external-link;
+  content: '';
+}
+%with-external-link-mask {
+  --icon-name: icon-external-link;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/property-16.scss
new file mode 100644
index 0000000000..99fd564a30
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-external-link-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9 .75A.75.75 0 019.75 0h4.5c.206 0 .393.083.529.218l.001.002.002.001A.748.748 0 0115 .75v4.5a.75.75 0 01-1.5 0V2.56L7.28 8.78a.75.75 0 01-1.06-1.06l6.22-6.22H9.75A.75.75 0 019 .75z"/><path d="M3.25 3.5a.75.75 0 00-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0110.75 14h-7.5A2.25 2.25 0 011 11.75v-7.5A2.25 2.25 0 013.25 2h4a.75.75 0 010 1.5h-4z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/property-24.scss
new file mode 100644
index 0000000000..1bb7ef0441
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/external-link/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-external-link-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15 1.75a.75.75 0 01.75-.75h5.5a.748.748 0 01.75.75v5.5a.75.75 0 01-1.5 0V3.56L10.28 13.78a.75.75 0 11-1.06-1.06L19.44 2.5h-3.69a.75.75 0 01-.75-.75z"/><path d="M4.75 5.5c-.69 0-1.25.56-1.25 1.25v11.5c0 .69.56 1.25 1.25 1.25h11.5c.69 0 1.25-.56 1.25-1.25v-6.5a.75.75 0 011.5 0v6.5A2.75 2.75 0 0116.25 21H4.75A2.75 2.75 0 012 18.25V6.75A2.75 2.75 0 014.75 4h6.5a.75.75 0 010 1.5h-6.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/keyframes.scss
new file mode 100644
index 0000000000..4800009dc1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-eye-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-eye-off-500, currentColor));
+    -webkit-mask-image: var(--icon-eye-off-24);
+    mask-image: var(--icon-eye-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-eye-off-500, currentColor));
+    -webkit-mask-image: var(--icon-eye-off-16);
+    mask-image: var(--icon-eye-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/placeholders.scss
new file mode 100644
index 0000000000..5da6cb6a14
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-eye-off-icon {
+  --icon-name: icon-eye-off;
+  content: '';
+}
+%with-eye-off-mask {
+  --icon-name: icon-eye-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/property-16.scss
new file mode 100644
index 0000000000..7909168e42
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-eye-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.28 1.22a.75.75 0 00-1.06 1.06l1.664 1.665A10.99 10.99 0 00.977 5.994c-.295.41-.524.791-.683 1.103a4.16 4.16 0 00-.194.431A1.4 1.4 0 000 8c0 .155.041.296.067.375a3 3 0 00.122.31c.097.215.234.471.407.751.346.56.854 1.246 1.516 1.914C3.43 12.68 5.422 14 8 14c1.49 0 2.786-.442 3.868-1.071l1.852 1.851a.75.75 0 101.06-1.06l-4.645-4.646a.383.383 0 00-.008-.007v-.001l-3.19-3.19a.555.555 0 00-.014-.014L2.28 1.22zm3.127 5.248L3.95 5.01a9.444 9.444 0 00-1.754 1.857 7.362 7.362 0 00-.566.911c-.046.09-.08.164-.104.221l.03.067c.065.145.17.344.316.58a9.45 9.45 0 001.306 1.647C4.332 11.458 5.964 12.5 8 12.5c1.028 0 1.95-.264 2.763-.677l-1.23-1.23C9.078 10.858 8.552 11 8 11a3 3 0 01-3-3c0-.553.142-1.079.407-1.532zm2.985 2.985L6.547 7.608A1.62 1.62 0 006.5 8 1.5 1.5 0 008 9.5c.137 0 .269-.016.392-.047zM8 3.5c-.306 0-.602.023-.887.067a.75.75 0 11-.226-1.483C7.247 2.029 7.617 2 8 2c2.578 0 4.57 1.32 5.888 2.65.662.668 1.17 1.354 1.516 1.914.173.28.31.536.407.75.048.107.09.212.122.31.026.08.067.221.067.376 0 .21-.079.42-.126.537a4.99 4.99 0 01-.251.524c-.21.384-.515.857-.909 1.355a.75.75 0 11-1.176-.93c.343-.434.6-.836.768-1.144.078-.143.133-.258.168-.342a5.336 5.336 0 00-.346-.648 9.452 9.452 0 00-1.306-1.646C11.668 4.542 10.036 3.5 8 3.5zm6.511 4.604l-.002-.008.001.005.001.003z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/property-24.scss
new file mode 100644
index 0000000000..f306a3008d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/eye-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-eye-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.28 1.22a.75.75 0 00-1.06 1.06l3.468 3.468C3.294 6.87 2.204 8.154 1.437 9.236a15.323 15.323 0 00-1.02 1.635c-.117.22-.21.415-.277.574-.033.08-.063.16-.086.234A1.102 1.102 0 000 12c0 .116.025.216.037.263.017.06.037.12.058.177.042.113.1.245.17.388.138.289.34.657.599 1.074a18.14 18.14 0 002.285 2.936C5.14 18.912 8.135 21 12 21c2.361 0 4.4-.78 6.08-1.86l3.64 3.64a.75.75 0 101.06-1.06L2.28 1.22zm10.88 13l-3.38-3.38c-.18.345-.28.738-.28 1.16a2.5 2.5 0 002.5 2.5c.422 0 .815-.1 1.16-.28zM8.688 9.75A3.976 3.976 0 008 12a4 4 0 004 4c.835 0 1.609-.25 2.251-.688l2.74 2.74c-1.43.863-3.1 1.448-4.991 1.448-3.295 0-5.925-1.78-7.769-3.701a16.641 16.641 0 01-2.093-2.688c-.236-.38-.41-.701-.523-.934a4.225 4.225 0 01-.08-.177 5.8 5.8 0 01.207-.426c.202-.38.51-.893.919-1.47.733-1.036 1.776-2.253 3.094-3.288l2.933 2.933zM12 4.5c-.813 0-1.583.108-2.31.299a.75.75 0 11-.38-1.451A10.568 10.568 0 0112 3c3.864 0 6.86 2.088 8.85 4.162 1.001 1.043 1.767 2.1 2.286 2.936.26.417.46.785.6 1.074.069.143.127.275.169.388.021.056.041.117.058.177.012.047.037.147.037.263 0 .171-.057.332-.08.396-.034.098-.08.208-.134.326-.109.236-.265.535-.465.874-.4.68-.99 1.551-1.759 2.455a.75.75 0 01-1.142-.973 16.232 16.232 0 001.608-2.242 8.709 8.709 0 00.438-.836 4.03 4.03 0 00-.081-.177 10.392 10.392 0 00-.523-.934 16.639 16.639 0 00-2.093-2.688C17.924 6.28 15.294 4.5 12 4.5zm10.516 7.365z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/eye/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/eye/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/eye/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/eye/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/eye/keyframes.scss
new file mode 100644
index 0000000000..c62ab2133b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/eye/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-eye {
+  50% {
+
+    background-color: var(--icon-color, var(--color-eye-500, currentColor));
+    -webkit-mask-image: var(--icon-eye-24);
+    mask-image: var(--icon-eye-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-eye-500, currentColor));
+    -webkit-mask-image: var(--icon-eye-16);
+    mask-image: var(--icon-eye-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/eye/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/eye/placeholders.scss
new file mode 100644
index 0000000000..c320a170ad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/eye/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-eye-icon {
+  --icon-name: icon-eye;
+  content: '';
+}
+%with-eye-mask {
+  --icon-name: icon-eye;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/eye/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/eye/property-16.scss
new file mode 100644
index 0000000000..355d6215bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/eye/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-eye-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 5a3 3 0 100 6 3 3 0 000-6zM6.5 8a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"/><path d="M8 2C5.422 2 3.43 3.32 2.112 4.65A10.948 10.948 0 00.596 6.564c-.173.28-.31.536-.407.75a3 3 0 00-.122.31C.04 7.705 0 7.846 0 8s.041.296.067.375a3 3 0 00.122.31c.097.215.234.471.407.751.346.56.854 1.246 1.516 1.914C3.43 12.68 5.422 14 8 14s4.57-1.32 5.888-2.65a10.952 10.952 0 001.516-1.914c.173-.28.31-.536.407-.75.048-.107.09-.212.122-.31.026-.08.067-.221.067-.376s-.041-.296-.067-.375a2.978 2.978 0 00-.122-.31 6.777 6.777 0 00-.407-.751 10.952 10.952 0 00-1.516-1.914C12.57 3.32 10.578 2 8 2zM1.556 7.933a2.314 2.314 0 00-.03.067l.03.067c.065.145.17.344.316.58a9.45 9.45 0 001.306 1.647C4.332 11.458 5.964 12.5 8 12.5s3.668-1.042 4.822-2.206a9.45 9.45 0 001.306-1.646A5.336 5.336 0 0014.473 8a5.335 5.335 0 00-.346-.648 9.452 9.452 0 00-1.305-1.646C11.668 4.542 10.036 3.5 8 3.5S4.332 4.542 3.178 5.706a9.45 9.45 0 00-1.306 1.646 5.316 5.316 0 00-.316.58z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/eye/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/eye/property-24.scss
new file mode 100644
index 0000000000..6fdf05676d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/eye/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-eye-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm-2.5 4a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"/><path d="M12 3C8.135 3 5.14 5.088 3.15 7.162c-1.001 1.043-1.767 2.1-2.286 2.936-.26.417-.46.785-.6 1.074-.069.143-.127.275-.169.388a1.952 1.952 0 00-.058.177A1.024 1.024 0 000 12c0 .116.025.216.037.263.017.06.037.12.058.177.042.113.1.245.17.388.138.289.34.657.599 1.074a18.14 18.14 0 002.285 2.936C5.14 18.912 8.135 21 12 21c3.864 0 6.86-2.088 8.85-4.162 1.001-1.043 1.767-2.1 2.286-2.936.26-.417.46-.785.6-1.074.069-.143.127-.275.169-.388a1.98 1.98 0 00.058-.177c.012-.047.037-.147.037-.263 0-.116-.025-.216-.037-.263a1.98 1.98 0 00-.058-.177 4.709 4.709 0 00-.17-.388c-.139-.289-.34-.657-.599-1.074a18.146 18.146 0 00-2.285-2.936C18.86 5.088 15.865 3 12 3zM1.615 12.177a4.225 4.225 0 01-.08-.177c.02-.048.047-.107.08-.177.113-.233.287-.554.523-.934a16.641 16.641 0 012.093-2.688C6.076 6.28 8.705 4.5 12 4.5c3.294 0 5.924 1.78 7.768 3.701a16.639 16.639 0 012.094 2.688c.236.38.41.701.523.934.033.07.06.129.08.177a4.03 4.03 0 01-.08.177c-.113.233-.287.554-.523.934a16.639 16.639 0 01-2.093 2.688C17.924 17.72 15.294 19.5 12 19.5s-5.925-1.78-7.769-3.701a16.641 16.641 0 01-2.093-2.688c-.236-.38-.41-.701-.523-.934z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/keyframes.scss
new file mode 100644
index 0000000000..96d7187b61
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-f5-color {
+  50% {
+    background-image: var(--icon-f5-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-f5-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/placeholders.scss
new file mode 100644
index 0000000000..03ef9c7c20
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-f5-color-icon {
+  --icon-name: icon-f5-color;
+  content: '';
+}
+%with-f5-color-mask {
+  --icon-name: icon-f5-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/property-16.scss
new file mode 100644
index 0000000000..20025947e5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-f5-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23E4002B" d="M13.777 4.048c-.086.354-.13.722-.213 1.098a39.715 39.715 0 00-3.668-.285c-.112.351-.217.696-.337 1.071 2.318.143 3.444.754 4.112 1.473.65.728.788 1.533.75 2.28-.084 1.213-.619 1.98-1.353 2.549a4.712 4.712 0 01-2.361.898c-1.061.08-2.48-.173-2.782-.358-.182-.414-.36-.83-.553-1.285-.047-.096-.077-.196.056-.31.206-.199.405-.39.613-.593.093-.09.195-.174.273-.045.285.44.552.844.82 1.246.304.449.768.858 1.78.79.851-.076 1.498-.72 1.567-1.428.075-1.31-1.251-2.24-4.699-2.538.662-1.997 1.306-3.93 1.822-5.466a27.93 27.93 0 012.302.198c.535.068 1.033.193 1.532.25a7 7 0 00-11.076 8.555c.297.002.502-.064.525-.192.027-.133.004-.34-.02-.549a32.121 32.121 0 01-.136-4.343c-.355.015-.674.031-.98.05.013-.276.028-.536.05-.807.302-.029.621-.054.972-.084.015-.237.032-.466.053-.697.157-1.418 1.65-2.285 2.893-2.62.552-.134.89-.176 1.154-.19.096-.003.2-.007.302-.007.258 0 .52.024.685.137.268.2.533.4.815.623.028.038.059.098-.011.201l-.386.452c-.076.092-.201.067-.307.039a32.529 32.529 0 00-.652-.323c-.392-.174-.798-.354-1.25-.336-.281.023-.554.311-.582.706-.04.6-.066 1.215-.088 1.882a100.06 100.06 0 012.389-.04l-.001.552c-.27.12-.523.241-.792.364-.556.006-1.085.01-1.617.02a72.993 72.993 0 00.07 4.627c.014.22.024.444.088.593.076.189.513.334 1.464.387l.014.483c-1.549-.046-3.036-.194-4.228-.408a7 7 0 0010.991-8.62z"/><path fill="%23fff" d="M14.42 9.684c.038-.746-.1-1.55-.75-2.279-.667-.72-1.794-1.33-4.112-1.473.12-.375.226-.72.337-1.071 1.386.049 2.62.149 3.668.285.083-.376.128-.744.214-1.098a6.934 6.934 0 00-.339-.454c-.499-.058-.996-.182-1.532-.251a27.93 27.93 0 00-2.301-.198c-.516 1.536-1.16 3.469-1.822 5.467 3.447.298 4.773 1.227 4.699 2.538-.069.708-.716 1.352-1.567 1.428-1.013.068-1.476-.34-1.78-.79-.268-.402-.535-.806-.82-1.246-.078-.129-.18-.045-.273.045-.209.203-.407.395-.614.592-.132.116-.103.215-.056.312.193.454.373.87.554 1.284.302.185 1.72.438 2.782.358a4.714 4.714 0 002.36-.898c.735-.57 1.27-1.337 1.353-2.55z"/><path fill="%23fff" d="M2.363 12.148c.132.18.273.354.422.52 1.193.215 2.68.363 4.23.408-.006-.16-.01-.317-.015-.483-.951-.053-1.388-.198-1.464-.386-.064-.15-.075-.373-.088-.594a72.784 72.784 0 01-.07-4.627c.532-.01 1.061-.014 1.617-.02.27-.123.523-.244.792-.364v-.551c-.823.003-1.604.017-2.387.039.022-.667.048-1.282.087-1.883.028-.394.301-.683.583-.705.451-.018.857.162 1.25.336.216.105.43.209.651.323.106.028.232.052.307-.04l.386-.451c.07-.104.04-.163.011-.201a39.675 39.675 0 00-.815-.624c-.165-.112-.427-.136-.685-.136-.102 0-.206.004-.301.007-.265.014-.602.056-1.154.19-1.244.335-2.736 1.202-2.894 2.62-.02.231-.037.46-.052.697-.351.03-.671.055-.973.084-.022.271-.037.532-.05.806.306-.018.625-.033.98-.049a32.19 32.19 0 00.137 4.343c.023.209.046.416.019.55-.022.127-.228.193-.524.191z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/property-24.scss
new file mode 100644
index 0000000000..54b7e0d6c7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/f5-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-f5-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23E4002B" d="M20.253 6.354c-.123.506-.187 1.031-.305 1.568a56.737 56.737 0 00-5.24-.406c-.16.502-.31.993-.482 1.53 3.311.204 4.92 1.076 5.875 2.104.928 1.04 1.125 2.19 1.071 3.256-.12 1.734-.884 2.83-1.933 3.642-1.061.8-2.345 1.197-3.373 1.283-1.515.114-3.542-.247-3.973-.511-.26-.59-.516-1.186-.791-1.835-.067-.138-.11-.28.08-.445.295-.282.578-.556.877-.845.132-.13.278-.25.389-.065.407.629.79 1.206 1.172 1.78.434.641 1.096 1.226 2.543 1.128 1.215-.108 2.14-1.028 2.238-2.04.107-1.872-1.788-3.2-6.713-3.625.945-2.853 1.867-5.614 2.603-7.809 1.17.054 2.253.15 3.288.283.765.097 1.476.276 2.19.358A9.978 9.978 0 0011.998 2C6.477 2 2 6.477 2 12a9.953 9.953 0 001.947 5.926c.423.003.717-.091.749-.274.039-.191.006-.487-.027-.785-.2-1.962-.271-4.081-.196-6.204-.507.022-.962.045-1.399.07.018-.392.04-.764.07-1.152.432-.041.888-.077 1.39-.12.021-.338.046-.665.075-.996.225-2.025 2.357-3.263 4.134-3.741.788-.192 1.27-.253 1.648-.273.137-.004.284-.01.431-.01.368 0 .742.035.979.196.383.287.761.573 1.164.89.04.055.084.14-.016.287-.185.217-.363.423-.551.646-.108.131-.288.096-.44.055a46.47 46.47 0 00-.93-.46c-.56-.25-1.14-.506-1.785-.48-.403.032-.793.444-.833 1.007a84.509 84.509 0 00-.125 2.69 142.94 142.94 0 013.412-.057l-.001.788c-.384.171-.746.345-1.131.52-.794.009-1.55.015-2.31.028-.036 2.266-.002 4.523.1 6.61.02.315.035.634.125.848.109.269.733.476 2.092.553.005.236.012.46.02.689-2.212-.065-4.337-.276-6.04-.583A9.968 9.968 0 0012 22c5.524 0 10-4.477 10-10a9.952 9.952 0 00-1.746-5.646z"/><path fill="%23fff" d="M21.172 14.406c.053-1.067-.144-2.216-1.072-3.256-.954-1.028-2.563-1.9-5.874-2.104.172-.537.322-1.028.481-1.53 1.98.07 3.741.212 5.24.406.118-.537.183-1.062.305-1.568a9.887 9.887 0 00-.483-.649c-.713-.082-1.424-.26-2.19-.358a39.903 39.903 0 00-3.287-.283c-.737 2.195-1.658 4.956-2.603 7.81 4.925.426 6.82 1.753 6.713 3.626-.098 1.011-1.023 1.931-2.239 2.04-1.446.097-2.108-.487-2.542-1.128-.383-.576-.765-1.152-1.173-1.78-.11-.185-.257-.065-.388.064-.299.29-.582.563-.877.846-.19.165-.148.306-.08.444.275.65.532 1.245.79 1.836.432.264 2.459.625 3.974.511 1.028-.086 2.312-.483 3.373-1.283 1.049-.814 1.813-1.91 1.932-3.644z"/><path fill="%23fff" d="M3.946 17.926c.19.257.391.505.604.743 1.704.306 3.829.518 6.041.582l-.02-.689c-1.359-.077-1.983-.284-2.092-.553-.09-.213-.106-.532-.126-.847a103.977 103.977 0 01-.1-6.61c.76-.014 1.517-.02 2.31-.029.386-.175.748-.349 1.132-.52l.002-.788a143.01 143.01 0 00-3.412.056c.031-.952.069-1.832.124-2.69.04-.563.43-.975.833-1.007.645-.025 1.225.231 1.785.48.31.15.615.299.931.461.152.04.331.076.44-.056.187-.222.366-.429.55-.645.1-.148.057-.233.016-.287a56.679 56.679 0 00-1.164-.89c-.237-.16-.61-.196-.979-.196-.146 0-.294.005-.43.01-.379.02-.86.08-1.65.272-1.775.479-3.908 1.717-4.133 3.742-.03.331-.053.658-.075.997-.501.042-.958.078-1.389.12-.031.387-.053.76-.07 1.151.436-.025.891-.048 1.399-.07a45.987 45.987 0 00.195 6.204c.033.299.066.594.027.785-.032.183-.325.277-.749.274z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/f5/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/f5/index.scss
new file mode 100644
index 0000000000..f4b28bbd50
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/f5/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../f5-color/property-16';
+        @import '../f5-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/f5/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/f5/keyframes.scss
new file mode 100644
index 0000000000..10b2845780
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/f5/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-f5 {
+  50% {
+
+    background-color: var(--icon-color, var(--color-f5-500, currentColor));
+    -webkit-mask-image: var(--icon-f5-color-24);
+    mask-image: var(--icon-f5-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-f5-500, currentColor));
+    -webkit-mask-image: var(--icon-f5-color-16);
+    mask-image: var(--icon-f5-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/f5/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/f5/placeholders.scss
new file mode 100644
index 0000000000..6296b3c43f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/f5/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-f5-icon {
+  --icon-name: icon-f5;
+  content: '';
+}
+%with-f5-mask {
+  --icon-name: icon-f5;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/f5/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/f5/property-16.scss
new file mode 100644
index 0000000000..a2c1b28f89
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/f5/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-f5-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.777 4.048c-.086.354-.13.722-.213 1.098a39.715 39.715 0 00-3.668-.285c-.112.351-.217.696-.337 1.071 2.318.143 3.444.754 4.112 1.473.65.728.788 1.533.75 2.28-.084 1.213-.619 1.98-1.353 2.549a4.712 4.712 0 01-2.361.898c-1.061.08-2.48-.173-2.782-.358-.182-.414-.36-.83-.553-1.285-.047-.096-.077-.196.056-.31.206-.199.405-.39.613-.593.093-.09.195-.174.273-.045.285.44.552.844.82 1.246.304.449.768.858 1.78.79.851-.076 1.498-.72 1.567-1.428.075-1.31-1.251-2.24-4.699-2.538.662-1.997 1.306-3.93 1.822-5.466a27.93 27.93 0 012.302.198c.535.068 1.033.193 1.532.25a7 7 0 00-11.076 8.555c.297.002.502-.064.525-.192.027-.133.004-.34-.02-.549a32.121 32.121 0 01-.136-4.343c-.355.015-.674.031-.98.05.013-.276.028-.536.05-.807.302-.029.621-.054.972-.084.015-.237.032-.466.053-.697.157-1.418 1.65-2.285 2.893-2.62.552-.134.89-.176 1.154-.19.096-.003.2-.007.302-.007.258 0 .52.024.685.137.268.2.533.4.815.623.028.038.059.098-.011.201l-.386.452c-.076.092-.201.067-.307.039a32.529 32.529 0 00-.652-.323c-.392-.174-.798-.354-1.25-.336-.281.023-.554.311-.582.706-.04.6-.066 1.215-.088 1.882a100.06 100.06 0 012.389-.04l-.001.552c-.27.12-.523.241-.792.364-.556.006-1.085.01-1.617.02a72.993 72.993 0 00.07 4.627c.014.22.024.444.088.593.076.189.513.334 1.464.387l.014.483c-1.549-.046-3.036-.194-4.228-.408a7 7 0 0010.991-8.62z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/f5/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/f5/property-24.scss
new file mode 100644
index 0000000000..e212181547
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/f5/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-f5-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.777 4.048c-.086.354-.13.722-.213 1.098a39.715 39.715 0 00-3.668-.285c-.112.351-.217.696-.337 1.071 2.318.143 3.444.754 4.112 1.473.65.728.788 1.533.75 2.28-.084 1.213-.619 1.98-1.353 2.549a4.712 4.712 0 01-2.361.898c-1.061.08-2.48-.173-2.782-.358-.182-.414-.36-.83-.553-1.285-.047-.096-.077-.196.056-.31.206-.199.405-.39.613-.593.093-.09.195-.174.273-.045.285.44.552.844.82 1.246.304.449.768.858 1.78.79.851-.076 1.498-.72 1.567-1.428.075-1.31-1.251-2.24-4.699-2.538.662-1.997 1.306-3.93 1.822-5.466a27.93 27.93 0 012.302.198c.535.068 1.033.193 1.532.25a7 7 0 00-11.076 8.555c.297.002.502-.064.525-.192.027-.133.004-.34-.02-.549a32.121 32.121 0 01-.136-4.343c-.355.015-.674.031-.98.05.013-.276.028-.536.05-.807.302-.029.621-.054.972-.084.015-.237.032-.466.053-.697.157-1.418 1.65-2.285 2.893-2.62.552-.134.89-.176 1.154-.19.096-.003.2-.007.302-.007.258 0 .52.024.685.137.268.2.533.4.815.623.028.038.059.098-.011.201l-.386.452c-.076.092-.201.067-.307.039a32.529 32.529 0 00-.652-.323c-.392-.174-.798-.354-1.25-.336-.281.023-.554.311-.582.706-.04.6-.066 1.215-.088 1.882a100.06 100.06 0 012.389-.04l-.001.552c-.27.12-.523.241-.792.364-.556.006-1.085.01-1.617.02a72.993 72.993 0 00.07 4.627c.014.22.024.444.088.593.076.189.513.334 1.464.387l.014.483c-1.549-.046-3.036-.194-4.228-.408a7 7 0 0010.991-8.62z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/keyframes.scss
new file mode 100644
index 0000000000..f1a630a53c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-facebook-color {
+  50% {
+    background-image: var(--icon-facebook-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-facebook-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/placeholders.scss
new file mode 100644
index 0000000000..b3d9f13e65
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-facebook-color-icon {
+  --icon-name: icon-facebook-color;
+  content: '';
+}
+%with-facebook-color-mask {
+  --icon-name: icon-facebook-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/property-16.scss
new file mode 100644
index 0000000000..830c09ca10
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-facebook-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%231877F2" d="M15 8a7 7 0 00-7-7 7 7 0 00-1.094 13.915v-4.892H5.13V8h1.777V6.458c0-1.754 1.045-2.724 2.644-2.724.766 0 1.567.137 1.567.137v1.723h-.883c-.87 0-1.14.54-1.14 1.093V8h1.941l-.31 2.023H9.094v4.892A7.001 7.001 0 0015 8z"/><path fill="%23fff" d="M10.725 10.023L11.035 8H9.094V6.687c0-.553.27-1.093 1.14-1.093h.883V3.87s-.801-.137-1.567-.137c-1.6 0-2.644.97-2.644 2.724V8H5.13v2.023h1.777v4.892a7.037 7.037 0 002.188 0v-4.892h1.63z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/property-24.scss
new file mode 100644
index 0000000000..8447b04e27
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-facebook-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%231877F2" d="M23 12c0-6.076-4.924-11-11-11S1 5.924 1 12c0 5.491 4.022 10.042 9.281 10.867V15.18H7.488V12h2.793V9.577c0-2.757 1.642-4.28 4.155-4.28 1.204 0 2.462.215 2.462.215v2.707h-1.387c-1.367 0-1.792.848-1.792 1.719V12h3.05l-.487 3.18h-2.563v7.687C18.979 22.042 23 17.49 23 12z"/><path fill="%23fff" d="M16.282 15.18L16.77 12h-3.051V9.937c0-.87.425-1.718 1.792-1.718h1.387V5.512s-1.258-.215-2.462-.215c-2.513 0-4.155 1.523-4.155 4.28V12H7.488v3.18h2.793v7.687a11.065 11.065 0 003.438 0V15.18h2.563z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/index.scss
new file mode 100644
index 0000000000..a4d8186172
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../facebook-color/property-16';
+        @import '../facebook-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/keyframes.scss
new file mode 100644
index 0000000000..af5f15ada1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-facebook {
+  50% {
+
+    background-color: var(--icon-color, var(--color-facebook-500, currentColor));
+    -webkit-mask-image: var(--icon-facebook-color-24);
+    mask-image: var(--icon-facebook-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-facebook-500, currentColor));
+    -webkit-mask-image: var(--icon-facebook-color-16);
+    mask-image: var(--icon-facebook-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/placeholders.scss
new file mode 100644
index 0000000000..10d91d2574
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-facebook-icon {
+  --icon-name: icon-facebook;
+  content: '';
+}
+%with-facebook-mask {
+  --icon-name: icon-facebook;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/property-16.scss
new file mode 100644
index 0000000000..ef80814564
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-facebook-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M15 8a7 7 0 00-7-7 7 7 0 00-1.094 13.915v-4.892H5.13V8h1.777V6.458c0-1.754 1.045-2.724 2.644-2.724.766 0 1.567.137 1.567.137v1.723h-.883c-.87 0-1.14.54-1.14 1.093V8h1.941l-.31 2.023H9.094v4.892A7.001 7.001 0 0015 8z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/property-24.scss
new file mode 100644
index 0000000000..0f233f603b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/facebook/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-facebook-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M15 8a7 7 0 00-7-7 7 7 0 00-1.094 13.915v-4.892H5.13V8h1.777V6.458c0-1.754 1.045-2.724 2.644-2.724.766 0 1.567.137 1.567.137v1.723h-.883c-.87 0-1.14.54-1.14 1.093V8h1.941l-.31 2.023H9.094v4.892A7.001 7.001 0 0015 8z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/keyframes.scss
new file mode 100644
index 0000000000..37c196549c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-fast-forward {
+  50% {
+
+    background-color: var(--icon-color, var(--color-fast-forward-500, currentColor));
+    -webkit-mask-image: var(--icon-fast-forward-24);
+    mask-image: var(--icon-fast-forward-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-fast-forward-500, currentColor));
+    -webkit-mask-image: var(--icon-fast-forward-16);
+    mask-image: var(--icon-fast-forward-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/placeholders.scss
new file mode 100644
index 0000000000..5f1f29b8ad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-fast-forward-icon {
+  --icon-name: icon-fast-forward;
+  content: '';
+}
+%with-fast-forward-mask {
+  --icon-name: icon-fast-forward;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/property-16.scss
new file mode 100644
index 0000000000..b5a9d66616
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-fast-forward-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.926 3.364A1.25 1.25 0 007 4.416v1.806L2.962 3.427A1.25 1.25 0 001 4.454v7.092a1.25 1.25 0 001.962 1.027L7 9.778v1.806a1.25 1.25 0 001.926 1.052L14.5 9.052a1.25 1.25 0 000-2.103L8.926 3.364zM13.363 8L8.5 11.126V4.874L13.363 8zM2.5 11.069V4.93L6.932 8 2.5 11.069z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/property-24.scss
new file mode 100644
index 0000000000..e2215459a9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/fast-forward/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-fast-forward-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.812 5.38C12.66 4.5 11 5.322 11 6.77v3.331L4.812 5.38C3.66 4.5 2 5.322 2 6.77v10.458c0 1.449 1.66 2.27 2.812 1.391L11 13.897v3.332c0 1.449 1.66 2.27 2.812 1.391l6.851-5.229a1.75 1.75 0 000-2.782l-6.851-5.23zM12.5 6.77a.25.25 0 01.402-.199l6.851 5.23a.25.25 0 010 .397l-6.851 5.229a.25.25 0 01-.402-.2V6.772zm-9 0a.25.25 0 01.402-.199l7.061 5.39v.077l-7.061 5.389a.25.25 0 01-.402-.2V6.772z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/keyframes.scss
new file mode 100644
index 0000000000..16e0159832
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file-change {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-change-500, currentColor));
+    -webkit-mask-image: var(--icon-file-change-24);
+    mask-image: var(--icon-file-change-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-change-500, currentColor));
+    -webkit-mask-image: var(--icon-file-change-16);
+    mask-image: var(--icon-file-change-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/placeholders.scss
new file mode 100644
index 0000000000..c2f9862cbe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-change-icon {
+  --icon-name: icon-file-change;
+  content: '';
+}
+%with-file-change-mask {
+  --icon-name: icon-file-change;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/property-16.scss
new file mode 100644
index 0000000000..95233f3669
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-change-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v11.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75V5.457c0-.331-.132-.65-.366-.884L10.427.366A1.25 1.25 0 009.543 0H3.25zM2.5 2.25a.75.75 0 01.75-.75H9v3.75c0 .414.336.75.75.75h3.75v7.75a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V2.25zm9.94 2.25L10.5 2.56V4.5h1.94zM9.583 9.156z" clip-rule="evenodd"/><path d="M5.5 8.595C5.77 8.325 6.23 8 6.876 8c.904 0 1.44.71 1.7 1.017.37.443.464.483.55.483.194 0 .375-.18.458-.344a.75.75 0 011.338.68 2.222 2.222 0 01-.422.57c-.27.269-.73.594-1.374.594-.904 0-1.44-.71-1.7-1.017-.37-.443-.465-.483-.55-.483-.2 0-.367.181-.458.344a.75.75 0 01-1.338-.68c.107-.212.254-.402.422-.57z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/property-24.scss
new file mode 100644
index 0000000000..4aa6a2f6b5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-change/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-change-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.458 15.328c.218-.26.487-.58.899-.745a1.12 1.12 0 01.778-.026c.324.1.766.356 1.313.95.667.726 1.325 1.17 1.979 1.37.667.204 1.27.135 1.774-.067a3.433 3.433 0 001.127-.768 5.357 5.357 0 00.41-.459l.02-.022.032-.04.012-.013a.75.75 0 10-1.104-1.016c-.05.054-.101.115-.156.18-.218.26-.487.58-.899.745a1.12 1.12 0 01-.778.026c-.324-.1-.766-.356-1.313-.95-.667-.726-1.325-1.17-1.979-1.37a2.619 2.619 0 00-1.774.067 3.433 3.433 0 00-1.127.768 5.4 5.4 0 00-.326.356l-.085.103-.018.022a4.557 4.557 0 01-.045.053.75.75 0 101.104 1.016c.05-.054.101-.115.156-.18z"/><path fill-rule="evenodd" d="M3 3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237V20.25A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25V3.75zM5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/keyframes.scss
new file mode 100644
index 0000000000..bac78e8d8b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file-check {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-check-500, currentColor));
+    -webkit-mask-image: var(--icon-file-check-24);
+    mask-image: var(--icon-file-check-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-check-500, currentColor));
+    -webkit-mask-image: var(--icon-file-check-16);
+    mask-image: var(--icon-file-check-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/placeholders.scss
new file mode 100644
index 0000000000..a5f255445e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-check-icon {
+  --icon-name: icon-file-check;
+  content: '';
+}
+%with-file-check-mask {
+  --icon-name: icon-file-check;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/property-16.scss
new file mode 100644
index 0000000000..654020f5c5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-check-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M3.25 1.5a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h4a.75.75 0 010 1.5h-4A2.25 2.25 0 011 13.75V2.25A2.25 2.25 0 013.25 0h6.293c.331 0 .65.132.884.366l4.207 4.207c.234.235.366.553.366.884V6.75a.75.75 0 01-1.5 0V6H9.75A.75.75 0 019 5.25V1.5H3.25zm7.25 1.06l1.94 1.94H10.5V2.56z"/><path d="M16 12a4 4 0 11-8 0 4 4 0 018 0zm-1.712-1.272a.75.75 0 01-.016 1.06l-2.406 2.334a.75.75 0 01-1.044 0l-1.094-1.06a.75.75 0 011.044-1.078l.572.555 1.884-1.827a.75.75 0 011.06.016z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/property-24.scss
new file mode 100644
index 0000000000..41e8f4aa9c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-check/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-check-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25H11a.75.75 0 010 1.5H5.75A2.75 2.75 0 013 20.25V3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237V13a.75.75 0 01-1.5 0V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z"/><path d="M22 19a5 5 0 11-10 0 5 5 0 0110 0zm-1.879-2.03a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 01-1.06 0l-1.591-1.59a.75.75 0 111.06-1.061l1.06 1.06 2.97-2.97a.75.75 0 011.061 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/keyframes.scss
new file mode 100644
index 0000000000..cc2056d4ee
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file-diff {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-diff-500, currentColor));
+    -webkit-mask-image: var(--icon-file-diff-24);
+    mask-image: var(--icon-file-diff-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-diff-500, currentColor));
+    -webkit-mask-image: var(--icon-file-diff-16);
+    mask-image: var(--icon-file-diff-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/placeholders.scss
new file mode 100644
index 0000000000..434fe1362a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-diff-icon {
+  --icon-name: icon-file-diff;
+  content: '';
+}
+%with-file-diff-mask {
+  --icon-name: icon-file-diff;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/property-16.scss
new file mode 100644
index 0000000000..fbc3647ccb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-diff-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.5 6.25a.75.75 0 00-1.5 0V7.5H5.75a.75.75 0 000 1.5H7v1.25a.75.75 0 001.5 0V9h1.25a.75.75 0 000-1.5H8.5V6.25zM5.75 11.5a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z"/><path fill-rule="evenodd" d="M1 2.25A2.25 2.25 0 013.25 0h6.293c.331 0 .65.132.884.366l4.207 4.207c.234.235.366.553.366.884v8.293A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V2.25zm2.25-.75a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6H9.75A.75.75 0 019 5.25V1.5H3.25zm7.25 1.06l1.94 1.94H10.5V2.56z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/property-24.scss
new file mode 100644
index 0000000000..22bc171a12
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-diff/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-diff-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.5 10.25a.75.75 0 00-1.5 0v2.25H8.75a.75.75 0 000 1.5H11v2.25a.75.75 0 001.5 0V14h2.25a.75.75 0 000-1.5H12.5v-2.25zM8.75 18a.75.75 0 000 1.5h6a.75.75 0 000-1.5h-6z"/><path fill-rule="evenodd" d="M3 3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237V20.25A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25V3.75zM5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/index.scss
new file mode 100644
index 0000000000..a00e3b361e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../file/property-16';
+        @import '../file/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/keyframes.scss
new file mode 100644
index 0000000000..1b67a25d20
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-file-24);
+    mask-image: var(--icon-file-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-file-16);
+    mask-image: var(--icon-file-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/placeholders.scss
new file mode 100644
index 0000000000..619b0a5179
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-fill-icon {
+  --icon-name: icon-file-fill;
+  content: '';
+}
+%with-file-fill-mask {
+  --icon-name: icon-file-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/keyframes.scss
new file mode 100644
index 0000000000..824d07642c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file-minus {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-minus-500, currentColor));
+    -webkit-mask-image: var(--icon-file-minus-24);
+    mask-image: var(--icon-file-minus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-minus-500, currentColor));
+    -webkit-mask-image: var(--icon-file-minus-16);
+    mask-image: var(--icon-file-minus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/placeholders.scss
new file mode 100644
index 0000000000..a132910f45
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-minus-icon {
+  --icon-name: icon-file-minus;
+  content: '';
+}
+%with-file-minus-mask {
+  --icon-name: icon-file-minus;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/property-16.scss
new file mode 100644
index 0000000000..9280abdd5e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-minus-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.75 9a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/><path fill-rule="evenodd" d="M1 2.25A2.25 2.25 0 013.25 0h6.293c.331 0 .65.132.884.366l4.207 4.207c.234.235.366.553.366.884v8.293A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V2.25zm2.25-.75a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6H9.75A.75.75 0 019 5.25V1.5H3.25zm7.25 1.06l1.94 1.94H10.5V2.56z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/property-24.scss
new file mode 100644
index 0000000000..074564883f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-minus/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-minus-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.75 14a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"/><path fill-rule="evenodd" d="M3 3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237V20.25A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25V3.75zM5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/index.scss
new file mode 100644
index 0000000000..a00e3b361e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../file/property-16';
+        @import '../file/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/keyframes.scss
new file mode 100644
index 0000000000..db459bd8ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-file-24);
+    mask-image: var(--icon-file-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-file-16);
+    mask-image: var(--icon-file-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/placeholders.scss
new file mode 100644
index 0000000000..c562f0a785
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-outline-icon {
+  --icon-name: icon-file-outline;
+  content: '';
+}
+%with-file-outline-mask {
+  --icon-name: icon-file-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/keyframes.scss
new file mode 100644
index 0000000000..4b8077ff10
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file-plus {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-plus-500, currentColor));
+    -webkit-mask-image: var(--icon-file-plus-24);
+    mask-image: var(--icon-file-plus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-plus-500, currentColor));
+    -webkit-mask-image: var(--icon-file-plus-16);
+    mask-image: var(--icon-file-plus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/placeholders.scss
new file mode 100644
index 0000000000..1dddb21cae
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-plus-icon {
+  --icon-name: icon-file-plus;
+  content: '';
+}
+%with-file-plus-mask {
+  --icon-name: icon-file-plus;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/property-16.scss
new file mode 100644
index 0000000000..c300763dd6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-plus-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 7a.75.75 0 01.75.75V9h1.25a.75.75 0 010 1.5H8.5v1.25a.75.75 0 01-1.5 0V10.5H5.75a.75.75 0 010-1.5H7V7.75A.75.75 0 017.75 7z"/><path fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v11.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75V5.457c0-.331-.132-.65-.366-.884L10.427.366A1.25 1.25 0 009.543 0H3.25zM2.5 2.25a.75.75 0 01.75-.75H9v3.75c0 .414.336.75.75.75h3.75v7.75a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V2.25zm9.94 2.25L10.5 2.56V4.5h1.94z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/property-24.scss
new file mode 100644
index 0000000000..5040d93594
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-plus/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-plus-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 10.75a.75.75 0 01.75.75V14H15a.75.75 0 010 1.5h-2.5V18a.75.75 0 01-1.5 0v-2.5H8.5a.75.75 0 010-1.5H11v-2.5a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V8.664c0-.464-.184-.909-.513-1.237l-5.914-5.914A1.75 1.75 0 0013.336 1H5.75zM4.5 3.75c0-.69.56-1.25 1.25-1.25H13v5.75c0 .414.336.75.75.75h5.75v11.25c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V3.75zM18.44 7.5L14.5 3.56V7.5h3.94z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/keyframes.scss
new file mode 100644
index 0000000000..92502306a6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file-source {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-source-500, currentColor));
+    -webkit-mask-image: var(--icon-file-source-24);
+    mask-image: var(--icon-file-source-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-source-500, currentColor));
+    -webkit-mask-image: var(--icon-file-source-16);
+    mask-image: var(--icon-file-source-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/placeholders.scss
new file mode 100644
index 0000000000..a5f22a21b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-source-icon {
+  --icon-name: icon-file-source;
+  content: '';
+}
+%with-file-source-mask {
+  --icon-name: icon-file-source;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/property-16.scss
new file mode 100644
index 0000000000..9c23896278
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-source-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.22 7.838a.625.625 0 01-.058.882L5.699 10l1.463 1.28a.625.625 0 01-.824.94l-2-1.75a.625.625 0 010-.94l2-1.75a.625.625 0 01.882.058zM8.838 8.72a.625.625 0 01.824-.94l2 1.75a.625.625 0 010 .94l-2 1.75a.625.625 0 01-.824-.94L10.301 10 8.838 8.72z"/><path fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v11.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75V5.457c0-.331-.132-.65-.366-.884L10.427.366A1.25 1.25 0 009.543 0H3.25zM2.5 2.25a.75.75 0 01.75-.75H9v3.75c0 .414.336.75.75.75h3.75v7.75a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V2.25zm9.94 2.25L10.5 2.56V4.5h1.94z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/property-24.scss
new file mode 100644
index 0000000000..29e4cbafa2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-source/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-source-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M13.15 12.3a.75.75 0 011.05-.15l3 2.25a.75.75 0 010 1.2l-3 2.25a.75.75 0 11-.9-1.2L15.5 15l-2.2-1.65a.75.75 0 01-.15-1.05zM10.7 13.35a.75.75 0 10-.9-1.2l-3 2.25a.75.75 0 000 1.2l3 2.25a.75.75 0 10.9-1.2L8.5 15l2.2-1.65z"/><path fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V8.664c0-.464-.184-.909-.513-1.237l-5.914-5.914A1.75 1.75 0 0013.336 1H5.75zM4.5 3.75c0-.69.56-1.25 1.25-1.25H13v5.75c0 .414.336.75.75.75h5.75v11.25c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V3.75zM18.44 7.5L14.5 3.56V7.5h3.94z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/keyframes.scss
new file mode 100644
index 0000000000..169421d87a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file-text {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-text-500, currentColor));
+    -webkit-mask-image: var(--icon-file-text-24);
+    mask-image: var(--icon-file-text-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-text-500, currentColor));
+    -webkit-mask-image: var(--icon-file-text-16);
+    mask-image: var(--icon-file-text-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/placeholders.scss
new file mode 100644
index 0000000000..e6f26263fe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-text-icon {
+  --icon-name: icon-file-text;
+  content: '';
+}
+%with-file-text-mask {
+  --icon-name: icon-file-text;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/property-16.scss
new file mode 100644
index 0000000000..40d70eea36
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-text-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.75 8a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5zM4 11.75a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75zM4.75 5a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5z"/><path fill-rule="evenodd" d="M1 2.25A2.25 2.25 0 013.25 0h6.293c.331 0 .65.132.884.366l4.207 4.207c.234.235.366.553.366.884v8.293A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V2.25zm2.25-.75a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6H9.75A.75.75 0 019 5.25V1.5H3.25zm7.25 1.06l1.94 1.94H10.5V2.56z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/property-24.scss
new file mode 100644
index 0000000000..1866591c9f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-text/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-text-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.75 12a.75.75 0 000 1.5h8a.75.75 0 000-1.5h-8zM7 16.75a.75.75 0 01.75-.75h6a.75.75 0 010 1.5h-6a.75.75 0 01-.75-.75zM7.75 8a.75.75 0 000 1.5h2a.75.75 0 000-1.5h-2z"/><path fill-rule="evenodd" d="M3 3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237V20.25A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25V3.75zM5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/keyframes.scss
new file mode 100644
index 0000000000..876d071caa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file-x {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-x-500, currentColor));
+    -webkit-mask-image: var(--icon-file-x-24);
+    mask-image: var(--icon-file-x-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-x-500, currentColor));
+    -webkit-mask-image: var(--icon-file-x-16);
+    mask-image: var(--icon-file-x-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/placeholders.scss
new file mode 100644
index 0000000000..ca72199351
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-x-icon {
+  --icon-name: icon-file-x;
+  content: '';
+}
+%with-file-x-mask {
+  --icon-name: icon-file-x;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/property-16.scss
new file mode 100644
index 0000000000..02bf4d469c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-x-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M3.25 1.5a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h4.5a.75.75 0 010 1.5h-4.5A2.25 2.25 0 011 13.75V2.25A2.25 2.25 0 013.25 0h6.293c.331 0 .65.132.884.366l4.207 4.207c.234.235.366.553.366.884V7.5a.75.75 0 01-1.5 0V6H9.75A.75.75 0 019 5.25V1.5H3.25zm7.25 1.06l1.94 1.94H10.5V2.56z"/><path d="M11 9a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm.53 5.53l.97-.97.97.97a.75.75 0 101.06-1.06l-.97-.97.97-.97a.75.75 0 10-1.06-1.06l-.97.97-.97-.97a.75.75 0 10-1.06 1.06l.97.97-.97.97a.75.75 0 101.06 1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/property-24.scss
new file mode 100644
index 0000000000..7d8ac8b084
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file-x/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-x-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h4.5a.75.75 0 010 1.5h-4.5A2.75 2.75 0 013 20.25V3.75A2.75 2.75 0 015.75 1h7.586c.464 0 .909.184 1.237.513l5.914 5.914c.329.328.513.773.513 1.237v3.586a.75.75 0 01-1.5 0V9h-5.75a.75.75 0 01-.75-.75V2.5H5.75zm8.75 1.06l3.94 3.94H14.5V3.56z"/><path d="M14 14a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm5.78 3.28a.75.75 0 10-1.06-1.06L17 17.94l-1.72-1.72a.75.75 0 10-1.06 1.06L15.94 19l-1.72 1.72a.75.75 0 101.06 1.06L17 20.06l1.72 1.72a.75.75 0 101.06-1.06L18.06 19l1.72-1.72z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file/keyframes.scss
new file mode 100644
index 0000000000..dfb9edc256
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-file {
+  50% {
+
+    background-color: var(--icon-color, var(--color-file-500, currentColor));
+    -webkit-mask-image: var(--icon-file-24);
+    mask-image: var(--icon-file-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-file-500, currentColor));
+    -webkit-mask-image: var(--icon-file-16);
+    mask-image: var(--icon-file-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file/placeholders.scss
new file mode 100644
index 0000000000..1749f38e38
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-file-icon {
+  --icon-name: icon-file;
+  content: '';
+}
+%with-file-mask {
+  --icon-name: icon-file;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file/property-16.scss
new file mode 100644
index 0000000000..587e0c6b7f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v11.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75V5.457c0-.331-.132-.65-.366-.884L10.427.366A1.25 1.25 0 009.543 0H3.25zM2.5 2.25a.75.75 0 01.75-.75H9v3.75c0 .414.336.75.75.75h3.75v7.75a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V2.25zm9.94 2.25L10.5 2.56V4.5h1.94z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/file/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/file/property-24.scss
new file mode 100644
index 0000000000..b0efd7281e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/file/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-file-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V8.664c0-.464-.184-.909-.513-1.237l-5.914-5.914A1.75 1.75 0 0013.336 1H5.75zM4.5 3.75c0-.69.56-1.25 1.25-1.25H13v5.75c0 .414.336.75.75.75h5.75v11.25c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V3.75zM18.44 7.5L14.5 3.56V7.5h3.94z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/files/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/files/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/files/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/files/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/files/keyframes.scss
new file mode 100644
index 0000000000..0ccf553b96
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/files/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-files {
+  50% {
+
+    background-color: var(--icon-color, var(--color-files-500, currentColor));
+    -webkit-mask-image: var(--icon-files-24);
+    mask-image: var(--icon-files-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-files-500, currentColor));
+    -webkit-mask-image: var(--icon-files-16);
+    mask-image: var(--icon-files-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/files/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/files/placeholders.scss
new file mode 100644
index 0000000000..dde3b08a87
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/files/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-files-icon {
+  --icon-name: icon-files;
+  content: '';
+}
+%with-files-mask {
+  --icon-name: icon-files;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/files/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/files/property-16.scss
new file mode 100644
index 0000000000..9d7157adb0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/files/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-files-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 2.25A2.25 2.25 0 013.25 0h4.793c.331 0 .65.132.884.366l3.207 3.207c.076.076.141.161.195.253a.75.75 0 01.201.144l2.104 2.103c.234.235.366.553.366.884v6.793A2.25 2.25 0 0112.75 16h-7a2.25 2.25 0 01-2.25-2.25v-.25h-.25A2.25 2.25 0 011 11.25v-9zm2.25-.75a.75.75 0 00-.75.75v9c0 .414.336.75.75.75h7a.75.75 0 00.75-.75V6H7.75A.75.75 0 017 5.25V1.5H3.25zm5.25.56V4.5h2.44L8.5 2.06zm4 9.19V6.06l1 1v6.69a.75.75 0 01-.75.75h-7a.75.75 0 01-.75-.75v-.25h5.25a2.25 2.25 0 002.25-2.25z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/files/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/files/property-24.scss
new file mode 100644
index 0000000000..a3e69e52cf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/files/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-files-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5.25 1A2.25 2.25 0 003 3.25v11.5A2.25 2.25 0 005.25 17H6v.75A2.25 2.25 0 008.25 20H9v.75A2.25 2.25 0 0011.25 23h8.5A2.25 2.25 0 0022 20.75v-7.879a2.25 2.25 0 00-.659-1.59l-2.31-2.311a.746.746 0 00-.312-.187 2.25 2.25 0 00-.378-.503l-2.31-2.31a.746.746 0 00-.312-.187 2.25 2.25 0 00-.378-.503L11.72 1.66A2.25 2.25 0 0010.129 1H5.25zM4.5 3.25a.75.75 0 01.75-.75H10v3.75c0 .414.336.75.75.75h3.75v7.75a.75.75 0 01-.75.75h-8.5a.75.75 0 01-.75-.75V3.25zm8.94 2.25L11.5 3.56V5.5h1.94zM19 11.06v6.69A2.25 2.25 0 0116.75 20H10.5v.75c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-7.879a.75.75 0 00-.22-.53L19 11.061zM7.5 17.75V17h6.25A2.25 2.25 0 0016 14.75V8.06l1.28 1.281c.141.14.22.331.22.53v7.879a.75.75 0 01-.75.75h-8.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/film/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/film/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/film/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/film/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/film/keyframes.scss
new file mode 100644
index 0000000000..1040ff130e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/film/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-film {
+  50% {
+
+    background-color: var(--icon-color, var(--color-film-500, currentColor));
+    -webkit-mask-image: var(--icon-film-24);
+    mask-image: var(--icon-film-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-film-500, currentColor));
+    -webkit-mask-image: var(--icon-film-16);
+    mask-image: var(--icon-film-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/film/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/film/placeholders.scss
new file mode 100644
index 0000000000..2479c28ef3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/film/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-film-icon {
+  --icon-name: icon-film;
+  content: '';
+}
+%with-film-mask {
+  --icon-name: icon-film;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/film/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/film/property-16.scss
new file mode 100644
index 0000000000..1c68b4f047
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/film/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-film-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 0A2.25 2.25 0 000 2.25v11.5A2.25 2.25 0 002.25 16h11.5A2.25 2.25 0 0016 13.75V2.25A2.25 2.25 0 0013.75 0H2.25zM14.5 3.5V2.25a.75.75 0 00-.75-.75H12.5v2h2zm-2 1.5h2v2h-2V5zM11 1.5H5V7h6V1.5zm3.5 7v2h-2v-2h2zm0 3.5h-2v2.5h1.25a.75.75 0 00.75-.75V12zM11 8.5v6H5v-6h6zM1.5 12v1.75c0 .414.336.75.75.75H3.5V12h-2zm2-1.5h-2v-2h2v2zM1.5 7V5h2v2h-2zm0-3.5h2v-2H2.25a.75.75 0 00-.75.75V3.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/film/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/film/property-24.scss
new file mode 100644
index 0000000000..09efd20dde
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/film/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-film-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.75 1A2.75 2.75 0 001 3.75v16.5A2.75 2.75 0 003.75 23h16.5A2.75 2.75 0 0023 20.25V3.75A2.75 2.75 0 0020.25 1H3.75zM21.5 6V3.75c0-.69-.56-1.25-1.25-1.25H18V6h3.5zM18 7.5h3.5V11H18V7.5zm-1.5-5h-9V11h9V2.5zm5 10V16H18v-3.5h3.5zm0 5H18v4h2.25c.69 0 1.25-.56 1.25-1.25V17.5zm-5-5v9h-9v-9h9zm-14 5v2.75c0 .69.56 1.25 1.25 1.25H6v-4H2.5zM6 16H2.5v-3.5H6V16zm-3.5-5V7.5H6V11H2.5zm0-5H6V2.5H3.75c-.69 0-1.25.56-1.25 1.25V6z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/keyframes.scss
new file mode 100644
index 0000000000..b0de451a90
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-filter-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-filter-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-filter-circle-24);
+    mask-image: var(--icon-filter-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-filter-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-filter-circle-16);
+    mask-image: var(--icon-filter-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/placeholders.scss
new file mode 100644
index 0000000000..26852d3c31
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-filter-circle-icon {
+  --icon-name: icon-filter-circle;
+  content: '';
+}
+%with-filter-circle-mask {
+  --icon-name: icon-filter-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/property-16.scss
new file mode 100644
index 0000000000..17a0087a7e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-filter-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.75 7.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM3.5 5.75A.75.75 0 014.25 5h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM7 10a.75.75 0 000 1.5h2A.75.75 0 009 10H7z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/property-24.scss
new file mode 100644
index 0000000000..08f6934caf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-filter-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.25 12a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5zM5 8.75A.75.75 0 015.75 8h12.5a.75.75 0 010 1.5H5.75A.75.75 0 015 8.75zM10.75 16a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/keyframes.scss
new file mode 100644
index 0000000000..0f78ce7a6d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-filter-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-filter-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-filter-fill-24);
+    mask-image: var(--icon-filter-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-filter-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-filter-fill-16);
+    mask-image: var(--icon-filter-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/placeholders.scss
new file mode 100644
index 0000000000..c3300c0560
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-filter-fill-icon {
+  --icon-name: icon-filter-fill;
+  content: '';
+}
+%with-filter-fill-mask {
+  --icon-name: icon-filter-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/property-16.scss
new file mode 100644
index 0000000000..4b2945e7ab
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-filter-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM4.25 5a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5zm1.5 2.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zm.5 3.25A.75.75 0 017 10h2a.75.75 0 010 1.5H7a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/property-24.scss
new file mode 100644
index 0000000000..12d911b7c5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-filter-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM5 8.75A.75.75 0 015.75 8h12.5a.75.75 0 010 1.5H5.75A.75.75 0 015 8.75zm2.5 4a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zm2.5 4a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter/keyframes.scss
new file mode 100644
index 0000000000..4a83e8fad6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-filter {
+  50% {
+
+    background-color: var(--icon-color, var(--color-filter-500, currentColor));
+    -webkit-mask-image: var(--icon-filter-24);
+    mask-image: var(--icon-filter-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-filter-500, currentColor));
+    -webkit-mask-image: var(--icon-filter-16);
+    mask-image: var(--icon-filter-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter/placeholders.scss
new file mode 100644
index 0000000000..371ca7a77b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-filter-icon {
+  --icon-name: icon-filter;
+  content: '';
+}
+%with-filter-mask {
+  --icon-name: icon-filter;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter/property-16.scss
new file mode 100644
index 0000000000..166257ade1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-filter-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 3.75A.75.75 0 011.75 3h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 3.75zM3.5 7.75A.75.75 0 014.25 7h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM6.75 11a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/filter/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/filter/property-24.scss
new file mode 100644
index 0000000000..5b961e8751
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/filter/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-filter-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM6 11.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H6.75a.75.75 0 01-.75-.75zM9.75 16a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/keyframes.scss
new file mode 100644
index 0000000000..7bdece335d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-fingerprint {
+  50% {
+
+    background-color: var(--icon-color, var(--color-fingerprint-500, currentColor));
+    -webkit-mask-image: var(--icon-fingerprint-24);
+    mask-image: var(--icon-fingerprint-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-fingerprint-500, currentColor));
+    -webkit-mask-image: var(--icon-fingerprint-16);
+    mask-image: var(--icon-fingerprint-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/placeholders.scss
new file mode 100644
index 0000000000..a0de9961cf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-fingerprint-icon {
+  --icon-name: icon-fingerprint;
+  content: '';
+}
+%with-fingerprint-mask {
+  --icon-name: icon-fingerprint;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/property-16.scss
new file mode 100644
index 0000000000..3e27175951
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-fingerprint-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.925.827A7.583 7.583 0 0115.66 9.316a.75.75 0 11-1.463-.333 6.083 6.083 0 00-8.61-6.81.75.75 0 01-.662-1.346zM3.278 2.903a.75.75 0 01.143 1.05 6.058 6.058 0 00-1.087 2.332 26.684 26.684 0 01-.811 2.9.75.75 0 11-1.416-.495c.262-.747.514-1.634.765-2.737a7.558 7.558 0 011.355-2.907.75.75 0 011.05-.143zm.259 3.656a4.85 4.85 0 019.176-.859.75.75 0 01-1.375.6A3.35 3.35 0 005 6.891c-.174.766-.354 1.46-.543 2.098a.75.75 0 01-1.438-.426c.179-.603.35-1.265.519-2.005zm3.548-.682a2.117 2.117 0 013.244 2.226 38.526 38.526 0 01-.684 2.614.75.75 0 11-1.436-.434c.235-.777.452-1.608.658-2.512a.617.617 0 00-.945-.649.75.75 0 01-.837-1.245zm5.345 1.935a.75.75 0 01.565.897c-.57 2.505-1.25 4.627-2.178 6.609a.75.75 0 01-1.358-.636c.871-1.86 1.52-3.874 2.073-6.305a.75.75 0 01.898-.565zm-5.768.673a.75.75 0 01.518.926c-.531 1.874-1.146 3.384-1.93 4.794-.057.103-.115.205-.174.307a.75.75 0 01-1.298-.75c.054-.095.108-.19.16-.285.72-1.296 1.295-2.696 1.798-4.475a.75.75 0 01.926-.517zm-3.487 1.998a.75.75 0 01.384.988c-.218.497-.45.96-.698 1.407a.75.75 0 01-1.311-.728c.226-.407.437-.83.637-1.283a.75.75 0 01.988-.385zm11.361.295a.75.75 0 01.516.927 34.364 34.364 0 01-.833 2.556.75.75 0 11-1.406-.522c.291-.785.554-1.596.796-2.445a.75.75 0 01.927-.516zm-6.21 1.53c.381.16.561.6.401.982a22.529 22.529 0 01-1.088 2.243.75.75 0 11-1.31-.729 21.03 21.03 0 001.015-2.094.75.75 0 01.981-.402z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/property-24.scss
new file mode 100644
index 0000000000..c756b0b564
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/fingerprint/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-fingerprint-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M14.802 1.26c-3.792-.863-7.57.48-9.995 3.177A.75.75 0 105.923 5.44a8.841 8.841 0 018.546-2.718A8.8 8.8 0 0119.09 5.44a.75.75 0 001.118-1 10.3 10.3 0 00-5.407-3.18zM4.737 7.118a.75.75 0 00-1.318-.716 10.352 10.352 0 00-.998 2.65c-.466 2.05-.897 3.074-1.327 3.848a.75.75 0 101.312.728c.516-.929.99-2.095 1.478-4.244.185-.812.475-1.57.853-2.266zm16.857-.717a.75.75 0 00-1.317.718 8.807 8.807 0 01.855 6.187c-.385 1.694-.828 3.262-1.374 4.76a.75.75 0 001.409.514c.572-1.57 1.032-3.2 1.428-4.941.58-2.555.16-5.105-1-7.238zm-7.99.185a4.85 4.85 0 00-5.805 3.654 27.905 27.905 0 01-.82 2.94.75.75 0 101.418.49 29.39 29.39 0 00.865-3.097 3.35 3.35 0 016.426-.373.75.75 0 001.414-.502 4.847 4.847 0 00-3.498-3.112zm3.654 5.805a.75.75 0 10-1.463-.333c-.698 3.071-1.55 5.48-2.815 7.756-.383.69-.798 1.356-1.245 2.012a.75.75 0 001.239.845c.47-.69.91-1.394 1.318-2.13 1.35-2.43 2.245-4.98 2.966-8.15zm-10.135 4.17a.75.75 0 00-1.311-.73c-.488.88-1.082 1.754-1.874 2.767a.75.75 0 001.182.924c.826-1.057 1.468-1.997 2.003-2.962zm5.238-12.12a.75.75 0 01-.644.844 6.086 6.086 0 00-5.12 4.682c-.558 2.451-1.143 3.968-1.863 5.266a17.572 17.572 0 01-1.165 1.808.75.75 0 01-1.214-.882c.437-.601.778-1.134 1.067-1.655.635-1.142 1.177-2.517 1.712-4.87A7.586 7.586 0 0111.517 3.8a.75.75 0 01.844.643zm.951.045a.75.75 0 01.898-.565 7.583 7.583 0 015.713 9.076 44.944 44.944 0 01-.677 2.629.75.75 0 11-1.44-.42c.236-.81.453-1.654.654-2.542a6.083 6.083 0 00-4.583-7.28.75.75 0 01-.565-.898zm4.562 12.964a.75.75 0 01.426.972 28.137 28.137 0 01-1.619 3.447.75.75 0 01-1.311-.728 26.645 26.645 0 001.533-3.265.75.75 0 01.971-.426zm-4.876-8.198a2.115 2.115 0 00-1.88.485.75.75 0 10.999 1.12.615.615 0 011.013.595c-.446 1.962-.946 3.58-1.564 5.037a.75.75 0 001.38.586c.663-1.56 1.187-3.267 1.647-5.29a2.117 2.117 0 00-1.595-2.533zm-1.496 3.63a.75.75 0 00-1.447-.4c-.517 1.876-1.107 3.333-1.853 4.677-.563 1.013-1.231 1.993-2.066 3.066a.75.75 0 001.184.921c.868-1.117 1.584-2.162 2.193-3.259.813-1.463 1.444-3.033 1.989-5.005zm.4 6.333a.75.75 0 00-1.311-.729 25.143 25.143 0 01-1.871 2.858.75.75 0 001.201.898 26.641 26.641 0 001.981-3.027z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/flag/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/flag/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/flag/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/flag/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/flag/keyframes.scss
new file mode 100644
index 0000000000..d61fc0cc5b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/flag/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-flag {
+  50% {
+
+    background-color: var(--icon-color, var(--color-flag-500, currentColor));
+    -webkit-mask-image: var(--icon-flag-24);
+    mask-image: var(--icon-flag-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-flag-500, currentColor));
+    -webkit-mask-image: var(--icon-flag-16);
+    mask-image: var(--icon-flag-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/flag/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/flag/placeholders.scss
new file mode 100644
index 0000000000..a0b376c203
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/flag/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-flag-icon {
+  --icon-name: icon-flag;
+  content: '';
+}
+%with-flag-mask {
+  --icon-name: icon-flag;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/flag/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/flag/property-16.scss
new file mode 100644
index 0000000000..f10a137e3f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/flag/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-flag-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.375 1c-1.072 0-1.827.185-2.337.396a3.125 3.125 0 00-.58.309 2.006 2.006 0 00-.233.188l-.007.007-.004.004-.002.002s.898.871-.001.001A.75.75 0 002 2.43V14.25a.75.75 0 001.5 0v-3.275c.033-.016.07-.033.11-.05.31-.128.868-.282 1.765-.282.815 0 1.503.276 2.338.621l.043.018c.796.33 1.735.718 2.869.718 1.072 0 1.827-.185 2.337-.396a3.13 3.13 0 00.58-.309 2.03 2.03 0 00.214-.17l.01-.009.009-.009.008-.007.003-.004.002-.002s-.899-.872.001-.001A.75.75 0 0014 10.57V2.43a.75.75 0 00-1.27-.54 1.642 1.642 0 01-.34.186c-.31.128-.868.282-1.765.282-.815 0-1.503-.276-2.338-.621l-.043-.018C7.448 1.388 6.51 1 5.375 1zM3.5 9.379V2.832c.033-.016.07-.033.11-.05.31-.128.868-.282 1.765-.282.815 0 1.503.276 2.338.622l.043.017c.796.33 1.735.718 2.869.718.786 0 1.401-.1 1.875-.236v6.547a2.27 2.27 0 01-.11.05c-.31.128-.868.282-1.765.282-.815 0-1.503-.276-2.338-.622l-.043-.017c-.796-.33-1.735-.718-2.869-.718-.786 0-1.401.1-1.875.236z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/flag/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/flag/property-24.scss
new file mode 100644
index 0000000000..1d8e616ade
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/flag/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-flag-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7.875 1c-1.632 0-2.76.273-3.502.572-.371.149-.643.303-.83.429a2.719 2.719 0 00-.22.162l-.104.094A.75.75 0 003 2.786V22.25a.75.75 0 001.5 0V15.6c.104-.06.246-.133.432-.208.546-.219 1.481-.463 2.943-.463 1.382 0 2.543.458 3.845.981l.044.018c1.264.508 2.669 1.072 4.361 1.072 1.632 0 2.76-.273 3.502-.572.371-.149.643-.303.83-.429 0 0 .184-.115.325-.256a.75.75 0 00.218-.529V2.786a.75.75 0 00-1.27-.541l-.008.007a1.23 1.23 0 01-.099.072 3.038 3.038 0 01-.555.284c-.546.219-1.481.463-2.943.463-1.382 0-2.543-.458-3.845-.981l-.044-.018C10.972 1.564 9.567 1 7.875 1zM4.5 13.951V3.171c.104-.06.246-.133.432-.207.546-.22 1.481-.464 2.943-.464 1.382 0 2.543.458 3.845.982l.044.017c1.264.508 2.669 1.072 4.361 1.072 1.541 0 2.633-.244 3.375-.522v10.78c-.104.06-.246.133-.432.207-.546.22-1.481.464-2.943.464-1.382 0-2.543-.458-3.845-.982l-.044-.017c-1.264-.508-2.669-1.072-4.361-1.072-1.541 0-2.633.243-3.375.522z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/keyframes.scss
new file mode 100644
index 0000000000..b774e296fc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-folder-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-folder-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-fill-24);
+    mask-image: var(--icon-folder-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-folder-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-fill-16);
+    mask-image: var(--icon-folder-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/placeholders.scss
new file mode 100644
index 0000000000..fbde08b91b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-folder-fill-icon {
+  --icon-name: icon-folder-fill;
+  content: '';
+}
+%with-folder-fill-mask {
+  --icon-name: icon-folder-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/property-16.scss
new file mode 100644
index 0000000000..138a908f87
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M2.25 1A2.25 2.25 0 000 3.25v1c0 .414.336.75.75.75h12.5a.75.75 0 010 1.5H.75a.75.75 0 00-.75.75v5.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-7.5A2.25 2.25 0 0013.75 3H9.871a.75.75 0 01-.53-.22L8.22 1.66A2.25 2.25 0 006.629 1H2.25z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/property-24.scss
new file mode 100644
index 0000000000..ebc945440a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M3.75 2A2.75 2.75 0 001 4.75v1c0 .414.336.75.75.75h18.5a.75.75 0 010 1.5H1.75a.75.75 0 00-.75.75v10.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V6.75A2.75 2.75 0 0020.25 4h-7.172a1.25 1.25 0 01-.883-.366l-.829-.829A2.75 2.75 0 009.422 2H3.75z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/keyframes.scss
new file mode 100644
index 0000000000..bfb1b3368d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-folder-minus-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-folder-minus-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-minus-fill-24);
+    mask-image: var(--icon-folder-minus-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-folder-minus-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-minus-fill-16);
+    mask-image: var(--icon-folder-minus-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/placeholders.scss
new file mode 100644
index 0000000000..a2d84dd927
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-folder-minus-fill-icon {
+  --icon-name: icon-folder-minus-fill;
+  content: '';
+}
+%with-folder-minus-fill-mask {
+  --icon-name: icon-folder-minus-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/property-16.scss
new file mode 100644
index 0000000000..f5d2104a57
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-minus-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-7.5A2.25 2.25 0 0013.75 3H9.871a.75.75 0 01-.53-.22L8.22 1.66A2.25 2.25 0 006.629 1H2.25zM5 8.253a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/property-24.scss
new file mode 100644
index 0000000000..6323e3b5af
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-minus-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.75 2A2.75 2.75 0 001 4.75v1c0 .414.336.75.75.75h18.5a.75.75 0 010 1.5H1.75a.75.75 0 00-.75.75v10.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V6.75A2.75 2.75 0 0020.25 4h-7.172a1.25 1.25 0 01-.883-.366l-.829-.829A2.75 2.75 0 009.422 2H3.75zM8 13.75a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/keyframes.scss
new file mode 100644
index 0000000000..d292fb2dd7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-folder-minus {
+  50% {
+
+    background-color: var(--icon-color, var(--color-folder-minus-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-minus-24);
+    mask-image: var(--icon-folder-minus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-folder-minus-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-minus-16);
+    mask-image: var(--icon-folder-minus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/placeholders.scss
new file mode 100644
index 0000000000..89a9fb7aa3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-folder-minus-icon {
+  --icon-name: icon-folder-minus;
+  content: '';
+}
+%with-folder-minus-mask {
+  --icon-name: icon-folder-minus;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/property-16.scss
new file mode 100644
index 0000000000..8377734822
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-minus-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.75 7.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/><path fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-7.5A2.25 2.25 0 0013.75 3H9.871a.75.75 0 01-.53-.22L8.22 1.66A2.25 2.25 0 006.629 1H2.25zM1.5 3.25a.75.75 0 01.75-.75h4.379a.75.75 0 01.53.22L8.28 3.84a2.25 2.25 0 001.591.659h3.879a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/property-24.scss
new file mode 100644
index 0000000000..9a5c6a80c0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-minus/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-minus-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.75 13a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"/><path fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h5.672c.729 0 1.428.29 1.944.805l.829.829c.234.234.552.366.883.366h7.172A2.75 2.75 0 0123 6.75v12.5A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25V4.75zM3.75 3.5c-.69 0-1.25.56-1.25 1.25V7h16.75a.75.75 0 010 1.5H2.5v10.75c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25h-7.172a2.75 2.75 0 01-1.944-.805l-.829-.829a1.25 1.25 0 00-.883-.366H3.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/index.scss
new file mode 100644
index 0000000000..7e9568b720
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../folder/property-16';
+        @import '../folder/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/keyframes.scss
new file mode 100644
index 0000000000..dab3443e50
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-folder-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-folder-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-24);
+    mask-image: var(--icon-folder-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-folder-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-16);
+    mask-image: var(--icon-folder-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/placeholders.scss
new file mode 100644
index 0000000000..e7c5c89d83
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-folder-outline-icon {
+  --icon-name: icon-folder-outline;
+  content: '';
+}
+%with-folder-outline-mask {
+  --icon-name: icon-folder-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/keyframes.scss
new file mode 100644
index 0000000000..b985b8e0e9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-folder-plus-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-folder-plus-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-plus-fill-24);
+    mask-image: var(--icon-folder-plus-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-folder-plus-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-plus-fill-16);
+    mask-image: var(--icon-folder-plus-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/placeholders.scss
new file mode 100644
index 0000000000..7b5d6e9580
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-folder-plus-fill-icon {
+  --icon-name: icon-folder-plus-fill;
+  content: '';
+}
+%with-folder-plus-fill-mask {
+  --icon-name: icon-folder-plus-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/property-16.scss
new file mode 100644
index 0000000000..c680fa0063
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-plus-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h4.379a2.25 2.25 0 011.59.659L9.342 2.78c.14.141.331.22.53.22h3.879A2.25 2.25 0 0116 5.25v7.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-9.5zM7.75 6a.75.75 0 01.75.75V8h1.25a.75.75 0 010 1.5H8.5v1.25a.75.75 0 01-1.5 0V9.5H5.75a.75.75 0 010-1.5H7V6.75A.75.75 0 017.75 6z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/property-24.scss
new file mode 100644
index 0000000000..da94b90e55
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-plus-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h5.672c.729 0 1.428.29 1.944.805l.829.829c.234.234.552.366.883.366h7.172A2.75 2.75 0 0123 6.75v12.5A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25V8.75A.75.75 0 011.75 8h18.5a.75.75 0 000-1.5H1.75A.75.75 0 011 5.75v-1zm10.75 5.75a.75.75 0 01.75.75v2.25h2.25a.75.75 0 010 1.5H12.5v2.25a.75.75 0 01-1.5 0V15H8.75a.75.75 0 010-1.5H11v-2.25a.75.75 0 01.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/keyframes.scss
new file mode 100644
index 0000000000..56e904d100
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-folder-plus {
+  50% {
+
+    background-color: var(--icon-color, var(--color-folder-plus-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-plus-24);
+    mask-image: var(--icon-folder-plus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-folder-plus-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-plus-16);
+    mask-image: var(--icon-folder-plus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/placeholders.scss
new file mode 100644
index 0000000000..81db1786f8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-folder-plus-icon {
+  --icon-name: icon-folder-plus;
+  content: '';
+}
+%with-folder-plus-mask {
+  --icon-name: icon-folder-plus;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/property-16.scss
new file mode 100644
index 0000000000..208f6176d5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-plus-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 6a.75.75 0 01.75.75V8h1.25a.75.75 0 010 1.5H8.5v1.25a.75.75 0 01-1.5 0V9.5H5.75a.75.75 0 010-1.5H7V6.75A.75.75 0 017.75 6z"/><path fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h4.379a2.25 2.25 0 011.59.659L9.342 2.78c.14.141.331.22.53.22h3.879A2.25 2.25 0 0116 5.25v7.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75v-7.5a.75.75 0 00-.75-.75H9.871a2.25 2.25 0 01-1.59-.659L7.158 2.72a.75.75 0 00-.53-.22H2.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/property-24.scss
new file mode 100644
index 0000000000..dbc731b05d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-plus/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-plus-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 10.5a.75.75 0 01.75.75v2.25h2.25a.75.75 0 010 1.5H12.5v2.25a.75.75 0 01-1.5 0V15H8.75a.75.75 0 010-1.5H11v-2.25a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M3.75 2A2.75 2.75 0 001 4.75v14.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V6.75A2.75 2.75 0 0020.25 4h-7.172a1.25 1.25 0 01-.883-.366l-.829-.829A2.75 2.75 0 009.422 2H3.75zM2.5 4.75c0-.69.56-1.25 1.25-1.25h5.672c.331 0 .649.132.883.366l.829.829a2.75 2.75 0 001.944.805h7.172c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V8.5h16.75a.75.75 0 000-1.5H2.5V4.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/keyframes.scss
new file mode 100644
index 0000000000..2629e68d7e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-folder-star {
+  50% {
+
+    background-color: var(--icon-color, var(--color-folder-star-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-star-24);
+    mask-image: var(--icon-folder-star-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-folder-star-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-star-16);
+    mask-image: var(--icon-folder-star-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/placeholders.scss
new file mode 100644
index 0000000000..4b314301fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-folder-star-icon {
+  --icon-name: icon-folder-star;
+  content: '';
+}
+%with-folder-star-mask {
+  --icon-name: icon-folder-star;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/property-16.scss
new file mode 100644
index 0000000000..2022deac91
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-star-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.5 3.25a.75.75 0 01.75-.75h4.379a.75.75 0 01.53.22L8.28 3.84a2.25 2.25 0 001.591.659h3.879a.75.75 0 01.75.75V6.5a.75.75 0 001.5 0V5.25A2.25 2.25 0 0013.75 3H9.87a.75.75 0 01-.53-.22L8.22 1.66A2.25 2.25 0 006.629 1H2.25A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h2.5a.75.75 0 100-1.5h-2.5a.75.75 0 01-.75-.75v-9.5z"/><path fill-rule="evenodd" d="M11.179 5.431a.75.75 0 00-1.358 0L8.523 8.196l-2.887.444a.75.75 0 00-.409 1.279l2.201 2.142-.66 3.029a.75.75 0 001.089.82l2.643-1.43 2.643 1.43a.75.75 0 001.09-.82l-.662-3.03 2.202-2.141a.75.75 0 00-.41-1.28l-2.886-.443-1.298-2.765zM9.71 9.195l.789-1.68.789 1.68a.75.75 0 00.565.423l1.794.276-1.421 1.382a.75.75 0 00-.21.697l.402 1.839-1.562-.845a.75.75 0 00-.714 0l-1.562.845.402-1.838a.75.75 0 00-.21-.698l-1.42-1.382 1.793-.276a.75.75 0 00.565-.423z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/property-24.scss
new file mode 100644
index 0000000000..0011701226
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-star/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-star-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 3.5c-.69 0-1.25.56-1.25 1.25V7h16.75a.75.75 0 010 1.5H2.5v10.75c0 .69.56 1.25 1.25 1.25h6.75a.75.75 0 010 1.5H3.75A2.75 2.75 0 011 19.25V4.75A2.75 2.75 0 013.75 2h5.672c.729 0 1.428.29 1.944.805l.829.829c.234.234.552.366.883.366h7.172A2.75 2.75 0 0123 6.75v5.5a.75.75 0 01-1.5 0v-5.5c0-.69-.56-1.25-1.25-1.25h-7.172a2.75 2.75 0 01-1.944-.805l-.829-.829a1.25 1.25 0 00-.883-.366H3.75z"/><path fill-rule="evenodd" d="M17.674 10.42a.75.75 0 00-1.348 0l-1.68 3.43-3.755.554a.75.75 0 00-.416 1.277l2.72 2.67-.642 3.773a.75.75 0 001.09.789L17 21.133l3.357 1.78a.75.75 0 001.09-.789l-.642-3.773 2.72-2.67a.75.75 0 00-.416-1.277l-3.755-.553-1.68-3.43zm-1.854 4.445l1.18-2.41 1.18 2.41a.75.75 0 00.565.412l2.652.39-1.922 1.888a.75.75 0 00-.214.661l.452 2.658-2.362-1.252a.75.75 0 00-.702 0l-2.362 1.252.452-2.658a.75.75 0 00-.214-.661l-1.922-1.887 2.652-.391a.75.75 0 00.565-.412z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/keyframes.scss
new file mode 100644
index 0000000000..5040e8c3df
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-folder-users {
+  50% {
+
+    background-color: var(--icon-color, var(--color-folder-users-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-users-24);
+    mask-image: var(--icon-folder-users-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-folder-users-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-users-16);
+    mask-image: var(--icon-folder-users-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/placeholders.scss
new file mode 100644
index 0000000000..6adce8ae9f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-folder-users-icon {
+  --icon-name: icon-folder-users;
+  content: '';
+}
+%with-folder-users-mask {
+  --icon-name: icon-folder-users;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/property-16.scss
new file mode 100644
index 0000000000..a1e575a3b4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-users-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.25 2.5a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h.25a.75.75 0 010 1.5h-.25A2.25 2.25 0 010 12.75v-9.5A2.25 2.25 0 012.25 1h4.379a2.25 2.25 0 011.59.659L9.342 2.78c.14.141.331.22.53.22h3.879A2.25 2.25 0 0116 5.25v5.25a.75.75 0 01-1.5 0V5.25a.75.75 0 00-.75-.75H9.871a2.25 2.25 0 01-1.59-.659L7.158 2.72a.75.75 0 00-.53-.22H2.25z"/><path d="M4.574 11.76c.383-.463.936-.76 1.551-.76h2.75c.615 0 1.168.297 1.55.76A2.61 2.61 0 0111 13.418v.833a.75.75 0 01-1.5 0v-.833c0-.285-.095-.536-.231-.702-.134-.161-.28-.215-.394-.215h-2.75c-.114 0-.26.054-.394.215a1.113 1.113 0 00-.231.702v.833a.75.75 0 01-1.5 0v-.833c0-.6.195-1.197.574-1.656z"/><path fill-rule="evenodd" d="M7.5 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM6.5 8a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"/><path d="M11.518 11.589a.75.75 0 01.893-.572c.567.125 1.089.41 1.474.834.388.426.614.969.615 1.546v.853a.75.75 0 01-1.5 0v-.851a.8.8 0 00-.224-.538 1.306 1.306 0 00-.687-.379.75.75 0 01-.572-.893zM11.42 5.52a.75.75 0 10-.34 1.46c.283.066.52.212.682.4A.95.95 0 0112 8a.95.95 0 01-.238.62 1.272 1.272 0 01-.681.4.75.75 0 10.338 1.46 2.77 2.77 0 001.481-.884A2.45 2.45 0 0013.5 8a2.45 2.45 0 00-.6-1.596 2.77 2.77 0 00-1.48-.885z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/property-24.scss
new file mode 100644
index 0000000000..6f1e6394a9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder-users/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-users-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.5 4.75c0-.69.56-1.25 1.25-1.25h5.672c.331 0 .649.132.883.366l.829.829a2.75 2.75 0 001.944.805h7.172c.69 0 1.25.56 1.25 1.25v9a.75.75 0 001.5 0v-9A2.75 2.75 0 0020.25 4h-7.172a1.25 1.25 0 01-.883-.366l-.829-.829A2.75 2.75 0 009.422 2H3.75A2.75 2.75 0 001 4.75v14.5A2.75 2.75 0 003.75 22h1.5a.75.75 0 000-1.5h-1.5c-.69 0-1.25-.56-1.25-1.25V8.5h16.75a.75.75 0 000-1.5H2.5V4.75z"/><path d="M8.318 17.928A2.783 2.783 0 0110.375 17h4.25c.786 0 1.524.344 2.057.928.53.583.818 1.359.818 2.155v1.167a.75.75 0 11-1.5 0v-1.167c0-.441-.16-.852-.427-1.145a1.284 1.284 0 00-.948-.438h-4.25c-.34 0-.684.148-.948.438A1.705 1.705 0 009 20.083v1.167a.75.75 0 11-1.5 0v-1.167c0-.796.287-1.572.818-2.155z"/><path fill-rule="evenodd" d="M12.5 10a3 3 0 100 6 3 3 0 000-6zM11 13a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/><path d="M18.275 17.559a.75.75 0 01.916-.534 3.08 3.08 0 011.667 1.12c.417.549.642 1.221.642 1.912v1.193a.75.75 0 11-1.5 0v-1.192c0-.367-.12-.72-.337-1.007a1.58 1.58 0 00-.854-.576.75.75 0 01-.534-.916zM17.186 10.023a.75.75 0 00-.372 1.454A1.578 1.578 0 0118 13a1.57 1.57 0 01-1.186 1.523.75.75 0 10.372 1.454A3.078 3.078 0 0019.5 13a3.07 3.07 0 00-2.314-2.977z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder/keyframes.scss
new file mode 100644
index 0000000000..a591f5ff68
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-folder {
+  50% {
+
+    background-color: var(--icon-color, var(--color-folder-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-24);
+    mask-image: var(--icon-folder-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-folder-500, currentColor));
+    -webkit-mask-image: var(--icon-folder-16);
+    mask-image: var(--icon-folder-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder/placeholders.scss
new file mode 100644
index 0000000000..aa8ee6c569
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-folder-icon {
+  --icon-name: icon-folder;
+  content: '';
+}
+%with-folder-mask {
+  --icon-name: icon-folder;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder/property-16.scss
new file mode 100644
index 0000000000..7c09444385
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-7.5A2.25 2.25 0 0013.75 3H9.871a.75.75 0 01-.53-.22L8.22 1.66A2.25 2.25 0 006.629 1H2.25zM1.5 3.25a.75.75 0 01.75-.75h4.379a.75.75 0 01.53.22L8.28 3.84a2.25 2.25 0 001.591.659h3.879a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75V7h10.75a.75.75 0 000-1.5H1.5V3.25z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/folder/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/folder/property-24.scss
new file mode 100644
index 0000000000..df0799535d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/folder/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-folder-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.75 2A2.75 2.75 0 001 4.75v14.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V6.75A2.75 2.75 0 0020.25 4h-7.172a1.25 1.25 0 01-.883-.366l-.829-.829A2.75 2.75 0 009.422 2H3.75zM2.5 4.75c0-.69.56-1.25 1.25-1.25h5.672c.331 0 .649.132.883.366l.829.829a2.75 2.75 0 001.944.805h7.172c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V8.5h16.75a.75.75 0 000-1.5H2.5V4.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/frown/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/frown/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/frown/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/frown/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/frown/keyframes.scss
new file mode 100644
index 0000000000..c62640b344
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/frown/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-frown {
+  50% {
+
+    background-color: var(--icon-color, var(--color-frown-500, currentColor));
+    -webkit-mask-image: var(--icon-frown-24);
+    mask-image: var(--icon-frown-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-frown-500, currentColor));
+    -webkit-mask-image: var(--icon-frown-16);
+    mask-image: var(--icon-frown-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/frown/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/frown/placeholders.scss
new file mode 100644
index 0000000000..03f0453374
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/frown/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-frown-icon {
+  --icon-name: icon-frown;
+  content: '';
+}
+%with-frown-mask {
+  --icon-name: icon-frown;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/frown/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/frown/property-16.scss
new file mode 100644
index 0000000000..fa2c211c2f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/frown/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-frown-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5 6a1 1 0 011-1h.007a1 1 0 010 2H6a1 1 0 01-1-1zM10 5a1 1 0 100 2h.007a1 1 0 100-2H10z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/><path d="M5.785 9.777C6.279 9.403 7.035 9 8 9c.965 0 1.721.403 2.215.777.25.189.441.377.573.52.078.085.153.171.22.265a.75.75 0 01-.17 1.047.759.759 0 01-1.046-.17 2.736 2.736 0 00-.482-.466c-.331-.25-.776-.473-1.31-.473-.535 0-.979.222-1.31.473-.177.134-.35.29-.484.469a.75.75 0 01-1.215-.88l.001-.001c.217-.3.5-.562.793-.784z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/frown/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/frown/property-24.scss
new file mode 100644
index 0000000000..ed7a348c32
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/frown/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-frown-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.457 14.424C9.27 13.746 10.5 13 12 13s2.73.746 3.543 1.424c.413.344.738.687.961.944.126.145.25.294.36.451a.75.75 0 01-1.227.862h-.001v-.002a4.882 4.882 0 00-.265-.328 6.91 6.91 0 00-.789-.775C13.895 15.004 13 14.5 12 14.5c-1 0-1.895.504-2.582 1.076a6.21 6.21 0 00-1.054 1.104.75.75 0 01-1.228-.86 5.67 5.67 0 01.36-.452c.223-.257.548-.6.961-.944zM8 9a1 1 0 011-1h.01a1 1 0 110 2H9a1 1 0 01-1-1zM15 8a1 1 0 100 2h.01a1 1 0 100-2H15z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/index.scss
new file mode 100644
index 0000000000..7b675d48e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../gateway/property-16';
+        @import '../gateway/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/keyframes.scss
new file mode 100644
index 0000000000..9c53987e50
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-gateway {
+  50% {
+
+    background-color: var(--icon-color, var(--color-gateway-500, currentColor));
+    -webkit-mask-image: var(--icon-gateway-24);
+    mask-image: var(--icon-gateway-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-gateway-500, currentColor));
+    -webkit-mask-image: var(--icon-gateway-16);
+    mask-image: var(--icon-gateway-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/placeholders.scss
new file mode 100644
index 0000000000..9af9e113f1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-gateway-icon {
+  --icon-name: icon-gateway;
+  content: '';
+}
+%with-gateway-mask {
+  --icon-name: icon-gateway;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/property-16.scss
new file mode 100644
index 0000000000..6b429e14a7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gateway-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.537 5.354c.415-1.153.971-2.12 1.695-2.794C5.938 1.903 6.83 1.5 8 1.5c1.251 0 2.188.46 2.921 1.21.752.768 1.31 1.865 1.71 3.146.802 2.566.901 5.638.862 7.563-.013.594-.508 1.081-1.16 1.081H3.668c-.653 0-1.148-.487-1.16-1.083-.012-.545-.012-1.189.012-1.89a.75.75 0 10-1.499-.053 35.678 35.678 0 00-.013 1.974C1.038 14.916 2.256 16 3.668 16h8.665c1.41 0 2.63-1.082 2.66-2.55.04-1.968-.054-5.238-.93-8.041-.438-1.404-1.09-2.747-2.07-3.749C10.994.64 9.677 0 8 0 6.439 0 5.185.554 4.21 1.462c-.96.893-1.622 2.1-2.084 3.384a.75.75 0 101.411.508z"/><path d="M6.22 4.47a.75.75 0 011.06 0l3.25 3.25.008.008a.75.75 0 01-.008 1.052l-3.25 3.25a.75.75 0 01-1.06-1.06L8.19 9H1a.75.75 0 010-1.5h7.19L6.22 5.53a.75.75 0 010-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/property-24.scss
new file mode 100644
index 0000000000..3329ae64a2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gateway/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gateway-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5.052 8.165c.624-1.654 1.469-3.072 2.593-4.071C8.753 3.108 10.164 2.5 12 2.5c2.06 0 3.592.765 4.763 1.987 1.19 1.242 2.03 2.984 2.608 4.946 1.155 3.929 1.19 8.503 1.096 10.985-.023.6-.523 1.082-1.173 1.082H4.706c-.648 0-1.15-.484-1.173-1.086a46.334 46.334 0 01.016-3.879.75.75 0 10-1.498-.07 47.832 47.832 0 00-.017 4.006C2.09 21.924 3.297 23 4.706 23h14.588c1.406 0 2.616-1.07 2.672-2.525.096-2.523.07-7.297-1.156-11.465-.614-2.086-1.545-4.08-2.964-5.561C16.405 1.946 14.488 1 12 1c-2.207 0-3.971.745-5.352 1.973-1.365 1.214-2.324 2.871-3 4.662a.75.75 0 001.404.53z"/><path d="M9.207 6.482a.75.75 0 011.06-.025l5.5 5.25c.14.133.23.322.233.531v.024a.75.75 0 01-.232.53l-5.5 5.25a.75.75 0 01-1.036-1.085L13.378 13H1.75a.75.75 0 010-1.5h11.628L9.232 7.543a.75.75 0 01-.025-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/keyframes.scss
new file mode 100644
index 0000000000..c88ec5f824
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-gcp-color {
+  50% {
+    background-image: var(--icon-gcp-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-gcp-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/placeholders.scss
new file mode 100644
index 0000000000..837a72d446
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-gcp-color-icon {
+  --icon-name: icon-gcp-color;
+  content: '';
+}
+%with-gcp-color-mask {
+  --icon-name: icon-gcp-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/property-16.scss
new file mode 100644
index 0000000000..ef9564a23c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gcp-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23EA4335" d="M10.313 5.376l1.887-1.5-.332-.414a5.935 5.935 0 00-5.586-1.217 5.89 5.89 0 00-3.978 4.084c-.03.113.312-.098.463-.056l2.608-.428s.127-.124.201-.205c1.16-1.266 3.126-1.432 4.465-.354l.272.09z"/><path fill="%234285F4" d="M13.637 6.3a5.835 5.835 0 00-1.77-2.838l-1.83 1.819a3.226 3.226 0 011.193 2.565v.323c.9 0 1.63.725 1.63 1.62 0 .893-.73 1.618-1.63 1.618l-3.257-.002-.325.035v2.507l.325.053h3.257a4.234 4.234 0 004.08-2.962A4.2 4.2 0 0013.636 6.3z"/><path fill="%2334A853" d="M4.711 13.999H7.97v-2.594H4.71c-.232 0-.461-.066-.672-.161l-.458.14-1.313 1.297-.114.447a4.254 4.254 0 002.557.87z"/><path fill="%23FBBC05" d="M4.711 5.572A4.234 4.234 0 00.721 8.44a4.206 4.206 0 001.433 4.688l1.89-1.884a1.617 1.617 0 01.44-3.079 1.63 1.63 0 011.714.937l1.89-1.879a4.24 4.24 0 00-3.377-1.65z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/property-24.scss
new file mode 100644
index 0000000000..46b74f289c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gcp-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23EA4335" d="M15.084 8.501l2.516-2-.443-.551A7.913 7.913 0 009.71 4.326a7.853 7.853 0 00-5.304 5.446c-.04.15.416-.13.618-.075l3.476-.57s.17-.166.269-.273c1.546-1.689 4.168-1.91 5.954-.473l.362.12z"/><path fill="%234285F4" d="M19.516 9.733a7.78 7.78 0 00-2.361-3.784l-2.44 2.426a4.301 4.301 0 011.592 3.42v.43c1.2 0 2.172.967 2.172 2.16a2.165 2.165 0 01-2.172 2.158l-4.343-.003-.433.046v3.344l.433.07h4.343c2.49.02 4.7-1.585 5.438-3.95a5.599 5.599 0 00-2.23-6.317z"/><path fill="%2334A853" d="M7.615 19.998h4.343V16.54H7.615c-.31 0-.615-.087-.897-.215l-.61.188-1.75 1.728-.153.596c.982.738 2.18 1.167 3.41 1.161z"/><path fill="%23FBBC05" d="M7.615 8.763a5.646 5.646 0 00-5.32 3.823 5.608 5.608 0 001.91 6.252l2.52-2.513a2.156 2.156 0 01-1.256-2.272 2.165 2.165 0 011.843-1.833 2.174 2.174 0 012.285 1.249l2.52-2.505a5.654 5.654 0 00-4.502-2.201z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/index.scss
new file mode 100644
index 0000000000..56a5eef90a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../gcp-color/property-16';
+        @import '../gcp-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/keyframes.scss
new file mode 100644
index 0000000000..e79503f9d2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-gcp {
+  50% {
+
+    background-color: var(--icon-color, var(--color-gcp-500, currentColor));
+    -webkit-mask-image: var(--icon-gcp-color-24);
+    mask-image: var(--icon-gcp-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-gcp-500, currentColor));
+    -webkit-mask-image: var(--icon-gcp-color-16);
+    mask-image: var(--icon-gcp-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/placeholders.scss
new file mode 100644
index 0000000000..ba5f4de195
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-gcp-icon {
+  --icon-name: icon-gcp;
+  content: '';
+}
+%with-gcp-mask {
+  --icon-name: icon-gcp;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/property-16.scss
new file mode 100644
index 0000000000..80c231fdea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gcp-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.87 3.465l-.002-.003a5.935 5.935 0 00-5.586-1.217 5.89 5.89 0 00-3.98 4.092 4.206 4.206 0 00-.149 6.792 4.255 4.255 0 002.558.87h6.52a4.234 4.234 0 004.078-2.961A4.2 4.2 0 0013.637 6.3a5.835 5.835 0 00-1.767-2.835zm-7.828 7.78c.21.095.438.16.67.16l6.518.002c.9 0 1.63-.725 1.63-1.619s-.73-1.619-1.63-1.619v-.323a3.226 3.226 0 00-1.187-2.56h-.002c-1.339-1.078-3.305-.912-4.465.354l-.014.015c.996.2 1.897.751 2.525 1.568L6.198 9.101a1.63 1.63 0 00-3.097.439 1.617 1.617 0 00.942 1.704l-.001.001z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/property-24.scss
new file mode 100644
index 0000000000..26234e9caa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gcp/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gcp-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.87 3.465l-.002-.003a5.935 5.935 0 00-5.586-1.217 5.89 5.89 0 00-3.98 4.092 4.206 4.206 0 00-.149 6.792 4.255 4.255 0 002.558.87h6.52a4.234 4.234 0 004.078-2.961A4.2 4.2 0 0013.637 6.3a5.835 5.835 0 00-1.767-2.835zm-7.828 7.78c.21.095.438.16.67.16l6.518.002c.9 0 1.63-.725 1.63-1.619s-.73-1.619-1.63-1.619v-.323a3.226 3.226 0 00-1.187-2.56h-.002c-1.339-1.078-3.305-.912-4.465.354l-.014.015c.996.2 1.897.751 2.525 1.568L6.198 9.101a1.63 1.63 0 00-3.097.439 1.617 1.617 0 00.942 1.704l-.001.001z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/index.scss
new file mode 100644
index 0000000000..c516f1ea75
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../gift/property-16';
+        @import '../gift/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/keyframes.scss
new file mode 100644
index 0000000000..3ad74ffbbf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-gift-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-gift-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-gift-24);
+    mask-image: var(--icon-gift-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-gift-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-gift-16);
+    mask-image: var(--icon-gift-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/placeholders.scss
new file mode 100644
index 0000000000..3f2e7f6314
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-gift-fill-icon {
+  --icon-name: icon-gift-fill;
+  content: '';
+}
+%with-gift-fill-mask {
+  --icon-name: icon-gift-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/index.scss
new file mode 100644
index 0000000000..c516f1ea75
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../gift/property-16';
+        @import '../gift/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/keyframes.scss
new file mode 100644
index 0000000000..b1d9b115e5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-gift-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-gift-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-gift-24);
+    mask-image: var(--icon-gift-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-gift-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-gift-16);
+    mask-image: var(--icon-gift-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/placeholders.scss
new file mode 100644
index 0000000000..b287387969
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-gift-outline-icon {
+  --icon-name: icon-gift-outline;
+  content: '';
+}
+%with-gift-outline-mask {
+  --icon-name: icon-gift-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift/keyframes.scss
new file mode 100644
index 0000000000..6f3551fe0e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-gift {
+  50% {
+
+    background-color: var(--icon-color, var(--color-gift-500, currentColor));
+    -webkit-mask-image: var(--icon-gift-24);
+    mask-image: var(--icon-gift-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-gift-500, currentColor));
+    -webkit-mask-image: var(--icon-gift-16);
+    mask-image: var(--icon-gift-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift/placeholders.scss
new file mode 100644
index 0000000000..077df6359d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-gift-icon {
+  --icon-name: icon-gift;
+  content: '';
+}
+%with-gift-mask {
+  --icon-name: icon-gift;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift/property-16.scss
new file mode 100644
index 0000000000..ca352673da
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gift-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1.5 2.75c0 .438.103.866.297 1.25H.75a.75.75 0 00-.75.75v3.5c0 .414.336.75.75.75H2v6.25c0 .414.336.75.75.75h10.5a.75.75 0 00.75-.75V9h1.25a.75.75 0 00.75-.75v-3.5a.75.75 0 00-.75-.75h-.547A2.78 2.78 0 0014.21.81 2.697 2.697 0 0012.286 0c-1.8 0-2.878 1.318-3.46 2.394-.262.486-.449.967-.576 1.351a8.466 8.466 0 00-.577-1.351C7.093 1.318 6.013 0 4.214 0 3.49 0 2.798.293 2.29.81a2.769 2.769 0 00-.79 1.94zM4.214 1.5c-.317 0-.625.128-.854.361-.229.234-.36.553-.36.889 0 .336.131.655.36.889.23.233.537.361.854.361h2.537a6.754 6.754 0 00-.397-.894c-.5-.924-1.189-1.606-2.14-1.606zM9.75 4h2.537c.317 0 .625-.128.854-.361.229-.234.36-.553.36-.889 0-.336-.131-.655-.36-.889a1.197 1.197 0 00-.854-.361c-.951 0-1.64.682-2.14 1.606A6.753 6.753 0 009.75 4zM9 5.5v2h5.5v-2H9zm-1.5 0v2h-6v-2h6zm1.5 9h3.5V9H9v5.5zM7.5 9v5.5h-4V9h4z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gift/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gift/property-24.scss
new file mode 100644
index 0000000000..4c267bbfef
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gift/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gift-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.5 4.25c0 .63.192 1.235.54 1.75H2.75A1.75 1.75 0 001 7.75v3.5c0 .966.784 1.75 1.75 1.75H3v7.25A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V13h.25A1.75 1.75 0 0023 11.25v-3.5A1.75 1.75 0 0021.25 6h-.79c.348-.515.54-1.12.54-1.75 0-.88-.375-1.711-1.023-2.316A3.529 3.529 0 0017.571 1c-2.266 0-3.67 1.524-4.463 2.87a10.098 10.098 0 00-.842 1.858l-.016.047-.016-.047c-.17-.501-.44-1.177-.842-1.859C10.599 2.524 9.195 1 6.929 1c-.894 0-1.76.33-2.406.934A3.168 3.168 0 003.5 4.25zM6.929 2.5c-.528 0-1.024.196-1.383.53A1.669 1.669 0 005 4.25c0 .447.19.887.546 1.22.359.334.855.53 1.383.53h3.81a8.46 8.46 0 00-.64-1.37C9.42 3.477 8.413 2.5 6.93 2.5zM13.76 6h3.811c.528 0 1.024-.196 1.383-.53.356-.333.546-.773.546-1.22 0-.447-.19-.887-.546-1.22a2.029 2.029 0 00-1.383-.53c-1.484 0-2.49.976-3.17 2.13A8.46 8.46 0 0013.76 6zM13 7.5v4h8.25a.25.25 0 00.25-.25v-3.5a.25.25 0 00-.25-.25H13zm-1.5 0v4H2.75a.25.25 0 01-.25-.25v-3.5a.25.25 0 01.25-.25h8.75zm8 12.75V13H13v8.5h5.25c.69 0 1.25-.56 1.25-1.25zm-8 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V13h7v8.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/keyframes.scss
new file mode 100644
index 0000000000..fb8594ac6e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-git-branch {
+  50% {
+
+    background-color: var(--icon-color, var(--color-git-branch-500, currentColor));
+    -webkit-mask-image: var(--icon-git-branch-24);
+    mask-image: var(--icon-git-branch-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-git-branch-500, currentColor));
+    -webkit-mask-image: var(--icon-git-branch-16);
+    mask-image: var(--icon-git-branch-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/placeholders.scss
new file mode 100644
index 0000000000..ee7b3c606a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-git-branch-icon {
+  --icon-name: icon-git-branch;
+  content: '';
+}
+%with-git-branch-mask {
+  --icon-name: icon-git-branch;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/property-16.scss
new file mode 100644
index 0000000000..a082866373
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-git-branch-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M12.719 6.913A3.001 3.001 0 0012 1a3 3 0 00-.787 5.896c-.282 2.395-2.124 4.164-4.561 4.34A3.005 3.005 0 004.5 9.095V2A.75.75 0 003 2v7.095a3.001 3.001 0 103.658 3.643c3.26-.187 5.758-2.606 6.061-5.825zM10.5 4a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm-8.25 8a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/property-24.scss
new file mode 100644
index 0000000000..33c1152a1c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-branch/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-git-branch-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7 3.25a.75.75 0 00-1.5 0v10.83a3.501 3.501 0 104.171 4.162c2.447-.091 4.553-.979 6.073-2.498 1.467-1.468 2.345-3.481 2.486-5.82A3.501 3.501 0 0017.5 3a3.5 3.5 0 00-.773 6.914c-.136 1.976-.88 3.604-2.044 4.769-1.213 1.213-2.929 1.97-5.015 2.058A3.505 3.505 0 007 14.081V3.25zM17.5 8.5a2 2 0 100-4 2 2 0 000 4zm-13.25 9a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/keyframes.scss
new file mode 100644
index 0000000000..6b115f3a42
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-git-commit {
+  50% {
+
+    background-color: var(--icon-color, var(--color-git-commit-500, currentColor));
+    -webkit-mask-image: var(--icon-git-commit-24);
+    mask-image: var(--icon-git-commit-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-git-commit-500, currentColor));
+    -webkit-mask-image: var(--icon-git-commit-16);
+    mask-image: var(--icon-git-commit-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/placeholders.scss
new file mode 100644
index 0000000000..9967691de3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-git-commit-icon {
+  --icon-name: icon-git-commit;
+  content: '';
+}
+%with-git-commit-mask {
+  --icon-name: icon-git-commit;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/property-16.scss
new file mode 100644
index 0000000000..efec3f02bd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-git-commit-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.905 7a3.001 3.001 0 00-5.81 0H2.75a.75.75 0 000 1.5h2.345a3.001 3.001 0 005.81 0h2.345a.75.75 0 000-1.5h-2.345zM8 6.25a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/property-24.scss
new file mode 100644
index 0000000000..ab2420c44b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-commit/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-git-commit-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M15.93 11a4.001 4.001 0 00-7.86 0H3.75a.75.75 0 000 1.5h4.32a4.001 4.001 0 007.86 0h4.32a.75.75 0 000-1.5h-4.32zM12 9.25a2.5 2.5 0 100 5 2.5 2.5 0 000-5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/keyframes.scss
new file mode 100644
index 0000000000..18f7b56dd5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-git-merge {
+  50% {
+
+    background-color: var(--icon-color, var(--color-git-merge-500, currentColor));
+    -webkit-mask-image: var(--icon-git-merge-24);
+    mask-image: var(--icon-git-merge-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-git-merge-500, currentColor));
+    -webkit-mask-image: var(--icon-git-merge-16);
+    mask-image: var(--icon-git-merge-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/placeholders.scss
new file mode 100644
index 0000000000..76f4c6df71
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-git-merge-icon {
+  --icon-name: icon-git-merge;
+  content: '';
+}
+%with-git-merge-mask {
+  --icon-name: icon-git-merge;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/property-16.scss
new file mode 100644
index 0000000000..210bc2c676
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-git-merge-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.644 6.865A3.001 3.001 0 003.75 1 3 3 0 003 6.905V14a.75.75 0 001.5 0V9.518c.21.266.436.527.675.78C6.21 11.39 7.619 12.432 9.08 12.69a3.001 3.001 0 10.038-1.526c-.92-.237-1.951-.946-2.855-1.899A9.018 9.018 0 014.955 7.52a4.969 4.969 0 01-.311-.655zM3.75 2.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM10.5 12a1.5 1.5 0 103 0 1.5 1.5 0 00-3 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/property-24.scss
new file mode 100644
index 0000000000..4c5d277bfb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-merge/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-git-merge-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.5 6.5a3.5 3.5 0 114.096 3.45c.102.41.284.886.551 1.406a11.743 11.743 0 001.81 2.54c1.35 1.456 3.014 2.56 4.635 2.804a3.502 3.502 0 016.908.8 3.5 3.5 0 01-6.928.71c-2.178-.252-4.217-1.677-5.716-3.294A13.885 13.885 0 017.5 13.202v7.548a.75.75 0 01-1.5 0V9.855A3.502 3.502 0 013.5 6.5zm3.5-2a2 2 0 100 4 2 2 0 000-4zm9 13a2 2 0 104 0 2 2 0 00-4 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/keyframes.scss
new file mode 100644
index 0000000000..1b77cb705b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-git-pull-request {
+  50% {
+
+    background-color: var(--icon-color, var(--color-git-pull-request-500, currentColor));
+    -webkit-mask-image: var(--icon-git-pull-request-24);
+    mask-image: var(--icon-git-pull-request-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-git-pull-request-500, currentColor));
+    -webkit-mask-image: var(--icon-git-pull-request-16);
+    mask-image: var(--icon-git-pull-request-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/placeholders.scss
new file mode 100644
index 0000000000..b1381b6079
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-git-pull-request-icon {
+  --icon-name: icon-git-pull-request;
+  content: '';
+}
+%with-git-pull-request-mask {
+  --icon-name: icon-git-pull-request;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/property-16.scss
new file mode 100644
index 0000000000..9c109ce7ad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-git-pull-request-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M5 6.905A3.001 3.001 0 004.25 1a3 3 0 00-.75 5.905V14A.75.75 0 005 14V6.905zM2.75 4a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM12.5 5.25v3.595a3.001 3.001 0 01-.75 5.905A3 3 0 0111 8.845V5.25a.75.75 0 00-.75-.75H9A.75.75 0 019 3h1.25a2.25 2.25 0 012.25 2.25zm-2.25 6.5a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/property-24.scss
new file mode 100644
index 0000000000..ab6268231c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-pull-request/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-git-pull-request-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M7.5 9.92A3.501 3.501 0 006.75 3 3.5 3.5 0 006 9.92v10.83a.75.75 0 001.5 0V9.92zM4.75 6.5a2 2 0 114 0 2 2 0 01-4 0zM18 8.75v5.58a3.501 3.501 0 01-.75 6.92 3.5 3.5 0 01-.75-6.92V8.75c0-.69-.56-1.25-1.25-1.25H13A.75.75 0 0113 6h2.25A2.75 2.75 0 0118 8.75zm-2.75 9a2 2 0 114 0 2 2 0 01-4 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/keyframes.scss
new file mode 100644
index 0000000000..678a5c0fbe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-git-repo {
+  50% {
+
+    background-color: var(--icon-color, var(--color-git-repo-500, currentColor));
+    -webkit-mask-image: var(--icon-git-repo-24);
+    mask-image: var(--icon-git-repo-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-git-repo-500, currentColor));
+    -webkit-mask-image: var(--icon-git-repo-16);
+    mask-image: var(--icon-git-repo-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/placeholders.scss
new file mode 100644
index 0000000000..49e2e61684
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-git-repo-icon {
+  --icon-name: icon-git-repo;
+  content: '';
+}
+%with-git-repo-mask {
+  --icon-name: icon-git-repo;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/property-16.scss
new file mode 100644
index 0000000000..deb4f82641
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-git-repo-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M3.25 0A2.25 2.25 0 001 2.25v10.5A2.25 2.25 0 003.25 15h.25a.75.75 0 000-1.5h-.25a.75.75 0 01-.75-.75v-1.5a.75.75 0 01.75-.75H13.5v3h-3a.75.75 0 000 1.5h3.25c.69 0 1.25-.56 1.25-1.25V1.25C15 .56 14.44 0 13.75 0H3.25zM13.5 9V1.5H3.25a.75.75 0 00-.75.75v6.878c.235-.083.487-.128.75-.128H13.5z" clip-rule="evenodd"/><path d="M5.5 12a.5.5 0 00-.5.5v3a.5.5 0 00.777.416L7 15.101l1.223.815A.5.5 0 009 15.5v-3a.5.5 0 00-.5-.5h-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/property-24.scss
new file mode 100644
index 0000000000..9ee15bc68e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repo/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-git-repo-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M5.75 1A2.75 2.75 0 003 3.75v14.5A2.75 2.75 0 005.75 21H6a.75.75 0 000-1.5h-.25c-.69 0-1.25-.56-1.25-1.25v-1c0-.69.56-1.25 1.25-1.25H19.5v3.25a.25.25 0 01-.25.25H16a.75.75 0 000 1.5h3.25A1.75 1.75 0 0021 19.25V2.75A1.75 1.75 0 0019.25 1H5.75zM19.5 14.5V2.75a.25.25 0 00-.25-.25H5.75c-.69 0-1.25.56-1.25 1.25V14.8c.375-.192.8-.3 1.25-.3H19.5z" clip-rule="evenodd"/><path d="M8.75 18a.75.75 0 00-.75.75v3.5a.75.75 0 001.128.648L11 21.806l1.872 1.092A.75.75 0 0014 22.25v-3.5a.75.75 0 00-.75-.75h-4.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/index.scss
new file mode 100644
index 0000000000..9762e05863
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../git-repo/property-16';
+        @import '../git-repo/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/keyframes.scss
new file mode 100644
index 0000000000..3324dfa3d7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-git-repository {
+  50% {
+
+    background-color: var(--icon-color, var(--color-git-repository-500, currentColor));
+    -webkit-mask-image: var(--icon-git-repo-24);
+    mask-image: var(--icon-git-repo-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-git-repository-500, currentColor));
+    -webkit-mask-image: var(--icon-git-repo-16);
+    mask-image: var(--icon-git-repo-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/placeholders.scss
new file mode 100644
index 0000000000..b530988f1f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/git-repository/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-git-repository-icon {
+  --icon-name: icon-git-repository;
+  content: '';
+}
+%with-git-repository-mask {
+  --icon-name: icon-git-repository;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/keyframes.scss
new file mode 100644
index 0000000000..dc22b46cb0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-github-color {
+  50% {
+    background-image: var(--icon-github-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-github-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/placeholders.scss
new file mode 100644
index 0000000000..7f88cbdb08
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-github-color-icon {
+  --icon-name: icon-github-color;
+  content: '';
+}
+%with-github-color-mask {
+  --icon-name: icon-github-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/property-16.scss
new file mode 100644
index 0000000000..ed604735fc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-github-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23161514" fill-rule="evenodd" d="M8 1C4.133 1 1 4.13 1 7.993c0 3.09 2.006 5.71 4.787 6.635.35.064.478-.152.478-.337 0-.166-.006-.606-.01-1.19-1.947.423-2.357-.937-2.357-.937-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.425.048-.425.703.05 1.073.72 1.073.72.624 1.07 1.638.76 2.037.582.063-.452.244-.76.444-.935-1.554-.176-3.188-.776-3.188-3.456 0-.763.273-1.388.72-1.876-.072-.177-.312-.888.07-1.85 0 0 .586-.189 1.924.716A6.711 6.711 0 018 4.381c.595.003 1.194.08 1.753.236 1.336-.905 1.923-.717 1.923-.717.382.963.142 1.674.07 1.85.448.49.72 1.114.72 1.877 0 2.686-1.638 3.278-3.197 3.45.251.216.475.643.475 1.296 0 .934-.009 1.688-.009 1.918 0 .187.127.404.482.336A6.996 6.996 0 0015 7.993 6.997 6.997 0 008 1z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/property-24.scss
new file mode 100644
index 0000000000..e6ef0257c4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/github-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-github-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23161514" fill-rule="evenodd" d="M12 2C6.477 2 2 6.476 2 11.997c0 4.417 2.865 8.163 6.839 9.485.5.092.682-.216.682-.482 0-.236-.008-.865-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.528 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.252-4.555-1.11-4.555-4.94 0-1.092.39-1.985 1.029-2.683-.103-.253-.446-1.27.098-2.646 0 0 .84-.269 2.75 1.025A9.581 9.581 0 0112 6.834c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.376.202 2.393.1 2.646.64.698 1.028 1.591 1.028 2.682 0 3.84-2.339 4.686-4.566 4.933.359.309.678.919.678 1.852 0 1.336-.012 2.414-.012 2.741 0 .268.18.58.688.482 3.97-1.325 6.833-5.07 6.833-9.485C22 6.476 17.522 2 12 2z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/github/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/github/index.scss
new file mode 100644
index 0000000000..cbdee8fe7e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/github/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../github-color/property-16';
+        @import '../github-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/github/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/github/keyframes.scss
new file mode 100644
index 0000000000..ececd8a226
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/github/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-github {
+  50% {
+
+    background-color: var(--icon-color, var(--color-github-500, currentColor));
+    -webkit-mask-image: var(--icon-github-color-24);
+    mask-image: var(--icon-github-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-github-500, currentColor));
+    -webkit-mask-image: var(--icon-github-color-16);
+    mask-image: var(--icon-github-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/github/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/github/placeholders.scss
new file mode 100644
index 0000000000..d06db6abc5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/github/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-github-icon {
+  --icon-name: icon-github;
+  content: '';
+}
+%with-github-mask {
+  --icon-name: icon-github;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/github/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/github/property-16.scss
new file mode 100644
index 0000000000..c33d6a37c2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/github/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-github-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1C4.133 1 1 4.13 1 7.993c0 3.09 2.006 5.71 4.787 6.635.35.064.478-.152.478-.337 0-.166-.006-.606-.01-1.19-1.947.423-2.357-.937-2.357-.937-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.425.048-.425.703.05 1.073.72 1.073.72.624 1.07 1.638.76 2.037.582.063-.452.244-.76.444-.935-1.554-.176-3.188-.776-3.188-3.456 0-.763.273-1.388.72-1.876-.072-.177-.312-.888.07-1.85 0 0 .586-.189 1.924.716A6.711 6.711 0 018 4.381c.595.003 1.194.08 1.753.236 1.336-.905 1.923-.717 1.923-.717.382.963.142 1.674.07 1.85.448.49.72 1.114.72 1.877 0 2.686-1.638 3.278-3.197 3.45.251.216.475.643.475 1.296 0 .934-.009 1.688-.009 1.918 0 .187.127.404.482.336A6.996 6.996 0 0015 7.993 6.997 6.997 0 008 1z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/github/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/github/property-24.scss
new file mode 100644
index 0000000000..3852666a75
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/github/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-github-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1C4.133 1 1 4.13 1 7.993c0 3.09 2.006 5.71 4.787 6.635.35.064.478-.152.478-.337 0-.166-.006-.606-.01-1.19-1.947.423-2.357-.937-2.357-.937-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.425.048-.425.703.05 1.073.72 1.073.72.624 1.07 1.638.76 2.037.582.063-.452.244-.76.444-.935-1.554-.176-3.188-.776-3.188-3.456 0-.763.273-1.388.72-1.876-.072-.177-.312-.888.07-1.85 0 0 .586-.189 1.924.716A6.711 6.711 0 018 4.381c.595.003 1.194.08 1.753.236 1.336-.905 1.923-.717 1.923-.717.382.963.142 1.674.07 1.85.448.49.72 1.114.72 1.877 0 2.686-1.638 3.278-3.197 3.45.251.216.475.643.475 1.296 0 .934-.009 1.688-.009 1.918 0 .187.127.404.482.336A6.996 6.996 0 0015 7.993 6.997 6.997 0 008 1z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/keyframes.scss
new file mode 100644
index 0000000000..07dae2fa59
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-gitlab-color {
+  50% {
+    background-image: var(--icon-gitlab-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-gitlab-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/placeholders.scss
new file mode 100644
index 0000000000..79d926f88f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-gitlab-color-icon {
+  --icon-name: icon-gitlab-color;
+  content: '';
+}
+%with-gitlab-color-mask {
+  --icon-name: icon-gitlab-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/property-16.scss
new file mode 100644
index 0000000000..cf1c518f32
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gitlab-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23FC6D26" d="M14.975 8.904L14.19 6.55l-1.552-4.67a.268.268 0 00-.255-.18.268.268 0 00-.254.18l-1.552 4.667H5.422L3.87 1.879a.267.267 0 00-.254-.179.267.267 0 00-.254.18l-1.55 4.667-.784 2.357a.515.515 0 00.193.583l6.78 4.812 6.778-4.812a.516.516 0 00.196-.583z"/><path fill="%23E24329" d="M8 14.296l2.578-7.75H5.423L8 14.296z"/><path fill="%23FC6D26" d="M8 14.296l-2.579-7.75H1.813L8 14.296z"/><path fill="%23FCA326" d="M1.81 6.549l-.784 2.354a.515.515 0 00.193.583L8 14.3 1.81 6.55z"/><path fill="%23E24329" d="M1.812 6.549h3.612L3.87 1.882a.268.268 0 00-.254-.18.268.268 0 00-.255.18L1.812 6.549z"/><path fill="%23FC6D26" d="M8 14.296l2.578-7.75h3.614L8 14.296z"/><path fill="%23FCA326" d="M14.19 6.549l.783 2.354a.514.514 0 01-.193.583L8 14.296l6.188-7.747h.001z"/><path fill="%23E24329" d="M14.19 6.549H10.58l1.551-4.667a.267.267 0 01.255-.18c.115 0 .217.073.254.18l1.552 4.667z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/property-24.scss
new file mode 100644
index 0000000000..a2aa818fcb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gitlab-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23FC6D26" d="M21.964 13.292l-1.12-3.363-2.218-6.673a.383.383 0 00-.363-.255.383.383 0 00-.364.255l-2.217 6.669H8.316L6.1 3.256A.382.382 0 005.736 3a.382.382 0 00-.363.256L3.16 9.925l-1.12 3.367a.736.736 0 00.275.833L12 21l9.683-6.875a.737.737 0 00.28-.833z"/><path fill="%23E24329" d="M12 20.995l3.683-11.071H8.319L12 20.994z"/><path fill="%23FC6D26" d="M12 20.995L8.316 9.924H3.162L12 20.994z"/><path fill="%23FCA326" d="M3.158 9.927l-1.12 3.364a.736.736 0 00.276.833L12 21 3.158 9.927z"/><path fill="%23E24329" d="M3.16 9.927h5.16L6.1 3.26a.383.383 0 00-.364-.256.383.383 0 00-.364.256L3.16 9.927z"/><path fill="%23FC6D26" d="M12 20.995l3.683-11.071h5.162L12 20.994z"/><path fill="%23FCA326" d="M20.842 9.927l1.12 3.364a.734.734 0 01-.276.833L12 20.994l8.84-11.067h.002z"/><path fill="%23E24329" d="M20.844 9.927h-5.16l2.217-6.667a.382.382 0 01.363-.256c.165 0 .311.103.363.256l2.217 6.667z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/index.scss
new file mode 100644
index 0000000000..9f36415d9d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../gitlab-color/property-16';
+        @import '../gitlab-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/keyframes.scss
new file mode 100644
index 0000000000..0710046ecc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-gitlab {
+  50% {
+
+    background-color: var(--icon-color, var(--color-gitlab-500, currentColor));
+    -webkit-mask-image: var(--icon-gitlab-color-24);
+    mask-image: var(--icon-gitlab-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-gitlab-500, currentColor));
+    -webkit-mask-image: var(--icon-gitlab-color-16);
+    mask-image: var(--icon-gitlab-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/placeholders.scss
new file mode 100644
index 0000000000..0d389645e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-gitlab-icon {
+  --icon-name: icon-gitlab;
+  content: '';
+}
+%with-gitlab-mask {
+  --icon-name: icon-gitlab;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/property-16.scss
new file mode 100644
index 0000000000..30dc6d8f56
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gitlab-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M14.975 8.904L14.19 6.55l-1.552-4.67a.268.268 0 00-.255-.18.268.268 0 00-.254.18l-1.552 4.667H5.422L3.87 1.879a.267.267 0 00-.254-.179.267.267 0 00-.254.18l-1.55 4.667-.784 2.357a.515.515 0 00.193.583l6.78 4.812 6.778-4.812a.516.516 0 00.196-.583z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/property-24.scss
new file mode 100644
index 0000000000..ea2a05c641
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/gitlab/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-gitlab-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M14.975 8.904L14.19 6.55l-1.552-4.67a.268.268 0 00-.255-.18.268.268 0 00-.254.18l-1.552 4.667H5.422L3.87 1.879a.267.267 0 00-.254-.179.267.267 0 00-.254.18l-1.55 4.667-.784 2.357a.515.515 0 00.193.583l6.78 4.812 6.778-4.812a.516.516 0 00.196-.583z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/keyframes.scss
new file mode 100644
index 0000000000..30090f0c0e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-globe-private {
+  50% {
+
+    background-color: var(--icon-color, var(--color-globe-private-500, currentColor));
+    -webkit-mask-image: var(--icon-globe-private-24);
+    mask-image: var(--icon-globe-private-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-globe-private-500, currentColor));
+    -webkit-mask-image: var(--icon-globe-private-16);
+    mask-image: var(--icon-globe-private-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/placeholders.scss
new file mode 100644
index 0000000000..54ac96a52b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-globe-private-icon {
+  --icon-name: icon-globe-private;
+  content: '';
+}
+%with-globe-private-mask {
+  --icon-name: icon-globe-private;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/property-16.scss
new file mode 100644
index 0000000000..e6c7cf89d3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-globe-private-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M5.58 7C5.835 5.124 6.667 3.335 8 1.836a10.074 10.074 0 011.806 2.878.75.75 0 101.388-.568 11.412 11.412 0 00-1.322-2.372A6.503 6.503 0 0114.5 8 .75.75 0 0016 8a8 8 0 10-11.31 7.285.75.75 0 10.622-1.365A6.504 6.504 0 011.519 8.5h2.503c.04.563.122 1.12.248 1.668a.75.75 0 101.462-.336c-.1-.438-.17-.883-.205-1.332H7A.75.75 0 007 7H5.58zM4.07 7H1.576a6.508 6.508 0 014.552-5.226A11.095 11.095 0 004.068 7z" clip-rule="evenodd"/><path d="M11.75 12.25a.75.75 0 00-1.5 0v.5a.75.75 0 001.5 0v-.5z"/><path fill-rule="evenodd" d="M8.518 9.012c.035-.627.13-1.235.366-1.738.174-.37.435-.704.816-.94C10.08 6.101 10.52 6 11 6c.48 0 .921.1 1.3.334.381.236.642.57.816.94.236.503.331 1.111.366 1.738A2.25 2.25 0 0115.5 11.25v2.5A2.25 2.25 0 0113.25 16h-4.5a2.25 2.25 0 01-2.25-2.25v-2.5a2.25 2.25 0 012.018-2.238zM10.022 9c.032-.481.102-.838.22-1.087a.662.662 0 01.245-.302c.09-.055.243-.111.513-.111s.423.056.513.111c.087.054.17.141.246.302.117.249.187.606.219 1.087h-1.956zm3.228 1.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-2.5a.75.75 0 01.75-.75h4.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/property-24.scss
new file mode 100644
index 0000000000..674caff94f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/globe-private/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-globe-private-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M8.804 11A15.149 15.149 0 0112 2.916a15.087 15.087 0 012.813 5.763.75.75 0 001.456-.358 16.614 16.614 0 00-2.596-5.674 9.512 9.512 0 017.542 7.035.75.75 0 101.456-.364C21.473 4.539 17.15 1 12 1 5.925 1 1 5.925 1 12c0 5.243 3.667 9.627 8.575 10.732a.75.75 0 00.33-1.464c-4.082-.918-7.169-4.465-7.392-8.768h4.754c.128 2.606.86 5.13 2.117 7.367a.75.75 0 101.308-.734A15.221 15.221 0 018.77 12.5H12.5a.75.75 0 000-1.5H8.804zM7.3 11H2.552a9.506 9.506 0 017.775-8.353A16.673 16.673 0 007.299 11z" clip-rule="evenodd"/><path d="M18 19a.75.75 0 01.75.75v.5a.75.75 0 01-1.5 0v-.5A.75.75 0 0118 19z"/><path fill-rule="evenodd" d="M14 15.014a2.25 2.25 0 00-2 2.236v4.5A2.25 2.25 0 0014.25 24h7.5A2.25 2.25 0 0024 21.75v-4.5a2.25 2.25 0 00-2-2.236v-.93a4.127 4.127 0 00-1.165-2.881A3.96 3.96 0 0018 10a3.96 3.96 0 00-2.835 1.203A4.127 4.127 0 0014 14.083v.93zM15.5 15v-.917c0-.69.268-1.35.739-1.833A2.46 2.46 0 0118 11.5c.657 0 1.29.267 1.761.75.471.483.739 1.142.739 1.833V15h-5zm-1.25 1.5a.75.75 0 00-.75.75v4.5c0 .414.336.75.75.75h7.5a.75.75 0 00.75-.75v-4.5a.75.75 0 00-.75-.75h-7.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/globe/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/globe/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/globe/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/globe/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/globe/keyframes.scss
new file mode 100644
index 0000000000..cd0ec4e3fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/globe/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-globe {
+  50% {
+
+    background-color: var(--icon-color, var(--color-globe-500, currentColor));
+    -webkit-mask-image: var(--icon-globe-24);
+    mask-image: var(--icon-globe-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-globe-500, currentColor));
+    -webkit-mask-image: var(--icon-globe-16);
+    mask-image: var(--icon-globe-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/globe/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/globe/placeholders.scss
new file mode 100644
index 0000000000..5d10cfb661
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/globe/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-globe-icon {
+  --icon-name: icon-globe;
+  content: '';
+}
+%with-globe-mask {
+  --icon-name: icon-globe;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/globe/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/globe/property-16.scss
new file mode 100644
index 0000000000..4bd4ee706a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/globe/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-globe-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM6.128 1.774A6.508 6.508 0 001.576 7H4.07a11.095 11.095 0 012.06-5.226zm3.744 0A11.096 11.096 0 0111.932 7h2.492a6.508 6.508 0 00-4.552-5.226zM10.42 7C10.165 5.124 9.333 3.335 8 1.836 6.667 3.335 5.835 5.124 5.58 7h4.84zM5.527 8.5h4.946C10.31 10.557 9.451 12.533 8 14.164 6.55 12.533 5.691 10.557 5.527 8.5zm-1.505 0H1.52a6.505 6.505 0 004.61 5.726C4.896 12.525 4.163 10.555 4.021 8.5zm5.85 5.726c1.231-1.701 1.964-3.671 2.106-5.726h2.503a6.505 6.505 0 01-4.61 5.726z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/globe/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/globe/property-24.scss
new file mode 100644
index 0000000000..618c3118ba
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/globe/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-globe-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm-1.673 1.647A9.506 9.506 0 002.552 11h4.747a16.673 16.673 0 013.028-8.353zm3.346 0A16.673 16.673 0 0116.701 11h4.747a9.506 9.506 0 00-7.775-8.353zM15.196 11A15.149 15.149 0 0012 2.916 15.149 15.149 0 008.804 11h6.392zm-6.427 1.5h6.462A15.16 15.16 0 0112 21.084 15.16 15.16 0 018.769 12.5zm-1.502 0H2.513c.23 4.45 3.525 8.091 7.814 8.853a16.683 16.683 0 01-3.06-8.853zm6.406 8.853a16.683 16.683 0 003.06-8.853h4.754c-.23 4.45-3.525 8.091-7.814 8.853z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/keyframes.scss
new file mode 100644
index 0000000000..aefdb4ae9c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-google-color {
+  50% {
+    background-image: var(--icon-google-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-google-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/placeholders.scss
new file mode 100644
index 0000000000..b52fab8ee2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-google-color-icon {
+  --icon-name: icon-google-color;
+  content: '';
+}
+%with-google-color-mask {
+  --icon-name: icon-google-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/property-16.scss
new file mode 100644
index 0000000000..3eec4f4770
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-google-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%234285F4" d="M14.9 8.161c0-.476-.039-.954-.121-1.422h-6.64v2.695h3.802a3.24 3.24 0 01-1.407 2.127v1.75h2.269c1.332-1.22 2.097-3.02 2.097-5.15z"/><path fill="%2334A853" d="M8.14 15c1.898 0 3.499-.62 4.665-1.69l-2.268-1.749c-.631.427-1.446.669-2.395.669-1.836 0-3.393-1.232-3.952-2.888H1.85v1.803A7.044 7.044 0 008.14 15z"/><path fill="%23FBBC04" d="M4.187 9.341a4.17 4.17 0 010-2.68V4.858H1.849a6.97 6.97 0 000 6.287l2.338-1.803z"/><path fill="%23EA4335" d="M8.14 3.77a3.837 3.837 0 012.7 1.05l2.01-1.999a6.786 6.786 0 00-4.71-1.82 7.042 7.042 0 00-6.29 3.858L4.186 6.66c.556-1.658 2.116-2.89 3.952-2.89z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/property-24.scss
new file mode 100644
index 0000000000..b6bfacd7c6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/google-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-google-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%234285F4" d="M21.804 12.23c0-.68-.055-1.363-.173-2.032H12.2v3.85h5.4a4.63 4.63 0 01-1.998 3.04v2.498h3.222c1.893-1.742 2.98-4.314 2.98-7.356z"/><path fill="%2334A853" d="M12.2 22c2.697 0 4.971-.886 6.628-2.414l-3.222-2.499c-.897.61-2.054.956-3.402.956-2.61 0-4.821-1.76-5.615-4.127H3.264v2.576A10 10 0 0012.2 22z"/><path fill="%23FBBC04" d="M6.585 13.916a5.99 5.99 0 010-3.828V7.512H3.264a10.008 10.008 0 000 8.98l3.321-2.576z"/><path fill="%23EA4335" d="M12.2 5.958a5.434 5.434 0 013.836 1.499l2.855-2.855A9.61 9.61 0 0012.2 2.001a9.998 9.998 0 00-8.936 5.511l3.321 2.576c.79-2.37 3.006-4.13 5.615-4.13z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/google/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/google/index.scss
new file mode 100644
index 0000000000..2567178ad9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/google/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../google-color/property-16';
+        @import '../google-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/google/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/google/keyframes.scss
new file mode 100644
index 0000000000..98c2a46849
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/google/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-google {
+  50% {
+
+    background-color: var(--icon-color, var(--color-google-500, currentColor));
+    -webkit-mask-image: var(--icon-google-color-24);
+    mask-image: var(--icon-google-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-google-500, currentColor));
+    -webkit-mask-image: var(--icon-google-color-16);
+    mask-image: var(--icon-google-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/google/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/google/placeholders.scss
new file mode 100644
index 0000000000..76e1eda1c1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/google/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-google-icon {
+  --icon-name: icon-google;
+  content: '';
+}
+%with-google-mask {
+  --icon-name: icon-google;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/google/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/google/property-16.scss
new file mode 100644
index 0000000000..e90ede692a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/google/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-google-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M10.84 4.82a3.837 3.837 0 00-2.7-1.05c-1.837 0-3.397 1.233-3.953 2.891a4.17 4.17 0 000 2.68h.003c.558 1.657 2.115 2.889 3.952 2.889.948 0 1.761-.241 2.392-.667v-.002a3.239 3.239 0 001.407-2.127H8.14V6.74h6.64c.082.468.121.946.121 1.422 0 2.129-.765 3.929-2.096 5.148l.001.001C11.64 14.38 10.038 15 8.14 15a7.044 7.044 0 01-6.29-3.855 6.97 6.97 0 010-6.287A7.042 7.042 0 018.139 1a6.786 6.786 0 014.71 1.821L10.84 4.82z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/google/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/google/property-24.scss
new file mode 100644
index 0000000000..adcaae860f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/google/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-google-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M10.84 4.82a3.837 3.837 0 00-2.7-1.05c-1.837 0-3.397 1.233-3.953 2.891a4.17 4.17 0 000 2.68h.003c.558 1.657 2.115 2.889 3.952 2.889.948 0 1.761-.241 2.392-.667v-.002a3.239 3.239 0 001.407-2.127H8.14V6.74h6.64c.082.468.121.946.121 1.422 0 2.129-.765 3.929-2.096 5.148l.001.001C11.64 14.38 10.038 15 8.14 15a7.044 7.044 0 01-6.29-3.855 6.97 6.97 0 010-6.287A7.042 7.042 0 018.139 1a6.786 6.786 0 014.71 1.821L10.84 4.82z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/keyframes.scss
new file mode 100644
index 0000000000..a43f75ecb5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-grid-alt {
+  50% {
+
+    background-color: var(--icon-color, var(--color-grid-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-grid-alt-24);
+    mask-image: var(--icon-grid-alt-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-grid-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-grid-alt-16);
+    mask-image: var(--icon-grid-alt-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/placeholders.scss
new file mode 100644
index 0000000000..744b09009f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-grid-alt-icon {
+  --icon-name: icon-grid-alt;
+  content: '';
+}
+%with-grid-alt-mask {
+  --icon-name: icon-grid-alt;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/property-16.scss
new file mode 100644
index 0000000000..77f8b25f75
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-grid-alt-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M0 .75A.75.75 0 01.75 0h2.5A.75.75 0 014 .75v2.5a.75.75 0 01-.75.75H.75A.75.75 0 010 3.25V.75zm1.5.75v1h1v-1h-1zM6 .75A.75.75 0 016.75 0h2.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-2.5A.75.75 0 016 3.25V.75zm1.5.75v1h1v-1h-1zM12.75 0a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V.75a.75.75 0 00-.75-.75h-2.5zm.75 2.5v-1h1v1h-1zM0 6.75A.75.75 0 01.75 6h2.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75H.75A.75.75 0 010 9.25v-2.5zm1.5.75v1h1v-1h-1zM6.75 6a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5A.75.75 0 009.25 6h-2.5zm.75 2.5v-1h1v1h-1zM12 6.75a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-2.5a.75.75 0 01-.75-.75v-2.5zm1.5.75v1h1v-1h-1zM.75 12a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75H.75zm.75 2.5v-1h1v1h-1zM6 12.75a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-2.5a.75.75 0 01-.75-.75v-2.5zm1.5.75v1h1v-1h-1zM12.75 12a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75h-2.5zm.75 2.5v-1h1v1h-1z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/property-24.scss
new file mode 100644
index 0000000000..06047c2ef3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/grid-alt/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-grid-alt-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M1 2.25C1 1.56 1.56 1 2.25 1h3.5C6.44 1 7 1.56 7 2.25v3.5C7 6.44 6.44 7 5.75 7h-3.5C1.56 7 1 6.44 1 5.75v-3.5zm1.5.25v3h3v-3h-3zM9 2.25C9 1.56 9.56 1 10.25 1h3.5c.69 0 1.25.56 1.25 1.25v3.5C15 6.44 14.44 7 13.75 7h-3.5C9.56 7 9 6.44 9 5.75v-3.5zm1.5.25v3h3v-3h-3zM18.25 1C17.56 1 17 1.56 17 2.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C22.44 7 23 6.44 23 5.75v-3.5C23 1.56 22.44 1 21.75 1h-3.5zm.25 4.5v-3h3v3h-3zM1 10.25C1 9.56 1.56 9 2.25 9h3.5C6.44 9 7 9.56 7 10.25v3.5C7 14.44 6.44 15 5.75 15h-3.5C1.56 15 1 14.44 1 13.75v-3.5zm1.5.25v3h3v-3h-3zM10.25 9C9.56 9 9 9.56 9 10.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C15 9.56 14.44 9 13.75 9h-3.5zm.25 4.5v-3h3v3h-3zM17 10.25c0-.69.56-1.25 1.25-1.25h3.5c.69 0 1.25.56 1.25 1.25v3.5c0 .69-.56 1.25-1.25 1.25h-3.5c-.69 0-1.25-.56-1.25-1.25v-3.5zm1.5.25v3h3v-3h-3zM2.25 17C1.56 17 1 17.56 1 18.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 23 7 22.44 7 21.75v-3.5C7 17.56 6.44 17 5.75 17h-3.5zm.25 4.5v-3h3v3h-3zM9 18.25c0-.69.56-1.25 1.25-1.25h3.5c.69 0 1.25.56 1.25 1.25v3.5c0 .69-.56 1.25-1.25 1.25h-3.5C9.56 23 9 22.44 9 21.75v-3.5zm1.5.25v3h3v-3h-3zM18.25 17c-.69 0-1.25.56-1.25 1.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-3.5zm.25 4.5v-3h3v3h-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/grid/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/grid/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/grid/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/grid/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/grid/keyframes.scss
new file mode 100644
index 0000000000..4bd31c5a22
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/grid/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-grid {
+  50% {
+
+    background-color: var(--icon-color, var(--color-grid-500, currentColor));
+    -webkit-mask-image: var(--icon-grid-24);
+    mask-image: var(--icon-grid-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-grid-500, currentColor));
+    -webkit-mask-image: var(--icon-grid-16);
+    mask-image: var(--icon-grid-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/grid/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/grid/placeholders.scss
new file mode 100644
index 0000000000..72cb0453ac
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/grid/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-grid-icon {
+  --icon-name: icon-grid;
+  content: '';
+}
+%with-grid-mask {
+  --icon-name: icon-grid;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/grid/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/grid/property-16.scss
new file mode 100644
index 0000000000..da7497e057
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/grid/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-grid-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.25 1C1.56 1 1 1.56 1 2.25v3.5C1 6.44 1.56 7 2.25 7h3.5C6.44 7 7 6.44 7 5.75v-3.5C7 1.56 6.44 1 5.75 1h-3.5zm.25 4.5v-3h3v3h-3zM10.25 1C9.56 1 9 1.56 9 2.25v3.5C9 6.44 9.56 7 10.25 7h3.5C14.44 7 15 6.44 15 5.75v-3.5C15 1.56 14.44 1 13.75 1h-3.5zm.25 4.5v-3h3v3h-3zM9 10.25C9 9.56 9.56 9 10.25 9h3.5c.69 0 1.25.56 1.25 1.25v3.5c0 .69-.56 1.25-1.25 1.25h-3.5C9.56 15 9 14.44 9 13.75v-3.5zm1.5.25v3h3v-3h-3zM2.25 9C1.56 9 1 9.56 1 10.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 15 7 14.44 7 13.75v-3.5C7 9.56 6.44 9 5.75 9h-3.5zm.25 4.5v-3h3v3h-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/grid/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/grid/property-24.scss
new file mode 100644
index 0000000000..44c9e31c77
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/grid/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-grid-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M3.75 2A1.75 1.75 0 002 3.75v5.5c0 .966.784 1.75 1.75 1.75h5.5A1.75 1.75 0 0011 9.25v-5.5A1.75 1.75 0 009.25 2h-5.5zM3.5 3.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-5.5a.25.25 0 01-.25-.25v-5.5zM14.75 2A1.75 1.75 0 0013 3.75v5.5c0 .966.784 1.75 1.75 1.75h5.5A1.75 1.75 0 0022 9.25v-5.5A1.75 1.75 0 0020.25 2h-5.5zm-.25 1.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-5.5a.25.25 0 01-.25-.25v-5.5zM13 14.75c0-.966.784-1.75 1.75-1.75h5.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0120.25 22h-5.5A1.75 1.75 0 0113 20.25v-5.5zm1.75-.25a.25.25 0 00-.25.25v5.5c0 .138.112.25.25.25h5.5a.25.25 0 00.25-.25v-5.5a.25.25 0 00-.25-.25h-5.5zM3.75 13A1.75 1.75 0 002 14.75v5.5c0 .966.784 1.75 1.75 1.75h5.5A1.75 1.75 0 0011 20.25v-5.5A1.75 1.75 0 009.25 13h-5.5zm-.25 1.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-5.5a.25.25 0 01-.25-.25v-5.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/keyframes.scss
new file mode 100644
index 0000000000..7faa648410
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-guide-link {
+  50% {
+
+    background-color: var(--icon-color, var(--color-guide-link-500, currentColor));
+    -webkit-mask-image: var(--icon-guide-link-24);
+    mask-image: var(--icon-guide-link-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-guide-link-500, currentColor));
+    -webkit-mask-image: var(--icon-guide-link-16);
+    mask-image: var(--icon-guide-link-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/placeholders.scss
new file mode 100644
index 0000000000..2a67d5ada5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-guide-link-icon {
+  --icon-name: icon-guide-link;
+  content: '';
+}
+%with-guide-link-mask {
+  --icon-name: icon-guide-link;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/property-16.scss
new file mode 100644
index 0000000000..1a40c7d19d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-guide-link-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M12.75 1a.75.75 0 000 1.5h.69l-1.97 1.97a.75.75 0 001.06 1.06l1.97-1.97v.69a.75.75 0 001.5 0v-2.5a.75.75 0 00-.75-.75h-2.5z"/><path fill-rule="evenodd" d="M1.25 2C.56 2 0 2.56 0 3.25v8.5C0 12.44.56 13 1.25 13H5c.896 0 1.475.205 1.809.448.317.23.441.51.441.802a.751.751 0 101.5 0c0-.292.124-.572.441-.802.334-.243.913-.448 1.809-.448h3.75c.69 0 1.25-.56 1.25-1.25v-4.5a.75.75 0 00-1.5 0v4.25H11c-.878 0-1.64.158-2.25.467v-6.55c0-.788.376-1.42 1.12-1.722a.75.75 0 00-.561-1.39 3.27 3.27 0 00-1.31.941A3.13 3.13 0 007.773 3C7.106 2.354 6.154 2 5 2H1.25zm6 3.417c0-.553-.187-1.015-.522-1.34C6.394 3.753 5.846 3.5 5 3.5H1.5v8H5c.878 0 1.64.158 2.25.467v-6.55z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/property-24.scss
new file mode 100644
index 0000000000..587300b269
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/guide-link/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-guide-link-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M19.75 2a.75.75 0 000 1.5h1.69l-2.97 2.97a.75.75 0 001.06 1.06l2.97-2.97v1.69a.75.75 0 001.5 0v-3.5a.75.75 0 00-.75-.75h-3.5z"/><path fill-rule="evenodd" d="M2.75 3A1.75 1.75 0 001 4.75v12.5c0 .966.784 1.75 1.75 1.75h5.175c2.342 0 3.325 1.19 3.325 2.25A.749.749 0 0012 22a.75.75 0 00.75-.75c0-1.06.983-2.25 3.325-2.25h5.175A1.75 1.75 0 0023 17.25v-7a.75.75 0 10-1.5 0v7a.25.25 0 01-.25.25h-5.175c-1.329 0-2.48.345-3.325.943V7.75c0-.921.199-1.675.609-2.21.393-.512 1.055-.92 2.204-1.018a.75.75 0 10-.126-1.495c-1.481.126-2.57.689-3.269 1.6-.059.078-.115.158-.168.238a3.789 3.789 0 00-.323-.426C10.858 3.505 9.6 3 7.9 3H2.75zm8.5 4.75c0-.99-.229-1.783-.702-2.323C10.092 4.906 9.3 4.5 7.9 4.5H2.75a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h5.175c1.329 0 2.48.345 3.325.943V7.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/guide/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/guide/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/guide/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/guide/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/guide/keyframes.scss
new file mode 100644
index 0000000000..d8432f416d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/guide/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-guide {
+  50% {
+
+    background-color: var(--icon-color, var(--color-guide-500, currentColor));
+    -webkit-mask-image: var(--icon-guide-24);
+    mask-image: var(--icon-guide-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-guide-500, currentColor));
+    -webkit-mask-image: var(--icon-guide-16);
+    mask-image: var(--icon-guide-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/guide/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/guide/placeholders.scss
new file mode 100644
index 0000000000..df69ec2d35
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/guide/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-guide-icon {
+  --icon-name: icon-guide;
+  content: '';
+}
+%with-guide-mask {
+  --icon-name: icon-guide;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/guide/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/guide/property-16.scss
new file mode 100644
index 0000000000..9fcc4af045
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/guide/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-guide-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1.25 2C.56 2 0 2.56 0 3.25v8.5C0 12.44.56 13 1.25 13H5c.896 0 1.475.205 1.809.448.317.23.441.51.441.802a.75.75 0 001.5 0c0-.292.124-.572.441-.802.334-.243.913-.448 1.809-.448h3.75c.69 0 1.25-.56 1.25-1.25v-8.5C16 2.56 15.44 2 14.75 2H11c-1.154 0-2.106.354-2.772 1-.081.08-.157.161-.228.246A3.131 3.131 0 007.772 3C7.106 2.354 6.154 2 5 2H1.25zm7.5 9.967c.61-.309 1.372-.467 2.25-.467h3.5v-8H11c-.846 0-1.394.253-1.728.577-.335.325-.522.787-.522 1.34v6.55zm-1.5 0v-6.55c0-.553-.187-1.015-.522-1.34C6.394 3.753 5.846 3.5 5 3.5H1.5v8H5c.878 0 1.64.158 2.25.467z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/guide/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/guide/property-24.scss
new file mode 100644
index 0000000000..59be424fcb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/guide/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-guide-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2.75 3A1.75 1.75 0 001 4.75v12.5c0 .966.784 1.75 1.75 1.75h5.175c2.342 0 3.325 1.19 3.325 2.25a.75.75 0 001.5 0c0-1.06.983-2.25 3.325-2.25h5.175A1.75 1.75 0 0023 17.25V4.75A1.75 1.75 0 0021.25 3H16.1c-1.7 0-2.958.505-3.777 1.439-.119.136-.226.278-.323.426a3.789 3.789 0 00-.323-.426C10.858 3.505 9.6 3 7.9 3H2.75zm10 15.443c.845-.598 1.996-.943 3.325-.943h5.175a.25.25 0 00.25-.25V4.75a.25.25 0 00-.25-.25H16.1c-1.4 0-2.192.406-2.648.927-.473.54-.702 1.334-.702 2.323v10.693zm-1.5 0V7.75c0-.99-.229-1.783-.702-2.323C10.092 4.906 9.3 4.5 7.9 4.5H2.75a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h5.175c1.329 0 2.48.345 3.325.943z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/keyframes.scss
new file mode 100644
index 0000000000..1f37d2cf98
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-hammer {
+  50% {
+
+    background-color: var(--icon-color, var(--color-hammer-500, currentColor));
+    -webkit-mask-image: var(--icon-hammer-24);
+    mask-image: var(--icon-hammer-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-hammer-500, currentColor));
+    -webkit-mask-image: var(--icon-hammer-16);
+    mask-image: var(--icon-hammer-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/placeholders.scss
new file mode 100644
index 0000000000..bb4f0ed648
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-hammer-icon {
+  --icon-name: icon-hammer;
+  content: '';
+}
+%with-hammer-mask {
+  --icon-name: icon-hammer;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/property-16.scss
new file mode 100644
index 0000000000..4885be694c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hammer-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.484 2.917c.817.22 1.612.62 2.509 1.403a.75.75 0 01.085 1.044l-.422.51 1.13.855.62-.802a.75.75 0 011.08-.113c.678.576.906 1.133.959 1.642.011.111.013.21.014.283v.044c.204.187.417.369.635.552l1.784-2.098-.712-.584-.1.018-.021.003a3.018 3.018 0 01-.395.051c-.132.006-.456.009-.736-.217a1.173 1.173 0 01-.388-.646c-.039-.16-.054-.33-.063-.436l-.002-.012a8.261 8.261 0 00-.012-.128c-1.814-1.199-3.99-1.864-5.965-1.37zm7.789 2.723a.113.113 0 01-.002 0h.002zM7.868 7.915l-1.17-.884-3.972 4.804a.25.25 0 00.036.354l.913.73a.25.25 0 00.354-.042l3.84-4.962zM6.433 5a4.168 4.168 0 00-1.352-.638c-.463-.123-.908-.167-1.47-.224a42.642 42.642 0 01-.68-.073.75.75 0 01-.378-1.333c3.21-2.54 7.208-1.427 9.914.432a1.142 1.142 0 01.428.681c.026.112.04.23.05.325a2.32 2.32 0 01.285-.028c.143-.004.46.003.734.227l.148.12c.45.368.773.633 1.31 1.082a.75.75 0 01.09 1.062l-2.757 3.24a.75.75 0 01-1.052.089 71.575 71.575 0 00-.253-.21 23.847 23.847 0 01-1.146-.994 1.128 1.128 0 01-.34-.779 3.738 3.738 0 01-.005-.192v-.03c0-.034 0-.063-.002-.089l-4.742 6.128a1.75 1.75 0 01-2.477.296l-.913-.73a1.75 1.75 0 01-.255-2.482l4.863-5.88zm6.153-.772a.127.127 0 01.002 0h-.002z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/property-24.scss
new file mode 100644
index 0000000000..4fe9f428fe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hammer/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hammer-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M19.502 5.858C15.71 2.773 10.384.225 5.334 3.59a.75.75 0 00.269 1.36c1.292.258 2.317.466 3.309.888.814.346 1.625.846 2.52 1.67L1.03 17.909a2.25 2.25 0 000 3.182l.879.879a2.25 2.25 0 003.182 0l10.864-10.864c.212.322.24.532.247.66.004.065.002.13-.001.21l-.002.041c-.004.068-.009.16-.008.245.002.243.047.586.328.898.513.571 1.078 1.123 1.607 1.64.124.121.247.24.366.358a.75.75 0 001.06-.008l4.148-4.208a.75.75 0 00-.008-1.061c-.763-.752-1.224-1.196-1.866-1.814l-.21-.203c-.283-.273-.643-.316-.838-.327a4.072 4.072 0 00-.589.026l-.013.001-.209.019a6.363 6.363 0 01-.005-.263v-.031c-.002-.161-.003-.383-.034-.588-.03-.206-.108-.548-.388-.81a.74.74 0 00-.038-.033zM9.499 4.456a11.55 11.55 0 00-1.546-.523c3.597-1.278 7.34.464 10.493 3 .012.092.014.21.016.398v.013c.001.167.003.4.038.62.035.217.12.55.393.81.288.273.654.307.837.314.195.007.407-.013.56-.028l.029-.003c.162-.015.27-.024.35-.023l.117.113c.475.458.848.818 1.318 1.277l-3.095 3.14a32.343 32.343 0 01-1.318-1.343c0-.027.002-.056.004-.099l.004-.077a3.49 3.49 0 000-.363c-.034-.633-.299-1.343-1.169-2.212a.75.75 0 00-1.06 0L14 10.94 12.06 9l.97-.97a.75.75 0 00.007-1.053c-1.233-1.266-2.362-2.02-3.538-2.52zM11 10.061L2.091 18.97a.75.75 0 000 1.06l.879.879a.75.75 0 001.06 0L12.94 12 11 10.06zm9.74-1.021l-.01-.002a.04.04 0 01.01.002zm-.996-1.455l.013.002a.05.05 0 01-.013-.002z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/keyframes.scss
new file mode 100644
index 0000000000..999e68c8bf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-handshake {
+  50% {
+
+    background-color: var(--icon-color, var(--color-handshake-500, currentColor));
+    -webkit-mask-image: var(--icon-handshake-24);
+    mask-image: var(--icon-handshake-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-handshake-500, currentColor));
+    -webkit-mask-image: var(--icon-handshake-16);
+    mask-image: var(--icon-handshake-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/placeholders.scss
new file mode 100644
index 0000000000..be00b1af9d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-handshake-icon {
+  --icon-name: icon-handshake;
+  content: '';
+}
+%with-handshake-mask {
+  --icon-name: icon-handshake;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/property-16.scss
new file mode 100644
index 0000000000..1c1d778059
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-handshake-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M5 2.75a.75.75 0 00-.53.22l-.78.78H.75a.75.75 0 000 1.5H2v5a.75.75 0 01-.75.75h-.5a.75.75 0 000 1.5h.5a2.25 2.25 0 002.016-1.25h.557l3.063 1.531a2.25 2.25 0 002.254-.14l2.087-1.391h1.507a2.25 2.25 0 002.016 1.25h.5a.75.75 0 000-1.5h-.5a.75.75 0 01-.75-.75v-5h1.25a.75.75 0 000-1.5h-2.94l-.78-.78a.75.75 0 00-.53-.22H5zm-1 2.5h-.5v4.5H4a.75.75 0 01.335.08l3.222 1.61a.75.75 0 00.751-.047l1.652-1.101-.584-.876a.75.75 0 011.248-.832l.777 1.166H12.5v-4.5H12a.75.75 0 01-.53-.22l-.78-.78H8.81L7.065 5.997a.711.711 0 00.971 1.038l.971-.85a.75.75 0 11.988 1.13l-.971.85a2.211 2.211 0 01-3.02-3.229l.686-.686H5.311l-.78.78A.75.75 0 014 5.25z" clip-rule="evenodd"/><path d="M1.25 9.625a.625.625 0 11-1.25 0 .625.625 0 011.25 0zM16 9.625a.625.625 0 11-1.25 0 .625.625 0 011.25 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/property-24.scss
new file mode 100644
index 0000000000..0e9d9a8352
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/handshake/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-handshake-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M7.833 4.5a.75.75 0 00-.55.24L6.117 6H1.75a.75.75 0 000 1.5H4v7.458c0 .69-.56 1.25-1.25 1.25h-1a.75.75 0 000 1.5h1A2.75 2.75 0 005.296 16h.999l4.125 2.438a2.75 2.75 0 003.133-.234L16.266 16h2.438a2.751 2.751 0 002.546 1.708h1a.75.75 0 000-1.5h-1c-.69 0-1.25-.56-1.25-1.25V7.5h2.25a.75.75 0 000-1.5h-4.367l-1.166-1.26a.75.75 0 00-.55-.24h-3.473a.75.75 0 00-.533.223l-.524.53-.476-.513a.75.75 0 00-.55-.24H7.833zm-1.389 3H5.5v7h1a.75.75 0 01.382.104l4.301 2.542a1.25 1.25 0 001.424-.106l2.312-1.878-1.48-1.664a.75.75 0 011.122-.996l1.776 1.998H18.5v-7h-.944a.75.75 0 01-.55-.24L15.838 6h-2.831L10.37 8.673a1.25 1.25 0 00-.032 1.723l.119.129a1.25 1.25 0 001.762.08l1.277-1.16a.75.75 0 011.008 1.11l-1.276 1.16a2.75 2.75 0 01-3.877-.176l-.118-.13a2.75 2.75 0 01.07-3.79l1.28-1.296-.3-.323H8.161L6.995 7.26a.75.75 0 01-.55.24z" clip-rule="evenodd"/><path d="M23 13.875a.875.875 0 11-1.75 0 .875.875 0 011.75 0zM2.75 14.014a.875.875 0 11-1.75 0 .875.875 0 011.75 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/keyframes.scss
new file mode 100644
index 0000000000..f9715beea4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-hard-drive {
+  50% {
+
+    background-color: var(--icon-color, var(--color-hard-drive-500, currentColor));
+    -webkit-mask-image: var(--icon-hard-drive-24);
+    mask-image: var(--icon-hard-drive-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-hard-drive-500, currentColor));
+    -webkit-mask-image: var(--icon-hard-drive-16);
+    mask-image: var(--icon-hard-drive-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/placeholders.scss
new file mode 100644
index 0000000000..d6a628c6dd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-hard-drive-icon {
+  --icon-name: icon-hard-drive;
+  content: '';
+}
+%with-hard-drive-mask {
+  --icon-name: icon-hard-drive;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/property-16.scss
new file mode 100644
index 0000000000..e7a40512ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hard-drive-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3 11.25a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M4.748 1a2.25 2.25 0 00-2.07 1.369L.18 8.235a2.25 2.25 0 00-.18.882v3.633A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75V9.117c0-.303-.061-.603-.18-.882L13.322 2.37A2.25 2.25 0 0011.252 1H4.748zm-.69 1.956a.75.75 0 01.69-.456h6.504c.3 0 .572.18.69.456L14.09 8H1.91l2.148-5.044zM1.5 9.5v3.25c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75V9.5h-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/property-24.scss
new file mode 100644
index 0000000000..acaa18880c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hard-drive/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hard-drive-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M4 15.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M7.202 3a2.75 2.75 0 00-2.428 1.46L1.32 10.958A2.75 2.75 0 001 12.248v6.002A2.75 2.75 0 003.75 21h16.5A2.75 2.75 0 0023 18.25v-6.002c0-.45-.11-.893-.321-1.29L19.226 4.46A2.75 2.75 0 0016.798 3H7.202zM6.098 5.164A1.25 1.25 0 017.202 4.5h9.596c.462 0 .887.255 1.104.664l3.366 6.336H2.732l3.366-6.336zM2.5 13v5.25c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V13h-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hash/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hash/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hash/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hash/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hash/keyframes.scss
new file mode 100644
index 0000000000..0ea0f3e078
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hash/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-hash {
+  50% {
+
+    background-color: var(--icon-color, var(--color-hash-500, currentColor));
+    -webkit-mask-image: var(--icon-hash-24);
+    mask-image: var(--icon-hash-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-hash-500, currentColor));
+    -webkit-mask-image: var(--icon-hash-16);
+    mask-image: var(--icon-hash-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hash/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hash/placeholders.scss
new file mode 100644
index 0000000000..e939fd4313
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hash/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-hash-icon {
+  --icon-name: icon-hash;
+  content: '';
+}
+%with-hash-mask {
+  --icon-name: icon-hash;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hash/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hash/property-16.scss
new file mode 100644
index 0000000000..124521e6f0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hash/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hash-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.884 1.762a.75.75 0 01.604.872L7.058 5h2.975l.479-2.634a.75.75 0 111.476.268L11.558 5h1.192a.75.75 0 010 1.5h-1.465l-.546 3h2.011a.75.75 0 010 1.5h-2.283l-.48 2.634a.75.75 0 11-1.475-.268L8.942 11H5.967l-.48 2.634a.75.75 0 11-1.475-.268L4.442 11H3.25a.75.75 0 010-1.5h1.465l.545-3H3.25a.75.75 0 010-1.5h2.283l.479-2.634a.75.75 0 01.872-.604zM9.214 9.5l.546-3H6.785l-.546 3h2.976z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hash/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hash/property-24.scss
new file mode 100644
index 0000000000..d9e11f51a5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hash/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hash-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.363 3.009a.75.75 0 01.629.853L10.365 8h4.483l.66-4.362a.75.75 0 111.484.224L16.365 8h2.885a.75.75 0 010 1.5h-3.113l-.681 4.5h3.794a.75.75 0 010 1.5h-4.022l-.736 4.863a.75.75 0 11-1.483-.225l.702-4.638H9.228l-.736 4.863a.75.75 0 11-1.483-.225L7.71 15.5H4.75a.75.75 0 010-1.5h3.189l.681-4.5H4.75a.75.75 0 010-1.5h4.098l.66-4.362a.75.75 0 01.855-.63zM13.938 14l.682-4.5h-4.482L9.455 14h4.482z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/keyframes.scss
new file mode 100644
index 0000000000..7b71f1a641
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-hashicorp-color {
+  50% {
+    background-image: var(--icon-hashicorp-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-hashicorp-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/placeholders.scss
new file mode 100644
index 0000000000..8dccf4d1d7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-hashicorp-color-icon {
+  --icon-name: icon-hashicorp-color;
+  content: '';
+}
+%with-hashicorp-color-mask {
+  --icon-name: icon-hashicorp-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/property-16.scss
new file mode 100644
index 0000000000..8665fb471c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hashicorp-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.835.6L1 3.96v8.074l2.192 1.264V5.224l3.643-2.1V.6z"/><path d="M9.165.6v6.43h-2.33v-2.4L4.642 5.894v8.237l2.193 1.266v-6.41h2.33v2.383l2.192-1.264V1.864L9.165.6z"/><path d="M9.165 15.4L15 12.04V3.966l-2.193-1.264v8.074l-3.642 2.1V15.4z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/property-24.scss
new file mode 100644
index 0000000000..29a29eca87
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hashicorp-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10.336 1.5L2 6.268v11.456l3.131 1.793V8.061l5.205-2.979V1.5z"/><path d="M13.664 1.5v9.123h-3.328V7.219L7.203 9.012V20.7l3.133 1.796V13.4h3.328v3.381l3.131-1.793V3.293L13.664 1.5z"/><path d="M13.664 22.5L22 17.732V6.276l-3.133-1.793v11.456l-5.203 2.979V22.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/index.scss
new file mode 100644
index 0000000000..2e2e8f74d8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../hashicorp-color/property-16';
+        @import '../hashicorp-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/keyframes.scss
new file mode 100644
index 0000000000..757ac2b5b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-hashicorp {
+  50% {
+
+    background-color: var(--icon-color, var(--color-hashicorp-500, currentColor));
+    -webkit-mask-image: var(--icon-hashicorp-color-24);
+    mask-image: var(--icon-hashicorp-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-hashicorp-500, currentColor));
+    -webkit-mask-image: var(--icon-hashicorp-color-16);
+    mask-image: var(--icon-hashicorp-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/placeholders.scss
new file mode 100644
index 0000000000..0c22eca635
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-hashicorp-icon {
+  --icon-name: icon-hashicorp;
+  content: '';
+}
+%with-hashicorp-mask {
+  --icon-name: icon-hashicorp;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/property-16.scss
new file mode 100644
index 0000000000..aad39e8c09
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hashicorp-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.835.6L1 3.96v8.074l2.192 1.264V5.224l3.643-2.1V.6z"/><path d="M9.165.6v6.43h-2.33v-2.4L4.642 5.894v8.237l2.193 1.266v-6.41h2.33v2.383l2.192-1.264V1.864L9.165.6z"/><path d="M15 12.04L9.165 15.4v-2.525l3.642-2.1V2.703L15 3.966v8.073z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/property-24.scss
new file mode 100644
index 0000000000..5ea0302ac5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hashicorp/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hashicorp-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.835.6L1 3.96v8.074l2.192 1.264V5.224l3.643-2.1V.6z"/><path d="M9.165.6v6.43h-2.33v-2.4L4.642 5.894v8.237l2.193 1.266v-6.41h2.33v2.383l2.192-1.264V1.864L9.165.6z"/><path d="M15 12.04L9.165 15.4v-2.525l3.642-2.1V2.703L15 3.966v8.073z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/keyframes.scss
new file mode 100644
index 0000000000..0d0d337da8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-hcp-color {
+  50% {
+    background-image: var(--icon-hcp-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-hcp-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/placeholders.scss
new file mode 100644
index 0000000000..844e45d0c3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-hcp-color-icon {
+  --icon-name: icon-hcp-color;
+  content: '';
+}
+%with-hcp-color-mask {
+  --icon-name: icon-hcp-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/property-16.scss
new file mode 100644
index 0000000000..756acd94a6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hcp-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.835.6L1 3.96v8.074l2.192 1.264V5.224l3.643-2.1V.6z"/><path d="M9.165.6v6.43h-2.33v-2.4L4.642 5.894v8.237l2.193 1.266v-6.41h2.33v2.383l2.192-1.264V1.864L9.165.6z"/><path d="M9.165 15.4L15 12.04V3.966l-2.193-1.264v8.074l-3.642 2.1V15.4z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/property-24.scss
new file mode 100644
index 0000000000..16ce2c8037
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hcp-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10.336 1.5L2 6.268v11.456l3.131 1.793V8.061l5.205-2.979V1.5z"/><path d="M13.664 1.5v9.123h-3.328V7.219L7.203 9.012V20.7l3.133 1.796V13.4h3.328v3.381l3.131-1.793V3.293L13.664 1.5z"/><path d="M13.664 22.5L22 17.732V6.276l-3.133-1.793v11.456l-5.203 2.979V22.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/index.scss
new file mode 100644
index 0000000000..559077434d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../hcp-color/property-16';
+        @import '../hcp-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/keyframes.scss
new file mode 100644
index 0000000000..c459e7f033
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-hcp {
+  50% {
+
+    background-color: var(--icon-color, var(--color-hcp-500, currentColor));
+    -webkit-mask-image: var(--icon-hcp-color-24);
+    mask-image: var(--icon-hcp-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-hcp-500, currentColor));
+    -webkit-mask-image: var(--icon-hcp-color-16);
+    mask-image: var(--icon-hcp-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/placeholders.scss
new file mode 100644
index 0000000000..eae9c36bd9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-hcp-icon {
+  --icon-name: icon-hcp;
+  content: '';
+}
+%with-hcp-mask {
+  --icon-name: icon-hcp;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/property-16.scss
new file mode 100644
index 0000000000..4d9235fd80
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hcp-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.835.6L1 3.96v8.074l2.192 1.264V5.224l3.643-2.1V.6z"/><path d="M9.165.6v6.43h-2.33v-2.4L4.642 5.894v8.237l2.193 1.266v-6.41h2.33v2.383l2.192-1.264V1.864L9.165.6z"/><path d="M15 12.04L9.165 15.4v-2.525l3.642-2.1V2.703L15 3.966v8.073z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/property-24.scss
new file mode 100644
index 0000000000..af0e0b9399
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hcp/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hcp-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.835.6L1 3.96v8.074l2.192 1.264V5.224l3.643-2.1V.6z"/><path d="M9.165.6v6.43h-2.33v-2.4L4.642 5.894v8.237l2.193 1.266v-6.41h2.33v2.383l2.192-1.264V1.864L9.165.6z"/><path d="M15 12.04L9.165 15.4v-2.525l3.642-2.1V2.703L15 3.966v8.073z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/keyframes.scss
new file mode 100644
index 0000000000..4676dda704
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-headphones {
+  50% {
+
+    background-color: var(--icon-color, var(--color-headphones-500, currentColor));
+    -webkit-mask-image: var(--icon-headphones-24);
+    mask-image: var(--icon-headphones-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-headphones-500, currentColor));
+    -webkit-mask-image: var(--icon-headphones-16);
+    mask-image: var(--icon-headphones-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/placeholders.scss
new file mode 100644
index 0000000000..1a47436265
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-headphones-icon {
+  --icon-name: icon-headphones;
+  content: '';
+}
+%with-headphones-mask {
+  --icon-name: icon-headphones;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/property-16.scss
new file mode 100644
index 0000000000..441dc980c1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-headphones-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 2.5c-1.468 0-2.87.56-3.9 1.548A5.13 5.13 0 002.5 7.75V8h1.25A2.25 2.25 0 016 10.25v2.5A2.25 2.25 0 013.75 15h-.5A2.25 2.25 0 011 12.75v-5c0-1.8.745-3.52 2.061-4.784A7.135 7.135 0 018 1c1.847 0 3.624.704 4.939 1.966A6.63 6.63 0 0115 7.75v5A2.25 2.25 0 0112.75 15h-.5A2.25 2.25 0 0110 12.75v-2.5A2.25 2.25 0 0112.25 8h1.25v-.25a5.13 5.13 0 00-1.6-3.702A5.635 5.635 0 008 2.5zm5.5 7h-1.25a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h.5a.75.75 0 00.75-.75V9.5zm-11 0h1.25a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75h-.5a.75.75 0 01-.75-.75V9.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/property-24.scss
new file mode 100644
index 0000000000..d1e593c554
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/headphones/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-headphones-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 3.5c-2.26 0-4.425.874-6.018 2.424A8.128 8.128 0 003.5 11.75V13h2.75A2.75 2.75 0 019 15.75v3.5A2.75 2.75 0 016.25 22h-1.5A2.75 2.75 0 012 19.25v-7.5a9.628 9.628 0 012.936-6.902A10.132 10.132 0 0112 2c2.646 0 5.187 1.022 7.064 2.848A9.629 9.629 0 0122 11.75v7.5A2.75 2.75 0 0119.25 22h-1.5A2.75 2.75 0 0115 19.25v-3.5A2.75 2.75 0 0117.75 13h2.75v-1.25c0-2.181-.89-4.278-2.482-5.826A8.632 8.632 0 0012 3.5zm8.5 11h-2.75c-.69 0-1.25.56-1.25 1.25v3.5c0 .69.56 1.25 1.25 1.25h1.5c.69 0 1.25-.56 1.25-1.25V14.5zm-17 0h2.75c.69 0 1.25.56 1.25 1.25v3.5c0 .69-.56 1.25-1.25 1.25h-1.5c-.69 0-1.25-.56-1.25-1.25V14.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/health/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/health/index.scss
new file mode 100644
index 0000000000..2603057880
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/health/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../activity/property-16';
+        @import '../activity/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/health/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/health/keyframes.scss
new file mode 100644
index 0000000000..0e17012cb4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/health/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-health {
+  50% {
+
+    background-color: var(--icon-color, var(--color-health-500, currentColor));
+    -webkit-mask-image: var(--icon-activity-24);
+    mask-image: var(--icon-activity-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-health-500, currentColor));
+    -webkit-mask-image: var(--icon-activity-16);
+    mask-image: var(--icon-activity-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/health/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/health/placeholders.scss
new file mode 100644
index 0000000000..cead099fed
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/health/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-health-icon {
+  --icon-name: icon-health;
+  content: '';
+}
+%with-health-mask {
+  --icon-name: icon-health;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/keyframes.scss
new file mode 100644
index 0000000000..ed9c9e36c4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-heart-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-heart-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-heart-fill-24);
+    mask-image: var(--icon-heart-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-heart-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-heart-fill-16);
+    mask-image: var(--icon-heart-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/placeholders.scss
new file mode 100644
index 0000000000..2c20c7793e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-heart-fill-icon {
+  --icon-name: icon-heart-fill;
+  content: '';
+}
+%with-heart-fill-mask {
+  --icon-name: icon-heart-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/property-16.scss
new file mode 100644
index 0000000000..2ca4f7bf08
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-heart-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M11.434 1a4.604 4.604 0 00-3.226 1.322L8 2.527l-.208-.205A4.589 4.589 0 004.566 1 4.589 4.589 0 001.34 2.322 4.5 4.5 0 000 5.522a4.5 4.5 0 001.34 3.2l6.133 6.061a.75.75 0 001.054 0l6.132-6.06a4.52 4.52 0 00.992-1.467 4.482 4.482 0 00-.992-4.934A4.604 4.604 0 0011.433 1z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/property-24.scss
new file mode 100644
index 0000000000..767a0d57cb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-heart-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M16.854 3c-.805 0-1.602.155-2.346.457a6.154 6.154 0 00-1.993 1.304L12 5.265l-.515-.504a6.205 6.205 0 00-4.34-1.76 6.205 6.205 0 00-4.34 1.76A5.974 5.974 0 001 9.031c0 1.605.651 3.14 1.806 4.27l8.67 8.485a.75.75 0 001.048 0l8.67-8.485a6.022 6.022 0 001.336-1.957 5.93 5.93 0 000-4.626 6.024 6.024 0 00-1.336-1.957 6.154 6.154 0 00-1.993-1.304A6.246 6.246 0 0016.854 3z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/keyframes.scss
new file mode 100644
index 0000000000..ae8c3cda78
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-heart-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-heart-off-500, currentColor));
+    -webkit-mask-image: var(--icon-heart-off-24);
+    mask-image: var(--icon-heart-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-heart-off-500, currentColor));
+    -webkit-mask-image: var(--icon-heart-off-16);
+    mask-image: var(--icon-heart-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/placeholders.scss
new file mode 100644
index 0000000000..61f6a2a9ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-heart-off-icon {
+  --icon-name: icon-heart-off;
+  content: '';
+}
+%with-heart-off-mask {
+  --icon-name: icon-heart-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/property-16.scss
new file mode 100644
index 0000000000..66d9c8124b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-heart-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1.78.72A.75.75 0 00.72 1.78l.58.581A4.5 4.5 0 000 5.522a4.5 4.5 0 001.34 3.2l6.133 6.061a.75.75 0 001.054 0l2.613-2.582 3.08 3.08a.75.75 0 101.06-1.061L1.78.72zm8.3 10.42L2.36 3.422a2.999 2.999 0 00-.861 2.1 3 3 0 00.895 2.134L8 13.196l2.08-2.056z" clip-rule="evenodd"/><path d="M11.434 1a4.604 4.604 0 00-3.226 1.322l-.735.726a.75.75 0 001.054 1.067l.735-.727a3.104 3.104 0 014.342 0 2.981 2.981 0 010 4.267l-.735.727a.75.75 0 101.055 1.067l.735-.726a4.52 4.52 0 00.992-1.467 4.482 4.482 0 00-.992-4.934A4.604 4.604 0 0011.433 1z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/property-24.scss
new file mode 100644
index 0000000000..e5d9b37553
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-heart-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06L3.28 4.342c-.165.13-.324.27-.475.42A5.974 5.974 0 001 9.03c0 1.605.651 3.14 1.806 4.27l8.67 8.485a.75.75 0 001.048 0l4.145-4.056 5.05 5.05a.75.75 0 101.061-1.06L2.28 1.22zm13.328 15.449L4.351 5.412c-.174.128-.34.269-.496.421A4.474 4.474 0 002.5 9.031c0 1.196.485 2.347 1.355 3.198L12 20.2l3.608-3.532z" clip-rule="evenodd"/><path d="M14.508 3.457a6.246 6.246 0 014.693 0 6.153 6.153 0 011.993 1.304 6.024 6.024 0 011.336 1.957 5.931 5.931 0 010 4.626 6.022 6.022 0 01-1.336 1.957l-1.04 1.017a.75.75 0 01-1.049-1.072l1.04-1.017c.43-.421.771-.921 1.003-1.47a4.431 4.431 0 000-3.456 4.524 4.524 0 00-1.003-1.47 4.653 4.653 0 00-1.508-.986 4.746 4.746 0 00-3.566 0 4.653 4.653 0 00-1.507.986l-1.04 1.018a.75.75 0 01-1.049 0l-1.04-1.018a4.644 4.644 0 00-1.257-.875.75.75 0 11.644-1.356c.61.29 1.173.68 1.663 1.16l.515.503.515-.504a6.154 6.154 0 011.993-1.304z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart/keyframes.scss
new file mode 100644
index 0000000000..05945a558f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-heart {
+  50% {
+
+    background-color: var(--icon-color, var(--color-heart-500, currentColor));
+    -webkit-mask-image: var(--icon-heart-24);
+    mask-image: var(--icon-heart-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-heart-500, currentColor));
+    -webkit-mask-image: var(--icon-heart-16);
+    mask-image: var(--icon-heart-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart/placeholders.scss
new file mode 100644
index 0000000000..ae507d3347
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-heart-icon {
+  --icon-name: icon-heart;
+  content: '';
+}
+%with-heart-mask {
+  --icon-name: icon-heart;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart/property-16.scss
new file mode 100644
index 0000000000..1535ecaf7a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-heart-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.689 1.343a4.604 4.604 0 014.97.979 4.482 4.482 0 010 6.4l-6.132 6.061a.75.75 0 01-1.054 0L1.34 8.723A4.5 4.5 0 010 5.523a4.5 4.5 0 011.34-3.201A4.589 4.589 0 014.566 1c1.208 0 2.369.475 3.226 1.322L8 2.527l.208-.205a4.57 4.57 0 011.48-.979zm3.916 2.045a3.104 3.104 0 00-4.342 0l-.736.727a.75.75 0 01-1.054 0l-.736-.726a3.089 3.089 0 00-2.17-.889c-.817 0-1.598.32-2.172.889A3 3 0 001.5 5.522a3 3 0 00.895 2.134L8 13.196l5.605-5.54c.284-.281.51-.614.663-.98a2.981 2.981 0 00-.663-3.288z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/heart/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/heart/property-24.scss
new file mode 100644
index 0000000000..66548846d3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/heart/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-heart-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M14.508 3.457a6.246 6.246 0 014.693 0 6.154 6.154 0 011.993 1.304 6.024 6.024 0 011.336 1.957 5.931 5.931 0 010 4.626 6.022 6.022 0 01-1.336 1.957l-8.67 8.485a.75.75 0 01-1.049 0l-8.67-8.485A5.974 5.974 0 011 9.03c0-1.605.651-3.14 1.806-4.27a6.205 6.205 0 014.34-1.76c1.624 0 3.185.631 4.339 1.76l.515.504.515-.504a6.154 6.154 0 011.993-1.304zm5.637 2.376a4.653 4.653 0 00-1.508-.986 4.746 4.746 0 00-3.566 0 4.653 4.653 0 00-1.507.986l-1.04 1.018a.75.75 0 01-1.049 0l-1.04-1.018a4.705 4.705 0 00-3.29-1.332c-1.237 0-2.42.48-3.29 1.332A4.474 4.474 0 002.5 9.031c0 1.196.485 2.347 1.355 3.198L12 20.2l8.145-7.972c.43-.421.771-.921 1.003-1.47a4.431 4.431 0 000-3.456 4.524 4.524 0 00-1.003-1.47z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/index.scss
new file mode 100644
index 0000000000..85b6821c44
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../help/property-16';
+        @import '../help/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/keyframes.scss
new file mode 100644
index 0000000000..2653505a84
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-help-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-help-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-help-24);
+    mask-image: var(--icon-help-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-help-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-help-16);
+    mask-image: var(--icon-help-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/placeholders.scss
new file mode 100644
index 0000000000..25b71721c4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-help-circle-fill-icon {
+  --icon-name: icon-help-circle-fill;
+  content: '';
+}
+%with-help-circle-fill-mask {
+  --icon-name: icon-help-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/index.scss
new file mode 100644
index 0000000000..85b6821c44
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../help/property-16';
+        @import '../help/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/keyframes.scss
new file mode 100644
index 0000000000..eeeff6f04d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-help-circle-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-help-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-help-24);
+    mask-image: var(--icon-help-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-help-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-help-16);
+    mask-image: var(--icon-help-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/placeholders.scss
new file mode 100644
index 0000000000..dd0293c605
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help-circle-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-help-circle-outline-icon {
+  --icon-name: icon-help-circle-outline;
+  content: '';
+}
+%with-help-circle-outline-mask {
+  --icon-name: icon-help-circle-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help/keyframes.scss
new file mode 100644
index 0000000000..c4f9f5de1c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-help {
+  50% {
+
+    background-color: var(--icon-color, var(--color-help-500, currentColor));
+    -webkit-mask-image: var(--icon-help-24);
+    mask-image: var(--icon-help-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-help-500, currentColor));
+    -webkit-mask-image: var(--icon-help-16);
+    mask-image: var(--icon-help-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help/placeholders.scss
new file mode 100644
index 0000000000..a489036267
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-help-icon {
+  --icon-name: icon-help;
+  content: '';
+}
+%with-help-mask {
+  --icon-name: icon-help;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help/property-16.scss
new file mode 100644
index 0000000000..66888f17b9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-help-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M8.197 4.523a1.532 1.532 0 00-1.051.196c-.318.19-.563.49-.687.85a.75.75 0 01-1.418-.49c.239-.69.71-1.274 1.335-1.648a3.032 3.032 0 012.079-.386 3.057 3.057 0 011.829 1.065 3.13 3.13 0 01.716 2c0 .487-.092.905-.275 1.266-.182.36-.431.62-.679.817-.194.156-.41.291-.581.398l-.096.06a2.507 2.507 0 00-.452.34.643.643 0 00-.172.292.75.75 0 01-1.499-.033c0-.163.035-.324.086-.479.08-.243.232-.543.515-.832.239-.243.505-.419.72-.554.044-.029.086-.056.126-.08.169-.106.296-.186.415-.282a.976.976 0 00.279-.323c.059-.117.113-.296.113-.59v-.002a1.63 1.63 0 00-.372-1.041c-.24-.29-.57-.481-.931-.544z" clip-rule="evenodd"/><path d="M8 11a1 1 0 100 2h.007a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/help/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/help/property-24.scss
new file mode 100644
index 0000000000..d851e9c37b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/help/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-help-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M12.349 7.536c-.612-.1-1.24.01-1.77.31s-.926.765-1.125 1.308a.75.75 0 11-1.408-.516A3.995 3.995 0 019.842 6.54a4.212 4.212 0 012.75-.484c.946.156 1.81.63 2.436 1.343.627.715.973 1.624.972 2.569 0 .636-.127 1.168-.369 1.62-.24.449-.569.77-.9 1.021a8.43 8.43 0 01-.804.519l-.144.085c-.294.177-.526.329-.712.507-.185.178-.264.341-.298.441a.62.62 0 00-.028.107l-.001.007a.75.75 0 01-1.5-.025c0-.198.047-.394.111-.58a2.63 2.63 0 01.677-1.032c.318-.304.675-.529.98-.712l.177-.104a6.68 6.68 0 00.636-.409 1.64 1.64 0 00.484-.533c.107-.2.191-.482.191-.913v-.001c0-.573-.21-1.132-.6-1.578a2.628 2.628 0 00-1.551-.852z" clip-rule="evenodd"/><path d="M12 16a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/keyframes.scss
new file mode 100644
index 0000000000..6f41b8148a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-hexagon-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-hexagon-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-hexagon-fill-24);
+    mask-image: var(--icon-hexagon-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-hexagon-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-hexagon-fill-16);
+    mask-image: var(--icon-hexagon-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/placeholders.scss
new file mode 100644
index 0000000000..7bab53c70c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-hexagon-fill-icon {
+  --icon-name: icon-hexagon-fill;
+  content: '';
+}
+%with-hexagon-fill-mask {
+  --icon-name: icon-hexagon-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/property-16.scss
new file mode 100644
index 0000000000..fbfaf61d72
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hexagon-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M9.166.33a2.25 2.25 0 00-2.332 0l-5.25 3.182A2.25 2.25 0 00.5 5.436v5.128a2.25 2.25 0 001.084 1.924l5.25 3.182a2.25 2.25 0 002.332 0l5.25-3.182a2.25 2.25 0 001.084-1.924V5.436a2.25 2.25 0 00-1.084-1.924L9.166.33z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/property-24.scss
new file mode 100644
index 0000000000..03f5da4132
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hexagon-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M13.441 1.006a2.75 2.75 0 00-2.882 0l-7.75 4.77A2.75 2.75 0 001.5 8.118v7.764a2.75 2.75 0 001.309 2.342l7.75 4.77a2.75 2.75 0 002.882 0l7.75-4.77a2.75 2.75 0 001.309-2.342V8.118a2.75 2.75 0 00-1.309-2.342l-7.75-4.77z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/keyframes.scss
new file mode 100644
index 0000000000..6a539d3c61
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-hexagon {
+  50% {
+
+    background-color: var(--icon-color, var(--color-hexagon-500, currentColor));
+    -webkit-mask-image: var(--icon-hexagon-24);
+    mask-image: var(--icon-hexagon-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-hexagon-500, currentColor));
+    -webkit-mask-image: var(--icon-hexagon-16);
+    mask-image: var(--icon-hexagon-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/placeholders.scss
new file mode 100644
index 0000000000..b079f07e42
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-hexagon-icon {
+  --icon-name: icon-hexagon;
+  content: '';
+}
+%with-hexagon-mask {
+  --icon-name: icon-hexagon;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/property-16.scss
new file mode 100644
index 0000000000..17509f0d89
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hexagon-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.834.33a2.25 2.25 0 012.332 0l5.25 3.182A2.25 2.25 0 0115.5 5.436v5.128a2.25 2.25 0 01-1.084 1.924l-5.25 3.182a2.25 2.25 0 01-2.332 0l-5.25-3.182A2.25 2.25 0 01.5 10.564V5.436a2.25 2.25 0 011.084-1.924L6.834.33zm1.555 1.283a.75.75 0 00-.778 0l-5.25 3.181A.75.75 0 002 5.436v5.128a.75.75 0 00.361.642l5.25 3.181a.75.75 0 00.778 0l5.25-3.181a.75.75 0 00.361-.642V5.436a.75.75 0 00-.361-.642l-5.25-3.181z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/property-24.scss
new file mode 100644
index 0000000000..412adda810
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hexagon/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hexagon-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.559 1.006a2.75 2.75 0 012.882 0l7.75 4.77A2.75 2.75 0 0122.5 8.118v7.764a2.75 2.75 0 01-1.309 2.342l-7.75 4.77a2.75 2.75 0 01-2.882 0l-7.75-4.77A2.75 2.75 0 011.5 15.882V8.118a2.75 2.75 0 011.309-2.342l7.75-4.77zm2.096 1.278a1.25 1.25 0 00-1.31 0l-7.75 4.77A1.25 1.25 0 003 8.117v7.764c0 .435.225.838.595 1.065l7.75 4.77a1.25 1.25 0 001.31 0l7.75-4.77c.37-.227.595-.63.595-1.065V8.118a1.25 1.25 0 00-.595-1.065l-7.75-4.77z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/history/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/history/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/history/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/history/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/history/keyframes.scss
new file mode 100644
index 0000000000..c033c8dc7a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/history/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-history {
+  50% {
+
+    background-color: var(--icon-color, var(--color-history-500, currentColor));
+    -webkit-mask-image: var(--icon-history-24);
+    mask-image: var(--icon-history-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-history-500, currentColor));
+    -webkit-mask-image: var(--icon-history-16);
+    mask-image: var(--icon-history-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/history/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/history/placeholders.scss
new file mode 100644
index 0000000000..3ba6689108
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/history/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-history-icon {
+  --icon-name: icon-history;
+  content: '';
+}
+%with-history-mask {
+  --icon-name: icon-history;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/history/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/history/property-16.scss
new file mode 100644
index 0000000000..46e1f00386
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/history/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-history-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.5 1.25a.75.75 0 011.5 0v1.851A7 7 0 111 8a.75.75 0 011.5 0 5.5 5.5 0 101.725-4H5.75a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75v-3.5z"/><path d="M8.25 4a.75.75 0 01.75.75v3.763l1.805.802a.75.75 0 01-.61 1.37l-2.25-1A.75.75 0 017.5 9V4.75A.75.75 0 018.25 4z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/history/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/history/property-24.scss
new file mode 100644
index 0000000000..8fd659ccf0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/history/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-history-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3.5c-2.347 0-4.471.95-6.01 2.49A8.55 8.55 0 005.125 7H8.25a.75.75 0 010 1.5h-4.5A.75.75 0 013 7.75v-4.5a.75.75 0 011.5 0v2.135A9.971 9.971 0 0112 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12a.75.75 0 011.5 0A8.5 8.5 0 1012 3.5z"/><path d="M11.75 6a.75.75 0 01.75.75v5.787l4.085 2.042a.75.75 0 11-.67 1.342l-4.5-2.25A.75.75 0 0111 13V6.75a.75.75 0 01.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/home/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/home/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/home/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/home/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/home/keyframes.scss
new file mode 100644
index 0000000000..d94130d472
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/home/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-home {
+  50% {
+
+    background-color: var(--icon-color, var(--color-home-500, currentColor));
+    -webkit-mask-image: var(--icon-home-24);
+    mask-image: var(--icon-home-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-home-500, currentColor));
+    -webkit-mask-image: var(--icon-home-16);
+    mask-image: var(--icon-home-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/home/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/home/placeholders.scss
new file mode 100644
index 0000000000..a6b1a7bba5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/home/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-home-icon {
+  --icon-name: icon-home;
+  content: '';
+}
+%with-home-mask {
+  --icon-name: icon-home;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/home/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/home/property-16.scss
new file mode 100644
index 0000000000..6b3f573dc2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/home/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-home-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.846 2.574a.25.25 0 01.308 0l5.25 4.12a.25.25 0 01.096.196v7.36a.75.75 0 001.5 0V6.89a1.75 1.75 0 00-.67-1.377L9.08 1.394a1.75 1.75 0 00-2.16 0l-5.25 4.12A1.75 1.75 0 001 6.89v7.36a.75.75 0 001.5 0V6.89a.25.25 0 01.096-.196l5.25-4.12z"/><path d="M6.5 14.25V10.5h3v3.75a.75.75 0 001.5 0v-4C11 9.56 10.44 9 9.75 9h-3.5C5.56 9 5 9.56 5 10.25v4a.75.75 0 001.5 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/home/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/home/property-24.scss
new file mode 100644
index 0000000000..4f53ac1a57
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/home/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-home-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.847 2.819a.25.25 0 01.306 0l8.25 6.407a.25.25 0 01.097.198V21.25a.75.75 0 001.5 0V9.424c0-.54-.25-1.05-.677-1.382l-8.25-6.408a1.75 1.75 0 00-2.146 0l-8.25 6.408A1.75 1.75 0 002 9.424V21.25a.75.75 0 001.5 0V9.424a.25.25 0 01.097-.198l8.25-6.407z"/><path d="M9.5 15.75a.25.25 0 01.25-.25h4.5a.25.25 0 01.25.25v5.5a.75.75 0 001.5 0v-5.5A1.75 1.75 0 0014.25 14h-4.5A1.75 1.75 0 008 15.75v5.5a.75.75 0 001.5 0v-5.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/keyframes.scss
new file mode 100644
index 0000000000..9a4e880325
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-hourglass {
+  50% {
+
+    background-color: var(--icon-color, var(--color-hourglass-500, currentColor));
+    -webkit-mask-image: var(--icon-hourglass-24);
+    mask-image: var(--icon-hourglass-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-hourglass-500, currentColor));
+    -webkit-mask-image: var(--icon-hourglass-16);
+    mask-image: var(--icon-hourglass-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/placeholders.scss
new file mode 100644
index 0000000000..37f8832e4e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-hourglass-icon {
+  --icon-name: icon-hourglass;
+  content: '';
+}
+%with-hourglass-mask {
+  --icon-name: icon-hourglass;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/property-16.scss
new file mode 100644
index 0000000000..64a7f53510
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hourglass-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.75 12.75A.75.75 0 016.5 12h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zM7.75 4.5a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/><path fill-rule="evenodd" d="M2.695 2.717A1.5 1.5 0 014.012.5h7.976a1.5 1.5 0 011.317 2.217L10.494 7.88a.25.25 0 000 .24l2.811 5.163a1.5 1.5 0 01-1.317 2.217H4.012a1.5 1.5 0 01-1.317-2.217l2.81-5.163a.25.25 0 000-.24l-2.81-5.163zM11.988 2H4.012l2.811 5.163a1.75 1.75 0 010 1.674L4.013 14h7.975L9.177 8.837a1.75 1.75 0 010-1.674L11.987 2z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/property-24.scss
new file mode 100644
index 0000000000..f01397dad9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/hourglass/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-hourglass-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8 19.75a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5a.75.75 0 01-.75-.75zM11.75 8a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/><path fill-rule="evenodd" d="M4.694 4.503C3.69 3.01 4.762 1 6.562 1h10.876c1.8 0 2.871 2.009 1.868 3.503l-4.748 7.08a.75.75 0 000 .835l4.748 7.079C20.31 20.99 19.238 23 17.438 23H6.562c-1.8 0-2.871-2.009-1.868-3.503l4.748-7.08a.75.75 0 000-.835L4.694 4.503zM6.562 2.5a.75.75 0 00-.623 1.168l4.748 7.079a2.25 2.25 0 010 2.506l-4.748 7.08a.75.75 0 00.623 1.167h10.876c.6 0 .957-.67.623-1.168l-4.748-7.079a2.25 2.25 0 010-2.506l4.748-7.08a.75.75 0 00-.623-1.167H6.562z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/keyframes.scss
new file mode 100644
index 0000000000..caa32b91e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-identity-service {
+  50% {
+
+    background-color: var(--icon-color, var(--color-identity-service-500, currentColor));
+    -webkit-mask-image: var(--icon-identity-service-24);
+    mask-image: var(--icon-identity-service-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-identity-service-500, currentColor));
+    -webkit-mask-image: var(--icon-identity-service-16);
+    mask-image: var(--icon-identity-service-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/placeholders.scss
new file mode 100644
index 0000000000..e4bab0af32
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-identity-service-icon {
+  --icon-name: icon-identity-service;
+  content: '';
+}
+%with-identity-service-mask {
+  --icon-name: icon-identity-service;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/property-16.scss
new file mode 100644
index 0000000000..e90ea04e7f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-identity-service-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 5a4 4 0 100 8 4 4 0 000-8zm-.904 3H5.708a2.504 2.504 0 011.847-1.46A5.94 5.94 0 007.096 8zm-.068 1.5H5.55c.203.998 1 1.78 2.005 1.96a6.01 6.01 0 01-.527-1.96zm2.103 1.73a4.376 4.376 0 01-.594-1.73h1.913a2.504 2.504 0 01-1.319 1.73zM8.628 8c.107-.445.278-.862.503-1.23A2.51 2.51 0 0110.292 8H8.628z"/><path d="M4 1.25C4 .56 4.56 0 5.25 0h5.5C11.44 0 12 .56 12 1.25V2h1.75A2.25 2.25 0 0116 4.25v8.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-8.5A2.25 2.25 0 012.25 2H4v-.75zM10.75 4c.409 0 .772-.196 1-.5h2a.75.75 0 01.75.75v8.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-8.5a.75.75 0 01.75-.75h2c.228.304.591.5 1 .5h5.5zM5.5 2.5h5v-1h-5v1z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/property-24.scss
new file mode 100644
index 0000000000..8055d4cdb4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-service/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-identity-service-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 7.25a5.75 5.75 0 100 11.5 5.75 5.75 0 000-11.5zM9.329 12h-1.46a4.26 4.26 0 012.42-2.892A8.401 8.401 0 009.33 12zm-.055 1.5H7.78a4.254 4.254 0 002.51 3.392A8.4 8.4 0 019.275 13.5zm4.436 3.392a4.254 4.254 0 002.51-3.392h-1.494a8.4 8.4 0 01-1.016 3.392zm-.49-3.392A6.9 6.9 0 0112 16.804a6.9 6.9 0 01-1.22-3.304h2.44zm-.066-1.5h-2.308A6.9 6.9 0 0112 9.196 6.9 6.9 0 0113.154 12zm1.517 0h1.46a4.26 4.26 0 00-2.42-2.892c.492.895.819 1.875.96 2.892z"/><path d="M7 2.75C7 1.784 7.784 1 8.75 1h6.5c.966 0 1.75.784 1.75 1.75V3h3.25A2.75 2.75 0 0123 5.75v12.5A2.75 2.75 0 0120.25 21H3.75A2.75 2.75 0 011 18.25V5.75A2.75 2.75 0 013.75 3H7v-.25zM20.25 4.5H17v.25a1.75 1.75 0 01-1.75 1.75h-6.5A1.75 1.75 0 017 4.75V4.5H3.75c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25zM8.5 4.75v-2a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v2a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/keyframes.scss
new file mode 100644
index 0000000000..3ae540cffe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-identity-user {
+  50% {
+
+    background-color: var(--icon-color, var(--color-identity-user-500, currentColor));
+    -webkit-mask-image: var(--icon-identity-user-24);
+    mask-image: var(--icon-identity-user-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-identity-user-500, currentColor));
+    -webkit-mask-image: var(--icon-identity-user-16);
+    mask-image: var(--icon-identity-user-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/placeholders.scss
new file mode 100644
index 0000000000..db0e907947
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-identity-user-icon {
+  --icon-name: icon-identity-user;
+  content: '';
+}
+%with-identity-user-mask {
+  --icon-name: icon-identity-user;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/property-16.scss
new file mode 100644
index 0000000000..ea7521357b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-identity-user-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.187 10.482A2.324 2.324 0 016.625 10h2.75c.515 0 1.034.16 1.438.482.41.325.687.807.687 1.359v.409a.75.75 0 01-1.5 0v-.41c0-.026-.012-.098-.119-.183a.828.828 0 00-.506-.157h-2.75a.828.828 0 00-.506.157c-.107.085-.119.157-.119.184v.409a.75.75 0 01-1.5 0v-.41c0-.55.277-1.033.687-1.358z"/><path fill-rule="evenodd" d="M8 4.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM7 7a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M5.25 0C4.56 0 4 .56 4 1.25V2H2.25A2.25 2.25 0 000 4.25v8.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-8.5A2.25 2.25 0 0013.75 2H12v-.75C12 .56 11.44 0 10.75 0h-5.5zm6.5 3.5c-.228.304-.591.5-1 .5h-5.5c-.409 0-.772-.196-1-.5h-2a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75v-8.5a.75.75 0 00-.75-.75h-2zm-1.25-1h-5v-1h5v1z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/property-24.scss
new file mode 100644
index 0000000000..de312ce6df
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/identity-user/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-identity-user-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.858 14.79A2.944 2.944 0 019.875 14h4.25c.748 0 1.475.28 2.017.79.543.511.858 1.216.858 1.96v.5a.75.75 0 01-1.5 0v-.5c0-.316-.133-.63-.386-.868a1.445 1.445 0 00-.989-.382h-4.25c-.379 0-.734.142-.989.382a1.193 1.193 0 00-.386.868v.5a.75.75 0 01-1.5 0v-.5c0-.744.315-1.449.858-1.96z"/><path fill-rule="evenodd" d="M12 7.5a3 3 0 100 6 3 3 0 000-6zm-1.5 3a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M8.75 1A1.75 1.75 0 007 2.75V3H3.75A2.75 2.75 0 001 5.75v12.5A2.75 2.75 0 003.75 21h16.5A2.75 2.75 0 0023 18.25V5.75A2.75 2.75 0 0020.25 3H17v-.25A1.75 1.75 0 0015.25 1h-6.5zM17 4.5h3.25c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V5.75c0-.69.56-1.25 1.25-1.25H7v.25c0 .966.784 1.75 1.75 1.75h6.5A1.75 1.75 0 0017 4.75V4.5zm-8.5.25c0 .138.112.25.25.25h6.5a.25.25 0 00.25-.25v-2a.25.25 0 00-.25-.25h-6.5a.25.25 0 00-.25.25v2z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/image/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/image/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/image/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/image/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/image/keyframes.scss
new file mode 100644
index 0000000000..23b067845a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/image/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-image {
+  50% {
+
+    background-color: var(--icon-color, var(--color-image-500, currentColor));
+    -webkit-mask-image: var(--icon-image-24);
+    mask-image: var(--icon-image-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-image-500, currentColor));
+    -webkit-mask-image: var(--icon-image-16);
+    mask-image: var(--icon-image-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/image/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/image/placeholders.scss
new file mode 100644
index 0000000000..2734a5a5a0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/image/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-image-icon {
+  --icon-name: icon-image;
+  content: '';
+}
+%with-image-mask {
+  --icon-name: icon-image;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/image/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/image/property-16.scss
new file mode 100644
index 0000000000..f97156fcbb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/image/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-image-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.5 3a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm-1 2.5a1 1 0 112 0 1 1 0 01-2 0z"/><path d="M0 2.25A2.25 2.25 0 012.25 0h11.5A2.25 2.25 0 0116 2.25v11.5A2.25 2.25 0 0113.75 16H2.25A2.25 2.25 0 010 13.75V2.25zm14.5 0v5.94l-1.835-1.836a1.75 1.75 0 00-2.335-.125L1.5 13.336V2.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75zm-.75 12.25H2.446l8.825-7.103a.25.25 0 01.333.018l2.896 2.896v3.439a.75.75 0 01-.75.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/image/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/image/property-24.scss
new file mode 100644
index 0000000000..3db82e6286
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/image/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-image-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M6 8.5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0zm2.5-1a1 1 0 100 2 1 1 0 000-2z"/><path d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zm18.5 8.5v-8.5c0-.69-.56-1.25-1.25-1.25H4.75c-.69 0-1.25.56-1.25 1.25v14.5c0 .024 0 .047.002.07l10.654-8.773a2.75 2.75 0 013.644.132l2.7 2.571zM4.468 20.468l10.641-8.763a1.25 1.25 0 011.657.06l3.734 3.556v3.929c0 .69-.56 1.25-1.25 1.25H4.75c-.097 0-.191-.011-.282-.032z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/keyframes.scss
new file mode 100644
index 0000000000..7ae56c6ffd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-inbox {
+  50% {
+
+    background-color: var(--icon-color, var(--color-inbox-500, currentColor));
+    -webkit-mask-image: var(--icon-inbox-24);
+    mask-image: var(--icon-inbox-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-inbox-500, currentColor));
+    -webkit-mask-image: var(--icon-inbox-16);
+    mask-image: var(--icon-inbox-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/placeholders.scss
new file mode 100644
index 0000000000..f804ef398a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-inbox-icon {
+  --icon-name: icon-inbox;
+  content: '';
+}
+%with-inbox-mask {
+  --icon-name: icon-inbox;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/property-16.scss
new file mode 100644
index 0000000000..8ab1a245b3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-inbox-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.748 1a2.25 2.25 0 00-2.07 1.369L.18 8.235a2.25 2.25 0 00-.18.882v3.633A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75V9.117c0-.303-.061-.603-.18-.882L13.322 2.37A2.25 2.25 0 0011.252 1H4.748zm-.69 1.956a.75.75 0 01.69-.456h6.504c.3 0 .572.18.69.456L14.09 8H10.5a.75.75 0 00-.53.22L8.69 9.5H7.31L6.03 8.22A.75.75 0 005.5 8H1.91l2.148-5.044zM1.5 9.5v3.25c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75V9.5h-3.69l-1.28 1.28A.75.75 0 019 11H7a.75.75 0 01-.53-.22L5.19 9.5H1.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/property-24.scss
new file mode 100644
index 0000000000..40460d4d19
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/inbox/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-inbox-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7.202 3a2.75 2.75 0 00-2.428 1.46L1.32 10.958A2.75 2.75 0 001 12.248v6.002A2.75 2.75 0 003.75 21h16.5A2.75 2.75 0 0023 18.25v-6.002c0-.45-.11-.893-.321-1.29L19.226 4.46A2.75 2.75 0 0016.798 3H7.202zM6.098 5.164A1.25 1.25 0 017.202 4.5h9.596c.462 0 .887.255 1.104.664l3.366 6.336H16a.75.75 0 00-.624.334L13.599 14.5H10.4l-1.777-2.666A.75.75 0 008 11.5H2.732l3.366-6.336zM2.5 13v5.25c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V13h-5.099l-1.777 2.666A.75.75 0 0114 16h-4a.75.75 0 01-.624-.334L7.599 13H2.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
new file mode 100644
index 0000000000..fc3360b031
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
@@ -0,0 +1,659 @@
+
+// @import './alert-circle-fill/index.scss';
+@import './alert-circle-outline/index.scss';
+@import './alert-triangle/index.scss';
+// @import './arrow-down/index.scss';
+// @import './arrow-left/index.scss';
+@import './arrow-right/index.scss';
+// @import './arrow-up/index.scss';
+// @import './bolt/index.scss';
+// @import './box-check-fill/index.scss';
+// @import './box-outline/index.scss';
+// @import './broadcast/index.scss';
+// @import './bug/index.scss';
+// @import './calendar/index.scss';
+// @import './cancel-circle-fill/index.scss';
+// @import './cancel-circle-outline/index.scss';
+@import './cancel-plain/index.scss';
+@import './cancel-square-fill/index.scss';
+// @import './cancel-square-outline/index.scss';
+// @import './caret-down/index.scss';
+// @import './caret-up/index.scss';
+// @import './check-circle-fill/index.scss';
+// @import './check-circle-outline/index.scss';
+@import './check-plain/index.scss';
+@import './chevron-down/index.scss';
+// @import './chevron-left/index.scss';
+// @import './chevron-right/index.scss';
+// @import './chevron-up/index.scss';
+// @import './clock-fill/index.scss';
+// @import './clock-outline/index.scss';
+// @import './code/index.scss';
+// @import './console/index.scss';
+@import './copy-action/index.scss';
+// @import './copy-success/index.scss';
+// @import './database/index.scss';
+@import './deny-alt/index.scss';
+@import './deny-default/index.scss';
+@import './disabled/index.scss';
+@import './docs/index.scss';
+// @import './download/index.scss';
+// @import './edit/index.scss';
+// @import './envelope-sealed-fill/index.scss';
+// @import './envelope-sealed-outline/index.scss';
+// @import './envelope-unsealed--outline/index.scss';
+// @import './envelope-unsealed-fill/index.scss';
+@import './exit/index.scss';
+// @import './expand-less/index.scss';
+// @import './expand-more/index.scss';
+@import './file-fill/index.scss';
+// @import './file-outline/index.scss';
+// @import './filter/index.scss';
+// @import './flag/index.scss';
+// @import './folder-fill/index.scss';
+@import './folder-outline/index.scss';
+// @import './gift-fill/index.scss';
+// @import './gift-outline/index.scss';
+// @import './git-branch/index.scss';
+// @import './git-commit/index.scss';
+// @import './git-pull-request/index.scss';
+// @import './git-repository/index.scss';
+// @import './guide/index.scss';
+@import './health/index.scss';
+// @import './help-circle-fill/index.scss';
+@import './help-circle-outline/index.scss';
+// @import './history/index.scss';
+@import './info-circle-fill/index.scss';
+@import './info-circle-outline/index.scss';
+// @import './key/index.scss';
+@import './learn/index.scss';
+// @import './link/index.scss';
+@import './loading/index.scss';
+// @import './lock-closed-fill/index.scss';
+// @import './lock-closed-outline/index.scss';
+// @import './lock-closed/index.scss';
+// @import './lock-disabled/index.scss';
+// @import './lock-open/index.scss';
+// @import './logo-alicloud-color/index.scss';
+// @import './logo-alicloud-monochrome/index.scss';
+// @import './logo-aws-color/index.scss';
+// @import './logo-aws-monochrome/index.scss';
+// @import './logo-azure-color/index.scss';
+// @import './logo-azure-dev-ops-color/index.scss';
+// @import './logo-azure-dev-ops-monochrome/index.scss';
+// @import './logo-azure-monochrome/index.scss';
+// @import './logo-bitbucket-color/index.scss';
+// @import './logo-bitbucket-monochrome/index.scss';
+// @import './logo-gcp-color/index.scss';
+// @import './logo-gcp-monochrome/index.scss';
+// @import './logo-github-color/index.scss';
+@import './logo-github-monochrome/index.scss';
+// @import './logo-gitlab-color/index.scss';
+// @import './logo-gitlab-monochrome/index.scss';
+@import './logo-google-color/index.scss';
+// @import './logo-google-monochrome/index.scss';
+@import './logo-kubernetes-color/index.scss';
+// @import './logo-kubernetes-monochrome/index.scss';
+// @import './logo-oracle-color/index.scss';
+// @import './logo-oracle-monochrome/index.scss';
+// @import './logo-slack-color/index.scss';
+// @import './logo-slack-monochrome/index.scss';
+// @import './logo-vmware-color/index.scss';
+// @import './logo-vmware-monochrome/index.scss';
+@import './menu/index.scss';
+// @import './message/index.scss';
+// @import './minus-circle-fill/index.scss';
+// @import './minus-circle-outline/index.scss';
+// @import './minus-plain/index.scss';
+@import './minus-square-fill/index.scss';
+// @import './module/index.scss';
+@import './more-horizontal/index.scss';
+// @import './more-vertical/index.scss';
+// @import './notification-disabled/index.scss';
+// @import './notification-fill/index.scss';
+// @import './notification-outline/index.scss';
+// @import './outline/index.scss';
+// @import './page-outline/index.scss';
+// @import './partner/index.scss';
+// @import './play-fill/index.scss';
+// @import './play-outline/index.scss';
+// @import './play-plain/index.scss';
+// @import './plus-circle-fill/index.scss';
+// @import './plus-circle-outline/index.scss';
+// @import './plus-plain/index.scss';
+// @import './plus-square-fill/index.scss';
+// @import './provider/index.scss';
+@import './public-default/index.scss';
+// @import './public-locked/index.scss';
+// @import './queue/index.scss';
+// @import './radio-button-checked/index.scss';
+// @import './radio-button-unchecked/index.scss';
+// @import './random/index.scss';
+// @import './refresh-alert/index.scss';
+// @import './refresh-default/index.scss';
+// @import './remix/index.scss';
+// @import './ribbon/index.scss';
+// @import './run/index.scss';
+@import './search/index.scss';
+// @import './settings/index.scss';
+// @import './source-file/index.scss';
+// @import './star-fill/index.scss';
+@import './star-outline/index.scss';
+// @import './sub-left/index.scss';
+// @import './sub-right/index.scss';
+// @import './support/index.scss';
+// @import './swap-horizontal/index.scss';
+// @import './swap-vertical/index.scss';
+// @import './trash/index.scss';
+// @import './tune/index.scss';
+// @import './unfold-less/index.scss';
+// @import './unfold-more/index.scss';
+// @import './upload/index.scss';
+// @import './user-add/index.scss';
+@import './user-organization/index.scss';
+@import './user-plain/index.scss';
+// @import './user-square-fill/index.scss';
+// @import './user-square-outline/index.scss';
+@import './user-team/index.scss';
+@import './visibility-hide/index.scss';
+@import './visibility-show/index.scss';
+// @import './webhook/index.scss';
+// @import './activity/index.scss';
+@import './alert-circle/index.scss';
+// @import './alert-circle-fill/index.scss';
+// @import './alert-octagon/index.scss';
+// @import './alert-octagon-fill/index.scss';
+// @import './alert-triangle/index.scss';
+// @import './alert-triangle-fill/index.scss';
+// @import './alibaba/index.scss';
+// @import './alibaba-color/index.scss';
+// @import './align-center/index.scss';
+// @import './align-justify/index.scss';
+// @import './align-left/index.scss';
+// @import './align-right/index.scss';
+// @import './amazon-eks/index.scss';
+// @import './amazon-eks-color/index.scss';
+// @import './apple/index.scss';
+// @import './apple-color/index.scss';
+// @import './archive/index.scss';
+// @import './arrow-down/index.scss';
+// @import './arrow-down-circle/index.scss';
+// @import './arrow-down-left/index.scss';
+// @import './arrow-down-right/index.scss';
+// @import './arrow-left/index.scss';
+// @import './arrow-left-circle/index.scss';
+// @import './arrow-right/index.scss';
+// @import './arrow-right-circle/index.scss';
+// @import './arrow-up/index.scss';
+// @import './arrow-up-circle/index.scss';
+// @import './arrow-up-left/index.scss';
+// @import './arrow-up-right/index.scss';
+// @import './at-sign/index.scss';
+// @import './auth0/index.scss';
+// @import './auth0-color/index.scss';
+// @import './auto-apply/index.scss';
+// @import './award/index.scss';
+@import './aws/index.scss';
+@import './aws-color/index.scss';
+// @import './aws-ec2/index.scss';
+// @import './aws-ec2-color/index.scss';
+// @import './azure/index.scss';
+// @import './azure-color/index.scss';
+// @import './azure-devops/index.scss';
+// @import './azure-devops-color/index.scss';
+// @import './bank-vault/index.scss';
+// @import './bar-chart/index.scss';
+// @import './bar-chart-alt/index.scss';
+// @import './battery/index.scss';
+// @import './battery-charging/index.scss';
+// @import './beaker/index.scss';
+// @import './bell/index.scss';
+// @import './bell-active/index.scss';
+// @import './bell-active-fill/index.scss';
+// @import './bell-off/index.scss';
+// @import './bitbucket/index.scss';
+// @import './bitbucket-color/index.scss';
+// @import './bookmark/index.scss';
+// @import './bookmark-add/index.scss';
+// @import './bookmark-add-fill/index.scss';
+// @import './bookmark-fill/index.scss';
+// @import './bookmark-remove/index.scss';
+// @import './bookmark-remove-fill/index.scss';
+// @import './bottom/index.scss';
+// @import './boundary/index.scss';
+// @import './boundary-color/index.scss';
+// @import './box/index.scss';
+// @import './briefcase/index.scss';
+// @import './bug/index.scss';
+// @import './build/index.scss';
+// @import './bulb/index.scss';
+// @import './calendar/index.scss';
+// @import './camera/index.scss';
+// @import './camera-off/index.scss';
+// @import './caret/index.scss';
+// @import './cast/index.scss';
+// @import './certificate/index.scss';
+// @import './change/index.scss';
+// @import './change-circle/index.scss';
+// @import './change-square/index.scss';
+// @import './check/index.scss';
+// @import './check-circle/index.scss';
+@import './check-circle-fill/index.scss';
+// @import './check-diamond/index.scss';
+// @import './check-diamond-fill/index.scss';
+// @import './check-hexagon/index.scss';
+// @import './check-hexagon-fill/index.scss';
+// @import './check-square/index.scss';
+// @import './check-square-fill/index.scss';
+// @import './chevron-down/index.scss';
+@import './chevron-left/index.scss';
+@import './chevron-right/index.scss';
+@import './chevron-up/index.scss';
+// @import './chevrons-down/index.scss';
+// @import './chevrons-left/index.scss';
+// @import './chevrons-right/index.scss';
+// @import './chevrons-up/index.scss';
+// @import './circle/index.scss';
+// @import './circle-dot/index.scss';
+// @import './circle-fill/index.scss';
+// @import './circle-half/index.scss';
+// @import './clipboard/index.scss';
+// @import './clipboard-checked/index.scss';
+// @import './clipboard-copy/index.scss';
+// @import './clock/index.scss';
+// @import './cloud/index.scss';
+// @import './cloud-check/index.scss';
+// @import './cloud-download/index.scss';
+// @import './cloud-lightning/index.scss';
+// @import './cloud-lock/index.scss';
+// @import './cloud-off/index.scss';
+// @import './cloud-upload/index.scss';
+// @import './cloud-x/index.scss';
+// @import './code/index.scss';
+// @import './codepen/index.scss';
+// @import './codepen-color/index.scss';
+// @import './collections/index.scss';
+// @import './command/index.scss';
+// @import './compass/index.scss';
+// @import './connection/index.scss';
+// @import './connection-gateway/index.scss';
+@import './consul/index.scss';
+// @import './consul-color/index.scss';
+// @import './corner-down-left/index.scss';
+// @import './corner-down-right/index.scss';
+// @import './corner-left-down/index.scss';
+// @import './corner-left-up/index.scss';
+// @import './corner-right-down/index.scss';
+// @import './corner-right-up/index.scss';
+// @import './corner-up-left/index.scss';
+// @import './corner-up-right/index.scss';
+// @import './cpu/index.scss';
+// @import './credit-card/index.scss';
+// @import './crop/index.scss';
+// @import './crosshair/index.scss';
+// @import './dashboard/index.scss';
+// @import './database/index.scss';
+@import './delay/index.scss';
+// @import './delete/index.scss';
+// @import './diamond/index.scss';
+// @import './diamond-fill/index.scss';
+// @import './disc/index.scss';
+// @import './discussion-circle/index.scss';
+// @import './discussion-square/index.scss';
+// @import './docker/index.scss';
+// @import './docker-color/index.scss';
+// @import './docs/index.scss';
+// @import './docs-download/index.scss';
+// @import './docs-link/index.scss';
+// @import './dollar-sign/index.scss';
+// @import './dot/index.scss';
+// @import './dot-half/index.scss';
+// @import './download/index.scss';
+// @import './droplet/index.scss';
+// @import './duplicate/index.scss';
+// @import './edit/index.scss';
+// @import './enterprise/index.scss';
+// @import './entry-point/index.scss';
+// @import './event/index.scss';
+// @import './exit-point/index.scss';
+// @import './external-link/index.scss';
+// @import './eye/index.scss';
+// @import './eye-off/index.scss';
+// @import './f5/index.scss';
+// @import './f5-color/index.scss';
+// @import './facebook/index.scss';
+// @import './facebook-color/index.scss';
+// @import './fast-forward/index.scss';
+// @import './file/index.scss';
+// @import './file-change/index.scss';
+// @import './file-check/index.scss';
+// @import './file-diff/index.scss';
+// @import './file-minus/index.scss';
+// @import './file-plus/index.scss';
+// @import './file-source/index.scss';
+// @import './file-text/index.scss';
+// @import './file-x/index.scss';
+// @import './files/index.scss';
+// @import './film/index.scss';
+// @import './filter/index.scss';
+// @import './filter-circle/index.scss';
+// @import './filter-fill/index.scss';
+// @import './fingerprint/index.scss';
+// @import './flag/index.scss';
+// @import './folder/index.scss';
+// @import './folder-fill/index.scss';
+// @import './folder-minus/index.scss';
+// @import './folder-minus-fill/index.scss';
+// @import './folder-plus/index.scss';
+// @import './folder-plus-fill/index.scss';
+// @import './folder-star/index.scss';
+// @import './folder-users/index.scss';
+// @import './frown/index.scss';
+@import './gateway/index.scss';
+// @import './gcp/index.scss';
+// @import './gcp-color/index.scss';
+// @import './gift/index.scss';
+// @import './git-branch/index.scss';
+@import './git-commit/index.scss';
+// @import './git-merge/index.scss';
+// @import './git-pull-request/index.scss';
+// @import './git-repo/index.scss';
+// @import './github/index.scss';
+// @import './github-color/index.scss';
+// @import './gitlab/index.scss';
+// @import './gitlab-color/index.scss';
+// @import './globe/index.scss';
+// @import './globe-private/index.scss';
+// @import './google/index.scss';
+// @import './google-color/index.scss';
+// @import './grid/index.scss';
+// @import './grid-alt/index.scss';
+// @import './guide/index.scss';
+// @import './guide-link/index.scss';
+// @import './hammer/index.scss';
+// @import './handshake/index.scss';
+// @import './hard-drive/index.scss';
+// @import './hash/index.scss';
+// @import './hashicorp/index.scss';
+// @import './hashicorp-color/index.scss';
+// @import './hcp/index.scss';
+// @import './hcp-color/index.scss';
+// @import './headphones/index.scss';
+// @import './heart/index.scss';
+// @import './heart-fill/index.scss';
+// @import './heart-off/index.scss';
+// @import './help/index.scss';
+// @import './hexagon/index.scss';
+// @import './hexagon-fill/index.scss';
+@import './history/index.scss';
+// @import './home/index.scss';
+// @import './hourglass/index.scss';
+// @import './identity-service/index.scss';
+// @import './identity-user/index.scss';
+// @import './image/index.scss';
+// @import './inbox/index.scss';
+// @import './info/index.scss';
+// @import './jump-link/index.scss';
+// @import './key/index.scss';
+// @import './key-values/index.scss';
+// @import './keychain/index.scss';
+// @import './kubernetes/index.scss';
+// @import './kubernetes-color/index.scss';
+// @import './labyrinth/index.scss';
+@import './layers/index.scss';
+// @import './layout/index.scss';
+// @import './learn/index.scss';
+// @import './learn-link/index.scss';
+// @import './line-chart/index.scss';
+// @import './line-chart-up/index.scss';
+// @import './link/index.scss';
+// @import './linkedin/index.scss';
+// @import './linkedin-color/index.scss';
+// @import './list/index.scss';
+// @import './load-balancer/index.scss';
+@import './loading/index.scss';
+// @import './lock/index.scss';
+// @import './lock-fill/index.scss';
+// @import './lock-off/index.scss';
+// @import './mail/index.scss';
+// @import './mail-open/index.scss';
+// @import './mainframe/index.scss';
+// @import './map/index.scss';
+// @import './map-pin/index.scss';
+// @import './maximize/index.scss';
+// @import './maximize-alt/index.scss';
+// @import './meh/index.scss';
+// @import './menu/index.scss';
+// @import './mesh/index.scss';
+// @import './message-circle/index.scss';
+// @import './message-circle-fill/index.scss';
+// @import './message-square/index.scss';
+// @import './message-square-fill/index.scss';
+// @import './mic/index.scss';
+// @import './mic-off/index.scss';
+// @import './microsoft/index.scss';
+// @import './microsoft-color/index.scss';
+// @import './migrate/index.scss';
+// @import './minimize/index.scss';
+// @import './minimize-alt/index.scss';
+// @import './minus/index.scss';
+// @import './minus-circle/index.scss';
+// @import './minus-plus/index.scss';
+// @import './minus-plus-circle/index.scss';
+// @import './minus-plus-square/index.scss';
+// @import './minus-square/index.scss';
+// @import './module/index.scss';
+// @import './monitor/index.scss';
+// @import './moon/index.scss';
+// @import './more-horizontal/index.scss';
+// @import './more-vertical/index.scss';
+// @import './mouse-pointer/index.scss';
+// @import './move/index.scss';
+// @import './music/index.scss';
+// @import './navigation/index.scss';
+// @import './navigation-alt/index.scss';
+// @import './network/index.scss';
+// @import './network-alt/index.scss';
+// @import './newspaper/index.scss';
+// @import './node/index.scss';
+// @import './nomad/index.scss';
+// @import './nomad-color/index.scss';
+// @import './octagon/index.scss';
+// @import './okta/index.scss';
+// @import './okta-color/index.scss';
+// @import './oracle/index.scss';
+// @import './oracle-color/index.scss';
+// @import './org/index.scss';
+// @import './outline/index.scss';
+// @import './pack/index.scss';
+// @import './pack-color/index.scss';
+// @import './package/index.scss';
+// @import './packer/index.scss';
+// @import './packer-color/index.scss';
+// @import './paperclip/index.scss';
+@import './path/index.scss';
+// @import './pause/index.scss';
+// @import './pause-circle/index.scss';
+// @import './pen-tool/index.scss';
+// @import './pencil-tool/index.scss';
+// @import './phone/index.scss';
+// @import './phone-call/index.scss';
+// @import './phone-off/index.scss';
+// @import './pie-chart/index.scss';
+// @import './pin/index.scss';
+// @import './play/index.scss';
+// @import './play-circle/index.scss';
+// @import './plus/index.scss';
+// @import './plus-circle/index.scss';
+// @import './plus-square/index.scss';
+// @import './power/index.scss';
+// @import './printer/index.scss';
+// @import './provider/index.scss';
+// @import './queue/index.scss';
+// @import './radio/index.scss';
+// @import './random/index.scss';
+// @import './redirect/index.scss';
+// @import './reload/index.scss';
+// @import './repeat/index.scss';
+// @import './replication-direct/index.scss';
+// @import './replication-perf/index.scss';
+// @import './rewind/index.scss';
+// @import './rocket/index.scss';
+// @import './rotate-ccw/index.scss';
+// @import './rotate-cw/index.scss';
+// @import './rss/index.scss';
+// @import './running/index.scss';
+// @import './save/index.scss';
+// @import './scissors/index.scss';
+// @import './search/index.scss';
+// @import './send/index.scss';
+// @import './server/index.scss';
+// @import './server-cluster/index.scss';
+// @import './serverless/index.scss';
+// @import './settings/index.scss';
+// @import './share/index.scss';
+// @import './shield/index.scss';
+// @import './shield-alert/index.scss';
+// @import './shield-check/index.scss';
+// @import './shield-off/index.scss';
+// @import './shield-x/index.scss';
+// @import './shopping-bag/index.scss';
+// @import './shopping-cart/index.scss';
+// @import './shuffle/index.scss';
+// @import './sidebar/index.scss';
+// @import './sidebar-hide/index.scss';
+// @import './sidebar-show/index.scss';
+// @import './sign-in/index.scss';
+// @import './sign-out/index.scss';
+@import './skip/index.scss';
+// @import './skip-back/index.scss';
+// @import './skip-forward/index.scss';
+// @import './slack/index.scss';
+// @import './slack-color/index.scss';
+// @import './slash/index.scss';
+// @import './slash-square/index.scss';
+// @import './sliders/index.scss';
+// @import './smartphone/index.scss';
+// @import './smile/index.scss';
+@import './socket/index.scss';
+// @import './sort-asc/index.scss';
+// @import './sort-desc/index.scss';
+// @import './speaker/index.scss';
+// @import './square/index.scss';
+// @import './square-fill/index.scss';
+// @import './star/index.scss';
+// @import './star-circle/index.scss';
+@import './star-fill/index.scss';
+// @import './star-off/index.scss';
+// @import './stop-circle/index.scss';
+// @import './sun/index.scss';
+// @import './support/index.scss';
+// @import './swap-horizontal/index.scss';
+// @import './swap-vertical/index.scss';
+// @import './switcher/index.scss';
+// @import './sync/index.scss';
+// @import './sync-alert/index.scss';
+// @import './sync-reverse/index.scss';
+// @import './tablet/index.scss';
+@import './tag/index.scss';
+// @import './target/index.scss';
+// @import './terminal/index.scss';
+// @import './terminal-screen/index.scss';
+// @import './terraform/index.scss';
+// @import './terraform-color/index.scss';
+// @import './thumbs-down/index.scss';
+// @import './thumbs-up/index.scss';
+// @import './toggle-left/index.scss';
+// @import './toggle-right/index.scss';
+// @import './token/index.scss';
+// @import './tools/index.scss';
+// @import './top/index.scss';
+// @import './trash/index.scss';
+// @import './trend-down/index.scss';
+// @import './trend-up/index.scss';
+// @import './triangle/index.scss';
+// @import './triangle-fill/index.scss';
+// @import './truck/index.scss';
+// @import './tv/index.scss';
+// @import './twitch/index.scss';
+// @import './twitch-color/index.scss';
+// @import './twitter/index.scss';
+// @import './twitter-color/index.scss';
+// @import './type/index.scss';
+// @import './unfold-close/index.scss';
+// @import './unfold-open/index.scss';
+// @import './unlock/index.scss';
+// @import './upload/index.scss';
+// @import './user/index.scss';
+// @import './user-check/index.scss';
+// @import './user-circle/index.scss';
+// @import './user-circle-fill/index.scss';
+// @import './user-minus/index.scss';
+// @import './user-plus/index.scss';
+// @import './user-x/index.scss';
+// @import './users/index.scss';
+// @import './vagrant/index.scss';
+// @import './vagrant-color/index.scss';
+@import './vault/index.scss';
+// @import './vault-color/index.scss';
+// @import './verified/index.scss';
+// @import './video/index.scss';
+// @import './video-off/index.scss';
+// @import './vmware/index.scss';
+// @import './vmware-color/index.scss';
+// @import './volume/index.scss';
+// @import './volume-2/index.scss';
+// @import './volume-down/index.scss';
+// @import './volume-x/index.scss';
+// @import './wall/index.scss';
+// @import './wand/index.scss';
+// @import './watch/index.scss';
+// @import './waypoint/index.scss';
+// @import './waypoint-color/index.scss';
+// @import './webhook/index.scss';
+// @import './wifi/index.scss';
+// @import './wifi-off/index.scss';
+// @import './wrench/index.scss';
+// @import './x/index.scss';
+// @import './x-circle/index.scss';
+// @import './x-circle-fill/index.scss';
+// @import './x-diamond/index.scss';
+// @import './x-diamond-fill/index.scss';
+// @import './x-hexagon/index.scss';
+// @import './x-hexagon-fill/index.scss';
+// @import './x-square/index.scss';
+// @import './x-square-fill/index.scss';
+// @import './youtube/index.scss';
+// @import './youtube-color/index.scss';
+// @import './zap/index.scss';
+// @import './zap-off/index.scss';
+// @import './zoom-in/index.scss';
+// @import './zoom-out/index.scss';
+@import './cloud-cross/index.scss';
+// @import './delay/index.scss';
+// @import './deny-color/index.scss';
+// @import './gateway/index.scss';
+// @import './layers/index.scss';
+@import './loading-motion/index.scss';
+@import './logo-auth0-color/index.scss';
+@import './logo-consul-color/index.scss';
+@import './logo-ember-circle-color/index.scss';
+@import './logo-glimmer-color/index.scss';
+// @import './logo-hashicorp-color/index.scss';
+@import './logo-jwt-color/index.scss';
+@import './logo-microsoft-color/index.scss';
+@import './logo-nomad-color/index.scss';
+@import './logo-oidc-color/index.scss';
+@import './logo-okta-color/index.scss';
+@import './logo-terraform-color/index.scss';
+// @import './logo-vault-color/index.scss';
+@import './mesh/index.scss';
+// @import './path/index.scss';
+@import './port/index.scss';
+@import './protocol/index.scss';
+@import './redirect/index.scss';
+@import './search-color/index.scss';
+// @import './socket/index.scss';
+@import './sort/index.scss';
+// @import './tag/index.scss';
+@import './union/index.scss';
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/index.scss
new file mode 100644
index 0000000000..c870a21ba1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../info/property-16';
+        @import '../info/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/keyframes.scss
new file mode 100644
index 0000000000..59f244d363
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-info-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-info-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-info-24);
+    mask-image: var(--icon-info-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-info-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-info-16);
+    mask-image: var(--icon-info-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/placeholders.scss
new file mode 100644
index 0000000000..865311c152
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-info-circle-fill-icon {
+  --icon-name: icon-info-circle-fill;
+  content: '';
+}
+%with-info-circle-fill-mask {
+  --icon-name: icon-info-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/index.scss
new file mode 100644
index 0000000000..c870a21ba1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../info/property-16';
+        @import '../info/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/keyframes.scss
new file mode 100644
index 0000000000..6feb0dd3e5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-info-circle-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-info-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-info-24);
+    mask-image: var(--icon-info-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-info-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-info-16);
+    mask-image: var(--icon-info-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/placeholders.scss
new file mode 100644
index 0000000000..14fa7f9111
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info-circle-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-info-circle-outline-icon {
+  --icon-name: icon-info-circle-outline;
+  content: '';
+}
+%with-info-circle-outline-mask {
+  --icon-name: icon-info-circle-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info/keyframes.scss
new file mode 100644
index 0000000000..afc51b8ad5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-info {
+  50% {
+
+    background-color: var(--icon-color, var(--color-info-500, currentColor));
+    -webkit-mask-image: var(--icon-info-24);
+    mask-image: var(--icon-info-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-info-500, currentColor));
+    -webkit-mask-image: var(--icon-info-16);
+    mask-image: var(--icon-info-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info/placeholders.scss
new file mode 100644
index 0000000000..97bc5a1417
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-info-icon {
+  --icon-name: icon-info;
+  content: '';
+}
+%with-info-mask {
+  --icon-name: icon-info;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info/property-16.scss
new file mode 100644
index 0000000000..5683b5a303
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-info-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 7a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 7zM8 4a1 1 0 000 2h.007a1 1 0 000-2H8z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/info/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/info/property-24.scss
new file mode 100644
index 0000000000..351f19e5f7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/info/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-info-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 10.5a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5a.75.75 0 01.75-.75zM12 7a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/keyframes.scss
new file mode 100644
index 0000000000..f3ba6288d7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-jump-link {
+  50% {
+
+    background-color: var(--icon-color, var(--color-jump-link-500, currentColor));
+    -webkit-mask-image: var(--icon-jump-link-24);
+    mask-image: var(--icon-jump-link-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-jump-link-500, currentColor));
+    -webkit-mask-image: var(--icon-jump-link-16);
+    mask-image: var(--icon-jump-link-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/placeholders.scss
new file mode 100644
index 0000000000..b7e943372e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-jump-link-icon {
+  --icon-name: icon-jump-link;
+  content: '';
+}
+%with-jump-link-mask {
+  --icon-name: icon-jump-link;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/property-16.scss
new file mode 100644
index 0000000000..d43b1773c7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-jump-link-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 2a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM1 6.25a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5A.75.75 0 011 6.25zM1.75 9a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5zM1.75 12.5a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75zM7.49 6.2a.75.75 0 011.06.04l1.95 2.1V5.55c0-.545-.215-1.067-.597-1.451A2.024 2.024 0 008.467 3.5H7.25a.75.75 0 010-1.5h1.217c.939 0 1.838.375 2.5 1.041A3.56 3.56 0 0112 5.55v2.79l1.95-2.1a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/property-24.scss
new file mode 100644
index 0000000000..cc934ca700
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/jump-link/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-jump-link-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 4a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5zM3 9.75A.75.75 0 013.75 9h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 013 9.75zM3.75 14a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zM3.75 19a.75.75 0 000 1.5H20a.75.75 0 000-1.5H3.75zM12.952 12.238a.75.75 0 011.06-.036l2.488 2.322V8.75a3.25 3.25 0 00-3.25-3.25h-2a.75.75 0 010-1.5h2A4.75 4.75 0 0118 8.75v5.774l2.488-2.322a.75.75 0 011.024 1.096l-3.75 3.5a.75.75 0 01-1.024 0l-3.75-3.5a.75.75 0 01-.036-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/keyframes.scss
new file mode 100644
index 0000000000..2c2e4cae97
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-key-values {
+  50% {
+
+    background-color: var(--icon-color, var(--color-key-values-500, currentColor));
+    -webkit-mask-image: var(--icon-key-values-24);
+    mask-image: var(--icon-key-values-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-key-values-500, currentColor));
+    -webkit-mask-image: var(--icon-key-values-16);
+    mask-image: var(--icon-key-values-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/placeholders.scss
new file mode 100644
index 0000000000..a4e40d2ce7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-key-values-icon {
+  --icon-name: icon-key-values;
+  content: '';
+}
+%with-key-values-mask {
+  --icon-name: icon-key-values;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/property-16.scss
new file mode 100644
index 0000000000..960fc78948
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-key-values-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.75 2a.75.75 0 000 1.5h1a.75.75 0 000-1.5h-1zM6.75 5.5a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5zM1 6.25a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5A.75.75 0 011 6.25zM1.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM1 13.25a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM6.75 2a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zM6 9.75A.75.75 0 016.75 9h5.5a.75.75 0 010 1.5h-5.5A.75.75 0 016 9.75zM6.75 12.5a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/property-24.scss
new file mode 100644
index 0000000000..24adabfce9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/key-values/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-key-values-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 5a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5zM10.75 9a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5zM3 9.75A.75.75 0 013.75 9h3.5a.75.75 0 010 1.5h-3.5A.75.75 0 013 9.75zM3.75 13a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM3 17.75a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75zM10.75 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM10 13.75a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM10.75 17a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/key/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/key/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/key/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/key/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/key/keyframes.scss
new file mode 100644
index 0000000000..c1bdfe3b61
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/key/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-key {
+  50% {
+
+    background-color: var(--icon-color, var(--color-key-500, currentColor));
+    -webkit-mask-image: var(--icon-key-24);
+    mask-image: var(--icon-key-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-key-500, currentColor));
+    -webkit-mask-image: var(--icon-key-16);
+    mask-image: var(--icon-key-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/key/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/key/placeholders.scss
new file mode 100644
index 0000000000..ba5a6f2b6b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/key/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-key-icon {
+  --icon-name: icon-key;
+  content: '';
+}
+%with-key-mask {
+  --icon-name: icon-key;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/key/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/key/property-16.scss
new file mode 100644
index 0000000000..38966b31a4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/key/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-key-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M9.16 3.657A2.236 2.236 0 0110.752 3a2.248 2.248 0 11-2.078 3.11l-.001-.002a2.243 2.243 0 01.489-2.451zm1.06 1.061a.737.737 0 01.815-.16.748.748 0 01-.284 1.44.748.748 0 01-.532-1.278l.001-.002z"/><path d="M10.354 0a5.68 5.68 0 00-4.906 2.846 5.68 5.68 0 00-.466 4.555L.22 12.162a.75.75 0 00-.22.53v2.558c0 .414.336.75.75.75h2.547a.75.75 0 00.53-.22l.655-.655a1.072 1.072 0 00.311-.784v-.64h.548c.31 0 .618-.123.843-.355l.008-.008c.204-.216.324-.498.33-.801v-.556h.676c.288 0 .566-.117.767-.327l.638-.637a5.664 5.664 0 004.55-.468 5.683 5.683 0 002.798-4.152v-.001a5.68 5.68 0 00-1.602-4.742A5.619 5.619 0 0010.354 0zm-.548 1.536a4.12 4.12 0 013.482 1.178 4.18 4.18 0 011.176 3.483 4.183 4.183 0 01-2.054 3.05 4.163 4.163 0 01-3.671.221.75.75 0 00-.143-.043l-.023-.005a.806.806 0 00-.714.219l-.842.842H5.973a.951.951 0 00-.95.951v.768h-.779a.951.951 0 00-.95.952v1.04l-.308.308H1.5v-1.497L6.355 8.15c.22-.22.311-.567.174-.888a4.178 4.178 0 01.221-3.67 4.18 4.18 0 013.053-2.054h.003z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/key/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/key/property-24.scss
new file mode 100644
index 0000000000..1e054688e3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/key/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-key-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M13.88 5.877A2.978 2.978 0 0116.001 5a2.999 2.999 0 11-2.772 4.148v-.002a2.992 2.992 0 01.651-3.27zm1.06 1.06a1.479 1.479 0 011.062-.437 1.499 1.499 0 11-1.387 2.072 1.492 1.492 0 01.324-1.633l.002-.001z"/><path d="M14.307 1.068c.34-.047.684-.068 1.021-.068 2.049 0 3.98.799 5.429 2.247a7.72 7.72 0 012.176 6.444v.001a7.725 7.725 0 01-3.8 5.642 7.697 7.697 0 01-3.811 1.012 7.653 7.653 0 01-2.553-.437l-1.04 1.04c-.225.236-.54.37-.863.37H9.6v1.089c-.008.35-.146.675-.383.926l-.007.007a1.356 1.356 0 01-.97.408H7.155v1.22c.011.323-.11.63-.331.867l-.011.012-.007.006-.926.926a.75.75 0 01-.53.22H1.75a.75.75 0 01-.75-.75v-3.616a.75.75 0 01.22-.53l6.869-6.868a7.719 7.719 0 01.572-6.369 7.72 7.72 0 015.646-3.799zm.203 1.486c.267-.037.543-.054.818-.054 1.651 0 3.2.641 4.368 1.807a6.22 6.22 0 011.75 5.185 6.225 6.225 0 01-3.057 4.54 6.173 6.173 0 01-5.464.33.833.833 0 00-.904.175l-1.282 1.281H9.135c-.578 0-1.034.47-1.034 1.034v1.397H6.69c-.578 0-1.035.47-1.035 1.034v1.6l-.616.617H2.5v-2.555l6.955-6.954a.831.831 0 00.18-.915 6.217 6.217 0 01.328-5.464 6.22 6.22 0 014.544-3.057h.003z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/keyframes.scss
new file mode 100644
index 0000000000..a062532465
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-keychain {
+  50% {
+
+    background-color: var(--icon-color, var(--color-keychain-500, currentColor));
+    -webkit-mask-image: var(--icon-keychain-24);
+    mask-image: var(--icon-keychain-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-keychain-500, currentColor));
+    -webkit-mask-image: var(--icon-keychain-16);
+    mask-image: var(--icon-keychain-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/placeholders.scss
new file mode 100644
index 0000000000..9532166573
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-keychain-icon {
+  --icon-name: icon-keychain;
+  content: '';
+}
+%with-keychain-mask {
+  --icon-name: icon-keychain;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/property-16.scss
new file mode 100644
index 0000000000..092f7f2202
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-keychain-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.027 1.14a2.708 2.708 0 114.139 3.49l-1.864 2.097a2.125 2.125 0 11-1.074-1.05l.614-.69a3.112 3.112 0 00-4.368 4.18.75.75 0 01-.11.897L4 13.553v.947h1.25v-1a.75.75 0 01.75-.75h.894l1.569-1.918a.75.75 0 01.799-.242 3.112 3.112 0 004.02-2.978.75.75 0 011.5 0 4.612 4.612 0 01-5.457 4.535l-1.494 1.828a.75.75 0 01-.581.275h-.5v1A.75.75 0 016 16H3.25a.75.75 0 01-.75-.75V14H.75a.75.75 0 01-.75-.75v-2a.75.75 0 01.21-.52l3.208-3.328a4.612 4.612 0 016.327-5.91l.282-.352zm-.56 1.913a.755.755 0 01-.118-.062 3.112 3.112 0 00-4.515 3.906c.202.445.165 1.026-.231 1.438L1.5 11.553v.947h1.431l2.987-3.098a4.613 4.613 0 013.549-6.35zm.987-.044c.889.054 1.71.36 2.393.847l.197-.222A1.208 1.208 0 1011.2 2.077l-.745.932zm-.079 3.99a.625.625 0 100 1.25.625.625 0 000-1.25z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/property-24.scss
new file mode 100644
index 0000000000..82c5323806
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/keychain/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-keychain-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M20.483 2.485a1.295 1.295 0 00-1.595.188l-.582.581c.787.228 1.514.6 2.147 1.086l.24-.255a1.04 1.04 0 00-.21-1.6zm-1.067 2.953A5 5 0 0011.5 9.5c0 .448.089.865.226 1.312.068.221.145.442.229.682l.005.016c.085.241.175.5.258.772a.75.75 0 01-.188.748l-5.78 5.78v1.69h1.94l.56-.56V18.5a.75.75 0 01.75-.75h1.25V16.5a.75.75 0 01.75-.75h1.69l1.28-1.28a.75.75 0 01.711-.198c.465.116.946.228 1.319.228a5 5 0 005-5 .75.75 0 011.5 0 6.5 6.5 0 01-6.5 6.5c-.422 0-.883-.085-1.267-.172L14.03 17.03a.75.75 0 01-.53.22h-1.25v1.25a.75.75 0 01-.75.75h-1.25v1a.75.75 0 01-.22.53l-1 1a.75.75 0 01-.53.22H1.75a.75.75 0 01-.75-.75v-2.79a.75.75 0 01.218-.529l5.168-5.193a6.887 6.887 0 01-.636-2.901C5.75 6.07 8.762 3 12.5 3h3.941l.029-.03 1.357-1.358a2.795 2.795 0 013.442-.404 2.54 2.54 0 01.515 3.907l-2.727 2.888a2.75 2.75 0 11-1.129-.988.7.7 0 01.027-.03l1.461-1.547zm-7.072-.936c-2.818.084-5.094 2.43-5.094 5.335 0 .975.257 1.887.704 2.672a.75.75 0 01-.12.9L2.5 18.77V20.5h2.25v-2a.75.75 0 01.22-.53l5.675-5.675a45.553 45.553 0 00-.1-.29l-.01-.027c-.08-.232-.166-.477-.243-.726-.16-.523-.292-1.098-.292-1.752 0-2.01.912-3.805 2.344-4.998zM16.75 8.25a1.25 1.25 0 100 2.5 1.25 1.25 0 000-2.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/keyframes.scss
new file mode 100644
index 0000000000..680fedd33f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-kubernetes-color {
+  50% {
+    background-image: var(--icon-kubernetes-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-kubernetes-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/placeholders.scss
new file mode 100644
index 0000000000..d0af034ee4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-kubernetes-color-icon {
+  --icon-name: icon-kubernetes-color;
+  content: '';
+}
+%with-kubernetes-color-mask {
+  --icon-name: icon-kubernetes-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/property-16.scss
new file mode 100644
index 0000000000..b01a511c57
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-kubernetes-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23326DE6" d="M4.5 14.569c.214.278.539.431.874.431h5.251c.335 0 .66-.165.875-.434l3.258-4.178c.214-.278.288-.633.214-.978l-1.165-5.207a1.128 1.128 0 00-.606-.777l-4.714-2.31A1.062 1.062 0 008.002 1c-.168 0-.335.038-.485.115l-4.715 2.32a1.129 1.129 0 00-.605.777L1.032 9.42c-.084.345 0 .7.214.978L4.5 14.568z"/><path fill="%23fff" fill-rule="evenodd" d="M12.741 9.128c.098.003.196.01.293.024l.058.013.031.008a.308.308 0 01.26.371.306.306 0 01-.396.223h-.004l-.003-.001-.003-.001a1.58 1.58 0 00-.08-.017 2.55 2.55 0 01-.274-.106 2.867 2.867 0 00-.533-.156.243.243 0 00-.171.063 4.656 4.656 0 00-.131-.023 3.971 3.971 0 01-1.764 2.212c.015.042.032.083.051.123a.239.239 0 00-.023.18c.074.17.165.332.271.484.06.078.114.16.164.244l.028.057.012.025a.305.305 0 01-.132.434.31.31 0 01-.354-.066.307.307 0 01-.067-.107l-.01-.021a1.57 1.57 0 01-.028-.058 2.553 2.553 0 01-.089-.28 2.834 2.834 0 00-.21-.512.242.242 0 00-.156-.095 6.199 6.199 0 01-.03-.053l-.035-.064a3.97 3.97 0 01-2.823-.007l-.07.125a.249.249 0 00-.132.064 2.13 2.13 0 00-.237.548 2.518 2.518 0 01-.088.28l-.025.05-.013.027v.001a.306.306 0 01-.421.173.307.307 0 01-.132-.434l.014-.03.026-.052c.05-.085.104-.166.164-.244.108-.156.2-.322.277-.496a.302.302 0 00-.028-.173l.056-.133A3.972 3.972 0 014.22 9.532l-.134.023a.34.34 0 00-.176-.062 2.872 2.872 0 00-.533.156c-.09.04-.181.075-.274.105l-.05.011-.03.007H3.02l-.002.002h-.005a.308.308 0 01-.397-.349.306.306 0 01.261-.245l.005-.001h.002l.006-.002c.024-.006.054-.014.076-.018.097-.013.195-.021.293-.023.186-.013.37-.043.549-.09a.422.422 0 00.131-.133l.128-.037a3.938 3.938 0 01.625-2.752l-.098-.087a.338.338 0 00-.062-.176 2.854 2.854 0 00-.455-.319 2.557 2.557 0 01-.254-.148l-.048-.038-.015-.012-.004-.004a.323.323 0 01-.076-.45.295.295 0 01.244-.107.365.365 0 01.213.08l.022.017c.016.013.034.026.046.037.072.067.139.139.202.213.125.137.263.262.412.372.056.03.121.036.182.018l.11.078a3.938 3.938 0 012.552-1.224l.008-.129a.332.332 0 00.099-.157 2.844 2.844 0 00-.034-.554 2.56 2.56 0 01-.042-.29v-.082-.004A.306.306 0 018 2.82a.308.308 0 01.306.337v.087a2.529 2.529 0 01-.041.29 2.85 2.85 0 00-.035.553.242.242 0 00.1.153v.007l.007.13c.967.087 1.87.522 2.54 1.223l.116-.083a.34.34 0 00.186-.02c.149-.11.287-.235.412-.373.063-.074.13-.146.202-.213l.051-.04.017-.014a.307.307 0 11.381.477l-.024.02c-.015.012-.03.025-.043.034a2.537 2.537 0 01-.254.148 2.87 2.87 0 00-.455.32.241.241 0 00-.058.172l-.05.044-.058.053c.542.806.77 1.783.637 2.745l.123.036c.031.056.077.101.133.132.179.048.363.078.548.09zM7.291 5.24c.107-.024.216-.043.326-.056l-.09 1.6-.008.004a.268.268 0 01-.293.256.27.27 0 01-.135-.05l-.002.001-1.316-.93c.419-.41.945-.696 1.518-.825zm1.618 1.75l1.308-.924a3.182 3.182 0 00-1.833-.882l.09 1.598h.002a.268.268 0 00.294.256.27.27 0 00.135-.05l.004.002zm2.248 1.656l-1.548-.445-.002-.006a.27.27 0 01-.185-.343.27.27 0 01.08-.12L9.5 7.73l1.195-1.067c.366.594.527 1.29.46 1.983zM9.096 9.5l.618 1.49a3.148 3.148 0 001.275-1.598l-1.593-.269-.002.004a.26.26 0 00-.166.022.27.27 0 00-.13.348l-.002.003zm-.385 1.905c-.573.13-1.17.1-1.727-.088l.777-1.4h.001a.27.27 0 01.475-.001h.006l.779 1.402a3.286 3.286 0 01-.311.087zm-2.418-.422l.611-1.474-.004-.006a.268.268 0 00-.297-.37L6.6 9.13l-1.579.267a3.16 3.16 0 001.272 1.586zm-.997-4.32l1.201 1.071-.001.007a.269.269 0 01-.106.462l-.001.005-1.54.443a3.134 3.134 0 01.447-1.988zm2.95 1.154h-.492l-.307.38.11.476.443.213.442-.212.11-.476-.306-.381z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/property-24.scss
new file mode 100644
index 0000000000..f82968aded
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-kubernetes-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23326DE6" d="M7 21.384c.306.397.77.616 1.249.616h7.501c.48 0 .944-.236 1.25-.62l4.654-5.969a1.69 1.69 0 00.306-1.397l-1.664-7.439a1.612 1.612 0 00-.865-1.11l-6.736-3.3A1.517 1.517 0 0012.003 2c-.24 0-.48.055-.692.164L4.575 5.48c-.44.22-.759.617-.865 1.11l-1.664 7.438c-.12.494 0 1 .306 1.398L7 21.384z"/><path fill="%23fff" fill-rule="evenodd" d="M18.773 13.612c.14.003.28.014.419.033a1.424 1.424 0 01.127.03.439.439 0 01.294.695.437.437 0 01-.488.155l-.007-.001-.004-.002-.004-.001-.043-.01-.07-.014a3.664 3.664 0 01-.392-.151 4.094 4.094 0 00-.762-.224.346.346 0 00-.245.09 6.82 6.82 0 00-.187-.032 5.674 5.674 0 01-2.52 3.16c.021.06.046.119.074.176a.342.342 0 00-.034.257c.106.243.236.474.388.692.084.111.162.227.234.347l.04.082.017.036a.437.437 0 01-.545.629.44.44 0 01-.245-.257l-.015-.03-.04-.082a3.625 3.625 0 01-.126-.4 4.058 4.058 0 00-.3-.732.346.346 0 00-.223-.135l-.043-.076-.05-.092c-1.3.491-2.736.488-4.034-.01l-.099.179a.356.356 0 00-.188.091 3.044 3.044 0 00-.339.783 3.6 3.6 0 01-.126.4l-.035.073-.019.037v.002a.437.437 0 01-.602.248.439.439 0 01-.188-.621l.02-.043.036-.075c.072-.12.15-.236.235-.348.154-.223.286-.46.395-.709a.432.432 0 00-.039-.246l.08-.19a5.674 5.674 0 01-2.52-3.138l-.191.033a.485.485 0 00-.251-.088c-.261.05-.516.124-.762.223a3.683 3.683 0 01-.392.15l-.071.016c-.015.003-.03.006-.042.01h-.005l-.004.002h-.006a.44.44 0 01-.568-.498.437.437 0 01.374-.35l.006-.002.004-.001.008-.002c.035-.009.077-.02.108-.025.14-.02.28-.03.42-.034.264-.017.527-.06.783-.129a.603.603 0 00.188-.188l.183-.053a5.626 5.626 0 01.892-3.931l-.14-.125a.483.483 0 00-.088-.251 4.077 4.077 0 00-.65-.456 3.655 3.655 0 01-.363-.212 1.61 1.61 0 01-.069-.055l-.02-.017-.008-.005a.462.462 0 01-.107-.642.42.42 0 01.348-.154.522.522 0 01.305.115l.03.024.067.053c.102.096.198.198.288.305.178.195.376.373.589.53.08.042.173.051.26.026.051.037.104.075.157.111A5.626 5.626 0 0111.52 6.82l.01-.184a.474.474 0 00.142-.225c.01-.265-.007-.53-.049-.79a3.644 3.644 0 01-.06-.415l.001-.076V5.089v-.007a.437.437 0 01.615-.444.44.44 0 01.259.444v.046c.001.027.002.056 0 .078-.011.139-.031.277-.059.414a4.063 4.063 0 00-.05.79.345.345 0 00.143.218v.011l.01.184A5.734 5.734 0 0116.11 8.57l.166-.119c.09.016.181.006.265-.028.213-.158.41-.336.59-.532.09-.107.186-.209.288-.305l.073-.058.024-.019a.44.44 0 11.544.682l-.035.028-.061.05a3.634 3.634 0 01-.363.21c-.231.13-.449.283-.65.456a.344.344 0 00-.082.247 8.03 8.03 0 01-.155.138 5.65 5.65 0 01.91 3.922l.177.051a.49.49 0 00.188.19c.257.068.52.11.784.128zm-7.786-5.554a4.64 4.64 0 01.466-.08l-.13 2.285-.01.005a.383.383 0 01-.419.366.386.386 0 01-.192-.072l-.004.003-1.88-1.33a4.505 4.505 0 012.169-1.177zm2.312 2.5l1.867-1.321a4.546 4.546 0 00-2.618-1.26l.13 2.283h.002a.383.383 0 00.42.366.386.386 0 00.192-.072l.007.003zm3.21 2.365l-2.21-.635-.003-.01a.386.386 0 01-.264-.489.385.385 0 01.113-.17v-.005l1.706-1.523a4.56 4.56 0 01.658 2.832zm-2.944 1.22l.883 2.127a4.497 4.497 0 001.822-2.282l-2.275-.383-.004.004a.37.37 0 00-.236.032.385.385 0 00-.187.498l-.003.004zm-.55 2.721a4.531 4.531 0 01-2.466-.126l1.11-2h.001a.386.386 0 01.679-.001h.008l1.113 2.004c-.145.048-.293.089-.445.123zm-3.454-.602l.874-2.106-.007-.009a.383.383 0 00-.424-.528l-.003-.005-2.256.382c.338.934.977 1.73 1.816 2.266zM8.137 10.09l1.716 1.53-.002.01a.384.384 0 01-.151.66l-.002.007-2.2.633c-.11-.991.115-1.99.639-2.84zm4.214 1.648h-.703l-.438.544.157.68.633.303.631-.302.157-.68-.437-.545z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/index.scss
new file mode 100644
index 0000000000..8e0a44695e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../kubernetes-color/property-16';
+        @import '../kubernetes-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/keyframes.scss
new file mode 100644
index 0000000000..6e98fc23c3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-kubernetes {
+  50% {
+
+    background-color: var(--icon-color, var(--color-kubernetes-500, currentColor));
+    -webkit-mask-image: var(--icon-kubernetes-color-24);
+    mask-image: var(--icon-kubernetes-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-kubernetes-500, currentColor));
+    -webkit-mask-image: var(--icon-kubernetes-color-16);
+    mask-image: var(--icon-kubernetes-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/placeholders.scss
new file mode 100644
index 0000000000..8877056600
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-kubernetes-icon {
+  --icon-name: icon-kubernetes;
+  content: '';
+}
+%with-kubernetes-mask {
+  --icon-name: icon-kubernetes;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/property-16.scss
new file mode 100644
index 0000000000..1638cb80ca
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-kubernetes-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.374 15c-.335 0-.66-.153-.874-.431l-3.254-4.172a1.15 1.15 0 01-.214-.978l1.165-5.207c.074-.345.298-.623.605-.776l4.715-2.32c.15-.078.317-.116.485-.116.168 0 .335.038.485.115L13.2 3.426c.308.153.532.432.606.777l1.165 5.207c.074.345 0 .7-.214.978L11.5 14.566c-.214.268-.54.434-.875.434h-5.25zm7.718-5.835l.031.008a.308.308 0 01.26.371.306.306 0 01-.396.223h-.004l-.003-.001-.003-.001-.03-.007-.05-.01a2.548 2.548 0 01-.274-.106 2.87 2.87 0 00-.533-.156.242.242 0 00-.171.063 4.76 4.76 0 00-.131-.023 3.972 3.972 0 01-1.764 2.212c.015.042.032.083.051.123a.239.239 0 00-.023.18c.074.17.165.332.271.484.06.078.114.16.164.244l.028.057.012.025a.306.306 0 01-.381.44.307.307 0 01-.172-.18 2.608 2.608 0 00-.01-.02l-.028-.058a2.545 2.545 0 01-.089-.28 2.835 2.835 0 00-.21-.512.242.242 0 00-.156-.095 5.926 5.926 0 01-.03-.053l-.035-.064a3.97 3.97 0 01-2.824-.007l-.069.125a.249.249 0 00-.132.064c-.104.17-.184.355-.237.548a2.525 2.525 0 01-.088.28l-.025.05-.013.027v.001a.307.307 0 11-.553-.261l.014-.03.026-.052c.05-.085.104-.166.164-.244.108-.156.2-.322.277-.496a.302.302 0 00-.028-.173l.056-.133A3.972 3.972 0 014.22 9.532l-.134.023a.34.34 0 00-.176-.062 2.872 2.872 0 00-.533.156c-.09.04-.181.075-.274.105l-.05.011-.03.007H3.02l-.002.002h-.005a.308.308 0 01-.397-.349.306.306 0 01.261-.245l.004-.001h.003l.006-.002c.024-.006.054-.014.076-.018.097-.013.195-.021.293-.023.186-.013.37-.043.549-.09a.422.422 0 00.131-.133l.128-.037a3.938 3.938 0 01.624-2.752l-.097-.087a.338.338 0 00-.062-.176 2.854 2.854 0 00-.455-.319 2.557 2.557 0 01-.254-.148 1.129 1.129 0 01-.063-.05l-.004-.004a.323.323 0 01-.076-.45.295.295 0 01.244-.107.365.365 0 01.213.08l.022.017c.016.013.034.026.046.037.071.067.139.139.202.213.125.137.263.262.412.372.056.03.121.036.182.018l.11.078a3.938 3.938 0 012.552-1.224l.007-.129a.332.332 0 00.1-.157 2.844 2.844 0 00-.034-.554 2.555 2.555 0 01-.042-.29v-.053-.025-.004-.004A.306.306 0 018 2.82a.308.308 0 01.306.337v.087a2.53 2.53 0 01-.041.29 2.85 2.85 0 00-.035.553.242.242 0 00.1.153v.007l.007.13c.967.087 1.87.522 2.54 1.223l.116-.083a.34.34 0 00.186-.02c.149-.11.287-.235.412-.373a2.53 2.53 0 01.202-.213l.051-.04.017-.014a.308.308 0 01.472.388.307.307 0 01-.09.09c-.008.005-.017.012-.025.02l-.043.033a2.549 2.549 0 01-.254.148 2.865 2.865 0 00-.455.32.24.24 0 00-.058.172 4.458 4.458 0 01-.05.044l-.058.053c.542.806.769 1.783.637 2.745l.123.036c.031.056.077.101.132.132.18.048.364.078.55.09.097.003.195.01.292.024l.058.013zm-2.875-3.1l-1.308.925-.004-.002a.27.27 0 01-.43-.205v-.001l-.091-1.598a3.183 3.183 0 011.833.882zM7.754 7.818h.492l.306.381-.11.476L8 8.886l-.443-.213-.11-.475.307-.381zM7.29 5.24c.107-.024.216-.043.326-.056l-.09 1.6-.008.004a.268.268 0 01-.293.256.27.27 0 01-.135-.05l-.002.001-1.316-.93c.419-.41.945-.696 1.518-.825zM5.296 6.663l1.201 1.071-.001.007a.269.269 0 01-.106.462l-.001.005-1.54.443a3.134 3.134 0 01.447-1.988zm1.608 2.846l-.612 1.474a3.16 3.16 0 01-1.27-1.586L6.6 9.13l.003.003a.265.265 0 01.18.029.27.27 0 01.117.341l.004.006zm1.806 1.896c-.572.13-1.17.1-1.726-.088l.777-1.4h.001a.27.27 0 01.475-.001h.006l.779 1.402a3.286 3.286 0 01-.312.087zm1.004-.416L9.096 9.5l.001-.003a.269.269 0 01.296-.37l.003-.004 1.593.269a3.147 3.147 0 01-1.275 1.597zm1.442-2.343L9.61 8.201l-.002-.006a.27.27 0 01-.185-.343.27.27 0 01.08-.12L9.5 7.73l1.195-1.067c.366.594.527 1.29.46 1.983z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/property-24.scss
new file mode 100644
index 0000000000..c1cfc2d108
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/kubernetes/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-kubernetes-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.374 15c-.335 0-.66-.153-.874-.431l-3.254-4.172a1.15 1.15 0 01-.214-.978l1.165-5.207c.074-.345.298-.623.605-.776l4.715-2.32c.15-.078.317-.116.485-.116.168 0 .335.038.485.115L13.2 3.426c.308.153.532.432.606.777l1.165 5.207c.074.345 0 .7-.214.978L11.5 14.566c-.214.268-.54.434-.875.434h-5.25zm7.718-5.835l.031.008a.308.308 0 01.26.371.306.306 0 01-.396.223h-.004l-.003-.001-.003-.001-.03-.007-.05-.01a2.548 2.548 0 01-.274-.106 2.87 2.87 0 00-.533-.156.242.242 0 00-.171.063 4.76 4.76 0 00-.131-.023 3.972 3.972 0 01-1.764 2.212c.015.042.032.083.051.123a.239.239 0 00-.023.18c.074.17.165.332.271.484.06.078.114.16.164.244l.028.057.012.025a.306.306 0 01-.381.44.307.307 0 01-.172-.18 2.608 2.608 0 00-.01-.02l-.028-.058a2.545 2.545 0 01-.089-.28 2.835 2.835 0 00-.21-.512.242.242 0 00-.156-.095 5.926 5.926 0 01-.03-.053l-.035-.064a3.97 3.97 0 01-2.824-.007l-.069.125a.249.249 0 00-.132.064c-.104.17-.184.355-.237.548a2.525 2.525 0 01-.088.28l-.025.05-.013.027v.001a.307.307 0 11-.553-.261l.014-.03.026-.052c.05-.085.104-.166.164-.244.108-.156.2-.322.277-.496a.302.302 0 00-.028-.173l.056-.133A3.972 3.972 0 014.22 9.532l-.134.023a.34.34 0 00-.176-.062 2.872 2.872 0 00-.533.156c-.09.04-.181.075-.274.105l-.05.011-.03.007H3.02l-.002.002h-.005a.308.308 0 01-.397-.349.306.306 0 01.261-.245l.004-.001h.003l.006-.002c.024-.006.054-.014.076-.018.097-.013.195-.021.293-.023.186-.013.37-.043.549-.09a.422.422 0 00.131-.133l.128-.037a3.938 3.938 0 01.624-2.752l-.097-.087a.338.338 0 00-.062-.176 2.854 2.854 0 00-.455-.319 2.557 2.557 0 01-.254-.148 1.129 1.129 0 01-.063-.05l-.004-.004a.323.323 0 01-.076-.45.295.295 0 01.244-.107.365.365 0 01.213.08l.022.017c.016.013.034.026.046.037.071.067.139.139.202.213.125.137.263.262.412.372.056.03.121.036.182.018l.11.078a3.938 3.938 0 012.552-1.224l.007-.129a.332.332 0 00.1-.157 2.844 2.844 0 00-.034-.554 2.555 2.555 0 01-.042-.29v-.053-.025-.004-.004A.306.306 0 018 2.82a.308.308 0 01.306.337v.087a2.53 2.53 0 01-.041.29 2.85 2.85 0 00-.035.553.242.242 0 00.1.153v.007l.007.13c.967.087 1.87.522 2.54 1.223l.116-.083a.34.34 0 00.186-.02c.149-.11.287-.235.412-.373a2.53 2.53 0 01.202-.213l.051-.04.017-.014a.308.308 0 01.472.388.307.307 0 01-.09.09c-.008.005-.017.012-.025.02l-.043.033a2.549 2.549 0 01-.254.148 2.865 2.865 0 00-.455.32.24.24 0 00-.058.172 4.458 4.458 0 01-.05.044l-.058.053c.542.806.769 1.783.637 2.745l.123.036c.031.056.077.101.132.132.18.048.364.078.55.09.097.003.195.01.292.024l.058.013zm-2.875-3.1l-1.308.925-.004-.002a.27.27 0 01-.43-.205v-.001l-.091-1.598a3.183 3.183 0 011.833.882zM7.754 7.818h.492l.306.381-.11.476L8 8.886l-.443-.213-.11-.475.307-.381zM7.29 5.24c.107-.024.216-.043.326-.056l-.09 1.6-.008.004a.268.268 0 01-.293.256.27.27 0 01-.135-.05l-.002.001-1.316-.93c.419-.41.945-.696 1.518-.825zM5.296 6.663l1.201 1.071-.001.007a.269.269 0 01-.106.462l-.001.005-1.54.443a3.134 3.134 0 01.447-1.988zm1.608 2.846l-.612 1.474a3.16 3.16 0 01-1.27-1.586L6.6 9.13l.003.003a.265.265 0 01.18.029.27.27 0 01.117.341l.004.006zm1.806 1.896c-.572.13-1.17.1-1.726-.088l.777-1.4h.001a.27.27 0 01.475-.001h.006l.779 1.402a3.286 3.286 0 01-.312.087zm1.004-.416L9.096 9.5l.001-.003a.269.269 0 01.296-.37l.003-.004 1.593.269a3.147 3.147 0 01-1.275 1.597zm1.442-2.343L9.61 8.201l-.002-.006a.27.27 0 01-.185-.343.27.27 0 01.08-.12L9.5 7.73l1.195-1.067c.366.594.527 1.29.46 1.983z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/keyframes.scss
new file mode 100644
index 0000000000..6c6461791f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-labyrinth {
+  50% {
+
+    background-color: var(--icon-color, var(--color-labyrinth-500, currentColor));
+    -webkit-mask-image: var(--icon-labyrinth-24);
+    mask-image: var(--icon-labyrinth-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-labyrinth-500, currentColor));
+    -webkit-mask-image: var(--icon-labyrinth-16);
+    mask-image: var(--icon-labyrinth-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/placeholders.scss
new file mode 100644
index 0000000000..2e7df36e50
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-labyrinth-icon {
+  --icon-name: icon-labyrinth;
+  content: '';
+}
+%with-labyrinth-mask {
+  --icon-name: icon-labyrinth;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/property-16.scss
new file mode 100644
index 0000000000..d784757deb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-labyrinth-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 1.5a6.502 6.502 0 00-6.392 5.317.75.75 0 11-1.476-.27 8 8 0 110 2.907.75.75 0 011.476-.272A6.502 6.502 0 0014.48 8.5h-1.555a4.95 4.95 0 11-6.34-5.231.7.7 0 11.4 1.342A3.558 3.558 0 004.595 7h1.167a2.45 2.45 0 113.87 2.826.7.7 0 01-.933-1.043 1.05 1.05 0 10-1.4 0 .7.7 0 01-.934 1.043A2.45 2.45 0 015.601 8.5H4.483a3.55 3.55 0 104.531-3.89.7.7 0 01.4-1.341 4.958 4.958 0 013.432 3.73h1.578A6.501 6.501 0 008 1.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/property-24.scss
new file mode 100644
index 0000000000..690ae358f7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/labyrinth/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-labyrinth-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M1.694 10.094C2.59 5.216 6.864 1.52 12 1.52c5.45 0 9.929 4.16 10.432 9.479h-2.525a7.977 7.977 0 00-5.63-6.639.75.75 0 10-.428 1.438A6.469 6.469 0 115.55 12.5h2.543c.122.964.593 1.82 1.28 2.435a.75.75 0 101.001-1.118 2.437 2.437 0 113.25 0 .75.75 0 001 1.118A3.938 3.938 0 108.19 11H5.609a6.477 6.477 0 014.543-5.201.75.75 0 10-.427-1.438 7.969 7.969 0 1010.23 8.139h2.513c-.26 5.555-4.847 9.98-10.467 9.98-5.136 0-9.41-3.697-10.306-8.574a.75.75 0 00-1.476.271C1.243 19.754 6.127 23.98 12 23.98c6.616 0 11.98-5.363 11.98-11.98C23.98 5.385 18.615.022 12 .022 6.127.02 1.243 4.246.218 9.823a.75.75 0 101.476.27z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/layers/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/layers/index.scss
new file mode 100644
index 0000000000..d2a936e492
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/layers/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../layers/property-16';
+        @import '../layers/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/layers/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/layers/keyframes.scss
new file mode 100644
index 0000000000..88ccd5b8db
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/layers/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-layers {
+  50% {
+
+    background-color: var(--icon-color, var(--color-layers-500, currentColor));
+    -webkit-mask-image: var(--icon-layers-24);
+    mask-image: var(--icon-layers-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-layers-500, currentColor));
+    -webkit-mask-image: var(--icon-layers-16);
+    mask-image: var(--icon-layers-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/layers/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/layers/placeholders.scss
new file mode 100644
index 0000000000..899a842703
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/layers/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-layers-icon {
+  --icon-name: icon-layers;
+  content: '';
+}
+%with-layers-mask {
+  --icon-name: icon-layers;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/layers/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/layers/property-16.scss
new file mode 100644
index 0000000000..55a1bb802e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/layers/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-layers-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M7.656.084a.75.75 0 01.689 0l7.25 3.75a.75.75 0 010 1.332l-7.25 3.75a.75.75 0 01-.69 0l-7.25-3.75a.75.75 0 010-1.332l7.25-3.75zM2.383 4.5L8 7.405 13.617 4.5 8 1.594 2.383 4.5z" clip-rule="evenodd"/><path d="M.093 10.887a.75.75 0 011.02-.294L8 14.393l6.888-3.8a.75.75 0 11.724 1.313l-7.25 4a.75.75 0 01-.724 0l-7.25-4a.75.75 0 01-.295-1.019z"/><path d="M1.112 7.093a.75.75 0 00-.724 1.313l7.25 4a.75.75 0 00.724 0l7.25-4a.75.75 0 00-.724-1.313L8 10.893l-6.888-3.8z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/layers/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/layers/property-24.scss
new file mode 100644
index 0000000000..efbd769902
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/layers/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-layers-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M11.658 1.082a.75.75 0 01.684 0l10.25 5.25a.75.75 0 010 1.336l-10.25 5.25a.75.75 0 01-.684 0l-10.25-5.25a.75.75 0 010-1.336l10.25-5.25zM3.395 7L12 11.407 20.605 7 12 2.593 3.395 7z" clip-rule="evenodd"/><path d="M1.089 16.395a.75.75 0 011.016-.306L12 21.399l9.895-5.31a.75.75 0 01.71 1.322l-10.25 5.5a.75.75 0 01-.71 0l-10.25-5.5a.75.75 0 01-.306-1.016z"/><path d="M2.105 11.089a.75.75 0 00-.71 1.322l10.25 5.5a.75.75 0 00.71 0l10.25-5.5a.75.75 0 00-.71-1.322L12 16.399l-9.895-5.31z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/layout/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/layout/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/layout/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/layout/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/layout/keyframes.scss
new file mode 100644
index 0000000000..34b35abec8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/layout/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-layout {
+  50% {
+
+    background-color: var(--icon-color, var(--color-layout-500, currentColor));
+    -webkit-mask-image: var(--icon-layout-24);
+    mask-image: var(--icon-layout-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-layout-500, currentColor));
+    -webkit-mask-image: var(--icon-layout-16);
+    mask-image: var(--icon-layout-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/layout/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/layout/placeholders.scss
new file mode 100644
index 0000000000..cc6668f596
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/layout/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-layout-icon {
+  --icon-name: icon-layout;
+  content: '';
+}
+%with-layout-mask {
+  --icon-name: icon-layout;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/layout/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/layout/property-16.scss
new file mode 100644
index 0000000000..d21b578616
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/layout/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-layout-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zM6.5 13.5h6.25a.75.75 0 00.75-.75V6.5h-7v7zM5 6.5v7H3.25a.75.75 0 01-.75-.75V6.5H5zM13.5 5V3.25a.75.75 0 00-.75-.75h-9.5a.75.75 0 00-.75.75V5h11z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/layout/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/layout/property-24.scss
new file mode 100644
index 0000000000..7394371287
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/layout/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-layout-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zM9 20.5h10.25c.69 0 1.25-.56 1.25-1.25V9.5H9v11zm-1.5-11v11H4.75c-.69 0-1.25-.56-1.25-1.25V9.5h4zm13-1.5V4.75c0-.69-.56-1.25-1.25-1.25H4.75c-.69 0-1.25.56-1.25 1.25V8h17z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/keyframes.scss
new file mode 100644
index 0000000000..6f6e06da5e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-learn-link {
+  50% {
+
+    background-color: var(--icon-color, var(--color-learn-link-500, currentColor));
+    -webkit-mask-image: var(--icon-learn-link-24);
+    mask-image: var(--icon-learn-link-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-learn-link-500, currentColor));
+    -webkit-mask-image: var(--icon-learn-link-16);
+    mask-image: var(--icon-learn-link-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/placeholders.scss
new file mode 100644
index 0000000000..037f5bd008
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-learn-link-icon {
+  --icon-name: icon-learn-link;
+  content: '';
+}
+%with-learn-link-mask {
+  --icon-name: icon-learn-link;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/property-16.scss
new file mode 100644
index 0000000000..0a92675b5b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-learn-link-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M12.75 0a.75.75 0 000 1.5h.69l-1.97 1.97a.75.75 0 001.06 1.06l1.97-1.97v.69a.75.75 0 001.5 0V.75a.75.75 0 00-.75-.75h-2.5z"/><path fill-rule="evenodd" d="M8.075 4.074a.75.75 0 00-.65 0l-6.75 3.25a.75.75 0 000 1.352L2 9.314v3.511a.75.75 0 00.064.302l.686-.302c-.686.302-.686.304-.686.304l.002.004.003.006.006.013a1.268 1.268 0 00.075.139c.047.08.116.184.21.303.19.238.483.533.917.82.871.575 2.265 1.086 4.45 1.086 2.177 0 3.487-.508 4.271-1.122.39-.305.632-.623.78-.884a2.194 2.194 0 00.19-.447l.01-.041.004-.017.001-.007.001-.003v-.001s0-.002-.734-.153l.735.151c.01-.05.015-.1.015-.151v-3.27l1.825-.88a.75.75 0 000-1.35l-6.75-3.25zm3.425 6.203l-3.425 1.649a.75.75 0 01-.65 0L3.5 10.036v2.579l.033.043c.098.123.276.309.57.504.585.386 1.679.838 3.623.838 1.95 0 2.902-.454 3.348-.803.225-.176.34-.34.396-.44a.878.878 0 00.03-.057v-2.423zm-3.75.14L2.729 8 7.75 5.582 12.771 8 7.75 10.418z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/property-24.scss
new file mode 100644
index 0000000000..58271e1a15
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/learn-link/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-learn-link-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M18.75 1a.75.75 0 000 1.5h1.69l-2.97 2.97a.75.75 0 001.06 1.06l2.97-2.97v1.69a.75.75 0 001.5 0v-3.5a.75.75 0 00-.75-.75h-3.5z"/><path fill-rule="evenodd" d="M11.856 5.09a.75.75 0 00-.712 0l-9.75 5.25a.75.75 0 000 1.32l2.627 1.415A.752.752 0 004 13.25v5.333a.75.75 0 00.067.31l.683-.31-.683.31v.002l.002.003.003.006.007.016a1.657 1.657 0 00.094.168c.061.101.151.234.277.387.251.308.643.694 1.23 1.072C6.857 21.306 8.772 22 11.82 22c3.043 0 4.827-.692 5.87-1.487.52-.397.838-.806 1.029-1.138a2.714 2.714 0 00.244-.557c.005-.018.01-.034.012-.048l.005-.018.001-.007.001-.004v-.001s0-.002-.733-.157l.734.155a.752.752 0 00.016-.155V13.25c0-.06-.007-.12-.02-.175l2.626-1.415a.75.75 0 000-1.32l-9.75-5.25zM17.5 13.87l-5.644 3.04a.75.75 0 01-.712 0L5.5 13.87v4.508c.028.04.064.09.11.146.158.192.434.472.882.761.892.575 2.513 1.214 5.33 1.214 2.823 0 4.253-.641 4.959-1.18a2.41 2.41 0 00.64-.695c.039-.067.064-.121.079-.159v-4.595zm-6 1.527L3.332 11 11.5 6.602 19.668 11 11.5 15.398z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/learn/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/learn/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/learn/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/learn/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/learn/keyframes.scss
new file mode 100644
index 0000000000..14acb7e6a0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/learn/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-learn {
+  50% {
+
+    background-color: var(--icon-color, var(--color-learn-500, currentColor));
+    -webkit-mask-image: var(--icon-learn-24);
+    mask-image: var(--icon-learn-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-learn-500, currentColor));
+    -webkit-mask-image: var(--icon-learn-16);
+    mask-image: var(--icon-learn-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/learn/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/learn/placeholders.scss
new file mode 100644
index 0000000000..85c48fd35d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/learn/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-learn-icon {
+  --icon-name: icon-learn;
+  content: '';
+}
+%with-learn-mask {
+  --icon-name: icon-learn;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/learn/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/learn/property-16.scss
new file mode 100644
index 0000000000..b329cae7ee
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/learn/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-learn-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.316 2.07a.75.75 0 00-.632 0l-7 3.25a.75.75 0 000 1.36l1.434.666A.746.746 0 002 7.75V11a.75.75 0 00.158.46L2.75 11l-.592.46.001.002.001.001.003.004.008.01a1.882 1.882 0 00.103.12c.068.076.165.178.292.299.254.24.63.555 1.132.866C4.706 13.388 6.217 14 8.25 14c2.037 0 3.44-.615 4.345-1.266a5.32 5.32 0 00.977-.902 3.916 3.916 0 00.322-.448l.007-.012.003-.004v-.002h.001c0-.001 0-.002-.655-.366l.655.365A.754.754 0 0014 11V7.75a.747.747 0 00-.118-.404l1.434-.666a.75.75 0 000-1.36l-7-3.25zM12.5 7.988L8.316 9.93a.75.75 0 01-.632 0L3.5 7.988v2.723a5.585 5.585 0 00.99.776c.804.5 2.043 1.013 3.76 1.013 1.713 0 2.81-.51 3.468-.984a3.812 3.812 0 00.782-.745V7.988zM8 8.423L2.781 6 8 3.577 13.219 6 8 8.423z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/learn/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/learn/property-24.scss
new file mode 100644
index 0000000000..d5e83338a4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/learn/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-learn-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12.367 3.096a.75.75 0 00-.734 0l-10.25 5.75a.75.75 0 000 1.308l2.82 1.582A.747.747 0 004 12.25v5a.75.75 0 00.12.407l.63-.407-.63.408.001.001.002.002.003.005.009.013a2.202 2.202 0 00.118.162c.08.1.194.237.348.397.308.321.774.736 1.427 1.147C7.34 20.21 9.378 21 12.345 21c2.968 0 4.854-.79 6.018-1.646a5.597 5.597 0 001.209-1.193 3.945 3.945 0 00.339-.553 1.8 1.8 0 00.02-.043l.007-.016.002-.006.001-.002v-.001s.001-.002-.691-.29l.692.288A.75.75 0 0020 17.25v-5a.747.747 0 00-.203-.514l2.82-1.582a.75.75 0 000-1.308l-10.25-5.75zm6.133 9.368l-6.133 3.44a.75.75 0 01-.734 0L5.5 12.464v4.533c.047.055.107.124.182.202.233.242.605.577 1.144.916 1.072.675 2.833 1.385 5.52 1.385 2.686 0 4.252-.71 5.128-1.354.442-.325.722-.644.887-.87.061-.084.107-.155.139-.21v-4.602zM12 14.39L3.283 9.5 12 4.61l8.717 4.89L12 14.39z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/keyframes.scss
new file mode 100644
index 0000000000..2a318c2b33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-line-chart-up {
+  50% {
+
+    background-color: var(--icon-color, var(--color-line-chart-up-500, currentColor));
+    -webkit-mask-image: var(--icon-line-chart-up-24);
+    mask-image: var(--icon-line-chart-up-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-line-chart-up-500, currentColor));
+    -webkit-mask-image: var(--icon-line-chart-up-16);
+    mask-image: var(--icon-line-chart-up-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/placeholders.scss
new file mode 100644
index 0000000000..4a023afb6d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-line-chart-up-icon {
+  --icon-name: icon-line-chart-up;
+  content: '';
+}
+%with-line-chart-up-mask {
+  --icon-name: icon-line-chart-up;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/property-16.scss
new file mode 100644
index 0000000000..e99eae583e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-line-chart-up-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h11.5A2.25 2.25 0 0116 3.25v9.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v7.075L5.61 7.86a.73.73 0 01.278-.101.747.747 0 01.318.02L9.08 8.6l1.328-2.988-.9.405a.75.75 0 01-.615-1.368l2.58-1.16a.75.75 0 01.991.376l1.16 2.58a.75.75 0 01-1.367.615l-.428-.951-1.638 3.686a.75.75 0 01-.908.423L6.107 9.31 1.5 12.075v.675c0 .414.336.75.75.75H5V13a.75.75 0 011.5 0v.5h3V13a.75.75 0 011.5 0v.5h2.75a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75H2.25z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/property-24.scss
new file mode 100644
index 0000000000..fbded66471
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart-up/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-line-chart-up-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h16.5A2.75 2.75 0 0123 4.75v14.5A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25v-2.236V4.75zm1.5 12.644v1.856c0 .69.56 1.25 1.25 1.25H8v-.75a.75.75 0 011.5 0v.75h5v-.75a.75.75 0 011.5 0v.75h4.25c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75c-.69 0-1.25.56-1.25 1.25v10.822l6.074-4.19a.746.746 0 01.721-.072l4.304 1.722 2.163-5.047-1.554.699a.75.75 0 01-.616-1.368l3.192-1.436a.75.75 0 01.992.376l1.436 3.192a.75.75 0 11-1.368.615l-.687-1.526-2.463 5.747a.75.75 0 01-.973.413l-4.626-1.851L2.5 17.394z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/keyframes.scss
new file mode 100644
index 0000000000..46946da6e2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-line-chart {
+  50% {
+
+    background-color: var(--icon-color, var(--color-line-chart-500, currentColor));
+    -webkit-mask-image: var(--icon-line-chart-24);
+    mask-image: var(--icon-line-chart-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-line-chart-500, currentColor));
+    -webkit-mask-image: var(--icon-line-chart-16);
+    mask-image: var(--icon-line-chart-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/placeholders.scss
new file mode 100644
index 0000000000..c8d93541a9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-line-chart-icon {
+  --icon-name: icon-line-chart;
+  content: '';
+}
+%with-line-chart-mask {
+  --icon-name: icon-line-chart;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/property-16.scss
new file mode 100644
index 0000000000..9e8623b79c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-line-chart-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-9.5A2.25 2.25 0 0013.75 1H2.25zM1.5 3.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75H11V13a.75.75 0 00-1.5 0v.5h-3V13A.75.75 0 005 13v.5H2.25a.75.75 0 01-.75-.75v-1.19l4.636-3.708 3.586 1.345a.752.752 0 00.76-.122l2.487-1.99a.75.75 0 10-.938-1.17L9.864 7.647 6.28 6.303a.754.754 0 00-.754.116L1.5 9.64V3.25z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/property-24.scss
new file mode 100644
index 0000000000..cf8a63a286
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/line-chart/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-line-chart-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.75 2A2.75 2.75 0 001 4.75v14.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V4.75A2.75 2.75 0 0020.25 2H3.75zM2.5 16.353v2.897c0 .69.56 1.25 1.25 1.25H8v-.75a.75.75 0 011.5 0v.75h5v-.75a.75.75 0 011.5 0v.75h4.25c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75c-.69 0-1.25.56-1.25 1.25v9.656l6.007-4.971a.748.748 0 01.842-.1l5.572 2.787L18.55 9.4a.75.75 0 11.9 1.2l-3.987 2.99a.754.754 0 01-.812.074l-5.55-2.775L2.5 16.353z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/link/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/link/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/link/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/link/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/link/keyframes.scss
new file mode 100644
index 0000000000..e3d5121fd8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/link/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-link {
+  50% {
+
+    background-color: var(--icon-color, var(--color-link-500, currentColor));
+    -webkit-mask-image: var(--icon-link-24);
+    mask-image: var(--icon-link-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-link-500, currentColor));
+    -webkit-mask-image: var(--icon-link-16);
+    mask-image: var(--icon-link-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/link/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/link/placeholders.scss
new file mode 100644
index 0000000000..f08fe363f0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/link/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-link-icon {
+  --icon-name: icon-link;
+  content: '';
+}
+%with-link-mask {
+  --icon-name: icon-link;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/link/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/link/property-16.scss
new file mode 100644
index 0000000000..1aab0a084d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/link/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-link-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.141 1a3.893 3.893 0 00-2.738 1.093L7.314 3.175A.75.75 0 008.372 4.24l1.077-1.07a2.393 2.393 0 013.384 3.382l-1.881 1.88a2.393 2.393 0 01-3.608-.258.75.75 0 00-1.202.899 3.893 3.893 0 005.87.42l1.886-1.886.01-.009A3.893 3.893 0 0011.14 1z"/><path d="M7.019 5.365a3.893 3.893 0 00-3.032 1.13L2.102 8.382l-.01.01a3.893 3.893 0 005.505 5.504l1.084-1.084a.75.75 0 00-1.06-1.06l-1.07 1.07a2.393 2.393 0 01-3.384-3.384l1.881-1.88a2.393 2.393 0 013.609.258.75.75 0 101.2-.899A3.893 3.893 0 007.02 5.365z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/link/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/link/property-24.scss
new file mode 100644
index 0000000000..dfdbd968cb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/link/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-link-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.575 2a5.48 5.48 0 00-3.848 1.531L11.094 5.15a.75.75 0 001.056 1.065l1.62-1.606a3.98 3.98 0 015.567.052 3.951 3.951 0 01.053 5.542l-2.829 2.82a3.974 3.974 0 01-3.094 1.15 3.984 3.984 0 01-2.898-1.577.75.75 0 10-1.2.9 5.47 5.47 0 003.991 2.174 5.486 5.486 0 004.26-1.585l2.834-2.824.009-.01a5.45 5.45 0 00-.067-7.652A5.48 5.48 0 0016.576 2z"/><path d="M10.64 8.33a5.486 5.486 0 00-4.26 1.585L3.545 12.74l-.009.01a5.45 5.45 0 00.067 7.652 5.48 5.48 0 007.67.067l1.624-1.62a.75.75 0 10-1.06-1.062l-1.61 1.605a3.98 3.98 0 01-5.565-.052 3.951 3.951 0 01-.053-5.543l2.829-2.82a3.973 3.973 0 013.094-1.15 3.984 3.984 0 012.898 1.578.75.75 0 001.2-.9A5.468 5.468 0 0010.64 8.33z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/keyframes.scss
new file mode 100644
index 0000000000..fcaaa8e1ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-linkedin-color {
+  50% {
+    background-image: var(--icon-linkedin-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-linkedin-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/placeholders.scss
new file mode 100644
index 0000000000..9ec500d5cd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-linkedin-color-icon {
+  --icon-name: icon-linkedin-color;
+  content: '';
+}
+%with-linkedin-color-mask {
+  --icon-name: icon-linkedin-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/property-16.scss
new file mode 100644
index 0000000000..77eb547009
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-linkedin-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%230A66C2" d="M12.225 12.225h-1.778V9.44c0-.664-.012-1.519-.925-1.519-.926 0-1.068.724-1.068 1.47v2.834H6.676V6.498h1.707v.783h.024c.348-.594.996-.95 1.684-.925 1.802 0 2.135 1.185 2.135 2.728l-.001 3.14zM4.67 5.715a1.037 1.037 0 01-1.032-1.031c0-.566.466-1.032 1.032-1.032.566 0 1.031.466 1.032 1.032 0 .566-.466 1.032-1.032 1.032zm.889 6.51h-1.78V6.498h1.78v5.727zM13.11 2H2.885A.88.88 0 002 2.866v10.268a.88.88 0 00.885.866h10.226a.882.882 0 00.889-.866V2.865a.88.88 0 00-.889-.864z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/property-24.scss
new file mode 100644
index 0000000000..8e618d6ab9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-linkedin-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%230A66C2" d="M19.041 19.041h-2.963v-4.64c0-1.107-.02-2.532-1.541-2.532-1.544 0-1.78 1.206-1.78 2.45v4.722H9.794V9.497h2.844v1.305h.04a3.121 3.121 0 012.807-1.542c3.004 0 3.558 1.976 3.558 4.546l-.002 5.235zM6.45 8.193c-.944 0-1.72-.776-1.72-1.72 0-.943.776-1.72 1.72-1.72.943 0 1.719.777 1.72 1.72 0 .943-.777 1.72-1.72 1.72zM7.93 19.04H4.965V9.497h2.966v9.544zM20.52 2.001H3.476A1.466 1.466 0 002 3.444v17.114c.01.8.675 1.451 1.476 1.443h17.043A1.47 1.47 0 0022 20.557V3.442A1.469 1.469 0 0020.519 2v.002z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/index.scss
new file mode 100644
index 0000000000..fbeba26eb1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../linkedin-color/property-16';
+        @import '../linkedin-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/keyframes.scss
new file mode 100644
index 0000000000..f85ec72a95
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-linkedin {
+  50% {
+
+    background-color: var(--icon-color, var(--color-linkedin-500, currentColor));
+    -webkit-mask-image: var(--icon-linkedin-color-24);
+    mask-image: var(--icon-linkedin-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-linkedin-500, currentColor));
+    -webkit-mask-image: var(--icon-linkedin-color-16);
+    mask-image: var(--icon-linkedin-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/placeholders.scss
new file mode 100644
index 0000000000..17361b9496
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-linkedin-icon {
+  --icon-name: icon-linkedin;
+  content: '';
+}
+%with-linkedin-mask {
+  --icon-name: icon-linkedin;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/property-16.scss
new file mode 100644
index 0000000000..c31be247d3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-linkedin-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.225 12.225h-1.778V9.44c0-.664-.012-1.519-.925-1.519-.926 0-1.068.724-1.068 1.47v2.834H6.676V6.498h1.707v.783h.024c.348-.594.996-.95 1.684-.925 1.802 0 2.135 1.185 2.135 2.728l-.001 3.14zM4.67 5.715a1.037 1.037 0 01-1.032-1.031c0-.566.466-1.032 1.032-1.032.566 0 1.031.466 1.032 1.032 0 .566-.466 1.032-1.032 1.032zm.889 6.51h-1.78V6.498h1.78v5.727zM13.11 2H2.885A.88.88 0 002 2.866v10.268a.88.88 0 00.885.866h10.226a.882.882 0 00.889-.866V2.865a.88.88 0 00-.889-.864z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/property-24.scss
new file mode 100644
index 0000000000..0069c82dcf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/linkedin/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-linkedin-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.225 12.225h-1.778V9.44c0-.664-.012-1.519-.925-1.519-.926 0-1.068.724-1.068 1.47v2.834H6.676V6.498h1.707v.783h.024c.348-.594.996-.95 1.684-.925 1.802 0 2.135 1.185 2.135 2.728l-.001 3.14zM4.67 5.715a1.037 1.037 0 01-1.032-1.031c0-.566.466-1.032 1.032-1.032.566 0 1.031.466 1.032 1.032 0 .566-.466 1.032-1.032 1.032zm.889 6.51h-1.78V6.498h1.78v5.727zM13.11 2H2.885A.88.88 0 002 2.866v10.268a.88.88 0 00.885.866h10.226a.882.882 0 00.889-.866V2.865a.88.88 0 00-.889-.864z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/list/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/list/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/list/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/list/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/list/keyframes.scss
new file mode 100644
index 0000000000..e1d6694b44
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/list/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-list {
+  50% {
+
+    background-color: var(--icon-color, var(--color-list-500, currentColor));
+    -webkit-mask-image: var(--icon-list-24);
+    mask-image: var(--icon-list-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-list-500, currentColor));
+    -webkit-mask-image: var(--icon-list-16);
+    mask-image: var(--icon-list-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/list/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/list/placeholders.scss
new file mode 100644
index 0000000000..820eef5273
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/list/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-list-icon {
+  --icon-name: icon-list;
+  content: '';
+}
+%with-list-mask {
+  --icon-name: icon-list;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/list/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/list/property-16.scss
new file mode 100644
index 0000000000..10bc79bee1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/list/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-list-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2 3.75A.75.75 0 012.75 3h.5a.75.75 0 010 1.5h-.5A.75.75 0 012 3.75zm4 0A.75.75 0 016.75 3h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 016 3.75zm-4 4A.75.75 0 012.75 7h.5a.75.75 0 010 1.5h-.5A.75.75 0 012 7.75zm4 0A.75.75 0 016.75 7h6.5a.75.75 0 010 1.5h-6.5A.75.75 0 016 7.75zm-4 4a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zm4 0a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/list/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/list/property-24.scss
new file mode 100644
index 0000000000..98564be528
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/list/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-list-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2.5 5.75A.75.75 0 013.25 5h1a.75.75 0 010 1.5h-1a.75.75 0 01-.75-.75zm4.5 0A.75.75 0 017.75 5h13a.75.75 0 010 1.5h-13A.75.75 0 017 5.75zm-4.5 6a.75.75 0 01.75-.75h1a.75.75 0 010 1.5h-1a.75.75 0 01-.75-.75zm4.5 0a.75.75 0 01.75-.75h13a.75.75 0 010 1.5h-13a.75.75 0 01-.75-.75zm-4.5 6a.75.75 0 01.75-.75h1a.75.75 0 010 1.5h-1a.75.75 0 01-.75-.75zm4.5 0a.75.75 0 01.75-.75h13a.75.75 0 010 1.5h-13a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/keyframes.scss
new file mode 100644
index 0000000000..e86377fee3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-load-balancer {
+  50% {
+
+    background-color: var(--icon-color, var(--color-load-balancer-500, currentColor));
+    -webkit-mask-image: var(--icon-load-balancer-24);
+    mask-image: var(--icon-load-balancer-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-load-balancer-500, currentColor));
+    -webkit-mask-image: var(--icon-load-balancer-16);
+    mask-image: var(--icon-load-balancer-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/placeholders.scss
new file mode 100644
index 0000000000..4239792f0c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-load-balancer-icon {
+  --icon-name: icon-load-balancer;
+  content: '';
+}
+%with-load-balancer-mask {
+  --icon-name: icon-load-balancer;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/property-16.scss
new file mode 100644
index 0000000000..0274649ff2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-load-balancer-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1a.75.75 0 01.75.75V7h3.69l-.97-.97a.75.75 0 011.06-1.06l2.25 2.25a.75.75 0 010 1.06l-2.25 2.25a.75.75 0 11-1.06-1.06l.97-.97H8.75v4.08l1.002-.89a.75.75 0 01.996 1.12l-2.25 2a.75.75 0 01-.996 0l-2.25-2a.75.75 0 01.996-1.12l1.002.89V8.5H3.56l.97.97a.75.75 0 11-1.06 1.06L1.22 8.28a.75.75 0 010-1.06l2.25-2.25a.75.75 0 011.06 1.06L3.56 7h3.69V1.75A.75.75 0 018 1z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/property-24.scss
new file mode 100644
index 0000000000..e058e715b2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/load-balancer/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-load-balancer-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2a.75.75 0 01.75.75V11h6.69l-1.72-1.72a.75.75 0 011.06-1.06l3 3a.75.75 0 010 1.06l-3 3a.75.75 0 11-1.06-1.06l1.72-1.72h-6.69v6.94l1.72-1.72a.75.75 0 111.06 1.06l-3 3a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l1.72 1.72V12.5H4.56l1.72 1.72a.75.75 0 11-1.06 1.06l-3-3a.75.75 0 010-1.06l3-3a.75.75 0 011.06 1.06L4.56 11h6.69V2.75A.75.75 0 0112 2z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/keyframes.scss
new file mode 100644
index 0000000000..9a58a3e1db
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-loading-motion {
+  50% {
+
+    background-color: var(--icon-color, var(--color-loading-motion-500, currentColor));
+    -webkit-mask-image: var(--icon-loading-motion-24);
+    mask-image: var(--icon-loading-motion-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-loading-motion-500, currentColor));
+    -webkit-mask-image: var(--icon-loading-motion-16);
+    mask-image: var(--icon-loading-motion-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/placeholders.scss
new file mode 100644
index 0000000000..9019ac88b5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-loading-motion-icon {
+  --icon-name: icon-loading-motion;
+  content: '';
+}
+%with-loading-motion-mask {
+  --icon-name: icon-loading-motion;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/property-16.scss
new file mode 100644
index 0000000000..7efccddc47
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-loading-motion-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" class="hds-flight-icon--animation-loading"><style>@keyframes hds-flight-icon-animation-rotation {to {transform: rotate(360deg);}}.hds-flight-icon--animation-loading {animation: hds-flight-icon-animation-rotation .7s linear infinite;}.hds-flight-icon--animation-running {animation: hds-flight-icon-animation-rotation .7s linear infinite;}</style><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z" opacity=".2"/><path d="M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/property-24.scss
new file mode 100644
index 0000000000..b88623c0de
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/loading-motion/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-loading-motion-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" class="hds-flight-icon--animation-loading"><style>@keyframes hds-flight-icon-animation-rotation {to {transform: rotate(360deg);}}.hds-flight-icon--animation-loading {animation: hds-flight-icon-animation-rotation .7s linear infinite;}.hds-flight-icon--animation-running {animation: hds-flight-icon-animation-rotation .7s linear infinite;}</style><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z" opacity=".2"/><path d="M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/loading/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/loading/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/loading/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/loading/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/loading/keyframes.scss
new file mode 100644
index 0000000000..3ffc56b8db
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/loading/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-loading {
+  50% {
+
+    background-color: var(--icon-color, var(--color-loading-500, currentColor));
+    -webkit-mask-image: var(--icon-loading-24);
+    mask-image: var(--icon-loading-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-loading-500, currentColor));
+    -webkit-mask-image: var(--icon-loading-16);
+    mask-image: var(--icon-loading-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/loading/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/loading/placeholders.scss
new file mode 100644
index 0000000000..da24949340
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/loading/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-loading-icon {
+  --icon-name: icon-loading;
+  content: '';
+}
+%with-loading-mask {
+  --icon-name: icon-loading;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/loading/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/loading/property-16.scss
new file mode 100644
index 0000000000..9b3ed0a649
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/loading/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-loading-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" class="hds-flight-icon--animation-loading"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z" opacity=".2"/><path d="M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/loading/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/loading/property-24.scss
new file mode 100644
index 0000000000..3b51ac2d31
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/loading/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-loading-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="hds-flight-icon--animation-loading"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 2.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19zM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12z" opacity=".2"/><path d="M11.25 1.75A.75.75 0 0112 1c6.075 0 11 4.925 11 11a.75.75 0 01-1.5 0A9.5 9.5 0 0012 2.5a.75.75 0 01-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/index.scss
new file mode 100644
index 0000000000..5d9da88e63
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../lock-fill/property-16';
+        @import '../lock-fill/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/keyframes.scss
new file mode 100644
index 0000000000..2f9b94994d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-lock-closed-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-lock-closed-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-fill-24);
+    mask-image: var(--icon-lock-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-lock-closed-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-fill-16);
+    mask-image: var(--icon-lock-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/placeholders.scss
new file mode 100644
index 0000000000..0745b93da2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-lock-closed-fill-icon {
+  --icon-name: icon-lock-closed-fill;
+  content: '';
+}
+%with-lock-closed-fill-mask {
+  --icon-name: icon-lock-closed-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/index.scss
new file mode 100644
index 0000000000..656a4ae55f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../lock/property-16';
+        @import '../lock/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/keyframes.scss
new file mode 100644
index 0000000000..f6631f4ec5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-lock-closed-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-lock-closed-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-24);
+    mask-image: var(--icon-lock-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-lock-closed-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-16);
+    mask-image: var(--icon-lock-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/placeholders.scss
new file mode 100644
index 0000000000..d400aa5ff9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-lock-closed-outline-icon {
+  --icon-name: icon-lock-closed-outline;
+  content: '';
+}
+%with-lock-closed-outline-mask {
+  --icon-name: icon-lock-closed-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/index.scss
new file mode 100644
index 0000000000..5d9da88e63
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../lock-fill/property-16';
+        @import '../lock-fill/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/keyframes.scss
new file mode 100644
index 0000000000..0907b01177
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-lock-closed {
+  50% {
+
+    background-color: var(--icon-color, var(--color-lock-closed-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-fill-24);
+    mask-image: var(--icon-lock-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-lock-closed-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-fill-16);
+    mask-image: var(--icon-lock-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/placeholders.scss
new file mode 100644
index 0000000000..14e79f1f04
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-closed/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-lock-closed-icon {
+  --icon-name: icon-lock-closed;
+  content: '';
+}
+%with-lock-closed-mask {
+  --icon-name: icon-lock-closed;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/index.scss
new file mode 100644
index 0000000000..f09f097134
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../lock-off/property-16';
+        @import '../lock-off/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/keyframes.scss
new file mode 100644
index 0000000000..58258d52fc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-lock-disabled {
+  50% {
+
+    background-color: var(--icon-color, var(--color-lock-disabled-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-off-24);
+    mask-image: var(--icon-lock-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-lock-disabled-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-off-16);
+    mask-image: var(--icon-lock-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/placeholders.scss
new file mode 100644
index 0000000000..4b699db362
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-disabled/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-lock-disabled-icon {
+  --icon-name: icon-lock-disabled;
+  content: '';
+}
+%with-lock-disabled-mask {
+  --icon-name: icon-lock-disabled;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/keyframes.scss
new file mode 100644
index 0000000000..e7359b230a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-lock-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-lock-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-fill-24);
+    mask-image: var(--icon-lock-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-lock-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-fill-16);
+    mask-image: var(--icon-lock-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/placeholders.scss
new file mode 100644
index 0000000000..f9df501511
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-lock-fill-icon {
+  --icon-name: icon-lock-fill;
+  content: '';
+}
+%with-lock-fill-mask {
+  --icon-name: icon-lock-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/property-16.scss
new file mode 100644
index 0000000000..e08ad71c85
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-lock-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4 5.014v-.93c0-1.078.417-2.114 1.165-2.881A3.96 3.96 0 018 0a3.96 3.96 0 012.835 1.203A4.127 4.127 0 0112 4.083v.93a2.25 2.25 0 012 2.237v5.5A2.25 2.25 0 0111.75 15h-7.5A2.25 2.25 0 012 12.75v-5.5a2.25 2.25 0 012-2.236zM6.239 2.25A2.46 2.46 0 018 1.5c.657 0 1.29.267 1.761.75.471.483.739 1.142.739 1.833V5h-5v-.917c0-.69.268-1.35.739-1.833zM8 9.25a.75.75 0 00-.75.75v1a.75.75 0 001.5 0v-1A.75.75 0 008 9.25z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/property-24.scss
new file mode 100644
index 0000000000..fd0ab07ae3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-lock-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M6 10.104V6.75c0-1.537.641-3.003 1.77-4.079A6.136 6.136 0 0112 1c1.58 0 3.102.597 4.23 1.671A5.632 5.632 0 0118 6.75v3.354c1.154.326 2 1.387 2 2.646v7.5A2.75 2.75 0 0117.25 23H6.75A2.75 2.75 0 014 20.25v-7.5c0-1.259.846-2.32 2-2.646zm2.805-6.346A4.636 4.636 0 0112 2.5c1.205 0 2.354.456 3.195 1.258.84.8 1.305 1.877 1.305 2.992V10h-9V6.75c0-1.115.465-2.192 1.305-2.992zM12 16.25a.75.75 0 00-.75.75v2a.75.75 0 001.5 0v-2a.75.75 0 00-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/keyframes.scss
new file mode 100644
index 0000000000..3cb761bea1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-lock-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-lock-off-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-off-24);
+    mask-image: var(--icon-lock-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-lock-off-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-off-16);
+    mask-image: var(--icon-lock-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/placeholders.scss
new file mode 100644
index 0000000000..59ac183181
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-lock-off-icon {
+  --icon-name: icon-lock-off;
+  content: '';
+}
+%with-lock-off-mask {
+  --icon-name: icon-lock-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/property-16.scss
new file mode 100644
index 0000000000..7e5dce7f93
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-lock-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 1.5a2.46 2.46 0 00-1.761.75.75.75 0 01-1.074-1.047A3.96 3.96 0 018 0a3.96 3.96 0 012.835 1.203A4.127 4.127 0 0112 4.083v.93a2.25 2.25 0 012 2.237V9.5a.75.75 0 01-1.5 0V7.25a.75.75 0 00-.75-.75H9.5a.75.75 0 010-1.5h1v-.917c0-.69-.268-1.35-.739-1.833A2.46 2.46 0 008 1.5z"/><path fill-rule="evenodd" d="M3.958 5.019A2.25 2.25 0 002 7.25v5.5A2.25 2.25 0 004.25 15h7.5c.606 0 1.156-.24 1.56-.629l1.16 1.16a.75.75 0 101.06-1.061l-14-14A.75.75 0 00.47 1.53L3.958 5.02zM4.25 6.5a.75.75 0 00-.75.75v5.5c0 .414.336.75.75.75h7.5a.749.749 0 00.5-.19L5.44 6.5H4.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/property-24.scss
new file mode 100644
index 0000000000..9396c9477c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-lock-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.75 17a.75.75 0 00-1.5 0v2a.75.75 0 001.5 0v-2z"/><path fill-rule="evenodd" d="M1.53.47A.75.75 0 00.47 1.53L6 7.06v3.044a2.751 2.751 0 00-2 2.646v7.5A2.75 2.75 0 006.75 23h10.5c1.271 0 2.34-.862 2.656-2.034l2.564 2.564a.75.75 0 101.06-1.06l-22-22zM18.5 19.56l-8.06-8.06H6.75c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-.69zM8.94 10L7.5 8.56V10h1.44z" clip-rule="evenodd"/><path d="M12 2.5a4.636 4.636 0 00-3.195 1.258c-.123.117-.238.24-.345.368a.75.75 0 01-1.153-.959c.144-.173.298-.338.463-.496A6.136 6.136 0 0112 1c1.58 0 3.102.597 4.23 1.671A5.632 5.632 0 0118 6.75v3.354c1.154.326 2 1.387 2 2.646v2.75a.75.75 0 01-1.5 0v-2.75c0-.69-.56-1.25-1.25-1.25H14.5a.75.75 0 010-1.5h2V6.75a4.133 4.133 0 00-1.305-2.992A4.636 4.636 0 0012 2.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/index.scss
new file mode 100644
index 0000000000..81b71544f3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../unlock/property-16';
+        @import '../unlock/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/keyframes.scss
new file mode 100644
index 0000000000..ea185984fa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-lock-open {
+  50% {
+
+    background-color: var(--icon-color, var(--color-lock-open-500, currentColor));
+    -webkit-mask-image: var(--icon-unlock-24);
+    mask-image: var(--icon-unlock-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-lock-open-500, currentColor));
+    -webkit-mask-image: var(--icon-unlock-16);
+    mask-image: var(--icon-unlock-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/placeholders.scss
new file mode 100644
index 0000000000..637d9bc56d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock-open/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-lock-open-icon {
+  --icon-name: icon-lock-open;
+  content: '';
+}
+%with-lock-open-mask {
+  --icon-name: icon-lock-open;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock/keyframes.scss
new file mode 100644
index 0000000000..8d01084e8a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-lock {
+  50% {
+
+    background-color: var(--icon-color, var(--color-lock-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-24);
+    mask-image: var(--icon-lock-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-lock-500, currentColor));
+    -webkit-mask-image: var(--icon-lock-16);
+    mask-image: var(--icon-lock-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock/placeholders.scss
new file mode 100644
index 0000000000..2992bc0b68
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-lock-icon {
+  --icon-name: icon-lock;
+  content: '';
+}
+%with-lock-mask {
+  --icon-name: icon-lock;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock/property-16.scss
new file mode 100644
index 0000000000..3cd8f49ea8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-lock-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 9.25a.75.75 0 01.75.75v1a.75.75 0 01-1.5 0v-1A.75.75 0 018 9.25z"/><path fill-rule="evenodd" d="M4 5.014v-.93c0-1.078.417-2.114 1.165-2.881A3.96 3.96 0 018 0a3.96 3.96 0 012.835 1.203A4.127 4.127 0 0112 4.083v.93a2.25 2.25 0 012 2.237v5.5A2.25 2.25 0 0111.75 15h-7.5A2.25 2.25 0 012 12.75v-5.5a2.25 2.25 0 012-2.236zM6.239 2.25A2.46 2.46 0 018 1.5c.657 0 1.29.267 1.761.75.471.483.739 1.142.739 1.833V5h-5v-.917c0-.69.268-1.35.739-1.833zM11.75 6.5a.75.75 0 01.75.75v5.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75v-5.5a.75.75 0 01.75-.75h7.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/lock/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/lock/property-24.scss
new file mode 100644
index 0000000000..b8584c8fb0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/lock/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-lock-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 16.25a.75.75 0 01.75.75v2a.75.75 0 01-1.5 0v-2a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M6 10.104V6.75c0-1.537.641-3.003 1.77-4.079A6.136 6.136 0 0112 1c1.58 0 3.102.597 4.23 1.671A5.632 5.632 0 0118 6.75v3.354c1.154.326 2 1.387 2 2.646v7.5A2.75 2.75 0 0117.25 23H6.75A2.75 2.75 0 014 20.25v-7.5c0-1.259.846-2.32 2-2.646zm2.805-6.346A4.636 4.636 0 0112 2.5c1.205 0 2.354.456 3.195 1.258.84.8 1.305 1.877 1.305 2.992V10h-9V6.75c0-1.115.465-2.192 1.305-2.992zM17.25 11.5H6.75c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-7.5c0-.69-.56-1.25-1.25-1.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/index.scss
new file mode 100644
index 0000000000..273941a41a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../alibaba-color/property-16';
+        @import '../alibaba-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/keyframes.scss
new file mode 100644
index 0000000000..7594949749
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-alicloud-color {
+  50% {
+    background-image: var(--icon-alibaba-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-alibaba-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/placeholders.scss
new file mode 100644
index 0000000000..034c83b6c8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-alicloud-color-icon {
+  --icon-name: icon-logo-alicloud-color;
+  content: '';
+}
+%with-logo-alicloud-color-mask {
+  --icon-name: icon-logo-alicloud-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/index.scss
new file mode 100644
index 0000000000..273941a41a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../alibaba-color/property-16';
+        @import '../alibaba-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/keyframes.scss
new file mode 100644
index 0000000000..2d243aba71
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-alicloud-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-alicloud-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-alibaba-color-24);
+    mask-image: var(--icon-alibaba-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-alicloud-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-alibaba-color-16);
+    mask-image: var(--icon-alibaba-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/placeholders.scss
new file mode 100644
index 0000000000..6c6c4af976
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-alicloud-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-alicloud-monochrome-icon {
+  --icon-name: icon-logo-alicloud-monochrome;
+  content: '';
+}
+%with-logo-alicloud-monochrome-mask {
+  --icon-name: icon-logo-alicloud-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/index.scss
new file mode 100644
index 0000000000..83889c28e8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../auth0-color/property-16';
+        @import '../auth0-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/keyframes.scss
new file mode 100644
index 0000000000..861a7637c5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-auth0-color {
+  50% {
+    background-image: var(--icon-auth0-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-auth0-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/placeholders.scss
new file mode 100644
index 0000000000..a19476cae1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-auth0-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-auth0-color-icon {
+  --icon-name: icon-logo-auth0-color;
+  content: '';
+}
+%with-logo-auth0-color-mask {
+  --icon-name: icon-logo-auth0-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/index.scss
new file mode 100644
index 0000000000..a8b4b9693f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../aws-color/property-16';
+        @import '../aws-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/keyframes.scss
new file mode 100644
index 0000000000..2b02dc0571
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-aws-color {
+  50% {
+    background-image: var(--icon-aws-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-aws-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/placeholders.scss
new file mode 100644
index 0000000000..fb47d449e5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-aws-color-icon {
+  --icon-name: icon-logo-aws-color;
+  content: '';
+}
+%with-logo-aws-color-mask {
+  --icon-name: icon-logo-aws-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/index.scss
new file mode 100644
index 0000000000..a8b4b9693f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../aws-color/property-16';
+        @import '../aws-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/keyframes.scss
new file mode 100644
index 0000000000..3c256e1c09
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-aws-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-aws-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-aws-color-24);
+    mask-image: var(--icon-aws-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-aws-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-aws-color-16);
+    mask-image: var(--icon-aws-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/placeholders.scss
new file mode 100644
index 0000000000..4bddc7ba4a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-aws-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-aws-monochrome-icon {
+  --icon-name: icon-logo-aws-monochrome;
+  content: '';
+}
+%with-logo-aws-monochrome-mask {
+  --icon-name: icon-logo-aws-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/index.scss
new file mode 100644
index 0000000000..a37795b7ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../azure-color/property-16';
+        @import '../azure-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/keyframes.scss
new file mode 100644
index 0000000000..7c29a9843a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-azure-color {
+  50% {
+    background-image: var(--icon-azure-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-azure-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/placeholders.scss
new file mode 100644
index 0000000000..08f47b36aa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-azure-color-icon {
+  --icon-name: icon-logo-azure-color;
+  content: '';
+}
+%with-logo-azure-color-mask {
+  --icon-name: icon-logo-azure-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/index.scss
new file mode 100644
index 0000000000..f681224d99
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../azure-devops-color/property-16';
+        @import '../azure-devops-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/keyframes.scss
new file mode 100644
index 0000000000..45c03c63c9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-azure-dev-ops-color {
+  50% {
+    background-image: var(--icon-azure-devops-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-azure-devops-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/placeholders.scss
new file mode 100644
index 0000000000..9181063677
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-azure-dev-ops-color-icon {
+  --icon-name: icon-logo-azure-dev-ops-color;
+  content: '';
+}
+%with-logo-azure-dev-ops-color-mask {
+  --icon-name: icon-logo-azure-dev-ops-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/index.scss
new file mode 100644
index 0000000000..f681224d99
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../azure-devops-color/property-16';
+        @import '../azure-devops-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/keyframes.scss
new file mode 100644
index 0000000000..e03f0370d7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-azure-dev-ops-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-azure-dev-ops-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-azure-devops-color-24);
+    mask-image: var(--icon-azure-devops-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-azure-dev-ops-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-azure-devops-color-16);
+    mask-image: var(--icon-azure-devops-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/placeholders.scss
new file mode 100644
index 0000000000..35bcd51886
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-dev-ops-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-azure-dev-ops-monochrome-icon {
+  --icon-name: icon-logo-azure-dev-ops-monochrome;
+  content: '';
+}
+%with-logo-azure-dev-ops-monochrome-mask {
+  --icon-name: icon-logo-azure-dev-ops-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/index.scss
new file mode 100644
index 0000000000..a37795b7ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../azure-color/property-16';
+        @import '../azure-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/keyframes.scss
new file mode 100644
index 0000000000..607d204e88
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-azure-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-azure-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-azure-color-24);
+    mask-image: var(--icon-azure-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-azure-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-azure-color-16);
+    mask-image: var(--icon-azure-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/placeholders.scss
new file mode 100644
index 0000000000..bd75781f37
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-azure-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-azure-monochrome-icon {
+  --icon-name: icon-logo-azure-monochrome;
+  content: '';
+}
+%with-logo-azure-monochrome-mask {
+  --icon-name: icon-logo-azure-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/index.scss
new file mode 100644
index 0000000000..1a1c620f33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../bitbucket-color/property-16';
+        @import '../bitbucket-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/keyframes.scss
new file mode 100644
index 0000000000..644179c0f3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-bitbucket-color {
+  50% {
+    background-image: var(--icon-bitbucket-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-bitbucket-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/placeholders.scss
new file mode 100644
index 0000000000..756b9e3ddd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-bitbucket-color-icon {
+  --icon-name: icon-logo-bitbucket-color;
+  content: '';
+}
+%with-logo-bitbucket-color-mask {
+  --icon-name: icon-logo-bitbucket-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/index.scss
new file mode 100644
index 0000000000..1a1c620f33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../bitbucket-color/property-16';
+        @import '../bitbucket-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/keyframes.scss
new file mode 100644
index 0000000000..0a2b6ec2f3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-bitbucket-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-bitbucket-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-bitbucket-color-24);
+    mask-image: var(--icon-bitbucket-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-bitbucket-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-bitbucket-color-16);
+    mask-image: var(--icon-bitbucket-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/placeholders.scss
new file mode 100644
index 0000000000..dfb98e7a66
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-bitbucket-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-bitbucket-monochrome-icon {
+  --icon-name: icon-logo-bitbucket-monochrome;
+  content: '';
+}
+%with-logo-bitbucket-monochrome-mask {
+  --icon-name: icon-logo-bitbucket-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/index.scss
new file mode 100644
index 0000000000..a38fca4e33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../consul-color/property-16';
+        @import '../consul-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/keyframes.scss
new file mode 100644
index 0000000000..847daa082f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-consul-color {
+  50% {
+    background-image: var(--icon-consul-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-consul-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/placeholders.scss
new file mode 100644
index 0000000000..3aee527755
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-consul-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-consul-color-icon {
+  --icon-name: icon-logo-consul-color;
+  content: '';
+}
+%with-logo-consul-color-mask {
+  --icon-name: icon-logo-consul-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/keyframes.scss
new file mode 100644
index 0000000000..f7a87a1924
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-ember-circle-color {
+  50% {
+    background-image: var(--icon-logo-ember-circle-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-logo-ember-circle-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/placeholders.scss
new file mode 100644
index 0000000000..0578c82f25
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-ember-circle-color-icon {
+  --icon-name: icon-logo-ember-circle-color;
+  content: '';
+}
+%with-logo-ember-circle-color-mask {
+  --icon-name: icon-logo-ember-circle-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/property-16.scss
new file mode 100644
index 0000000000..8f80e3d346
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-ember-circle-color-16: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M64 0c35.346 0 64 28.654 64 64 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64C0 28.654 28.654 0 64 0z" fill="%23E05C43" fill-rule="nonzero"/><path d="M65.265 24.128c8.246-.163 14.073 2.073 19.087 9.19 10.934 27.109-28.147 41.1-29.714 41.65l-.049.016s-1.18 7.363 10.028 7.08c13.793 0 28.294-10.691 33.81-15.21a3.293 3.293 0 0 1 4.468.265l4.13 4.29a3.291 3.291 0 0 1 .085 4.491c-3.59 3.997-12.014 12.203-24.696 17.504 0 0-21.16 9.798-35.42.52-8.503-5.53-10.842-12.151-11.793-19.038.005 0-10.324-.524-16.957-3.114-6.635-2.592.049-10.411.049-10.411s2.04-3.233 5.92 0c3.883 3.228 11.13 1.772 11.13 1.772.646-5.099 1.72-11.828 4.884-18.93 6.632-14.885 16.789-19.915 25.038-20.075zm4.853 14.915c-4.369-4.21-16.984 4.202-17.471 23.45 0 0 3.724 1.134 11.97-4.53 8.25-5.661 9.87-14.718 5.501-18.92z" fill="%23FFF"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/property-24.scss
new file mode 100644
index 0000000000..cecad776f1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-ember-circle-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-ember-circle-color-24: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M64 0c35.346 0 64 28.654 64 64 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64C0 28.654 28.654 0 64 0z" fill="%23E05C43" fill-rule="nonzero"/><path d="M65.265 24.128c8.246-.163 14.073 2.073 19.087 9.19 10.934 27.109-28.147 41.1-29.714 41.65l-.049.016s-1.18 7.363 10.028 7.08c13.793 0 28.294-10.691 33.81-15.21a3.293 3.293 0 0 1 4.468.265l4.13 4.29a3.291 3.291 0 0 1 .085 4.491c-3.59 3.997-12.014 12.203-24.696 17.504 0 0-21.16 9.798-35.42.52-8.503-5.53-10.842-12.151-11.793-19.038.005 0-10.324-.524-16.957-3.114-6.635-2.592.049-10.411.049-10.411s2.04-3.233 5.92 0c3.883 3.228 11.13 1.772 11.13 1.772.646-5.099 1.72-11.828 4.884-18.93 6.632-14.885 16.789-19.915 25.038-20.075zm4.853 14.915c-4.369-4.21-16.984 4.202-17.471 23.45 0 0 3.724 1.134 11.97-4.53 8.25-5.661 9.87-14.718 5.501-18.92z" fill="%23FFF"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/index.scss
new file mode 100644
index 0000000000..56a5eef90a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../gcp-color/property-16';
+        @import '../gcp-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/keyframes.scss
new file mode 100644
index 0000000000..544ece20d9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-gcp-color {
+  50% {
+    background-image: var(--icon-gcp-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-gcp-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/placeholders.scss
new file mode 100644
index 0000000000..ad70a65d4d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-gcp-color-icon {
+  --icon-name: icon-logo-gcp-color;
+  content: '';
+}
+%with-logo-gcp-color-mask {
+  --icon-name: icon-logo-gcp-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/index.scss
new file mode 100644
index 0000000000..56a5eef90a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../gcp-color/property-16';
+        @import '../gcp-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/keyframes.scss
new file mode 100644
index 0000000000..037889fe52
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-gcp-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-gcp-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-gcp-color-24);
+    mask-image: var(--icon-gcp-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-gcp-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-gcp-color-16);
+    mask-image: var(--icon-gcp-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/placeholders.scss
new file mode 100644
index 0000000000..c2f6c39fba
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gcp-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-gcp-monochrome-icon {
+  --icon-name: icon-logo-gcp-monochrome;
+  content: '';
+}
+%with-logo-gcp-monochrome-mask {
+  --icon-name: icon-logo-gcp-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/index.scss
new file mode 100644
index 0000000000..cbdee8fe7e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../github-color/property-16';
+        @import '../github-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/keyframes.scss
new file mode 100644
index 0000000000..5166803665
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-github-color {
+  50% {
+    background-image: var(--icon-github-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-github-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/placeholders.scss
new file mode 100644
index 0000000000..7dd9d46c79
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-github-color-icon {
+  --icon-name: icon-logo-github-color;
+  content: '';
+}
+%with-logo-github-color-mask {
+  --icon-name: icon-logo-github-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/index.scss
new file mode 100644
index 0000000000..cbdee8fe7e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../github-color/property-16';
+        @import '../github-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/keyframes.scss
new file mode 100644
index 0000000000..171ac802e5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-github-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-github-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-github-color-24);
+    mask-image: var(--icon-github-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-github-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-github-color-16);
+    mask-image: var(--icon-github-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/placeholders.scss
new file mode 100644
index 0000000000..d0e0df0f17
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-github-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-github-monochrome-icon {
+  --icon-name: icon-logo-github-monochrome;
+  content: '';
+}
+%with-logo-github-monochrome-mask {
+  --icon-name: icon-logo-github-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/index.scss
new file mode 100644
index 0000000000..9f36415d9d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../gitlab-color/property-16';
+        @import '../gitlab-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/keyframes.scss
new file mode 100644
index 0000000000..c7be8596c2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-gitlab-color {
+  50% {
+    background-image: var(--icon-gitlab-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-gitlab-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/placeholders.scss
new file mode 100644
index 0000000000..9f9e3b2013
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-gitlab-color-icon {
+  --icon-name: icon-logo-gitlab-color;
+  content: '';
+}
+%with-logo-gitlab-color-mask {
+  --icon-name: icon-logo-gitlab-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/index.scss
new file mode 100644
index 0000000000..9f36415d9d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../gitlab-color/property-16';
+        @import '../gitlab-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/keyframes.scss
new file mode 100644
index 0000000000..3f4161a006
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-gitlab-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-gitlab-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-gitlab-color-24);
+    mask-image: var(--icon-gitlab-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-gitlab-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-gitlab-color-16);
+    mask-image: var(--icon-gitlab-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/placeholders.scss
new file mode 100644
index 0000000000..0a36677ac1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-gitlab-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-gitlab-monochrome-icon {
+  --icon-name: icon-logo-gitlab-monochrome;
+  content: '';
+}
+%with-logo-gitlab-monochrome-mask {
+  --icon-name: icon-logo-gitlab-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/keyframes.scss
new file mode 100644
index 0000000000..21eee3972f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-glimmer-color {
+  50% {
+    background-image: var(--icon-logo-glimmer-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-logo-glimmer-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/placeholders.scss
new file mode 100644
index 0000000000..84488f32ba
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-glimmer-color-icon {
+  --icon-name: icon-logo-glimmer-color;
+  content: '';
+}
+%with-logo-glimmer-color-mask {
+  --icon-name: icon-logo-glimmer-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/property-16.scss
new file mode 100644
index 0000000000..ad7e9bc977
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-glimmer-color-16: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M256 128c0 70.692-57.308 128-128 128C57.307 256 0 198.692 0 128 0 57.308 57.307 0 128 0c70.692 0 128 57.308 128 128" fill="%23F8835A"/><path d="M78.63 140.37a11.39 11.39 0 0 1-7.951-3.222c-4.533-4.392-4.648-11.627-.256-16.16l77.144-79.619c4.39-4.533 11.626-4.648 16.16-.256 4.532 4.392 4.647 11.628.255 16.161l-77.143 79.62a11.397 11.397 0 0 1-8.21 3.475zm50.31 3.036a11.356 11.356 0 0 1-7.926-3.21c-4.52-4.38-4.633-11.592-.254-16.111L181.687 61.2c4.379-4.52 11.59-4.632 16.11-.254s4.634 11.59.256 16.11l-60.928 62.884a11.363 11.363 0 0 1-8.184 3.465zm-24.69 79.286a11.383 11.383 0 0 1-7.951-3.221c-4.533-4.391-4.648-11.627-.256-16.16L202.61 93.322c4.39-4.532 11.627-4.647 16.16-.255 4.534 4.392 4.648 11.627.255 16.161L112.459 219.216a11.397 11.397 0 0 1-8.21 3.476zm-33.44-19.44c-2.865 0-5.73-1.07-7.95-3.222-4.534-4.392-4.649-11.628-.257-16.16l29.053-29.986c4.393-4.533 11.628-4.648 16.161-.256 4.533 4.393 4.647 11.628.255 16.161L79.02 199.775a11.397 11.397 0 0 1-8.209 3.476zm-23.179-86.764a11.39 11.39 0 0 1-7.952-3.221c-4.533-4.392-4.647-11.627-.255-16.16L68.477 67.12c4.393-4.533 11.628-4.647 16.161-.255 4.533 4.392 4.647 11.627.255 16.16L55.84 113.013a11.398 11.398 0 0 1-8.209 3.476zm149.433 65.295a11.39 11.39 0 0 1-7.95-3.221c-4.534-4.392-4.649-11.627-.257-16.16l13.754-14.195c4.391-4.532 11.627-4.65 16.16-.255 4.533 4.392 4.647 11.627.255 16.16l-13.753 14.195a11.397 11.397 0 0 1-8.209 3.476zm-26.78 28.338c0 6.312-5.117 11.428-11.43 11.428-6.31 0-11.428-5.116-11.428-11.428 0-6.312 5.118-11.429 11.429-11.429 6.312 0 11.429 5.117 11.429 11.43zM61.06 158.925c0 6.312-5.117 11.43-11.43 11.43-6.311 0-11.427-5.118-11.427-11.43 0-6.312 5.116-11.428 11.428-11.428 6.312 0 11.429 5.116 11.429 11.428zm54.284-112.142c0 6.312-5.117 11.428-11.428 11.428-6.312 0-11.429-5.116-11.429-11.428 0-6.312 5.117-11.43 11.429-11.43 6.311 0 11.428 5.118 11.428 11.43z" fill="%23FFF"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/property-24.scss
new file mode 100644
index 0000000000..5171c31065
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-glimmer-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-glimmer-color-24: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M256 128c0 70.692-57.308 128-128 128C57.307 256 0 198.692 0 128 0 57.308 57.307 0 128 0c70.692 0 128 57.308 128 128" fill="%23F8835A"/><path d="M78.63 140.37a11.39 11.39 0 0 1-7.951-3.222c-4.533-4.392-4.648-11.627-.256-16.16l77.144-79.619c4.39-4.533 11.626-4.648 16.16-.256 4.532 4.392 4.647 11.628.255 16.161l-77.143 79.62a11.397 11.397 0 0 1-8.21 3.475zm50.31 3.036a11.356 11.356 0 0 1-7.926-3.21c-4.52-4.38-4.633-11.592-.254-16.111L181.687 61.2c4.379-4.52 11.59-4.632 16.11-.254s4.634 11.59.256 16.11l-60.928 62.884a11.363 11.363 0 0 1-8.184 3.465zm-24.69 79.286a11.383 11.383 0 0 1-7.951-3.221c-4.533-4.391-4.648-11.627-.256-16.16L202.61 93.322c4.39-4.532 11.627-4.647 16.16-.255 4.534 4.392 4.648 11.627.255 16.161L112.459 219.216a11.397 11.397 0 0 1-8.21 3.476zm-33.44-19.44c-2.865 0-5.73-1.07-7.95-3.222-4.534-4.392-4.649-11.628-.257-16.16l29.053-29.986c4.393-4.533 11.628-4.648 16.161-.256 4.533 4.393 4.647 11.628.255 16.161L79.02 199.775a11.397 11.397 0 0 1-8.209 3.476zm-23.179-86.764a11.39 11.39 0 0 1-7.952-3.221c-4.533-4.392-4.647-11.627-.255-16.16L68.477 67.12c4.393-4.533 11.628-4.647 16.161-.255 4.533 4.392 4.647 11.627.255 16.16L55.84 113.013a11.398 11.398 0 0 1-8.209 3.476zm149.433 65.295a11.39 11.39 0 0 1-7.95-3.221c-4.534-4.392-4.649-11.627-.257-16.16l13.754-14.195c4.391-4.532 11.627-4.65 16.16-.255 4.533 4.392 4.647 11.627.255 16.16l-13.753 14.195a11.397 11.397 0 0 1-8.209 3.476zm-26.78 28.338c0 6.312-5.117 11.428-11.43 11.428-6.31 0-11.428-5.116-11.428-11.428 0-6.312 5.118-11.429 11.429-11.429 6.312 0 11.429 5.117 11.429 11.43zM61.06 158.925c0 6.312-5.117 11.43-11.43 11.43-6.311 0-11.427-5.118-11.427-11.43 0-6.312 5.116-11.428 11.428-11.428 6.312 0 11.429 5.116 11.429 11.428zm54.284-112.142c0 6.312-5.117 11.428-11.428 11.428-6.312 0-11.429-5.116-11.429-11.428 0-6.312 5.117-11.43 11.429-11.43 6.311 0 11.428 5.118 11.428 11.43z" fill="%23FFF"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/index.scss
new file mode 100644
index 0000000000..2567178ad9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../google-color/property-16';
+        @import '../google-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/keyframes.scss
new file mode 100644
index 0000000000..5f28ba565f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-google-color {
+  50% {
+    background-image: var(--icon-google-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-google-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/placeholders.scss
new file mode 100644
index 0000000000..5d532cb72b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-google-color-icon {
+  --icon-name: icon-logo-google-color;
+  content: '';
+}
+%with-logo-google-color-mask {
+  --icon-name: icon-logo-google-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/index.scss
new file mode 100644
index 0000000000..2567178ad9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../google-color/property-16';
+        @import '../google-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/keyframes.scss
new file mode 100644
index 0000000000..a317a90e5e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-google-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-google-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-google-color-24);
+    mask-image: var(--icon-google-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-google-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-google-color-16);
+    mask-image: var(--icon-google-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/placeholders.scss
new file mode 100644
index 0000000000..f5f2398f8c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-google-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-google-monochrome-icon {
+  --icon-name: icon-logo-google-monochrome;
+  content: '';
+}
+%with-logo-google-monochrome-mask {
+  --icon-name: icon-logo-google-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/keyframes.scss
new file mode 100644
index 0000000000..557366d9d5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-hashicorp-color {
+  50% {
+    background-image: var(--icon-logo-hashicorp-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-logo-hashicorp-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/placeholders.scss
new file mode 100644
index 0000000000..11917041c6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-hashicorp-color-icon {
+  --icon-name: icon-logo-hashicorp-color;
+  content: '';
+}
+%with-logo-hashicorp-color-mask {
+  --icon-name: icon-logo-hashicorp-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/property-16.scss
new file mode 100644
index 0000000000..d8e37060f8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-hashicorp-color-16: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107 114" xmlns="http://www.w3.org/2000/svg"><path d="M44.54 0L0 25.69V87.41l16.73 9.66V35.35L44.54 19.3z"/><path d="M62.32 0v49.15H44.54V30.81L27.8 40.47v62.97l16.74 9.68V64.11h17.78v18.22l16.73-9.66V9.66z"/><path d="M62.32 113.14l44.54-25.69V25.73l-16.74-9.66v61.72l-27.8 16.05z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/property-24.scss
new file mode 100644
index 0000000000..1e6f25ae4a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-hashicorp-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-hashicorp-color-24: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107 114" xmlns="http://www.w3.org/2000/svg"><path d="M44.54 0L0 25.69V87.41l16.73 9.66V35.35L44.54 19.3z"/><path d="M62.32 0v49.15H44.54V30.81L27.8 40.47v62.97l16.74 9.68V64.11h17.78v18.22l16.73-9.66V9.66z"/><path d="M62.32 113.14l44.54-25.69V25.73l-16.74-9.66v61.72l-27.8 16.05z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/keyframes.scss
new file mode 100644
index 0000000000..a7898bd1ce
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-jwt-color {
+  50% {
+    background-image: var(--icon-logo-jwt-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-logo-jwt-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/placeholders.scss
new file mode 100644
index 0000000000..28f5bf34fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-jwt-color-icon {
+  --icon-name: icon-logo-jwt-color;
+  content: '';
+}
+%with-logo-jwt-color-mask {
+  --icon-name: icon-logo-jwt-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/property-16.scss
new file mode 100644
index 0000000000..c63e11681d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-jwt-color-16: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.863 3.805V.667h-1.75v3.138l.875 1.202.875-1.202zM5.113 9.195v3.138h1.75V9.195l-.875-1.202-.875 1.202z" fill="%23fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.863 9.195l1.844 2.543L10.13 10.7 8.275 8.168l-1.412-.466v1.493zM5.113 3.805L3.27 1.262 1.847 2.3l1.855 2.532 1.411.466V3.805z" fill="%2300F2E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.702 4.832L.715 3.863.167 5.532l2.986.968 1.424-.455-.875-1.213zM7.4 6.955l.875 1.213 2.987.969.548-1.669L8.823 6.5 7.4 6.955z" fill="%2300B9F1"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.823 6.5l2.987-.968-.548-1.669-2.987.969L7.4 6.045l1.423.455zM3.153 6.5l-2.986.968.548 1.669 2.987-.969.875-1.213L3.153 6.5z" fill="%23D63AFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.702 8.168L1.847 10.7l1.423 1.038 1.843-2.543V7.702l-1.411.466zM8.275 4.832L10.13 2.3 8.707 1.262 6.863 3.805v1.493l1.412-.466z" fill="%23FB015B"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/property-24.scss
new file mode 100644
index 0000000000..1ad55c65f7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-jwt-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-jwt-color-24: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.863 3.805V.667h-1.75v3.138l.875 1.202.875-1.202zM5.113 9.195v3.138h1.75V9.195l-.875-1.202-.875 1.202z" fill="%23fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.863 9.195l1.844 2.543L10.13 10.7 8.275 8.168l-1.412-.466v1.493zM5.113 3.805L3.27 1.262 1.847 2.3l1.855 2.532 1.411.466V3.805z" fill="%2300F2E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.702 4.832L.715 3.863.167 5.532l2.986.968 1.424-.455-.875-1.213zM7.4 6.955l.875 1.213 2.987.969.548-1.669L8.823 6.5 7.4 6.955z" fill="%2300B9F1"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.823 6.5l2.987-.968-.548-1.669-2.987.969L7.4 6.045l1.423.455zM3.153 6.5l-2.986.968.548 1.669 2.987-.969.875-1.213L3.153 6.5z" fill="%23D63AFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.702 8.168L1.847 10.7l1.423 1.038 1.843-2.543V7.702l-1.411.466zM8.275 4.832L10.13 2.3 8.707 1.262 6.863 3.805v1.493l1.412-.466z" fill="%23FB015B"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/index.scss
new file mode 100644
index 0000000000..8e0a44695e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../kubernetes-color/property-16';
+        @import '../kubernetes-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/keyframes.scss
new file mode 100644
index 0000000000..85a79a5731
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-kubernetes-color {
+  50% {
+    background-image: var(--icon-kubernetes-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-kubernetes-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/placeholders.scss
new file mode 100644
index 0000000000..2b4d2369f5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-kubernetes-color-icon {
+  --icon-name: icon-logo-kubernetes-color;
+  content: '';
+}
+%with-logo-kubernetes-color-mask {
+  --icon-name: icon-logo-kubernetes-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/index.scss
new file mode 100644
index 0000000000..8e0a44695e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../kubernetes-color/property-16';
+        @import '../kubernetes-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/keyframes.scss
new file mode 100644
index 0000000000..9a408e4b4d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-kubernetes-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-kubernetes-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-kubernetes-color-24);
+    mask-image: var(--icon-kubernetes-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-kubernetes-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-kubernetes-color-16);
+    mask-image: var(--icon-kubernetes-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/placeholders.scss
new file mode 100644
index 0000000000..56ad05f63d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-kubernetes-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-kubernetes-monochrome-icon {
+  --icon-name: icon-logo-kubernetes-monochrome;
+  content: '';
+}
+%with-logo-kubernetes-monochrome-mask {
+  --icon-name: icon-logo-kubernetes-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/index.scss
new file mode 100644
index 0000000000..70779bb0b2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../microsoft-color/property-16';
+        @import '../microsoft-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/keyframes.scss
new file mode 100644
index 0000000000..fdb22e4cc0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-microsoft-color {
+  50% {
+    background-image: var(--icon-microsoft-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-microsoft-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/placeholders.scss
new file mode 100644
index 0000000000..4b5b0cb363
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-microsoft-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-microsoft-color-icon {
+  --icon-name: icon-logo-microsoft-color;
+  content: '';
+}
+%with-logo-microsoft-color-mask {
+  --icon-name: icon-logo-microsoft-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/index.scss
new file mode 100644
index 0000000000..fd3f9ca136
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../nomad-color/property-16';
+        @import '../nomad-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/keyframes.scss
new file mode 100644
index 0000000000..f33a5a219d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-nomad-color {
+  50% {
+    background-image: var(--icon-nomad-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-nomad-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/placeholders.scss
new file mode 100644
index 0000000000..a9766f756f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-nomad-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-nomad-color-icon {
+  --icon-name: icon-logo-nomad-color;
+  content: '';
+}
+%with-logo-nomad-color-mask {
+  --icon-name: icon-logo-nomad-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/keyframes.scss
new file mode 100644
index 0000000000..32067f9d36
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-oidc-color {
+  50% {
+    background-image: var(--icon-logo-oidc-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-logo-oidc-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/placeholders.scss
new file mode 100644
index 0000000000..34e1755a1b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-oidc-color-icon {
+  --icon-name: icon-logo-oidc-color;
+  content: '';
+}
+%with-logo-oidc-color-mask {
+  --icon-name: icon-logo-oidc-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/property-16.scss
new file mode 100644
index 0000000000..5ff661bcd3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-oidc-color-16: url('data:image/svg+xml;charset=UTF-8,<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.833 8.375l-.291-2.625-.846.554c-.788-.496-1.78-.846-2.888-1.02 0 0-.554-.117-1.283-.117-.73 0-1.4.087-1.4.087-2.83.35-4.958 1.954-4.958 3.88 0 1.983 2.187 3.616 5.541 3.908v-1.138c-2.304-.32-3.762-1.4-3.762-2.77 0-1.284 1.341-2.363 3.179-2.713 0 0 1.43-.321 2.683.058.613.146 1.167.35 1.634.642l-1.109.67 3.5.584z" fill="%239E9E9E"/><path d="M6.708 2.833v10.209l1.75-.875V1.958l-1.75.875z" fill="%23000"/><path d="M6.708 2.833v10.209l1.75-.875V1.958l-1.75.875z" fill="%23FF9800"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/property-24.scss
new file mode 100644
index 0000000000..7f21aa0ba6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oidc-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-oidc-color-24: url('data:image/svg+xml;charset=UTF-8,<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.833 8.375l-.291-2.625-.846.554c-.788-.496-1.78-.846-2.888-1.02 0 0-.554-.117-1.283-.117-.73 0-1.4.087-1.4.087-2.83.35-4.958 1.954-4.958 3.88 0 1.983 2.187 3.616 5.541 3.908v-1.138c-2.304-.32-3.762-1.4-3.762-2.77 0-1.284 1.341-2.363 3.179-2.713 0 0 1.43-.321 2.683.058.613.146 1.167.35 1.634.642l-1.109.67 3.5.584z" fill="%239E9E9E"/><path d="M6.708 2.833v10.209l1.75-.875V1.958l-1.75.875z" fill="%23000"/><path d="M6.708 2.833v10.209l1.75-.875V1.958l-1.75.875z" fill="%23FF9800"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/index.scss
new file mode 100644
index 0000000000..57209848c2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../okta-color/property-16';
+        @import '../okta-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/keyframes.scss
new file mode 100644
index 0000000000..40cbc8d1fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-okta-color {
+  50% {
+    background-image: var(--icon-okta-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-okta-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/placeholders.scss
new file mode 100644
index 0000000000..c472145b20
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-okta-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-okta-color-icon {
+  --icon-name: icon-logo-okta-color;
+  content: '';
+}
+%with-logo-okta-color-mask {
+  --icon-name: icon-logo-okta-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/index.scss
new file mode 100644
index 0000000000..8cb6b7b062
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../oracle-color/property-16';
+        @import '../oracle-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/keyframes.scss
new file mode 100644
index 0000000000..8378deb0b1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-oracle-color {
+  50% {
+    background-image: var(--icon-oracle-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-oracle-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/placeholders.scss
new file mode 100644
index 0000000000..b326cf5a55
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-oracle-color-icon {
+  --icon-name: icon-logo-oracle-color;
+  content: '';
+}
+%with-logo-oracle-color-mask {
+  --icon-name: icon-logo-oracle-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/index.scss
new file mode 100644
index 0000000000..8cb6b7b062
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../oracle-color/property-16';
+        @import '../oracle-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/keyframes.scss
new file mode 100644
index 0000000000..1674dc0583
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-oracle-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-oracle-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-oracle-color-24);
+    mask-image: var(--icon-oracle-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-oracle-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-oracle-color-16);
+    mask-image: var(--icon-oracle-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/placeholders.scss
new file mode 100644
index 0000000000..ae6394505d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-oracle-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-oracle-monochrome-icon {
+  --icon-name: icon-logo-oracle-monochrome;
+  content: '';
+}
+%with-logo-oracle-monochrome-mask {
+  --icon-name: icon-logo-oracle-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/index.scss
new file mode 100644
index 0000000000..5ed6b58631
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../slack-color/property-16';
+        @import '../slack-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/keyframes.scss
new file mode 100644
index 0000000000..9d625fecae
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-slack-color {
+  50% {
+    background-image: var(--icon-slack-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-slack-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/placeholders.scss
new file mode 100644
index 0000000000..b191cb3a57
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-slack-color-icon {
+  --icon-name: icon-logo-slack-color;
+  content: '';
+}
+%with-logo-slack-color-mask {
+  --icon-name: icon-logo-slack-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/index.scss
new file mode 100644
index 0000000000..5ed6b58631
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../slack-color/property-16';
+        @import '../slack-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/keyframes.scss
new file mode 100644
index 0000000000..dda65e173b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-slack-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-slack-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-slack-color-24);
+    mask-image: var(--icon-slack-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-slack-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-slack-color-16);
+    mask-image: var(--icon-slack-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/placeholders.scss
new file mode 100644
index 0000000000..a9dfbc2f82
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-slack-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-slack-monochrome-icon {
+  --icon-name: icon-logo-slack-monochrome;
+  content: '';
+}
+%with-logo-slack-monochrome-mask {
+  --icon-name: icon-logo-slack-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/index.scss
new file mode 100644
index 0000000000..c9683ccebe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../terraform-color/property-16';
+        @import '../terraform-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/keyframes.scss
new file mode 100644
index 0000000000..570d755b6c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-terraform-color {
+  50% {
+    background-image: var(--icon-terraform-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-terraform-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/placeholders.scss
new file mode 100644
index 0000000000..45c088b817
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-terraform-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-terraform-color-icon {
+  --icon-name: icon-logo-terraform-color;
+  content: '';
+}
+%with-logo-terraform-color-mask {
+  --icon-name: icon-logo-terraform-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/keyframes.scss
new file mode 100644
index 0000000000..5db1346ca8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-vault-color {
+  50% {
+    background-image: var(--icon-logo-vault-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-logo-vault-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/placeholders.scss
new file mode 100644
index 0000000000..9be269b4e8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-vault-color-icon {
+  --icon-name: icon-logo-vault-color;
+  content: '';
+}
+%with-logo-vault-color-mask {
+  --icon-name: icon-logo-vault-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-16.scss
new file mode 100644
index 0000000000..34e0849f04
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-vault-color-16: url('data:image/svg+xml;charset=UTF-8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L14.9453 30L30 0H0ZM16.724 6.02083H18.4635V7.76042H16.724V6.02083ZM11.5208 12.9766H13.2604V11.237H11.5208V12.9766ZM13.2604 10.3724H11.5208V8.6302H13.2604V10.3724ZM11.5208 7.76823H13.2604V6.02083H11.5208V7.76823ZM15.8646 15.5937H14.1302V13.8463H15.8698L15.8646 15.5937ZM14.1302 12.9896H15.8646L15.8698 11.237H14.1302V12.9896ZM15.8646 10.3854H14.1302V8.6302H15.8698L15.8646 10.3854ZM14.1302 7.78125H15.8646L15.8698 6.02083H14.1302V7.78125ZM16.7187 8.65105H18.4635V10.3906H16.7239L16.7187 8.65105ZM16.7344 11.237V13L18.4896 12.9766V11.237H16.7344Z" fill="%23000"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-24.scss
new file mode 100644
index 0000000000..c191e6b951
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vault-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-logo-vault-color-24: url('data:image/svg+xml;charset=UTF-8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L14.9453 30L30 0H0ZM16.724 6.02083H18.4635V7.76042H16.724V6.02083ZM11.5208 12.9766H13.2604V11.237H11.5208V12.9766ZM13.2604 10.3724H11.5208V8.6302H13.2604V10.3724ZM11.5208 7.76823H13.2604V6.02083H11.5208V7.76823ZM15.8646 15.5937H14.1302V13.8463H15.8698L15.8646 15.5937ZM14.1302 12.9896H15.8646L15.8698 11.237H14.1302V12.9896ZM15.8646 10.3854H14.1302V8.6302H15.8698L15.8646 10.3854ZM14.1302 7.78125H15.8646L15.8698 6.02083H14.1302V7.78125ZM16.7187 8.65105H18.4635V10.3906H16.7239L16.7187 8.65105ZM16.7344 11.237V13L18.4896 12.9766V11.237H16.7344Z" fill="%23000"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/index.scss
new file mode 100644
index 0000000000..00f6f1d949
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../vmware-color/property-16';
+        @import '../vmware-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/keyframes.scss
new file mode 100644
index 0000000000..3b8e93ed8f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-logo-vmware-color {
+  50% {
+    background-image: var(--icon-vmware-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-vmware-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/placeholders.scss
new file mode 100644
index 0000000000..5f4f646677
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-vmware-color-icon {
+  --icon-name: icon-logo-vmware-color;
+  content: '';
+}
+%with-logo-vmware-color-mask {
+  --icon-name: icon-logo-vmware-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/index.scss
new file mode 100644
index 0000000000..00f6f1d949
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../vmware-color/property-16';
+        @import '../vmware-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/keyframes.scss
new file mode 100644
index 0000000000..0a8b8626fe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-logo-vmware-monochrome {
+  50% {
+
+    background-color: var(--icon-color, var(--color-logo-vmware-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-vmware-color-24);
+    mask-image: var(--icon-vmware-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-logo-vmware-monochrome-500, currentColor));
+    -webkit-mask-image: var(--icon-vmware-color-16);
+    mask-image: var(--icon-vmware-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/placeholders.scss
new file mode 100644
index 0000000000..b563d41b02
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/logo-vmware-monochrome/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-logo-vmware-monochrome-icon {
+  --icon-name: icon-logo-vmware-monochrome;
+  content: '';
+}
+%with-logo-vmware-monochrome-mask {
+  --icon-name: icon-logo-vmware-monochrome;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/keyframes.scss
new file mode 100644
index 0000000000..ad0ad3f5a9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-mail-open {
+  50% {
+
+    background-color: var(--icon-color, var(--color-mail-open-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-open-24);
+    mask-image: var(--icon-mail-open-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-mail-open-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-open-16);
+    mask-image: var(--icon-mail-open-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/placeholders.scss
new file mode 100644
index 0000000000..6746b12533
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-mail-open-icon {
+  --icon-name: icon-mail-open;
+  content: '';
+}
+%with-mail-open-mask {
+  --icon-name: icon-mail-open;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/property-16.scss
new file mode 100644
index 0000000000..98aa4b3427
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mail-open-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.803.254a2.25 2.25 0 00-1.606 0L1.447 2.45A2.25 2.25 0 000 4.552v8.198A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75V4.552a2.25 2.25 0 00-1.447-2.102L8.803.254zm-1.07 1.401a.75.75 0 01.535 0l5.75 2.196a.75.75 0 01.302.213L8 8.578 1.68 4.064a.749.749 0 01.302-.213l5.75-2.196zM1.5 5.78v6.6L5.116 8.36 1.5 5.78zM2.509 13.5h10.982L9.656 9.239l-1.22.871a.75.75 0 01-.872 0l-1.22-.871L2.509 13.5zM14.5 12.379v-6.6l-3.616 2.583 3.616 4.017z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/property-24.scss
new file mode 100644
index 0000000000..bfade807f4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mail-open/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mail-open-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13 .335a2.75 2.75 0 00-2 0l-8.25 3.22A2.75 2.75 0 001 6.116V18.25A2.75 2.75 0 003.75 21h16.5A2.75 2.75 0 0023 18.25V6.116a2.75 2.75 0 00-1.75-2.561L13 .335zm-1.454 1.397a1.25 1.25 0 01.908 0l8.25 3.22c.48.187.796.65.796 1.164v.134a.746.746 0 00-.4.116l-9.11 5.753L2.5 6.425v-.309c0-.514.316-.977.796-1.164l8.25-3.22zM2.5 8.175v8.264l5.165-5.165-5.165-3.1zm.031 10.354c.127.556.625.971 1.219.971h16.5a1.25 1.25 0 001.219-.97l-6.51-6.511-2.559 1.615a.75.75 0 01-.786.01l-2.623-1.575-6.46 6.46zM21.5 16.44V7.887l-5.242 3.31L21.5 16.44z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mail/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mail/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mail/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mail/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mail/keyframes.scss
new file mode 100644
index 0000000000..9acad215ff
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mail/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-mail {
+  50% {
+
+    background-color: var(--icon-color, var(--color-mail-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-24);
+    mask-image: var(--icon-mail-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-mail-500, currentColor));
+    -webkit-mask-image: var(--icon-mail-16);
+    mask-image: var(--icon-mail-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mail/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mail/placeholders.scss
new file mode 100644
index 0000000000..ce514f6436
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mail/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-mail-icon {
+  --icon-name: icon-mail;
+  content: '';
+}
+%with-mail-mask {
+  --icon-name: icon-mail;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mail/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mail/property-16.scss
new file mode 100644
index 0000000000..df9eea486b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mail/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mail-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h11.5A2.25 2.25 0 0116 3.25v9.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-9.5zm2.25-.75a.75.75 0 00-.748.69L8 8.297l6.498-5.105a.75.75 0 00-.748-.691H2.25zm-.75 9.885V5.097l3.865 3.037L1.5 12.385zM2.514 13.5h10.972L9.452 9.063l-.989.777a.75.75 0 01-.926 0l-.99-.777L2.515 13.5zm8.12-5.366l3.866 4.251V5.097l-3.865 3.037z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mail/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mail/property-24.scss
new file mode 100644
index 0000000000..693e19fda5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mail/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mail-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 5.75A2.75 2.75 0 013.75 3h16.5A2.75 2.75 0 0123 5.75v12.5A2.75 2.75 0 0120.25 21H3.75A2.75 2.75 0 011 18.25V5.75zM3.75 4.5a1.25 1.25 0 00-1.057.582L12 12.062l9.307-6.98A1.25 1.25 0 0020.25 4.5H3.75zM2.5 16.44V6.812l5.501 4.125L2.5 16.44zm.031 2.09c.127.555.625.97 1.219.97h16.5a1.25 1.25 0 001.219-.97l-6.682-6.683L12.45 13.6a.75.75 0 01-.9 0l-2.337-1.752-6.682 6.681zM16 10.937L21.5 16.44V6.813l-5.501 4.125z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/keyframes.scss
new file mode 100644
index 0000000000..68a77ea755
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-mainframe {
+  50% {
+
+    background-color: var(--icon-color, var(--color-mainframe-500, currentColor));
+    -webkit-mask-image: var(--icon-mainframe-24);
+    mask-image: var(--icon-mainframe-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-mainframe-500, currentColor));
+    -webkit-mask-image: var(--icon-mainframe-16);
+    mask-image: var(--icon-mainframe-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/placeholders.scss
new file mode 100644
index 0000000000..a5c7a55489
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-mainframe-icon {
+  --icon-name: icon-mainframe;
+  content: '';
+}
+%with-mainframe-mask {
+  --icon-name: icon-mainframe;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/property-16.scss
new file mode 100644
index 0000000000..555054ec6c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mainframe-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3 3.25A2.25 2.25 0 015.25 1h5.5A2.25 2.25 0 0113 3.25v9.5A2.25 2.25 0 0110.75 15h-5.5A2.25 2.25 0 013 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h5.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-5.5zm.5 2.25A.75.75 0 016.5 4h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zm0 2.5a.75.75 0 01.75-.75h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zm0 2.5A.75.75 0 016.5 9h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/property-24.scss
new file mode 100644
index 0000000000..4b93b31547
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mainframe/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mainframe-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4 3.75A2.75 2.75 0 016.75 1h10.5A2.75 2.75 0 0120 3.75v16.5A2.75 2.75 0 0117.25 23H6.75A2.75 2.75 0 014 20.25V3.75zM6.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V3.75c0-.69-.56-1.25-1.25-1.25H6.75zm1.5 3.75A.75.75 0 019 5.5h6A.75.75 0 0115 7H9a.75.75 0 01-.75-.75zm0 4A.75.75 0 019 9.5h6a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zm0 4A.75.75 0 019 13.5h6a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/keyframes.scss
new file mode 100644
index 0000000000..f68030aa6d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-map-pin {
+  50% {
+
+    background-color: var(--icon-color, var(--color-map-pin-500, currentColor));
+    -webkit-mask-image: var(--icon-map-pin-24);
+    mask-image: var(--icon-map-pin-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-map-pin-500, currentColor));
+    -webkit-mask-image: var(--icon-map-pin-16);
+    mask-image: var(--icon-map-pin-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/placeholders.scss
new file mode 100644
index 0000000000..a73dd3e782
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-map-pin-icon {
+  --icon-name: icon-map-pin;
+  content: '';
+}
+%with-map-pin-mask {
+  --icon-name: icon-map-pin;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/property-16.scss
new file mode 100644
index 0000000000..45f973ac64
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-map-pin-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 4.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM7 7a1 1 0 112 0 1 1 0 01-2 0z"/><path d="M8 0C4.138 0 1 3.114 1 6.964a6.927 6.927 0 002.085 4.957l4.42 3.892a.75.75 0 00.99 0l4.42-3.892A6.927 6.927 0 0015 6.964C15 3.114 11.862 0 8 0zM2.5 6.964C2.5 3.95 4.958 1.5 8 1.5s5.5 2.45 5.5 5.464c0 1.5-.607 2.858-1.594 3.847L8 14.251l-3.906-3.44A5.427 5.427 0 012.5 6.964z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/property-24.scss
new file mode 100644
index 0000000000..49b05aad5d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/map-pin/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-map-pin-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.585 23.875L12 23.25l.415.625a.75.75 0 01-.83 0z"/><path fill-rule="evenodd" d="M12 6a4 4 0 100 8 4 4 0 000-8zm-2.5 4a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M11.585 23.875L12 23.25c.415.625.416.624.416.624l.002-.001.006-.004.023-.015.083-.057c.071-.05.175-.122.305-.216a31.98 31.98 0 004.333-3.777C19.51 17.344 22 13.837 22 9.954a9.932 9.932 0 00-2.93-7.04A10.023 10.023 0 0012 0a10.023 10.023 0 00-7.07 2.914A9.932 9.932 0 002 9.954c0 3.883 2.49 7.39 4.832 9.85a31.978 31.978 0 004.333 3.777c.13.094.234.166.306.216l.082.057.023.015.006.004.003.002zM5.988 3.978A8.523 8.523 0 0112 1.5c2.255 0 4.418.892 6.012 2.478A8.432 8.432 0 0120.5 9.955c0 3.276-2.135 6.417-4.418 8.815A30.46 30.46 0 0112 22.334a30.463 30.463 0 01-4.082-3.564C5.635 16.372 3.5 13.23 3.5 9.955c0-2.242.895-4.392 2.488-5.977z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/map/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/map/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/map/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/map/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/map/keyframes.scss
new file mode 100644
index 0000000000..bd71680d81
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/map/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-map {
+  50% {
+
+    background-color: var(--icon-color, var(--color-map-500, currentColor));
+    -webkit-mask-image: var(--icon-map-24);
+    mask-image: var(--icon-map-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-map-500, currentColor));
+    -webkit-mask-image: var(--icon-map-16);
+    mask-image: var(--icon-map-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/map/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/map/placeholders.scss
new file mode 100644
index 0000000000..15c3750c9c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/map/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-map-icon {
+  --icon-name: icon-map;
+  content: '';
+}
+%with-map-mask {
+  --icon-name: icon-map;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/map/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/map/property-16.scss
new file mode 100644
index 0000000000..ec60b4b689
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/map/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-map-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.2 1.187c.34-.17.738-.176 1.083-.016l3.983 1.843 4.003-1.668A1.25 1.25 0 0116 2.5v8.941c0 .473-.268.906-.691 1.118l-4.508 2.254c-.34.17-.74.176-1.085.017l-3.982-1.844-4.003 1.668A1.25 1.25 0 010 13.5V4.56c0-.474.268-.907.691-1.119l4.508-2.254zM1.5 4.714L5 2.964v8.703l-3.5 1.458V4.714zm8 8.362l-3-1.389V2.925l3 1.389v8.763zm1.5-.04l3.5-1.75v-8.41L11 4.332v8.704z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/map/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/map/property-24.scss
new file mode 100644
index 0000000000..7875ec905a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/map/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-map-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M6.926 1.607a1.75 1.75 0 011.614-.064L16.099 5.1a.25.25 0 00.23-.01l5.053-2.886C22.548 1.537 24 2.379 24 3.724V17.42a1.75 1.75 0 01-.882 1.52l-6.044 3.453a1.75 1.75 0 01-1.614.064L7.901 18.9a.25.25 0 00-.23.01l-5.053 2.886C1.452 22.463 0 21.621 0 20.276V6.58c0-.628.337-1.208.882-1.52l6.044-3.453zm-5.3 4.756L7 3.293v14.274l-.074.04-5.052 2.887a.25.25 0 01-.374-.217V6.58a.25.25 0 01.126-.217zm6.914 11.18a1.557 1.557 0 00-.04-.018V3.182l6.96 3.275.04.018v14.343l-6.96-3.275zM17 20.708l5.374-3.071a.25.25 0 00.126-.217V3.723a.25.25 0 00-.374-.217l-5.052 2.887a1.755 1.755 0 01-.074.04v14.275z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/keyframes.scss
new file mode 100644
index 0000000000..1b89f97f7e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-maximize-alt {
+  50% {
+
+    background-color: var(--icon-color, var(--color-maximize-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-maximize-alt-24);
+    mask-image: var(--icon-maximize-alt-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-maximize-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-maximize-alt-16);
+    mask-image: var(--icon-maximize-alt-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/placeholders.scss
new file mode 100644
index 0000000000..a60320daac
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-maximize-alt-icon {
+  --icon-name: icon-maximize-alt;
+  content: '';
+}
+%with-maximize-alt-mask {
+  --icon-name: icon-maximize-alt;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/property-16.scss
new file mode 100644
index 0000000000..d508e30674
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-maximize-alt-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h2.047a.75.75 0 010 1.5H3.25a.75.75 0 00-.75.75v2.047a.75.75 0 01-1.5 0V3.25zm8.953-1.5a.75.75 0 01.75-.75h2.047A2.25 2.25 0 0115 3.25v2.047a.75.75 0 01-1.5 0V3.25a.75.75 0 00-.75-.75h-2.047a.75.75 0 01-.75-.75zM1.75 9.953a.75.75 0 01.75.75v2.047c0 .414.336.75.75.75h2.047a.75.75 0 010 1.5H3.25A2.25 2.25 0 011 12.75v-2.047a.75.75 0 01.75-.75zm12.5 0a.75.75 0 01.75.75v2.047A2.25 2.25 0 0112.75 15h-2.047a.75.75 0 010-1.5h2.047a.75.75 0 00.75-.75v-2.047a.75.75 0 01.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/property-24.scss
new file mode 100644
index 0000000000..4a9333cec0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize-alt/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-maximize-alt-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2H8a.75.75 0 010 1.5H4.75c-.69 0-1.25.56-1.25 1.25V8A.75.75 0 012 8V4.75zm13.25-2A.75.75 0 0116 2h3.25A2.75 2.75 0 0122 4.75V8a.75.75 0 01-1.5 0V4.75c0-.69-.56-1.25-1.25-1.25H16a.75.75 0 01-.75-.75zm-12.5 12.5a.75.75 0 01.75.75v3.25c0 .69.56 1.25 1.25 1.25H8A.75.75 0 018 22H4.75A2.75 2.75 0 012 19.25V16a.75.75 0 01.75-.75zm18.5 0A.75.75 0 0122 16v3.25A2.75 2.75 0 0119.25 22H16a.75.75 0 010-1.5h3.25c.69 0 1.25-.56 1.25-1.25V16a.75.75 0 01.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/keyframes.scss
new file mode 100644
index 0000000000..a204336b3f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-maximize {
+  50% {
+
+    background-color: var(--icon-color, var(--color-maximize-500, currentColor));
+    -webkit-mask-image: var(--icon-maximize-24);
+    mask-image: var(--icon-maximize-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-maximize-500, currentColor));
+    -webkit-mask-image: var(--icon-maximize-16);
+    mask-image: var(--icon-maximize-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/placeholders.scss
new file mode 100644
index 0000000000..92442dff82
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-maximize-icon {
+  --icon-name: icon-maximize;
+  content: '';
+}
+%with-maximize-mask {
+  --icon-name: icon-maximize;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/property-16.scss
new file mode 100644
index 0000000000..1876908c30
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-maximize-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.25 1a.75.75 0 000 1.5h2.19L9.47 5.47a.75.75 0 001.06 1.06l2.97-2.97v2.19a.75.75 0 001.5 0v-4a.75.75 0 00-.75-.75h-4zM2.5 10.25a.75.75 0 00-1.5 0v4c0 .414.336.75.75.75h4a.75.75 0 000-1.5H3.56l2.97-2.97a.75.75 0 10-1.06-1.06L2.5 12.44v-2.19z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/property-24.scss
new file mode 100644
index 0000000000..bbedc9f9b4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/maximize/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-maximize-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15.75 2a.75.75 0 000 1.5h3.69l-5.22 5.22a.75.75 0 001.06 1.06l5.22-5.22v3.69a.75.75 0 001.5 0v-5.5l-.001-.039a.745.745 0 00-.462-.654A.748.748 0 0021.25 2h-5.5zM3.5 15.75a.75.75 0 00-1.5 0v5.5a.748.748 0 00.75.75h5.5a.75.75 0 000-1.5H4.56l5.22-5.22a.75.75 0 10-1.06-1.06L3.5 19.44v-3.69z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/meh/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/meh/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/meh/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/meh/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/meh/keyframes.scss
new file mode 100644
index 0000000000..fc2ef42fd7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/meh/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-meh {
+  50% {
+
+    background-color: var(--icon-color, var(--color-meh-500, currentColor));
+    -webkit-mask-image: var(--icon-meh-24);
+    mask-image: var(--icon-meh-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-meh-500, currentColor));
+    -webkit-mask-image: var(--icon-meh-16);
+    mask-image: var(--icon-meh-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/meh/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/meh/placeholders.scss
new file mode 100644
index 0000000000..7d44126c18
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/meh/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-meh-icon {
+  --icon-name: icon-meh;
+  content: '';
+}
+%with-meh-mask {
+  --icon-name: icon-meh;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/meh/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/meh/property-16.scss
new file mode 100644
index 0000000000..3e5d8afd53
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/meh/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-meh-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.5 9.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5zM5 6a1 1 0 011-1h.007a1 1 0 010 2H6a1 1 0 01-1-1zM10 5a1 1 0 100 2h.007a1 1 0 100-2H10z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/meh/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/meh/property-24.scss
new file mode 100644
index 0000000000..a493af0dd2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/meh/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-meh-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8 14.5A.75.75 0 008 16h8a.75.75 0 000-1.5H8zM8 9a1 1 0 011-1h.01a1 1 0 110 2H9a1 1 0 01-1-1zM15 8a1 1 0 100 2h.01a1 1 0 100-2H15z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/menu/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/menu/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/menu/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/menu/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/menu/keyframes.scss
new file mode 100644
index 0000000000..5a66b3b50e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/menu/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-menu {
+  50% {
+
+    background-color: var(--icon-color, var(--color-menu-500, currentColor));
+    -webkit-mask-image: var(--icon-menu-24);
+    mask-image: var(--icon-menu-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-menu-500, currentColor));
+    -webkit-mask-image: var(--icon-menu-16);
+    mask-image: var(--icon-menu-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/menu/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/menu/placeholders.scss
new file mode 100644
index 0000000000..743bdaf8f1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/menu/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-menu-icon {
+  --icon-name: icon-menu;
+  content: '';
+}
+%with-menu-mask {
+  --icon-name: icon-menu;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/menu/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/menu/property-16.scss
new file mode 100644
index 0000000000..319bf4b3e3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/menu/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-menu-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 3.75A.75.75 0 011.75 3h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 3.75zM1 7.75A.75.75 0 011.75 7h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 7.75zM1.75 11a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/menu/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/menu/property-24.scss
new file mode 100644
index 0000000000..2cfcd64d66
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/menu/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-menu-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2 5.75A.75.75 0 012.75 5h18.5a.75.75 0 010 1.5H2.75A.75.75 0 012 5.75zM2 11.75a.75.75 0 01.75-.75h18.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zM2.75 17a.75.75 0 000 1.5h18.5a.75.75 0 000-1.5H2.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/index.scss
new file mode 100644
index 0000000000..b54b62b599
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../mesh/property-16';
+        @import '../mesh/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/keyframes.scss
new file mode 100644
index 0000000000..2cd2a9d3aa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-mesh {
+  50% {
+
+    background-color: var(--icon-color, var(--color-mesh-500, currentColor));
+    -webkit-mask-image: var(--icon-mesh-24);
+    mask-image: var(--icon-mesh-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-mesh-500, currentColor));
+    -webkit-mask-image: var(--icon-mesh-16);
+    mask-image: var(--icon-mesh-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/placeholders.scss
new file mode 100644
index 0000000000..29fe0d9457
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-mesh-icon {
+  --icon-name: icon-mesh;
+  content: '';
+}
+%with-mesh-mask {
+  --icon-name: icon-mesh;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/property-16.scss
new file mode 100644
index 0000000000..af89a0c317
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mesh-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M15.681 10.243A8.001 8.001 0 0016 8a7.97 7.97 0 00-2.047-5.345A1.752 1.752 0 0012.25.5h-.007c-.321 0-.623.087-.882.238A7.97 7.97 0 008 0a7.963 7.963 0 00-4.321 1.266A1.742 1.742 0 002.75 1h-.007a1.75 1.75 0 00-1.48 2.684A7.963 7.963 0 000 8a7.985 7.985 0 002.994 6.24 1.75 1.75 0 001.75 1.71h.006c.353 0 .681-.104.956-.284A8.004 8.004 0 008 16a7.985 7.985 0 006.245-3h.005a1.75 1.75 0 001.431-2.757zM2.573 4.492a1.758 1.758 0 01-.043-.005A6.47 6.47 0 001.5 8c0 1.918.83 3.642 2.152 4.832.112-.09.234-.165.366-.225-.029-3.003-.435-5.146-1.445-8.115zM6.5 14.2c0 .042-.001.084-.004.125.482.114.986.175 1.504.175a6.484 6.484 0 004.858-2.181 1.742 1.742 0 01-.242-1.713 32.908 32.908 0 00-2.306-2.179c-.067.116-.136.232-.205.347-.942 1.56-2.101 3.078-3.71 4.829.068.186.105.387.105.597zm7.826-4.698a1.776 1.776 0 00-.076-.002h-.007a1.75 1.75 0 00-.53.082 33.906 33.906 0 00-2.675-2.503c.484-.967.918-1.976 1.352-3.085a1.74 1.74 0 00.601-.158 6.518 6.518 0 011.335 5.666zM8 1.5c.89 0 1.738.179 2.51.503a1.755 1.755 0 00.476 1.464c-.379.964-.75 1.836-1.152 2.662C8.338 5.013 6.66 3.984 4.499 2.823a1.784 1.784 0 00-.013-.292A6.47 6.47 0 018 1.5zM4.094 4.309c.957 2.878 1.371 5.082 1.42 8.034 1.44-1.591 2.471-2.96 3.306-4.344.105-.174.208-.348.307-.524-1.41-1.072-2.989-2.056-5.033-3.166z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/property-24.scss
new file mode 100644
index 0000000000..30934a990b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mesh/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mesh-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M22.56 15.09c.286-.98.44-2.017.44-3.09 0-3.075-1.262-5.855-3.296-7.851A1.75 1.75 0 0018 2h-.01c-.328 0-.635.09-.897.247A10.953 10.953 0 0012 1c-2.448 0-4.709.8-6.536 2.152A1.744 1.744 0 004.75 3h-.01a1.75 1.75 0 00-1.595 2.472A10.95 10.95 0 001 12a10.99 10.99 0 004.99 9.215v.035c0 .966.784 1.75 1.75 1.75h.01c.445 0 .851-.166 1.16-.44.98.286 2.017.44 3.09.44a10.99 10.99 0 009.221-5H21.25a1.75 1.75 0 001.31-2.91zM4.603 6.495a1.745 1.745 0 01-.309-.052A9.457 9.457 0 002.5 12a9.49 9.49 0 004.17 7.865c.106-.082.222-.152.345-.208-.012-4.964-.626-8.255-2.412-13.162zm4.74 14.03c.09.198.144.414.155.642A9.513 9.513 0 0012 21.5a9.49 9.49 0 007.864-4.169 1.743 1.743 0 01-.262-1.697c-1.477-1.49-2.83-2.747-4.193-3.859-1.514 2.857-3.359 5.497-6.065 8.75zm11.824-6.023c-.17.006-.333.037-.487.09-1.61-1.626-3.083-2.986-4.578-4.186.729-1.509 1.393-3.11 2.064-4.914.212-.02.412-.077.595-.166A9.47 9.47 0 0121.5 12a9.51 9.51 0 01-.333 2.502zM12 2.5a9.46 9.46 0 014.257 1.005 1.745 1.745 0 00.496 1.483 55.99 55.99 0 01-1.866 4.483c-2.418-1.785-5-3.234-8.388-4.768a1.75 1.75 0 00-.059-.407A9.457 9.457 0 0112 2.5zM6.077 6.159c1.737 4.813 2.384 8.186 2.435 13.02 2.538-3.084 4.267-5.6 5.697-8.343-2.352-1.763-4.843-3.177-8.132-4.677z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/keyframes.scss
new file mode 100644
index 0000000000..0939b78814
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-message-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-message-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-message-circle-fill-24);
+    mask-image: var(--icon-message-circle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-message-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-message-circle-fill-16);
+    mask-image: var(--icon-message-circle-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/placeholders.scss
new file mode 100644
index 0000000000..daea45cf07
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-message-circle-fill-icon {
+  --icon-name: icon-message-circle-fill;
+  content: '';
+}
+%with-message-circle-fill-mask {
+  --icon-name: icon-message-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/property-16.scss
new file mode 100644
index 0000000000..4066570377
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-message-circle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5 8.75A.75.75 0 015.75 8h2.5a.75.75 0 010 1.5h-2.5A.75.75 0 015 8.75zM5.75 5.5a.75.75 0 100 1.5h4.5a.75.75 0 000-1.5h-4.5z"/><path fill-rule="evenodd" d="M2.058 14.934l.002-.001.01-.004.037-.017a28.983 28.983 0 01.658-.281 21.485 21.485 0 011.649-.616c.274-.086.506-.147.678-.176.049-.008.086-.012.113-.015a6.768 6.768 0 10-3.028-3.026 1.384 1.384 0 01-.014.119 5.296 5.296 0 01-.176.679c-.172.545-.42 1.17-.618 1.646a31.45 31.45 0 01-.28.65l-.017.036-.004.01v.002a.75.75 0 00.99.994zM8.231 2.5a5.269 5.269 0 11-2.43 9.944 1.18 1.18 0 00-.535-.122 2.432 2.432 0 00-.424.038c-.27.046-.577.13-.879.225-.272.085-.557.186-.834.29.103-.275.203-.557.288-.828.096-.302.18-.612.225-.885.023-.136.04-.283.037-.428a1.193 1.193 0 00-.123-.534 5.269 5.269 0 014.675-7.7z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/property-24.scss
new file mode 100644
index 0000000000..03a4b97c99
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-message-circle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8 8.75A.75.75 0 018.75 8h7a.75.75 0 010 1.5h-7A.75.75 0 018 8.75zM8 11.75a.75.75 0 01.75-.75h3a.75.75 0 010 1.5h-3a.75.75 0 01-.75-.75zM8 14.75a.75.75 0 01.75-.75h5a.75.75 0 010 1.5h-5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M7.546 20.304c-.332.064-.757.185-1.228.342-1.113.37-2.194.825-3.27 1.292a.75.75 0 01-.98-.998c.086-.192.17-.384.253-.577.273-.635.704-1.675 1.024-2.628.16-.48.286-.915.352-1.255a2.32 2.32 0 00.048-.42 9.62 9.62 0 01-1.06-4.403C2.685 6.324 7.01 2 12.343 2 17.676 2 22 6.324 22 11.657c0 5.334-4.324 9.658-9.657 9.658a9.619 9.619 0 01-4.4-1.058 2.159 2.159 0 00-.397.047zM20.5 11.657a8.157 8.157 0 10-15.396 3.765c.128.246.144.513.141.7a3.764 3.764 0 01-.075.643 11.85 11.85 0 01-.403 1.447c-.185.55-.402 1.12-.606 1.631a32 32 0 011.684-.62c.495-.165.991-.31 1.417-.392.212-.041.427-.07.627-.074.18-.003.445.012.69.14A8.157 8.157 0 0020.5 11.657z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/keyframes.scss
new file mode 100644
index 0000000000..b86d04dbca
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-message-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-message-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-message-circle-24);
+    mask-image: var(--icon-message-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-message-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-message-circle-16);
+    mask-image: var(--icon-message-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/placeholders.scss
new file mode 100644
index 0000000000..c6acc54530
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-message-circle-icon {
+  --icon-name: icon-message-circle;
+  content: '';
+}
+%with-message-circle-mask {
+  --icon-name: icon-message-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/property-16.scss
new file mode 100644
index 0000000000..7897421ff2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-message-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.231 2.5a5.269 5.269 0 11-2.43 9.944 1.18 1.18 0 00-.535-.122 2.432 2.432 0 00-.424.038c-.27.046-.577.13-.879.225-.272.085-.557.186-.834.29.103-.275.203-.557.288-.828.096-.302.18-.612.225-.885.023-.136.04-.283.037-.428a1.193 1.193 0 00-.123-.534 5.269 5.269 0 014.675-7.7zM2.058 14.934l.002-.001.01-.004.037-.017a28.983 28.983 0 01.658-.281 21.485 21.485 0 011.649-.616c.274-.086.506-.147.678-.176.049-.008.086-.012.113-.015a6.768 6.768 0 10-3.028-3.026 1.384 1.384 0 01-.014.119 5.296 5.296 0 01-.176.679c-.172.545-.42 1.17-.618 1.646a31.45 31.45 0 01-.28.65l-.017.036-.004.01v.002a.75.75 0 00.99.994z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/property-24.scss
new file mode 100644
index 0000000000..acf754d34e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-message-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12.343 3.5a8.157 8.157 0 11-3.765 15.396 1.439 1.439 0 00-.688-.139c-.2.003-.416.033-.628.074-.426.082-.922.227-1.417.391-.566.188-1.157.412-1.684.621.204-.51.421-1.081.606-1.63.169-.505.318-1.012.403-1.448.042-.217.072-.438.075-.643a1.466 1.466 0 00-.141-.7A8.157 8.157 0 0112.343 3.5zM3.7 21.655a37.13 37.13 0 012.618-1.01c.47-.156.896-.277 1.228-.341a2.28 2.28 0 01.398-.047A9.657 9.657 0 0022 11.657 9.657 9.657 0 0012.343 2a9.657 9.657 0 00-8.598 14.06v.038a2.32 2.32 0 01-.048.382c-.066.34-.191.776-.352 1.255a36.658 36.658 0 01-1.21 3.052l-.05.114-.014.03-.004.009a.75.75 0 00.982.998l.648-.282.003-.001zm.043-5.621v.002-.002z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/keyframes.scss
new file mode 100644
index 0000000000..e784a413ff
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-message-square-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-message-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-message-square-fill-24);
+    mask-image: var(--icon-message-square-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-message-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-message-square-fill-16);
+    mask-image: var(--icon-message-square-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/placeholders.scss
new file mode 100644
index 0000000000..8afc832af0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-message-square-fill-icon {
+  --icon-name: icon-message-square-fill;
+  content: '';
+}
+%with-message-square-fill-mask {
+  --icon-name: icon-message-square-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/property-16.scss
new file mode 100644
index 0000000000..cc7ac6bcf3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-message-square-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4 7.75A.75.75 0 014.75 7h3.5a.75.75 0 010 1.5h-3.5A.75.75 0 014 7.75zM4.75 4.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"/><path fill-rule="evenodd" d="M15 3.25A2.25 2.25 0 0012.75 1h-9.5A2.25 2.25 0 001 3.25v11a.75.75 0 001.26.55l2.801-2.6a.75.75 0 01.51-.2h7.179A2.25 2.25 0 0015 9.75v-6.5zm-2.25-.75a.75.75 0 01.75.75v6.5a.75.75 0 01-.75.75H5.572a2.25 2.25 0 00-1.531.6L2.5 12.53V3.25a.75.75 0 01.75-.75h9.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/property-24.scss
new file mode 100644
index 0000000000..24d31c3560
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-message-square-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6 6.75A.75.75 0 016.75 6h10a.75.75 0 010 1.5h-10A.75.75 0 016 6.75zM6 9.75A.75.75 0 016.75 9h5a.75.75 0 010 1.5h-5A.75.75 0 016 9.75zM6 12.75a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M19.25 2A2.75 2.75 0 0122 4.75v10.5A2.75 2.75 0 0119.25 18H8.26a1.25 1.25 0 00-.801.291L3.23 21.825A.75.75 0 012 21.25V4.75A2.75 2.75 0 014.75 2h14.5zm1.25 2.75c0-.69-.56-1.25-1.25-1.25H4.75c-.69 0-1.25.56-1.25 1.25v14.895l2.997-2.505a2.75 2.75 0 011.763-.64h10.99c.69 0 1.25-.56 1.25-1.25V4.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/keyframes.scss
new file mode 100644
index 0000000000..06805b0df2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-message-square {
+  50% {
+
+    background-color: var(--icon-color, var(--color-message-square-500, currentColor));
+    -webkit-mask-image: var(--icon-message-square-24);
+    mask-image: var(--icon-message-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-message-square-500, currentColor));
+    -webkit-mask-image: var(--icon-message-square-16);
+    mask-image: var(--icon-message-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/placeholders.scss
new file mode 100644
index 0000000000..030d9d7979
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-message-square-icon {
+  --icon-name: icon-message-square;
+  content: '';
+}
+%with-message-square-mask {
+  --icon-name: icon-message-square;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/property-16.scss
new file mode 100644
index 0000000000..0a07c5c7fb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-message-square-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M15 3.25A2.25 2.25 0 0012.75 1h-9.5A2.25 2.25 0 001 3.25v11a.75.75 0 001.26.55l2.801-2.6a.75.75 0 01.51-.2h7.179A2.25 2.25 0 0015 9.75v-6.5zm-2.25-.75a.75.75 0 01.75.75v6.5a.75.75 0 01-.75.75H5.572a2.25 2.25 0 00-1.531.6L2.5 12.53V3.25a.75.75 0 01.75-.75h9.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/property-24.scss
new file mode 100644
index 0000000000..c1dc0c4bf0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message-square/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-message-square-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M22 4.75A2.75 2.75 0 0019.25 2H4.75A2.75 2.75 0 002 4.75v16.5a.75.75 0 001.231.575l4.228-3.534A1.25 1.25 0 018.26 18h10.99A2.75 2.75 0 0022 15.25V4.75zM19.25 3.5c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H8.26a2.75 2.75 0 00-1.763.64L3.5 19.645V4.75c0-.69.56-1.25 1.25-1.25h14.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message/index.scss
new file mode 100644
index 0000000000..351cd9f517
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../message-square-fill/property-16';
+        @import '../message-square-fill/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message/keyframes.scss
new file mode 100644
index 0000000000..07f0c177e4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-message {
+  50% {
+
+    background-color: var(--icon-color, var(--color-message-500, currentColor));
+    -webkit-mask-image: var(--icon-message-square-fill-24);
+    mask-image: var(--icon-message-square-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-message-500, currentColor));
+    -webkit-mask-image: var(--icon-message-square-fill-16);
+    mask-image: var(--icon-message-square-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/message/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/message/placeholders.scss
new file mode 100644
index 0000000000..4a803fbda9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/message/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-message-icon {
+  --icon-name: icon-message;
+  content: '';
+}
+%with-message-mask {
+  --icon-name: icon-message;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/keyframes.scss
new file mode 100644
index 0000000000..610f1c948a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-mic-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-mic-off-500, currentColor));
+    -webkit-mask-image: var(--icon-mic-off-24);
+    mask-image: var(--icon-mic-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-mic-off-500, currentColor));
+    -webkit-mask-image: var(--icon-mic-off-16);
+    mask-image: var(--icon-mic-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/placeholders.scss
new file mode 100644
index 0000000000..60df2906e6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-mic-off-icon {
+  --icon-name: icon-mic-off;
+  content: '';
+}
+%with-mic-off-mask {
+  --icon-name: icon-mic-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/property-16.scss
new file mode 100644
index 0000000000..1c86aa0730
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mic-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 0c-.78 0-1.538.29-2.104.821a2.862 2.862 0 00-.627.857.75.75 0 001.354.644c.07-.147.17-.286.3-.407A1.578 1.578 0 018 1.5c.413 0 .8.154 1.078.415.276.26.422.601.422.946v3.443a.75.75 0 001.5 0V2.861c0-.775-.329-1.507-.896-2.04A3.077 3.077 0 008 0z"/><path fill-rule="evenodd" d="M5 6.06L1.22 2.28a.75.75 0 011.06-1.06l12.5 12.5a.75.75 0 11-1.06 1.06L11.338 12.4a5.575 5.575 0 01-2.588 1.05V14.5h1.75a.75.75 0 010 1.5h-5a.75.75 0 010-1.5h1.75v-1.05a5.553 5.553 0 01-3.131-1.514A5.3 5.3 0 012.5 8.135V6.75a.75.75 0 011.5 0v1.385a3.8 3.8 0 001.164 2.725A4.071 4.071 0 008 12c.815 0 1.602-.24 2.262-.677l-.726-.726A3.113 3.113 0 018 11c-.78 0-1.538-.29-2.104-.821A2.797 2.797 0 015 8.139V6.06zm1.5 1.5v.579c0 .345.146.686.422.946.278.26.665.415 1.078.415.134 0 .266-.016.392-.047L6.5 7.56z" clip-rule="evenodd"/><path d="M12.03 6.75a.75.75 0 011.5 0v1.385c0 .266-.02.53-.06.79a.75.75 0 11-1.483-.227c.029-.185.043-.374.043-.563V6.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/property-24.scss
new file mode 100644
index 0000000000..8e354e33d9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mic-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mic-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.184 1.118A4.077 4.077 0 0112 0c1.05 0 2.064.399 2.816 1.118A3.79 3.79 0 0116 3.858v6.5a.75.75 0 11-1.5 0v-6.5a2.29 2.29 0 00-.72-1.656A2.578 2.578 0 0012 1.5c-.674 0-1.313.256-1.78.702a2.29 2.29 0 00-.72 1.655.75.75 0 11-1.5 0 3.79 3.79 0 011.184-2.739z"/><path fill-rule="evenodd" d="M12 16c.81 0 1.6-.237 2.263-.676l1.66 1.66A6.671 6.671 0 0112 18.25a6.633 6.633 0 01-4.606-1.84A6.13 6.13 0 015.5 12v-2A.75.75 0 004 10v2a7.63 7.63 0 002.353 5.49 8.112 8.112 0 004.897 2.226V22H8a.75.75 0 000 1.5h8a.75.75 0 000-1.5h-3.25v-2.284a8.145 8.145 0 004.244-1.661l4.726 4.725a.75.75 0 101.06-1.06L2.28 1.22a.75.75 0 00-1.06 1.06L8 9.06v3.083a3.79 3.79 0 001.184 2.739A4.077 4.077 0 0012 16zm-2.5-3.857V10.56l3.667 3.666A2.62 2.62 0 0112 14.5a2.578 2.578 0 01-1.78-.702 2.29 2.29 0 01-.72-1.655z" clip-rule="evenodd"/><path d="M20 10a.75.75 0 00-1.5 0v2c0 .552-.076 1.097-.222 1.62a.75.75 0 001.444.404A7.522 7.522 0 0020 12v-2z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mic/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mic/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mic/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mic/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mic/keyframes.scss
new file mode 100644
index 0000000000..98fbef61d4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mic/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-mic {
+  50% {
+
+    background-color: var(--icon-color, var(--color-mic-500, currentColor));
+    -webkit-mask-image: var(--icon-mic-24);
+    mask-image: var(--icon-mic-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-mic-500, currentColor));
+    -webkit-mask-image: var(--icon-mic-16);
+    mask-image: var(--icon-mic-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mic/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mic/placeholders.scss
new file mode 100644
index 0000000000..e2008224e8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mic/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-mic-icon {
+  --icon-name: icon-mic;
+  content: '';
+}
+%with-mic-mask {
+  --icon-name: icon-mic;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mic/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mic/property-16.scss
new file mode 100644
index 0000000000..c32cd286ae
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mic/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mic-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M8 0c-.78 0-1.538.29-2.104.821A2.797 2.797 0 005 2.861V8.14c0 .775.328 1.507.896 2.04.566.53 1.323.821 2.104.821.78 0 1.538-.29 2.104-.821A2.797 2.797 0 0011 8.139V2.86c0-.775-.329-1.507-.896-2.04A3.077 3.077 0 008 0zM6.922 1.915A1.578 1.578 0 018 1.5c.413 0 .8.154 1.078.415.276.26.422.601.422.946V8.14c0 .345-.146.686-.422.946A1.578 1.578 0 018 9.5c-.413 0-.8-.154-1.078-.415-.276-.26-.422-.601-.422-.946V2.86c0-.345.146-.686.422-.946z" clip-rule="evenodd"/><path d="M4 6.75a.75.75 0 00-1.5 0v1.385a5.3 5.3 0 001.619 3.801A5.553 5.553 0 007.25 13.45v1.05H5.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5H8.75v-1.05a5.553 5.553 0 003.131-1.514A5.3 5.3 0 0013.5 8.135V6.75a.75.75 0 00-1.5 0v1.385a3.8 3.8 0 01-1.164 2.725A4.071 4.071 0 018 12a4.071 4.071 0 01-2.836-1.14A3.8 3.8 0 014 8.135V6.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mic/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mic/property-24.scss
new file mode 100644
index 0000000000..addacded1c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mic/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mic-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M12 0c-1.05 0-2.064.399-2.816 1.118A3.79 3.79 0 008 3.858v8.285a3.79 3.79 0 001.184 2.739A4.077 4.077 0 0012 16c1.05 0 2.064-.399 2.816-1.118A3.79 3.79 0 0016 12.142V3.858a3.79 3.79 0 00-1.184-2.739A4.077 4.077 0 0012 0zm-1.78 2.202A2.578 2.578 0 0112 1.5c.674 0 1.313.256 1.78.702a2.29 2.29 0 01.72 1.655v8.286a2.29 2.29 0 01-.72 1.655A2.578 2.578 0 0112 14.5a2.578 2.578 0 01-1.78-.702 2.29 2.29 0 01-.72-1.655V3.857c0-.614.255-1.21.72-1.655z" clip-rule="evenodd"/><path d="M5.5 10A.75.75 0 004 10v2a7.63 7.63 0 002.353 5.49 8.112 8.112 0 004.897 2.226V22H8a.75.75 0 000 1.5h8a.75.75 0 000-1.5h-3.25v-2.284a8.112 8.112 0 004.898-2.227A7.63 7.63 0 0020 12v-2a.75.75 0 00-1.5 0v2a6.13 6.13 0 01-1.894 4.41A6.634 6.634 0 0112 18.25a6.633 6.633 0 01-4.606-1.84A6.13 6.13 0 015.5 12v-2z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/keyframes.scss
new file mode 100644
index 0000000000..b67402d7b9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-microsoft-color {
+  50% {
+    background-image: var(--icon-microsoft-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-microsoft-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/placeholders.scss
new file mode 100644
index 0000000000..24e3cbb0ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-microsoft-color-icon {
+  --icon-name: icon-microsoft-color;
+  content: '';
+}
+%with-microsoft-color-mask {
+  --icon-name: icon-microsoft-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/property-16.scss
new file mode 100644
index 0000000000..60fe7249c3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-microsoft-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23F35325" d="M1 1h6.5v6.5H1V1z"/><path fill="%2381BC06" d="M8.5 1H15v6.5H8.5V1z"/><path fill="%2305A6F0" d="M1 8.5h6.5V15H1V8.5z"/><path fill="%23FFBA08" d="M8.5 8.5H15V15H8.5V8.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/property-24.scss
new file mode 100644
index 0000000000..79f8af01c4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-microsoft-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23F35325" d="M3 3h8.5v8.5H3V3z"/><path fill="%2381BC06" d="M12.5 3H21v8.5h-8.5V3z"/><path fill="%2305A6F0" d="M3 12.5h8.5V21H3v-8.5z"/><path fill="%23FFBA08" d="M12.5 12.5H21V21h-8.5v-8.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/index.scss
new file mode 100644
index 0000000000..70779bb0b2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../microsoft-color/property-16';
+        @import '../microsoft-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/keyframes.scss
new file mode 100644
index 0000000000..406084a64a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-microsoft {
+  50% {
+
+    background-color: var(--icon-color, var(--color-microsoft-500, currentColor));
+    -webkit-mask-image: var(--icon-microsoft-color-24);
+    mask-image: var(--icon-microsoft-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-microsoft-500, currentColor));
+    -webkit-mask-image: var(--icon-microsoft-color-16);
+    mask-image: var(--icon-microsoft-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/placeholders.scss
new file mode 100644
index 0000000000..b51b503633
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-microsoft-icon {
+  --icon-name: icon-microsoft;
+  content: '';
+}
+%with-microsoft-mask {
+  --icon-name: icon-microsoft;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/property-16.scss
new file mode 100644
index 0000000000..5bfd5bc755
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-microsoft-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 1h6.5v6.5H1V1zM8.5 1H15v6.5H8.5V1zM1 8.5h6.5V15H1V8.5zM8.5 8.5H15V15H8.5V8.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/property-24.scss
new file mode 100644
index 0000000000..7bd57ba61e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/microsoft/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-microsoft-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 1h6.5v6.5H1V1zM8.5 1H15v6.5H8.5V1zM1 8.5h6.5V15H1V8.5zM8.5 8.5H15V15H8.5V8.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/keyframes.scss
new file mode 100644
index 0000000000..aa1f9a437d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-migrate {
+  50% {
+
+    background-color: var(--icon-color, var(--color-migrate-500, currentColor));
+    -webkit-mask-image: var(--icon-migrate-24);
+    mask-image: var(--icon-migrate-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-migrate-500, currentColor));
+    -webkit-mask-image: var(--icon-migrate-16);
+    mask-image: var(--icon-migrate-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/placeholders.scss
new file mode 100644
index 0000000000..8bd49e976a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-migrate-icon {
+  --icon-name: icon-migrate;
+  content: '';
+}
+%with-migrate-mask {
+  --icon-name: icon-migrate;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/property-16.scss
new file mode 100644
index 0000000000..32fb5e6e1e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-migrate-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.22 3.72a.75.75 0 011.06 0l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06l2.97-2.97-2.97-2.97a.75.75 0 010-1.06z"/><path d="M5.22 3.72a.75.75 0 011.06 0l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 01-1.06-1.06L7.44 8.5H2A.75.75 0 012 7h5.44L5.22 4.78a.75.75 0 010-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/property-24.scss
new file mode 100644
index 0000000000..3fdc741285
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/migrate/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-migrate-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.207 5.982a.75.75 0 011.06-.025l5.5 5.25a.75.75 0 010 1.085l-5.5 5.25a.75.75 0 11-1.035-1.085l4.146-3.957H4A.75.75 0 014 11h8.378L8.232 7.043a.75.75 0 01-.025-1.06z"/><path d="M14.207 5.982a.75.75 0 011.06-.025l5.5 5.25a.75.75 0 010 1.085l-5.5 5.25a.75.75 0 01-1.035-1.085l4.932-4.707-4.932-4.707a.75.75 0 01-.024-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/keyframes.scss
new file mode 100644
index 0000000000..2162184dc0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minimize-alt {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minimize-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-minimize-alt-24);
+    mask-image: var(--icon-minimize-alt-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minimize-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-minimize-alt-16);
+    mask-image: var(--icon-minimize-alt-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/placeholders.scss
new file mode 100644
index 0000000000..eea8550e2b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minimize-alt-icon {
+  --icon-name: icon-minimize-alt;
+  content: '';
+}
+%with-minimize-alt-mask {
+  --icon-name: icon-minimize-alt;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/property-16.scss
new file mode 100644
index 0000000000..782169a4d1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minimize-alt-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5.25.953a.75.75 0 01.75.75V3.75A2.25 2.25 0 013.75 6H1.703a.75.75 0 110-1.5H3.75a.75.75 0 00.75-.75V1.703a.75.75 0 01.75-.75zm5.5 0a.75.75 0 01.75.75V3.75c0 .414.336.75.75.75h2.047a.75.75 0 010 1.5H12.25A2.25 2.25 0 0110 3.75V1.703a.75.75 0 01.75-.75zM.953 10.75a.75.75 0 01.75-.75H3.75A2.25 2.25 0 016 12.25v2.047a.75.75 0 01-1.5 0V12.25a.75.75 0 00-.75-.75H1.703a.75.75 0 01-.75-.75zM10 12.25A2.25 2.25 0 0112.25 10h2.047a.75.75 0 110 1.5H12.25a.75.75 0 00-.75.75v2.047a.75.75 0 01-1.5 0V12.25z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/property-24.scss
new file mode 100644
index 0000000000..09cf65b4c8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize-alt/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minimize-alt-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M8.25 2.25A.75.75 0 019 3v3.25A2.75 2.75 0 016.25 9H3a.75.75 0 010-1.5h3.25c.69 0 1.25-.56 1.25-1.25V3a.75.75 0 01.75-.75zm7.5 0a.75.75 0 01.75.75v3.25c0 .69.56 1.25 1.25 1.25H21A.75.75 0 0121 9h-3.25A2.75 2.75 0 0115 6.25V3a.75.75 0 01.75-.75zm-13.5 13.5A.75.75 0 013 15h3.25A2.75 2.75 0 019 17.75V21a.75.75 0 01-1.5 0v-3.25c0-.69-.56-1.25-1.25-1.25H3a.75.75 0 01-.75-.75zm12.75 2A2.75 2.75 0 0117.75 15H21a.75.75 0 010 1.5h-3.25c-.69 0-1.25.56-1.25 1.25V21a.75.75 0 01-1.5 0v-3.25z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/keyframes.scss
new file mode 100644
index 0000000000..8f4081bc51
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minimize {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minimize-500, currentColor));
+    -webkit-mask-image: var(--icon-minimize-24);
+    mask-image: var(--icon-minimize-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minimize-500, currentColor));
+    -webkit-mask-image: var(--icon-minimize-16);
+    mask-image: var(--icon-minimize-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/placeholders.scss
new file mode 100644
index 0000000000..380e2e59a7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minimize-icon {
+  --icon-name: icon-minimize;
+  content: '';
+}
+%with-minimize-mask {
+  --icon-name: icon-minimize;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/property-16.scss
new file mode 100644
index 0000000000..4931a29655
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minimize-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10 4.94V2.75a.75.75 0 00-1.5 0v4c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-2.19l2.72-2.72a.75.75 0 00-1.06-1.06L10 4.94zM2.75 8.5a.75.75 0 000 1.5h2.19l-2.72 2.72a.75.75 0 101.06 1.06L6 11.06v2.19a.75.75 0 001.5 0v-4a.75.75 0 00-.75-.75h-4z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/property-24.scss
new file mode 100644
index 0000000000..336ae822b7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minimize/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minimize-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M20.78 4.28a.75.75 0 00-1.06-1.06L14.5 8.44V4.75a.75.75 0 00-1.5 0v5.5a.747.747 0 00.75.75h5.5a.75.75 0 000-1.5h-3.69l5.22-5.22zM4 13.75c0 .414.336.75.75.75h3.69l-5.22 5.22a.75.75 0 101.06 1.06l5.22-5.22v3.69a.75.75 0 001.5 0v-5.5a.747.747 0 00-.215-.525l-.01-.01A.747.747 0 0010.25 13h-5.5a.75.75 0 00-.75.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/index.scss
new file mode 100644
index 0000000000..95600d0861
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../minus-circle/property-16';
+        @import '../minus-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/keyframes.scss
new file mode 100644
index 0000000000..7ae6fdc84e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minus-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minus-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-circle-24);
+    mask-image: var(--icon-minus-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minus-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-circle-16);
+    mask-image: var(--icon-minus-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/placeholders.scss
new file mode 100644
index 0000000000..6ab1707098
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minus-circle-fill-icon {
+  --icon-name: icon-minus-circle-fill;
+  content: '';
+}
+%with-minus-circle-fill-mask {
+  --icon-name: icon-minus-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/index.scss
new file mode 100644
index 0000000000..95600d0861
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../minus-circle/property-16';
+        @import '../minus-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/keyframes.scss
new file mode 100644
index 0000000000..48e4cda9f9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minus-circle-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minus-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-circle-24);
+    mask-image: var(--icon-minus-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minus-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-circle-16);
+    mask-image: var(--icon-minus-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/placeholders.scss
new file mode 100644
index 0000000000..07330c7f64
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minus-circle-outline-icon {
+  --icon-name: icon-minus-circle-outline;
+  content: '';
+}
+%with-minus-circle-outline-mask {
+  --icon-name: icon-minus-circle-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/keyframes.scss
new file mode 100644
index 0000000000..51f4f2bd85
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minus-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minus-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-circle-24);
+    mask-image: var(--icon-minus-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minus-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-circle-16);
+    mask-image: var(--icon-minus-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/placeholders.scss
new file mode 100644
index 0000000000..1f7fcc8d5d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minus-circle-icon {
+  --icon-name: icon-minus-circle;
+  content: '';
+}
+%with-minus-circle-mask {
+  --icon-name: icon-minus-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/property-16.scss
new file mode 100644
index 0000000000..898809a798
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.75 7a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/property-24.scss
new file mode 100644
index 0000000000..769b9f3fbf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.25 11a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/index.scss
new file mode 100644
index 0000000000..7163787e7b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../minus/property-16';
+        @import '../minus/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/keyframes.scss
new file mode 100644
index 0000000000..e686c76cd6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minus-plain {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minus-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-24);
+    mask-image: var(--icon-minus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minus-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-16);
+    mask-image: var(--icon-minus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/placeholders.scss
new file mode 100644
index 0000000000..77792853ad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plain/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minus-plain-icon {
+  --icon-name: icon-minus-plain;
+  content: '';
+}
+%with-minus-plain-mask {
+  --icon-name: icon-minus-plain;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/keyframes.scss
new file mode 100644
index 0000000000..b3ee6fd6ee
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minus-plus-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minus-plus-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-plus-circle-24);
+    mask-image: var(--icon-minus-plus-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minus-plus-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-plus-circle-16);
+    mask-image: var(--icon-minus-plus-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/placeholders.scss
new file mode 100644
index 0000000000..b06534967f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minus-plus-circle-icon {
+  --icon-name: icon-minus-plus-circle;
+  content: '';
+}
+%with-minus-plus-circle-mask {
+  --icon-name: icon-minus-plus-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/property-16.scss
new file mode 100644
index 0000000000..f17efc91bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-plus-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.75 4.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3zM10.25 7.5a.75.75 0 01.75.75V9.5h1.25a.75.75 0 010 1.5H11v1.25a.75.75 0 01-1.5 0V11H8.25a.75.75 0 010-1.5H9.5V8.25a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M5.25 0a5.25 5.25 0 015.244 5.006 5.25 5.25 0 11-5.488 5.488A5.25 5.25 0 015.25 0zM1.5 5.25a3.75 3.75 0 017.499-.1A5.258 5.258 0 005.15 8.999 3.75 3.75 0 011.5 5.25zm8.75 1.25a3.75 3.75 0 100 7.5 3.75 3.75 0 000-7.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/property-24.scss
new file mode 100644
index 0000000000..463704c4b2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-plus-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6 7a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5H6zM15.75 12.25A.75.75 0 0015 13v2h-2a.75.75 0 000 1.5h2v2a.75.75 0 001.5 0v-2h2a.75.75 0 000-1.5h-2v-2a.75.75 0 00-.75-.75z"/><path fill-rule="evenodd" d="M8.25 15.5c.085 0 .17-.002.254-.004a7.25 7.25 0 106.991-6.991A7.25 7.25 0 108.25 15.5zm0-13a5.75 5.75 0 10.467 11.481 7.262 7.262 0 015.264-5.264A5.75 5.75 0 008.25 2.5zM10 15.75a5.75 5.75 0 1111.5 0 5.75 5.75 0 01-11.5 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/keyframes.scss
new file mode 100644
index 0000000000..b1dec2dbb3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minus-plus-square {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minus-plus-square-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-plus-square-24);
+    mask-image: var(--icon-minus-plus-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minus-plus-square-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-plus-square-16);
+    mask-image: var(--icon-minus-plus-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/placeholders.scss
new file mode 100644
index 0000000000..820b2daf80
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minus-plus-square-icon {
+  --icon-name: icon-minus-plus-square;
+  content: '';
+}
+%with-minus-plus-square-mask {
+  --icon-name: icon-minus-plus-square;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/property-16.scss
new file mode 100644
index 0000000000..ade6fd9244
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-plus-square-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.75 8a.75.75 0 01.75.75V10h1.25a.75.75 0 010 1.5H11.5v1.25a.75.75 0 01-1.5 0V11.5H8.75a.75.75 0 010-1.5H10V8.75a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M0 2.25A2.25 2.25 0 012.25 0h6a2.25 2.25 0 012.25 2.25V5.5h3.25A2.25 2.25 0 0116 7.75v6A2.25 2.25 0 0113.75 16h-6a2.25 2.25 0 01-2.25-2.25V10.5H2.25A2.25 2.25 0 010 8.25v-6zm9 0V5.5H7.707A.749.749 0 007 4.5H3.5a.75.75 0 000 1.5h2.836A2.246 2.246 0 005.5 7.75V9H2.25a.75.75 0 01-.75-.75v-6a.75.75 0 01.75-.75h6a.75.75 0 01.75.75zm-2 11.5v-6A.75.75 0 017.75 7h6a.75.75 0 01.75.75v6a.75.75 0 01-.75.75h-6a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/property-24.scss
new file mode 100644
index 0000000000..b3470bc3c7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus-square/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-plus-square-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5.25 7.75A.75.75 0 016 7h4.5a.75.75 0 010 1.5H6a.75.75 0 01-.75-.75zM15.75 12.25A.75.75 0 0015 13v2h-2a.75.75 0 000 1.5h2v2a.75.75 0 001.5 0v-2h2a.75.75 0 000-1.5h-2v-2a.75.75 0 00-.75-.75z"/><path fill-rule="evenodd" d="M4.25 1.5A2.75 2.75 0 001.5 4.25v8A2.75 2.75 0 004.25 15H9v4.75a2.75 2.75 0 002.75 2.75h8a2.75 2.75 0 002.75-2.75v-8A2.75 2.75 0 0019.75 9H15V4.25a2.75 2.75 0 00-2.75-2.75h-8zM13.5 9V4.25c0-.69-.56-1.25-1.25-1.25h-8C3.56 3 3 3.56 3 4.25v8c0 .69.56 1.25 1.25 1.25H9v-1.75A2.75 2.75 0 0111.75 9h1.75zm-3 10.75c0 .69.56 1.25 1.25 1.25h8c.69 0 1.25-.56 1.25-1.25v-8c0-.69-.56-1.25-1.25-1.25h-8c-.69 0-1.25.56-1.25 1.25v8z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/keyframes.scss
new file mode 100644
index 0000000000..7feceb8290
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minus-plus {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minus-plus-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-plus-24);
+    mask-image: var(--icon-minus-plus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minus-plus-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-plus-16);
+    mask-image: var(--icon-minus-plus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/placeholders.scss
new file mode 100644
index 0000000000..eaa626cf6c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minus-plus-icon {
+  --icon-name: icon-minus-plus;
+  content: '';
+}
+%with-minus-plus-mask {
+  --icon-name: icon-minus-plus;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/property-16.scss
new file mode 100644
index 0000000000..08e9538bd7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-plus-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.72 3.22a.75.75 0 111.06 1.06l-8.5 8.5a.75.75 0 01-1.06-1.06l8.5-8.5zM2.25 4a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM10 10a.75.75 0 000 1.5h1.5V13a.75.75 0 001.5 0v-1.5h1.5a.75.75 0 000-1.5H13V8.5a.75.75 0 00-1.5 0V10H10z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/property-24.scss
new file mode 100644
index 0000000000..787a148ff7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-plus/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-plus-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M17.72 5.22a.75.75 0 111.06 1.06l-12.5 12.5a.75.75 0 01-1.06-1.06l12.5-12.5zM3.5 6.75A.75.75 0 014.25 6h5.5a.75.75 0 010 1.5h-5.5a.75.75 0 01-.75-.75zM16.5 13.5a.75.75 0 011.5 0V16h2.5a.75.75 0 010 1.5H18V20a.75.75 0 01-1.5 0v-2.5H14a.75.75 0 010-1.5h2.5v-2.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/index.scss
new file mode 100644
index 0000000000..be961c2839
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../minus-square/property-16';
+        @import '../minus-square/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/keyframes.scss
new file mode 100644
index 0000000000..47bdac5177
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minus-square-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minus-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-square-24);
+    mask-image: var(--icon-minus-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minus-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-square-16);
+    mask-image: var(--icon-minus-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/placeholders.scss
new file mode 100644
index 0000000000..36e6ac31c3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minus-square-fill-icon {
+  --icon-name: icon-minus-square-fill;
+  content: '';
+}
+%with-minus-square-fill-mask {
+  --icon-name: icon-minus-square-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/keyframes.scss
new file mode 100644
index 0000000000..b2c6ea74f6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minus-square {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minus-square-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-square-24);
+    mask-image: var(--icon-minus-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minus-square-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-square-16);
+    mask-image: var(--icon-minus-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/placeholders.scss
new file mode 100644
index 0000000000..ac80f0315e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minus-square-icon {
+  --icon-name: icon-minus-square;
+  content: '';
+}
+%with-minus-square-mask {
+  --icon-name: icon-minus-square;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/property-16.scss
new file mode 100644
index 0000000000..9a0916e17a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-square-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.25 7a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5z"/><path fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zM2.5 3.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/property-24.scss
new file mode 100644
index 0000000000..7448857e74
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus-square/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-square-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.25 11a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5z"/><path fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V4.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus/keyframes.scss
new file mode 100644
index 0000000000..6fd9c98aae
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-minus {
+  50% {
+
+    background-color: var(--icon-color, var(--color-minus-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-24);
+    mask-image: var(--icon-minus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-minus-500, currentColor));
+    -webkit-mask-image: var(--icon-minus-16);
+    mask-image: var(--icon-minus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus/placeholders.scss
new file mode 100644
index 0000000000..418b1f903a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-minus-icon {
+  --icon-name: icon-minus;
+  content: '';
+}
+%with-minus-mask {
+  --icon-name: icon-minus;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus/property-16.scss
new file mode 100644
index 0000000000..11b4245d88
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.5 7.75A.75.75 0 014.25 7h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/minus/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/minus/property-24.scss
new file mode 100644
index 0000000000..9147709086
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/minus/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-minus-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.5 11.75a.75.75 0 01.75-.75h13.5a.75.75 0 010 1.5H5.25a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/module/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/module/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/module/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/module/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/module/keyframes.scss
new file mode 100644
index 0000000000..a12ae1bb9d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/module/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-module {
+  50% {
+
+    background-color: var(--icon-color, var(--color-module-500, currentColor));
+    -webkit-mask-image: var(--icon-module-24);
+    mask-image: var(--icon-module-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-module-500, currentColor));
+    -webkit-mask-image: var(--icon-module-16);
+    mask-image: var(--icon-module-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/module/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/module/placeholders.scss
new file mode 100644
index 0000000000..6f2fb86945
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/module/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-module-icon {
+  --icon-name: icon-module;
+  content: '';
+}
+%with-module-mask {
+  --icon-name: icon-module;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/module/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/module/property-16.scss
new file mode 100644
index 0000000000..b196889749
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/module/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-module-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.5 4.75a.75.75 0 00-.897-.735l-5.5 1.1a.75.75 0 00-.603.735v5.4a.75.75 0 00.897.735l5.5-1.1a.75.75 0 00.603-.735v-5.4zM6 10.335v-3.87l4-.8v3.87l-4 .8z"/><path d="M15 2.33A2.25 2.25 0 0012.309.123l-9.5 1.9A2.25 2.25 0 001 4.23v9.44a2.25 2.25 0 002.691 2.207l9.5-1.9A2.25 2.25 0 0015 11.77V2.33zm-2.397-.736a.75.75 0 01.897.736v9.44a.75.75 0 01-.603.736l-9.5 1.9a.75.75 0 01-.897-.736V4.23a.75.75 0 01.603-.736l9.5-1.9z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/module/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/module/property-24.scss
new file mode 100644
index 0000000000..7e662cfb73
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/module/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-module-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M17 7.866a1.25 1.25 0 00-1.507-1.223l-7.5 1.578A1.25 1.25 0 007 9.444v7.69c0 .794.73 1.387 1.507 1.223l7.5-1.578A1.25 1.25 0 0017 15.556v-7.69zM8.5 9.647l7-1.473v7.179l-7 1.473V9.647z"/><path d="M21 4.719a2.75 2.75 0 00-3.32-2.69L5.18 4.68A2.75 2.75 0 003 7.37v12.911a2.75 2.75 0 003.32 2.69l12.5-2.651A2.75 2.75 0 0021 17.63V4.719zm-3.01-1.223a1.25 1.25 0 011.51 1.223v12.91c0 .591-.413 1.101-.99 1.224l-12.5 2.651a1.25 1.25 0 01-1.51-1.223V7.371c0-.591.413-1.101.99-1.223l12.5-2.652z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/keyframes.scss
new file mode 100644
index 0000000000..30ec6b9d18
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-monitor {
+  50% {
+
+    background-color: var(--icon-color, var(--color-monitor-500, currentColor));
+    -webkit-mask-image: var(--icon-monitor-24);
+    mask-image: var(--icon-monitor-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-monitor-500, currentColor));
+    -webkit-mask-image: var(--icon-monitor-16);
+    mask-image: var(--icon-monitor-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/placeholders.scss
new file mode 100644
index 0000000000..389cd0d65b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-monitor-icon {
+  --icon-name: icon-monitor;
+  content: '';
+}
+%with-monitor-mask {
+  --icon-name: icon-monitor;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/property-16.scss
new file mode 100644
index 0000000000..02de32768d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-monitor-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h11.5A2.25 2.25 0 0116 3.25v6.5A2.25 2.25 0 0113.75 12H8.5v1.5H11a.75.75 0 010 1.5H5a.75.75 0 010-1.5h2V12H2.25A2.25 2.25 0 010 9.75v-6.5zm13.75 7.25a.75.75 0 00.75-.75v-6.5a.75.75 0 00-.75-.75H2.25a.75.75 0 00-.75.75v6.5c0 .414.336.75.75.75h11.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/property-24.scss
new file mode 100644
index 0000000000..7edfb6cd97
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/monitor/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-monitor-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h16.5A2.75 2.75 0 0123 4.75v10.5A2.75 2.75 0 0120.25 18H12.5v2.5H16a.75.75 0 010 1.5H8a.75.75 0 010-1.5h3V18H3.75A2.75 2.75 0 011 15.25V4.75zM20.25 16.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h16.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/moon/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/moon/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/moon/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/moon/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/moon/keyframes.scss
new file mode 100644
index 0000000000..d6a57de16b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/moon/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-moon {
+  50% {
+
+    background-color: var(--icon-color, var(--color-moon-500, currentColor));
+    -webkit-mask-image: var(--icon-moon-24);
+    mask-image: var(--icon-moon-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-moon-500, currentColor));
+    -webkit-mask-image: var(--icon-moon-16);
+    mask-image: var(--icon-moon-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/moon/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/moon/placeholders.scss
new file mode 100644
index 0000000000..8c7bf314bd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/moon/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-moon-icon {
+  --icon-name: icon-moon;
+  content: '';
+}
+%with-moon-mask {
+  --icon-name: icon-moon;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/moon/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/moon/property-16.scss
new file mode 100644
index 0000000000..79075b6849
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/moon/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-moon-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.09 1.382a.75.75 0 01-.05.814 4.121 4.121 0 005.764 5.764.75.75 0 011.193.672 7.014 7.014 0 11-7.63-7.629.75.75 0 01.723.379zm-2.06 1.46a5.513 5.513 0 107.128 7.128A5.621 5.621 0 016.03 2.843z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/moon/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/moon/property-24.scss
new file mode 100644
index 0000000000..9fae435976
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/moon/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-moon-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M11.82 2.382a.75.75 0 01-.05.814 6.46 6.46 0 009.034 9.034.75.75 0 011.193.672 10.02 10.02 0 11-10.9-10.899.75.75 0 01.723.379zm-2.12 1.4A8.52 8.52 0 1020.217 14.3 7.96 7.96 0 019.7 3.783z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/keyframes.scss
new file mode 100644
index 0000000000..a9813ef91a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-more-horizontal {
+  50% {
+
+    background-color: var(--icon-color, var(--color-more-horizontal-500, currentColor));
+    -webkit-mask-image: var(--icon-more-horizontal-24);
+    mask-image: var(--icon-more-horizontal-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-more-horizontal-500, currentColor));
+    -webkit-mask-image: var(--icon-more-horizontal-16);
+    mask-image: var(--icon-more-horizontal-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/placeholders.scss
new file mode 100644
index 0000000000..2a2e88c21e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-more-horizontal-icon {
+  --icon-name: icon-more-horizontal;
+  content: '';
+}
+%with-more-horizontal-mask {
+  --icon-name: icon-more-horizontal;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/property-16.scss
new file mode 100644
index 0000000000..408bd660b9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-more-horizontal-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.5 6.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM8 6.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM12.5 6.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/property-24.scss
new file mode 100644
index 0000000000..2fb5791094
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/more-horizontal/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-more-horizontal-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5 10a2 2 0 100 4 2 2 0 000-4zM12 10a2 2 0 100 4 2 2 0 000-4zM19 10a2 2 0 100 4 2 2 0 000-4z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/keyframes.scss
new file mode 100644
index 0000000000..8a50639cf7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-more-vertical {
+  50% {
+
+    background-color: var(--icon-color, var(--color-more-vertical-500, currentColor));
+    -webkit-mask-image: var(--icon-more-vertical-24);
+    mask-image: var(--icon-more-vertical-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-more-vertical-500, currentColor));
+    -webkit-mask-image: var(--icon-more-vertical-16);
+    mask-image: var(--icon-more-vertical-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/placeholders.scss
new file mode 100644
index 0000000000..5ea969a78c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-more-vertical-icon {
+  --icon-name: icon-more-vertical;
+  content: '';
+}
+%with-more-vertical-mask {
+  --icon-name: icon-more-vertical;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/property-16.scss
new file mode 100644
index 0000000000..814cae206e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-more-vertical-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 2a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM8 6.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM8 11a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/property-24.scss
new file mode 100644
index 0000000000..eb8822c647
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/more-vertical/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-more-vertical-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3.5a2 2 0 100 4 2 2 0 000-4zM12 10a2 2 0 100 4 2 2 0 000-4zM12 16.5a2 2 0 100 4 2 2 0 000-4z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/keyframes.scss
new file mode 100644
index 0000000000..81d0909f94
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-mouse-pointer {
+  50% {
+
+    background-color: var(--icon-color, var(--color-mouse-pointer-500, currentColor));
+    -webkit-mask-image: var(--icon-mouse-pointer-24);
+    mask-image: var(--icon-mouse-pointer-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-mouse-pointer-500, currentColor));
+    -webkit-mask-image: var(--icon-mouse-pointer-16);
+    mask-image: var(--icon-mouse-pointer-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/placeholders.scss
new file mode 100644
index 0000000000..b8878c9459
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-mouse-pointer-icon {
+  --icon-name: icon-mouse-pointer;
+  content: '';
+}
+%with-mouse-pointer-mask {
+  --icon-name: icon-mouse-pointer;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/property-16.scss
new file mode 100644
index 0000000000..e01e1c2ca3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mouse-pointer-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.538 1.558a.75.75 0 00-.98.98l4.79 11.5a.75.75 0 001.403-.047l1.313-3.866 3.656 3.655a.75.75 0 101.06-1.06l-3.655-3.656 3.866-1.313a.75.75 0 00.048-1.402l-11.5-4.791zm4.432 10.07L3.643 3.643l7.985 3.327-3.127 1.062a.75.75 0 00-.47.469L6.97 11.628z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/property-24.scss
new file mode 100644
index 0000000000..4583cfd2e2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/mouse-pointer/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-mouse-pointer-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.038 2.058a.75.75 0 00-.98.98l7.29 17.5a.75.75 0 001.403-.047l2.2-6.479 5.769 5.768a.75.75 0 101.06-1.06l-5.768-5.768 6.48-2.201a.75.75 0 00.046-1.402l-17.5-7.291zm6.931 16.07L4.143 4.143l13.985 5.826-5.74 1.95a.75.75 0 00-.469.469l-1.95 5.74z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/move/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/move/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/move/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/move/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/move/keyframes.scss
new file mode 100644
index 0000000000..39d97569a0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/move/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-move {
+  50% {
+
+    background-color: var(--icon-color, var(--color-move-500, currentColor));
+    -webkit-mask-image: var(--icon-move-24);
+    mask-image: var(--icon-move-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-move-500, currentColor));
+    -webkit-mask-image: var(--icon-move-16);
+    mask-image: var(--icon-move-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/move/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/move/placeholders.scss
new file mode 100644
index 0000000000..f7191d284a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/move/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-move-icon {
+  --icon-name: icon-move;
+  content: '';
+}
+%with-move-mask {
+  --icon-name: icon-move;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/move/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/move/property-16.scss
new file mode 100644
index 0000000000..d58a3dc70e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/move/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-move-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M7.463.057A.748.748 0 007.22.22l-2 2a.75.75 0 001.06 1.06L7 2.56V7H2.56l.72-.72a.75.75 0 00-1.06-1.06l-2 2a.748.748 0 000 1.06l2 2a.75.75 0 101.06-1.06l-.72-.72H7v4.44l-.72-.72a.75.75 0 00-1.06 1.06l2 2a.748.748 0 001.06 0l2-2a.75.75 0 10-1.06-1.06l-.72.72V8.5h4.44l-.72.72a.75.75 0 101.06 1.06l2-2a.748.748 0 000-1.06l-2-2a.75.75 0 10-1.06 1.06l.72.72H8.5V2.56l.72.72a.75.75 0 101.06-1.06l-2-2a.748.748 0 00-.817-.163z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/move/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/move/property-24.scss
new file mode 100644
index 0000000000..37ed217352
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/move/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-move-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M11.463 1.057a.748.748 0 00-.243.163l-3 3a.75.75 0 001.06 1.06L11 3.56V11H3.56l1.72-1.72a.75.75 0 00-1.06-1.06l-3 3a.748.748 0 000 1.06l3 3a.75.75 0 001.06-1.06L3.56 12.5H11v7.44l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3a.748.748 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V12.5h7.44l-1.72 1.72a.75.75 0 101.06 1.06l3-3a.748.748 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06L19.94 11H12.5V3.56l1.72 1.72a.75.75 0 101.06-1.06l-3-3a.748.748 0 00-.817-.163z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/music/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/music/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/music/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/music/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/music/keyframes.scss
new file mode 100644
index 0000000000..5f0e0f2f24
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/music/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-music {
+  50% {
+
+    background-color: var(--icon-color, var(--color-music-500, currentColor));
+    -webkit-mask-image: var(--icon-music-24);
+    mask-image: var(--icon-music-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-music-500, currentColor));
+    -webkit-mask-image: var(--icon-music-16);
+    mask-image: var(--icon-music-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/music/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/music/placeholders.scss
new file mode 100644
index 0000000000..e8b917fee5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/music/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-music-icon {
+  --icon-name: icon-music;
+  content: '';
+}
+%with-music-mask {
+  --icon-name: icon-music;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/music/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/music/property-16.scss
new file mode 100644
index 0000000000..f6ee43d7e9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/music/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-music-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M13.5 3.687a.25.25 0 00-.293-.246l-6.5 1.121a.25.25 0 00-.207.247v7.348a2.75 2.75 0 01-2.318 2.716l-.678.107a2.164 2.164 0 01-.68-4.274L5 10.36V4.809c0-.852.613-1.58 1.452-1.725l6.5-1.121A1.75 1.75 0 0115 3.687v7.47a2.75 2.75 0 01-2.318 2.716l-.678.107a2.164 2.164 0 01-.68-4.274L13.5 9.36V3.687zM5 11.88l-1.94.309a.664.664 0 10.208 1.311l.678-.108A1.25 1.25 0 005 12.157v-.278zm6.56-.691l1.94-.31v.279a1.25 1.25 0 01-1.054 1.234l-.678.108a.664.664 0 11-.208-1.312z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/music/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/music/property-24.scss
new file mode 100644
index 0000000000..d1074ec422
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/music/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-music-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M20.5 4.27a.75.75 0 00-.873-.74l-9 1.5a.75.75 0 00-.627.74v13.286a2.75 2.75 0 01-2.298 2.712l-2 .334A2.75 2.75 0 012.5 19.389v-.445a2.75 2.75 0 012.298-2.712l3.702-.617V5.77c0-1.1.795-2.039 1.88-2.22l9-1.5A2.25 2.25 0 0122 4.271v12.785a2.75 2.75 0 01-2.298 2.712l-2 .334a2.75 2.75 0 01-3.202-2.713v-.445a2.75 2.75 0 012.298-2.712l3.702-.617V4.27zm0 10.865l-3.456.576A1.25 1.25 0 0016 16.944v.445c0 .773.694 1.36 1.456 1.233l2-.333a1.25 1.25 0 001.044-1.233v-1.92zM5.044 17.711l3.456-.576v1.92a1.25 1.25 0 01-1.045 1.234l-2 .333A1.25 1.25 0 014 19.39v-.445a1.25 1.25 0 011.045-1.233z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/keyframes.scss
new file mode 100644
index 0000000000..623fd62197
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-navigation-alt {
+  50% {
+
+    background-color: var(--icon-color, var(--color-navigation-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-navigation-alt-24);
+    mask-image: var(--icon-navigation-alt-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-navigation-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-navigation-alt-16);
+    mask-image: var(--icon-navigation-alt-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/placeholders.scss
new file mode 100644
index 0000000000..8d99c2cb8d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-navigation-alt-icon {
+  --icon-name: icon-navigation-alt;
+  content: '';
+}
+%with-navigation-alt-mask {
+  --icon-name: icon-navigation-alt;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/property-16.scss
new file mode 100644
index 0000000000..2fb1cc7780
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-navigation-alt-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 1a.75.75 0 01.691.46l5.25 12.5a.75.75 0 01-1.027.96L8 12.457 3.086 14.92a.75.75 0 01-1.027-.96l5.25-12.5A.75.75 0 018 1zM4.227 12.67l3.437-1.722a.75.75 0 01.672 0l3.437 1.723L8 3.687 4.227 12.67z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/property-24.scss
new file mode 100644
index 0000000000..2283ba1941
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation-alt/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-navigation-alt-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 2a.75.75 0 01.698.476l7.25 18.5a.75.75 0 01-1.053.935L12 18.207 5.105 21.91a.75.75 0 01-1.053-.935l7.25-18.5A.75.75 0 0112 2zM6.193 19.623l5.452-2.928a.75.75 0 01.71 0l5.452 2.928L12 4.806 6.193 19.623z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/keyframes.scss
new file mode 100644
index 0000000000..61c519f1bc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-navigation {
+  50% {
+
+    background-color: var(--icon-color, var(--color-navigation-500, currentColor));
+    -webkit-mask-image: var(--icon-navigation-24);
+    mask-image: var(--icon-navigation-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-navigation-500, currentColor));
+    -webkit-mask-image: var(--icon-navigation-16);
+    mask-image: var(--icon-navigation-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/placeholders.scss
new file mode 100644
index 0000000000..dc9b89c648
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-navigation-icon {
+  --icon-name: icon-navigation;
+  content: '';
+}
+%with-navigation-mask {
+  --icon-name: icon-navigation;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/property-16.scss
new file mode 100644
index 0000000000..d338858e40
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-navigation-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M14.78 1.22a.75.75 0 01.148.851l-5.921 12.5a.75.75 0 01-1.406-.14L6.395 9.606 1.568 8.4a.75.75 0 01-.14-1.406l12.5-5.92a.75.75 0 01.852.147zM3.965 7.452l3.23.807a.75.75 0 01.546.546l.807 3.23 4.125-8.708-8.708 4.125z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/property-24.scss
new file mode 100644
index 0000000000..c6d6bdcad5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/navigation/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-navigation-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M21.78 2.22a.75.75 0 01.148.851l-8.763 18.5a.75.75 0 01-1.406-.14L9.921 14.08l-7.353-1.838a.75.75 0 01-.14-1.406l18.5-8.763a.75.75 0 01.852.148zM4.965 11.294l5.756 1.439a.75.75 0 01.546.546l1.44 5.756 6.966-14.708-14.708 6.967z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/keyframes.scss
new file mode 100644
index 0000000000..2852e759f4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-network-alt {
+  50% {
+
+    background-color: var(--icon-color, var(--color-network-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-network-alt-24);
+    mask-image: var(--icon-network-alt-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-network-alt-500, currentColor));
+    -webkit-mask-image: var(--icon-network-alt-16);
+    mask-image: var(--icon-network-alt-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/placeholders.scss
new file mode 100644
index 0000000000..881b141f1c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-network-alt-icon {
+  --icon-name: icon-network-alt;
+  content: '';
+}
+%with-network-alt-mask {
+  --icon-name: icon-network-alt;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/property-16.scss
new file mode 100644
index 0000000000..1a1377ea20
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-network-alt-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M16 8a.75.75 0 00-.22-.53l-3.5-3.5a.75.75 0 10-1.06 1.06L14.19 8l-2.97 2.97a.75.75 0 101.06 1.06l3.5-3.5A.75.75 0 0016 8zM.22 8.53a.75.75 0 010-1.06l3.5-3.5a.75.75 0 011.06 1.06L1.81 8l2.97 2.97a.75.75 0 11-1.06 1.06l-3.5-3.5z"/><path d="M5 7a1 1 0 000 2h.01a1 1 0 100-2H5zM7 8a1 1 0 011-1h.01a1 1 0 010 2H8a1 1 0 01-1-1zM11 7a1 1 0 100 2h.01a1 1 0 100-2H11z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/property-24.scss
new file mode 100644
index 0000000000..3357d94fb0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/network-alt/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-network-alt-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M23 12a.75.75 0 00-.232-.543l-5.5-5.25a.75.75 0 00-1.036 1.086L21.164 12l-4.932 4.707a.75.75 0 001.036 1.085l5.5-5.25A.75.75 0 0023 12zM1 12a.75.75 0 01.232-.543l5.5-5.25a.75.75 0 111.036 1.086L2.836 12l4.932 4.707a.75.75 0 01-1.036 1.085l-5.5-5.25A.75.75 0 011 12z"/><path d="M8 11a1 1 0 100 2h.01a1 1 0 100-2H8zM11 12a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1zM16 11a1 1 0 100 2h.01a1 1 0 100-2H16z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/network/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/network/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/network/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/network/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/network/keyframes.scss
new file mode 100644
index 0000000000..60e81f4d92
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/network/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-network {
+  50% {
+
+    background-color: var(--icon-color, var(--color-network-500, currentColor));
+    -webkit-mask-image: var(--icon-network-24);
+    mask-image: var(--icon-network-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-network-500, currentColor));
+    -webkit-mask-image: var(--icon-network-16);
+    mask-image: var(--icon-network-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/network/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/network/placeholders.scss
new file mode 100644
index 0000000000..9e160054fa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/network/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-network-icon {
+  --icon-name: icon-network;
+  content: '';
+}
+%with-network-mask {
+  --icon-name: icon-network;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/network/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/network/property-16.scss
new file mode 100644
index 0000000000..cb0bf87281
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/network/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-network-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.25 0C5.56 0 5 .56 5 1.25v3.5C5 5.44 5.56 6 6.25 6H7v1H1a.75.75 0 000 1.5h2.5V10H2.25C1.56 10 1 10.56 1 11.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 16 7 15.44 7 14.75v-3.5C7 10.56 6.44 10 5.75 10H5V8.5h6V10h-.75C9.56 10 9 10.56 9 11.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25H12.5V8.5H15A.75.75 0 0015 7H8.5V6h1.25C10.44 6 11 5.44 11 4.75v-3.5C11 .56 10.44 0 9.75 0h-3.5zm4.25 11.5v3h3v-3h-3zm-8 0v3h3v-3h-3zm7-7v-3h-3v3h3z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/network/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/network/property-24.scss
new file mode 100644
index 0000000000..09b0e21b79
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/network/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-network-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.25 2.5A1.75 1.75 0 008.5 4.25v3.5c0 .966.784 1.75 1.75 1.75H11V11H3a.75.75 0 000 1.5h3.5v2H5.25a1.75 1.75 0 00-1.75 1.75v3.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 001.75-1.75v-3.5a1.75 1.75 0 00-1.75-1.75H8v-2h8v2h-.75a1.75 1.75 0 00-1.75 1.75v3.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 001.75-1.75v-3.5a1.75 1.75 0 00-1.75-1.75H17.5v-2H21a.75.75 0 000-1.5h-8.5V9.5h1.25a1.75 1.75 0 001.75-1.75v-3.5a1.75 1.75 0 00-1.75-1.75h-3.5zM10 4.25a.25.25 0 01.25-.25h3.5a.25.25 0 01.25.25v3.5a.25.25 0 01-.25.25h-3.5a.25.25 0 01-.25-.25v-3.5zm-5 12a.25.25 0 01.25-.25h3.5a.25.25 0 01.25.25v3.5a.25.25 0 01-.25.25h-3.5a.25.25 0 01-.25-.25v-3.5zM15.25 16a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 00.25-.25v-3.5a.25.25 0 00-.25-.25h-3.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/keyframes.scss
new file mode 100644
index 0000000000..6544cde1f8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-newspaper {
+  50% {
+
+    background-color: var(--icon-color, var(--color-newspaper-500, currentColor));
+    -webkit-mask-image: var(--icon-newspaper-24);
+    mask-image: var(--icon-newspaper-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-newspaper-500, currentColor));
+    -webkit-mask-image: var(--icon-newspaper-16);
+    mask-image: var(--icon-newspaper-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/placeholders.scss
new file mode 100644
index 0000000000..d255c49087
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-newspaper-icon {
+  --icon-name: icon-newspaper;
+  content: '';
+}
+%with-newspaper-mask {
+  --icon-name: icon-newspaper;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/property-16.scss
new file mode 100644
index 0000000000..faf4ee7a28
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-newspaper-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.75 9.5a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM6 12.75a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M7.25 2.5C6.56 2.5 6 3.06 6 3.75v3.5c0 .69.56 1.25 1.25 1.25h4.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-4.5zM7.5 7V4h4v3h-4z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M2.75 16h10.5a2.25 2.25 0 002.25-2.25V2.25A2.25 2.25 0 0013.25 0h-7.5A2.25 2.25 0 003.5 2.25V3.5h-.75A2.25 2.25 0 00.5 5.75v8A2.25 2.25 0 002.75 16zM14 2.25v11.5a.75.75 0 01-.75.75H4.872c.083-.235.128-.487.128-.75V2.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75zM2.75 14.5a.75.75 0 00.75-.75V5h-.75a.75.75 0 00-.75.75v8c0 .414.336.75.75.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/property-24.scss
new file mode 100644
index 0000000000..6a917fe3ba
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/newspaper/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-newspaper-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.75 13a.75.75 0 000 1.5h7a.75.75 0 000-1.5h-7zM9 16.75a.75.75 0 01.75-.75h4a.75.75 0 010 1.5h-4a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M10.75 4.5A1.75 1.75 0 009 6.25v3.5c0 .966.784 1.75 1.75 1.75h6.5A1.75 1.75 0 0019 9.75v-3.5a1.75 1.75 0 00-1.75-1.75h-6.5zm-.25 1.75a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v3.5a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25v-3.5z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M19.75 23H4.25a2.75 2.75 0 01-2.75-2.75v-12A2.75 2.75 0 014.25 5.5H5.5V3.75A2.75 2.75 0 018.25 1h11.5a2.75 2.75 0 012.75 2.75v16.5A2.75 2.75 0 0119.75 23zM21 3.75v16.5c0 .69-.56 1.25-1.25 1.25H6.7c.192-.375.3-.8.3-1.25V3.75c0-.69.56-1.25 1.25-1.25h11.5c.69 0 1.25.56 1.25 1.25zM3 20.25a1.25 1.25 0 102.5 0V7H4.25C3.56 7 3 7.56 3 8.25v12z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/node/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/node/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/node/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/node/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/node/keyframes.scss
new file mode 100644
index 0000000000..81da136918
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/node/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-node {
+  50% {
+
+    background-color: var(--icon-color, var(--color-node-500, currentColor));
+    -webkit-mask-image: var(--icon-node-24);
+    mask-image: var(--icon-node-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-node-500, currentColor));
+    -webkit-mask-image: var(--icon-node-16);
+    mask-image: var(--icon-node-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/node/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/node/placeholders.scss
new file mode 100644
index 0000000000..59993bfa2b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/node/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-node-icon {
+  --icon-name: icon-node;
+  content: '';
+}
+%with-node-mask {
+  --icon-name: icon-node;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/node/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/node/property-16.scss
new file mode 100644
index 0000000000..b97d5d4650
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/node/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-node-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4 6.25A2.25 2.25 0 016.25 4h3a2.25 2.25 0 012.25 2.25V7h3.25a.75.75 0 010 1.5H11.5v.75a2.25 2.25 0 01-2.25 2.25h-3A2.25 2.25 0 014 9.25V8.5H.75a.75.75 0 010-1.5H4v-.75zm6 0a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 00.75-.75v-3z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/node/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/node/property-24.scss
new file mode 100644
index 0000000000..facd77e4dd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/node/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-node-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7 9.25A2.75 2.75 0 019.75 6.5h5a2.75 2.75 0 012.75 2.75V11h4.75a.75.75 0 010 1.5H17.5v1.75A2.75 2.75 0 0114.75 17h-5A2.75 2.75 0 017 14.25V12.5H2.25a.75.75 0 010-1.5H7V9.25zm9 0C16 8.56 15.44 8 14.75 8h-5c-.69 0-1.25.56-1.25 1.25v5c0 .69.56 1.25 1.25 1.25h5c.69 0 1.25-.56 1.25-1.25v-5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/keyframes.scss
new file mode 100644
index 0000000000..7df22b2af5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-nomad-color {
+  50% {
+    background-image: var(--icon-nomad-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-nomad-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/placeholders.scss
new file mode 100644
index 0000000000..b7c4f21d05
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-nomad-color-icon {
+  --icon-name: icon-nomad-color;
+  content: '';
+}
+%with-nomad-color-mask {
+  --icon-name: icon-nomad-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/property-16.scss
new file mode 100644
index 0000000000..73ebe2a769
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-nomad-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%2306D092" d="M8 0L1 4v8l7 4 7-4V4L8 0zm3.119 8.797L9.254 9.863 7.001 8.65v2.549l-2.118 1.33v-5.33l1.68-1.018 2.332 1.216V4.794l2.23-1.322-.006 5.325z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/property-24.scss
new file mode 100644
index 0000000000..8e32c17be2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-nomad-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%2306D092" d="M12 .5L2 6.25v11.5l10 5.75 10-5.75V6.25L12 .5zm4.456 12.646l-2.664 1.533-3.22-1.745v3.664l-3.026 1.911v-7.661l2.401-1.463 3.331 1.748v-3.74l3.185-1.902-.008 7.655z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/index.scss
new file mode 100644
index 0000000000..fd3f9ca136
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../nomad-color/property-16';
+        @import '../nomad-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/keyframes.scss
new file mode 100644
index 0000000000..66246fa7ad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-nomad {
+  50% {
+
+    background-color: var(--icon-color, var(--color-nomad-500, currentColor));
+    -webkit-mask-image: var(--icon-nomad-color-24);
+    mask-image: var(--icon-nomad-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-nomad-500, currentColor));
+    -webkit-mask-image: var(--icon-nomad-color-16);
+    mask-image: var(--icon-nomad-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/placeholders.scss
new file mode 100644
index 0000000000..7dfea59501
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-nomad-icon {
+  --icon-name: icon-nomad;
+  content: '';
+}
+%with-nomad-mask {
+  --icon-name: icon-nomad;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/property-16.scss
new file mode 100644
index 0000000000..96216da14a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-nomad-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 0L1 4v8l7 4 7-4V4L8 0zm3.119 8.797L9.254 9.863 7.001 8.65v2.549l-2.118 1.33v-5.33l1.68-1.018 2.332 1.216V4.794l2.23-1.322-.006 5.325z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/property-24.scss
new file mode 100644
index 0000000000..977a0345c6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/nomad/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-nomad-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 0L1 4v8l7 4 7-4V4L8 0zm3.119 8.797L9.254 9.863 7.001 8.65v2.549l-2.118 1.33v-5.33l1.68-1.018 2.332 1.216V4.794l2.23-1.322-.006 5.325z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/index.scss
new file mode 100644
index 0000000000..dace09ab6a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../bell-off/property-16';
+        @import '../bell-off/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/keyframes.scss
new file mode 100644
index 0000000000..055451daf9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-notification-disabled {
+  50% {
+
+    background-color: var(--icon-color, var(--color-notification-disabled-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-off-24);
+    mask-image: var(--icon-bell-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-notification-disabled-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-off-16);
+    mask-image: var(--icon-bell-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/placeholders.scss
new file mode 100644
index 0000000000..f8228a1bde
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-disabled/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-notification-disabled-icon {
+  --icon-name: icon-notification-disabled;
+  content: '';
+}
+%with-notification-disabled-mask {
+  --icon-name: icon-notification-disabled;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/index.scss
new file mode 100644
index 0000000000..a32306149d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../bell-active-fill/property-16';
+        @import '../bell-active-fill/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/keyframes.scss
new file mode 100644
index 0000000000..724ff13582
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-notification-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-notification-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-active-fill-24);
+    mask-image: var(--icon-bell-active-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-notification-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-active-fill-16);
+    mask-image: var(--icon-bell-active-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/placeholders.scss
new file mode 100644
index 0000000000..6cacc38d6b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-notification-fill-icon {
+  --icon-name: icon-notification-fill;
+  content: '';
+}
+%with-notification-fill-mask {
+  --icon-name: icon-notification-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/index.scss
new file mode 100644
index 0000000000..b7b4708db6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../bell/property-16';
+        @import '../bell/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/keyframes.scss
new file mode 100644
index 0000000000..a785e4d14d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-notification-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-notification-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-24);
+    mask-image: var(--icon-bell-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-notification-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-bell-16);
+    mask-image: var(--icon-bell-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/placeholders.scss
new file mode 100644
index 0000000000..3a241ff479
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/notification-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-notification-outline-icon {
+  --icon-name: icon-notification-outline;
+  content: '';
+}
+%with-notification-outline-mask {
+  --icon-name: icon-notification-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/keyframes.scss
new file mode 100644
index 0000000000..771d00e3bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-octagon {
+  50% {
+
+    background-color: var(--icon-color, var(--color-octagon-500, currentColor));
+    -webkit-mask-image: var(--icon-octagon-24);
+    mask-image: var(--icon-octagon-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-octagon-500, currentColor));
+    -webkit-mask-image: var(--icon-octagon-16);
+    mask-image: var(--icon-octagon-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/placeholders.scss
new file mode 100644
index 0000000000..2d6a09048c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-octagon-icon {
+  --icon-name: icon-octagon;
+  content: '';
+}
+%with-octagon-mask {
+  --icon-name: icon-octagon;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/property-16.scss
new file mode 100644
index 0000000000..94a454f66a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-octagon-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.923.659A2.25 2.25 0 015.514 0h4.972c.597 0 1.169.237 1.59.659l3.265 3.264c.422.422.659.994.659 1.591v4.972a2.25 2.25 0 01-.659 1.59l-3.264 3.265a2.25 2.25 0 01-1.591.659H5.514a2.25 2.25 0 01-1.59-.659L.658 12.077A2.25 2.25 0 010 10.486V5.514c0-.597.237-1.169.659-1.59L3.923.658zm1.591.841a.75.75 0 00-.53.22L1.72 4.984a.75.75 0 00-.22.53v4.972c0 .199.079.39.22.53l3.264 3.264c.14.141.331.22.53.22h4.972a.75.75 0 00.53-.22l3.264-3.264a.75.75 0 00.22-.53V5.514a.75.75 0 00-.22-.53L11.016 1.72a.75.75 0 00-.53-.22H5.514z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/property-24.scss
new file mode 100644
index 0000000000..57606d849f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/octagon/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-octagon-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M6.64 1.805A2.75 2.75 0 018.585 1h6.83c.73 0 1.429.29 1.945.805l4.835 4.835A2.75 2.75 0 0123 8.585v6.83c0 .73-.29 1.429-.805 1.945l-4.835 4.835a2.75 2.75 0 01-1.945.805h-6.83a2.75 2.75 0 01-1.945-.805L1.805 17.36A2.75 2.75 0 011 15.415v-6.83c0-.73.29-1.429.805-1.945L6.64 1.805zm1.945.695c-.332 0-.65.132-.884.366L2.866 7.701a1.25 1.25 0 00-.366.884v6.83c0 .332.132.65.366.884l4.835 4.835c.234.234.552.366.884.366h6.83c.332 0 .65-.132.884-.366l4.835-4.835a1.25 1.25 0 00.366-.884v-6.83c0-.332-.132-.65-.366-.884l-4.835-4.835a1.25 1.25 0 00-.884-.366h-6.83z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/keyframes.scss
new file mode 100644
index 0000000000..14dc8b1590
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-okta-color {
+  50% {
+    background-image: var(--icon-okta-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-okta-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/placeholders.scss
new file mode 100644
index 0000000000..c9b27b78b1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-okta-color-icon {
+  --icon-name: icon-okta-color;
+  content: '';
+}
+%with-okta-color-mask {
+  --icon-name: icon-okta-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/property-16.scss
new file mode 100644
index 0000000000..cf31c03877
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-okta-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23007DC1" d="M8 1C4.143 1 1 4.12 1 8s3.121 7 7 7 7-3.121 7-7-3.143-7-7-7zm0 10.5c-1.94 0-3.5-1.56-3.5-3.5S6.06 4.5 8 4.5s3.5 1.56 3.5 3.5-1.56 3.5-3.5 3.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/property-24.scss
new file mode 100644
index 0000000000..686f1937b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/okta-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-okta-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23007DC1" d="M12 2C6.49 2 2 6.458 2 12s4.459 10 10 10 10-4.459 10-10S17.51 2 12 2zm0 15c-2.77 0-5-2.23-5-5s2.23-5 5-5 5 2.23 5 5-2.23 5-5 5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/okta/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/okta/index.scss
new file mode 100644
index 0000000000..57209848c2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/okta/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../okta-color/property-16';
+        @import '../okta-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/okta/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/okta/keyframes.scss
new file mode 100644
index 0000000000..a9bd2d1c33
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/okta/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-okta {
+  50% {
+
+    background-color: var(--icon-color, var(--color-okta-500, currentColor));
+    -webkit-mask-image: var(--icon-okta-color-24);
+    mask-image: var(--icon-okta-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-okta-500, currentColor));
+    -webkit-mask-image: var(--icon-okta-color-16);
+    mask-image: var(--icon-okta-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/okta/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/okta/placeholders.scss
new file mode 100644
index 0000000000..eb6445560c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/okta/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-okta-icon {
+  --icon-name: icon-okta;
+  content: '';
+}
+%with-okta-mask {
+  --icon-name: icon-okta;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/okta/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/okta/property-16.scss
new file mode 100644
index 0000000000..662cf6d8b3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/okta/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-okta-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 1C4.143 1 1 4.12 1 8s3.121 7 7 7 7-3.121 7-7-3.143-7-7-7zm0 10.5c-1.94 0-3.5-1.56-3.5-3.5S6.06 4.5 8 4.5s3.5 1.56 3.5 3.5-1.56 3.5-3.5 3.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/okta/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/okta/property-24.scss
new file mode 100644
index 0000000000..b3d9d2acf4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/okta/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-okta-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 1C4.143 1 1 4.12 1 8s3.121 7 7 7 7-3.121 7-7-3.143-7-7-7zm0 10.5c-1.94 0-3.5-1.56-3.5-3.5S6.06 4.5 8 4.5s3.5 1.56 3.5 3.5-1.56 3.5-3.5 3.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/keyframes.scss
new file mode 100644
index 0000000000..4774ef3bd7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-oracle-color {
+  50% {
+    background-image: var(--icon-oracle-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-oracle-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/placeholders.scss
new file mode 100644
index 0000000000..d54dcabc30
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-oracle-color-icon {
+  --icon-name: icon-oracle-color;
+  content: '';
+}
+%with-oracle-color-mask {
+  --icon-name: icon-oracle-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/property-16.scss
new file mode 100644
index 0000000000..0c00f21bd0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-oracle-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23EA1B22" fill-rule="evenodd" d="M.1 8c0 2.761 2.237 5 4.997 5h5.806A4.999 4.999 0 0015.9 8c0-2.761-2.237-5-4.997-5H5.097A4.999 4.999 0 00.1 8zm13.911 0a3.235 3.235 0 01-3.234 3.237h-5.55A3.235 3.235 0 011.991 8a3.235 3.235 0 013.234-3.236h5.551A3.235 3.235 0 0114.011 8z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/property-24.scss
new file mode 100644
index 0000000000..60b8b515bf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-oracle-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23EA1B22" fill-rule="evenodd" d="M2 12c0 3.48 2.832 6.3 6.326 6.3h7.348C19.168 18.3 22 15.48 22 12s-2.832-6.3-6.326-6.3H8.326C4.832 5.7 2 8.52 2 12zm17.61 0a4.086 4.086 0 01-4.095 4.078H8.489a4.086 4.086 0 01-4.095-4.077A4.086 4.086 0 018.49 7.923h7.026a4.086 4.086 0 014.094 4.078z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/index.scss
new file mode 100644
index 0000000000..8cb6b7b062
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../oracle-color/property-16';
+        @import '../oracle-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/keyframes.scss
new file mode 100644
index 0000000000..69ddd3da81
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-oracle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-oracle-500, currentColor));
+    -webkit-mask-image: var(--icon-oracle-color-24);
+    mask-image: var(--icon-oracle-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-oracle-500, currentColor));
+    -webkit-mask-image: var(--icon-oracle-color-16);
+    mask-image: var(--icon-oracle-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/placeholders.scss
new file mode 100644
index 0000000000..502828c335
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-oracle-icon {
+  --icon-name: icon-oracle;
+  content: '';
+}
+%with-oracle-mask {
+  --icon-name: icon-oracle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/property-16.scss
new file mode 100644
index 0000000000..eb7c2bc0e5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-oracle-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M.1 8c0 2.761 2.237 5 4.997 5h5.806A4.999 4.999 0 0015.9 8c0-2.761-2.237-5-4.997-5H5.097A4.999 4.999 0 00.1 8zm13.911 0a3.235 3.235 0 01-3.234 3.237h-5.55A3.235 3.235 0 011.991 8a3.235 3.235 0 013.234-3.236h5.551A3.235 3.235 0 0114.011 8z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/property-24.scss
new file mode 100644
index 0000000000..8d010bbf80
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/oracle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-oracle-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M.1 8c0 2.761 2.237 5 4.997 5h5.806A4.999 4.999 0 0015.9 8c0-2.761-2.237-5-4.997-5H5.097A4.999 4.999 0 00.1 8zm13.911 0a3.235 3.235 0 01-3.234 3.237h-5.55A3.235 3.235 0 011.991 8a3.235 3.235 0 013.234-3.236h5.551A3.235 3.235 0 0114.011 8z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/org/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/org/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/org/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/org/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/org/keyframes.scss
new file mode 100644
index 0000000000..b13c2c62c6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/org/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-org {
+  50% {
+
+    background-color: var(--icon-color, var(--color-org-500, currentColor));
+    -webkit-mask-image: var(--icon-org-24);
+    mask-image: var(--icon-org-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-org-500, currentColor));
+    -webkit-mask-image: var(--icon-org-16);
+    mask-image: var(--icon-org-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/org/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/org/placeholders.scss
new file mode 100644
index 0000000000..e0d2ce2fc9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/org/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-org-icon {
+  --icon-name: icon-org;
+  content: '';
+}
+%with-org-mask {
+  --icon-name: icon-org;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/org/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/org/property-16.scss
new file mode 100644
index 0000000000..a3c895b38c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/org/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-org-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h6.5A2.25 2.25 0 0112 3.25v2.112l2.05 1.453A2.25 2.25 0 0115 8.65v5.1c0 .69-.56 1.25-1.25 1.25h-2.5a.748.748 0 01-.75-.751v-11a.75.75 0 00-.75-.75h-6.5a.75.75 0 00-.75.75v11a.75.75 0 01-1.5 0v-11zM12 13.5V7.2l1.184.839a.75.75 0 01.316.612v4.85H12z" clip-rule="evenodd"/><path d="M4.75 10.55a.7.7 0 00-.7.7v3a.7.7 0 101.4 0v-2.3h2.1v2.3a.7.7 0 101.4 0v-3a.7.7 0 00-.7-.7h-3.5zM4.25 4.75A.75.75 0 015 4h.25a.75.75 0 010 1.5H5a.75.75 0 01-.75-.75zM7.75 4a.75.75 0 000 1.5H8A.75.75 0 008 4h-.25zM4.25 6.75A.75.75 0 015 6h.25a.75.75 0 010 1.5H5a.75.75 0 01-.75-.75zM7.75 6a.75.75 0 000 1.5H8A.75.75 0 008 6h-.25zM4.25 8.75A.75.75 0 015 8h.25a.75.75 0 010 1.5H5a.75.75 0 01-.75-.75zM7.75 8a.75.75 0 000 1.5H8A.75.75 0 008 8h-.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/org/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/org/property-24.scss
new file mode 100644
index 0000000000..984de2a28d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/org/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-org-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h10.5A2.75 2.75 0 0118 4.75v5.504l2.326.988A2.75 2.75 0 0122 13.773v6.477A1.75 1.75 0 0120.25 22h-3a.746.746 0 01-.622-.33.746.746 0 01-.128-.42V10.769a.81.81 0 010-.039V4.75c0-.69-.56-1.25-1.25-1.25H4.75c-.69 0-1.25.56-1.25 1.25v16.5a.75.75 0 01-1.5 0V4.75zM18 20.5v-8.616l1.739.739c.461.196.76.649.76 1.15v6.477a.25.25 0 01-.25.25H18z" clip-rule="evenodd"/><path d="M8.25 16C7.56 16 7 16.56 7 17.25v4a.75.75 0 001.5 0V17.5h3v3.75a.75.75 0 001.5 0v-4c0-.69-.56-1.25-1.25-1.25h-3.5zM7 6.75A.75.75 0 017.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 6.75zM11.75 6a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 9.75A.75.75 0 017.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 9.75zM11.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 12.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75zM11.75 12a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/outline/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/outline/keyframes.scss
new file mode 100644
index 0000000000..9ca1041b5d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-outline-24);
+    mask-image: var(--icon-outline-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-outline-16);
+    mask-image: var(--icon-outline-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/outline/placeholders.scss
new file mode 100644
index 0000000000..acbeaa2e1f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-outline-icon {
+  --icon-name: icon-outline;
+  content: '';
+}
+%with-outline-mask {
+  --icon-name: icon-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/outline/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/outline/property-16.scss
new file mode 100644
index 0000000000..e76aa44072
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/outline/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-outline-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.5 7.25a.75.75 0 01.75-.75h4a.75.75 0 010 1.5h-4a.75.75 0 01-.75-.75zM4.75 3.5a.75.75 0 000 1.5h.01a.75.75 0 000-1.5h-.01zM4 7.25a.75.75 0 01.75-.75h.01a.75.75 0 010 1.5h-.01A.75.75 0 014 7.25zM4.75 9.5a.75.75 0 000 1.5h.01a.75.75 0 000-1.5h-.01zM6.5 4.25a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75zM7.25 9.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z"/><path fill-rule="evenodd" d="M1 2.25A2.25 2.25 0 013.25 0h9.5A2.25 2.25 0 0115 2.25v11.5A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V2.25zm2.25-.75a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V2.25a.75.75 0 00-.75-.75h-9.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/outline/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/outline/property-24.scss
new file mode 100644
index 0000000000..26d3a53320
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/outline/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-outline-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.5 5.75A.75.75 0 017.25 5h.01a.75.75 0 010 1.5h-.01a.75.75 0 01-.75-.75zM7.25 9a.75.75 0 000 1.5h.01a.75.75 0 000-1.5h-.01zM6.5 13.75a.75.75 0 01.75-.75h.01a.75.75 0 010 1.5h-.01a.75.75 0 01-.75-.75zM7.25 17a.75.75 0 000 1.5h.01a.75.75 0 000-1.5h-.01zM9.5 9.75a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zM10.25 5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zM9.5 13.75a.75.75 0 01.75-.75h6.5a.75.75 0 010 1.5h-6.5a.75.75 0 01-.75-.75zM10.25 17a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5z"/><path fill-rule="evenodd" d="M3 3.75A2.75 2.75 0 015.75 1h12.5A2.75 2.75 0 0121 3.75v16.5A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25V3.75zM5.75 2.5c-.69 0-1.25.56-1.25 1.25v16.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V3.75c0-.69-.56-1.25-1.25-1.25H5.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/keyframes.scss
new file mode 100644
index 0000000000..50f60a2192
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-pack-color {
+  50% {
+    background-image: var(--icon-pack-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-pack-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/placeholders.scss
new file mode 100644
index 0000000000..95e0d27951
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-pack-color-icon {
+  --icon-name: icon-pack-color;
+  content: '';
+}
+%with-pack-color-mask {
+  --icon-name: icon-pack-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/property-16.scss
new file mode 100644
index 0000000000..ac9367ed26
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pack-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23252960" d="M4.3 9.866l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .145.08.279.2.361l2.6 1.548c.12.072.28.072.4 0l2.6-1.547c.12-.073.2-.207.2-.362v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051l-2.2 1.31a.396.396 0 01-.4 0z"/><path fill="url(%23pack-color-16__paint0_linear_1133_286)" d="M4.5 10.228v2.62c0 .227.18.412.4.412.07 0 .14-.02.2-.051l2.2-1.31c.12-.072.2-.206.2-.361v-2.62a.408.408 0 00-.4-.413c-.07 0-.14.02-.2.051l-2.2 1.31a.432.432 0 00-.2.362z"/><path fill="%23DE156C" d="M11.3 9.866l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .145.08.279.2.361l2.6 1.548c.12.072.28.072.4 0l2.6-1.547c.12-.073.2-.207.2-.362v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051l-2.2 1.31a.396.396 0 01-.4 0z"/><path fill="url(%23pack-color-16__paint1_linear_1133_286)" d="M11.5 10.228v2.62c0 .227.18.412.4.412.07 0 .14-.02.2-.051l2.2-1.31c.12-.072.2-.206.2-.361v-2.62a.408.408 0 00-.4-.413c-.07 0-.14.02-.2.051l-2.2 1.31a.432.432 0 00-.2.362z"/><g><path fill="%2347529D" d="M10.4 3.056l-2.2 1.31a.396.396 0 01-.4 0l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .145.08.279.2.361l2.6 1.548c.12.072.28.072.4 0l2.6-1.548c.12-.072.2-.206.2-.36v-2.62a.408.408 0 00-.4-.413c-.07 0-.14.02-.2.051z"/><path fill="url(%23pack-color-16__paint2_linear_1133_286)" d="M10.4 3.056l-2.2 1.31a.419.419 0 00-.2.361v2.62c0 .228.18.413.4.413.07 0 .14-.02.2-.051l2.2-1.31c.12-.073.2-.207.2-.362v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051z"/></g><defs><linearGradient id="pack-color-16__paint0_linear_1133_286" x1="6.004" x2="6.004" y1="8.502" y2="13.262" gradientUnits="userSpaceOnUse"><stop stop-color="%23757CBA"/><stop offset="1" stop-color="%23252960"/></linearGradient><linearGradient id="pack-color-16__paint1_linear_1133_286" x1="13.004" x2="13.004" y1="8.503" y2="13.262" gradientUnits="userSpaceOnUse"><stop stop-color="%23FC72C7"/><stop offset="1" stop-color="%23DE156C"/></linearGradient><linearGradient id="pack-color-16__paint2_linear_1133_286" x1="9.504" x2="9.504" y1="3.002" y2="7.762" gradientUnits="userSpaceOnUse"><stop stop-color="%238896DB"/><stop offset="1" stop-color="%2347529D"/></linearGradient></defs></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/property-24.scss
new file mode 100644
index 0000000000..68ebf53a18
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pack-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pack-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23DE156C" d="M16.933 14.686L13.45 12.59a.617.617 0 00-.87.247.599.599 0 00-.08.33v4.193c0 .231.127.445.317.578l4.116 2.475c.19.116.444.116.634 0l4.116-2.475A.672.672 0 0022 17.36v-4.192c0-.364-.285-.66-.633-.66a.696.696 0 00-.317.082l-3.483 2.096a.622.622 0 01-.634 0z"/><path fill="url(%23pack-color-24__paint0_linear_1133_275)" d="M17.25 15.264v4.192c0 .364.285.66.633.66.111 0 .222-.032.317-.082l3.483-2.096A.671.671 0 0022 17.36v-4.192c0-.363-.285-.66-.633-.66a.697.697 0 00-.317.082l-3.483 2.097a.693.693 0 00-.317.577z"/><path fill="%2347529D" d="M15.8 3.59l-3.483 2.096a.622.622 0 01-.634 0L8.2 3.59a.617.617 0 00-.87.247.6.6 0 00-.08.33V8.36c0 .23.127.446.317.578l4.116 2.475c.19.116.444.116.634 0l4.116-2.475a.672.672 0 00.317-.578V4.168c0-.364-.285-.66-.633-.66a.697.697 0 00-.317.082z"/><path fill="url(%23pack-color-24__paint1_linear_1133_275)" d="M15.8 3.59l-3.483 2.096a.671.671 0 00-.317.578v4.192c0 .363.285.66.633.66.111 0 .222-.033.317-.082l3.483-2.096a.672.672 0 00.317-.578V4.168c0-.364-.285-.66-.633-.66a.697.697 0 00-.317.082z"/><g><path fill="%23252960" d="M6.433 14.686L2.95 12.59a.617.617 0 00-.87.247.6.6 0 00-.08.33v4.193c0 .231.127.445.317.578l4.116 2.475c.19.116.444.116.634 0l4.116-2.475a.672.672 0 00.317-.578v-4.192c0-.364-.285-.66-.633-.66a.696.696 0 00-.317.082l-3.483 2.096a.621.621 0 01-.634 0z"/><path fill="url(%23pack-color-24__paint2_linear_1133_275)" d="M6.75 15.264v4.192c0 .364.285.66.633.66.111 0 .222-.032.317-.082l3.483-2.096a.671.671 0 00.317-.578v-4.192c0-.363-.285-.66-.633-.66a.697.697 0 00-.317.082l-3.483 2.097a.693.693 0 00-.317.577z"/></g><defs><linearGradient id="pack-color-24__paint0_linear_1133_275" x1="19.631" x2="19.631" y1="12.504" y2="20.119" gradientUnits="userSpaceOnUse"><stop stop-color="%23FC72C7"/><stop offset="1" stop-color="%23DE156C"/></linearGradient><linearGradient id="pack-color-24__paint1_linear_1133_275" x1="14.381" x2="14.381" y1="3.504" y2="11.119" gradientUnits="userSpaceOnUse"><stop stop-color="%238896DB"/><stop offset="1" stop-color="%2347529D"/></linearGradient><linearGradient id="pack-color-24__paint2_linear_1133_275" x1="9.131" x2="9.131" y1="12.504" y2="20.119" gradientUnits="userSpaceOnUse"><stop stop-color="%23757CBA"/><stop offset="1" stop-color="%23252960"/></linearGradient></defs></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pack/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pack/index.scss
new file mode 100644
index 0000000000..b7c706e292
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pack/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../pack-color/property-16';
+        @import '../pack-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pack/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pack/keyframes.scss
new file mode 100644
index 0000000000..18b7c9ec8e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pack/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-pack {
+  50% {
+
+    background-color: var(--icon-color, var(--color-pack-500, currentColor));
+    -webkit-mask-image: var(--icon-pack-color-24);
+    mask-image: var(--icon-pack-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-pack-500, currentColor));
+    -webkit-mask-image: var(--icon-pack-color-16);
+    mask-image: var(--icon-pack-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pack/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pack/placeholders.scss
new file mode 100644
index 0000000000..dd831dda81
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pack/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-pack-icon {
+  --icon-name: icon-pack;
+  content: '';
+}
+%with-pack-mask {
+  --icon-name: icon-pack;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pack/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pack/property-16.scss
new file mode 100644
index 0000000000..6d8257f005
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pack/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pack-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.2 4.366l2.2-1.31c.06-.03.13-.051.2-.051.22 0 .4.185.4.412v2.62c0 .154-.08.288-.2.36L8.2 7.944a.396.396 0 01-.4 0L5.2 6.397a.446.446 0 01-.2-.36v-2.62c0-.072.01-.144.05-.206a.392.392 0 01.55-.155l2.2 1.31c.12.072.28.072.4 0zM4.3 9.866l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .144.08.278.2.36l2.6 1.547c.12.072.28.072.4 0l2.6-1.547c.12-.072.2-.206.2-.36v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051l-2.2 1.31a.396.396 0 01-.4 0zM11.3 9.866l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .144.08.278.2.36l2.6 1.547c.12.072.28.072.4 0l2.6-1.547c.12-.072.2-.206.2-.36v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051l-2.2 1.31a.396.396 0 01-.4 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pack/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pack/property-24.scss
new file mode 100644
index 0000000000..f19c09b95d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pack/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pack-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.2 4.366l2.2-1.31c.06-.03.13-.051.2-.051.22 0 .4.185.4.412v2.62c0 .154-.08.288-.2.36L8.2 7.944a.396.396 0 01-.4 0L5.2 6.397a.446.446 0 01-.2-.36v-2.62c0-.072.01-.144.05-.206a.392.392 0 01.55-.155l2.2 1.31c.12.072.28.072.4 0zM4.3 9.866l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .144.08.278.2.36l2.6 1.547c.12.072.28.072.4 0l2.6-1.547c.12-.072.2-.206.2-.36v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051l-2.2 1.31a.396.396 0 01-.4 0zM11.3 9.866l-2.2-1.31a.392.392 0 00-.55.155.371.371 0 00-.05.206v2.62c0 .144.08.278.2.36l2.6 1.547c.12.072.28.072.4 0l2.6-1.547c.12-.072.2-.206.2-.36v-2.62a.408.408 0 00-.4-.412c-.07 0-.14.02-.2.051l-2.2 1.31a.396.396 0 01-.4 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/package/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/package/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/package/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/package/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/package/keyframes.scss
new file mode 100644
index 0000000000..65d6f6ad5e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/package/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-package {
+  50% {
+
+    background-color: var(--icon-color, var(--color-package-500, currentColor));
+    -webkit-mask-image: var(--icon-package-24);
+    mask-image: var(--icon-package-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-package-500, currentColor));
+    -webkit-mask-image: var(--icon-package-16);
+    mask-image: var(--icon-package-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/package/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/package/placeholders.scss
new file mode 100644
index 0000000000..149ec22a7d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/package/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-package-icon {
+  --icon-name: icon-package;
+  content: '';
+}
+%with-package-mask {
+  --icon-name: icon-package;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/package/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/package/property-16.scss
new file mode 100644
index 0000000000..975b42f454
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/package/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-package-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.02.678a2.25 2.25 0 00-2.04 0L1.682 3.374A1.25 1.25 0 001 4.488v6.717c0 .658.37 1.26.956 1.56l5.023 2.557a2.25 2.25 0 002.042 0l5.023-2.557a1.75 1.75 0 00.956-1.56V4.488c0-.47-.264-.9-.683-1.114L9.021.678zM7.66 2.015a.75.75 0 01.68 0l4.436 2.258-1.468.734-4.805-2.403 1.157-.59zM4.84 3.45l-1.617.823L8 6.661l1.631-.815-4.79-2.396zM2.5 5.588v5.617c0 .094.053.18.137.223l4.613 2.348V7.964L2.5 5.588zm10.863 5.84L8.75 13.776V7.964l4.75-2.375v5.617a.25.25 0 01-.137.223z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/package/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/package/property-24.scss
new file mode 100644
index 0000000000..f5ab258f0d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/package/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-package-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.794.754a2.75 2.75 0 012.412 0l8.811 4.298c.602.293.983.904.983 1.573v9.902a2.75 2.75 0 01-1.496 2.448l-8.25 4.226a2.75 2.75 0 01-2.508 0l-8.25-4.226A2.75 2.75 0 011 16.527V6.625c0-.67.381-1.28.983-1.573L10.794.754zm1.754 1.348a1.25 1.25 0 00-1.096 0l-2.82 1.375 8.505 4.253 3.52-1.672-8.109-3.956zm2.869 6.445L6.934 4.306 3.343 6.058 12 10.17l3.417-1.623zM2.5 16.527v-9.21l8.75 4.157v10.3L3.18 17.64a1.25 1.25 0 01-.68-1.113zm18.32 1.113l-8.07 4.133V11.474l8.75-4.156v9.21c0 .469-.263.898-.68 1.112z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/keyframes.scss
new file mode 100644
index 0000000000..80c2881b09
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-packer-color {
+  50% {
+    background-image: var(--icon-packer-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-packer-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/placeholders.scss
new file mode 100644
index 0000000000..4b0bb7f0dd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-packer-color-icon {
+  --icon-name: icon-packer-color;
+  content: '';
+}
+%with-packer-color-mask {
+  --icon-name: icon-packer-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/property-16.scss
new file mode 100644
index 0000000000..397af31f76
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-packer-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%2302A8EF"><path fill-rule="evenodd" d="M3 1.956l5.3 2.997V16L3 13.003V1.956z" clip-rule="evenodd"/><path d="M10.925 3.247L5.163 0v2.252l3.92 2.216v6.764l1.843 1.036c1.14.644 2.074.265 2.074-.858V6.447c-.001-1.115-.937-2.554-2.075-3.2z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/property-24.scss
new file mode 100644
index 0000000000..050fa679e3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/packer-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-packer-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%2302A8EF"><path fill-rule="evenodd" d="M5 3.311l7.42 4.308V23.5L5 19.192V3.312z" clip-rule="evenodd"/><path d="M16.095 5.168L8.028.5v3.238l5.488 3.184v9.723l2.58 1.49c1.598.925 2.904.38 2.904-1.233V9.768c-.002-1.604-1.312-3.672-2.905-4.6z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/packer/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/packer/index.scss
new file mode 100644
index 0000000000..fb726996f5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/packer/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../packer-color/property-16';
+        @import '../packer-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/packer/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/packer/keyframes.scss
new file mode 100644
index 0000000000..886e2f575a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/packer/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-packer {
+  50% {
+
+    background-color: var(--icon-color, var(--color-packer-500, currentColor));
+    -webkit-mask-image: var(--icon-packer-color-24);
+    mask-image: var(--icon-packer-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-packer-500, currentColor));
+    -webkit-mask-image: var(--icon-packer-color-16);
+    mask-image: var(--icon-packer-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/packer/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/packer/placeholders.scss
new file mode 100644
index 0000000000..f97ce63064
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/packer/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-packer-icon {
+  --icon-name: icon-packer;
+  content: '';
+}
+%with-packer-mask {
+  --icon-name: icon-packer;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/packer/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/packer/property-16.scss
new file mode 100644
index 0000000000..ffcb4d2bd3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/packer/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-packer-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.163 0l5.762 3.247c1.138.646 2.074 2.085 2.075 3.2v4.963c0 1.123-.933 1.502-2.074.858L9.083 11.23V4.469l-3.92-2.216V0z"/><path d="M8.3 4.953L3 1.956v11.047L8.3 16V4.953z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/packer/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/packer/property-24.scss
new file mode 100644
index 0000000000..4123190b29
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/packer/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-packer-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.163 0l5.762 3.247c1.138.646 2.074 2.085 2.075 3.2v4.963c0 1.123-.933 1.502-2.074.858L9.083 11.23V4.469l-3.92-2.216V0z"/><path d="M8.3 4.953L3 1.956v11.047L8.3 16V4.953z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/index.scss
new file mode 100644
index 0000000000..5126d8e326
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../outline/property-16';
+        @import '../outline/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/keyframes.scss
new file mode 100644
index 0000000000..b5dff46477
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-page-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-page-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-outline-24);
+    mask-image: var(--icon-outline-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-page-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-outline-16);
+    mask-image: var(--icon-outline-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/placeholders.scss
new file mode 100644
index 0000000000..27c9046461
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/page-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-page-outline-icon {
+  --icon-name: icon-page-outline;
+  content: '';
+}
+%with-page-outline-mask {
+  --icon-name: icon-page-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/keyframes.scss
new file mode 100644
index 0000000000..4137accb49
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-paperclip {
+  50% {
+
+    background-color: var(--icon-color, var(--color-paperclip-500, currentColor));
+    -webkit-mask-image: var(--icon-paperclip-24);
+    mask-image: var(--icon-paperclip-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-paperclip-500, currentColor));
+    -webkit-mask-image: var(--icon-paperclip-16);
+    mask-image: var(--icon-paperclip-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/placeholders.scss
new file mode 100644
index 0000000000..40a44a1660
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-paperclip-icon {
+  --icon-name: icon-paperclip;
+  content: '';
+}
+%with-paperclip-mask {
+  --icon-name: icon-paperclip;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/property-16.scss
new file mode 100644
index 0000000000..4411c9014b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-paperclip-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M9.387 2.102a2.034 2.034 0 012.864 0c.776.785.749 2.178 0 2.928-.75.749-6.39 6.465-6.39 6.465a.642.642 0 01-.898 0 .685.685 0 010-.937l5.896-5.966a.75.75 0 10-1.066-1.054L3.896 9.504a2.184 2.184 0 000 3.045 2.142 2.142 0 003.033 0l6.39-6.466c1.36-1.377 1.36-3.658 0-5.035-1.364-1.381-3.636-1.381-5 0L1.938 7.513A5.001 5.001 0 00.5 11.026c0 1.316.516 2.58 1.437 3.514A4.892 4.892 0 005.42 16c1.308 0 2.56-.526 3.482-1.46l6.383-6.466a.75.75 0 10-1.068-1.053l-6.382 6.465A3.392 3.392 0 015.419 14.5a3.392 3.392 0 01-2.414-1.014A3.501 3.501 0 012 11.026c0-.924.363-1.808 1.005-2.46l6.382-6.464z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/property-24.scss
new file mode 100644
index 0000000000..201d4c17cd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/paperclip/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-paperclip-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M16.072 2.5c-.868 0-1.7.342-2.31.949l-9.22 9.14A5.196 5.196 0 003 16.28c0 1.383.554 2.71 1.542 3.69a5.299 5.299 0 003.73 1.531c1.4 0 2.742-.552 3.73-1.532l9.22-9.14a.75.75 0 011.056 1.065l-9.22 9.14A6.799 6.799 0 018.273 23a6.799 6.799 0 01-4.786-1.966A6.696 6.696 0 011.5 16.279c0-1.785.715-3.495 1.986-4.755l9.219-9.14A4.783 4.783 0 0116.072 1c1.262 0 2.473.497 3.367 1.383a4.714 4.714 0 011.398 3.348c0 1.257-.504 2.46-1.398 3.347l-9.23 9.14a2.766 2.766 0 01-3.894 0 2.732 2.732 0 010-3.88l8.517-8.434a.75.75 0 011.055 1.066l-8.516 8.434a1.232 1.232 0 000 1.75 1.266 1.266 0 001.783 0l9.229-9.141a3.214 3.214 0 00.954-2.282c0-.855-.342-1.676-.954-2.282a3.283 3.283 0 00-2.311-.949z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/partner/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/partner/index.scss
new file mode 100644
index 0000000000..cd697e91e6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/partner/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../socket/property-16';
+        @import '../socket/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/partner/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/partner/keyframes.scss
new file mode 100644
index 0000000000..36cb922915
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/partner/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-partner {
+  50% {
+
+    background-color: var(--icon-color, var(--color-partner-500, currentColor));
+    -webkit-mask-image: var(--icon-socket-24);
+    mask-image: var(--icon-socket-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-partner-500, currentColor));
+    -webkit-mask-image: var(--icon-socket-16);
+    mask-image: var(--icon-socket-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/partner/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/partner/placeholders.scss
new file mode 100644
index 0000000000..ab8d88c93a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/partner/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-partner-icon {
+  --icon-name: icon-partner;
+  content: '';
+}
+%with-partner-mask {
+  --icon-name: icon-partner;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/path/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/path/index.scss
new file mode 100644
index 0000000000..322f0e7517
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/path/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../path/property-16';
+        @import '../path/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/path/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/path/keyframes.scss
new file mode 100644
index 0000000000..e21956253d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/path/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-path {
+  50% {
+
+    background-color: var(--icon-color, var(--color-path-500, currentColor));
+    -webkit-mask-image: var(--icon-path-24);
+    mask-image: var(--icon-path-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-path-500, currentColor));
+    -webkit-mask-image: var(--icon-path-16);
+    mask-image: var(--icon-path-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/path/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/path/placeholders.scss
new file mode 100644
index 0000000000..0166bd9895
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/path/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-path-icon {
+  --icon-name: icon-path;
+  content: '';
+}
+%with-path-mask {
+  --icon-name: icon-path;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/path/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/path/property-16.scss
new file mode 100644
index 0000000000..2c3e18ae38
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/path/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-path-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M13 0a3 3 0 00-1.65 5.506 7.338 7.338 0 01-.78 1.493c-.22.32-.472.635-.8 1.025a1.509 1.509 0 00-.832.085 12.722 12.722 0 00-1.773-1.124c-.66-.34-1.366-.616-2.215-.871a1.5 1.5 0 10-2.708 1.204c-.9 1.935-1.236 3.607-1.409 5.838a1.5 1.5 0 101.497.095c.162-2.07.464-3.55 1.25-5.253.381-.02.725-.183.979-.435.763.23 1.367.471 1.919.756a11.13 11.13 0 011.536.973 1.5 1.5 0 102.899-.296c.348-.415.64-.779.894-1.148.375-.548.665-1.103.964-1.857A3 3 0 1013 0zm-1.5 3a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/path/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/path/property-24.scss
new file mode 100644
index 0000000000..0d610b3015
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/path/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-path-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M19.5 1a3.5 3.5 0 00-1.668 6.578c-.665 1.8-1.174 2.997-2.267 4.503a2.001 2.001 0 00-1.605.21c-1.859-1.251-3.599-1.917-5.978-2.56A2 2 0 104.48 11.3c-.616 1.268-1.071 2.439-1.406 3.674-.344 1.267-.556 2.585-.694 4.125a2 2 0 101.497.103c.132-1.465.332-2.682.644-3.835.303-1.115.715-2.186 1.29-3.375a1.997 1.997 0 001.8-.806c2.236.605 3.801 1.208 5.454 2.311A2.002 2.002 0 0015 16a2 2 0 001.74-2.986c1.25-1.71 1.815-3.057 2.537-5.021A3.5 3.5 0 1019.5 1zm-2 3.5a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/keyframes.scss
new file mode 100644
index 0000000000..85a4be11b5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-pause-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-pause-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-pause-circle-24);
+    mask-image: var(--icon-pause-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-pause-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-pause-circle-16);
+    mask-image: var(--icon-pause-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/placeholders.scss
new file mode 100644
index 0000000000..eb3f876809
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-pause-circle-icon {
+  --icon-name: icon-pause-circle;
+  content: '';
+}
+%with-pause-circle-mask {
+  --icon-name: icon-pause-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/property-16.scss
new file mode 100644
index 0000000000..e4f0f6b24a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pause-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.25 5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 016.25 5zM10.5 5.75a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5z"/><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/property-24.scss
new file mode 100644
index 0000000000..4d5e6d121e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pause-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pause-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.25 7a.75.75 0 01.75.75v8.5a.75.75 0 01-1.5 0v-8.5A.75.75 0 019.25 7zM15.5 7.75a.75.75 0 00-1.5 0v8.5a.75.75 0 001.5 0v-8.5z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pause/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pause/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pause/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pause/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pause/keyframes.scss
new file mode 100644
index 0000000000..b87eceb259
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pause/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-pause {
+  50% {
+
+    background-color: var(--icon-color, var(--color-pause-500, currentColor));
+    -webkit-mask-image: var(--icon-pause-24);
+    mask-image: var(--icon-pause-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-pause-500, currentColor));
+    -webkit-mask-image: var(--icon-pause-16);
+    mask-image: var(--icon-pause-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pause/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pause/placeholders.scss
new file mode 100644
index 0000000000..84d7c69bac
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pause/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-pause-icon {
+  --icon-name: icon-pause;
+  content: '';
+}
+%with-pause-mask {
+  --icon-name: icon-pause;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pause/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pause/property-16.scss
new file mode 100644
index 0000000000..882d36bf36
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pause/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pause-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6 3.75a.75.75 0 00-1.5 0v8.5a.75.75 0 001.5 0v-8.5zM11.5 3.75a.75.75 0 00-1.5 0v8.5a.75.75 0 001.5 0v-8.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pause/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pause/property-24.scss
new file mode 100644
index 0000000000..5b6d00cc4f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pause/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pause-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9 5.25a.75.75 0 00-1.5 0v13.5a.75.75 0 001.5 0V5.25zM16.5 5.25a.75.75 0 00-1.5 0v13.5a.75.75 0 001.5 0V5.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/keyframes.scss
new file mode 100644
index 0000000000..337fe2533d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-pen-tool {
+  50% {
+
+    background-color: var(--icon-color, var(--color-pen-tool-500, currentColor));
+    -webkit-mask-image: var(--icon-pen-tool-24);
+    mask-image: var(--icon-pen-tool-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-pen-tool-500, currentColor));
+    -webkit-mask-image: var(--icon-pen-tool-16);
+    mask-image: var(--icon-pen-tool-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/placeholders.scss
new file mode 100644
index 0000000000..7c03b0a9e6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-pen-tool-icon {
+  --icon-name: icon-pen-tool;
+  content: '';
+}
+%with-pen-tool-mask {
+  --icon-name: icon-pen-tool;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/property-16.scss
new file mode 100644
index 0000000000..52d5641eef
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pen-tool-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M.923.02A.75.75 0 00.02.923l2.476 10.433a.75.75 0 00.587.563l4.245.822a.75.75 0 00.142.864l2.175 2.175a.75.75 0 001.06 0l5.075-5.075a.75.75 0 000-1.06L13.605 7.47a.75.75 0 00-.864-.142l-.822-4.245a.75.75 0 00-.563-.587L.923.02zm10.529 8.542l-.913-4.718L3.15 2.09l3.08 3.08a2.25 2.25 0 11-1.06 1.06l-3.08-3.08 1.753 7.388 4.718.913 2.89-2.89zM9.06 13.075l4.014-4.014 1.114 1.114-4.014 4.014-1.114-1.114zM6.45 7.201a.75.75 0 111.5 0 .75.75 0 01-1.5 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/property-24.scss
new file mode 100644
index 0000000000..fab905b384
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pen-tool/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pen-tool-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M1.923 1.02a.75.75 0 00-.903.903l3.5 14.75a.75.75 0 00.588.563l6.51 1.26-.148.149a.75.75 0 000 1.06l3.075 3.075a.75.75 0 001.06 0l7.175-7.175a.75.75 0 000-1.06l-3.075-3.075a.75.75 0 00-1.06 0l-.149.148-1.26-6.51a.75.75 0 00-.563-.588l-14.75-3.5zm15.293 11.878l-1.36-7.03L4.15 3.091l5.325 5.324a3 3 0 11-1.06 1.06L3.09 4.152l2.777 11.705 7.03 1.36 4.318-4.318zm-4.155 6.277l6.114-6.114 2.014 2.014-6.114 6.114-2.014-2.014zM9.5 11a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/keyframes.scss
new file mode 100644
index 0000000000..d4316db02b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-pencil-tool {
+  50% {
+
+    background-color: var(--icon-color, var(--color-pencil-tool-500, currentColor));
+    -webkit-mask-image: var(--icon-pencil-tool-24);
+    mask-image: var(--icon-pencil-tool-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-pencil-tool-500, currentColor));
+    -webkit-mask-image: var(--icon-pencil-tool-16);
+    mask-image: var(--icon-pencil-tool-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/placeholders.scss
new file mode 100644
index 0000000000..2a333db023
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-pencil-tool-icon {
+  --icon-name: icon-pencil-tool;
+  content: '';
+}
+%with-pencil-tool-mask {
+  --icon-name: icon-pencil-tool;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/property-16.scss
new file mode 100644
index 0000000000..7f6a71cd20
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pencil-tool-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M12.988 2.177a1.75 1.75 0 00-2.475 0L3.26 9.429a2.75 2.75 0 00-.609.923l-1.347 3.37a.75.75 0 00.975.974l3.368-1.347a2.75 2.75 0 00.924-.61l7.252-7.252a1.75 1.75 0 000-2.475l-.835-.835zm-1.415 1.06a.25.25 0 01.354 0l.836.836a.25.25 0 010 .354l-.638.637-1.19-1.19.638-.637zM9.875 4.936L4.32 10.49a1.25 1.25 0 00-.277.42l-.698 1.744 1.744-.698c.157-.063.3-.157.42-.277l5.554-5.554-1.19-1.19z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/property-24.scss
new file mode 100644
index 0000000000..f58e0e67f8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pencil-tool/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pencil-tool-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M18.945 4.884a2.75 2.75 0 00-3.89 0L6.05 13.89A4.75 4.75 0 005 15.484l-1.695 4.238a.75.75 0 00.975.974l4.237-1.695a4.75 4.75 0 001.595-1.051l9.005-9.005a2.75 2.75 0 000-3.89l-.171-.17zm-2.829 1.06a1.25 1.25 0 011.768 0l.171.172a1.25 1.25 0 010 1.768l-.555.555L15.56 6.5l.556-.555zM14.5 7.562L7.11 14.95a3.25 3.25 0 00-.719 1.091l-1.045 2.613 2.613-1.045c.409-.164.78-.409 1.091-.72L16.44 9.5 14.5 7.56z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/keyframes.scss
new file mode 100644
index 0000000000..7742a0d4bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-phone-call {
+  50% {
+
+    background-color: var(--icon-color, var(--color-phone-call-500, currentColor));
+    -webkit-mask-image: var(--icon-phone-call-24);
+    mask-image: var(--icon-phone-call-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-phone-call-500, currentColor));
+    -webkit-mask-image: var(--icon-phone-call-16);
+    mask-image: var(--icon-phone-call-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/placeholders.scss
new file mode 100644
index 0000000000..9f802ec956
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-phone-call-icon {
+  --icon-name: icon-phone-call;
+  content: '';
+}
+%with-phone-call-mask {
+  --icon-name: icon-phone-call;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/property-16.scss
new file mode 100644
index 0000000000..ec3eabd18a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-phone-call-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M5.847.533A2.21 2.21 0 004.391 0H2.206a2.21 2.21 0 00-2.09 1.501c-.098.29-.135.598-.107.903l.001.012a15.13 15.13 0 002.355 6.637c1.29 1.987 2.615 3.304 4.596 4.587a15.197 15.197 0 006.618 2.35h.014a2.21 2.21 0 002.406-2.204v-.075c-.002-.383-.008-1.771 0-2.087A2.204 2.204 0 0014.1 9.386h-.007a8.626 8.626 0 01-1.884-.47 2.21 2.21 0 00-2.327.497l-.515.513a10.903 10.903 0 01-3.313-3.305l.51-.509.003-.003a2.204 2.204 0 00.498-2.326 8.577 8.577 0 01-.47-1.88v-.007A2.204 2.204 0 005.847.533zM4.401 1.5a.71.71 0 01.708.604c.1.753.285 1.493.55 2.205l.001.001a.703.703 0 01-.157.742l-.924.923a.75.75 0 00-.122.902 12.403 12.403 0 004.655 4.646.75.75 0 00.9-.121l.923-.921.002-.002a.71.71 0 01.746-.157h.002c.713.266 1.454.45 2.209.55a.709.709 0 01.606.715 148.67 148.67 0 000 2.134v.07a.702.702 0 01-.481.671.71.71 0 01-.286.035 13.696 13.696 0 01-5.957-2.117c-1.805-1.168-2.979-2.335-4.153-4.144a13.63 13.63 0 01-2.12-5.972.702.702 0 01.419-.704c.09-.04.187-.06.286-.06H4.4zm2.664 2.283v-.001l-.703.264.703-.263z" clip-rule="evenodd"/><path d="M10.333.005a.75.75 0 10-.166 1.49 4.91 4.91 0 014.338 4.332.75.75 0 001.49-.167A6.41 6.41 0 0010.333.005z"/><path d="M10.394 2.53a.75.75 0 10-.288 1.472 2.395 2.395 0 011.892 1.892.75.75 0 101.472-.288 3.894 3.894 0 00-3.076-3.076z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/property-24.scss
new file mode 100644
index 0000000000..347a207922
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-call/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-phone-call-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.833.005a.75.75 0 00-.166 1.49 8.873 8.873 0 017.838 7.828.75.75 0 101.49-.167A10.373 10.373 0 0014.833.005zM14.894 4.29a.75.75 0 10-.288 1.473 4.596 4.596 0 013.631 3.63.75.75 0 101.472-.287 6.096 6.096 0 00-4.815-4.815z"/><path fill-rule="evenodd" d="M8.755 1.678A2.814 2.814 0 006.898 1h-3.09a2.815 2.815 0 00-2.66 1.911c-.125.37-.172.76-.137 1.15l.002.01a21.082 21.082 0 003.28 9.249c1.8 2.773 3.642 4.604 6.407 6.393a21.173 21.173 0 009.221 3.274l.014.002a2.815 2.815 0 002.829-1.671c.157-.359.237-.746.235-1.137v-.105c-.003-.539-.011-2.508 0-2.96a2.805 2.805 0 00-2.418-2.849h-.007c-.933-.123-1.85-.351-2.732-.68a2.815 2.815 0 00-2.964.632l-.9.899a15.724 15.724 0 01-5.124-5.112l.897-.895.003-.003a2.806 2.806 0 00.633-2.961 12.436 12.436 0 01-.68-2.726l-.001-.007a2.806 2.806 0 00-.951-1.736zM6.909 2.5A1.314 1.314 0 018.22 3.622c.138 1.042.394 2.066.762 3.05v.002a1.304 1.304 0 01-.293 1.377L7.382 9.356a.75.75 0 00-.122.902 17.226 17.226 0 006.466 6.454.75.75 0 00.9-.122l1.306-1.303.001-.002a1.311 1.311 0 011.384-.293h.001c.987.368 2.012.623 3.057.761a1.313 1.313 0 011.124 1.326c-.011.479-.002 2.48 0 3.007v.101a1.305 1.305 0 01-.89 1.244c-.172.058-.353.08-.533.064a19.676 19.676 0 01-8.562-3.041c-2.588-1.676-4.278-3.357-5.962-5.951A19.582 19.582 0 012.505 3.92a1.303 1.303 0 01.776-1.308c.167-.074.347-.112.53-.112h3.098zm3.478 3.647v-.001l-.702.264.702-.263z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/keyframes.scss
new file mode 100644
index 0000000000..8afe630c76
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-phone-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-phone-off-500, currentColor));
+    -webkit-mask-image: var(--icon-phone-off-24);
+    mask-image: var(--icon-phone-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-phone-off-500, currentColor));
+    -webkit-mask-image: var(--icon-phone-off-16);
+    mask-image: var(--icon-phone-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/placeholders.scss
new file mode 100644
index 0000000000..82237022f4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-phone-off-icon {
+  --icon-name: icon-phone-off;
+  content: '';
+}
+%with-phone-off-mask {
+  --icon-name: icon-phone-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/property-16.scss
new file mode 100644
index 0000000000..ca4cc5e741
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-phone-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M4.401 1.5a.71.71 0 01.708.604c.1.753.285 1.493.55 2.205l.002.001a.703.703 0 01-.158.742l-.924.923a.75.75 0 001.06 1.061l.925-.924.003-.003a2.204 2.204 0 00.498-2.326 8.577 8.577 0 01-.47-1.88v-.007A2.204 2.204 0 004.39 0H2.206a2.21 2.21 0 00-2.09 1.501c-.098.29-.135.598-.107.903l.001.012a15.131 15.131 0 002.355 6.637.75.75 0 101.258-.817 13.631 13.631 0 01-2.12-5.972.702.702 0 01.419-.704c.09-.04.187-.06.286-.06H4.4zM4.91 12.15l-2.63 2.63a.75.75 0 01-1.06-1.06l12.5-12.5a.75.75 0 111.06 1.06L8.05 9.012c.403.334.84.632 1.312.92l.52-.519a2.209 2.209 0 012.327-.496l-.262.703.263-.703c.608.227 1.24.384 1.883.468l.007.001a2.209 2.209 0 011.9 2.239c-.009.315-.002 1.703 0 2.086v.075a2.204 2.204 0 01-2.407 2.205l-.014-.001a15.196 15.196 0 01-6.618-2.35c-.752-.487-1.426-.947-2.05-1.49zm2.075-2.074l-1.01 1.01c.517.44 1.098.84 1.801 1.295a13.696 13.696 0 005.957 2.117l-.005-.001-.068.747.081-.746h-.008a.71.71 0 00.767-.706v-.071c-.002-.372-.009-1.792 0-2.134a.704.704 0 00-.606-.715h.004l.098-.743-.105.743h.003a10.13 10.13 0 01-2.209-.55h-.002a.712.712 0 00-.746.158l.001-.002-.53-.531.527.534-.923.921a.75.75 0 01-.9.121c-.743-.421-1.461-.878-2.127-1.447z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/property-24.scss
new file mode 100644
index 0000000000..91796160a2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-phone-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M6.91 2.5a1.314 1.314 0 011.31 1.122c.138 1.042.394 2.066.762 3.05v.002a1.304 1.304 0 01-.293 1.377L7.382 9.356a.75.75 0 101.06 1.062L9.75 9.11l.003-.003a2.807 2.807 0 00.633-2.962 12.438 12.438 0 01-.68-2.725l-.001-.007A2.806 2.806 0 006.898 1h-3.09a2.815 2.815 0 00-2.66 1.911c-.125.37-.172.76-.137 1.15l.002.011a21.081 21.081 0 003.28 9.248.75.75 0 101.259-.817A19.582 19.582 0 012.505 3.92a1.303 1.303 0 01.776-1.308c.167-.074.347-.112.53-.112h3.098zm3.477 3.646l-.702.264.702-.263zM7.666 17.395L2.28 22.78a.75.75 0 01-1.06-1.06l20.5-20.5a.75.75 0 111.06 1.06L11.673 13.388a15.738 15.738 0 002.305 1.73l.9-.899a2.813 2.813 0 012.965-.631c.882.328 1.798.556 2.731.678l.007.001a2.812 2.812 0 012.418 2.85c-.011.451-.002 2.42 0 2.96v.104a2.803 2.803 0 01-1.91 2.671c-.371.125-.764.172-1.154.137l-.013-.002a21.175 21.175 0 01-9.222-3.274c-1.144-.74-2.135-1.49-3.034-2.319zm2.945-2.945l-1.883 1.883c.814.745 1.722 1.432 2.787 2.12a19.673 19.673 0 008.56 3.042 1.315 1.315 0 001.315-.78c.073-.166.11-.346.11-.528l-.001-.1c-.002-.528-.011-2.53 0-3.008a1.305 1.305 0 00-1.124-1.326 14.007 14.007 0 01-3.057-.76h-.001a1.316 1.316 0 00-1.384.292l-.001.002-1.306 1.303a.75.75 0 01-.9.122 17.233 17.233 0 01-3.115-2.262z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone/keyframes.scss
new file mode 100644
index 0000000000..b384de108b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-phone {
+  50% {
+
+    background-color: var(--icon-color, var(--color-phone-500, currentColor));
+    -webkit-mask-image: var(--icon-phone-24);
+    mask-image: var(--icon-phone-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-phone-500, currentColor));
+    -webkit-mask-image: var(--icon-phone-16);
+    mask-image: var(--icon-phone-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone/placeholders.scss
new file mode 100644
index 0000000000..f12568f4fb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-phone-icon {
+  --icon-name: icon-phone;
+  content: '';
+}
+%with-phone-mask {
+  --icon-name: icon-phone;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone/property-16.scss
new file mode 100644
index 0000000000..303ed7cf64
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-phone-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M4.87 1.671a.71.71 0 00-.469-.171H2.208a.712.712 0 00-.671.48.702.702 0 00-.034.284c.227 2.129.954 4.175 2.12 5.972 1.175 1.81 2.348 2.976 4.153 4.145a13.696 13.696 0 005.957 2.117.713.713 0 00.708-.421c.039-.09.059-.187.059-.285v-.071c-.002-.371-.009-1.792 0-2.134a.703.703 0 00-.606-.715c-.755-.1-1.496-.284-2.209-.55h-.002a.71.71 0 00-.746.158h-.002l-.923.922a.75.75 0 01-.9.121 12.403 12.403 0 01-4.655-4.646.75.75 0 01.122-.902l.924-.923a.704.704 0 00.158-.742L5.66 4.31a10.077 10.077 0 01-.55-2.205.704.704 0 00-.24-.433zM4.39.001a2.21 2.21 0 012.205 1.895v.007c.086.643.243 1.273.47 1.88l-.703.263.702-.264a2.203 2.203 0 01-.497 2.327l-.003.003-.51.509a10.904 10.904 0 003.314 3.306l.514-.514a2.21 2.21 0 012.327-.496c.609.227 1.24.384 1.885.468l.006.001a2.209 2.209 0 011.9 2.239c-.008.315-.002 1.703 0 2.086v.075a2.202 2.202 0 01-1.502 2.098c-.29.098-.6.135-.905.107l-.014-.001a15.196 15.196 0 01-6.618-2.35c-1.981-1.282-3.306-2.6-4.596-4.587A15.131 15.131 0 01.01 2.416L.01 2.404A2.202 2.202 0 011.317.188 2.21 2.21 0 012.207 0H4.39z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/phone/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/phone/property-24.scss
new file mode 100644
index 0000000000..3538222b4d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/phone/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-phone-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7.778 2.817a1.314 1.314 0 00-.869-.317H3.81a1.316 1.316 0 00-1.241.89c-.058.17-.08.351-.064.53.326 3.06 1.37 6 3.047 8.583 1.684 2.595 3.374 4.276 5.963 5.951a19.676 19.676 0 008.56 3.041 1.316 1.316 0 001.315-.78c.073-.166.11-.346.11-.528l-.001-.1c-.002-.528-.011-2.53 0-3.008a1.304 1.304 0 00-1.124-1.326 14.006 14.006 0 01-3.057-.76h-.001a1.315 1.315 0 00-1.383.292l-.002.002-1.306 1.303a.75.75 0 01-.9.122 17.225 17.225 0 01-6.466-6.454.75.75 0 01.122-.902l1.307-1.305a1.306 1.306 0 00.294-1.377v-.001a13.937 13.937 0 01-.763-3.051 1.306 1.306 0 00-.442-.805zM6.898 1a2.814 2.814 0 012.808 2.414v.007c.124.932.352 1.846.681 2.726l-.702.263.702-.264a2.803 2.803 0 01-.633 2.962l-.003.003-.896.895a15.726 15.726 0 005.123 5.112l.9-.899a2.813 2.813 0 012.965-.632c.882.329 1.798.557 2.731.68h.007A2.813 2.813 0 0123 17.117c-.011.451-.002 2.42 0 2.96v.104a2.803 2.803 0 01-1.91 2.671c-.371.125-.764.172-1.154.137l-.013-.002a21.173 21.173 0 01-9.222-3.274c-2.765-1.79-4.607-3.62-6.406-6.393a21.081 21.081 0 01-3.281-9.248L1.01 4.06a2.803 2.803 0 011.665-2.82A2.815 2.815 0 013.81 1h3.09z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/keyframes.scss
new file mode 100644
index 0000000000..d7a379407f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-pie-chart {
+  50% {
+
+    background-color: var(--icon-color, var(--color-pie-chart-500, currentColor));
+    -webkit-mask-image: var(--icon-pie-chart-24);
+    mask-image: var(--icon-pie-chart-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-pie-chart-500, currentColor));
+    -webkit-mask-image: var(--icon-pie-chart-16);
+    mask-image: var(--icon-pie-chart-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/placeholders.scss
new file mode 100644
index 0000000000..8daf05a99b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-pie-chart-icon {
+  --icon-name: icon-pie-chart;
+  content: '';
+}
+%with-pie-chart-mask {
+  --icon-name: icon-pie-chart;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/property-16.scss
new file mode 100644
index 0000000000..e53b322b97
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pie-chart-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M7.75.05a.7.7 0 00-.7.7v7.5a.7.7 0 00.7.7h7.5a.7.7 0 00.7-.7 8.2 8.2 0 00-8.2-8.2zm.7 7.5V1.486a6.8 6.8 0 016.064 6.064H8.45z" clip-rule="evenodd"/><path d="M5.118 2.172A.75.75 0 004.452.828a8 8 0 1010.72 10.72.75.75 0 00-1.344-.666 6.5 6.5 0 11-8.71-8.71z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/property-24.scss
new file mode 100644
index 0000000000..1b3619fff6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pie-chart/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pie-chart-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M11.75 1a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h10.5a.75.75 0 00.75-.75A11.25 11.25 0 0011.75 1zm.75 10.5V2.529a9.751 9.751 0 018.971 8.971H12.5z" clip-rule="evenodd"/><path d="M8.08 3.344a.75.75 0 10-.62-1.366A11.002 11.002 0 001 12c0 6.075 4.925 11 11 11 4.457 0 8.294-2.65 10.022-6.46a.75.75 0 00-1.366-.619A9.502 9.502 0 0112 21.501 9.5 9.5 0 012.5 12a9.502 9.502 0 015.58-8.657z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pin/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pin/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pin/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pin/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pin/keyframes.scss
new file mode 100644
index 0000000000..993026c2ab
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pin/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-pin {
+  50% {
+
+    background-color: var(--icon-color, var(--color-pin-500, currentColor));
+    -webkit-mask-image: var(--icon-pin-24);
+    mask-image: var(--icon-pin-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-pin-500, currentColor));
+    -webkit-mask-image: var(--icon-pin-16);
+    mask-image: var(--icon-pin-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pin/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pin/placeholders.scss
new file mode 100644
index 0000000000..1641af3e2c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pin/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-pin-icon {
+  --icon-name: icon-pin;
+  content: '';
+}
+%with-pin-mask {
+  --icon-name: icon-pin;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pin/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pin/property-16.scss
new file mode 100644
index 0000000000..d60644d4a5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pin/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pin-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.121 1.4a1.25 1.25 0 011.76.008l3.707 3.708a1.25 1.25 0 010 1.768l-2.014 2.014a.75.75 0 01-.53.22h-1.16L9.452 10.55l-.248 2.231c-.103.924-1.16 1.435-1.945.88-.578-.409-1.458-1.052-2.18-1.68l-2.799 2.8a.75.75 0 01-1.06-1.061l2.799-2.8c-.628-.721-1.271-1.6-1.68-2.18-.555-.784-.044-1.841.88-1.944l2.23-.248 1.387-1.386V3.956a.75.75 0 01.225-.535L9.12 1.4zm.874 1.244L8.335 4.27v1.202a.75.75 0 01-.219.53L6.324 7.795a.75.75 0 01-.447.215l-2.053.228c.516.713 1.202 1.61 1.765 2.173s1.46 1.25 2.173 1.765l.228-2.053a.75.75 0 01.215-.447l1.838-1.839a.75.75 0 01.53-.22h1.16L13.351 6 9.995 2.644z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/pin/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/pin/property-24.scss
new file mode 100644
index 0000000000..83e1fdb08b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/pin/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-pin-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.614 3.482a1.75 1.75 0 012.464.012l4.425 4.425a1.75 1.75 0 010 2.475l-2.612 2.612a.75.75 0 01-.53.22h-1.634l-2.025 2.025-.275 2.48c-.144 1.295-1.622 2.005-2.713 1.218-.773-.559-1.768-1.309-2.573-2.026l-3.86 3.86a.75.75 0 11-1.061-1.06l3.86-3.861c-.717-.805-1.467-1.8-2.025-2.573-.788-1.09-.077-2.568 1.217-2.712l2.48-.276 1.964-1.963V6.643a.75.75 0 01.225-.535l2.673-2.626zm1.403 1.072a.25.25 0 00-.352-.001l-2.449 2.404V8.65a.75.75 0 01-.22.53l-2.369 2.369a.75.75 0 01-.447.215l-2.742.305c-.195.021-.257.218-.167.343.692.959 1.621 2.174 2.384 2.937.763.763 1.979 1.692 2.937 2.385.125.09.322.027.344-.168l.304-2.741a.75.75 0 01.216-.448l2.43-2.43a.75.75 0 01.53-.22h1.634l2.393-2.393a.25.25 0 000-.353l-4.426-4.426z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/keyframes.scss
new file mode 100644
index 0000000000..424cdda031
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-play-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-play-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-play-circle-24);
+    mask-image: var(--icon-play-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-play-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-play-circle-16);
+    mask-image: var(--icon-play-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/placeholders.scss
new file mode 100644
index 0000000000..6316991642
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-play-circle-icon {
+  --icon-name: icon-play-circle;
+  content: '';
+}
+%with-play-circle-mask {
+  --icon-name: icon-play-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/property-16.scss
new file mode 100644
index 0000000000..6fceb29dea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-play-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M7.421 4.356A1.25 1.25 0 005.5 5.411v5.178a1.25 1.25 0 001.921 1.055l4.069-2.59a1.25 1.25 0 000-2.109L7.42 4.356zM10.353 8L7 10.134V5.866L10.353 8z"/><path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/property-24.scss
new file mode 100644
index 0000000000..6331040f4b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-play-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M10.712 6.143C9.548 5.377 8 6.213 8 7.605v8.79c0 1.393 1.548 2.228 2.712 1.462l6.68-4.395a1.75 1.75 0 000-2.924l-6.68-4.395zM9.5 7.605a.25.25 0 01.387-.209l6.681 4.395a.25.25 0 010 .418l-6.68 4.395a.25.25 0 01-.388-.209v-8.79z"/><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/index.scss
new file mode 100644
index 0000000000..2b1b7f2ea3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../play-circle/property-16';
+        @import '../play-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/keyframes.scss
new file mode 100644
index 0000000000..23357b0c0b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-play-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-play-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-play-circle-24);
+    mask-image: var(--icon-play-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-play-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-play-circle-16);
+    mask-image: var(--icon-play-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/placeholders.scss
new file mode 100644
index 0000000000..eb31d81480
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-play-fill-icon {
+  --icon-name: icon-play-fill;
+  content: '';
+}
+%with-play-fill-mask {
+  --icon-name: icon-play-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/index.scss
new file mode 100644
index 0000000000..2b1b7f2ea3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../play-circle/property-16';
+        @import '../play-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/keyframes.scss
new file mode 100644
index 0000000000..08734a277d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-play-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-play-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-play-circle-24);
+    mask-image: var(--icon-play-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-play-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-play-circle-16);
+    mask-image: var(--icon-play-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/placeholders.scss
new file mode 100644
index 0000000000..6ca2ff6eb2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-play-outline-icon {
+  --icon-name: icon-play-outline;
+  content: '';
+}
+%with-play-outline-mask {
+  --icon-name: icon-play-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/index.scss
new file mode 100644
index 0000000000..d3835d350d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../play/property-16';
+        @import '../play/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/keyframes.scss
new file mode 100644
index 0000000000..3a7127e2ca
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-play-plain {
+  50% {
+
+    background-color: var(--icon-color, var(--color-play-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-play-24);
+    mask-image: var(--icon-play-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-play-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-play-16);
+    mask-image: var(--icon-play-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/placeholders.scss
new file mode 100644
index 0000000000..b904428edd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play-plain/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-play-plain-icon {
+  --icon-name: icon-play-plain;
+  content: '';
+}
+%with-play-plain-mask {
+  --icon-name: icon-play-plain;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play/keyframes.scss
new file mode 100644
index 0000000000..836620d56a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-play {
+  50% {
+
+    background-color: var(--icon-color, var(--color-play-500, currentColor));
+    -webkit-mask-image: var(--icon-play-24);
+    mask-image: var(--icon-play-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-play-500, currentColor));
+    -webkit-mask-image: var(--icon-play-16);
+    mask-image: var(--icon-play-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play/placeholders.scss
new file mode 100644
index 0000000000..9943bf0031
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-play-icon {
+  --icon-name: icon-play;
+  content: '';
+}
+%with-play-mask {
+  --icon-name: icon-play;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play/property-16.scss
new file mode 100644
index 0000000000..950a12d9da
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-play-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3 3.814C3 2.436 4.52 1.6 5.684 2.334l6.628 4.186a1.75 1.75 0 010 2.96l-6.628 4.185C4.52 14.401 3 13.564 3 12.185v-8.37zm1.883-.211a.25.25 0 00-.383.211v8.372a.25.25 0 00.383.211l6.628-4.186a.25.25 0 000-.422L4.884 3.603z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/play/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/play/property-24.scss
new file mode 100644
index 0000000000..9e3620dfc7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/play/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-play-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4 4.814C4 3.436 5.52 2.6 6.684 3.334l11.378 7.186a1.75 1.75 0 010 2.96L6.684 20.665C5.52 21.401 4 20.564 4 19.185V4.816zm1.883-.211a.25.25 0 00-.383.211v14.372a.25.25 0 00.383.211l11.378-7.186a.25.25 0 000-.422L5.884 4.603z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/index.scss
new file mode 100644
index 0000000000..fab2455047
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../plus-circle/property-16';
+        @import '../plus-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/keyframes.scss
new file mode 100644
index 0000000000..aeb19a98ff
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-plus-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-plus-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-circle-24);
+    mask-image: var(--icon-plus-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-plus-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-circle-16);
+    mask-image: var(--icon-plus-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/placeholders.scss
new file mode 100644
index 0000000000..c56a73d0c8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-plus-circle-fill-icon {
+  --icon-name: icon-plus-circle-fill;
+  content: '';
+}
+%with-plus-circle-fill-mask {
+  --icon-name: icon-plus-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/index.scss
new file mode 100644
index 0000000000..fab2455047
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../plus-circle/property-16';
+        @import '../plus-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/keyframes.scss
new file mode 100644
index 0000000000..313c51d7f2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-plus-circle-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-plus-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-circle-24);
+    mask-image: var(--icon-plus-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-plus-circle-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-circle-16);
+    mask-image: var(--icon-plus-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/placeholders.scss
new file mode 100644
index 0000000000..a2d7dd6fc8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-plus-circle-outline-icon {
+  --icon-name: icon-plus-circle-outline;
+  content: '';
+}
+%with-plus-circle-outline-mask {
+  --icon-name: icon-plus-circle-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/keyframes.scss
new file mode 100644
index 0000000000..3db624e872
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-plus-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-plus-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-circle-24);
+    mask-image: var(--icon-plus-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-plus-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-circle-16);
+    mask-image: var(--icon-plus-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/placeholders.scss
new file mode 100644
index 0000000000..c1bc2d967c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-plus-circle-icon {
+  --icon-name: icon-plus-circle;
+  content: '';
+}
+%with-plus-circle-mask {
+  --icon-name: icon-plus-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/property-16.scss
new file mode 100644
index 0000000000..52a3ad4c39
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-plus-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 4a.75.75 0 01.75.75V7h2.25a.75.75 0 010 1.5H8.5v2.25a.75.75 0 01-1.5 0V8.5H4.75a.75.75 0 010-1.5H7V4.75A.75.75 0 017.75 4z"/><path fill-rule="evenodd" d="M0 7.75a7.75 7.75 0 1115.5 0 7.75 7.75 0 01-15.5 0zM7.75 1.5a6.25 6.25 0 100 12.5 6.25 6.25 0 000-12.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/property-24.scss
new file mode 100644
index 0000000000..b84b536a8d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-plus-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 6.75a.75.75 0 01.75.75V11H16a.75.75 0 010 1.5h-3.5V16a.75.75 0 01-1.5 0v-3.5H7.5a.75.75 0 010-1.5H11V7.5a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M1 11.75C1 5.813 5.813 1 11.75 1S22.5 5.813 22.5 11.75 17.687 22.5 11.75 22.5 1 17.687 1 11.75zM11.75 2.5a9.25 9.25 0 100 18.5 9.25 9.25 0 000-18.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/index.scss
new file mode 100644
index 0000000000..1614627b19
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../plus/property-16';
+        @import '../plus/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/keyframes.scss
new file mode 100644
index 0000000000..ede103f0b3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-plus-plain {
+  50% {
+
+    background-color: var(--icon-color, var(--color-plus-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-24);
+    mask-image: var(--icon-plus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-plus-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-16);
+    mask-image: var(--icon-plus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/placeholders.scss
new file mode 100644
index 0000000000..454c56d4e8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-plain/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-plus-plain-icon {
+  --icon-name: icon-plus-plain;
+  content: '';
+}
+%with-plus-plain-mask {
+  --icon-name: icon-plus-plain;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/index.scss
new file mode 100644
index 0000000000..08dddeee5b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../plus-square/property-16';
+        @import '../plus-square/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/keyframes.scss
new file mode 100644
index 0000000000..dea4ca8f50
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-plus-square-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-plus-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-square-24);
+    mask-image: var(--icon-plus-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-plus-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-square-16);
+    mask-image: var(--icon-plus-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/placeholders.scss
new file mode 100644
index 0000000000..b63b043b92
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-plus-square-fill-icon {
+  --icon-name: icon-plus-square-fill;
+  content: '';
+}
+%with-plus-square-fill-mask {
+  --icon-name: icon-plus-square-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/keyframes.scss
new file mode 100644
index 0000000000..2c4110e49b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-plus-square {
+  50% {
+
+    background-color: var(--icon-color, var(--color-plus-square-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-square-24);
+    mask-image: var(--icon-plus-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-plus-square-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-square-16);
+    mask-image: var(--icon-plus-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/placeholders.scss
new file mode 100644
index 0000000000..6cb5048990
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-plus-square-icon {
+  --icon-name: icon-plus-square;
+  content: '';
+}
+%with-plus-square-mask {
+  --icon-name: icon-plus-square;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/property-16.scss
new file mode 100644
index 0000000000..506134da43
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-plus-square-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.75 4a.75.75 0 01.75.75V7h2.25a.75.75 0 010 1.5H8.5v2.25a.75.75 0 01-1.5 0V8.5H4.75a.75.75 0 010-1.5H7V4.75A.75.75 0 017.75 4z"/><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9A2.25 2.25 0 011 12.25v-9zm2.25-.75a.75.75 0 00-.75.75v9c0 .414.336.75.75.75h9a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/property-24.scss
new file mode 100644
index 0000000000..aeca2844fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus-square/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-plus-square-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.75 6.75a.75.75 0 01.75.75V11H16a.75.75 0 010 1.5h-3.5V16a.75.75 0 01-1.5 0v-3.5H7.5a.75.75 0 010-1.5H11V7.5a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14a2.75 2.75 0 012.75 2.75v14a2.75 2.75 0 01-2.75 2.75h-14A2.75 2.75 0 012 18.75v-14zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v14c0 .69.56 1.25 1.25 1.25h14c.69 0 1.25-.56 1.25-1.25v-14c0-.69-.56-1.25-1.25-1.25h-14z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus/keyframes.scss
new file mode 100644
index 0000000000..49a75f28c8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-plus {
+  50% {
+
+    background-color: var(--icon-color, var(--color-plus-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-24);
+    mask-image: var(--icon-plus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-plus-500, currentColor));
+    -webkit-mask-image: var(--icon-plus-16);
+    mask-image: var(--icon-plus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus/placeholders.scss
new file mode 100644
index 0000000000..1f60f5b38b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-plus-icon {
+  --icon-name: icon-plus;
+  content: '';
+}
+%with-plus-mask {
+  --icon-name: icon-plus;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus/property-16.scss
new file mode 100644
index 0000000000..b0229c4afc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-plus-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M9 3.5a.75.75 0 00-1.5 0V7H4a.75.75 0 000 1.5h3.5V12A.75.75 0 009 12V8.5h3.5a.75.75 0 000-1.5H9V3.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/plus/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/plus/property-24.scss
new file mode 100644
index 0000000000..22d31cc2ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/plus/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-plus-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M13 5a.75.75 0 00-1.5 0v6.5H5A.75.75 0 005 13h6.5v6.5a.75.75 0 001.5 0V13h6.5a.75.75 0 000-1.5H13V5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/port/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/port/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/port/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/port/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/port/keyframes.scss
new file mode 100644
index 0000000000..2602962c59
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/port/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-port {
+  50% {
+
+    background-color: var(--icon-color, var(--color-port-500, currentColor));
+    -webkit-mask-image: var(--icon-port-24);
+    mask-image: var(--icon-port-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-port-500, currentColor));
+    -webkit-mask-image: var(--icon-port-16);
+    mask-image: var(--icon-port-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/port/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/port/placeholders.scss
new file mode 100644
index 0000000000..ec41fa6795
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/port/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-port-icon {
+  --icon-name: icon-port;
+  content: '';
+}
+%with-port-mask {
+  --icon-name: icon-port;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/port/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/port/property-16.scss
new file mode 100644
index 0000000000..136f2f453d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/port/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-port-16: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.35 3.00001C8.35 2.08874 9.08873 1.35001 10 1.35001H14C14.9113 1.35001 15.65 2.08874 15.65 3.00001V7.00001C15.65 7.91128 14.9113 8.65001 14 8.65001H12.5834C12.5836 8.66071 12.5836 8.67147 12.5833 8.68229L12.5329 10.7L21.35 10.7C21.709 10.7 22 10.991 22 11.35C22 11.709 21.709 12 21.35 12H17.5826C17.594 12.0482 17.6 12.0984 17.6 12.15V14.35H19C19.9113 14.35 20.65 15.0887 20.65 16V20C20.65 20.9113 19.9113 21.65 19 21.65H15C14.0887 21.65 13.35 20.9113 13.35 20V16C13.35 15.0887 14.0887 14.35 15 14.35H16.3V12.15C16.3 12.0984 16.306 12.0482 16.3174 12H12.012C11.96 12.012 11.9056 12.0176 11.8498 12.0162C11.8053 12.0151 11.762 12.0096 11.7202 12H7.58261C7.59398 12.0482 7.6 12.0984 7.6 12.15V14.35H9C9.91127 14.35 10.65 15.0887 10.65 16V20C10.65 20.9113 9.91127 21.65 9 21.65H5C4.08873 21.65 3.35 20.9113 3.35 20V16C3.35 15.0887 4.08873 14.35 5 14.35H6.3V12.15C6.3 12.0984 6.30602 12.0482 6.31739 12H2.65C2.29102 12 2 11.709 2 11.35C2 10.991 2.29101 10.7 2.65 10.7L11.2325 10.7L11.2838 8.65001H10C9.08873 8.65001 8.35 7.91128 8.35 7.00001V3.00001ZM10 2.65001C9.8067 2.65001 9.65 2.80671 9.65 3.00001V7.00001C9.65 7.19331 9.8067 7.35001 10 7.35001H14C14.1933 7.35001 14.35 7.19331 14.35 7.00001V3.00001C14.35 2.80671 14.1933 2.65001 14 2.65001H10ZM5 15.65C4.8067 15.65 4.65 15.8067 4.65 16V20C4.65 20.1933 4.8067 20.35 5 20.35H9C9.1933 20.35 9.35 20.1933 9.35 20V16C9.35 15.8067 9.1933 15.65 9 15.65H5ZM14.65 16C14.65 15.8067 14.8067 15.65 15 15.65H19C19.1933 15.65 19.35 15.8067 19.35 16V20C19.35 20.1933 19.1933 20.35 19 20.35H15C14.8067 20.35 14.65 20.1933 14.65 20V16Z" fill="%236F7682"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/port/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/port/property-24.scss
new file mode 100644
index 0000000000..1217bfe31d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/port/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-port-24: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.35 3.00001C8.35 2.08874 9.08873 1.35001 10 1.35001H14C14.9113 1.35001 15.65 2.08874 15.65 3.00001V7.00001C15.65 7.91128 14.9113 8.65001 14 8.65001H12.5834C12.5836 8.66071 12.5836 8.67147 12.5833 8.68229L12.5329 10.7L21.35 10.7C21.709 10.7 22 10.991 22 11.35C22 11.709 21.709 12 21.35 12H17.5826C17.594 12.0482 17.6 12.0984 17.6 12.15V14.35H19C19.9113 14.35 20.65 15.0887 20.65 16V20C20.65 20.9113 19.9113 21.65 19 21.65H15C14.0887 21.65 13.35 20.9113 13.35 20V16C13.35 15.0887 14.0887 14.35 15 14.35H16.3V12.15C16.3 12.0984 16.306 12.0482 16.3174 12H12.012C11.96 12.012 11.9056 12.0176 11.8498 12.0162C11.8053 12.0151 11.762 12.0096 11.7202 12H7.58261C7.59398 12.0482 7.6 12.0984 7.6 12.15V14.35H9C9.91127 14.35 10.65 15.0887 10.65 16V20C10.65 20.9113 9.91127 21.65 9 21.65H5C4.08873 21.65 3.35 20.9113 3.35 20V16C3.35 15.0887 4.08873 14.35 5 14.35H6.3V12.15C6.3 12.0984 6.30602 12.0482 6.31739 12H2.65C2.29102 12 2 11.709 2 11.35C2 10.991 2.29101 10.7 2.65 10.7L11.2325 10.7L11.2838 8.65001H10C9.08873 8.65001 8.35 7.91128 8.35 7.00001V3.00001ZM10 2.65001C9.8067 2.65001 9.65 2.80671 9.65 3.00001V7.00001C9.65 7.19331 9.8067 7.35001 10 7.35001H14C14.1933 7.35001 14.35 7.19331 14.35 7.00001V3.00001C14.35 2.80671 14.1933 2.65001 14 2.65001H10ZM5 15.65C4.8067 15.65 4.65 15.8067 4.65 16V20C4.65 20.1933 4.8067 20.35 5 20.35H9C9.1933 20.35 9.35 20.1933 9.35 20V16C9.35 15.8067 9.1933 15.65 9 15.65H5ZM14.65 16C14.65 15.8067 14.8067 15.65 15 15.65H19C19.1933 15.65 19.35 15.8067 19.35 16V20C19.35 20.1933 19.1933 20.35 19 20.35H15C14.8067 20.35 14.65 20.1933 14.65 20V16Z" fill="%236F7682"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/power/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/power/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/power/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/power/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/power/keyframes.scss
new file mode 100644
index 0000000000..d395f89a1a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/power/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-power {
+  50% {
+
+    background-color: var(--icon-color, var(--color-power-500, currentColor));
+    -webkit-mask-image: var(--icon-power-24);
+    mask-image: var(--icon-power-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-power-500, currentColor));
+    -webkit-mask-image: var(--icon-power-16);
+    mask-image: var(--icon-power-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/power/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/power/placeholders.scss
new file mode 100644
index 0000000000..488d20e05f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/power/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-power-icon {
+  --icon-name: icon-power;
+  content: '';
+}
+%with-power-mask {
+  --icon-name: icon-power;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/power/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/power/property-16.scss
new file mode 100644
index 0000000000..6563357402
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/power/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-power-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.5 1.25a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5z"/><path d="M3.548 3.825a.75.75 0 00-1.096-1.024 7.25 7.25 0 1010.596 0 .75.75 0 00-1.096 1.024 5.75 5.75 0 11-8.404 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/power/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/power/property-24.scss
new file mode 100644
index 0000000000..f8285ca5d0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/power/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-power-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.5 2A.75.75 0 0011 2v10a.75.75 0 001.5 0V2z"/><path d="M5.562 7.293a.75.75 0 10-1.124-.992A9.716 9.716 0 002 12.75c0 5.385 4.365 9.75 9.75 9.75s9.75-4.365 9.75-9.75a9.716 9.716 0 00-2.438-6.45.75.75 0 10-1.124.993 8.25 8.25 0 11-12.375 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/printer/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/printer/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/printer/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/printer/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/printer/keyframes.scss
new file mode 100644
index 0000000000..8b7a2f13d4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/printer/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-printer {
+  50% {
+
+    background-color: var(--icon-color, var(--color-printer-500, currentColor));
+    -webkit-mask-image: var(--icon-printer-24);
+    mask-image: var(--icon-printer-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-printer-500, currentColor));
+    -webkit-mask-image: var(--icon-printer-16);
+    mask-image: var(--icon-printer-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/printer/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/printer/placeholders.scss
new file mode 100644
index 0000000000..2fa6c34995
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/printer/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-printer-icon {
+  --icon-name: icon-printer;
+  content: '';
+}
+%with-printer-mask {
+  --icon-name: icon-printer;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/printer/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/printer/property-16.scss
new file mode 100644
index 0000000000..eb16302ed9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/printer/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-printer-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 5H3V3.25A2.25 2.25 0 015.25 1h5.5A2.25 2.25 0 0113 3.25V5h.75A2.25 2.25 0 0116 7.25v3.5A2.25 2.25 0 0113.75 13H12.5v.25c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25V13H2.25A2.25 2.25 0 010 10.75v-3.5A2.25 2.25 0 012.25 5zm3-2.5a.75.75 0 00-.75.75V5h7V3.25a.75.75 0 00-.75-.75h-5.5zm-1.75 9V9.75c0-.69.56-1.25 1.25-1.25h6.5c.69 0 1.25.56 1.25 1.25v1.75h1.25a.75.75 0 00.75-.75v-3.5a.75.75 0 00-.75-.75H2.25a.75.75 0 00-.75.75v3.5c0 .414.336.75.75.75H3.5zM11 13H5v-3h6v3z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/printer/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/printer/property-24.scss
new file mode 100644
index 0000000000..997051d851
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/printer/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-printer-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M5 3.75V8H3.75A2.75 2.75 0 001 10.75v5.5A2.75 2.75 0 003.75 19H5v2.25c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0019 21.25V19h1.25A2.75 2.75 0 0023 16.25v-5.5A2.75 2.75 0 0020.25 8H19V3.75A2.75 2.75 0 0016.25 1h-8.5A2.75 2.75 0 005 3.75zM7.75 2.5c-.69 0-1.25.56-1.25 1.25V8h11V3.75c0-.69-.56-1.25-1.25-1.25h-8.5zM19 17.5h1.25c.69 0 1.25-.56 1.25-1.25v-5.5c0-.69-.56-1.25-1.25-1.25H3.75c-.69 0-1.25.56-1.25 1.25v5.5c0 .69.56 1.25 1.25 1.25H5v-2.75c0-.966.784-1.75 1.75-1.75h10.5c.966 0 1.75.784 1.75 1.75v2.75zM6.5 14.75a.25.25 0 01.25-.25h10.5a.25.25 0 01.25.25v6.5a.25.25 0 01-.25.25H6.75a.25.25 0 01-.25-.25v-6.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/keyframes.scss
new file mode 100644
index 0000000000..a4fb6bee2c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-protocol {
+  50% {
+
+    background-color: var(--icon-color, var(--color-protocol-500, currentColor));
+    -webkit-mask-image: var(--icon-protocol-24);
+    mask-image: var(--icon-protocol-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-protocol-500, currentColor));
+    -webkit-mask-image: var(--icon-protocol-16);
+    mask-image: var(--icon-protocol-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/placeholders.scss
new file mode 100644
index 0000000000..48f441167f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-protocol-icon {
+  --icon-name: icon-protocol;
+  content: '';
+}
+%with-protocol-mask {
+  --icon-name: icon-protocol;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/property-16.scss
new file mode 100644
index 0000000000..ef0a53a857
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-protocol-16: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.8104 19.9978C11.9269 19.8258 12.0639 19.6117 12.212 19.3572C12.5111 18.8431 12.8544 18.1657 13.1663 17.3382C12.9879 17.3233 12.8084 17.3101 12.6278 17.2987C11.9536 17.2562 11.2715 17.2398 10.5929 17.2563C10.8669 18.1335 11.2168 19.0463 11.6554 19.9927C11.7069 19.9949 11.7586 19.9966 11.8104 19.9978ZM9.897 19.7207C9.55842 18.9089 9.28019 18.1195 9.05511 17.354C8.53381 17.4089 8.01993 17.4871 7.51892 17.5915C7.73118 18.0727 7.97418 18.5653 8.25086 19.0689C8.7684 19.344 9.31972 19.5638 9.897 19.7207ZM5.45938 16.6077C5.48104 16.6001 5.50273 16.5925 5.52445 16.585C4.46623 13.3833 4.62347 10.6454 5.21707 8.50224C5.09245 8.46738 4.97167 8.43251 4.85496 8.39777C4.30807 9.4804 4 10.7042 4 12C4 13.7156 4.54003 15.3051 5.45938 16.6077ZM5.69311 7.07772C5.69614 7.07856 5.69918 7.07939 5.70221 7.08023C5.70623 7.07039 5.71025 7.06056 5.71427 7.05076C5.7072 7.05973 5.70015 7.06872 5.69311 7.07772ZM8.96894 4.59417C8.93129 4.63447 8.8765 4.69478 8.80813 4.77455C8.66145 4.94568 8.45292 5.20563 8.21744 5.5491C7.8904 6.02611 7.51351 6.66107 7.17773 7.44022C7.68086 7.54828 8.21954 7.64986 8.78391 7.73875L8.79848 7.68326C9.18148 6.23496 9.70589 5.06597 10.1744 4.20925C9.75921 4.30615 9.35646 4.43539 8.96894 4.59417ZM12.0548 4.00018C11.938 4.17254 11.8005 4.38729 11.6519 4.64277C11.2113 5.40008 10.6747 6.5116 10.2841 7.93527C10.6414 7.97247 11.0048 8.00331 11.3722 8.02649C12.1215 8.07374 12.8805 8.08863 13.6336 8.06207C13.3315 6.79045 12.8705 5.435 12.2062 4.00261C12.1559 4.00133 12.1054 4.00052 12.0548 4.00018ZM15.0311 19.4058C14.5954 19.5843 14.1406 19.7255 13.6705 19.8253C14.0078 19.2125 14.3757 18.4365 14.6998 17.5098C15.227 17.5833 15.7354 17.6688 16.2175 17.7617C16.0682 18.019 15.9209 18.2491 15.7826 18.4509C15.5471 18.7944 15.3386 19.0543 15.1919 19.2255C15.1235 19.3052 15.0687 19.3655 15.0311 19.4058ZM18.4508 16.7325C19.4247 15.4072 20 13.7708 20 12C20 10.7332 19.7056 9.53525 19.1814 8.47072C19.0626 8.52056 18.9428 8.56843 18.8221 8.61438C19.5339 11.495 19.2703 13.9558 18.6676 15.8898C18.5781 16.1768 18.4814 16.4516 18.3797 16.7138C18.4035 16.72 18.4272 16.7262 18.4508 16.7325ZM15.7491 4.93109C16.2637 5.8677 16.6617 6.76614 16.9623 7.6241C16.3749 7.76946 15.7668 7.87585 15.147 7.94868C14.8822 6.77294 14.493 5.53469 13.9502 4.23938C14.5831 4.39792 15.1861 4.63186 15.7491 4.93109ZM6.67301 8.86539C7.23389 8.98964 7.83778 9.10647 8.47251 9.20809C8.16114 11.101 8.13055 13.3457 8.68042 15.8864C8.10403 15.9541 7.53135 16.0491 6.96921 16.176C5.97706 13.2159 6.14482 10.7469 6.67301 8.86539ZM9.9596 9.4091C9.66322 11.1785 9.63171 13.3152 10.1908 15.7687C11.047 15.7336 11.8982 15.7497 12.7222 15.8017C13.0281 15.8209 13.3313 15.8453 13.6308 15.8739C14.0706 14.1822 14.3018 12.0541 13.9234 9.55152C13.0288 9.59288 12.1384 9.57779 11.2778 9.52351C10.8317 9.49538 10.3912 9.45656 9.9596 9.4091ZM16.9025 16.3689C16.3454 16.2539 15.7517 16.1474 15.1319 16.0564C15.5821 14.232 15.7965 12.0001 15.4213 9.42649C16.0858 9.3447 16.7447 9.22621 17.3877 9.06387C18.0053 11.6354 17.7519 13.7864 17.2355 15.4435C17.1337 15.7703 17.0212 16.0789 16.9025 16.3689Z" fill="%236F7682"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/property-24.scss
new file mode 100644
index 0000000000..1e4a869eef
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/protocol/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-protocol-24: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.8104 19.9978C11.9269 19.8258 12.0639 19.6117 12.212 19.3572C12.5111 18.8431 12.8544 18.1657 13.1663 17.3382C12.9879 17.3233 12.8084 17.3101 12.6278 17.2987C11.9536 17.2562 11.2715 17.2398 10.5929 17.2563C10.8669 18.1335 11.2168 19.0463 11.6554 19.9927C11.7069 19.9949 11.7586 19.9966 11.8104 19.9978ZM9.897 19.7207C9.55842 18.9089 9.28019 18.1195 9.05511 17.354C8.53381 17.4089 8.01993 17.4871 7.51892 17.5915C7.73118 18.0727 7.97418 18.5653 8.25086 19.0689C8.7684 19.344 9.31972 19.5638 9.897 19.7207ZM5.45938 16.6077C5.48104 16.6001 5.50273 16.5925 5.52445 16.585C4.46623 13.3833 4.62347 10.6454 5.21707 8.50224C5.09245 8.46738 4.97167 8.43251 4.85496 8.39777C4.30807 9.4804 4 10.7042 4 12C4 13.7156 4.54003 15.3051 5.45938 16.6077ZM5.69311 7.07772C5.69614 7.07856 5.69918 7.07939 5.70221 7.08023C5.70623 7.07039 5.71025 7.06056 5.71427 7.05076C5.7072 7.05973 5.70015 7.06872 5.69311 7.07772ZM8.96894 4.59417C8.93129 4.63447 8.8765 4.69478 8.80813 4.77455C8.66145 4.94568 8.45292 5.20563 8.21744 5.5491C7.8904 6.02611 7.51351 6.66107 7.17773 7.44022C7.68086 7.54828 8.21954 7.64986 8.78391 7.73875L8.79848 7.68326C9.18148 6.23496 9.70589 5.06597 10.1744 4.20925C9.75921 4.30615 9.35646 4.43539 8.96894 4.59417ZM12.0548 4.00018C11.938 4.17254 11.8005 4.38729 11.6519 4.64277C11.2113 5.40008 10.6747 6.5116 10.2841 7.93527C10.6414 7.97247 11.0048 8.00331 11.3722 8.02649C12.1215 8.07374 12.8805 8.08863 13.6336 8.06207C13.3315 6.79045 12.8705 5.435 12.2062 4.00261C12.1559 4.00133 12.1054 4.00052 12.0548 4.00018ZM15.0311 19.4058C14.5954 19.5843 14.1406 19.7255 13.6705 19.8253C14.0078 19.2125 14.3757 18.4365 14.6998 17.5098C15.227 17.5833 15.7354 17.6688 16.2175 17.7617C16.0682 18.019 15.9209 18.2491 15.7826 18.4509C15.5471 18.7944 15.3386 19.0543 15.1919 19.2255C15.1235 19.3052 15.0687 19.3655 15.0311 19.4058ZM18.4508 16.7325C19.4247 15.4072 20 13.7708 20 12C20 10.7332 19.7056 9.53525 19.1814 8.47072C19.0626 8.52056 18.9428 8.56843 18.8221 8.61438C19.5339 11.495 19.2703 13.9558 18.6676 15.8898C18.5781 16.1768 18.4814 16.4516 18.3797 16.7138C18.4035 16.72 18.4272 16.7262 18.4508 16.7325ZM15.7491 4.93109C16.2637 5.8677 16.6617 6.76614 16.9623 7.6241C16.3749 7.76946 15.7668 7.87585 15.147 7.94868C14.8822 6.77294 14.493 5.53469 13.9502 4.23938C14.5831 4.39792 15.1861 4.63186 15.7491 4.93109ZM6.67301 8.86539C7.23389 8.98964 7.83778 9.10647 8.47251 9.20809C8.16114 11.101 8.13055 13.3457 8.68042 15.8864C8.10403 15.9541 7.53135 16.0491 6.96921 16.176C5.97706 13.2159 6.14482 10.7469 6.67301 8.86539ZM9.9596 9.4091C9.66322 11.1785 9.63171 13.3152 10.1908 15.7687C11.047 15.7336 11.8982 15.7497 12.7222 15.8017C13.0281 15.8209 13.3313 15.8453 13.6308 15.8739C14.0706 14.1822 14.3018 12.0541 13.9234 9.55152C13.0288 9.59288 12.1384 9.57779 11.2778 9.52351C10.8317 9.49538 10.3912 9.45656 9.9596 9.4091ZM16.9025 16.3689C16.3454 16.2539 15.7517 16.1474 15.1319 16.0564C15.5821 14.232 15.7965 12.0001 15.4213 9.42649C16.0858 9.3447 16.7447 9.22621 17.3877 9.06387C18.0053 11.6354 17.7519 13.7864 17.2355 15.4435C17.1337 15.7703 17.0212 16.0789 16.9025 16.3689Z" fill="%236F7682"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/provider/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/provider/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/provider/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/provider/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/provider/keyframes.scss
new file mode 100644
index 0000000000..7034cd90d8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/provider/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-provider {
+  50% {
+
+    background-color: var(--icon-color, var(--color-provider-500, currentColor));
+    -webkit-mask-image: var(--icon-provider-24);
+    mask-image: var(--icon-provider-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-provider-500, currentColor));
+    -webkit-mask-image: var(--icon-provider-16);
+    mask-image: var(--icon-provider-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/provider/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/provider/placeholders.scss
new file mode 100644
index 0000000000..f493eba0a2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/provider/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-provider-icon {
+  --icon-name: icon-provider;
+  content: '';
+}
+%with-provider-mask {
+  --icon-name: icon-provider;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/provider/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/provider/property-16.scss
new file mode 100644
index 0000000000..9684039fad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/provider/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-provider-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm-.5 1.519a6.464 6.464 0 00-2 .48V5.19l2-1.09V1.518zM1.532 7.356A6.491 6.491 0 014 2.876V6.01L1.532 7.356zm.05 1.68L4 7.719v5.406a6.495 6.495 0 01-2.418-4.087zM7.5 11.423l-2 1.143V6.9l2-1.091v5.613zm1.5-.857V4.991L11 3.9v5.522l-2 1.143zm2 .585l-2 1.143v2.13a6.456 6.456 0 002-.655V11.15zm1.5 1.54v-2.397l1.887-1.079A6.488 6.488 0 0112.5 12.69zm0-4.125V3.31a6.482 6.482 0 011.976 4.126L12.5 8.565zm-5 4.585l-1.697.97a6.47 6.47 0 001.697.361V13.15zM9 3.282V1.576a6.455 6.455 0 011.961.636L9 3.282z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/provider/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/provider/property-24.scss
new file mode 100644
index 0000000000..3d55f91f57
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/provider/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-provider-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm-1 1.552a9.438 9.438 0 00-3.5 1.08v4.085L11 5.85V2.552zm-8.349 7.75A9.493 9.493 0 016 4.635v3.883l-3.349 1.786zm-.15 1.781L6 10.217v9.149a9.481 9.481 0 01-3.5-7.283zM11 17.02l-3.5 2.032V9.417L11 7.55v9.47zm1.5-.871V6.75L16 4.883v9.234l-3.5 2.032zm3.5-.298l-3.5 2.033v3.603a9.449 9.449 0 003.5-.868v-4.768zm1.5 3.896V14.98l3.977-2.309a9.491 9.491 0 01-3.977 7.076zm0-6.501V4.253a9.494 9.494 0 013.943 6.703l-3.943 2.29zM11 18.754l-3.117 1.81c.96.463 2.01.768 3.117.884v-2.694zM12.5 5.05V2.513c1.168.06 2.28.332 3.3.777l-3.3 1.76z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/public-default/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/public-default/index.scss
new file mode 100644
index 0000000000..96bd5f8253
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/public-default/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../globe/property-16';
+        @import '../globe/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/public-default/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/public-default/keyframes.scss
new file mode 100644
index 0000000000..ac4d049714
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/public-default/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-public-default {
+  50% {
+
+    background-color: var(--icon-color, var(--color-public-default-500, currentColor));
+    -webkit-mask-image: var(--icon-globe-24);
+    mask-image: var(--icon-globe-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-public-default-500, currentColor));
+    -webkit-mask-image: var(--icon-globe-16);
+    mask-image: var(--icon-globe-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/public-default/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/public-default/placeholders.scss
new file mode 100644
index 0000000000..0ea2883630
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/public-default/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-public-default-icon {
+  --icon-name: icon-public-default;
+  content: '';
+}
+%with-public-default-mask {
+  --icon-name: icon-public-default;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/index.scss
new file mode 100644
index 0000000000..e616bb4afc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../globe-private/property-16';
+        @import '../globe-private/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/keyframes.scss
new file mode 100644
index 0000000000..0de83840d2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-public-locked {
+  50% {
+
+    background-color: var(--icon-color, var(--color-public-locked-500, currentColor));
+    -webkit-mask-image: var(--icon-globe-private-24);
+    mask-image: var(--icon-globe-private-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-public-locked-500, currentColor));
+    -webkit-mask-image: var(--icon-globe-private-16);
+    mask-image: var(--icon-globe-private-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/placeholders.scss
new file mode 100644
index 0000000000..6673f373c8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/public-locked/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-public-locked-icon {
+  --icon-name: icon-public-locked;
+  content: '';
+}
+%with-public-locked-mask {
+  --icon-name: icon-public-locked;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/queue/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/queue/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/queue/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/queue/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/queue/keyframes.scss
new file mode 100644
index 0000000000..4b9be56bd9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/queue/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-queue {
+  50% {
+
+    background-color: var(--icon-color, var(--color-queue-500, currentColor));
+    -webkit-mask-image: var(--icon-queue-24);
+    mask-image: var(--icon-queue-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-queue-500, currentColor));
+    -webkit-mask-image: var(--icon-queue-16);
+    mask-image: var(--icon-queue-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/queue/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/queue/placeholders.scss
new file mode 100644
index 0000000000..3c30bba879
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/queue/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-queue-icon {
+  --icon-name: icon-queue;
+  content: '';
+}
+%with-queue-mask {
+  --icon-name: icon-queue;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/queue/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/queue/property-16.scss
new file mode 100644
index 0000000000..922cea1aa3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/queue/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-queue-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.23 2.674a.75.75 0 00-.96 1.152L3.578 5.75 1.27 7.674a.75.75 0 00.96 1.152l3-2.5a.75.75 0 000-1.152l-3-2.5zM8.25 5a.75.75 0 000 1.5h6a.75.75 0 000-1.5h-6zM5.5 9.25a.75.75 0 01.75-.75h8a.75.75 0 010 1.5h-8a.75.75 0 01-.75-.75zM6.25 12a.75.75 0 000 1.5h8a.75.75 0 000-1.5h-8z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/queue/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/queue/property-24.scss
new file mode 100644
index 0000000000..6005b745f5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/queue/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-queue-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.19 3.892a.75.75 0 10-.88 1.216L5.97 7.75l-3.66 2.642a.75.75 0 00.88 1.216l4.5-3.25a.75.75 0 000-1.216l-4.5-3.25zM11.75 7a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM8 12.75a.75.75 0 01.75-.75h12.5a.75.75 0 010 1.5H8.75a.75.75 0 01-.75-.75zM8.75 17a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H8.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/index.scss
new file mode 100644
index 0000000000..0d50e281f3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../circle-dot/property-16';
+        @import '../circle-dot/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/keyframes.scss
new file mode 100644
index 0000000000..52f3ef8b4d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-radio-button-checked {
+  50% {
+
+    background-color: var(--icon-color, var(--color-radio-button-checked-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-dot-24);
+    mask-image: var(--icon-circle-dot-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-radio-button-checked-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-dot-16);
+    mask-image: var(--icon-circle-dot-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/placeholders.scss
new file mode 100644
index 0000000000..0c0f86b112
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-checked/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-radio-button-checked-icon {
+  --icon-name: icon-radio-button-checked;
+  content: '';
+}
+%with-radio-button-checked-mask {
+  --icon-name: icon-radio-button-checked;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/index.scss
new file mode 100644
index 0000000000..da2541dff7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../circle/property-16';
+        @import '../circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/keyframes.scss
new file mode 100644
index 0000000000..ef7a4a0af8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-radio-button-unchecked {
+  50% {
+
+    background-color: var(--icon-color, var(--color-radio-button-unchecked-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-24);
+    mask-image: var(--icon-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-radio-button-unchecked-500, currentColor));
+    -webkit-mask-image: var(--icon-circle-16);
+    mask-image: var(--icon-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/placeholders.scss
new file mode 100644
index 0000000000..9c398711ff
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio-button-unchecked/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-radio-button-unchecked-icon {
+  --icon-name: icon-radio-button-unchecked;
+  content: '';
+}
+%with-radio-button-unchecked-mask {
+  --icon-name: icon-radio-button-unchecked;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio/keyframes.scss
new file mode 100644
index 0000000000..e4fcad3396
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-radio {
+  50% {
+
+    background-color: var(--icon-color, var(--color-radio-500, currentColor));
+    -webkit-mask-image: var(--icon-radio-24);
+    mask-image: var(--icon-radio-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-radio-500, currentColor));
+    -webkit-mask-image: var(--icon-radio-16);
+    mask-image: var(--icon-radio-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio/placeholders.scss
new file mode 100644
index 0000000000..ac968d7555
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-radio-icon {
+  --icon-name: icon-radio;
+  content: '';
+}
+%with-radio-mask {
+  --icon-name: icon-radio;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio/property-16.scss
new file mode 100644
index 0000000000..7acc1b0423
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-radio-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.41 2.476a.75.75 0 01-.013 1.06A6.235 6.235 0 001.5 8c0 1.67.68 3.276 1.897 4.463a.75.75 0 01-1.048 1.074A7.735 7.735 0 010 8c0-2.08.847-4.072 2.35-5.537a.75.75 0 011.06.013zM12.59 2.476a.75.75 0 011.06-.013A7.735 7.735 0 0116 8c0 2.08-.847 4.072-2.35 5.537a.75.75 0 01-1.047-1.074A6.234 6.234 0 0014.5 8c0-1.67-.68-3.276-1.897-4.463a.75.75 0 01-.013-1.06zM7 8a1 1 0 011-1h.01a1 1 0 010 2H8a1 1 0 01-1-1z"/><path d="M5.864 6.046a.75.75 0 10-1.028-1.092c-.42.395-.756.867-.987 1.39a4.1 4.1 0 000 3.307c.23.523.567.994.987 1.39a.75.75 0 001.028-1.093 2.774 2.774 0 01-.642-.902 2.6 2.6 0 010-2.098c.147-.334.365-.641.642-.902zM11.164 4.96a.75.75 0 10-1.028 1.092c.277.26.495.567.642.902a2.601 2.601 0 010 2.098 2.775 2.775 0 01-.642.902.75.75 0 101.028 1.092c.42-.395.756-.866.986-1.39a4.1 4.1 0 000-3.307 4.273 4.273 0 00-.986-1.39z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/radio/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/radio/property-24.scss
new file mode 100644
index 0000000000..772cc10acc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/radio/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-radio-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5.282 4.22a.75.75 0 010 1.06 9.502 9.502 0 000 13.436.75.75 0 01-1.06 1.06 11.002 11.002 0 010-15.556.75.75 0 011.06 0zM18.718 4.22a.75.75 0 011.06 0 11.002 11.002 0 010 15.557.75.75 0 11-1.06-1.06 9.502 9.502 0 000-13.437.75.75 0 010-1.06z"/><path fill-rule="evenodd" d="M9 12a3 3 0 116 0 3 3 0 01-6 0zm3-1.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd"/><path d="M8.117 8.026A.75.75 0 107.05 6.974a7.11 7.11 0 00-1.517 2.305 7.194 7.194 0 000 5.432 7.11 7.11 0 001.517 2.305.75.75 0 001.068-1.053 5.611 5.611 0 01-1.196-1.819 5.694 5.694 0 010-4.299 5.61 5.61 0 011.196-1.819zM16.951 6.984a.75.75 0 10-1.069 1.053c.513.52.92 1.138 1.197 1.819a5.693 5.693 0 010 4.299 5.612 5.612 0 01-1.197 1.819.75.75 0 001.07 1.052 7.11 7.11 0 001.516-2.305 7.194 7.194 0 000-5.432 7.11 7.11 0 00-1.517-2.305z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/random/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/random/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/random/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/random/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/random/keyframes.scss
new file mode 100644
index 0000000000..94038680a3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/random/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-random {
+  50% {
+
+    background-color: var(--icon-color, var(--color-random-500, currentColor));
+    -webkit-mask-image: var(--icon-random-24);
+    mask-image: var(--icon-random-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-random-500, currentColor));
+    -webkit-mask-image: var(--icon-random-16);
+    mask-image: var(--icon-random-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/random/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/random/placeholders.scss
new file mode 100644
index 0000000000..4c68fd336f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/random/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-random-icon {
+  --icon-name: icon-random;
+  content: '';
+}
+%with-random-mask {
+  --icon-name: icon-random;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/random/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/random/property-16.scss
new file mode 100644
index 0000000000..4f5ce1eaf7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/random/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-random-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5 4a1 1 0 000 2h.01a1 1 0 000-2H5zM7 8a1 1 0 011-1h.01a1 1 0 010 2H8a1 1 0 01-1-1zM11.01 10a1 1 0 100 2h.01a1 1 0 100-2h-.01z"/><path fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zM2.5 3.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/random/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/random/property-24.scss
new file mode 100644
index 0000000000..4d67004aee
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/random/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-random-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 9.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM11 12a1 1 0 112 0 1 1 0 01-2 0zM5 7.5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0zm2.5-1a1 1 0 100 2 1 1 0 000-2zM16.5 14a2.5 2.5 0 100 5 2.5 2.5 0 000-5zm-1 2.5a1 1 0 112 0 1 1 0 01-2 0z"/><path d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V4.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/index.scss
new file mode 100644
index 0000000000..c0b9218cb2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../redirect/property-16';
+        @import '../redirect/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/keyframes.scss
new file mode 100644
index 0000000000..94bbe70ea8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-redirect {
+  50% {
+
+    background-color: var(--icon-color, var(--color-redirect-500, currentColor));
+    -webkit-mask-image: var(--icon-redirect-24);
+    mask-image: var(--icon-redirect-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-redirect-500, currentColor));
+    -webkit-mask-image: var(--icon-redirect-16);
+    mask-image: var(--icon-redirect-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/placeholders.scss
new file mode 100644
index 0000000000..d8fd49df45
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-redirect-icon {
+  --icon-name: icon-redirect;
+  content: '';
+}
+%with-redirect-mask {
+  --icon-name: icon-redirect;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/property-16.scss
new file mode 100644
index 0000000000..efb0c969cb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-redirect-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 3.517a1 1 0 011.62-.784l5.348 4.233a1 1 0 010 1.568l-5.347 4.233A1 1 0 018 11.983v-1.545c-.76-.043-1.484.003-2.254.218-.994.279-2.118.857-3.506 1.99a.993.993 0 01-1.129.096.962.962 0 01-.445-1.099c.415-1.5 1.425-3.141 2.808-4.412C4.69 6.114 6.244 5.241 8 5.042V3.517zm1.5 1.034v1.2a.75.75 0 01-.75.75c-1.586 0-3.066.738-4.261 1.835a8.996 8.996 0 00-1.635 2.014c.878-.552 1.695-.916 2.488-1.138 1.247-.35 2.377-.33 3.49-.207a.75.75 0 01.668.745v1.2l4.042-3.2L9.5 4.55z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/property-24.scss
new file mode 100644
index 0000000000..3ea23a6e8e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/redirect/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-redirect-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 5.786c0-1.046 1.209-1.63 2.028-.978l7.45 5.922c.627.498.63 1.45.005 1.952l-7.45 5.997c-.817.659-2.033.077-2.033-.973v-2.754a7.316 7.316 0 00-2.824.427c-1.306.456-2.918 1.342-5.295 2.981-.436.3-.973.287-1.37.029a1.168 1.168 0 01-.479-1.326c.59-2 1.91-4.124 3.743-5.755C7.444 9.824 9.571 8.72 12 8.529V5.786zm1.5.518V9.25a.75.75 0 01-.75.75c-2.296 0-4.35.98-5.978 2.428-1.36 1.21-2.393 2.723-2.994 4.189 2.03-1.357 3.565-2.187 4.903-2.654 1.53-.535 2.769-.584 4.137-.46a.75.75 0 01.682.747v2.933l6.8-5.473-6.8-5.406z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/index.scss
new file mode 100644
index 0000000000..97efb59fc5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../sync-alert/property-16';
+        @import '../sync-alert/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/keyframes.scss
new file mode 100644
index 0000000000..0021f5b7b2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-refresh-alert {
+  50% {
+
+    background-color: var(--icon-color, var(--color-refresh-alert-500, currentColor));
+    -webkit-mask-image: var(--icon-sync-alert-24);
+    mask-image: var(--icon-sync-alert-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-refresh-alert-500, currentColor));
+    -webkit-mask-image: var(--icon-sync-alert-16);
+    mask-image: var(--icon-sync-alert-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/placeholders.scss
new file mode 100644
index 0000000000..87a93c8fa4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-alert/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-refresh-alert-icon {
+  --icon-name: icon-refresh-alert;
+  content: '';
+}
+%with-refresh-alert-mask {
+  --icon-name: icon-refresh-alert;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/index.scss
new file mode 100644
index 0000000000..3717ed350b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../sync/property-16';
+        @import '../sync/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/keyframes.scss
new file mode 100644
index 0000000000..8376b7484a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-refresh-default {
+  50% {
+
+    background-color: var(--icon-color, var(--color-refresh-default-500, currentColor));
+    -webkit-mask-image: var(--icon-sync-24);
+    mask-image: var(--icon-sync-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-refresh-default-500, currentColor));
+    -webkit-mask-image: var(--icon-sync-16);
+    mask-image: var(--icon-sync-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/placeholders.scss
new file mode 100644
index 0000000000..a468dfd2a6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/refresh-default/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-refresh-default-icon {
+  --icon-name: icon-refresh-default;
+  content: '';
+}
+%with-refresh-default-mask {
+  --icon-name: icon-refresh-default;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/reload/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/reload/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/reload/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/reload/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/reload/keyframes.scss
new file mode 100644
index 0000000000..1c17fdf6eb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/reload/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-reload {
+  50% {
+
+    background-color: var(--icon-color, var(--color-reload-500, currentColor));
+    -webkit-mask-image: var(--icon-reload-24);
+    mask-image: var(--icon-reload-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-reload-500, currentColor));
+    -webkit-mask-image: var(--icon-reload-16);
+    mask-image: var(--icon-reload-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/reload/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/reload/placeholders.scss
new file mode 100644
index 0000000000..96b96a676c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/reload/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-reload-icon {
+  --icon-name: icon-reload;
+  content: '';
+}
+%with-reload-mask {
+  --icon-name: icon-reload;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/reload/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/reload/property-16.scss
new file mode 100644
index 0000000000..218b47e2f1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/reload/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-reload-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M7.248 1.307A.75.75 0 118.252.193l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.004-1.114l1.29-1.161a4.5 4.5 0 103.655 2.832.75.75 0 111.398-.546A6 6 0 118.018 2l-.77-.693z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/reload/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/reload/property-24.scss
new file mode 100644
index 0000000000..79f151e82a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/reload/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-reload-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M11.24 1.3A.75.75 0 1112.26.2l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.217-2.059a7.5 7.5 0 105.532 4.632.75.75 0 111.397-.546 9 9 0 11-7.237-5.654L11.24 1.3z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/remix/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/remix/index.scss
new file mode 100644
index 0000000000..7d066de548
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/remix/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../shuffle/property-16';
+        @import '../shuffle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/remix/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/remix/keyframes.scss
new file mode 100644
index 0000000000..5536cbe7cc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/remix/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-remix {
+  50% {
+
+    background-color: var(--icon-color, var(--color-remix-500, currentColor));
+    -webkit-mask-image: var(--icon-shuffle-24);
+    mask-image: var(--icon-shuffle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-remix-500, currentColor));
+    -webkit-mask-image: var(--icon-shuffle-16);
+    mask-image: var(--icon-shuffle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/remix/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/remix/placeholders.scss
new file mode 100644
index 0000000000..09880188a5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/remix/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-remix-icon {
+  --icon-name: icon-remix;
+  content: '';
+}
+%with-remix-mask {
+  --icon-name: icon-remix;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/keyframes.scss
new file mode 100644
index 0000000000..cf5ac4430c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-repeat {
+  50% {
+
+    background-color: var(--icon-color, var(--color-repeat-500, currentColor));
+    -webkit-mask-image: var(--icon-repeat-24);
+    mask-image: var(--icon-repeat-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-repeat-500, currentColor));
+    -webkit-mask-image: var(--icon-repeat-16);
+    mask-image: var(--icon-repeat-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/placeholders.scss
new file mode 100644
index 0000000000..08692c06f3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-repeat-icon {
+  --icon-name: icon-repeat;
+  content: '';
+}
+%with-repeat-mask {
+  --icon-name: icon-repeat;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/property-16.scss
new file mode 100644
index 0000000000..40b03650df
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-repeat-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.238.68a.75.75 0 10-.976 1.14l1.96 1.68H4.418A3.417 3.417 0 001 6.917v.833a.75.75 0 001.5 0v-.833A1.917 1.917 0 014.417 5h7.806l-1.961 1.68a.75.75 0 00.976 1.14l3.5-3a.75.75 0 000-1.14l-3.5-3z"/><path d="M5.82 8.262a.75.75 0 01-.082 1.057L3.778 11h7.805A1.916 1.916 0 0013.5 9.083V8.25a.75.75 0 011.5 0v.833a3.417 3.417 0 01-3.417 3.417H3.777l1.961 1.68a.75.75 0 11-.976 1.14l-3.5-3a.75.75 0 010-1.14l3.5-3a.75.75 0 011.057.082z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/property-24.scss
new file mode 100644
index 0000000000..33ada148b4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/repeat/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-repeat-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M17.515.455a.75.75 0 00-1.03 1.09L19.614 4.5H6.75A4.75 4.75 0 002 9.25v2a.75.75 0 001.5 0v-2A3.25 3.25 0 016.75 6h12.864l-3.129 2.955a.75.75 0 001.03 1.09l4.5-4.25a.75.75 0 000-1.09l-4.5-4.25zM8.045 13.985a.75.75 0 01-.03 1.06L4.886 18H17.25a3.25 3.25 0 003.25-3.25v-2a.75.75 0 011.5 0v2a4.75 4.75 0 01-4.75 4.75H4.886l3.129 2.955a.75.75 0 01-1.03 1.09l-4.5-4.25a.75.75 0 010-1.09l4.5-4.25a.75.75 0 011.06.03z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/keyframes.scss
new file mode 100644
index 0000000000..c87ba28794
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-replication-direct {
+  50% {
+
+    background-color: var(--icon-color, var(--color-replication-direct-500, currentColor));
+    -webkit-mask-image: var(--icon-replication-direct-24);
+    mask-image: var(--icon-replication-direct-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-replication-direct-500, currentColor));
+    -webkit-mask-image: var(--icon-replication-direct-16);
+    mask-image: var(--icon-replication-direct-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/placeholders.scss
new file mode 100644
index 0000000000..724e51366b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-replication-direct-icon {
+  --icon-name: icon-replication-direct;
+  content: '';
+}
+%with-replication-direct-mask {
+  --icon-name: icon-replication-direct;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/property-16.scss
new file mode 100644
index 0000000000..8ad32602e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-replication-direct-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M0 2.25A2.25 2.25 0 012.25 0h6.5A2.25 2.25 0 0111 2.25v8a.75.75 0 01-.75.75h-8A2.25 2.25 0 010 8.75v-6.5zm2.25-.75a.75.75 0 00-.75.75v6.5c0 .414.336.75.75.75H9.5V2.25a.75.75 0 00-.75-.75h-6.5z" clip-rule="evenodd"/><path d="M12.75 3.55a.7.7 0 01.7.7v8c0 .657-.53 1.2-1.197 1.2H4.25a.7.7 0 110-1.4h7.8v-7.8a.7.7 0 01.7-.7z"/><path d="M15.95 6.75a.7.7 0 00-1.4 0v6.5c0 .718-.581 1.3-1.299 1.3h-6.5a.7.7 0 10-.001 1.4h6.501a2.699 2.699 0 002.699-2.7v-6.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/property-24.scss
new file mode 100644
index 0000000000..6a134c591e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-direct/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-replication-direct-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M1 3.75A2.75 2.75 0 013.75 1h10.5A2.75 2.75 0 0117 3.75v12.5a.75.75 0 01-.75.75H3.75A2.75 2.75 0 011 14.25V3.75zM3.75 2.5c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25H15.5V3.75c0-.69-.56-1.25-1.25-1.25H3.75z" clip-rule="evenodd"/><path d="M19.25 6a.75.75 0 01.75.75v11.5c0 .964-.778 1.75-1.747 1.75H6.75a.75.75 0 010-1.5h11.503c.135 0 .247-.11.247-.25V6.75a.75.75 0 01.75-.75z"/><path d="M23 9.75a.75.75 0 00-1.5 0v9.5a2.248 2.248 0 01-2.248 2.25H9.75a.75.75 0 000 1.5h9.502A3.748 3.748 0 0023 19.25v-9.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/keyframes.scss
new file mode 100644
index 0000000000..40ba3bdcdb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-replication-perf {
+  50% {
+
+    background-color: var(--icon-color, var(--color-replication-perf-500, currentColor));
+    -webkit-mask-image: var(--icon-replication-perf-24);
+    mask-image: var(--icon-replication-perf-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-replication-perf-500, currentColor));
+    -webkit-mask-image: var(--icon-replication-perf-16);
+    mask-image: var(--icon-replication-perf-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/placeholders.scss
new file mode 100644
index 0000000000..3fa3dfbe79
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-replication-perf-icon {
+  --icon-name: icon-replication-perf;
+  content: '';
+}
+%with-replication-perf-mask {
+  --icon-name: icon-replication-perf;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/property-16.scss
new file mode 100644
index 0000000000..1312e9ecbe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-replication-perf-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h6.5A2.25 2.25 0 0112 3.25v1.104a.71.71 0 01.078.067l.667.667A.7.7 0 0112 6.237v1.45a.71.71 0 01.078.068l1.75 1.75a.7.7 0 01-.99.99L12 9.656v.094c0 .417-.113.807-.31 1.141.142.022.279.088.388.197l2.667 2.667a.7.7 0 11-.99.99l-2.667-2.667a.697.697 0 01-.197-.389c-.334.198-.724.311-1.141.311h-.093l.338.338a.7.7 0 01-.99.99l-1.25-1.25A.71.71 0 017.687 12H6.323l1.755 1.755a.7.7 0 11-.99.99l-2.666-2.667A.71.71 0 014.354 12H3.25A2.25 2.25 0 011 9.75v-6.5zm2.25-.75a.75.75 0 00-.75.75v6.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-6.5a.75.75 0 00-.75-.75h-6.5z" clip-rule="evenodd"/><path d="M11.495 13.838a.7.7 0 00-.99.99l.583.584a.7.7 0 00.99-.99l-.583-.584zM15.345 11.021a.7.7 0 00-.99.99l.067.067a.7.7 0 00.99-.99l-.067-.067zM13.375 6.705a.7.7 0 01.99 0l.833.833a.7.7 0 01-.99.99l-.833-.833a.7.7 0 010-.99z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/property-24.scss
new file mode 100644
index 0000000000..7c536fdadc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/replication-perf/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-replication-perf-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h10.5A2.75 2.75 0 0118 4.75v2.19l.78.78A.75.75 0 0118 8.957v2.982l2.78 2.78a.75.75 0 11-1.06 1.061L18 14.06v1.19c0 .495-.13.959-.36 1.36.05.03.097.067.14.11l4 4a.75.75 0 11-1.06 1.06l-4-4a.751.751 0 01-.11-.14c-.401.23-.865.36-1.36.36h-1.19l.72.72a.75.75 0 11-1.06 1.06L11.94 18H9.06l2.72 2.72a.75.75 0 11-1.06 1.06L6.94 18H4.75A2.75 2.75 0 012 15.25V4.75zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"/><path d="M16.78 20.72a.75.75 0 10-1.06 1.06l1 1a.75.75 0 101.06-1.06l-1-1zM22.68 16.62a.75.75 0 00-1.06 1.06l.1.1a.75.75 0 001.06-1.06l-.1-.1zM19.72 9.72a.75.75 0 011.06 0l1 1a.75.75 0 11-1.06 1.06l-1-1a.75.75 0 010-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/keyframes.scss
new file mode 100644
index 0000000000..83a410d45c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-rewind {
+  50% {
+
+    background-color: var(--icon-color, var(--color-rewind-500, currentColor));
+    -webkit-mask-image: var(--icon-rewind-24);
+    mask-image: var(--icon-rewind-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-rewind-500, currentColor));
+    -webkit-mask-image: var(--icon-rewind-16);
+    mask-image: var(--icon-rewind-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/placeholders.scss
new file mode 100644
index 0000000000..2c984bed42
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-rewind-icon {
+  --icon-name: icon-rewind;
+  content: '';
+}
+%with-rewind-mask {
+  --icon-name: icon-rewind;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/property-16.scss
new file mode 100644
index 0000000000..c810909b47
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-rewind-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.074 3.364A1.25 1.25 0 019 4.416v1.806l4.039-2.795A1.25 1.25 0 0115 4.454v7.092a1.25 1.25 0 01-1.961 1.027L9 9.778v1.806a1.25 1.25 0 01-1.926 1.051L1.499 9.051a1.25 1.25 0 010-2.103l5.575-3.584zM2.637 8L7.5 11.126V4.874L2.637 8zm6.43 0l4.433 3.069V4.93L9.068 8z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/property-24.scss
new file mode 100644
index 0000000000..0768fc0b83
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rewind/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-rewind-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.188 5.38C11.34 4.501 13 5.322 13 6.771v3.332l6.188-4.723C20.34 4.501 22 5.322 22 6.771V17.23c0 1.449-1.66 2.27-2.812 1.391L13 13.898v3.331c0 1.449-1.66 2.27-2.812 1.391l-6.851-5.229a1.75 1.75 0 010-2.782l6.851-5.229zM11.5 6.771a.25.25 0 00-.402-.198L4.247 11.8a.25.25 0 000 .398l6.851 5.229a.25.25 0 00.402-.199V6.771zm9 0a.25.25 0 00-.402-.198l-7.061 5.389v.077l7.061 5.389a.25.25 0 00.402-.199V6.771z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/index.scss
new file mode 100644
index 0000000000..53786328b0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../award/property-16';
+        @import '../award/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/keyframes.scss
new file mode 100644
index 0000000000..d95f897930
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-ribbon {
+  50% {
+
+    background-color: var(--icon-color, var(--color-ribbon-500, currentColor));
+    -webkit-mask-image: var(--icon-award-24);
+    mask-image: var(--icon-award-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-ribbon-500, currentColor));
+    -webkit-mask-image: var(--icon-award-16);
+    mask-image: var(--icon-award-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/placeholders.scss
new file mode 100644
index 0000000000..f12afa3ebf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/ribbon/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-ribbon-icon {
+  --icon-name: icon-ribbon;
+  content: '';
+}
+%with-ribbon-mask {
+  --icon-name: icon-ribbon;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/keyframes.scss
new file mode 100644
index 0000000000..9e7223a7ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-rocket {
+  50% {
+
+    background-color: var(--icon-color, var(--color-rocket-500, currentColor));
+    -webkit-mask-image: var(--icon-rocket-24);
+    mask-image: var(--icon-rocket-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-rocket-500, currentColor));
+    -webkit-mask-image: var(--icon-rocket-16);
+    mask-image: var(--icon-rocket-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/placeholders.scss
new file mode 100644
index 0000000000..f3b7f6e865
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-rocket-icon {
+  --icon-name: icon-rocket;
+  content: '';
+}
+%with-rocket-mask {
+  --icon-name: icon-rocket;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/property-16.scss
new file mode 100644
index 0000000000..6acf31f48e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-rocket-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.78 7.28a.75.75 0 00-1.06-1.06l-.5.5a.75.75 0 001.06 1.06l.5-.5z"/><path fill-rule="evenodd" d="M12.627 1.32a1.731 1.731 0 012.054 2.053c-.27 1.28-.686 3.19-1.103 4.859a3.625 3.625 0 01-.58 1.224c.002.015.002.03.002.044v2.441a1.75 1.75 0 01-.833 1.49l-2.021 1.244a1.75 1.75 0 01-2.284-.397l-1.27-1.587a2.028 2.028 0 01-1.08-.917 3.426 3.426 0 00-.542-.744 3.428 3.428 0 00-.744-.542c-.4-.223-.755-.61-.917-1.08l-1.587-1.27a1.75 1.75 0 01-.398-2.284l1.244-2.021A1.75 1.75 0 014.058 3H6.5l.044.001c.37-.263.777-.467 1.224-.579 1.669-.417 3.58-.833 4.859-1.103zm-5.43 9.956a.754.754 0 00-.167-.025.517.517 0 01-.209-.208 4.913 4.913 0 00-.79-1.073 4.913 4.913 0 00-1.074-.791.516.516 0 01-.208-.21.754.754 0 00-.025-.166l.002-.008c.255-.78.694-1.941 1.307-2.958.634-1.05 1.353-1.773 2.099-1.96 1.641-.41 3.53-.821 4.804-1.09a.231.231 0 01.277.277c-.269 1.274-.68 3.163-1.09 4.804-.187.746-.91 1.465-1.96 2.099-1.017.613-2.177 1.052-2.958 1.307a.173.173 0 01-.008.002zm1.139 1.193l.697.872a.25.25 0 00.327.057l2.021-1.244a.25.25 0 00.119-.213v-1.056c-.186.13-.375.252-.562.366-.88.53-1.832.936-2.602 1.218zM2.659 6.967l.872.697c.282-.77.687-1.722 1.218-2.602.113-.187.235-.376.366-.562H4.059a.25.25 0 00-.213.119L2.602 6.64a.25.25 0 00.057.327z" clip-rule="evenodd"/><path d="M4.442 11.558a.625.625 0 010 .884l-2 2a.625.625 0 11-.884-.884l2-2a.625.625 0 01.884 0zM2.692 10.308a.625.625 0 010 .884l-.75.75a.625.625 0 11-.884-.884l.75-.75a.625.625 0 01.884 0zM5.692 14.192a.625.625 0 10-.884-.884l-.75.75a.625.625 0 10.884.884l.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/property-24.scss
new file mode 100644
index 0000000000..ae472cc4f3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rocket/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-rocket-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.78 10.28a.75.75 0 10-1.06-1.06l-.5.5a.75.75 0 101.06 1.06l.5-.5z"/><path fill-rule="evenodd" d="M19.63 2.317a1.733 1.733 0 012.053 2.053c-.38 1.827-1.07 5.047-1.76 7.812-.182.723-.542 1.377-1.012 1.964l-.002.015-.457 3.198a1.75 1.75 0 01-.658 1.133l-3.516 2.736a1.75 1.75 0 01-2.456-.307l-1.783-2.293a1.932 1.932 0 01-1.129-.982c-.24-.486-.59-1.07-1.037-1.518-.448-.448-1.033-.799-1.52-1.038a1.932 1.932 0 01-.98-1.129l-2.294-1.783a1.75 1.75 0 01-.307-2.456l2.735-3.517a1.75 1.75 0 011.134-.658l3.197-.456.016-.002c.587-.47 1.24-.83 1.964-1.011 2.765-.691 5.986-1.381 7.812-1.761zM8.234 6.835l-1.38.197a.25.25 0 00-.163.094l-2.735 3.517a.25.25 0 00.044.35l1.6 1.245c.38-1.121.982-2.674 1.813-4.124.247-.43.52-.863.821-1.279zm7.652 9.752c.43-.247.863-.52 1.279-.821l-.197 1.38a.25.25 0 01-.095.162l-3.516 2.736a.25.25 0 01-.351-.044l-1.245-1.6c1.122-.38 2.675-.982 4.125-1.813zm4.329-12.523a.234.234 0 00-.28-.279c-1.821.38-5.018 1.064-7.753 1.748-1.32.33-2.498 1.636-3.467 3.327-.946 1.65-1.586 3.476-1.911 4.53a.22.22 0 00.02.17c.034.069.1.14.192.184.556.274 1.305.71 1.917 1.323.613.612 1.049 1.36 1.323 1.917a.425.425 0 00.185.192.22.22 0 00.169.02c1.054-.325 2.88-.965 4.53-1.91 1.691-.97 2.997-2.148 3.327-3.468.684-2.735 1.369-5.932 1.748-7.754z" clip-rule="evenodd"/><path d="M4.03 15.97a.75.75 0 010 1.06l-1 1a.75.75 0 01-1.06-1.06l1-1a.75.75 0 011.06 0zM6.53 17.47a.75.75 0 010 1.06l-3 3a.75.75 0 01-1.06-1.06l3-3a.75.75 0 011.06 0zM8.03 21.03a.75.75 0 10-1.06-1.06l-1 1a.75.75 0 101.06 1.06l1-1z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/keyframes.scss
new file mode 100644
index 0000000000..612754607a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-rotate-ccw {
+  50% {
+
+    background-color: var(--icon-color, var(--color-rotate-ccw-500, currentColor));
+    -webkit-mask-image: var(--icon-rotate-ccw-24);
+    mask-image: var(--icon-rotate-ccw-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-rotate-ccw-500, currentColor));
+    -webkit-mask-image: var(--icon-rotate-ccw-16);
+    mask-image: var(--icon-rotate-ccw-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/placeholders.scss
new file mode 100644
index 0000000000..4ee181cb61
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-rotate-ccw-icon {
+  --icon-name: icon-rotate-ccw;
+  content: '';
+}
+%with-rotate-ccw-mask {
+  --icon-name: icon-rotate-ccw;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/property-16.scss
new file mode 100644
index 0000000000..ebd5d1f1a6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-rotate-ccw-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M2 .75a.75.75 0 011.5 0v1.888A7 7 0 111 8a.75.75 0 011.5 0 5.5 5.5 0 101.725-4H6.75a.75.75 0 010 1.5h-4A.75.75 0 012 4.75v-4z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/property-24.scss
new file mode 100644
index 0000000000..7b2cd02fcb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-ccw/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-rotate-ccw-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M3 1.75a.75.75 0 011.5 0v3.636A9.977 9.977 0 0112 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12a.75.75 0 011.5 0 8.5 8.5 0 102.019-5.5H9.25a.75.75 0 010 1.5h-5.5A.75.75 0 013 7.25v-5.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/keyframes.scss
new file mode 100644
index 0000000000..f16e7a512e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-rotate-cw {
+  50% {
+
+    background-color: var(--icon-color, var(--color-rotate-cw-500, currentColor));
+    -webkit-mask-image: var(--icon-rotate-cw-24);
+    mask-image: var(--icon-rotate-cw-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-rotate-cw-500, currentColor));
+    -webkit-mask-image: var(--icon-rotate-cw-16);
+    mask-image: var(--icon-rotate-cw-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/placeholders.scss
new file mode 100644
index 0000000000..d48e5271b2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-rotate-cw-icon {
+  --icon-name: icon-rotate-cw;
+  content: '';
+}
+%with-rotate-cw-mask {
+  --icon-name: icon-rotate-cw;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/property-16.scss
new file mode 100644
index 0000000000..23441b7072
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-rotate-cw-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M14 .75a.75.75 0 00-1.5 0v1.888A7 7 0 1015 8a.75.75 0 00-1.5 0 5.5 5.5 0 11-1.725-4H9.25a.75.75 0 000 1.5h4a.75.75 0 00.75-.75v-4z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/property-24.scss
new file mode 100644
index 0000000000..b4cbf5720d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rotate-cw/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-rotate-cw-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M21 1.75a.75.75 0 00-1.5 0v3.636A9.977 9.977 0 0012 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10a.75.75 0 00-1.5 0 8.5 8.5 0 11-2.019-5.5H14.75a.75.75 0 000 1.5h5.5a.75.75 0 00.75-.75v-5.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rss/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rss/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rss/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rss/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rss/keyframes.scss
new file mode 100644
index 0000000000..51106cdc5f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rss/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-rss {
+  50% {
+
+    background-color: var(--icon-color, var(--color-rss-500, currentColor));
+    -webkit-mask-image: var(--icon-rss-24);
+    mask-image: var(--icon-rss-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-rss-500, currentColor));
+    -webkit-mask-image: var(--icon-rss-16);
+    mask-image: var(--icon-rss-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rss/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rss/placeholders.scss
new file mode 100644
index 0000000000..6a9c9c822d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rss/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-rss-icon {
+  --icon-name: icon-rss;
+  content: '';
+}
+%with-rss-mask {
+  --icon-name: icon-rss;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rss/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rss/property-16.scss
new file mode 100644
index 0000000000..c66a039764
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rss/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-rss-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.75 1a.75.75 0 000 1.5A10.75 10.75 0 0113.5 13.25a.75.75 0 001.5 0A12.25 12.25 0 002.75 1z"/><path d="M2.75 6a.75.75 0 000 1.5 5.75 5.75 0 015.75 5.75.75.75 0 001.5 0A7.25 7.25 0 002.75 6zM3.5 11a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/rss/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/rss/property-24.scss
new file mode 100644
index 0000000000..aca319ee93
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/rss/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-rss-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 3a.75.75 0 000 1.5A15.75 15.75 0 0119.5 20.25a.75.75 0 001.5 0A17.25 17.25 0 003.75 3z"/><path d="M3.75 10a.75.75 0 000 1.5 8.75 8.75 0 018.75 8.75.75.75 0 001.5 0A10.25 10.25 0 003.75 10zM5 17a2 2 0 100 4 2 2 0 000-4z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/run/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/run/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/run/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/run/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/run/keyframes.scss
new file mode 100644
index 0000000000..096f474d9b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/run/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-run {
+  50% {
+
+    background-color: var(--icon-color, var(--color-run-500, currentColor));
+    -webkit-mask-image: var(--icon-run-24);
+    mask-image: var(--icon-run-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-run-500, currentColor));
+    -webkit-mask-image: var(--icon-run-16);
+    mask-image: var(--icon-run-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/run/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/run/placeholders.scss
new file mode 100644
index 0000000000..dbcbcc6e5f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/run/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-run-icon {
+  --icon-name: icon-run;
+  content: '';
+}
+%with-run-mask {
+  --icon-name: icon-run;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/run/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/run/property-16.scss
new file mode 100644
index 0000000000..b22be33f80
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/run/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-run-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" class="structure-icon-run"><style>.structure-icon-run {animation: structure-icon-run-simple-spin 1s infinite linear;}.structure-icon-run-progress {animation: structure-icon-run-fancy-spin 3s infinite linear;fill: transparent;opacity: 0.66;stroke-dasharray: 16 16;transform-origin: 50% 50%;}@keyframes structure-icon-run-fancy-spin {0% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}50% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}100% {stroke-dasharray: 4 32;}}@keyframes structure-icon-run-simple-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="8" stroke="%23000" stroke-width="4"/><circle cx="12" cy="12" r="5" stroke="%23000" stroke-width="2" class="structure-icon-run-progress"/><circle cx="12" cy="12" r="4" fill="currentColor"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/run/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/run/property-24.scss
new file mode 100644
index 0000000000..19bec2752f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/run/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-run-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" class="structure-icon-run"><style>.structure-icon-run {animation: structure-icon-run-simple-spin 1s infinite linear;}.structure-icon-run-progress {animation: structure-icon-run-fancy-spin 3s infinite linear;fill: transparent;opacity: 0.66;stroke-dasharray: 16 16;transform-origin: 50% 50%;}@keyframes structure-icon-run-fancy-spin {0% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}50% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}100% {stroke-dasharray: 4 32;}}@keyframes structure-icon-run-simple-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="8" stroke="%23000" stroke-width="4"/><circle cx="12" cy="12" r="5" stroke="%23000" stroke-width="2" class="structure-icon-run-progress"/><circle cx="12" cy="12" r="4" fill="currentColor"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/running/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/running/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/running/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/running/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/running/keyframes.scss
new file mode 100644
index 0000000000..a9156fcb7b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/running/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-running {
+  50% {
+
+    background-color: var(--icon-color, var(--color-running-500, currentColor));
+    -webkit-mask-image: var(--icon-running-24);
+    mask-image: var(--icon-running-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-running-500, currentColor));
+    -webkit-mask-image: var(--icon-running-16);
+    mask-image: var(--icon-running-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/running/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/running/placeholders.scss
new file mode 100644
index 0000000000..954c92ffdf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/running/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-running-icon {
+  --icon-name: icon-running;
+  content: '';
+}
+%with-running-mask {
+  --icon-name: icon-running;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/running/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/running/property-16.scss
new file mode 100644
index 0000000000..abd360de7d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/running/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-running-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" class="hds-flight-icon--animation-running"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 1.5a6.48 6.48 0 00-4.707 2.017.75.75 0 11-1.086-1.034A7.98 7.98 0 018 0a7.98 7.98 0 015.793 2.483.75.75 0 11-1.086 1.034A6.48 6.48 0 008 1.5zM1.236 5.279a.75.75 0 01.514.927 6.503 6.503 0 004.727 8.115.75.75 0 11-.349 1.459 8.003 8.003 0 01-5.82-9.986.75.75 0 01.928-.515zm13.528 0a.75.75 0 01.928.515 8.003 8.003 0 01-5.82 9.986.75.75 0 01-.35-1.459 6.503 6.503 0 004.728-8.115.75.75 0 01.514-.927z"/><path d="M8 4.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM3 8a5 5 0 1110 0A5 5 0 013 8z" opacity=".2"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/running/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/running/property-24.scss
new file mode 100644
index 0000000000..92bccdb265
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/running/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-running-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="hds-flight-icon--animation-running"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 2.5a9.47 9.47 0 00-6.88 2.948.75.75 0 01-1.085-1.034A10.97 10.97 0 0112 1a10.97 10.97 0 017.965 3.414.75.75 0 11-1.086 1.034A9.47 9.47 0 0012 2.5zM2.351 8.451a.75.75 0 01.515.928A9.506 9.506 0 002.5 12c0 4.48 3.102 8.237 7.276 9.238a.75.75 0 01-.35 1.459C4.593 21.537 1 17.189 1 12c0-1.051.148-2.07.424-3.034a.75.75 0 01.927-.515zm19.297 0a.75.75 0 01.928.515C22.852 9.93 23 10.949 23 12c0 5.19-3.593 9.538-8.426 10.697a.75.75 0 11-.35-1.459c4.174-1 7.276-4.758 7.276-9.238 0-.91-.128-1.79-.366-2.621a.75.75 0 01.514-.928z"/><path d="M12 5.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM4 12a8 8 0 1116 0 8 8 0 01-16 0z" opacity=".2"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/save/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/save/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/save/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/save/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/save/keyframes.scss
new file mode 100644
index 0000000000..f4269b7c29
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/save/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-save {
+  50% {
+
+    background-color: var(--icon-color, var(--color-save-500, currentColor));
+    -webkit-mask-image: var(--icon-save-24);
+    mask-image: var(--icon-save-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-save-500, currentColor));
+    -webkit-mask-image: var(--icon-save-16);
+    mask-image: var(--icon-save-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/save/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/save/placeholders.scss
new file mode 100644
index 0000000000..90d4e36d66
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/save/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-save-icon {
+  --icon-name: icon-save;
+  content: '';
+}
+%with-save-mask {
+  --icon-name: icon-save;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/save/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/save/property-16.scss
new file mode 100644
index 0000000000..559e4e465b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/save/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-save-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h6.879a2.25 2.25 0 011.59.659l2.622 2.621c.422.422.659.995.659 1.591v6.879A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h.8V9.25a1.2 1.2 0 011.2-1.2h5.5a1.2 1.2 0 011.2 1.2v4.25h.8a.75.75 0 00.75-.75V5.871a.75.75 0 00-.22-.53L10.66 2.72a.75.75 0 00-.53-.22H5.45v2.05h3.8a.7.7 0 010 1.4h-4a1.2 1.2 0 01-1.2-1.2V2.5h-.8zm7.3 11h-5.1V9.45h5.1v4.05z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/save/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/save/property-24.scss
new file mode 100644
index 0000000000..68adfced97
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/save/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-save-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V9.078c0-.729-.29-1.428-.805-1.944l-4.329-4.329A2.75 2.75 0 0014.922 2H4.75zm0 1.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25H6v-6.75c0-.966.784-1.75 1.75-1.75h8.5c.966 0 1.75.784 1.75 1.75v6.75h1.25c.69 0 1.25-.56 1.25-1.25V9.078c0-.331-.132-.649-.366-.883l-4.329-4.329a1.25 1.25 0 00-.883-.366H7.5v3.75c0 .138.112.25.25.25h7.5a.75.75 0 010 1.5h-7.5A1.75 1.75 0 016 7.25V3.5H4.75zM7.5 13.75v6.75h9v-6.75a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/keyframes.scss
new file mode 100644
index 0000000000..9f7154e5ed
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-scissors {
+  50% {
+
+    background-color: var(--icon-color, var(--color-scissors-500, currentColor));
+    -webkit-mask-image: var(--icon-scissors-24);
+    mask-image: var(--icon-scissors-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-scissors-500, currentColor));
+    -webkit-mask-image: var(--icon-scissors-16);
+    mask-image: var(--icon-scissors-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/placeholders.scss
new file mode 100644
index 0000000000..10e36568ab
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-scissors-icon {
+  --icon-name: icon-scissors;
+  content: '';
+}
+%with-scissors-mask {
+  --icon-name: icon-scissors;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/property-16.scss
new file mode 100644
index 0000000000..e6cb0839a3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-scissors-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1 4a3 3 0 115.585 1.524L8 6.94l4.803-4.803a.75.75 0 011.06 1.06L8.539 8.523a.678.678 0 01-.016.016l-1.937 1.938a3 3 0 11-1.06-1.06L6.938 8 5.524 6.585A3 3 0 011 4zm3-1.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm0 8a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd"/><path d="M9.116 9.123a.75.75 0 011.06 0l3.687 3.68a.75.75 0 11-1.06 1.061l-3.686-3.68a.75.75 0 01-.001-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/property-24.scss
new file mode 100644
index 0000000000..4c1eca10cd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/scissors/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-scissors-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M5.5 2a3.5 3.5 0 101.99 6.38l3.346 3.12-3.346 3.12a3.5 3.5 0 101.023 1.097l3.93-3.664.009-.008 8.31-7.746A.75.75 0 0019.739 3.2l-7.803 7.274-3.424-3.192A3.5 3.5 0 005.5 2zm-2 3.5a2 2 0 114 0 2 2 0 01-4 0zm0 12a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/><path d="M20.763 18.703a.75.75 0 01-1.026 1.095l-5.5-5.15a.75.75 0 011.026-1.095l5.5 5.15z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/keyframes.scss
new file mode 100644
index 0000000000..5413fac418
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-search-color {
+  50% {
+    background-image: var(--icon-search-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-search-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/placeholders.scss
new file mode 100644
index 0000000000..741b0c3095
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-search-color-icon {
+  --icon-name: icon-search-color;
+  content: '';
+}
+%with-search-color-mask {
+  --icon-name: icon-search-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/property-16.scss
new file mode 100644
index 0000000000..952d411835
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-search-color-16: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%231563ff"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/property-24.scss
new file mode 100644
index 0000000000..455de5d7aa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/search-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-search-color-24: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%231563ff"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/search/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/search/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/search/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/search/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/search/keyframes.scss
new file mode 100644
index 0000000000..608a7e6086
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/search/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-search {
+  50% {
+
+    background-color: var(--icon-color, var(--color-search-500, currentColor));
+    -webkit-mask-image: var(--icon-search-24);
+    mask-image: var(--icon-search-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-search-500, currentColor));
+    -webkit-mask-image: var(--icon-search-16);
+    mask-image: var(--icon-search-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/search/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/search/placeholders.scss
new file mode 100644
index 0000000000..7c6190236f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/search/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-search-icon {
+  --icon-name: icon-search;
+  content: '';
+}
+%with-search-mask {
+  --icon-name: icon-search;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/search/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/search/property-16.scss
new file mode 100644
index 0000000000..6c2507e3fb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/search/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-search-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/search/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/search/property-24.scss
new file mode 100644
index 0000000000..1b26405166
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/search/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-search-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.5 2a8.5 8.5 0 105.457 15.017l4.763 4.763a.75.75 0 101.06-1.06l-4.763-4.763A8.5 8.5 0 0010.5 2zm-7 8.5a7 7 0 1114 0 7 7 0 01-14 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/send/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/send/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/send/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/send/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/send/keyframes.scss
new file mode 100644
index 0000000000..5c3202530e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/send/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-send {
+  50% {
+
+    background-color: var(--icon-color, var(--color-send-500, currentColor));
+    -webkit-mask-image: var(--icon-send-24);
+    mask-image: var(--icon-send-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-send-500, currentColor));
+    -webkit-mask-image: var(--icon-send-16);
+    mask-image: var(--icon-send-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/send/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/send/placeholders.scss
new file mode 100644
index 0000000000..995c579a1c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/send/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-send-icon {
+  --icon-name: icon-send;
+  content: '';
+}
+%with-send-mask {
+  --icon-name: icon-send;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/send/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/send/property-16.scss
new file mode 100644
index 0000000000..2b00883784
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/send/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-send-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M15.08 2.526c.368-1.001-.605-1.974-1.606-1.605L1.878 5.193a1.25 1.25 0 00-.295 2.19l4.07 2.907a.25.25 0 01.057.058l2.907 4.069a1.25 1.25 0 002.19-.295l4.272-11.596zM2.84 6.437l10.645-3.922L9.563 13.16l-2.39-3.344 3.072-3.071a.7.7 0 10-.99-.99L6.184 8.826 2.84 6.437z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/send/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/send/property-24.scss
new file mode 100644
index 0000000000..541d302e8a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/send/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-send-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M21.205 5.042c.516-1.4-.846-2.763-2.247-2.247L3.264 8.577c-1.318.486-1.555 2.25-.412 3.066l5.51 3.936a.252.252 0 01.059.058l3.936 5.51c.817 1.144 2.58.907 3.066-.411l5.782-15.694zm-1.729-.84a.25.25 0 01.321.322l-5.782 15.693a.25.25 0 01-.438.059l-3.663-5.13L15.53 9.53a.75.75 0 00-1.06-1.06l-5.617 5.616-5.129-3.663a.25.25 0 01.059-.438l15.693-5.782z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/keyframes.scss
new file mode 100644
index 0000000000..fa84aa94d2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-server-cluster {
+  50% {
+
+    background-color: var(--icon-color, var(--color-server-cluster-500, currentColor));
+    -webkit-mask-image: var(--icon-server-cluster-24);
+    mask-image: var(--icon-server-cluster-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-server-cluster-500, currentColor));
+    -webkit-mask-image: var(--icon-server-cluster-16);
+    mask-image: var(--icon-server-cluster-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/placeholders.scss
new file mode 100644
index 0000000000..3e4eac34b7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-server-cluster-icon {
+  --icon-name: icon-server-cluster;
+  content: '';
+}
+%with-server-cluster-mask {
+  --icon-name: icon-server-cluster;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/property-16.scss
new file mode 100644
index 0000000000..f59b6098ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-server-cluster-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a2.25 2.25 0 00-.75 4.372v.465a3.25 3.25 0 00-1.797 1.144l-.625-.366a2.25 2.25 0 10-1.038 1.13l1.026.602a3.261 3.261 0 000 1.306l-1.026.601a2.25 2.25 0 101.038 1.13l.625-.366a3.25 3.25 0 001.797 1.145v.465a2.25 2.25 0 101.5 0v-.465a3.25 3.25 0 001.797-1.145l.625.366a2.25 2.25 0 101.038-1.13l-1.026-.6a3.26 3.26 0 000-1.307l1.026-.601a2.25 2.25 0 10-1.038-1.13l-.625.365A3.251 3.251 0 008.75 4.837v-.465A2.25 2.25 0 008 0zm-.75 2.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM2.75 4a.75.75 0 100 1.5.75.75 0 000-1.5zm0 6.5a.75.75 0 100 1.5.75.75 0 000-1.5zm4.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zm6-3.25a.75.75 0 100 1.5.75.75 0 000-1.5zm0-6.5a.75.75 0 100 1.5.75.75 0 000-1.5zM6.395 7.3a1.75 1.75 0 113.21 1.4 1.75 1.75 0 01-3.21-1.4z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/property-24.scss
new file mode 100644
index 0000000000..a0a18b31ee
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/server-cluster/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-server-cluster-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 .5a2.5 2.5 0 00-.75 4.886v1.67a4.998 4.998 0 00-3.255 1.95l-1.731-.944a2.5 2.5 0 10-1.061 1.13l2.083 1.137A4.993 4.993 0 007 12c0 .615.111 1.206.316 1.752l-1.768 1.285a2.5 2.5 0 10.845 1.24l1.66-1.207a4.996 4.996 0 003.197 1.874v1.67a2.501 2.501 0 101.5 0v-1.67a4.996 4.996 0 003.197-1.874l1.66 1.207a2.5 2.5 0 10.845-1.24l-1.768-1.285A4.991 4.991 0 0017 12c0-.585-.1-1.148-.286-1.671l2.083-1.137a2.5 2.5 0 10-1.06-1.13l-1.732.945a4.998 4.998 0 00-3.255-1.951v-1.67A2.501 2.501 0 0012 .5zM11 3a1 1 0 112 0 1 1 0 01-2 0zM4 6a1 1 0 100 2 1 1 0 000-2zm0 10a1 1 0 100 2 1 1 0 000-2zm7 5a1 1 0 112 0 1 1 0 01-2 0zm9-5a1 1 0 100 2 1 1 0 000-2zm0-10a1 1 0 100 2 1 1 0 000-2zM8.91 10.353a3.5 3.5 0 016.18 0c.261.49.41 1.05.41 1.647s-.149 1.157-.41 1.647a3.5 3.5 0 01-6.18 0A3.482 3.482 0 018.5 12c0-.597.149-1.157.41-1.647z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/server/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/server/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/server/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/server/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/server/keyframes.scss
new file mode 100644
index 0000000000..54b33cdb60
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/server/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-server {
+  50% {
+
+    background-color: var(--icon-color, var(--color-server-500, currentColor));
+    -webkit-mask-image: var(--icon-server-24);
+    mask-image: var(--icon-server-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-server-500, currentColor));
+    -webkit-mask-image: var(--icon-server-16);
+    mask-image: var(--icon-server-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/server/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/server/placeholders.scss
new file mode 100644
index 0000000000..36e425a680
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/server/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-server-icon {
+  --icon-name: icon-server;
+  content: '';
+}
+%with-server-mask {
+  --icon-name: icon-server;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/server/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/server/property-16.scss
new file mode 100644
index 0000000000..ab4c6aedb9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/server/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-server-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3 3.25a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 3.25z"/><path fill-rule="evenodd" d="M2.25 0A2.25 2.25 0 000 2.25v2.5A2.25 2.25 0 002.25 7h11.5A2.25 2.25 0 0016 4.75v-2.5A2.25 2.25 0 0013.75 0H2.25zM1.5 2.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-2.5z" clip-rule="evenodd"/><path d="M3.75 11.5a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/><path fill-rule="evenodd" d="M2.25 9A2.25 2.25 0 000 11.25v2.5A2.25 2.25 0 002.25 16h11.5A2.25 2.25 0 0016 13.75v-2.5A2.25 2.25 0 0013.75 9H2.25zm-.75 2.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-2.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/server/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/server/property-24.scss
new file mode 100644
index 0000000000..cadcb35dec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/server/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-server-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5 5.75A.75.75 0 015.75 5h.5a.75.75 0 010 1.5h-.5A.75.75 0 015 5.75z"/><path fill-rule="evenodd" d="M3.75 1A2.75 2.75 0 001 3.75v4.5A2.75 2.75 0 003.75 11h16.5A2.75 2.75 0 0023 8.25v-4.5A2.75 2.75 0 0020.25 1H3.75zM2.5 3.75c0-.69.56-1.25 1.25-1.25h16.5c.69 0 1.25.56 1.25 1.25v4.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25v-4.5z" clip-rule="evenodd"/><path d="M5.75 17a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/><path fill-rule="evenodd" d="M3.75 13A2.75 2.75 0 001 15.75v4.5A2.75 2.75 0 003.75 23h16.5A2.75 2.75 0 0023 20.25v-4.5A2.75 2.75 0 0020.25 13H3.75zM2.5 15.75c0-.69.56-1.25 1.25-1.25h16.5c.69 0 1.25.56 1.25 1.25v4.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25v-4.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/keyframes.scss
new file mode 100644
index 0000000000..621443a4ae
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-serverless {
+  50% {
+
+    background-color: var(--icon-color, var(--color-serverless-500, currentColor));
+    -webkit-mask-image: var(--icon-serverless-24);
+    mask-image: var(--icon-serverless-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-serverless-500, currentColor));
+    -webkit-mask-image: var(--icon-serverless-16);
+    mask-image: var(--icon-serverless-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/placeholders.scss
new file mode 100644
index 0000000000..3dc0d8bf98
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-serverless-icon {
+  --icon-name: icon-serverless;
+  content: '';
+}
+%with-serverless-mask {
+  --icon-name: icon-serverless;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/property-16.scss
new file mode 100644
index 0000000000..9f6abff01d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-serverless-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.75 11.5a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/><path fill-rule="evenodd" d="M1.28.22A.75.75 0 00.22 1.28c-.141.294-.22.623-.22.97v2.5A2.25 2.25 0 002.25 7h3.69l2 2H2.25A2.25 2.25 0 000 11.25v2.5A2.25 2.25 0 002.25 16h11.5c.347 0 .676-.079.97-.22a.75.75 0 001.06-1.06L1.28.22zm.97 10.28h7.19l4 4H2.25a.75.75 0 01-.75-.75v-2.5a.75.75 0 01.75-.75zm2.19-5L1.5 2.56v2.19c0 .414.336.75.75.75h2.19z" clip-rule="evenodd"/><path d="M13.75 0H5a.75.75 0 000 1.5h8.75a.75.75 0 01.75.75v2.5a.75.75 0 01-.75.75H10.5a.75.75 0 000 1.5h3.25A2.25 2.25 0 0016 4.75v-2.5A2.25 2.25 0 0013.75 0zM13 9.75a.75.75 0 01.75-.75A2.25 2.25 0 0116 11.25a.75.75 0 01-1.5 0 .75.75 0 00-.75-.75.75.75 0 01-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/property-24.scss
new file mode 100644
index 0000000000..7203d81a9d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/serverless/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-serverless-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M5 17.75a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5a.75.75 0 01-.75-.75z"/><path fill-rule="evenodd" d="M1.78.72A.75.75 0 00.72 1.78l.629.63A2.74 2.74 0 001 3.75v4.5A2.75 2.75 0 003.75 11h6.19l2 2H3.75A2.75 2.75 0 001 15.75v4.5A2.75 2.75 0 003.75 23h16.5a2.74 2.74 0 001.34-.349l.63.63a.75.75 0 101.06-1.061L2.866 1.806 1.78.72zm.732 2.853a1.265 1.265 0 00-.012.177v4.5c0 .69.56 1.25 1.25 1.25h4.69L2.511 3.573zm17.915 17.915L13.439 14.5H3.75c-.69 0-1.25.56-1.25 1.25v4.5c0 .69.56 1.25 1.25 1.25h16.5c.06 0 .12-.004.177-.012z" clip-rule="evenodd"/><path d="M6 1a.75.75 0 000 1.5h14.25c.69 0 1.25.56 1.25 1.25v4.5c0 .69-.56 1.25-1.25 1.25H14.5a.75.75 0 000 1.5h5.75A2.75 2.75 0 0023 8.25v-4.5A2.75 2.75 0 0020.25 1H6zM18 13a.75.75 0 000 1.5h2.25c.69 0 1.25.56 1.25 1.25V18a.75.75 0 001.5 0v-2.25A2.75 2.75 0 0020.25 13H18z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/settings/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/settings/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/settings/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/settings/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/settings/keyframes.scss
new file mode 100644
index 0000000000..5da74992d4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/settings/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-settings {
+  50% {
+
+    background-color: var(--icon-color, var(--color-settings-500, currentColor));
+    -webkit-mask-image: var(--icon-settings-24);
+    mask-image: var(--icon-settings-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-settings-500, currentColor));
+    -webkit-mask-image: var(--icon-settings-16);
+    mask-image: var(--icon-settings-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/settings/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/settings/placeholders.scss
new file mode 100644
index 0000000000..10b2ea7c88
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/settings/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-settings-icon {
+  --icon-name: icon-settings;
+  content: '';
+}
+%with-settings-mask {
+  --icon-name: icon-settings;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/settings/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/settings/property-16.scss
new file mode 100644
index 0000000000..c9dc580d86
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/settings/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-settings-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 5a3 3 0 100 6 3 3 0 000-6zM6.5 8a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"/><path d="M7.5 0a1.75 1.75 0 00-1.75 1.75v.15c-.16.06-.318.125-.472.196l-.106-.106a1.75 1.75 0 00-2.475 0l-.707.707a1.75 1.75 0 000 2.475l.106.106a6.46 6.46 0 00-.196.472h-.15A1.75 1.75 0 000 7.5v1c0 .966.784 1.75 1.75 1.75h.15c.06.16.125.318.196.472l-.106.107a1.75 1.75 0 000 2.474l.707.708a1.75 1.75 0 002.475 0l.106-.107c.154.071.312.137.472.196v.15c0 .966.784 1.75 1.75 1.75h1a1.75 1.75 0 001.75-1.75v-.15c.16-.06.318-.125.472-.196l.106.107a1.75 1.75 0 002.475 0l.707-.707a1.75 1.75 0 000-2.475l-.106-.107c.071-.154.137-.311.196-.472h.15A1.75 1.75 0 0016 8.5v-1a1.75 1.75 0 00-1.75-1.75h-.15a6.455 6.455 0 00-.196-.472l.106-.106a1.75 1.75 0 000-2.475l-.707-.707a1.75 1.75 0 00-2.475 0l-.106.106a6.46 6.46 0 00-.472-.196v-.15A1.75 1.75 0 008.5 0h-1zm-.25 1.75a.25.25 0 01.25-.25h1a.25.25 0 01.25.25v.698c0 .339.227.636.555.724.42.113.817.28 1.186.492a.75.75 0 00.905-.12l.493-.494a.25.25 0 01.354 0l.707.708a.25.25 0 010 .353l-.494.494a.75.75 0 00-.12.904c.213.369.38.767.492 1.186a.75.75 0 00.724.555h.698a.25.25 0 01.25.25v1a.25.25 0 01-.25.25h-.698a.75.75 0 00-.724.555c-.113.42-.28.817-.492 1.186a.75.75 0 00.12.905l.494.493a.25.25 0 010 .354l-.707.707a.25.25 0 01-.354 0l-.494-.494a.75.75 0 00-.904-.12 4.966 4.966 0 01-1.186.492.75.75 0 00-.555.724v.698a.25.25 0 01-.25.25h-1a.25.25 0 01-.25-.25v-.698a.75.75 0 00-.555-.724 4.966 4.966 0 01-1.186-.491.75.75 0 00-.904.12l-.494.493a.25.25 0 01-.354 0l-.707-.707a.25.25 0 010-.354l.494-.493a.75.75 0 00.12-.905 4.966 4.966 0 01-.492-1.186.75.75 0 00-.724-.555H1.75a.25.25 0 01-.25-.25v-1a.25.25 0 01.25-.25h.698a.75.75 0 00.724-.555c.113-.42.28-.817.491-1.186a.75.75 0 00-.12-.904L3.05 4.11a.25.25 0 010-.353l.707-.708a.25.25 0 01.354 0l.493.494c.24.24.611.289.905.12a4.965 4.965 0 011.186-.492.75.75 0 00.555-.724V1.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/settings/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/settings/property-24.scss
new file mode 100644
index 0000000000..b9951bf439
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/settings/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-settings-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm-2.5 4a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"/><path d="M11.5 1a2.25 2.25 0 00-2.25 2.25v.178c-.474.152-.93.342-1.366.567l-.127-.127a2.25 2.25 0 00-3.182 0l-.707.707a2.25 2.25 0 000 3.182l.127.127a8.95 8.95 0 00-.567 1.366H3.25A2.25 2.25 0 001 11.5v1a2.25 2.25 0 002.25 2.25h.178c.152.474.342.93.567 1.366l-.127.127a2.25 2.25 0 000 3.182l.707.707a2.25 2.25 0 003.182 0l.127-.127c.435.225.892.415 1.366.567v.178A2.25 2.25 0 0011.5 23h1a2.25 2.25 0 002.25-2.25v-.178c.474-.152.93-.342 1.366-.567l.127.127a2.25 2.25 0 003.182 0l.707-.707a2.25 2.25 0 000-3.182l-.127-.127a8.94 8.94 0 00.567-1.366h.178A2.25 2.25 0 0023 12.5v-1a2.25 2.25 0 00-2.25-2.25h-.178a8.952 8.952 0 00-.567-1.366l.127-.127a2.25 2.25 0 000-3.182l-.707-.707a2.25 2.25 0 00-3.182 0l-.127.127a8.95 8.95 0 00-1.366-.567V3.25A2.25 2.25 0 0012.5 1h-1zm-.75 2.25a.75.75 0 01.75-.75h1a.75.75 0 01.75.75v.744a.75.75 0 00.569.728 7.45 7.45 0 012.04.846.75.75 0 00.918-.112l.526-.527a.75.75 0 011.06 0l.708.707a.75.75 0 010 1.06l-.527.527a.75.75 0 00-.112.917c.377.627.665 1.313.846 2.041a.75.75 0 00.728.569h.744a.75.75 0 01.75.75v1a.75.75 0 01-.75.75h-.744a.75.75 0 00-.728.569 7.449 7.449 0 01-.846 2.04.75.75 0 00.112.918l.527.526a.75.75 0 010 1.06l-.707.708a.75.75 0 01-1.06 0l-.527-.527a.75.75 0 00-.917-.112 7.446 7.446 0 01-2.041.846.75.75 0 00-.569.728v.744a.75.75 0 01-.75.75h-1a.75.75 0 01-.75-.75v-.744a.75.75 0 00-.569-.728 7.447 7.447 0 01-2.04-.846.75.75 0 00-.918.112l-.526.527a.75.75 0 01-1.061 0l-.707-.707a.75.75 0 010-1.06l.527-.527a.75.75 0 00.112-.917 7.45 7.45 0 01-.846-2.041.75.75 0 00-.728-.569H3.25a.75.75 0 01-.75-.75v-1a.75.75 0 01.75-.75h.744a.75.75 0 00.728-.569c.181-.728.469-1.414.846-2.04a.75.75 0 00-.112-.918l-.527-.526a.75.75 0 010-1.061l.707-.707a.75.75 0 011.06 0l.527.527a.75.75 0 00.917.112 7.451 7.451 0 012.041-.846.75.75 0 00.569-.728V3.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/share/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/share/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/share/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/share/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/share/keyframes.scss
new file mode 100644
index 0000000000..c1878cd9c7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/share/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-share {
+  50% {
+
+    background-color: var(--icon-color, var(--color-share-500, currentColor));
+    -webkit-mask-image: var(--icon-share-24);
+    mask-image: var(--icon-share-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-share-500, currentColor));
+    -webkit-mask-image: var(--icon-share-16);
+    mask-image: var(--icon-share-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/share/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/share/placeholders.scss
new file mode 100644
index 0000000000..31b188b8ab
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/share/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-share-icon {
+  --icon-name: icon-share;
+  content: '';
+}
+%with-share-mask {
+  --icon-name: icon-share;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/share/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/share/property-16.scss
new file mode 100644
index 0000000000..63f6c1f410
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/share/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-share-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5.3 5.76a.75.75 0 01-1.1-1.02l3.25-3.5a.75.75 0 011.1 0l3.25 3.5a.75.75 0 11-1.1 1.02l-1.95-2.1v6.59a.75.75 0 01-1.5 0V3.66L5.3 5.76z"/><path d="M2 9.25A2.25 2.25 0 014.25 7H5a.75.75 0 010 1.5h-.75a.75.75 0 00-.75.75v3.5c0 .414.336.75.75.75h7.5a.75.75 0 00.75-.75v-3.5a.75.75 0 00-.75-.75H11A.75.75 0 0111 7h.75A2.25 2.25 0 0114 9.25v3.5A2.25 2.25 0 0111.75 15h-7.5A2.25 2.25 0 012 12.75v-3.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/share/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/share/property-24.scss
new file mode 100644
index 0000000000..5e4901663b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/share/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-share-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.295 6.765a.75.75 0 11-1.09-1.03l4.25-4.5a.75.75 0 011.09 0l4.25 4.5a.75.75 0 01-1.09 1.03L12.75 3.636V14.25a.75.75 0 01-1.5 0V3.636L8.295 6.765z"/><path d="M5.75 10.5c-.69 0-1.25.56-1.25 1.25v8.5c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25v-8.5c0-.69-.56-1.25-1.25-1.25H15.5a.75.75 0 010-1.5h2.75A2.75 2.75 0 0121 11.75v8.5A2.75 2.75 0 0118.25 23H5.75A2.75 2.75 0 013 20.25v-8.5A2.75 2.75 0 015.75 9H8.5a.75.75 0 010 1.5H5.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/keyframes.scss
new file mode 100644
index 0000000000..60466b539a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-shield-alert {
+  50% {
+
+    background-color: var(--icon-color, var(--color-shield-alert-500, currentColor));
+    -webkit-mask-image: var(--icon-shield-alert-24);
+    mask-image: var(--icon-shield-alert-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-shield-alert-500, currentColor));
+    -webkit-mask-image: var(--icon-shield-alert-16);
+    mask-image: var(--icon-shield-alert-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/placeholders.scss
new file mode 100644
index 0000000000..c0548a509e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-shield-alert-icon {
+  --icon-name: icon-shield-alert;
+  content: '';
+}
+%with-shield-alert-mask {
+  --icon-name: icon-shield-alert;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/property-16.scss
new file mode 100644
index 0000000000..6abb45ef09
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shield-alert-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/><path fill-rule="evenodd" d="M7.26.213a2.25 2.25 0 011.48 0l4.75 1.653A2.25 2.25 0 0115 3.991v4.01c0 2.048-1.181 3.747-2.45 4.991-1.282 1.255-2.757 2.15-3.573 2.598a2.024 2.024 0 01-1.954 0c-.816-.447-2.291-1.342-3.572-2.598C2.18 11.748 1 10.05 1 8V3.991c0-.957.606-1.81 1.51-2.125L7.26.213zm.986 1.417a.75.75 0 00-.493 0l-4.75 1.653a.75.75 0 00-.503.708v4.01c0 1.455.847 2.79 2 3.92 1.142 1.118 2.483 1.937 3.244 2.353.163.09.35.09.512 0 .761-.416 2.102-1.235 3.244-2.353 1.153-1.13 2-2.465 2-3.92V3.99a.75.75 0 00-.504-.708L8.246 1.63z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/property-24.scss
new file mode 100644
index 0000000000..a6e4d194ed
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-alert/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shield-alert-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M11.04 1.307a2.75 2.75 0 011.92 0l6.25 2.33A2.75 2.75 0 0121 6.214V12c0 2.732-1.462 5.038-3.104 6.774-1.65 1.744-3.562 3-4.65 3.642a2.437 2.437 0 01-2.493 0c-1.087-.643-3-1.898-4.65-3.642C4.463 17.038 3 14.732 3 12V6.214a2.75 2.75 0 011.79-2.577l6.25-2.33zm1.397 1.406a1.25 1.25 0 00-.874 0l-6.25 2.33a1.25 1.25 0 00-.813 1.17V12c0 2.182 1.172 4.136 2.693 5.744 1.514 1.6 3.294 2.772 4.323 3.38.304.18.664.18.968 0 1.03-.608 2.809-1.78 4.323-3.38C18.327 16.136 19.5 14.182 19.5 12V6.214a1.25 1.25 0 00-.813-1.171l-6.25-2.33z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/keyframes.scss
new file mode 100644
index 0000000000..d2fe2587a2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-shield-check {
+  50% {
+
+    background-color: var(--icon-color, var(--color-shield-check-500, currentColor));
+    -webkit-mask-image: var(--icon-shield-check-24);
+    mask-image: var(--icon-shield-check-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-shield-check-500, currentColor));
+    -webkit-mask-image: var(--icon-shield-check-16);
+    mask-image: var(--icon-shield-check-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/placeholders.scss
new file mode 100644
index 0000000000..d6bed2ee64
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-shield-check-icon {
+  --icon-name: icon-shield-check;
+  content: '';
+}
+%with-shield-check-mask {
+  --icon-name: icon-shield-check;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/property-16.scss
new file mode 100644
index 0000000000..9b9659801e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shield-check-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.28 5.47a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.47-3.47a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M7.26.213a2.25 2.25 0 011.48 0l4.75 1.653A2.25 2.25 0 0115 3.991v4.01c0 2.048-1.181 3.747-2.45 4.991-1.282 1.255-2.757 2.15-3.573 2.598a2.024 2.024 0 01-1.954 0c-.816-.447-2.291-1.342-3.572-2.598C2.18 11.748 1 10.05 1 8V3.991c0-.957.606-1.81 1.51-2.125L7.26.213zm.986 1.417a.75.75 0 00-.493 0l-4.75 1.653a.75.75 0 00-.503.708v4.01c0 1.455.847 2.79 2 3.92 1.142 1.118 2.483 1.937 3.244 2.353.163.09.35.09.512 0 .761-.416 2.102-1.235 3.244-2.353 1.153-1.13 2-2.465 2-3.92V3.99a.75.75 0 00-.504-.708L8.246 1.63z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/property-24.scss
new file mode 100644
index 0000000000..2ec5f1ef8f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-check/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shield-check-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.78 8.22a.75.75 0 010 1.06l-5.499 5.5a.75.75 0 01-1.061 0l-2.5-2.5a.75.75 0 111.06-1.06l1.97 1.97 4.97-4.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M11.04 1.307a2.75 2.75 0 011.92 0l6.25 2.33A2.75 2.75 0 0121 6.214V12c0 2.732-1.462 5.038-3.104 6.774-1.65 1.744-3.562 3-4.65 3.642a2.437 2.437 0 01-2.493 0c-1.087-.643-3-1.898-4.65-3.642C4.463 17.038 3 14.732 3 12V6.214a2.75 2.75 0 011.79-2.577l6.25-2.33zm1.397 1.406a1.25 1.25 0 00-.874 0l-6.25 2.33a1.25 1.25 0 00-.813 1.17V12c0 2.182 1.172 4.136 2.693 5.744 1.514 1.6 3.294 2.772 4.323 3.38.304.18.664.18.968 0 1.03-.608 2.809-1.78 4.323-3.38C18.327 16.136 19.5 14.182 19.5 12V6.214a1.25 1.25 0 00-.813-1.171l-6.25-2.33z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/keyframes.scss
new file mode 100644
index 0000000000..2344cc3199
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-shield-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-shield-off-500, currentColor));
+    -webkit-mask-image: var(--icon-shield-off-24);
+    mask-image: var(--icon-shield-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-shield-off-500, currentColor));
+    -webkit-mask-image: var(--icon-shield-off-16);
+    mask-image: var(--icon-shield-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/placeholders.scss
new file mode 100644
index 0000000000..e9b189ef69
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-shield-off-icon {
+  --icon-name: icon-shield-off;
+  content: '';
+}
+%with-shield-off-mask {
+  --icon-name: icon-shield-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/property-16.scss
new file mode 100644
index 0000000000..8a41695847
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shield-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.74.213a2.25 2.25 0 00-1.48 0L6.035.64a.75.75 0 00.493 1.417l1.226-.427a.75.75 0 01.493 0l4.75 1.653a.75.75 0 01.504.708v4.01c0 .334-.044.661-.127.98a.75.75 0 101.453.374C14.938 8.922 15 8.47 15 8V3.991a2.25 2.25 0 00-1.51-2.125L8.74.213z"/><path fill-rule="evenodd" d="M1.447 2.507L.72 1.78A.75.75 0 011.78.72l13.5 13.5a.75.75 0 11-1.06 1.06l-1.988-1.987c-1.2 1.098-2.505 1.886-3.254 2.296a2.026 2.026 0 01-1.955 0c-.816-.446-2.291-1.341-3.572-2.597C2.18 11.748 1 10.05 1 8V3.72c0-.456.165-.882.447-1.213zm1.078 1.079a.366.366 0 00-.025.133V8c0 1.456.847 2.79 2 3.92 1.142 1.12 2.483 1.938 3.244 2.354.162.09.35.09.513 0 .69-.378 1.854-1.084 2.913-2.043L2.525 3.586z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/property-24.scss
new file mode 100644
index 0000000000..9ebe903833
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shield-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06l2.185 2.185A1.937 1.937 0 003 5.651V12c0 2.732 1.462 5.038 3.104 6.774 1.65 1.744 3.562 3 4.65 3.642a2.442 2.442 0 002.496-.002c1.066-.63 2.928-1.85 4.557-3.546l3.913 3.912a.75.75 0 101.06-1.06L2.28 1.22zm14.466 16.587L4.508 5.568a.44.44 0 00-.008.083V12c0 2.182 1.172 4.136 2.693 5.744 1.514 1.6 3.294 2.772 4.323 3.38a.942.942 0 00.97-.002c1.02-.602 2.763-1.75 4.26-3.315z" clip-rule="evenodd"/><path d="M12.96 1.307a2.75 2.75 0 00-1.92 0l-2.302.858a.75.75 0 10.524 1.406l2.301-.858a1.25 1.25 0 01.874 0l6.25 2.33c.489.182.813.649.813 1.17V12c0 .574-.08 1.13-.227 1.668a.75.75 0 101.448.394c.178-.657.279-1.346.279-2.062V6.214a2.75 2.75 0 00-1.79-2.577l-6.25-2.33z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/keyframes.scss
new file mode 100644
index 0000000000..41fc52954b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-shield-x {
+  50% {
+
+    background-color: var(--icon-color, var(--color-shield-x-500, currentColor));
+    -webkit-mask-image: var(--icon-shield-x-24);
+    mask-image: var(--icon-shield-x-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-shield-x-500, currentColor));
+    -webkit-mask-image: var(--icon-shield-x-16);
+    mask-image: var(--icon-shield-x-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/placeholders.scss
new file mode 100644
index 0000000000..f04758abd4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-shield-x-icon {
+  --icon-name: icon-shield-x;
+  content: '';
+}
+%with-shield-x-mask {
+  --icon-name: icon-shield-x;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/property-16.scss
new file mode 100644
index 0000000000..28c781c0a6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shield-x-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.78 4.72a.75.75 0 010 1.06L9.06 7.5l1.72 1.72a.75.75 0 11-1.06 1.06L8 8.56l-1.72 1.72a.75.75 0 11-1.06-1.06L6.94 7.5 5.22 5.78a.75.75 0 011.06-1.06L8 6.44l1.72-1.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M7.26.213a2.25 2.25 0 011.48 0l4.75 1.653A2.25 2.25 0 0115 3.991v4.01c0 2.048-1.181 3.747-2.45 4.991-1.282 1.255-2.757 2.15-3.573 2.598a2.024 2.024 0 01-1.954 0c-.816-.447-2.291-1.342-3.572-2.598C2.18 11.748 1 10.05 1 8V3.991c0-.957.606-1.81 1.51-2.125L7.26.213zm.986 1.417a.75.75 0 00-.493 0l-4.75 1.653a.75.75 0 00-.503.708v4.01c0 1.455.847 2.79 2 3.92 1.142 1.118 2.483 1.937 3.244 2.353.163.09.35.09.512 0 .761-.416 2.102-1.235 3.244-2.353 1.153-1.13 2-2.465 2-3.92V3.99a.75.75 0 00-.504-.708L8.246 1.63z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/property-24.scss
new file mode 100644
index 0000000000..95b552a852
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield-x/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shield-x-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15.78 7.22a.75.75 0 010 1.06L13.06 11l2.72 2.72a.75.75 0 11-1.06 1.06L12 12.06l-2.72 2.72a.75.75 0 01-1.06-1.06L10.94 11 8.22 8.28a.75.75 0 011.06-1.06L12 9.94l2.72-2.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M11.04 1.307a2.75 2.75 0 011.92 0l6.25 2.33A2.75 2.75 0 0121 6.214V12c0 2.732-1.462 5.038-3.104 6.774-1.65 1.744-3.562 3-4.65 3.642a2.437 2.437 0 01-2.493 0c-1.087-.643-3-1.898-4.65-3.642C4.463 17.038 3 14.732 3 12V6.214a2.75 2.75 0 011.79-2.577l6.25-2.33zm1.397 1.406a1.25 1.25 0 00-.874 0l-6.25 2.33a1.25 1.25 0 00-.813 1.17V12c0 2.182 1.172 4.136 2.693 5.744 1.514 1.6 3.294 2.772 4.323 3.38.304.18.664.18.968 0 1.03-.608 2.809-1.78 4.323-3.38C18.327 16.136 19.5 14.182 19.5 12V6.214a1.25 1.25 0 00-.813-1.171l-6.25-2.33z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield/keyframes.scss
new file mode 100644
index 0000000000..97122c7e6c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-shield {
+  50% {
+
+    background-color: var(--icon-color, var(--color-shield-500, currentColor));
+    -webkit-mask-image: var(--icon-shield-24);
+    mask-image: var(--icon-shield-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-shield-500, currentColor));
+    -webkit-mask-image: var(--icon-shield-16);
+    mask-image: var(--icon-shield-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield/placeholders.scss
new file mode 100644
index 0000000000..34597b7b25
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-shield-icon {
+  --icon-name: icon-shield;
+  content: '';
+}
+%with-shield-mask {
+  --icon-name: icon-shield;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield/property-16.scss
new file mode 100644
index 0000000000..378c4883b1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shield-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.26.213a2.25 2.25 0 011.48 0l4.75 1.653A2.25 2.25 0 0115 3.991v4.01c0 2.048-1.181 3.747-2.45 4.991-1.282 1.255-2.757 2.15-3.573 2.598a2.024 2.024 0 01-1.954 0c-.816-.447-2.291-1.342-3.572-2.598C2.18 11.748 1 10.05 1 8V3.991c0-.957.606-1.81 1.51-2.125L7.26.213zm.986 1.417a.75.75 0 00-.493 0l-4.75 1.653a.75.75 0 00-.503.708v4.01c0 1.455.847 2.79 2 3.92 1.142 1.118 2.483 1.937 3.244 2.353.163.09.35.09.512 0 .761-.416 2.102-1.235 3.244-2.353 1.153-1.13 2-2.465 2-3.92V3.99a.75.75 0 00-.504-.708L8.246 1.63z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shield/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shield/property-24.scss
new file mode 100644
index 0000000000..77dca429fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shield/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shield-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M11.04 1.307a2.75 2.75 0 011.92 0l6.25 2.33A2.75 2.75 0 0121 6.214V12c0 2.732-1.462 5.038-3.104 6.774-1.65 1.744-3.562 3-4.65 3.642a2.437 2.437 0 01-2.493 0c-1.087-.643-3-1.898-4.65-3.642C4.463 17.038 3 14.732 3 12V6.214a2.75 2.75 0 011.79-2.577l6.25-2.33zm1.397 1.406a1.25 1.25 0 00-.874 0l-6.25 2.33a1.25 1.25 0 00-.813 1.17V12c0 2.182 1.172 4.136 2.693 5.744 1.514 1.6 3.294 2.772 4.323 3.38.304.18.664.18.968 0 1.03-.608 2.809-1.78 4.323-3.38C18.327 16.136 19.5 14.182 19.5 12V6.214a1.25 1.25 0 00-.813-1.171l-6.25-2.33z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/keyframes.scss
new file mode 100644
index 0000000000..f4efebb281
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-shopping-bag {
+  50% {
+
+    background-color: var(--icon-color, var(--color-shopping-bag-500, currentColor));
+    -webkit-mask-image: var(--icon-shopping-bag-24);
+    mask-image: var(--icon-shopping-bag-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-shopping-bag-500, currentColor));
+    -webkit-mask-image: var(--icon-shopping-bag-16);
+    mask-image: var(--icon-shopping-bag-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/placeholders.scss
new file mode 100644
index 0000000000..a1f27526fc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-shopping-bag-icon {
+  --icon-name: icon-shopping-bag;
+  content: '';
+}
+%with-shopping-bag-mask {
+  --icon-name: icon-shopping-bag;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/property-16.scss
new file mode 100644
index 0000000000..a0dec1a6ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shopping-bag-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.5 7.25a.75.75 0 00-1.5 0c0 .76.34 1.468.91 1.975A3.15 3.15 0 008 10a3.15 3.15 0 002.09-.775c.57-.507.91-1.215.91-1.975a.75.75 0 00-1.5 0c0 .301-.134.61-.407.854A1.651 1.651 0 018 8.5c-.424 0-.816-.15-1.093-.396A1.145 1.145 0 016.5 7.25z"/><path fill-rule="evenodd" d="M3.448.746A2.25 2.25 0 015.121 0h5.758a2.25 2.25 0 011.673.746l1.871 2.081c.371.413.577.949.577 1.504v9.419A2.25 2.25 0 0112.75 16h-9.5A2.25 2.25 0 011 13.75V4.331c0-.555.205-1.091.577-1.504L3.448.746zm1.673.754a.75.75 0 00-.558.249L2.99 3.5H13.01l-1.574-1.751a.75.75 0 00-.558-.249H5.12zM2.5 13.75V5h11v8.75a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/property-24.scss
new file mode 100644
index 0000000000..3bb1690d93
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-bag/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shopping-bag-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9 10.5a.75.75 0 00-1.5 0 4.5 4.5 0 109 0 .75.75 0 00-1.5 0 3 3 0 01-6 0z"/><path fill-rule="evenodd" d="M5.612 1.865A2.75 2.75 0 017.614 1h8.772a2.75 2.75 0 012.002.865l2.865 3.043c.48.51.747 1.185.747 1.885V20.25A2.75 2.75 0 0119.25 23H4.75A2.75 2.75 0 012 20.25V6.793c0-.7.267-1.374.747-1.885l2.865-3.043zm2.002.635a1.25 1.25 0 00-.91.393L4.25 5.5h15.498l-2.453-2.607a1.25 1.25 0 00-.91-.393H7.614zM3.5 20.25V7h17v13.25c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/keyframes.scss
new file mode 100644
index 0000000000..3f18c85530
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-shopping-cart {
+  50% {
+
+    background-color: var(--icon-color, var(--color-shopping-cart-500, currentColor));
+    -webkit-mask-image: var(--icon-shopping-cart-24);
+    mask-image: var(--icon-shopping-cart-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-shopping-cart-500, currentColor));
+    -webkit-mask-image: var(--icon-shopping-cart-16);
+    mask-image: var(--icon-shopping-cart-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/placeholders.scss
new file mode 100644
index 0000000000..cad2d761f4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-shopping-cart-icon {
+  --icon-name: icon-shopping-cart;
+  content: '';
+}
+%with-shopping-cart-mask {
+  --icon-name: icon-shopping-cart;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/property-16.scss
new file mode 100644
index 0000000000..34cad5333e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shopping-cart-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M1.25 1.5a.75.75 0 000 1.5h1.154a.75.75 0 01.736.604l.874 4.413.405 2.15A2.25 2.25 0 006.63 12h6.095a2.25 2.25 0 002.214-1.848l.727-4A2.25 2.25 0 0013.453 3.5H4.648l-.037-.187A2.25 2.25 0 002.404 1.5H1.25zm4.237 6.236L4.945 5h8.508a.75.75 0 01.738.884l-.728 4a.75.75 0 01-.738.616H6.63a.75.75 0 01-.737-.611l-.406-2.153z" clip-rule="evenodd"/><path d="M7.5 13.75c0 .69-.56 1.25-1.25 1.25h-.01a1.25 1.25 0 110-2.5h.01c.69 0 1.25.56 1.25 1.25zM14 13.75c0 .69-.56 1.25-1.25 1.25h-.01a1.25 1.25 0 110-2.5h.01c.69 0 1.25.56 1.25 1.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/property-24.scss
new file mode 100644
index 0000000000..06408b34d7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shopping-cart/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shopping-cart-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M1.25 1.5a.75.75 0 000 1.5h2.089a1.25 1.25 0 011.229 1.02l1.444 7.74.706 3.971A2.75 2.75 0 009.426 18h10.142a2.75 2.75 0 002.71-2.279l1.303-7.5A2.75 2.75 0 0020.872 5H6.276l-.234-1.255A2.75 2.75 0 003.34 1.5H1.25zm6.238 9.994L6.556 6.5h14.316c.776 0 1.365.7 1.232 1.464l-1.305 7.5a1.25 1.25 0 01-1.231 1.036H9.426a1.25 1.25 0 01-1.23-1.031l-.708-3.975z" clip-rule="evenodd"/><path d="M11.5 20.75a1.75 1.75 0 01-1.75 1.75h-.01a1.75 1.75 0 110-3.5h.01c.966 0 1.75.784 1.75 1.75zM21.5 20.75a1.75 1.75 0 01-1.75 1.75h-.01a1.75 1.75 0 110-3.5h.01c.966 0 1.75.784 1.75 1.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/keyframes.scss
new file mode 100644
index 0000000000..8f8fb98693
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-shuffle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-shuffle-500, currentColor));
+    -webkit-mask-image: var(--icon-shuffle-24);
+    mask-image: var(--icon-shuffle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-shuffle-500, currentColor));
+    -webkit-mask-image: var(--icon-shuffle-16);
+    mask-image: var(--icon-shuffle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/placeholders.scss
new file mode 100644
index 0000000000..2219416004
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-shuffle-icon {
+  --icon-name: icon-shuffle;
+  content: '';
+}
+%with-shuffle-mask {
+  --icon-name: icon-shuffle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/property-16.scss
new file mode 100644
index 0000000000..9a75dc0924
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shuffle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M14.943 1.463a.748.748 0 00-.161-.242l-.002-.001-.001-.002A.748.748 0 0014.25 1h-4a.75.75 0 000 1.5h2.19L1.22 13.72a.75.75 0 101.06 1.06L13.5 3.56v2.19a.75.75 0 001.5 0v-4a.747.747 0 00-.057-.287zM9.5 14.25c0 .414.336.75.75.75h4a.747.747 0 00.75-.75v-4a.75.75 0 00-1.5 0v2.19l-2.47-2.47a.75.75 0 10-1.06 1.06l2.47 2.47h-2.19a.75.75 0 00-.75.75zM6.03 4.97a.75.75 0 01-1.06 1.06L1.22 2.28a.75.75 0 011.06-1.06l3.75 3.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/property-24.scss
new file mode 100644
index 0000000000..79c0855e9a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/shuffle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-shuffle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M21.943 2.463A.748.748 0 0021.25 2h-5.5a.75.75 0 000 1.5h3.69L2.22 20.72a.75.75 0 101.06 1.06L20.5 4.56v3.69a.75.75 0 001.5 0v-5.5a.747.747 0 00-.057-.287zM20.5 19.44v-3.69a.75.75 0 011.5 0v5.5a.747.747 0 01-.75.75h-5.5a.75.75 0 010-1.5h3.69l-4.97-4.97a.75.75 0 111.06-1.06l4.97 4.97zM9.53 9.53a.75.75 0 000-1.06L3.28 2.22a.75.75 0 00-1.06 1.06l6.25 6.25a.75.75 0 001.06 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/keyframes.scss
new file mode 100644
index 0000000000..826b39e06a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sidebar-hide {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sidebar-hide-500, currentColor));
+    -webkit-mask-image: var(--icon-sidebar-hide-24);
+    mask-image: var(--icon-sidebar-hide-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sidebar-hide-500, currentColor));
+    -webkit-mask-image: var(--icon-sidebar-hide-16);
+    mask-image: var(--icon-sidebar-hide-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/placeholders.scss
new file mode 100644
index 0000000000..fd1a4aa8b0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sidebar-hide-icon {
+  --icon-name: icon-sidebar-hide;
+  content: '';
+}
+%with-sidebar-hide-mask {
+  --icon-name: icon-sidebar-hide;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/property-16.scss
new file mode 100644
index 0000000000..b620c0e211
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sidebar-hide-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.726 5.263a.7.7 0 10-.952-1.026l-3.5 3.25a.7.7 0 000 1.026l3.5 3.25a.7.7 0 00.952-1.026L8.78 8l2.947-2.737z"/><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h1.3v-11h-1.3zm9.5 11h-6.8v-11h6.8a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/property-24.scss
new file mode 100644
index 0000000000..337df01712
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-hide/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sidebar-hide-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.765 8.295a.75.75 0 00-1.03-1.09l-4.5 4.25a.75.75 0 000 1.09l4.5 4.25a.75.75 0 001.03-1.09L12.842 12l3.923-3.705z"/><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25H7v-17H4.75zm14.5 17H8.5v-17h10.75c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/keyframes.scss
new file mode 100644
index 0000000000..443810d479
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sidebar-show {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sidebar-show-500, currentColor));
+    -webkit-mask-image: var(--icon-sidebar-show-24);
+    mask-image: var(--icon-sidebar-show-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sidebar-show-500, currentColor));
+    -webkit-mask-image: var(--icon-sidebar-show-16);
+    mask-image: var(--icon-sidebar-show-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/placeholders.scss
new file mode 100644
index 0000000000..5b351b942b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sidebar-show-icon {
+  --icon-name: icon-sidebar-show;
+  content: '';
+}
+%with-sidebar-show-mask {
+  --icon-name: icon-sidebar-show;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/property-16.scss
new file mode 100644
index 0000000000..86cc379cd4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sidebar-show-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.774 5.263a.7.7 0 11.952-1.026l3.5 3.25a.7.7 0 010 1.026l-3.5 3.25a.7.7 0 01-.952-1.026L10.72 8 7.774 5.263z"/><path fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h1.3v-11h-1.3zm9.5 11h-6.8v-11h6.8a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/property-24.scss
new file mode 100644
index 0000000000..1fc34e50f3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar-show/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sidebar-show-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M11.735 8.295a.75.75 0 011.03-1.09l4.5 4.25a.75.75 0 010 1.09l-4.5 4.25a.75.75 0 01-1.03-1.09L15.658 12l-3.923-3.705z"/><path fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25H7v-17H4.75zm14.5 17H8.5v-17h10.75c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/keyframes.scss
new file mode 100644
index 0000000000..99d66e1fc8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sidebar {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sidebar-500, currentColor));
+    -webkit-mask-image: var(--icon-sidebar-24);
+    mask-image: var(--icon-sidebar-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sidebar-500, currentColor));
+    -webkit-mask-image: var(--icon-sidebar-16);
+    mask-image: var(--icon-sidebar-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/placeholders.scss
new file mode 100644
index 0000000000..4b2c8eb6ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sidebar-icon {
+  --icon-name: icon-sidebar;
+  content: '';
+}
+%with-sidebar-mask {
+  --icon-name: icon-sidebar;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/property-16.scss
new file mode 100644
index 0000000000..ee3253f8a9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sidebar-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zM2.5 3.25a.75.75 0 01.75-.75h1.8v11h-1.8a.75.75 0 01-.75-.75v-9.5zM6.45 13.5h6.3a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-6.3v11z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/property-24.scss
new file mode 100644
index 0000000000..56444fbf9b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sidebar/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sidebar-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25H8v17H4.75c-.69 0-1.25-.56-1.25-1.25V4.75zm6 15.75h9.75c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H9.5v17z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/keyframes.scss
new file mode 100644
index 0000000000..b3c3c2dcc6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sign-in {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sign-in-500, currentColor));
+    -webkit-mask-image: var(--icon-sign-in-24);
+    mask-image: var(--icon-sign-in-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sign-in-500, currentColor));
+    -webkit-mask-image: var(--icon-sign-in-16);
+    mask-image: var(--icon-sign-in-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/placeholders.scss
new file mode 100644
index 0000000000..5b9dbdb22e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sign-in-icon {
+  --icon-name: icon-sign-in;
+  content: '';
+}
+%with-sign-in-mask {
+  --icon-name: icon-sign-in;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/property-16.scss
new file mode 100644
index 0000000000..dd6d068a6e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sign-in-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.5 1.75a.75.75 0 01.75-.75h2.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-2.5a.75.75 0 010-1.5h2.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-2.5a.75.75 0 01-.75-.75z"/><path d="M5.97 3.72a.75.75 0 011.06 0l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 01-1.06-1.06L8.19 8.5H2A.75.75 0 012 7h6.19L5.97 4.78a.75.75 0 010-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/property-24.scss
new file mode 100644
index 0000000000..569ebfbe3e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-in/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sign-in-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.5 2.75a.75.75 0 01.75-.75h4A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22h-4a.75.75 0 010-1.5h4c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25h-4a.75.75 0 01-.75-.75z"/><path d="M9.47 6.22a.75.75 0 011.06 0l5 5a.747.747 0 010 1.06l-5 5a.75.75 0 11-1.06-1.06l3.72-3.72H3A.75.75 0 013 11h10.19L9.47 7.28a.75.75 0 010-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/keyframes.scss
new file mode 100644
index 0000000000..060fa320e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sign-out {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sign-out-500, currentColor));
+    -webkit-mask-image: var(--icon-sign-out-24);
+    mask-image: var(--icon-sign-out-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sign-out-500, currentColor));
+    -webkit-mask-image: var(--icon-sign-out-16);
+    mask-image: var(--icon-sign-out-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/placeholders.scss
new file mode 100644
index 0000000000..9dd5439b9c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sign-out-icon {
+  --icon-name: icon-sign-out;
+  content: '';
+}
+%with-sign-out-mask {
+  --icon-name: icon-sign-out;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/property-16.scss
new file mode 100644
index 0000000000..4f9e18449d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sign-out-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.5 1.75A.75.75 0 005.75 1h-2.5A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h2.5a.75.75 0 000-1.5h-2.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 01.75-.75h2.5a.75.75 0 00.75-.75z"/><path d="M9.97 3.72a.75.75 0 011.06 0l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06l2.22-2.22H6A.75.75 0 016 7h6.19L9.97 4.78a.75.75 0 010-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/property-24.scss
new file mode 100644
index 0000000000..a7e642121d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sign-out/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sign-out-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.5 2.75A.75.75 0 008.75 2h-4A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h4a.75.75 0 000-1.5h-4c-.69 0-1.25-.56-1.25-1.25V4.75c0-.69.56-1.25 1.25-1.25h4a.75.75 0 00.75-.75z"/><path d="M15.47 6.22a.75.75 0 011.06 0l5 5a.75.75 0 010 1.06l-5 5a.75.75 0 11-1.06-1.06l3.72-3.72H9A.75.75 0 019 11h10.19l-3.72-3.72a.75.75 0 010-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/keyframes.scss
new file mode 100644
index 0000000000..e1dca30eb1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-skip-back {
+  50% {
+
+    background-color: var(--icon-color, var(--color-skip-back-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-back-24);
+    mask-image: var(--icon-skip-back-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-skip-back-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-back-16);
+    mask-image: var(--icon-skip-back-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/placeholders.scss
new file mode 100644
index 0000000000..3623b106b9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-skip-back-icon {
+  --icon-name: icon-skip-back;
+  content: '';
+}
+%with-skip-back-mask {
+  --icon-name: icon-skip-back;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/property-16.scss
new file mode 100644
index 0000000000..5167e67357
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-skip-back-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M11.24 2.5C12.4 1.682 14 2.51 14 3.93v8.14c0 1.419-1.6 2.248-2.76 1.43L5.476 9.43a1.75 1.75 0 010-2.86L11.24 2.5zm1.26 1.43a.25.25 0 00-.394-.204L6.34 7.796a.25.25 0 000 .408l5.766 4.07a.25.25 0 00.394-.204V3.93z" clip-rule="evenodd"/><path d="M3.5 3A.75.75 0 002 3v10a.75.75 0 001.5 0V3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/property-24.scss
new file mode 100644
index 0000000000..9789da76f6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-back/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-skip-back-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M17.236 4.512C18.395 3.688 20 4.516 20 5.938v12.124c0 1.421-1.605 2.25-2.764 1.426L8.71 13.426a1.75 1.75 0 010-2.852l8.525-6.062zM18.5 5.938a.25.25 0 00-.395-.204l-8.524 6.062a.25.25 0 000 .408l8.524 6.061a.25.25 0 00.395-.203V5.938z" clip-rule="evenodd"/><path d="M6 5a.75.75 0 00-1.5 0v14A.75.75 0 006 19V5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/keyframes.scss
new file mode 100644
index 0000000000..426b82f595
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-skip-forward {
+  50% {
+
+    background-color: var(--icon-color, var(--color-skip-forward-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-forward-24);
+    mask-image: var(--icon-skip-forward-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-skip-forward-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-forward-16);
+    mask-image: var(--icon-skip-forward-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/placeholders.scss
new file mode 100644
index 0000000000..0175acfd15
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-skip-forward-icon {
+  --icon-name: icon-skip-forward;
+  content: '';
+}
+%with-skip-forward-mask {
+  --icon-name: icon-skip-forward;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/property-16.scss
new file mode 100644
index 0000000000..e5f5ca42f0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-skip-forward-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M4.76 2.5C3.6 1.682 2 2.51 2 3.93v8.14c0 1.419 1.6 2.248 2.76 1.43l5.765-4.07a1.75 1.75 0 000-2.86L4.76 2.5zM3.5 3.93a.25.25 0 01.394-.204l5.766 4.07a.25.25 0 010 .408l-5.766 4.07a.25.25 0 01-.394-.204V3.93z" clip-rule="evenodd"/><path d="M14 3a.75.75 0 00-1.5 0v10a.75.75 0 001.5 0V3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/property-24.scss
new file mode 100644
index 0000000000..704730776a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip-forward/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-skip-forward-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M6.764 4.512C5.606 3.688 4 4.516 4 5.938v12.124c0 1.421 1.606 2.25 2.764 1.426l8.525-6.062a1.75 1.75 0 000-2.852L6.764 4.512zM5.5 5.938a.25.25 0 01.395-.204l8.524 6.062c.14.1.14.308 0 .408l-8.524 6.061a.25.25 0 01-.395-.203V5.938z" clip-rule="evenodd"/><path d="M19.5 5A.75.75 0 0018 5v14a.75.75 0 001.5 0V5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip/keyframes.scss
new file mode 100644
index 0000000000..ce4691249b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-skip {
+  50% {
+
+    background-color: var(--icon-color, var(--color-skip-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-24);
+    mask-image: var(--icon-skip-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-skip-500, currentColor));
+    -webkit-mask-image: var(--icon-skip-16);
+    mask-image: var(--icon-skip-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip/placeholders.scss
new file mode 100644
index 0000000000..3eb544c0e2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-skip-icon {
+  --icon-name: icon-skip;
+  content: '';
+}
+%with-skip-mask {
+  --icon-name: icon-skip;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip/property-16.scss
new file mode 100644
index 0000000000..52ab4a36cd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-skip-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 0110.535-5.096l-9.131 9.131A6.472 6.472 0 011.5 8zm2.465 5.096a6.5 6.5 0 009.131-9.131l-9.131 9.131z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/skip/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/skip/property-24.scss
new file mode 100644
index 0000000000..d478c166db
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/skip/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-skip-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.172 19.728a.744.744 0 00.1.1A10.965 10.965 0 0012 23c6.075 0 11-4.925 11-11 0-3.012-1.21-5.742-3.172-7.728a.769.769 0 00-.1-.1A10.965 10.965 0 0012 1C5.925 1 1 5.925 1 12c0 3.012 1.21 5.742 3.172 7.728zM2.5 12A9.5 9.5 0 0112 2.5c2.353 0 4.507.856 6.166 2.273L4.773 18.166A9.462 9.462 0 012.5 12zm16.727-6.166A9.462 9.462 0 0121.5 12a9.5 9.5 0 01-9.5 9.5 9.462 9.462 0 01-6.166-2.273L19.227 5.834z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/keyframes.scss
new file mode 100644
index 0000000000..2b299cc236
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-slack-color {
+  50% {
+    background-image: var(--icon-slack-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-slack-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/placeholders.scss
new file mode 100644
index 0000000000..4c74b18a7a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-slack-color-icon {
+  --icon-name: icon-slack-color;
+  content: '';
+}
+%with-slack-color-mask {
+  --icon-name: icon-slack-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/property-16.scss
new file mode 100644
index 0000000000..c829ef92c8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-slack-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="%23E01E5A" d="M2.471 11.318a1.474 1.474 0 001.47-1.471v-1.47h-1.47A1.474 1.474 0 001 9.846c.001.811.659 1.469 1.47 1.47zm3.682-2.942a1.474 1.474 0 00-1.47 1.471v3.683c.002.811.66 1.468 1.47 1.47a1.474 1.474 0 001.47-1.47V9.846a1.474 1.474 0 00-1.47-1.47z"/><path fill="%2336C5F0" d="M4.683 2.471c.001.811.659 1.469 1.47 1.47h1.47v-1.47A1.474 1.474 0 006.154 1a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47H2.47A1.474 1.474 0 001 6.153c.002.812.66 1.469 1.47 1.47h3.684a1.474 1.474 0 001.47-1.47z"/><path fill="%232EB67D" d="M9.847 7.624a1.474 1.474 0 001.47-1.47V2.47A1.474 1.474 0 009.848 1a1.474 1.474 0 00-1.47 1.47v3.684c.002.81.659 1.468 1.47 1.47zm3.682-2.941a1.474 1.474 0 00-1.47 1.47v1.47h1.47A1.474 1.474 0 0015 6.154a1.474 1.474 0 00-1.47-1.47z"/><path fill="%23ECB22E" d="M8.377 9.847c.002.811.659 1.469 1.47 1.47h3.683A1.474 1.474 0 0015 9.848a1.474 1.474 0 00-1.47-1.47H9.847a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47h-1.47v1.47c.002.812.659 1.469 1.47 1.47a1.474 1.474 0 001.47-1.47z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/property-24.scss
new file mode 100644
index 0000000000..6a54c61a2f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slack-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-slack-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill-rule="evenodd" clip-rule="evenodd"><path fill="%23E01E5A" d="M4.101 16.74a2.106 2.106 0 002.101-2.101v-2.101H4.101a2.106 2.106 0 00-2.1 2.1 2.106 2.106 0 002.1 2.102zm5.26-4.202a2.106 2.106 0 00-2.1 2.1V19.9A2.106 2.106 0 009.362 22a2.106 2.106 0 002.1-2.1v-5.262a2.106 2.106 0 00-2.1-2.1z"/><path fill="%2336C5F0" d="M7.26 4.101a2.106 2.106 0 002.102 2.101h2.1V4.101a2.106 2.106 0 00-2.1-2.1A2.106 2.106 0 007.26 4.1zm4.203 5.26a2.106 2.106 0 00-2.101-2.1H4.1A2.106 2.106 0 002 9.362a2.106 2.106 0 002.1 2.1h5.262a2.106 2.106 0 002.1-2.1z"/><path fill="%232EB67D" d="M14.639 11.463a2.106 2.106 0 002.1-2.101V4.1a2.106 2.106 0 00-2.1-2.1 2.106 2.106 0 00-2.1 2.1v5.262a2.106 2.106 0 002.1 2.1zm5.26-4.202a2.106 2.106 0 00-2.1 2.1v2.101h2.1A2.106 2.106 0 0022 9.363a2.106 2.106 0 00-2.1-2.101z"/><path fill="%23ECB22E" d="M12.538 14.639a2.106 2.106 0 002.1 2.1H19.9a2.106 2.106 0 002.1-2.1 2.106 2.106 0 00-2.1-2.101h-5.262a2.106 2.106 0 00-2.1 2.1zm4.202 5.26a2.106 2.106 0 00-2.101-2.1h-2.1v2.1a2.106 2.106 0 002.1 2.101 2.106 2.106 0 002.1-2.1z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slack/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slack/index.scss
new file mode 100644
index 0000000000..5ed6b58631
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slack/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../slack-color/property-16';
+        @import '../slack-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slack/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slack/keyframes.scss
new file mode 100644
index 0000000000..134283be4f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slack/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-slack {
+  50% {
+
+    background-color: var(--icon-color, var(--color-slack-500, currentColor));
+    -webkit-mask-image: var(--icon-slack-color-24);
+    mask-image: var(--icon-slack-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-slack-500, currentColor));
+    -webkit-mask-image: var(--icon-slack-color-16);
+    mask-image: var(--icon-slack-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slack/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slack/placeholders.scss
new file mode 100644
index 0000000000..4f9fff6816
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slack/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-slack-icon {
+  --icon-name: icon-slack;
+  content: '';
+}
+%with-slack-mask {
+  --icon-name: icon-slack;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slack/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slack/property-16.scss
new file mode 100644
index 0000000000..e0738110ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slack/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-slack-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.471 11.318a1.474 1.474 0 001.47-1.471v-1.47h-1.47A1.474 1.474 0 001 9.846c.001.811.659 1.469 1.47 1.47zm3.682-2.942a1.474 1.474 0 00-1.47 1.471v3.683c.002.811.659 1.468 1.47 1.47a1.474 1.474 0 001.47-1.47V9.846a1.474 1.474 0 00-1.47-1.47zM4.683 2.471c.001.811.659 1.469 1.47 1.47h1.47v-1.47A1.474 1.474 0 006.154 1a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47H2.47A1.474 1.474 0 001 6.153c.002.812.66 1.469 1.47 1.47h3.684a1.474 1.474 0 001.47-1.47zM9.847 7.624a1.474 1.474 0 001.47-1.47V2.47A1.474 1.474 0 009.848 1a1.474 1.474 0 00-1.47 1.47v3.684c.002.81.659 1.468 1.47 1.47zm3.682-2.941a1.474 1.474 0 00-1.47 1.47v1.47h1.47A1.474 1.474 0 0015 6.154a1.474 1.474 0 00-1.47-1.47zM8.377 9.847c.002.811.659 1.469 1.47 1.47h3.683A1.474 1.474 0 0015 9.848a1.474 1.474 0 00-1.47-1.47H9.847a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47h-1.47v1.47c.002.812.659 1.469 1.47 1.47a1.474 1.474 0 001.47-1.47z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slack/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slack/property-24.scss
new file mode 100644
index 0000000000..54617c70b2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slack/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-slack-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.471 11.318a1.474 1.474 0 001.47-1.471v-1.47h-1.47A1.474 1.474 0 001 9.846c.001.811.659 1.469 1.47 1.47zm3.682-2.942a1.474 1.474 0 00-1.47 1.471v3.683c.002.811.659 1.468 1.47 1.47a1.474 1.474 0 001.47-1.47V9.846a1.474 1.474 0 00-1.47-1.47zM4.683 2.471c.001.811.659 1.469 1.47 1.47h1.47v-1.47A1.474 1.474 0 006.154 1a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47H2.47A1.474 1.474 0 001 6.153c.002.812.66 1.469 1.47 1.47h3.684a1.474 1.474 0 001.47-1.47zM9.847 7.624a1.474 1.474 0 001.47-1.47V2.47A1.474 1.474 0 009.848 1a1.474 1.474 0 00-1.47 1.47v3.684c.002.81.659 1.468 1.47 1.47zm3.682-2.941a1.474 1.474 0 00-1.47 1.47v1.47h1.47A1.474 1.474 0 0015 6.154a1.474 1.474 0 00-1.47-1.47zM8.377 9.847c.002.811.659 1.469 1.47 1.47h3.683A1.474 1.474 0 0015 9.848a1.474 1.474 0 00-1.47-1.47H9.847a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47h-1.47v1.47c.002.812.659 1.469 1.47 1.47a1.474 1.474 0 001.47-1.47z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/keyframes.scss
new file mode 100644
index 0000000000..536acb5f5b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-slash-square {
+  50% {
+
+    background-color: var(--icon-color, var(--color-slash-square-500, currentColor));
+    -webkit-mask-image: var(--icon-slash-square-24);
+    mask-image: var(--icon-slash-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-slash-square-500, currentColor));
+    -webkit-mask-image: var(--icon-slash-square-16);
+    mask-image: var(--icon-slash-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/placeholders.scss
new file mode 100644
index 0000000000..96b7280f30
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-slash-square-icon {
+  --icon-name: icon-slash-square;
+  content: '';
+}
+%with-slash-square-mask {
+  --icon-name: icon-slash-square;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/property-16.scss
new file mode 100644
index 0000000000..9cd31311c2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-slash-square-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.633 4.323a.75.75 0 011.234.854l-4.5 6.5a.75.75 0 01-1.234-.854l4.5-6.5z"/><path fill-rule="evenodd" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5zM2.5 3.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/property-24.scss
new file mode 100644
index 0000000000..4ff75b7e1a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slash-square/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-slash-square-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M14.1 6.874a.75.75 0 011.3.752l-5.5 9.5a.75.75 0 11-1.3-.752l5.5-9.5z"/><path fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25h14.5c.69 0 1.25.56 1.25 1.25v14.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V4.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slash/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slash/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slash/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slash/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slash/keyframes.scss
new file mode 100644
index 0000000000..74e96be1c9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slash/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-slash {
+  50% {
+
+    background-color: var(--icon-color, var(--color-slash-500, currentColor));
+    -webkit-mask-image: var(--icon-slash-24);
+    mask-image: var(--icon-slash-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-slash-500, currentColor));
+    -webkit-mask-image: var(--icon-slash-16);
+    mask-image: var(--icon-slash-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slash/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slash/placeholders.scss
new file mode 100644
index 0000000000..926496b4b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slash/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-slash-icon {
+  --icon-name: icon-slash;
+  content: '';
+}
+%with-slash-mask {
+  --icon-name: icon-slash;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slash/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slash/property-16.scss
new file mode 100644
index 0000000000..47dd999298
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slash/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-slash-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M11.126 2.601a.75.75 0 00-1.025.273l-5.5 9.5a.75.75 0 001.298.752l5.5-9.5a.75.75 0 00-.273-1.025z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/slash/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/slash/property-24.scss
new file mode 100644
index 0000000000..0f225c87fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/slash/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-slash-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M16.63 4.103a.75.75 0 00-1.027.268l-8.5 14.5a.75.75 0 101.294.758l8.5-14.5a.75.75 0 00-.268-1.026z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/keyframes.scss
new file mode 100644
index 0000000000..425b9fb74c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sliders {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sliders-500, currentColor));
+    -webkit-mask-image: var(--icon-sliders-24);
+    mask-image: var(--icon-sliders-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sliders-500, currentColor));
+    -webkit-mask-image: var(--icon-sliders-16);
+    mask-image: var(--icon-sliders-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/placeholders.scss
new file mode 100644
index 0000000000..837fd5adc8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sliders-icon {
+  --icon-name: icon-sliders;
+  content: '';
+}
+%with-sliders-mask {
+  --icon-name: icon-sliders;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/property-16.scss
new file mode 100644
index 0000000000..9d065653ac
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sliders-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.75 1a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 012.75 1zM2 10.5v3.75a.75.75 0 001.5 0V10.5h1a.75.75 0 000-1.5H1a.75.75 0 000 1.5h1zM8.5 7.75a.75.75 0 00-1.5 0v6.5a.75.75 0 001.5 0v-6.5zM7.75 1a.75.75 0 01.75.75V4.5h1a.75.75 0 010 1.5H6a.75.75 0 010-1.5h1V1.75A.75.75 0 017.75 1zM14.5 10a.75.75 0 010 1.5h-1v2.75a.75.75 0 01-1.5 0V11.5h-1a.75.75 0 010-1.5h3.5zM12.75 1a.75.75 0 01.75.75v6.5a.75.75 0 01-1.5 0v-6.5a.75.75 0 01.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/property-24.scss
new file mode 100644
index 0000000000..010cc02fad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sliders/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sliders-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.75 2.5a.75.75 0 01.75.75v7a.75.75 0 01-1.5 0v-7a.75.75 0 01.75-.75zM3 14.5v6.25a.75.75 0 001.5 0V14.5h2a.75.75 0 000-1.5H1a.75.75 0 000 1.5h2zM12.5 11.75a.75.75 0 00-1.5 0v9a.75.75 0 001.5 0v-9zM11.75 2.5a.75.75 0 01.75.75V7.5h2a.75.75 0 010 1.5H9a.75.75 0 010-1.5h2V3.25a.75.75 0 01.75-.75zM22.5 15a.75.75 0 010 1.5h-2v4.25a.75.75 0 01-1.5 0V16.5h-2a.75.75 0 010-1.5h5.5zM19.75 2.5a.75.75 0 01.75.75v9a.75.75 0 01-1.5 0v-9a.75.75 0 01.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/keyframes.scss
new file mode 100644
index 0000000000..7ce504a449
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-smartphone {
+  50% {
+
+    background-color: var(--icon-color, var(--color-smartphone-500, currentColor));
+    -webkit-mask-image: var(--icon-smartphone-24);
+    mask-image: var(--icon-smartphone-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-smartphone-500, currentColor));
+    -webkit-mask-image: var(--icon-smartphone-16);
+    mask-image: var(--icon-smartphone-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/placeholders.scss
new file mode 100644
index 0000000000..3b9b4cbc10
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-smartphone-icon {
+  --icon-name: icon-smartphone;
+  content: '';
+}
+%with-smartphone-mask {
+  --icon-name: icon-smartphone;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/property-16.scss
new file mode 100644
index 0000000000..482311efe4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-smartphone-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 12a1 1 0 100 2h.007a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M4.25 0A2.25 2.25 0 002 2.25v11.5A2.25 2.25 0 004.25 16h7.5A2.25 2.25 0 0014 13.75V2.25A2.25 2.25 0 0011.75 0h-7.5zM3.5 2.25a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v11.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V2.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/property-24.scss
new file mode 100644
index 0000000000..8ba43e5e15
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/smartphone/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-smartphone-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 19a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M6.75 1A2.75 2.75 0 004 3.75v16.5A2.75 2.75 0 006.75 23h10.5A2.75 2.75 0 0020 20.25V3.75A2.75 2.75 0 0017.25 1H6.75zM5.5 3.75c0-.69.56-1.25 1.25-1.25h10.5c.69 0 1.25.56 1.25 1.25v16.5c0 .69-.56 1.25-1.25 1.25H6.75c-.69 0-1.25-.56-1.25-1.25V3.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/smile/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/smile/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/smile/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/smile/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/smile/keyframes.scss
new file mode 100644
index 0000000000..9498596033
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/smile/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-smile {
+  50% {
+
+    background-color: var(--icon-color, var(--color-smile-500, currentColor));
+    -webkit-mask-image: var(--icon-smile-24);
+    mask-image: var(--icon-smile-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-smile-500, currentColor));
+    -webkit-mask-image: var(--icon-smile-16);
+    mask-image: var(--icon-smile-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/smile/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/smile/placeholders.scss
new file mode 100644
index 0000000000..60fda30054
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/smile/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-smile-icon {
+  --icon-name: icon-smile;
+  content: '';
+}
+%with-smile-mask {
+  --icon-name: icon-smile;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/smile/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/smile/property-16.scss
new file mode 100644
index 0000000000..d0ca74a770
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/smile/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-smile-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 12c-1.01 0-1.782-.504-2.267-.945a4.72 4.72 0 01-.564-.614 3.31 3.31 0 01-.212-.305.75.75 0 011.284-.775 3.214 3.214 0 00.5.584c.341.31.769.555 1.259.555.49 0 .918-.246 1.258-.555a3.214 3.214 0 00.5-.584.75.75 0 011.285.775l-.212.305c-.128.167-.317.39-.564.614C9.782 11.495 9.01 12 8 12zM5 6a1 1 0 011-1h.007a1 1 0 010 2H6a1 1 0 01-1-1zM10 5a1 1 0 100 2h.007a1 1 0 100-2H10z"/><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/smile/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/smile/property-24.scss
new file mode 100644
index 0000000000..6cb075b4c6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/smile/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-smile-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.362 14.693c.216.265.534.618.948.972.82.7 2.077 1.46 3.69 1.46s2.87-.76 3.69-1.46a7.647 7.647 0 001.199-1.3l.099-.145a.875.875 0 00-1.475-.942c-.071.107-.15.21-.232.31a5.898 5.898 0 01-.729.747c-.641.549-1.509 1.04-2.552 1.04-1.043 0-1.91-.491-2.552-1.04a5.894 5.894 0 01-.73-.747 4.012 4.012 0 01-.232-.31.875.875 0 00-1.474.942c.106.165.227.322.35.473zM8 9a1 1 0 011-1h.01a1 1 0 110 2H9a1 1 0 01-1-1zM15 8a1 1 0 100 2h.01a1 1 0 100-2H15z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/socket/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/socket/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/socket/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/socket/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/socket/keyframes.scss
new file mode 100644
index 0000000000..faff11c155
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/socket/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-socket {
+  50% {
+
+    background-color: var(--icon-color, var(--color-socket-500, currentColor));
+    -webkit-mask-image: var(--icon-socket-24);
+    mask-image: var(--icon-socket-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-socket-500, currentColor));
+    -webkit-mask-image: var(--icon-socket-16);
+    mask-image: var(--icon-socket-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/socket/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/socket/placeholders.scss
new file mode 100644
index 0000000000..03c4fd9bf3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/socket/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-socket-icon {
+  --icon-name: icon-socket;
+  content: '';
+}
+%with-socket-mask {
+  --icon-name: icon-socket;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/socket/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/socket/property-16.scss
new file mode 100644
index 0000000000..ed18e359a8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/socket/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-socket-16: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM7 11C7 10.4477 7.44772 10 8 10H10C10.5523 10 11 10.4477 11 11V13C11 13.5523 10.5523 14 10 14H8C7.44772 14 7 13.5523 7 13V11ZM14 10C13.4477 10 13 10.4477 13 11V13C13 13.5523 13.4477 14 14 14H16C16.5523 14 17 13.5523 17 13V11C17 10.4477 16.5523 10 16 10H14Z" fill="%23000"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/socket/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/socket/property-24.scss
new file mode 100644
index 0000000000..e0e7ab2689
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/socket/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-socket-24: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM7 11C7 10.4477 7.44772 10 8 10H10C10.5523 10 11 10.4477 11 11V13C11 13.5523 10.5523 14 10 14H8C7.44772 14 7 13.5523 7 13V11ZM14 10C13.4477 10 13 10.4477 13 11V13C13 13.5523 13.4477 14 14 14H16C16.5523 14 17 13.5523 17 13V11C17 10.4477 16.5523 10 16 10H14Z" fill="%23000"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/keyframes.scss
new file mode 100644
index 0000000000..3b23b70290
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sort-asc {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sort-asc-500, currentColor));
+    -webkit-mask-image: var(--icon-sort-asc-24);
+    mask-image: var(--icon-sort-asc-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sort-asc-500, currentColor));
+    -webkit-mask-image: var(--icon-sort-asc-16);
+    mask-image: var(--icon-sort-asc-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/placeholders.scss
new file mode 100644
index 0000000000..33dbe8f074
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sort-asc-icon {
+  --icon-name: icon-sort-asc;
+  content: '';
+}
+%with-sort-asc-mask {
+  --icon-name: icon-sort-asc;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/property-16.scss
new file mode 100644
index 0000000000..1b6084decd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sort-asc-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M15.78 5.72a.75.75 0 01-1.06 1.06L13 5.06v4.69a.75.75 0 01-1.5 0V5.06L9.78 6.78a.75.75 0 01-1.06-1.06l3-3a.748.748 0 01.528-.22h.004a.748.748 0 01.528.22l3 3zM3 10.5A.75.75 0 013 9h6a.75.75 0 010 1.5H3zM2.25 12.75c0 .414.336.75.75.75h10a.75.75 0 000-1.5H3a.75.75 0 00-.75.75zM3 7.5A.75.75 0 013 6h3a.75.75 0 010 1.5H3zM2.25 3.75c0 .414.336.75.75.75h3A.75.75 0 006 3H3a.75.75 0 00-.75.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/property-24.scss
new file mode 100644
index 0000000000..f9930481d3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-asc/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sort-asc-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.963 3.057a.748.748 0 01.817.163l4 4a.75.75 0 01-1.06 1.06L18 5.56v8.19a.75.75 0 01-1.5 0V5.56l-2.72 2.72a.75.75 0 11-1.06-1.06l4-4a.748.748 0 01.243-.163zM3.75 14.5a.75.75 0 010-1.5h9.5a.75.75 0 010 1.5h-9.5zM3 17.75c0 .414.336.75.75.75h16.5a.75.75 0 000-1.5H3.75a.75.75 0 00-.75.75zM3.75 10.5a.75.75 0 010-1.5h5.5a.75.75 0 010 1.5h-5.5zM3 5.75c0 .414.336.75.75.75h3.5a.75.75 0 000-1.5h-3.5a.75.75 0 00-.75.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/keyframes.scss
new file mode 100644
index 0000000000..e31b1ac648
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sort-desc {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sort-desc-500, currentColor));
+    -webkit-mask-image: var(--icon-sort-desc-24);
+    mask-image: var(--icon-sort-desc-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sort-desc-500, currentColor));
+    -webkit-mask-image: var(--icon-sort-desc-16);
+    mask-image: var(--icon-sort-desc-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/placeholders.scss
new file mode 100644
index 0000000000..279a84bd99
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sort-desc-icon {
+  --icon-name: icon-sort-desc;
+  content: '';
+}
+%with-sort-desc-mask {
+  --icon-name: icon-sort-desc;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/property-16.scss
new file mode 100644
index 0000000000..b4b5222585
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sort-desc-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.25 3.75A.75.75 0 013 3h10a.75.75 0 010 1.5H3a.75.75 0 01-.75-.75zM3 6a.75.75 0 000 1.5h6A.75.75 0 009 6H3zM11.963 13.943a.747.747 0 00.817-.163l3-3a.75.75 0 10-1.06-1.06L13 11.44V6.75a.75.75 0 00-1.5 0v4.69L9.78 9.72a.75.75 0 00-1.06 1.06l3 3a.748.748 0 00.243.163zM3 9a.75.75 0 000 1.5h3A.75.75 0 006 9H3zM2.25 12.75A.75.75 0 013 12h3a.75.75 0 010 1.5H3a.75.75 0 01-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/property-24.scss
new file mode 100644
index 0000000000..fe92454ad9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort-desc/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sort-desc-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3 5.75A.75.75 0 013.75 5h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 5.75zM3.75 9a.75.75 0 000 1.5h9.5a.75.75 0 000-1.5h-9.5zM16.963 20.443a.747.747 0 00.817-.163l4-4a.75.75 0 10-1.06-1.06L18 17.94V9.75a.75.75 0 00-1.5 0v8.19l-2.72-2.72a.75.75 0 10-1.06 1.06l4 4a.748.748 0 00.243.163zM3.75 13a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5zM3 17.75a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort/index.scss
new file mode 100644
index 0000000000..8575cbadb0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../sort-desc/property-16';
+        @import '../sort-desc/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort/keyframes.scss
new file mode 100644
index 0000000000..7a7ac5b666
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sort {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sort-500, currentColor));
+    -webkit-mask-image: var(--icon-sort-desc-24);
+    mask-image: var(--icon-sort-desc-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sort-500, currentColor));
+    -webkit-mask-image: var(--icon-sort-desc-16);
+    mask-image: var(--icon-sort-desc-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sort/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sort/placeholders.scss
new file mode 100644
index 0000000000..5971c5ea77
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sort/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sort-icon {
+  --icon-name: icon-sort;
+  content: '';
+}
+%with-sort-mask {
+  --icon-name: icon-sort;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/source-file/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/source-file/index.scss
new file mode 100644
index 0000000000..6fd6c7b971
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/source-file/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../file-source/property-16';
+        @import '../file-source/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/source-file/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/source-file/keyframes.scss
new file mode 100644
index 0000000000..22c1b2ff19
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/source-file/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-source-file {
+  50% {
+
+    background-color: var(--icon-color, var(--color-source-file-500, currentColor));
+    -webkit-mask-image: var(--icon-file-source-24);
+    mask-image: var(--icon-file-source-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-source-file-500, currentColor));
+    -webkit-mask-image: var(--icon-file-source-16);
+    mask-image: var(--icon-file-source-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/source-file/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/source-file/placeholders.scss
new file mode 100644
index 0000000000..e3c8eb493c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/source-file/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-source-file-icon {
+  --icon-name: icon-source-file;
+  content: '';
+}
+%with-source-file-mask {
+  --icon-name: icon-source-file;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/keyframes.scss
new file mode 100644
index 0000000000..58d3d39e23
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-speaker {
+  50% {
+
+    background-color: var(--icon-color, var(--color-speaker-500, currentColor));
+    -webkit-mask-image: var(--icon-speaker-24);
+    mask-image: var(--icon-speaker-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-speaker-500, currentColor));
+    -webkit-mask-image: var(--icon-speaker-16);
+    mask-image: var(--icon-speaker-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/placeholders.scss
new file mode 100644
index 0000000000..32209b4c2c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-speaker-icon {
+  --icon-name: icon-speaker;
+  content: '';
+}
+%with-speaker-mask {
+  --icon-name: icon-speaker;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/property-16.scss
new file mode 100644
index 0000000000..27a2f0e637
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-speaker-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 5.55a3.95 3.95 0 100 7.9 3.95 3.95 0 000-7.9zM5.45 9.5a2.55 2.55 0 115.1 0 2.55 2.55 0 01-5.1 0z"/><path d="M3.25 0A2.25 2.25 0 001 2.25v11.5A2.25 2.25 0 003.25 16h9.5A2.25 2.25 0 0015 13.75V2.25A2.25 2.25 0 0012.75 0h-9.5zM2.5 2.25a.75.75 0 01.75-.75h9.5a.75.75 0 01.75.75v11.5a.75.75 0 01-.75.75h-9.5a.75.75 0 01-.75-.75V2.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/property-24.scss
new file mode 100644
index 0000000000..f155bb1ec2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/speaker/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-speaker-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 9a5 5 0 100 10 5 5 0 000-10zm-3.5 5a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z"/><path d="M5.75 1A2.75 2.75 0 003 3.75v16.5A2.75 2.75 0 005.75 23h12.5A2.75 2.75 0 0021 20.25V3.75A2.75 2.75 0 0018.25 1H5.75zM4.5 3.75c0-.69.56-1.25 1.25-1.25h12.5c.69 0 1.25.56 1.25 1.25v16.5c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V3.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/keyframes.scss
new file mode 100644
index 0000000000..cf050bdd49
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-square-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-square-fill-24);
+    mask-image: var(--icon-square-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-square-fill-16);
+    mask-image: var(--icon-square-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/placeholders.scss
new file mode 100644
index 0000000000..964fb2a5fc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-square-fill-icon {
+  --icon-name: icon-square-fill;
+  content: '';
+}
+%with-square-fill-mask {
+  --icon-name: icon-square-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/property-16.scss
new file mode 100644
index 0000000000..f8361e71b6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-square-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M3.25 1A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1h-9.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/property-24.scss
new file mode 100644
index 0000000000..07024da65b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/square-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-square-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M4.75 2A2.75 2.75 0 002 4.75v14.5A2.75 2.75 0 004.75 22h14.5A2.75 2.75 0 0022 19.25V4.75A2.75 2.75 0 0019.25 2H4.75z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/square/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/square/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/square/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/square/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/square/keyframes.scss
new file mode 100644
index 0000000000..d0959fbe6f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/square/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-square {
+  50% {
+
+    background-color: var(--icon-color, var(--color-square-500, currentColor));
+    -webkit-mask-image: var(--icon-square-24);
+    mask-image: var(--icon-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-square-500, currentColor));
+    -webkit-mask-image: var(--icon-square-16);
+    mask-image: var(--icon-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/square/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/square/placeholders.scss
new file mode 100644
index 0000000000..2b9708740d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/square/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-square-icon {
+  --icon-name: icon-square;
+  content: '';
+}
+%with-square-mask {
+  --icon-name: icon-square;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/square/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/square/property-16.scss
new file mode 100644
index 0000000000..4b72e3ffac
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/square/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-square-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 3.25A2.25 2.25 0 013.25 1h9.5A2.25 2.25 0 0115 3.25v9.5A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75h-9.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/square/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/square/property-24.scss
new file mode 100644
index 0000000000..4b66371923
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/square/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-square-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2 4.75A2.75 2.75 0 014.75 2h14.5A2.75 2.75 0 0122 4.75v14.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25V4.75zM4.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/keyframes.scss
new file mode 100644
index 0000000000..61ee691009
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-star-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-star-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-star-circle-24);
+    mask-image: var(--icon-star-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-star-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-star-circle-16);
+    mask-image: var(--icon-star-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/placeholders.scss
new file mode 100644
index 0000000000..1d6b2dce9a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-star-circle-icon {
+  --icon-name: icon-star-circle;
+  content: '';
+}
+%with-star-circle-mask {
+  --icon-name: icon-star-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/property-16.scss
new file mode 100644
index 0000000000..2b652f340b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-star-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.679 2.431a.75.75 0 00-1.358 0L6.023 5.196l-2.887.444a.75.75 0 00-.423 1.265l2.11 2.162-.499 3.062a.75.75 0 001.103.777L8 11.484l2.573 1.422a.75.75 0 001.103-.777l-.5-3.062 2.11-2.162a.75.75 0 00-.422-1.265l-2.887-.444-1.298-2.765zM7.21 6.195L8 4.515l.789 1.68a.75.75 0 00.565.423l1.84.283L9.838 8.29a.75.75 0 00-.203.644l.312 1.912-1.584-.876a.75.75 0 00-.726 0l-1.584.876.312-1.912a.75.75 0 00-.203-.644L4.806 6.9l1.84-.282a.75.75 0 00.565-.423z"/><path d="M8 .05a7.95 7.95 0 100 15.9A7.95 7.95 0 008 .05zM1.45 8a6.55 6.55 0 1113.1 0 6.55 6.55 0 01-13.1 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/property-24.scss
new file mode 100644
index 0000000000..9931303390
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-star-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12.669 4.91a.75.75 0 00-1.338 0l-1.91 3.767-4.277.608a.75.75 0 00-.41 1.287l3.082 2.923-.726 4.125a.75.75 0 001.08.798L12 16.457l3.83 1.96a.75.75 0 001.08-.797l-.726-4.125 3.082-2.923a.75.75 0 00-.41-1.287l-4.278-.608L12.67 4.91zm-2.086 4.793L12 6.91l1.417 2.794a.75.75 0 00.563.404l3.128.445-2.25 2.132a.75.75 0 00-.222.675l.535 3.036-2.83-1.448a.75.75 0 00-.683 0l-2.83 1.448.536-3.036a.75.75 0 00-.223-.675l-2.249-2.132 3.128-.445a.75.75 0 00.563-.404z"/><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/keyframes.scss
new file mode 100644
index 0000000000..2e0b258bb1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-star-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-star-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-star-fill-24);
+    mask-image: var(--icon-star-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-star-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-star-fill-16);
+    mask-image: var(--icon-star-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/placeholders.scss
new file mode 100644
index 0000000000..d11fb8cb9d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-star-fill-icon {
+  --icon-name: icon-star-fill;
+  content: '';
+}
+%with-star-fill-mask {
+  --icon-name: icon-star-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/property-16.scss
new file mode 100644
index 0000000000..278071c61f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-star-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8.67.912a.75.75 0 00-1.34 0L5.266 5.006l-4.622.662a.75.75 0 00-.412 1.285l3.335 3.18-.786 4.488a.75.75 0 001.082.796L8 13.287l4.137 2.13a.75.75 0 001.082-.796l-.786-4.488 3.335-3.18a.75.75 0 00-.412-1.285l-4.622-.662L8.67.912z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/property-24.scss
new file mode 100644
index 0000000000..d993bee610
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-star-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12.673 1.418a.75.75 0 00-1.345 0L8.335 7.483l-6.693.978a.75.75 0 00-.415 1.28l4.842 4.717-1.143 6.665a.75.75 0 001.089.79L12 18.766l5.985 3.149a.75.75 0 001.089-.79l-1.143-6.666 4.842-4.717a.75.75 0 00-.415-1.28l-6.693-.978-2.992-6.065z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/keyframes.scss
new file mode 100644
index 0000000000..a33365bd56
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-star-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-star-off-500, currentColor));
+    -webkit-mask-image: var(--icon-star-off-24);
+    mask-image: var(--icon-star-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-star-off-500, currentColor));
+    -webkit-mask-image: var(--icon-star-off-16);
+    mask-image: var(--icon-star-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/placeholders.scss
new file mode 100644
index 0000000000..c026574632
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-star-off-icon {
+  --icon-name: icon-star-off;
+  content: '';
+}
+%with-star-off-mask {
+  --icon-name: icon-star-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/property-16.scss
new file mode 100644
index 0000000000..87afff5ddd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-star-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8.67.912a.75.75 0 00-1.34 0l-.882 1.75a.75.75 0 001.34.676L8 2.916 9.57 6.03c.11.219.321.37.564.405l3.48.498-1.299 1.238a.75.75 0 101.035 1.086l2.418-2.305a.75.75 0 00-.412-1.285l-4.622-.662L8.67.912z"/><path fill-rule="evenodd" d="M13.147 14.207l.072.413a.75.75 0 01-1.082.797L8 13.287l-4.137 2.13a.75.75 0 01-1.082-.796l.786-4.489-3.335-3.18a.75.75 0 01.412-1.284l3.467-.496L1.22 2.28a.75.75 0 111.06-1.06l12.5 12.5a.75.75 0 01-1.06 1.06l-.573-.572zm-7.71-7.71l-3.051.437 2.507 2.39a.75.75 0 01.22.672l-.594 3.396 3.138-1.616a.75.75 0 01.686 0l3.138 1.616-.18-1.03-5.865-5.865z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/property-24.scss
new file mode 100644
index 0000000000..abecbd8066
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-star-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.673 1.418a.75.75 0 00-1.345 0l-1.584 3.21a.75.75 0 101.345.663L12 3.445 14.495 8.5a.75.75 0 00.564.41l5.58.816-2.756 2.685a.75.75 0 001.046 1.075l3.844-3.745a.75.75 0 00-.415-1.28l-6.693-.978-2.992-6.065z"/><path fill-rule="evenodd" d="M18.87 19.93l.204 1.193a.75.75 0 01-1.089.79L12 18.766l-5.985 3.149a.75.75 0 01-1.089-.79l1.143-6.666-4.842-4.717a.75.75 0 01.415-1.28l5.024-.734L1.22 2.28a.75.75 0 011.06-1.06l20.5 20.5a.75.75 0 11-1.06 1.06l-2.85-2.85zM7.988 9.05l-4.628.676 4.037 3.933a.75.75 0 01.216.664l-.952 5.556 4.989-2.625a.75.75 0 01.698 0l4.99 2.625-.307-1.786L7.99 9.049z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/index.scss
new file mode 100644
index 0000000000..5c0cd92caf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../star/property-16';
+        @import '../star/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/keyframes.scss
new file mode 100644
index 0000000000..3c1bee40b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-star-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-star-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-star-24);
+    mask-image: var(--icon-star-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-star-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-star-16);
+    mask-image: var(--icon-star-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/placeholders.scss
new file mode 100644
index 0000000000..58855e4c48
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-star-outline-icon {
+  --icon-name: icon-star-outline;
+  content: '';
+}
+%with-star-outline-mask {
+  --icon-name: icon-star-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star/keyframes.scss
new file mode 100644
index 0000000000..2fc7107615
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-star {
+  50% {
+
+    background-color: var(--icon-color, var(--color-star-500, currentColor));
+    -webkit-mask-image: var(--icon-star-24);
+    mask-image: var(--icon-star-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-star-500, currentColor));
+    -webkit-mask-image: var(--icon-star-16);
+    mask-image: var(--icon-star-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star/placeholders.scss
new file mode 100644
index 0000000000..59947a06e0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-star-icon {
+  --icon-name: icon-star;
+  content: '';
+}
+%with-star-mask {
+  --icon-name: icon-star;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star/property-16.scss
new file mode 100644
index 0000000000..799294d7d3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-star-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 .5a.75.75 0 01.67.412l2.064 4.094 4.622.662a.75.75 0 01.412 1.285l-3.335 3.18.786 4.488a.75.75 0 01-1.082.796L8 13.287l-4.137 2.13a.75.75 0 01-1.082-.796l.786-4.489-3.335-3.18a.75.75 0 01.412-1.284l4.622-.662L7.33.912A.75.75 0 018 .5zm0 2.416L6.43 6.03a.75.75 0 01-.564.405l-3.48.498 2.507 2.39a.75.75 0 01.22.672l-.594 3.396 3.138-1.616a.75.75 0 01.686 0l3.138 1.616-.595-3.396a.75.75 0 01.221-.672l2.507-2.39-3.48-.498a.75.75 0 01-.563-.405L8 2.916z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/star/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/star/property-24.scss
new file mode 100644
index 0000000000..720693f88a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/star/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-star-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1a.75.75 0 01.673.418l2.992 6.065 6.694.978a.75.75 0 01.414 1.28l-4.842 4.717 1.143 6.665a.75.75 0 01-1.089.79L12 18.766l-5.985 3.149a.75.75 0 01-1.089-.79l1.143-6.666-4.842-4.717a.75.75 0 01.415-1.28l6.693-.978 2.992-6.065A.75.75 0 0112 1zm0 2.445L9.505 8.5a.75.75 0 01-.564.41l-5.58.816 4.037 3.933a.75.75 0 01.216.664l-.952 5.556 4.989-2.625a.75.75 0 01.698 0l4.99 2.625-.953-5.556a.75.75 0 01.216-.664l4.037-3.933-5.58-.816a.75.75 0 01-.564-.41L12 3.445z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/keyframes.scss
new file mode 100644
index 0000000000..636c02278f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-stop-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-stop-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-stop-circle-24);
+    mask-image: var(--icon-stop-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-stop-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-stop-circle-16);
+    mask-image: var(--icon-stop-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/placeholders.scss
new file mode 100644
index 0000000000..233ad64648
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-stop-circle-icon {
+  --icon-name: icon-stop-circle;
+  content: '';
+}
+%with-stop-circle-mask {
+  --icon-name: icon-stop-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/property-16.scss
new file mode 100644
index 0000000000..94de517522
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-stop-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M6.25 5C5.56 5 5 5.56 5 6.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C11 5.56 10.44 5 9.75 5h-3.5zm.25 4.5v-3h3v3h-3z"/><path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/property-24.scss
new file mode 100644
index 0000000000..d44262381f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/stop-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-stop-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.75 7A1.75 1.75 0 007 8.75v6.5c0 .966.784 1.75 1.75 1.75h6.5A1.75 1.75 0 0017 15.25v-6.5A1.75 1.75 0 0015.25 7h-6.5zM8.5 8.75a.25.25 0 01.25-.25h6.5a.25.25 0 01.25.25v6.5a.25.25 0 01-.25.25h-6.5a.25.25 0 01-.25-.25v-6.5z"/><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/index.scss
new file mode 100644
index 0000000000..b9d4257683
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../corner-down-left/property-16';
+        @import '../corner-down-left/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/keyframes.scss
new file mode 100644
index 0000000000..53ef059fb9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sub-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sub-left-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-down-left-24);
+    mask-image: var(--icon-corner-down-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sub-left-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-down-left-16);
+    mask-image: var(--icon-corner-down-left-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/placeholders.scss
new file mode 100644
index 0000000000..91ac4cc0c5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-left/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sub-left-icon {
+  --icon-name: icon-sub-left;
+  content: '';
+}
+%with-sub-left-mask {
+  --icon-name: icon-sub-left;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/index.scss
new file mode 100644
index 0000000000..e397409328
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../corner-down-right/property-16';
+        @import '../corner-down-right/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/keyframes.scss
new file mode 100644
index 0000000000..671a399258
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sub-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sub-right-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-down-right-24);
+    mask-image: var(--icon-corner-down-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sub-right-500, currentColor));
+    -webkit-mask-image: var(--icon-corner-down-right-16);
+    mask-image: var(--icon-corner-down-right-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/placeholders.scss
new file mode 100644
index 0000000000..31c32cc4b2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sub-right/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sub-right-icon {
+  --icon-name: icon-sub-right;
+  content: '';
+}
+%with-sub-right-mask {
+  --icon-name: icon-sub-right;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sun/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sun/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sun/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sun/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sun/keyframes.scss
new file mode 100644
index 0000000000..aa0c155382
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sun/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sun {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sun-500, currentColor));
+    -webkit-mask-image: var(--icon-sun-24);
+    mask-image: var(--icon-sun-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sun-500, currentColor));
+    -webkit-mask-image: var(--icon-sun-16);
+    mask-image: var(--icon-sun-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sun/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sun/placeholders.scss
new file mode 100644
index 0000000000..ce9abbb141
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sun/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sun-icon {
+  --icon-name: icon-sun;
+  content: '';
+}
+%with-sun-mask {
+  --icon-name: icon-sun;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sun/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sun/property-16.scss
new file mode 100644
index 0000000000..9edc596c4e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sun/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sun-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 .25a.75.75 0 01.75.75v1.273a.75.75 0 01-1.5 0V1A.75.75 0 018 .25z"/><path fill-rule="evenodd" d="M4 8a4 4 0 118 0 4 4 0 01-8 0zm4-2.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z" clip-rule="evenodd"/><path d="M8.75 13.727a.75.75 0 00-1.5 0V15a.75.75 0 001.5 0v-1.273zM2.519 2.518a.75.75 0 011.06 0l.904.904a.75.75 0 01-1.06 1.06l-.904-.903a.75.75 0 010-1.06zM12.578 11.517a.75.75 0 00-1.061 1.06l.904.904a.75.75 0 101.06-1.06l-.903-.904zM.25 8A.75.75 0 011 7.25h1.273a.75.75 0 010 1.5H1A.75.75 0 01.25 8zM13.727 7.25a.75.75 0 000 1.5H15a.75.75 0 000-1.5h-1.273zM4.483 11.517a.75.75 0 010 1.06l-.904.904a.75.75 0 01-1.06-1.06l.903-.904a.75.75 0 011.061 0zM13.481 3.58a.75.75 0 00-1.06-1.062l-.904.904a.75.75 0 101.06 1.06l.904-.903z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sun/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sun/property-24.scss
new file mode 100644
index 0000000000..a95d50ef1f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sun/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sun-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 .25a.75.75 0 01.75.75v2a.75.75 0 01-1.5 0V1A.75.75 0 0112 .25z"/><path fill-rule="evenodd" d="M6 12a6 6 0 1112 0 6 6 0 01-12 0zm6-4.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z" clip-rule="evenodd"/><path d="M12.75 21a.75.75 0 00-1.5 0v2a.75.75 0 001.5 0v-2zM3.69 3.69a.75.75 0 011.06 0l1.42 1.42a.75.75 0 01-1.06 1.06L3.69 4.75a.75.75 0 010-1.06zM18.89 17.83a.75.75 0 10-1.06 1.06l1.42 1.42a.75.75 0 101.06-1.06l-1.42-1.42zM.25 12a.75.75 0 01.75-.75h2a.75.75 0 010 1.5H1A.75.75 0 01.25 12zM21 11.25a.75.75 0 000 1.5h2a.75.75 0 000-1.5h-2zM6.17 17.83a.75.75 0 010 1.06l-1.42 1.42a.75.75 0 11-1.06-1.06l1.42-1.42a.75.75 0 011.06 0zM20.31 4.75a.75.75 0 00-1.06-1.06l-1.42 1.42a.75.75 0 001.06 1.06l1.42-1.42z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/support/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/support/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/support/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/support/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/support/keyframes.scss
new file mode 100644
index 0000000000..e86b220dc1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/support/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-support {
+  50% {
+
+    background-color: var(--icon-color, var(--color-support-500, currentColor));
+    -webkit-mask-image: var(--icon-support-24);
+    mask-image: var(--icon-support-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-support-500, currentColor));
+    -webkit-mask-image: var(--icon-support-16);
+    mask-image: var(--icon-support-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/support/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/support/placeholders.scss
new file mode 100644
index 0000000000..bdd928c2d1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/support/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-support-icon {
+  --icon-name: icon-support;
+  content: '';
+}
+%with-support-mask {
+  --icon-name: icon-support;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/support/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/support/property-16.scss
new file mode 100644
index 0000000000..028c832e6a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/support/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-support-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8c0-1.525.525-2.927 1.404-4.035l1.787 1.787A3.982 3.982 0 004 8c0 .834.255 1.608.691 2.248l-1.787 1.787A6.472 6.472 0 011.5 8zm2.465 5.096l1.787-1.787C6.392 11.745 7.166 12 8 12c.834 0 1.608-.255 2.248-.691l1.787 1.787A6.472 6.472 0 018 14.5a6.473 6.473 0 01-4.035-1.404zm9.131-1.06A6.472 6.472 0 0014.5 8a6.473 6.473 0 00-1.404-4.035l-1.787 1.787C11.745 6.392 12 7.166 12 8c0 .834-.255 1.608-.691 2.248l1.787 1.787zm-1.06-9.132A6.472 6.472 0 008 1.5a6.472 6.472 0 00-4.035 1.404l1.787 1.787A3.982 3.982 0 018 4c.834 0 1.608.255 2.248.691l1.787-1.787zM5.5 8a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/support/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/support/property-24.scss
new file mode 100644
index 0000000000..1b0a1bf71d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/support/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-support-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M19.828 19.728A10.965 10.965 0 0023 12c0-3.012-1.21-5.742-3.172-7.728a.77.77 0 00-.1-.1A10.965 10.965 0 0012 1C8.988 1 6.258 2.21 4.272 4.172a.767.767 0 00-.1.1A10.965 10.965 0 001 12c0 3.012 1.21 5.742 3.172 7.728a.77.77 0 00.1.1A10.965 10.965 0 0012 23c3.012 0 5.742-1.21 7.728-3.172a.771.771 0 00.1-.1zM2.5 12c0-2.353.856-4.507 2.273-6.166l3.2 3.2A4.978 4.978 0 007 12c0 1.11.362 2.136.974 2.965l-3.201 3.201A9.462 9.462 0 012.5 12zm7.094 2.542A3.488 3.488 0 0012 15.5c.932 0 1.779-.364 2.406-.958a.769.769 0 01.136-.136A3.488 3.488 0 0015.5 12c0-.932-.364-1.779-.958-2.406a.768.768 0 01-.136-.136A3.488 3.488 0 0012 8.5c-.932 0-1.779.364-2.406.958a.768.768 0 01-.136.136A3.488 3.488 0 008.5 12c0 .932.364 1.779.958 2.406.05.039.097.086.136.136zm5.371 1.484A4.978 4.978 0 0112 17a4.978 4.978 0 01-2.965-.974l-3.201 3.201A9.462 9.462 0 0012 21.5a9.462 9.462 0 006.166-2.273l-3.2-3.2zm4.262 2.14l-3.2-3.2c.611-.83.973-1.856.973-2.966s-.362-2.136-.974-2.965l3.201-3.201A9.462 9.462 0 0121.5 12a9.462 9.462 0 01-2.273 6.166zm-1.06-13.393l-3.202 3.2A4.977 4.977 0 0012 7c-1.11 0-2.136.362-2.965.974L5.834 4.773A9.463 9.463 0 0112 2.5c2.353 0 4.507.856 6.166 2.273z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/keyframes.scss
new file mode 100644
index 0000000000..46b3d4f52d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-swap-horizontal {
+  50% {
+
+    background-color: var(--icon-color, var(--color-swap-horizontal-500, currentColor));
+    -webkit-mask-image: var(--icon-swap-horizontal-24);
+    mask-image: var(--icon-swap-horizontal-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-swap-horizontal-500, currentColor));
+    -webkit-mask-image: var(--icon-swap-horizontal-16);
+    mask-image: var(--icon-swap-horizontal-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/placeholders.scss
new file mode 100644
index 0000000000..156b0067e1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-swap-horizontal-icon {
+  --icon-name: icon-swap-horizontal;
+  content: '';
+}
+%with-swap-horizontal-mask {
+  --icon-name: icon-swap-horizontal;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/property-16.scss
new file mode 100644
index 0000000000..83305bc5c1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-swap-horizontal-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M12.26 1.45a.75.75 0 10-1.02 1.1l2.1 1.95H7.75a.75.75 0 000 1.5h5.59l-2.1 1.95a.75.75 0 101.02 1.1l3.5-3.25a.75.75 0 000-1.1l-3.5-3.25zM2.66 10l2.1-1.95a.75.75 0 10-1.02-1.1L.24 10.2a.75.75 0 000 1.1l3.5 3.25a.75.75 0 001.02-1.1l-2.1-1.95h5.59a.75.75 0 000-1.5H2.66z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/property-24.scss
new file mode 100644
index 0000000000..6643ea70c9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-horizontal/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-swap-horizontal-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M18.265 5.455a.75.75 0 00-1.03 1.09L20.364 9.5H11.75a.75.75 0 000 1.5h8.614l-3.129 2.955a.75.75 0 001.03 1.09l4.5-4.25a.75.75 0 000-1.09l-4.5-4.25zM3.636 13l3.129-2.955a.75.75 0 00-1.03-1.09l-4.5 4.25a.75.75 0 000 1.09l4.5 4.25a.75.75 0 001.03-1.09L3.636 14.5h8.614a.75.75 0 000-1.5H3.636z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/keyframes.scss
new file mode 100644
index 0000000000..611baad0e4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-swap-vertical {
+  50% {
+
+    background-color: var(--icon-color, var(--color-swap-vertical-500, currentColor));
+    -webkit-mask-image: var(--icon-swap-vertical-24);
+    mask-image: var(--icon-swap-vertical-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-swap-vertical-500, currentColor));
+    -webkit-mask-image: var(--icon-swap-vertical-16);
+    mask-image: var(--icon-swap-vertical-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/placeholders.scss
new file mode 100644
index 0000000000..b24b982668
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-swap-vertical-icon {
+  --icon-name: icon-swap-vertical;
+  content: '';
+}
+%with-swap-vertical-mask {
+  --icon-name: icon-swap-vertical;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/property-16.scss
new file mode 100644
index 0000000000..6047fbe937
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-swap-vertical-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.45 3.74a.75.75 0 001.1 1.02l1.95-2.1v5.59a.75.75 0 101.5 0V2.66l1.95 2.1a.75.75 0 101.1-1.02L5.8.24a.75.75 0 00-1.1 0l-3.25 3.5zM10.75 7a.75.75 0 00-.75.75v5.59l-1.95-2.1a.75.75 0 10-1.1 1.02l3.25 3.5a.75.75 0 001.1 0l3.25-3.5a.75.75 0 10-1.1-1.02l-1.95 2.1V7.75a.75.75 0 00-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/property-24.scss
new file mode 100644
index 0000000000..fa042f0519
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/swap-vertical/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-swap-vertical-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M4.455 5.735a.75.75 0 001.09 1.03L8.5 3.636v8.614a.75.75 0 001.5 0V3.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5zM15.5 20.364V11.75a.75.75 0 00-1.5 0v8.614l-2.955-3.129a.75.75 0 00-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03L15.5 20.364z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/keyframes.scss
new file mode 100644
index 0000000000..66da856baa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-switcher {
+  50% {
+
+    background-color: var(--icon-color, var(--color-switcher-500, currentColor));
+    -webkit-mask-image: var(--icon-switcher-24);
+    mask-image: var(--icon-switcher-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-switcher-500, currentColor));
+    -webkit-mask-image: var(--icon-switcher-16);
+    mask-image: var(--icon-switcher-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/placeholders.scss
new file mode 100644
index 0000000000..4101d99337
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-switcher-icon {
+  --icon-name: icon-switcher;
+  content: '';
+}
+%with-switcher-mask {
+  --icon-name: icon-switcher;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/property-16.scss
new file mode 100644
index 0000000000..b5e397f8e1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-switcher-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M.75 0A.75.75 0 000 .75v2.5c0 .414.336.75.75.75h2.5A.75.75 0 004 3.25V.75A.75.75 0 003.25 0H.75zM6.75 0A.75.75 0 006 .75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V.75A.75.75 0 009.25 0h-2.5zM12.75 0a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V.75a.75.75 0 00-.75-.75h-2.5zM.75 6a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5A.75.75 0 004 9.25v-2.5A.75.75 0 003.25 6H.75zM6.75 6a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5A.75.75 0 009.25 6h-2.5zM12.75 6a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75h-2.5zM.75 12a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75H.75zM6.75 12a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75h-2.5zM12.75 12a.75.75 0 00-.75.75v2.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-2.5a.75.75 0 00-.75-.75h-2.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/property-24.scss
new file mode 100644
index 0000000000..3e41dec579
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/switcher/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-switcher-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M2.25 1C1.56 1 1 1.56 1 2.25v3.5C1 6.44 1.56 7 2.25 7h3.5C6.44 7 7 6.44 7 5.75v-3.5C7 1.56 6.44 1 5.75 1h-3.5zM10.25 1C9.56 1 9 1.56 9 2.25v3.5C9 6.44 9.56 7 10.25 7h3.5C14.44 7 15 6.44 15 5.75v-3.5C15 1.56 14.44 1 13.75 1h-3.5zM18.25 1C17.56 1 17 1.56 17 2.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C22.44 7 23 6.44 23 5.75v-3.5C23 1.56 22.44 1 21.75 1h-3.5zM2.25 9C1.56 9 1 9.56 1 10.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 15 7 14.44 7 13.75v-3.5C7 9.56 6.44 9 5.75 9h-3.5zM10.25 9C9.56 9 9 9.56 9 10.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C15 9.56 14.44 9 13.75 9h-3.5zM18.25 9c-.69 0-1.25.56-1.25 1.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5C23 9.56 22.44 9 21.75 9h-3.5zM2.25 17C1.56 17 1 17.56 1 18.25v3.5c0 .69.56 1.25 1.25 1.25h3.5C6.44 23 7 22.44 7 21.75v-3.5C7 17.56 6.44 17 5.75 17h-3.5zM10.25 17C9.56 17 9 17.56 9 18.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-3.5zM18.25 17c-.69 0-1.25.56-1.25 1.25v3.5c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-3.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/keyframes.scss
new file mode 100644
index 0000000000..c384abc761
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sync-alert {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sync-alert-500, currentColor));
+    -webkit-mask-image: var(--icon-sync-alert-24);
+    mask-image: var(--icon-sync-alert-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sync-alert-500, currentColor));
+    -webkit-mask-image: var(--icon-sync-alert-16);
+    mask-image: var(--icon-sync-alert-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/placeholders.scss
new file mode 100644
index 0000000000..871bfcdd66
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sync-alert-icon {
+  --icon-name: icon-sync-alert;
+  content: '';
+}
+%with-sync-alert-mask {
+  --icon-name: icon-sync-alert;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/property-16.scss
new file mode 100644
index 0000000000..27ae10ea49
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sync-alert-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 1.5A6.5 6.5 0 001.5 8 .75.75 0 010 8a8 8 0 0113.5-5.81v-.94a.75.75 0 011.5 0v3a.75.75 0 01-.75.75h-3a.75.75 0 010-1.5h1.44A6.479 6.479 0 008 1.5zM15.25 7.25A.75.75 0 0116 8a8 8 0 01-13.5 5.81v.94a.75.75 0 01-1.5 0v-3a.75.75 0 01.75-.75h3a.75.75 0 010 1.5H3.31A6.5 6.5 0 0014.5 8a.75.75 0 01.75-.75z"/><path d="M7 11a1 1 0 011-1h.007a1 1 0 110 2H8a1 1 0 01-1-1zM8.75 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/property-24.scss
new file mode 100644
index 0000000000..befa369e3e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-alert/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sync-alert-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3.5A8.5 8.5 0 003.5 12 .75.75 0 012 12C2 6.477 6.477 2 12 2a9.977 9.977 0 017.5 3.386V2.75a.75.75 0 011.5 0v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 010-1.5h2.731A8.48 8.48 0 0012 3.5zM21.25 11.25A.75.75 0 0122 12c0 5.523-4.477 10-10 10a9.977 9.977 0 01-7.5-3.386v2.636a.75.75 0 01-1.5 0v-4.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5H5.519A8.5 8.5 0 0020.5 12a.75.75 0 01.75-.75z"/><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/keyframes.scss
new file mode 100644
index 0000000000..ecac912889
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sync-reverse {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sync-reverse-500, currentColor));
+    -webkit-mask-image: var(--icon-sync-reverse-24);
+    mask-image: var(--icon-sync-reverse-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sync-reverse-500, currentColor));
+    -webkit-mask-image: var(--icon-sync-reverse-16);
+    mask-image: var(--icon-sync-reverse-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/placeholders.scss
new file mode 100644
index 0000000000..08c35b6e97
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sync-reverse-icon {
+  --icon-name: icon-sync-reverse;
+  content: '';
+}
+%with-sync-reverse-mask {
+  --icon-name: icon-sync-reverse;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/property-16.scss
new file mode 100644
index 0000000000..65e125dd71
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sync-reverse-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 1.5A6.5 6.5 0 0114.5 8 .75.75 0 0016 8 8 8 0 002.5 2.19v-.94a.75.75 0 00-1.5 0v3c0 .414.336.75.75.75h3a.75.75 0 000-1.5H3.31A6.479 6.479 0 018 1.5zM.75 7.25A.75.75 0 000 8a8 8 0 0013.5 5.81v.94a.75.75 0 001.5 0v-3a.75.75 0 00-.75-.75h-3a.75.75 0 000 1.5h1.44A6.5 6.5 0 011.5 8a.75.75 0 00-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/property-24.scss
new file mode 100644
index 0000000000..598ace15d9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync-reverse/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sync-reverse-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3.5a8.5 8.5 0 018.5 8.5.75.75 0 001.5 0c0-5.523-4.477-10-10-10a9.977 9.977 0 00-7.5 3.386V2.75a.75.75 0 00-1.5 0v4.5c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5H5.519A8.48 8.48 0 0112 3.5zM2.75 11.25A.75.75 0 002 12c0 5.523 4.477 10 10 10a9.977 9.977 0 007.5-3.386v2.636a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.731A8.5 8.5 0 013.5 12a.75.75 0 00-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync/keyframes.scss
new file mode 100644
index 0000000000..6b5e443809
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-sync {
+  50% {
+
+    background-color: var(--icon-color, var(--color-sync-500, currentColor));
+    -webkit-mask-image: var(--icon-sync-24);
+    mask-image: var(--icon-sync-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-sync-500, currentColor));
+    -webkit-mask-image: var(--icon-sync-16);
+    mask-image: var(--icon-sync-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync/placeholders.scss
new file mode 100644
index 0000000000..bd3aaef11d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-sync-icon {
+  --icon-name: icon-sync;
+  content: '';
+}
+%with-sync-mask {
+  --icon-name: icon-sync;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync/property-16.scss
new file mode 100644
index 0000000000..7670cbd58e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sync-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 1.5A6.5 6.5 0 001.5 8 .75.75 0 010 8a8 8 0 0113.5-5.81v-.94a.75.75 0 011.5 0v3a.75.75 0 01-.75.75h-3a.75.75 0 010-1.5h1.44A6.479 6.479 0 008 1.5zM15.25 7.25A.75.75 0 0116 8a8 8 0 01-13.5 5.81v.94a.75.75 0 01-1.5 0v-3a.75.75 0 01.75-.75h3a.75.75 0 010 1.5H3.31A6.5 6.5 0 0014.5 8a.75.75 0 01.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/sync/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/sync/property-24.scss
new file mode 100644
index 0000000000..db9a2a8fed
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/sync/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-sync-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 3.5A8.5 8.5 0 003.5 12 .75.75 0 012 12C2 6.477 6.477 2 12 2a9.977 9.977 0 017.5 3.386V2.75a.75.75 0 011.5 0v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 010-1.5h2.731A8.48 8.48 0 0012 3.5zM21.25 11.25A.75.75 0 0122 12c0 5.523-4.477 10-10 10a9.977 9.977 0 01-7.5-3.386v2.636a.75.75 0 01-1.5 0v-4.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5H5.519A8.5 8.5 0 0020.5 12a.75.75 0 01.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/keyframes.scss
new file mode 100644
index 0000000000..ce7f84e81e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-tablet {
+  50% {
+
+    background-color: var(--icon-color, var(--color-tablet-500, currentColor));
+    -webkit-mask-image: var(--icon-tablet-24);
+    mask-image: var(--icon-tablet-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-tablet-500, currentColor));
+    -webkit-mask-image: var(--icon-tablet-16);
+    mask-image: var(--icon-tablet-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/placeholders.scss
new file mode 100644
index 0000000000..647f0aa01b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-tablet-icon {
+  --icon-name: icon-tablet;
+  content: '';
+}
+%with-tablet-mask {
+  --icon-name: icon-tablet;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/property-16.scss
new file mode 100644
index 0000000000..cca4251063
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-tablet-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 11a1 1 0 100 2h.01a1 1 0 100-2H8z"/><path fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-9.5A2.25 2.25 0 0013.75 1H2.25zM1.5 3.25a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v9.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-9.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/property-24.scss
new file mode 100644
index 0000000000..fe45cbad9b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tablet/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-tablet-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 17a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M3.75 3A2.75 2.75 0 001 5.75v12.5A2.75 2.75 0 003.75 21h16.5A2.75 2.75 0 0023 18.25V5.75A2.75 2.75 0 0020.25 3H3.75zM2.5 5.75c0-.69.56-1.25 1.25-1.25h16.5c.69 0 1.25.56 1.25 1.25v12.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V5.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tag/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tag/index.scss
new file mode 100644
index 0000000000..39199771fa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tag/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../tag/property-16';
+        @import '../tag/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tag/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tag/keyframes.scss
new file mode 100644
index 0000000000..ab748c68f9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tag/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-tag {
+  50% {
+
+    background-color: var(--icon-color, var(--color-tag-500, currentColor));
+    -webkit-mask-image: var(--icon-tag-24);
+    mask-image: var(--icon-tag-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-tag-500, currentColor));
+    -webkit-mask-image: var(--icon-tag-16);
+    mask-image: var(--icon-tag-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tag/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tag/placeholders.scss
new file mode 100644
index 0000000000..3ef964d13f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tag/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-tag-icon {
+  --icon-name: icon-tag;
+  content: '';
+}
+%with-tag-mask {
+  --icon-name: icon-tag;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tag/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tag/property-16.scss
new file mode 100644
index 0000000000..3b9abb223e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tag/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-tag-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M5 4a1 1 0 000 2h.006a1 1 0 000-2H5z"/><path fill-rule="evenodd" d="M2.25 1C1.56 1 1 1.56 1 2.25v5.246c0 .596.237 1.169.659 1.59l5.383 5.384a2.25 2.25 0 003.182 0l4.246-4.246a2.25 2.25 0 000-3.182L9.087 1.66A2.25 2.25 0 007.496 1H2.25zm.25 6.496V2.5h4.996a.75.75 0 01.53.22l5.383 5.383a.75.75 0 010 1.06L9.163 13.41a.75.75 0 01-1.06 0L2.72 8.026a.75.75 0 01-.22-.53z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tag/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tag/property-24.scss
new file mode 100644
index 0000000000..9b50876ffd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tag/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-tag-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6 5a1 1 0 000 2h.01a1 1 0 000-2H6z"/><path fill-rule="evenodd" d="M4.75 2A2.75 2.75 0 002 4.75v6.422c0 .729.29 1.428.805 1.944l8 8a2.75 2.75 0 003.89 0l6.421-6.421a2.75 2.75 0 000-3.89l-8-8A2.75 2.75 0 0011.172 2H4.75zM3.5 4.75c0-.69.56-1.25 1.25-1.25h6.422c.331 0 .649.132.883.366l8 8a1.25 1.25 0 010 1.768l-6.421 6.421a1.25 1.25 0 01-1.768 0l-8-8a1.25 1.25 0 01-.366-.883V4.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/target/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/target/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/target/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/target/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/target/keyframes.scss
new file mode 100644
index 0000000000..5ac24a6fad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/target/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-target {
+  50% {
+
+    background-color: var(--icon-color, var(--color-target-500, currentColor));
+    -webkit-mask-image: var(--icon-target-24);
+    mask-image: var(--icon-target-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-target-500, currentColor));
+    -webkit-mask-image: var(--icon-target-16);
+    mask-image: var(--icon-target-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/target/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/target/placeholders.scss
new file mode 100644
index 0000000000..4beeaf2e5f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/target/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-target-icon {
+  --icon-name: icon-target;
+  content: '';
+}
+%with-target-mask {
+  --icon-name: icon-target;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/target/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/target/property-16.scss
new file mode 100644
index 0000000000..d5af73408b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/target/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-target-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 6a2 2 0 100 4 2 2 0 000-4zm-.5 2a.5.5 0 111 0 .5.5 0 01-1 0z"/><path d="M3 8a5 5 0 1110 0A5 5 0 013 8zm5-3.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"/><path d="M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/target/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/target/property-24.scss
new file mode 100644
index 0000000000..06fdac8fc9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/target/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-target-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 9a3 3 0 100 6 3 3 0 000-6zm-1.5 3a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"/><path d="M5 12a7 7 0 1114 0 7 7 0 01-14 0zm7-5.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11z"/><path d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/keyframes.scss
new file mode 100644
index 0000000000..e38db36ad4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-terminal-screen {
+  50% {
+
+    background-color: var(--icon-color, var(--color-terminal-screen-500, currentColor));
+    -webkit-mask-image: var(--icon-terminal-screen-24);
+    mask-image: var(--icon-terminal-screen-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-terminal-screen-500, currentColor));
+    -webkit-mask-image: var(--icon-terminal-screen-16);
+    mask-image: var(--icon-terminal-screen-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/placeholders.scss
new file mode 100644
index 0000000000..46aa0b91f4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-terminal-screen-icon {
+  --icon-name: icon-terminal-screen;
+  content: '';
+}
+%with-terminal-screen-mask {
+  --icon-name: icon-terminal-screen;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/property-16.scss
new file mode 100644
index 0000000000..7b9016e0be
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-terminal-screen-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.924 5.02a.75.75 0 011.056-.096l3 2.5a.75.75 0 010 1.152l-3 2.5a.75.75 0 11-.96-1.152L6.328 8 4.02 6.076a.75.75 0 01-.096-1.056zM8.25 10.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z"/><path fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h11.5A2.25 2.25 0 0116 3.25v9.5A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75v-9.5zm2.25-.75a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75H2.25z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/property-24.scss
new file mode 100644
index 0000000000..b03c8b5eb1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal-screen/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-terminal-screen-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.174 7.27a.75.75 0 011.056-.096l4.5 3.75a.75.75 0 010 1.152l-4.5 3.75a.75.75 0 11-.96-1.152l3.809-3.174-3.81-3.174a.75.75 0 01-.095-1.056zM11.75 16a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5z"/><path fill-rule="evenodd" d="M1 4.75A2.75 2.75 0 013.75 2h16.5A2.75 2.75 0 0123 4.75v14.5A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25V4.75zM3.75 3.5c-.69 0-1.25.56-1.25 1.25v14.5c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V4.75c0-.69-.56-1.25-1.25-1.25H3.75z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/keyframes.scss
new file mode 100644
index 0000000000..a12168c85f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-terminal {
+  50% {
+
+    background-color: var(--icon-color, var(--color-terminal-500, currentColor));
+    -webkit-mask-image: var(--icon-terminal-24);
+    mask-image: var(--icon-terminal-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-terminal-500, currentColor));
+    -webkit-mask-image: var(--icon-terminal-16);
+    mask-image: var(--icon-terminal-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/placeholders.scss
new file mode 100644
index 0000000000..76f2e7eee3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-terminal-icon {
+  --icon-name: icon-terminal;
+  content: '';
+}
+%with-terminal-mask {
+  --icon-name: icon-terminal;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/property-16.scss
new file mode 100644
index 0000000000..6c280e94fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-terminal-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3.23 3.174a.75.75 0 00-.96 1.152L6.078 7.5 2.27 10.674a.75.75 0 10.96 1.152l4.5-3.75a.75.75 0 000-1.152l-4.5-3.75zM7.75 12a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/property-24.scss
new file mode 100644
index 0000000000..ec91d511dc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terminal/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-terminal-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M4.23 4.174a.75.75 0 00-.96 1.152L10.078 11 3.27 16.674a.75.75 0 10.96 1.152l7.5-6.25a.75.75 0 000-1.152l-7.5-6.25zM11.75 18a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/keyframes.scss
new file mode 100644
index 0000000000..d0433fe34a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-terraform-color {
+  50% {
+    background-image: var(--icon-terraform-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-terraform-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/placeholders.scss
new file mode 100644
index 0000000000..8dc9d06f5e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-terraform-color-icon {
+  --icon-name: icon-terraform-color;
+  content: '';
+}
+%with-terraform-color-mask {
+  --icon-name: icon-terraform-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/property-16.scss
new file mode 100644
index 0000000000..711511f247
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-terraform-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%237B42BC" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.825 2.82l4.35 2.524v5.052L5.825 7.87V2.82zM10.651 5.344v5.052L15 7.87V2.82l-4.349 2.524zM1 0v5.05l4.349 2.527V2.526L1 0zM5.825 13.474L10.174 16v-5.051L5.825 8.423v5.051z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/property-24.scss
new file mode 100644
index 0000000000..ab1c1ec3dc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-terraform-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%237B42BC" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.893 4.618l6.214 3.597v7.2l-6.214-3.6V4.618zM15.788 8.215v7.2l6.212-3.6V4.618l-6.212 3.597zM2 .6v7.197l6.212 3.6V4.2L2 .6zM8.893 19.8l6.212 3.6v-7.197l-6.212-3.6V19.8z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/index.scss
new file mode 100644
index 0000000000..c9683ccebe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../terraform-color/property-16';
+        @import '../terraform-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/keyframes.scss
new file mode 100644
index 0000000000..d6341c0afd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-terraform {
+  50% {
+
+    background-color: var(--icon-color, var(--color-terraform-500, currentColor));
+    -webkit-mask-image: var(--icon-terraform-color-24);
+    mask-image: var(--icon-terraform-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-terraform-500, currentColor));
+    -webkit-mask-image: var(--icon-terraform-color-16);
+    mask-image: var(--icon-terraform-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/placeholders.scss
new file mode 100644
index 0000000000..896a55bd81
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-terraform-icon {
+  --icon-name: icon-terraform;
+  content: '';
+}
+%with-terraform-mask {
+  --icon-name: icon-terraform;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/property-16.scss
new file mode 100644
index 0000000000..cfd6f4afe2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-terraform-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 0v5.05l4.349 2.527V2.526L1 0zM10.175 5.344l-4.35-2.525v5.05l4.35 2.527V5.344zM10.651 10.396V5.344L15 2.819v5.05l-4.349 2.527zM10.174 16l-4.349-2.526v-5.05l4.349 2.525V16z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/property-24.scss
new file mode 100644
index 0000000000..ec1dcdf26c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/terraform/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-terraform-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1 0v5.05l4.349 2.527V2.526L1 0zM10.175 5.344l-4.35-2.525v5.05l4.35 2.527V5.344zM10.651 10.396V5.344L15 2.819v5.05l-4.349 2.527zM10.174 16l-4.349-2.526v-5.05l4.349 2.525V16z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/keyframes.scss
new file mode 100644
index 0000000000..f0297ff6d0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-thumbs-down {
+  50% {
+
+    background-color: var(--icon-color, var(--color-thumbs-down-500, currentColor));
+    -webkit-mask-image: var(--icon-thumbs-down-24);
+    mask-image: var(--icon-thumbs-down-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-thumbs-down-500, currentColor));
+    -webkit-mask-image: var(--icon-thumbs-down-16);
+    mask-image: var(--icon-thumbs-down-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/placeholders.scss
new file mode 100644
index 0000000000..ec4c0dc3f7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-thumbs-down-icon {
+  --icon-name: icon-thumbs-down;
+  content: '';
+}
+%with-thumbs-down-mask {
+  --icon-name: icon-thumbs-down;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/property-16.scss
new file mode 100644
index 0000000000..f9dee244b0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-thumbs-down-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8.404 14.484l2.56-5.759V1.5H3.488a.75.75 0 00-.741.637l-.995 6.55a.75.75 0 00.742.862h3.767c.69 0 1.25.56 1.25 1.25v2.626c0 .53.385.972.892 1.06zM12.464 1.5v6.634h1.286a.75.75 0 00.75-.75V2.25a.75.75 0 00-.75-.75h-1.287zM12.2 9.634l-2.511 5.65A1.206 1.206 0 018.588 16a2.575 2.575 0 01-2.576-2.575v-2.376H2.495A2.25 2.25 0 01.27 8.46l.995-6.549A2.25 2.25 0 013.489 0H13.75A2.25 2.25 0 0116 2.25v5.134a2.25 2.25 0 01-2.25 2.25H12.2z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/property-24.scss
new file mode 100644
index 0000000000..5a8e01f9fc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-down/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-thumbs-down-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12.77 21.484l3.73-8.393V2.5H5.52a1.25 1.25 0 00-1.237 1.062l-1.442 9.5A1.25 1.25 0 004.077 14.5H9.25c.966 0 1.75.784 1.75 1.75v3.225c0 1.032.772 1.884 1.77 2.01zM18 2.5v10h2.25c.69 0 1.25-.56 1.25-1.25v-7.5c0-.69-.56-1.25-1.25-1.25H18zM17.737 14l-3.71 8.349a1.097 1.097 0 01-1.002.651A3.525 3.525 0 019.5 19.475V16.25a.25.25 0 00-.25-.25H4.077a2.75 2.75 0 01-2.72-3.163l1.443-9.5A2.75 2.75 0 015.52 1h14.73A2.75 2.75 0 0123 3.75v7.5A2.75 2.75 0 0120.25 14h-2.513z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/keyframes.scss
new file mode 100644
index 0000000000..05f779dd6d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-thumbs-up {
+  50% {
+
+    background-color: var(--icon-color, var(--color-thumbs-up-500, currentColor));
+    -webkit-mask-image: var(--icon-thumbs-up-24);
+    mask-image: var(--icon-thumbs-up-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-thumbs-up-500, currentColor));
+    -webkit-mask-image: var(--icon-thumbs-up-16);
+    mask-image: var(--icon-thumbs-up-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/placeholders.scss
new file mode 100644
index 0000000000..b9aecb2da0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-thumbs-up-icon {
+  --icon-name: icon-thumbs-up;
+  content: '';
+}
+%with-thumbs-up-mask {
+  --icon-name: icon-thumbs-up;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/property-16.scss
new file mode 100644
index 0000000000..30a86a33da
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-thumbs-up-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.596 1.516l-2.56 5.759V14.5h7.475a.75.75 0 00.741-.637l.994-6.55a.75.75 0 00-.741-.862H9.738c-.69 0-1.25-.56-1.25-1.25V2.575c0-.53-.385-.972-.892-1.06zM3.536 14.5V7.866H2.25a.75.75 0 00-.75.75v5.134c0 .414.336.75.75.75h1.287zM3.8 6.366L6.31.716A1.206 1.206 0 017.412 0a2.575 2.575 0 012.576 2.575v2.376h3.517a2.25 2.25 0 012.224 2.588l-.994 6.549A2.25 2.25 0 0112.511 16H2.25A2.25 2.25 0 010 13.75V8.616a2.25 2.25 0 012.25-2.25H3.8z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/property-24.scss
new file mode 100644
index 0000000000..e5abd2f295
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/thumbs-up/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-thumbs-up-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M11.23 2.516L7.5 10.909V21.5h10.98a1.25 1.25 0 001.237-1.062l1.442-9.5A1.25 1.25 0 0019.923 9.5H14.75A1.75 1.75 0 0113 7.75V4.525a2.025 2.025 0 00-1.77-2.01zM6 21.5v-10H3.75c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25H6zM6.263 10l3.71-8.349A1.097 1.097 0 0110.975 1 3.525 3.525 0 0114.5 4.525V7.75c0 .138.112.25.25.25h5.173a2.75 2.75 0 012.72 3.163l-1.443 9.5A2.75 2.75 0 0118.48 23H3.75A2.75 2.75 0 011 20.25v-7.5A2.75 2.75 0 013.75 10h2.513z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/keyframes.scss
new file mode 100644
index 0000000000..4eb1e1dad4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-toggle-left {
+  50% {
+
+    background-color: var(--icon-color, var(--color-toggle-left-500, currentColor));
+    -webkit-mask-image: var(--icon-toggle-left-24);
+    mask-image: var(--icon-toggle-left-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-toggle-left-500, currentColor));
+    -webkit-mask-image: var(--icon-toggle-left-16);
+    mask-image: var(--icon-toggle-left-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/placeholders.scss
new file mode 100644
index 0000000000..630e2d1c62
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-toggle-left-icon {
+  --icon-name: icon-toggle-left;
+  content: '';
+}
+%with-toggle-left-mask {
+  --icon-name: icon-toggle-left;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/property-16.scss
new file mode 100644
index 0000000000..08a39e019c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-toggle-left-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M3 8a2 2 0 114 0 2 2 0 01-4 0z"/><path fill-rule="evenodd" d="M5 3a5 5 0 000 10h6a5 5 0 000-10H5zM1.5 8A3.5 3.5 0 015 4.5h6a3.5 3.5 0 110 7H5A3.5 3.5 0 011.5 8z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/property-24.scss
new file mode 100644
index 0000000000..29dda80264
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-left/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-toggle-left-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 8a4 4 0 100 8 4 4 0 000-8zm-2.5 4a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"/><path d="M8 5a7 7 0 000 14h8a7 7 0 100-14H8zm-5.5 7A5.5 5.5 0 018 6.5h8a5.5 5.5 0 110 11H8A5.5 5.5 0 012.5 12z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/keyframes.scss
new file mode 100644
index 0000000000..a83c5216e3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-toggle-right {
+  50% {
+
+    background-color: var(--icon-color, var(--color-toggle-right-500, currentColor));
+    -webkit-mask-image: var(--icon-toggle-right-24);
+    mask-image: var(--icon-toggle-right-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-toggle-right-500, currentColor));
+    -webkit-mask-image: var(--icon-toggle-right-16);
+    mask-image: var(--icon-toggle-right-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/placeholders.scss
new file mode 100644
index 0000000000..fabe64b3e6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-toggle-right-icon {
+  --icon-name: icon-toggle-right;
+  content: '';
+}
+%with-toggle-right-mask {
+  --icon-name: icon-toggle-right;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/property-16.scss
new file mode 100644
index 0000000000..fd39dcb78d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-toggle-right-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M13 8a2 2 0 10-4 0 2 2 0 004 0z"/><path fill-rule="evenodd" d="M11 3a5 5 0 010 10H5A5 5 0 015 3h6zm3.5 5A3.5 3.5 0 0011 4.5H5a3.5 3.5 0 100 7h6A3.5 3.5 0 0014.5 8z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/property-24.scss
new file mode 100644
index 0000000000..c62a860c20
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/toggle-right/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-toggle-right-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 8a4 4 0 110 8 4 4 0 010-8zm2.5 4a2.5 2.5 0 10-5 0 2.5 2.5 0 005 0z"/><path d="M16 5a7 7 0 110 14H8A7 7 0 118 5h8zm5.5 7A5.5 5.5 0 0016 6.5H8a5.5 5.5 0 100 11h8a5.5 5.5 0 005.5-5.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/token/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/token/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/token/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/token/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/token/keyframes.scss
new file mode 100644
index 0000000000..04d544ced9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/token/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-token {
+  50% {
+
+    background-color: var(--icon-color, var(--color-token-500, currentColor));
+    -webkit-mask-image: var(--icon-token-24);
+    mask-image: var(--icon-token-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-token-500, currentColor));
+    -webkit-mask-image: var(--icon-token-16);
+    mask-image: var(--icon-token-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/token/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/token/placeholders.scss
new file mode 100644
index 0000000000..644d186982
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/token/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-token-icon {
+  --icon-name: icon-token;
+  content: '';
+}
+%with-token-mask {
+  --icon-name: icon-token;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/token/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/token/property-16.scss
new file mode 100644
index 0000000000..4bfbda5f3e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/token/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-token-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M5.791 3.318L3.316 5.793a1 1 0 000 1.414l2.475 2.475a1 1 0 001.415 0L9.68 7.207a1 1 0 000-1.414L7.206 3.318a1 1 0 00-1.415 0zm.707 4.95L4.731 6.5l1.767-1.768L8.266 6.5 6.498 8.268z"/><path d="M0 6.5a6.5 6.5 0 0112.346-2.845 6.5 6.5 0 11-8.691 8.691A6.5 6.5 0 010 6.5zm6.5-5a5 5 0 100 10 5 5 0 000-10zm6.5 5c0-.201-.01-.4-.027-.597a5 5 0 11-7.07 7.07A6.5 6.5 0 0013 6.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/token/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/token/property-24.scss
new file mode 100644
index 0000000000..f3f703bf07
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/token/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-token-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8.762 5.228L5.227 8.763a1.75 1.75 0 000 2.475l3.535 3.535a1.75 1.75 0 002.475 0l3.536-3.535a1.75 1.75 0 000-2.475l-3.536-3.535a1.75 1.75 0 00-2.475 0zM6.287 9.824l3.536-3.536a.25.25 0 01.354 0l3.535 3.536a.25.25 0 010 .353l-3.535 3.536a.25.25 0 01-.354 0l-3.536-3.536a.25.25 0 010-.353z"/><path d="M1 10a9 9 0 0117.043-4.043A9 9 0 115.957 18.043 9 9 0 011 10zm9-7.5a7.5 7.5 0 100 15 7.5 7.5 0 000-15zm9 7.5c0-.594-.058-1.174-.167-1.736A7.5 7.5 0 118.264 18.833 9 9 0 0019 10z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tools/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tools/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tools/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tools/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tools/keyframes.scss
new file mode 100644
index 0000000000..ec2ebb764b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tools/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-tools {
+  50% {
+
+    background-color: var(--icon-color, var(--color-tools-500, currentColor));
+    -webkit-mask-image: var(--icon-tools-24);
+    mask-image: var(--icon-tools-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-tools-500, currentColor));
+    -webkit-mask-image: var(--icon-tools-16);
+    mask-image: var(--icon-tools-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tools/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tools/placeholders.scss
new file mode 100644
index 0000000000..0dbb35488f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tools/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-tools-icon {
+  --icon-name: icon-tools;
+  content: '';
+}
+%with-tools-mask {
+  --icon-name: icon-tools;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tools/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tools/property-16.scss
new file mode 100644
index 0000000000..08aaa56e78
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tools/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-tools-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M5 3v-.75A2.25 2.25 0 017.25 0h1.5A2.25 2.25 0 0111 2.25V3h.79a2.25 2.25 0 011.609.678l1.96 2.007c.411.42.641.985.641 1.573v5.492A2.25 2.25 0 0113.75 15H2.25A2.25 2.25 0 010 12.75V7.258c0-.588.23-1.152.64-1.573l1.961-2.007A2.25 2.25 0 014.211 3H5zm1.5-.75a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75V3h-3v-.75zM3.674 4.726a.75.75 0 01.537-.226h7.578a.75.75 0 01.537.226l1.96 2.008a.75.75 0 01.214.524V8h-4v-.25c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25V8h-4v-.742a.75.75 0 01.213-.524l1.961-2.008zM5.5 9.5h-4v3.25c0 .414.336.75.75.75h11.5a.75.75 0 00.75-.75V9.5h-4v.25c0 .69-.56 1.25-1.25 1.25h-2.5c-.69 0-1.25-.56-1.25-1.25V9.5zm1.5 0V8h2v1.5H7z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tools/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tools/property-24.scss
new file mode 100644
index 0000000000..5faf7b6a64
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tools/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-tools-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M7 6V4.75A2.75 2.75 0 019.75 2h4.5A2.75 2.75 0 0117 4.75V6h.422c.729 0 1.428.29 1.944.805l2.829 2.829A2.75 2.75 0 0123 11.578v7.672A2.75 2.75 0 0120.25 22H3.75A2.75 2.75 0 011 19.25v-7.672c0-.729.29-1.428.805-1.944l2.829-2.829A2.75 2.75 0 016.578 6H7zm1.5-1.25c0-.69.56-1.25 1.25-1.25h4.5c.69 0 1.25.56 1.25 1.25V6h-7V4.75zM6.578 7.5c-.331 0-.649.132-.883.366l-2.829 2.829a1.25 1.25 0 00-.366.883V13H9v-.75c0-.69.56-1.25 1.25-1.25h3.5c.69 0 1.25.56 1.25 1.25V13h6.5v-1.422c0-.331-.132-.649-.366-.883l-2.829-2.829a1.25 1.25 0 00-.883-.366H6.578zM15 15.75V14.5h6.5v4.75c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V14.5H9v1.25c0 .69.56 1.25 1.25 1.25h3.5c.69 0 1.25-.56 1.25-1.25zm-4.5-3.25v3h3v-3h-3z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/top/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/top/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/top/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/top/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/top/keyframes.scss
new file mode 100644
index 0000000000..78b6f79c8f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/top/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-top {
+  50% {
+
+    background-color: var(--icon-color, var(--color-top-500, currentColor));
+    -webkit-mask-image: var(--icon-top-24);
+    mask-image: var(--icon-top-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-top-500, currentColor));
+    -webkit-mask-image: var(--icon-top-16);
+    mask-image: var(--icon-top-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/top/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/top/placeholders.scss
new file mode 100644
index 0000000000..39e6386d6c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/top/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-top-icon {
+  --icon-name: icon-top;
+  content: '';
+}
+%with-top-mask {
+  --icon-name: icon-top;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/top/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/top/property-16.scss
new file mode 100644
index 0000000000..dbc096a3b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/top/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-top-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M2.5 2.5a.75.75 0 010-1.5H13a.75.75 0 010 1.5H2.5zM2.985 9.795a.75.75 0 001.06-.03L7 6.636v7.614a.75.75 0 001.5 0V6.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 00.03 1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/top/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/top/property-24.scss
new file mode 100644
index 0000000000..c5fc91621d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/top/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-top-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M3.5 3.5a.75.75 0 010-1.5H20a.75.75 0 010 1.5H3.5zM4.98 13.79a.75.75 0 001.06-.02L11 8.612V21.25a.75.75 0 001.5 0V8.612l4.96 5.158a.75.75 0 101.08-1.04l-6.25-6.5a.75.75 0 00-1.08 0l-6.25 6.5a.75.75 0 00.02 1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trash/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trash/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trash/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trash/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trash/keyframes.scss
new file mode 100644
index 0000000000..ff4485d5c5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trash/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-trash {
+  50% {
+
+    background-color: var(--icon-color, var(--color-trash-500, currentColor));
+    -webkit-mask-image: var(--icon-trash-24);
+    mask-image: var(--icon-trash-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-trash-500, currentColor));
+    -webkit-mask-image: var(--icon-trash-16);
+    mask-image: var(--icon-trash-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trash/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trash/placeholders.scss
new file mode 100644
index 0000000000..1677c81df3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trash/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-trash-icon {
+  --icon-name: icon-trash;
+  content: '';
+}
+%with-trash-mask {
+  --icon-name: icon-trash;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trash/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trash/property-16.scss
new file mode 100644
index 0000000000..c457fd372e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trash/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-trash-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.25 6a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 016.25 6zM10.5 6.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5z"/><path fill-rule="evenodd" d="M4 3v-.75A2.25 2.25 0 016.25 0h3.5A2.25 2.25 0 0112 2.25V3h2.25a.75.75 0 010 1.5H14v9.25A2.25 2.25 0 0111.75 16h-7.5A2.25 2.25 0 012 13.75V4.5h-.25a.75.75 0 010-1.5H4zm1.5-.75a.75.75 0 01.75-.75h3.5a.75.75 0 01.75.75V3h-5v-.75zm-2 2.25v9.25c0 .414.336.75.75.75h7.5a.75.75 0 00.75-.75V4.5h-9z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trash/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trash/property-24.scss
new file mode 100644
index 0000000000..d8aeac8d92
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trash/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-trash-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M9.75 9a.75.75 0 01.75.75v8.5a.75.75 0 01-1.5 0v-8.5A.75.75 0 019.75 9zM15 9.75a.75.75 0 00-1.5 0v8.5a.75.75 0 001.5 0v-8.5z"/><path fill-rule="evenodd" d="M7 5V3.75A2.75 2.75 0 019.75 1h4.5A2.75 2.75 0 0117 3.75V5h4.25a.75.75 0 010 1.5H20v13.75A2.75 2.75 0 0117.25 23H6.75A2.75 2.75 0 014 20.25V6.5H2.75a.75.75 0 010-1.5H7zm1.5-1.25c0-.69.56-1.25 1.25-1.25h4.5c.69 0 1.25.56 1.25 1.25V5h-7V3.75zm-3 2.75v13.75c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V6.5h-13z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/keyframes.scss
new file mode 100644
index 0000000000..657fbfdf84
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-trend-down {
+  50% {
+
+    background-color: var(--icon-color, var(--color-trend-down-500, currentColor));
+    -webkit-mask-image: var(--icon-trend-down-24);
+    mask-image: var(--icon-trend-down-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-trend-down-500, currentColor));
+    -webkit-mask-image: var(--icon-trend-down-16);
+    mask-image: var(--icon-trend-down-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/placeholders.scss
new file mode 100644
index 0000000000..d5ab1e26ab
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-trend-down-icon {
+  --icon-name: icon-trend-down;
+  content: '';
+}
+%with-trend-down-mask {
+  --icon-name: icon-trend-down;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/property-16.scss
new file mode 100644
index 0000000000..fe9031f0a7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-trend-down-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M1.28 3.22A.75.75 0 00.22 4.28l4.5 4.5a.75.75 0 00.894.126l3.96-2.2L13.6 11.5H10.75a.75.75 0 000 1.5h4.5a.75.75 0 00.75-.75v-4.5a.75.75 0 00-1.5 0v2.489l-4.176-4.971a.75.75 0 00-.938-.174L5.38 7.32l-4.1-4.1z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/property-24.scss
new file mode 100644
index 0000000000..66d79eb199
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-down/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-trend-down-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M1.28 5.22A.75.75 0 00.22 6.28l7.5 7.5a.75.75 0 001.005.05L13.7 9.76l7.74 7.74h-4.69a.75.75 0 000 1.5h6.5a.75.75 0 00.75-.75v-6.5a.75.75 0 00-1.5 0v4.69l-8.22-8.22a.75.75 0 00-1.005-.05L8.3 12.24 1.28 5.22z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/keyframes.scss
new file mode 100644
index 0000000000..4e7908e83d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-trend-up {
+  50% {
+
+    background-color: var(--icon-color, var(--color-trend-up-500, currentColor));
+    -webkit-mask-image: var(--icon-trend-up-24);
+    mask-image: var(--icon-trend-up-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-trend-up-500, currentColor));
+    -webkit-mask-image: var(--icon-trend-up-16);
+    mask-image: var(--icon-trend-up-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/placeholders.scss
new file mode 100644
index 0000000000..a0a0375efe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-trend-up-icon {
+  --icon-name: icon-trend-up;
+  content: '';
+}
+%with-trend-up-mask {
+  --icon-name: icon-trend-up;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/property-16.scss
new file mode 100644
index 0000000000..6b80ad0314
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-trend-up-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M16 8.25a.75.75 0 01-1.5 0V5.761l-4.176 4.971a.75.75 0 01-.938.174L5.38 8.68l-4.1 4.1a.75.75 0 01-1.06-1.06l4.5-4.5a.75.75 0 01.894-.126l3.96 2.2L13.6 4.5H10.75a.75.75 0 010-1.5h4.5a.75.75 0 01.75.75v4.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/property-24.scss
new file mode 100644
index 0000000000..6be4186c58
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/trend-up/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-trend-up-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M24 12.25a.75.75 0 01-1.5 0V7.56l-8.22 8.22a.75.75 0 01-1.005.05L8.3 11.76l-7.02 7.02a.75.75 0 01-1.06-1.06l7.5-7.5a.75.75 0 011.005-.05l4.975 4.07 7.74-7.74h-4.69a.75.75 0 010-1.5h6.5a.75.75 0 01.75.75v6.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/keyframes.scss
new file mode 100644
index 0000000000..960e3be01d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-triangle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-triangle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-triangle-fill-24);
+    mask-image: var(--icon-triangle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-triangle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-triangle-fill-16);
+    mask-image: var(--icon-triangle-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/placeholders.scss
new file mode 100644
index 0000000000..0db145269f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-triangle-fill-icon {
+  --icon-name: icon-triangle-fill;
+  content: '';
+}
+%with-triangle-fill-mask {
+  --icon-name: icon-triangle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/property-16.scss
new file mode 100644
index 0000000000..f73c52c096
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-triangle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M8 1.25a2.101 2.101 0 00-1.785.996l.64.392-.642-.388-5.675 9.373-.006.01a2.065 2.065 0 00.751 2.832c.314.183.67.281 1.034.285h11.366a2.101 2.101 0 001.791-1.045 2.064 2.064 0 00-.006-2.072L9.788 2.25l-.003-.004A2.084 2.084 0 008 1.25z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/property-24.scss
new file mode 100644
index 0000000000..fe58c6b724
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-triangle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M12 2c-.472 0-.934.127-1.342.366a2.75 2.75 0 00-.984.99l.648.378-.65-.374-8.31 14.45-.005.01a2.86 2.86 0 00-.007 2.758c.23.423.566.778.975 1.03.41.25.877.386 1.357.392h16.637c.479-.006.947-.142 1.356-.393.41-.25.744-.606.976-1.029a2.86 2.86 0 00-.008-2.758L14.328 3.36l-.002-.004a2.75 2.75 0 00-.984-.99A2.651 2.651 0 0012 2z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/keyframes.scss
new file mode 100644
index 0000000000..6099cebe96
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-triangle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-triangle-500, currentColor));
+    -webkit-mask-image: var(--icon-triangle-24);
+    mask-image: var(--icon-triangle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-triangle-500, currentColor));
+    -webkit-mask-image: var(--icon-triangle-16);
+    mask-image: var(--icon-triangle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/placeholders.scss
new file mode 100644
index 0000000000..49b53dea0d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-triangle-icon {
+  --icon-name: icon-triangle;
+  content: '';
+}
+%with-triangle-mask {
+  --icon-name: icon-triangle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/property-16.scss
new file mode 100644
index 0000000000..0a3f8c1f4c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-triangle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.978 1.515a2.101 2.101 0 012.807.731l.002.004 5.681 9.383a2.065 2.065 0 01-.751 2.832c-.314.183-.67.281-1.034.285H2.317a2.101 2.101 0 01-1.791-1.045 2.065 2.065 0 01.006-2.072l.006-.01L6.213 2.25l.002-.004c.187-.305.45-.557.763-.73zm.517 1.514l-.001.001-5.67 9.363a.565.565 0 00.214.776c.088.051.189.08.292.081h11.34a.601.601 0 00.504-.294.564.564 0 00.001-.563L8.506 3.03V3.03A.584.584 0 008 2.75a.601.601 0 00-.505.279z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/property-24.scss
new file mode 100644
index 0000000000..462d03d9df
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/triangle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-triangle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.658 2.366a2.651 2.651 0 012.684 0c.407.239.745.581.984.99l.002.004 8.315 14.46a2.86 2.86 0 01.008 2.758 2.757 2.757 0 01-.976 1.03c-.41.25-.877.386-1.357.392H3.682a2.653 2.653 0 01-1.357-.393 2.757 2.757 0 01-.975-1.029 2.86 2.86 0 01.007-2.758l.006-.01 8.31-14.45.001-.004a2.75 2.75 0 01.984-.99zm.313 1.744v.001L2.665 18.552a1.36 1.36 0 000 1.306c.108.198.262.36.443.47.18.11.382.169.586.172h16.61c.204-.003.406-.061.586-.172.181-.11.335-.272.444-.47a1.361 1.361 0 00-.001-1.306L13.03 4.112l-.001-.002a1.25 1.25 0 00-.446-.45 1.151 1.151 0 00-1.166 0 1.25 1.25 0 00-.446.45z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/truck/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/truck/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/truck/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/truck/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/truck/keyframes.scss
new file mode 100644
index 0000000000..a5c3e9f4b1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/truck/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-truck {
+  50% {
+
+    background-color: var(--icon-color, var(--color-truck-500, currentColor));
+    -webkit-mask-image: var(--icon-truck-24);
+    mask-image: var(--icon-truck-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-truck-500, currentColor));
+    -webkit-mask-image: var(--icon-truck-16);
+    mask-image: var(--icon-truck-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/truck/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/truck/placeholders.scss
new file mode 100644
index 0000000000..da1a7631e5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/truck/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-truck-icon {
+  --icon-name: icon-truck;
+  content: '';
+}
+%with-truck-mask {
+  --icon-name: icon-truck;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/truck/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/truck/property-16.scss
new file mode 100644
index 0000000000..75e3101851
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/truck/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-truck-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 3.25A2.25 2.25 0 012.25 1h7a2.25 2.25 0 012.25 2.25v.328h.643a2.25 2.25 0 011.565.634l1.608 1.557A2.25 2.25 0 0116 7.385v2.865A1.75 1.75 0 0114.292 12a2.5 2.5 0 11-4.584 0H6.292a2.5 2.5 0 11-4.584 0A1.75 1.75 0 010 10.25v-7zM12 12a1 1 0 100 2 1 1 0 000-2zm2.25-1.5a.25.25 0 00.25-.25V7.385a.75.75 0 00-.228-.538l-1.608-1.558a.75.75 0 00-.521-.211H11.5V10.5h2.75zm-4.25 0H1.75a.25.25 0 01-.25-.25v-7a.75.75 0 01.75-.75h7a.75.75 0 01.75.75v7.25zM3 13a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/truck/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/truck/property-24.scss
new file mode 100644
index 0000000000..c81927f895
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/truck/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-truck-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M0 4.75A2.75 2.75 0 012.75 2h11.5A2.75 2.75 0 0117 4.75V6h1.245c.74 0 1.447.297 1.965.825l3.004 3.067A2.75 2.75 0 0124 11.817v3.433A1.75 1.75 0 0122.25 17h-1.014a3 3 0 11-4.472 0H7.236a3 3 0 11-4.472 0H1.75A1.75 1.75 0 010 15.25V4.75zm15.5 0c0-.69-.56-1.25-1.25-1.25H2.75c-.69 0-1.25.56-1.25 1.25v10.5c0 .138.112.25.25.25H15.5V4.75zM17 15.5v-8h1.245c.336 0 .658.135.893.375l3.005 3.067c.229.233.357.547.357.874v3.434a.25.25 0 01-.25.25H17zm-12 2a1.5 1.5 0 100 3 1.5 1.5 0 000-3zM17.5 19a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tune/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tune/index.scss
new file mode 100644
index 0000000000..a6fb0e7c0c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tune/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../sliders/property-16';
+        @import '../sliders/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tune/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tune/keyframes.scss
new file mode 100644
index 0000000000..244e6aeb10
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tune/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-tune {
+  50% {
+
+    background-color: var(--icon-color, var(--color-tune-500, currentColor));
+    -webkit-mask-image: var(--icon-sliders-24);
+    mask-image: var(--icon-sliders-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-tune-500, currentColor));
+    -webkit-mask-image: var(--icon-sliders-16);
+    mask-image: var(--icon-sliders-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tune/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tune/placeholders.scss
new file mode 100644
index 0000000000..456043988b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tune/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-tune-icon {
+  --icon-name: icon-tune;
+  content: '';
+}
+%with-tune-mask {
+  --icon-name: icon-tune;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tv/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tv/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tv/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tv/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tv/keyframes.scss
new file mode 100644
index 0000000000..f88ee7c5ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tv/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-tv {
+  50% {
+
+    background-color: var(--icon-color, var(--color-tv-500, currentColor));
+    -webkit-mask-image: var(--icon-tv-24);
+    mask-image: var(--icon-tv-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-tv-500, currentColor));
+    -webkit-mask-image: var(--icon-tv-16);
+    mask-image: var(--icon-tv-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tv/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tv/placeholders.scss
new file mode 100644
index 0000000000..882cde1ecc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tv/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-tv-icon {
+  --icon-name: icon-tv;
+  content: '';
+}
+%with-tv-mask {
+  --icon-name: icon-tv;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tv/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tv/property-16.scss
new file mode 100644
index 0000000000..ce70717f46
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tv/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-tv-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M6.624.334a.75.75 0 00-1.248.832L6.599 3H2.25A2.25 2.25 0 000 5.25v7.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-7.5A2.25 2.25 0 0013.75 3H9.401l1.223-1.834A.75.75 0 109.376.334L8 2.398 6.624.334zM7.989 4.5a.798.798 0 00.022 0h5.739a.75.75 0 01.75.75v7.5a.75.75 0 01-.75.75H2.25a.75.75 0 01-.75-.75v-7.5a.75.75 0 01.75-.75h5.739z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/tv/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/tv/property-24.scss
new file mode 100644
index 0000000000..c2ef5f2dc3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/tv/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-tv-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M9.379 1.341a.75.75 0 10-1.258.818L10.618 6H3.75A2.75 2.75 0 001 8.75v11.5A2.75 2.75 0 003.75 23h16.5A2.75 2.75 0 0023 20.25V8.75A2.75 2.75 0 0020.25 6h-6.868l2.497-3.841a.75.75 0 00-1.258-.818L12 5.374 9.379 1.34zm2.61 6.159a.725.725 0 00.022 0h8.239c.69 0 1.25.56 1.25 1.25v11.5c0 .69-.56 1.25-1.25 1.25H3.75c-.69 0-1.25-.56-1.25-1.25V8.75c0-.69.56-1.25 1.25-1.25h8.239z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/keyframes.scss
new file mode 100644
index 0000000000..44f8a060d4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-twitch-color {
+  50% {
+    background-image: var(--icon-twitch-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-twitch-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/placeholders.scss
new file mode 100644
index 0000000000..b9ea4c5404
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-twitch-color-icon {
+  --icon-name: icon-twitch-color;
+  content: '';
+}
+%with-twitch-color-mask {
+  --icon-name: icon-twitch-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/property-16.scss
new file mode 100644
index 0000000000..13d187ee6f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-twitch-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23fff" d="M13 7.5l-2 2H9l-1.75 1.75V9.5H5V2h8v5.5z"/><g fill="%239146FF"><path d="M4.5 1L2 3.5v9h3V15l2.5-2.5h2L14 8V1H4.5zM13 7.5l-2 2H9l-1.75 1.75V9.5H5V2h8v5.5z"/><path d="M11.5 3.75h-1v3h1v-3zM8.75 3.75h-1v3h1v-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/property-24.scss
new file mode 100644
index 0000000000..f05bdfeadd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-twitch-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23fff" d="M19.857 11.214l-3.143 3.143h-3.143l-2.75 2.75v-2.75H7.286V2.571h12.571v8.643z"/><g fill="%239146FF"><path d="M6.5 1L2.57 4.929V19.07h4.715V23l3.928-3.929h3.143L21.428 12V1H6.5zm13.357 10.214l-3.143 3.143h-3.143l-2.75 2.75v-2.75H7.286V2.571h12.571v8.643z"/><path d="M17.5 5.321h-1.572v4.715H17.5V5.32zM13.178 5.321h-1.571v4.715h1.571V5.32z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/index.scss
new file mode 100644
index 0000000000..29a0b9df58
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../twitch-color/property-16';
+        @import '../twitch-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/keyframes.scss
new file mode 100644
index 0000000000..aa2998afce
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-twitch {
+  50% {
+
+    background-color: var(--icon-color, var(--color-twitch-500, currentColor));
+    -webkit-mask-image: var(--icon-twitch-color-24);
+    mask-image: var(--icon-twitch-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-twitch-500, currentColor));
+    -webkit-mask-image: var(--icon-twitch-color-16);
+    mask-image: var(--icon-twitch-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/placeholders.scss
new file mode 100644
index 0000000000..cdf826fbbe
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-twitch-icon {
+  --icon-name: icon-twitch;
+  content: '';
+}
+%with-twitch-mask {
+  --icon-name: icon-twitch;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/property-16.scss
new file mode 100644
index 0000000000..b099a61f0f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-twitch-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.5 1L2 3.5v9h3V15l2.5-2.5h2L14 8V1H4.5zM13 7.5l-2 2H9l-1.75 1.75V9.5H5V2h8v5.5z"/><path d="M11.5 3.75h-1v3h1v-3zM8.75 3.75h-1v3h1v-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/property-24.scss
new file mode 100644
index 0000000000..5754897e3e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitch/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-twitch-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.5 1L2 3.5v9h3V15l2.5-2.5h2L14 8V1H4.5zM13 7.5l-2 2H9l-1.75 1.75V9.5H5V2h8v5.5z"/><path d="M11.5 3.75h-1v3h1v-3zM8.75 3.75h-1v3h1v-3z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/keyframes.scss
new file mode 100644
index 0000000000..a3b0fa2c4e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-twitter-color {
+  50% {
+    background-image: var(--icon-twitter-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-twitter-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/placeholders.scss
new file mode 100644
index 0000000000..005575bda1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-twitter-color-icon {
+  --icon-name: icon-twitter-color;
+  content: '';
+}
+%with-twitter-color-mask {
+  --icon-name: icon-twitter-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/property-16.scss
new file mode 100644
index 0000000000..a4747576e4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-twitter-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%231D9BF0" d="M13.567 5.144c.008.123.008.247.008.371 0 3.796-2.889 8.173-8.172 8.173v-.002A8.131 8.131 0 011 12.398a5.768 5.768 0 004.25-1.19 2.876 2.876 0 01-2.683-1.995c.431.083.875.066 1.297-.05A2.873 2.873 0 011.56 6.348v-.036c.4.222.847.345 1.304.36a2.876 2.876 0 01-.89-3.836 8.152 8.152 0 005.92 3 2.874 2.874 0 014.895-2.619 5.763 5.763 0 001.824-.697 2.883 2.883 0 01-1.262 1.588A5.712 5.712 0 0015 3.656a5.834 5.834 0 01-1.433 1.488z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/property-24.scss
new file mode 100644
index 0000000000..48684a1d4b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-twitter-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%231D9BF0" d="M20.748 7.512c.013.194.013.388.013.584 0 5.964-4.54 12.842-12.842 12.842v-.003A12.777 12.777 0 011 18.91a9.063 9.063 0 006.68-1.87 4.52 4.52 0 01-4.217-3.135 4.5 4.5 0 002.038-.078 4.514 4.514 0 01-3.62-4.424v-.057c.627.35 1.33.543 2.048.565a4.52 4.52 0 01-1.397-6.027 12.81 12.81 0 009.302 4.716 4.518 4.518 0 017.692-4.117c1.01-.2 1.98-.57 2.866-1.096a4.53 4.53 0 01-1.984 2.497A8.977 8.977 0 0023 5.174a9.169 9.169 0 01-2.252 2.338z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/index.scss
new file mode 100644
index 0000000000..91f8567ed2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../twitter-color/property-16';
+        @import '../twitter-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/keyframes.scss
new file mode 100644
index 0000000000..5c4420fc1b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-twitter {
+  50% {
+
+    background-color: var(--icon-color, var(--color-twitter-500, currentColor));
+    -webkit-mask-image: var(--icon-twitter-color-24);
+    mask-image: var(--icon-twitter-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-twitter-500, currentColor));
+    -webkit-mask-image: var(--icon-twitter-color-16);
+    mask-image: var(--icon-twitter-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/placeholders.scss
new file mode 100644
index 0000000000..7133f564fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-twitter-icon {
+  --icon-name: icon-twitter;
+  content: '';
+}
+%with-twitter-mask {
+  --icon-name: icon-twitter;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/property-16.scss
new file mode 100644
index 0000000000..3f11fd0dc3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-twitter-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.567 5.144c.008.123.008.247.008.371 0 3.796-2.889 8.173-8.172 8.173v-.002A8.131 8.131 0 011 12.398a5.768 5.768 0 004.25-1.19 2.876 2.876 0 01-2.683-1.995c.431.083.875.066 1.297-.05A2.873 2.873 0 011.56 6.348v-.036c.4.222.847.345 1.304.36a2.876 2.876 0 01-.89-3.836 8.152 8.152 0 005.92 3 2.874 2.874 0 014.895-2.619 5.763 5.763 0 001.824-.697 2.883 2.883 0 01-1.262 1.588A5.712 5.712 0 0015 3.656a5.834 5.834 0 01-1.433 1.488z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/property-24.scss
new file mode 100644
index 0000000000..17eadff7bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/twitter/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-twitter-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.567 5.144c.008.123.008.247.008.371 0 3.796-2.889 8.173-8.172 8.173v-.002A8.131 8.131 0 011 12.398a5.768 5.768 0 004.25-1.19 2.876 2.876 0 01-2.683-1.995c.431.083.875.066 1.297-.05A2.873 2.873 0 011.56 6.348v-.036c.4.222.847.345 1.304.36a2.876 2.876 0 01-.89-3.836 8.152 8.152 0 005.92 3 2.874 2.874 0 014.895-2.619 5.763 5.763 0 001.824-.697 2.883 2.883 0 01-1.262 1.588A5.712 5.712 0 0015 3.656a5.834 5.834 0 01-1.433 1.488z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/type/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/type/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/type/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/type/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/type/keyframes.scss
new file mode 100644
index 0000000000..5d206c5abc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/type/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-type {
+  50% {
+
+    background-color: var(--icon-color, var(--color-type-500, currentColor));
+    -webkit-mask-image: var(--icon-type-24);
+    mask-image: var(--icon-type-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-type-500, currentColor));
+    -webkit-mask-image: var(--icon-type-16);
+    mask-image: var(--icon-type-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/type/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/type/placeholders.scss
new file mode 100644
index 0000000000..300e2bbba4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/type/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-type-icon {
+  --icon-name: icon-type;
+  content: '';
+}
+%with-type-mask {
+  --icon-name: icon-type;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/type/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/type/property-16.scss
new file mode 100644
index 0000000000..fc636a895d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/type/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-type-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M2 2.75A.75.75 0 012.75 2h10a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V3.5H8.5v9H10a.75.75 0 010 1.5H5.5a.75.75 0 010-1.5H7v-9H3.5v.75a.75.75 0 01-1.5 0v-1.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/type/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/type/property-24.scss
new file mode 100644
index 0000000000..84fb73a4bd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/type/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-type-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M3 3.75A.75.75 0 013.75 3h16a.75.75 0 01.75.75v2.5a.75.75 0 01-1.5 0V4.5h-6.5v15h2a.75.75 0 010 1.5H9a.75.75 0 010-1.5h2v-15H4.5v1.75a.75.75 0 01-1.5 0v-2.5z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/keyframes.scss
new file mode 100644
index 0000000000..52cf4b128e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-unfold-close {
+  50% {
+
+    background-color: var(--icon-color, var(--color-unfold-close-500, currentColor));
+    -webkit-mask-image: var(--icon-unfold-close-24);
+    mask-image: var(--icon-unfold-close-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-unfold-close-500, currentColor));
+    -webkit-mask-image: var(--icon-unfold-close-16);
+    mask-image: var(--icon-unfold-close-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/placeholders.scss
new file mode 100644
index 0000000000..79dfd8e1ad
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-unfold-close-icon {
+  --icon-name: icon-unfold-close;
+  content: '';
+}
+%with-unfold-close-mask {
+  --icon-name: icon-unfold-close;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/property-16.scss
new file mode 100644
index 0000000000..a964068259
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-unfold-close-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 6a.75.75 0 00.55-.24l3.25-3.5a.75.75 0 10-1.1-1.02L8 4.148 5.3 1.24a.75.75 0 00-1.1 1.02l3.25 3.5A.75.75 0 008 6zM8 10a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L8 11.852 5.3 14.76a.75.75 0 11-1.1-1.02l3.25-3.5A.75.75 0 018 10zM1.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM4.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM7.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM10.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5zM13.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/property-24.scss
new file mode 100644
index 0000000000..da681af8fd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-close/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-unfold-close-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 9a.75.75 0 00.543-.232l5.25-5.5a.75.75 0 10-1.085-1.036L12 7.164 7.293 2.232a.75.75 0 00-1.086 1.036l5.25 5.5A.75.75 0 0012 9zM12 15a.75.75 0 01.543.232l5.25 5.5a.75.75 0 01-1.085 1.036L12 16.836l-4.707 4.932a.75.75 0 01-1.086-1.036l5.25-5.5A.75.75 0 0112 15zM1.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM11.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM16.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM21.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/index.scss
new file mode 100644
index 0000000000..98ee12ab8b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../unfold-close/property-16';
+        @import '../unfold-close/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/keyframes.scss
new file mode 100644
index 0000000000..803bef666f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-unfold-less {
+  50% {
+
+    background-color: var(--icon-color, var(--color-unfold-less-500, currentColor));
+    -webkit-mask-image: var(--icon-unfold-close-24);
+    mask-image: var(--icon-unfold-close-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-unfold-less-500, currentColor));
+    -webkit-mask-image: var(--icon-unfold-close-16);
+    mask-image: var(--icon-unfold-close-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/placeholders.scss
new file mode 100644
index 0000000000..3f445c9431
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-less/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-unfold-less-icon {
+  --icon-name: icon-unfold-less;
+  content: '';
+}
+%with-unfold-less-mask {
+  --icon-name: icon-unfold-less;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/index.scss
new file mode 100644
index 0000000000..8f7197cd26
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../unfold-open/property-16';
+        @import '../unfold-open/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/keyframes.scss
new file mode 100644
index 0000000000..4866551af8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-unfold-more {
+  50% {
+
+    background-color: var(--icon-color, var(--color-unfold-more-500, currentColor));
+    -webkit-mask-image: var(--icon-unfold-open-24);
+    mask-image: var(--icon-unfold-open-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-unfold-more-500, currentColor));
+    -webkit-mask-image: var(--icon-unfold-open-16);
+    mask-image: var(--icon-unfold-open-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/placeholders.scss
new file mode 100644
index 0000000000..75d5c428a8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-more/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-unfold-more-icon {
+  --icon-name: icon-unfold-more;
+  content: '';
+}
+%with-unfold-more-mask {
+  --icon-name: icon-unfold-more;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/keyframes.scss
new file mode 100644
index 0000000000..8352b6e98a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-unfold-open {
+  50% {
+
+    background-color: var(--icon-color, var(--color-unfold-open-500, currentColor));
+    -webkit-mask-image: var(--icon-unfold-open-24);
+    mask-image: var(--icon-unfold-open-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-unfold-open-500, currentColor));
+    -webkit-mask-image: var(--icon-unfold-open-16);
+    mask-image: var(--icon-unfold-open-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/placeholders.scss
new file mode 100644
index 0000000000..7ebf83314e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-unfold-open-icon {
+  --icon-name: icon-unfold-open;
+  content: '';
+}
+%with-unfold-open-mask {
+  --icon-name: icon-unfold-open;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/property-16.scss
new file mode 100644
index 0000000000..7d5766d6e9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-unfold-open-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M8 1a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L8 2.852 5.3 5.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 018 1zM8 15a.75.75 0 00.55-.24l3.25-3.5a.75.75 0 10-1.1-1.02L8 13.148 5.3 10.24a.75.75 0 10-1.1 1.02l3.25 3.5A.75.75 0 008 15zM1.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM4.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM7.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM10.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5zM13.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/property-24.scss
new file mode 100644
index 0000000000..5f821862dc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unfold-open/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-unfold-open-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12 2a.75.75 0 01.543.232l5.25 5.5a.75.75 0 11-1.085 1.036L12 3.836 7.293 8.768a.75.75 0 01-1.086-1.036l5.25-5.5A.75.75 0 0112 2zM12 22a.75.75 0 00.543-.232l5.25-5.5a.75.75 0 00-1.085-1.036L12 20.164l-4.707-4.932a.75.75 0 00-1.086 1.036l5.25 5.5A.75.75 0 0012 22zM1.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM11.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM16.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM21.25 11a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/union/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/union/index.scss
new file mode 100644
index 0000000000..86cee0b297
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/union/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/union/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/union/keyframes.scss
new file mode 100644
index 0000000000..d6983937a5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/union/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-union {
+  50% {
+
+    background-color: var(--icon-color, var(--color-union-500, currentColor));
+    -webkit-mask-image: var(--icon-union-24);
+    mask-image: var(--icon-union-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-union-500, currentColor));
+    -webkit-mask-image: var(--icon-union-16);
+    mask-image: var(--icon-union-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/union/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/union/placeholders.scss
new file mode 100644
index 0000000000..720c7ac2d9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/union/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-union-icon {
+  --icon-name: icon-union;
+  content: '';
+}
+%with-union-mask {
+  --icon-name: icon-union;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/union/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/union/property-16.scss
new file mode 100644
index 0000000000..82f03053e7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/union/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-union-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V9V10H1H9V9H1L1 0H0Z" fill="%23000"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/union/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/union/property-24.scss
new file mode 100644
index 0000000000..4132651eea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/union/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-union-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V9V10H1H9V9H1L1 0H0Z" fill="%23000"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/keyframes.scss
new file mode 100644
index 0000000000..e7f6470900
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-unlock {
+  50% {
+
+    background-color: var(--icon-color, var(--color-unlock-500, currentColor));
+    -webkit-mask-image: var(--icon-unlock-24);
+    mask-image: var(--icon-unlock-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-unlock-500, currentColor));
+    -webkit-mask-image: var(--icon-unlock-16);
+    mask-image: var(--icon-unlock-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/placeholders.scss
new file mode 100644
index 0000000000..e26ad30367
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-unlock-icon {
+  --icon-name: icon-unlock;
+  content: '';
+}
+%with-unlock-mask {
+  --icon-name: icon-unlock;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/property-16.scss
new file mode 100644
index 0000000000..b780689a04
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-unlock-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.239 2.25A2.46 2.46 0 0112 1.5c.657 0 1.29.267 1.761.75.471.483.739 1.142.739 1.833a.75.75 0 001.5 0 4.127 4.127 0 00-1.165-2.88A3.96 3.96 0 0012 0a3.96 3.96 0 00-2.835 1.203A4.127 4.127 0 008 4.083V5H2.25A2.25 2.25 0 000 7.25v5.5A2.25 2.25 0 002.25 15h7.5A2.25 2.25 0 0012 12.75v-5.5A2.25 2.25 0 009.75 5H9.5v-.917c0-.69.268-1.35.739-1.833zm-8.739 5a.75.75 0 01.75-.75h7.5a.75.75 0 01.75.75v5.5a.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75v-5.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/property-24.scss
new file mode 100644
index 0000000000..9fb7b8a2d3
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/unlock/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-unlock-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M14.805 3.758A4.636 4.636 0 0118 2.5c1.205 0 2.354.456 3.195 1.258.84.8 1.305 1.877 1.305 2.992a.75.75 0 001.5 0 5.632 5.632 0 00-1.77-4.079A6.136 6.136 0 0018 1c-1.58 0-3.102.597-4.23 1.671A5.632 5.632 0 0012 6.75V10H3.75A2.75 2.75 0 001 12.75v7.5A2.75 2.75 0 003.75 23h10.5A2.75 2.75 0 0017 20.25v-7.5A2.75 2.75 0 0014.25 10h-.75V6.75c0-1.115.465-2.192 1.305-2.992zM3.75 11.5c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-7.5c0-.69-.56-1.25-1.25-1.25H3.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/upload/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/upload/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/upload/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/upload/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/upload/keyframes.scss
new file mode 100644
index 0000000000..a0f538df79
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/upload/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-upload {
+  50% {
+
+    background-color: var(--icon-color, var(--color-upload-500, currentColor));
+    -webkit-mask-image: var(--icon-upload-24);
+    mask-image: var(--icon-upload-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-upload-500, currentColor));
+    -webkit-mask-image: var(--icon-upload-16);
+    mask-image: var(--icon-upload-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/upload/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/upload/placeholders.scss
new file mode 100644
index 0000000000..9bbff7d2be
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/upload/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-upload-icon {
+  --icon-name: icon-upload;
+  content: '';
+}
+%with-upload-mask {
+  --icon-name: icon-upload;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/upload/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/upload/property-16.scss
new file mode 100644
index 0000000000..2dde6667f8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/upload/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-upload-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z"/><path d="M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/upload/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/upload/property-24.scss
new file mode 100644
index 0000000000..a6fbdfd656
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/upload/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-upload-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M6.232 8.793a.75.75 0 001.06-.025l3.958-4.146V15.25a.75.75 0 001.5 0V4.622l3.957 4.146a.75.75 0 001.085-1.036l-5.25-5.5a.747.747 0 00-1.086.001l-5.249 5.5a.75.75 0 00.025 1.06z"/><path d="M2.75 14a.75.75 0 01.75.75v4.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25v-4.5a.75.75 0 011.5 0v4.5A2.75 2.75 0 0119.25 22H4.75A2.75 2.75 0 012 19.25v-4.5a.75.75 0 01.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-add/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-add/index.scss
new file mode 100644
index 0000000000..da4d685328
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-add/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../user-plus/property-16';
+        @import '../user-plus/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-add/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-add/keyframes.scss
new file mode 100644
index 0000000000..639ce01fb0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-add/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-add {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-add-500, currentColor));
+    -webkit-mask-image: var(--icon-user-plus-24);
+    mask-image: var(--icon-user-plus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-add-500, currentColor));
+    -webkit-mask-image: var(--icon-user-plus-16);
+    mask-image: var(--icon-user-plus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-add/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-add/placeholders.scss
new file mode 100644
index 0000000000..591fa5b56c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-add/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-add-icon {
+  --icon-name: icon-user-add;
+  content: '';
+}
+%with-user-add-mask {
+  --icon-name: icon-user-add;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/keyframes.scss
new file mode 100644
index 0000000000..89ed5610c4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-check {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-check-500, currentColor));
+    -webkit-mask-image: var(--icon-user-check-24);
+    mask-image: var(--icon-user-check-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-check-500, currentColor));
+    -webkit-mask-image: var(--icon-user-check-16);
+    mask-image: var(--icon-user-check-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/placeholders.scss
new file mode 100644
index 0000000000..83c8ad649e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-check-icon {
+  --icon-name: icon-user-check;
+  content: '';
+}
+%with-user-check-mask {
+  --icon-name: icon-user-check;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/property-16.scss
new file mode 100644
index 0000000000..b77ef8de3d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-check-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM4 5.5a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/><path d="M4.25 10A3.75 3.75 0 00.5 13.75v.5a.75.75 0 001.5 0v-.5a2.25 2.25 0 012.25-2.25h3.5A2.25 2.25 0 0110 13.75v.5a.75.75 0 001.5 0v-.5A3.75 3.75 0 007.75 10h-3.5zM14.78 6.22a.75.75 0 010 1.06l-2.5 2.5a.75.75 0 01-1.06 0l-1-1a.75.75 0 111.06-1.06l.47.47 1.97-1.97a.75.75 0 011.06 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/property-24.scss
new file mode 100644
index 0000000000..4caee58c1c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-check/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-check-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M9 3a5 5 0 100 10A5 5 0 009 3zM5.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"/><path d="M4.75 14.5A4.75 4.75 0 000 19.25v1a.75.75 0 001.5 0v-1A3.25 3.25 0 014.75 16h8.5a3.25 3.25 0 013.25 3.25v1a.75.75 0 001.5 0v-1a4.75 4.75 0 00-4.75-4.75h-8.5zM23.28 8.72a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0l-2-2a.75.75 0 111.06-1.06l1.47 1.47 3.47-3.47a.75.75 0 011.06 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/keyframes.scss
new file mode 100644
index 0000000000..5dfcc44e41
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-user-circle-fill-24);
+    mask-image: var(--icon-user-circle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-user-circle-fill-16);
+    mask-image: var(--icon-user-circle-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/placeholders.scss
new file mode 100644
index 0000000000..ffde65ecd9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-circle-fill-icon {
+  --icon-name: icon-user-circle-fill;
+  content: '';
+}
+%with-user-circle-fill-mask {
+  --icon-name: icon-user-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/property-16.scss
new file mode 100644
index 0000000000..d10ab28c69
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-circle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M.25 8a7.75 7.75 0 1115.5 0A7.75 7.75 0 01.25 8zm3.19 1.833A3.24 3.24 0 015.624 9h4.75a3.24 3.24 0 012.186.833c.528.484.939 1.048.939 1.917a.75.75 0 01-1.5 0c0-.284-.09-.478-.452-.81-.3-.275-.722-.44-1.173-.44h-4.75c-.451 0-.872.165-1.173.44-.363.332-.452.526-.452.81a.75.75 0 01-1.5 0c0-.869.411-1.433.94-1.917zM6.5 5a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM8 2a3 3 0 100 6 3 3 0 000-6z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/property-24.scss
new file mode 100644
index 0000000000..7044286781
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-circle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M.25 12C.25 5.51 5.51.25 12 .25S23.75 5.51 23.75 12 18.49 23.75 12 23.75.25 18.49.25 12zM4 18a4 4 0 014-4h8a4 4 0 014 4v.25a.75.75 0 01-1.5 0V18a2.5 2.5 0 00-2.5-2.5H8A2.5 2.5 0 005.5 18v.25a.75.75 0 01-1.5 0V18zM9 8a3 3 0 116 0 3 3 0 01-6 0zm3-4.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/keyframes.scss
new file mode 100644
index 0000000000..d1e0c7d892
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-user-circle-24);
+    mask-image: var(--icon-user-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-user-circle-16);
+    mask-image: var(--icon-user-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/placeholders.scss
new file mode 100644
index 0000000000..178c03edb9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-circle-icon {
+  --icon-name: icon-user-circle;
+  content: '';
+}
+%with-user-circle-mask {
+  --icon-name: icon-user-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/property-16.scss
new file mode 100644
index 0000000000..6e6ebff60b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M8 3a3 3 0 100 6 3 3 0 000-6zM6.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"/><path d="M.25 8a7.75 7.75 0 1115.5 0A7.75 7.75 0 01.25 8zM8 1.75a6.25 6.25 0 00-5.274 9.604c.15-.194.325-.369.514-.533C3.855 10.286 4.67 10 5.5 10h5c.83 0 1.645.286 2.26.82.189.165.365.34.514.534A6.25 6.25 0 008 1.75zm0 12.5a6.228 6.228 0 01-4.238-1.656c.035-.196.153-.372.462-.641.323-.281.78-.453 1.276-.453h5c.495 0 .953.172 1.276.453.31.269.427.445.462.641A6.228 6.228 0 018 14.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/property-24.scss
new file mode 100644
index 0000000000..b7808ad1d6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 4.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9zM9 9a3 3 0 116 0 3 3 0 01-6 0z"/><path d="M.25 12C.25 5.51 5.51.25 12 .25S23.75 5.51 23.75 12 18.49 23.75 12 23.75.25 18.49.25 12zM12 1.75C6.34 1.75 1.75 6.34 1.75 12c0 2.298.756 4.42 2.034 6.13A4.752 4.752 0 018.25 15h7.5a4.752 4.752 0 014.466 3.13A10.204 10.204 0 0022.25 12c0-5.66-4.59-10.25-10.25-10.25zm0 20.5c-2.702 0-5.16-1.045-6.99-2.753A3.25 3.25 0 018.25 16.5h7.5a3.25 3.25 0 013.24 2.997A10.214 10.214 0 0112 22.25z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/keyframes.scss
new file mode 100644
index 0000000000..5c9e91b405
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-minus {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-minus-500, currentColor));
+    -webkit-mask-image: var(--icon-user-minus-24);
+    mask-image: var(--icon-user-minus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-minus-500, currentColor));
+    -webkit-mask-image: var(--icon-user-minus-16);
+    mask-image: var(--icon-user-minus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/placeholders.scss
new file mode 100644
index 0000000000..2421921cc2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-minus-icon {
+  --icon-name: icon-user-minus;
+  content: '';
+}
+%with-user-minus-mask {
+  --icon-name: icon-user-minus;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/property-16.scss
new file mode 100644
index 0000000000..07964042b0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-minus-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M2.5 5.5a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0zm3.5-2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd"/><path d="M.5 13.75A3.75 3.75 0 014.25 10h3.5a3.75 3.75 0 013.75 3.75v.5a.75.75 0 01-1.5 0v-.5a2.25 2.25 0 00-2.25-2.25h-3.5A2.25 2.25 0 002 13.75v.5a.75.75 0 01-1.5 0v-.5zM11.25 7.5a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/property-24.scss
new file mode 100644
index 0000000000..b3c4017a13
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-minus/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-minus-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M4 8a5 5 0 1110 0A5 5 0 014 8zm5-3.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z" clip-rule="evenodd"/><path d="M0 19.25a4.75 4.75 0 014.75-4.75h8.5A4.75 4.75 0 0118 19.25v1a.75.75 0 01-1.5 0v-1A3.25 3.25 0 0013.25 16h-8.5a3.25 3.25 0 00-3.25 3.25v1a.75.75 0 01-1.5 0v-1zM16.75 10.5a.75.75 0 000 1.5h5.5a.75.75 0 000-1.5h-5.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/index.scss
new file mode 100644
index 0000000000..a495242b2c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../org/property-16';
+        @import '../org/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/keyframes.scss
new file mode 100644
index 0000000000..8259ce00c1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-organization {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-organization-500, currentColor));
+    -webkit-mask-image: var(--icon-org-24);
+    mask-image: var(--icon-org-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-organization-500, currentColor));
+    -webkit-mask-image: var(--icon-org-16);
+    mask-image: var(--icon-org-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/placeholders.scss
new file mode 100644
index 0000000000..d7adee2c13
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-organization/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-organization-icon {
+  --icon-name: icon-user-organization;
+  content: '';
+}
+%with-user-organization-mask {
+  --icon-name: icon-user-organization;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/index.scss
new file mode 100644
index 0000000000..ee91b678f6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../user/property-16';
+        @import '../user/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/keyframes.scss
new file mode 100644
index 0000000000..1944c1188f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-plain {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-user-24);
+    mask-image: var(--icon-user-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-plain-500, currentColor));
+    -webkit-mask-image: var(--icon-user-16);
+    mask-image: var(--icon-user-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/placeholders.scss
new file mode 100644
index 0000000000..3175e6b3bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plain/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-plain-icon {
+  --icon-name: icon-user-plain;
+  content: '';
+}
+%with-user-plain-mask {
+  --icon-name: icon-user-plain;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/keyframes.scss
new file mode 100644
index 0000000000..fc30d22293
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-plus {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-plus-500, currentColor));
+    -webkit-mask-image: var(--icon-user-plus-24);
+    mask-image: var(--icon-user-plus-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-plus-500, currentColor));
+    -webkit-mask-image: var(--icon-user-plus-16);
+    mask-image: var(--icon-user-plus-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/placeholders.scss
new file mode 100644
index 0000000000..0d5b59187f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-plus-icon {
+  --icon-name: icon-user-plus;
+  content: '';
+}
+%with-user-plus-mask {
+  --icon-name: icon-user-plus;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/property-16.scss
new file mode 100644
index 0000000000..135e0ea591
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-plus-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM4 5.5a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/><path d="M4.25 10A3.75 3.75 0 00.5 13.75v.5a.75.75 0 001.5 0v-.5a2.25 2.25 0 012.25-2.25h3.5A2.25 2.25 0 0110 13.75v.5a.75.75 0 001.5 0v-.5A3.75 3.75 0 007.75 10h-3.5zM10.25 8.25A.75.75 0 0111 7.5h1v-1a.75.75 0 011.5 0v1h1a.75.75 0 010 1.5h-1v1a.75.75 0 01-1.5 0V9h-1a.75.75 0 01-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/property-24.scss
new file mode 100644
index 0000000000..01ae6992ab
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-plus/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-plus-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M9 3a5 5 0 100 10A5 5 0 009 3zM5.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"/><path d="M4.75 14.5A4.75 4.75 0 000 19.25v1a.75.75 0 001.5 0v-1A3.25 3.25 0 014.75 16h8.5a3.25 3.25 0 013.25 3.25v1a.75.75 0 001.5 0v-1a4.75 4.75 0 00-4.75-4.75h-8.5zM15.75 11.25a.75.75 0 01.75-.75h2v-2a.75.75 0 011.5 0v2h2a.75.75 0 010 1.5h-2v2a.75.75 0 01-1.5 0v-2h-2a.75.75 0 01-.75-.75z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/index.scss
new file mode 100644
index 0000000000..f8e20e521f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../user-circle-fill/property-16';
+        @import '../user-circle-fill/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/keyframes.scss
new file mode 100644
index 0000000000..78df810113
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-square-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-user-circle-fill-24);
+    mask-image: var(--icon-user-circle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-user-circle-fill-16);
+    mask-image: var(--icon-user-circle-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/placeholders.scss
new file mode 100644
index 0000000000..c6759d1217
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-square-fill-icon {
+  --icon-name: icon-user-square-fill;
+  content: '';
+}
+%with-user-square-fill-mask {
+  --icon-name: icon-user-square-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/index.scss
new file mode 100644
index 0000000000..be53f56f29
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../user-circle/property-16';
+        @import '../user-circle/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/keyframes.scss
new file mode 100644
index 0000000000..872d075130
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-square-outline {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-square-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-user-circle-24);
+    mask-image: var(--icon-user-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-square-outline-500, currentColor));
+    -webkit-mask-image: var(--icon-user-circle-16);
+    mask-image: var(--icon-user-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/placeholders.scss
new file mode 100644
index 0000000000..f91456d85e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-square-outline/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-square-outline-icon {
+  --icon-name: icon-user-square-outline;
+  content: '';
+}
+%with-user-square-outline-mask {
+  --icon-name: icon-user-square-outline;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-team/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-team/index.scss
new file mode 100644
index 0000000000..4cf95abc6f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-team/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../users/property-16';
+        @import '../users/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-team/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-team/keyframes.scss
new file mode 100644
index 0000000000..e2d7697bf8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-team/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-team {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-team-500, currentColor));
+    -webkit-mask-image: var(--icon-users-24);
+    mask-image: var(--icon-users-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-team-500, currentColor));
+    -webkit-mask-image: var(--icon-users-16);
+    mask-image: var(--icon-users-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-team/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-team/placeholders.scss
new file mode 100644
index 0000000000..ad625e5de8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-team/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-team-icon {
+  --icon-name: icon-user-team;
+  content: '';
+}
+%with-user-team-mask {
+  --icon-name: icon-user-team;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/keyframes.scss
new file mode 100644
index 0000000000..f81a048051
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user-x {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-x-500, currentColor));
+    -webkit-mask-image: var(--icon-user-x-24);
+    mask-image: var(--icon-user-x-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-x-500, currentColor));
+    -webkit-mask-image: var(--icon-user-x-16);
+    mask-image: var(--icon-user-x-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/placeholders.scss
new file mode 100644
index 0000000000..97a542ee68
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-x-icon {
+  --icon-name: icon-user-x;
+  content: '';
+}
+%with-user-x-mask {
+  --icon-name: icon-user-x;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/property-16.scss
new file mode 100644
index 0000000000..b385b82e8c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-x-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM4 5.5a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/><path d="M4.25 10A3.75 3.75 0 00.5 13.75v.5a.75.75 0 001.5 0v-.5a2.25 2.25 0 012.25-2.25h3.5A2.25 2.25 0 0110 13.75v.5a.75.75 0 001.5 0v-.5A3.75 3.75 0 007.75 10h-3.5zM11.22 5.22a.75.75 0 011.06 0l1.22 1.22 1.22-1.22a.75.75 0 111.06 1.06L14.56 7.5l1.22 1.22a.75.75 0 01-1.06 1.06L13.5 8.56l-1.22 1.22a.75.75 0 11-1.06-1.06l1.22-1.22-1.22-1.22a.75.75 0 010-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/property-24.scss
new file mode 100644
index 0000000000..396b52b59c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user-x/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-x-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M9 3a5 5 0 100 10A5 5 0 009 3zM5.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"/><path d="M4.75 14.5A4.75 4.75 0 000 19.25v1a.75.75 0 001.5 0v-1A3.25 3.25 0 014.75 16h8.5a3.25 3.25 0 013.25 3.25v1a.75.75 0 001.5 0v-1a4.75 4.75 0 00-4.75-4.75h-8.5zM16.22 8.22a.75.75 0 011.06 0L19 9.94l1.72-1.72a.75.75 0 111.06 1.06L20.06 11l1.72 1.72a.75.75 0 11-1.06 1.06L19 12.06l-1.72 1.72a.75.75 0 11-1.06-1.06L17.94 11l-1.72-1.72a.75.75 0 010-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user/keyframes.scss
new file mode 100644
index 0000000000..5cd993f6d0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-user {
+  50% {
+
+    background-color: var(--icon-color, var(--color-user-500, currentColor));
+    -webkit-mask-image: var(--icon-user-24);
+    mask-image: var(--icon-user-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-user-500, currentColor));
+    -webkit-mask-image: var(--icon-user-16);
+    mask-image: var(--icon-user-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user/placeholders.scss
new file mode 100644
index 0000000000..94309b12f6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-user-icon {
+  --icon-name: icon-user;
+  content: '';
+}
+%with-user-mask {
+  --icon-name: icon-user;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user/property-16.scss
new file mode 100644
index 0000000000..f37c8eab8e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M8 1a4 4 0 100 8 4 4 0 000-8zM5.5 5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z" clip-rule="evenodd"/><path d="M5.25 10a3.75 3.75 0 00-3.75 3.75v.5a.75.75 0 001.5 0v-.5a2.25 2.25 0 012.25-2.25h5.5A2.25 2.25 0 0113 13.75v.5a.75.75 0 001.5 0v-.5A3.75 3.75 0 0010.75 10h-5.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/user/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/user/property-24.scss
new file mode 100644
index 0000000000..9f49da4829
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/user/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-user-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M12 3a5 5 0 100 10 5 5 0 000-10zM8.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"/><path d="M7.75 14.5A4.75 4.75 0 003 19.25v1a.75.75 0 001.5 0v-1A3.25 3.25 0 017.75 16h8.5a3.25 3.25 0 013.25 3.25v1a.75.75 0 001.5 0v-1a4.75 4.75 0 00-4.75-4.75h-8.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/users/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/users/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/users/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/users/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/users/keyframes.scss
new file mode 100644
index 0000000000..4ae16d5b83
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/users/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-users {
+  50% {
+
+    background-color: var(--icon-color, var(--color-users-500, currentColor));
+    -webkit-mask-image: var(--icon-users-24);
+    mask-image: var(--icon-users-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-users-500, currentColor));
+    -webkit-mask-image: var(--icon-users-16);
+    mask-image: var(--icon-users-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/users/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/users/placeholders.scss
new file mode 100644
index 0000000000..8a1be0c949
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/users/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-users-icon {
+  --icon-name: icon-users;
+  content: '';
+}
+%with-users-mask {
+  --icon-name: icon-users;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/users/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/users/property-16.scss
new file mode 100644
index 0000000000..eb1fa791d9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/users/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-users-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6 2a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM4 5.5a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"/><path d="M4.25 10A3.75 3.75 0 00.5 13.75v.5a.75.75 0 001.5 0v-.5a2.25 2.25 0 012.25-2.25h3.5A2.25 2.25 0 0110 13.75v.5a.75.75 0 001.5 0v-.5A3.75 3.75 0 007.75 10h-3.5zM11.25 10.75A.75.75 0 0112 10h.25a3.25 3.25 0 013.25 3.25v1a.75.75 0 01-1.5 0v-1a1.75 1.75 0 00-1.75-1.75H12a.75.75 0 01-.75-.75zM11.273 2.24a.75.75 0 00-.546 1.396 2.001 2.001 0 010 3.728.75.75 0 00.546 1.397 3.501 3.501 0 000-6.522z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/users/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/users/property-24.scss
new file mode 100644
index 0000000000..a544f22b84
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/users/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-users-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M9 3a5 5 0 100 10A5 5 0 009 3zM5.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"/><path d="M4.75 14.5A4.75 4.75 0 000 19.25v1a.75.75 0 001.5 0v-1A3.25 3.25 0 014.75 16h8.5a3.25 3.25 0 013.25 3.25v1a.75.75 0 001.5 0v-1a4.75 4.75 0 00-4.75-4.75h-8.5zM18.25 15.25a.75.75 0 01.75-.75h.25A4.75 4.75 0 0124 19.25v1a.75.75 0 01-1.5 0v-1A3.25 3.25 0 0019.25 16H19a.75.75 0 01-.75-.75zM15 3a.75.75 0 000 1.5 3.5 3.5 0 110 7 .75.75 0 000 1.5 5 5 0 000-10z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/keyframes.scss
new file mode 100644
index 0000000000..0f9dc999c9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-vagrant-color {
+  50% {
+    background-image: var(--icon-vagrant-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-vagrant-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/placeholders.scss
new file mode 100644
index 0000000000..a30737c69d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-vagrant-color-icon {
+  --icon-name: icon-vagrant-color;
+  content: '';
+}
+%with-vagrant-color-mask {
+  --icon-name: icon-vagrant-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/property-16.scss
new file mode 100644
index 0000000000..7bf5cadb2f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vagrant-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%231868F2" d="M13.08.75L9.924 2.58v1.123L8 8.245 6.076 3.703V2.58L2.92.75 1 1.864v1.293l4.276 10.514L8 15.25l2.724-1.579L15 3.157V1.864L13.08.75z"/><path fill="%230850C5" d="M15 1.865l-3.157 1.829v1.124L9.28 10.57 8 11.312v3.939l2.724-1.579L15 3.158V1.865zM6.076 3.703V2.58l-1.92 1.113v1.125l2.564 5.751L8 9.827V8.245L6.076 3.703z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/property-24.scss
new file mode 100644
index 0000000000..143b308916
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vagrant-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%231868F2" d="M19.983.6l-4.96 2.877v1.767L12 12.384l-3.023-7.14V3.477L4.017.6 1 2.352v2.034l6.719 16.532L12 23.4l4.281-2.482L23 4.386V2.352L19.983.6z"/><path fill="%230850C5" d="M23 2.352l-4.96 2.875v1.77l-4.028 9.043L12 17.207V23.4l4.28-2.482L23 4.386V2.352zM8.977 5.244V3.477l-3.019 1.75v1.77l4.03 9.043L12 14.873v-2.488L8.977 5.244z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/index.scss
new file mode 100644
index 0000000000..55b89be6ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../vagrant-color/property-16';
+        @import '../vagrant-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/keyframes.scss
new file mode 100644
index 0000000000..5bfb316fb7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-vagrant {
+  50% {
+
+    background-color: var(--icon-color, var(--color-vagrant-500, currentColor));
+    -webkit-mask-image: var(--icon-vagrant-color-24);
+    mask-image: var(--icon-vagrant-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-vagrant-500, currentColor));
+    -webkit-mask-image: var(--icon-vagrant-color-16);
+    mask-image: var(--icon-vagrant-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/placeholders.scss
new file mode 100644
index 0000000000..8a96337c66
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-vagrant-icon {
+  --icon-name: icon-vagrant;
+  content: '';
+}
+%with-vagrant-mask {
+  --icon-name: icon-vagrant;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/property-16.scss
new file mode 100644
index 0000000000..123c7c4cbc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vagrant-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.08.75L9.924 2.58v1.123L8 8.245 6.076 3.703V2.58L2.92.75 1 1.864v1.293l4.276 10.514L8 15.25l2.724-1.579L15 3.157V1.864L13.08.75z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/property-24.scss
new file mode 100644
index 0000000000..08ab1e586d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vagrant/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vagrant-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M13.08.75L9.924 2.58v1.123L8 8.245 6.076 3.703V2.58L2.92.75 1 1.864v1.293l4.276 10.514L8 15.25l2.724-1.579L15 3.157V1.864L13.08.75z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/keyframes.scss
new file mode 100644
index 0000000000..6cd4b2da20
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-vault-color {
+  50% {
+    background-image: var(--icon-vault-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-vault-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/placeholders.scss
new file mode 100644
index 0000000000..407e00a25f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-vault-color-icon {
+  --icon-name: icon-vault-color;
+  content: '';
+}
+%with-vault-color-mask {
+  --icon-name: icon-vault-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/property-16.scss
new file mode 100644
index 0000000000..a849f75972
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vault-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23FFD814" d="M0 0l7.971 15.516L16 0H0zm6.732 6.16h-1.27V4.89h1.27v1.27zm0-1.906h-1.27V2.985h1.27v1.269zm1.904 3.81h-1.27v-1.27h1.27v1.27zm0-1.905h-1.27V4.89h1.27v1.27zm0-1.905h-1.27V2.985h1.27v1.269zm1.894 1.905H9.26V4.89h1.27v1.27zM9.26 4.254V2.985h1.27v1.269H9.26z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/property-24.scss
new file mode 100644
index 0000000000..b2500a4f01
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vault-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23FFD814" d="M1 1l10.96 21.334L23 1H1zm9.256 8.469H8.51V7.723h1.746v1.746zm0-2.62H8.51V5.105h1.746v1.744zm2.618 5.238h-1.746v-1.746h1.746v1.746zm0-2.618h-1.746V7.723h1.746v1.746zm0-2.62h-1.746V5.105h1.746v1.744zm2.604 2.62h-1.746V7.723h1.746v1.746zm-1.746-2.62V5.105h1.746v1.744h-1.746z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/index.scss
new file mode 100644
index 0000000000..a7a0211c26
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../vault-color/property-16';
+        @import '../vault-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/keyframes.scss
new file mode 100644
index 0000000000..42b1163ccc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-vault {
+  50% {
+
+    background-color: var(--icon-color, var(--color-vault-500, currentColor));
+    -webkit-mask-image: var(--icon-vault-color-24);
+    mask-image: var(--icon-vault-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-vault-500, currentColor));
+    -webkit-mask-image: var(--icon-vault-color-16);
+    mask-image: var(--icon-vault-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/placeholders.scss
new file mode 100644
index 0000000000..169c07ded1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-vault-icon {
+  --icon-name: icon-vault;
+  content: '';
+}
+%with-vault-mask {
+  --icon-name: icon-vault;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/property-16.scss
new file mode 100644
index 0000000000..15c6decf39
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vault-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M0 0l7.971 15.516L16 0H0zm6.732 6.16h-1.27V4.89h1.27v1.27zm0-1.906h-1.27V2.985h1.27v1.269zm1.904 3.81h-1.27v-1.27h1.27v1.27zm0-1.905h-1.27V4.89h1.27v1.27zm0-1.905h-1.27V2.985h1.27v1.269zm1.894 1.905H9.26V4.89h1.27v1.27zM9.26 4.254V2.985h1.27v1.269H9.26z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vault/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/property-24.scss
new file mode 100644
index 0000000000..b583a6c39c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vault/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vault-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M0 0l7.971 15.516L16 0H0zm6.732 6.16h-1.27V4.89h1.27v1.27zm0-1.906h-1.27V2.985h1.27v1.269zm1.904 3.81h-1.27v-1.27h1.27v1.27zm0-1.905h-1.27V4.89h1.27v1.27zm0-1.905h-1.27V2.985h1.27v1.269zm1.894 1.905H9.26V4.89h1.27v1.27zM9.26 4.254V2.985h1.27v1.269H9.26z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/verified/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/verified/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/verified/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/verified/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/verified/keyframes.scss
new file mode 100644
index 0000000000..4382887853
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/verified/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-verified {
+  50% {
+
+    background-color: var(--icon-color, var(--color-verified-500, currentColor));
+    -webkit-mask-image: var(--icon-verified-24);
+    mask-image: var(--icon-verified-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-verified-500, currentColor));
+    -webkit-mask-image: var(--icon-verified-16);
+    mask-image: var(--icon-verified-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/verified/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/verified/placeholders.scss
new file mode 100644
index 0000000000..d16f166ef4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/verified/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-verified-icon {
+  --icon-name: icon-verified;
+  content: '';
+}
+%with-verified-mask {
+  --icon-name: icon-verified;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/verified/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/verified/property-16.scss
new file mode 100644
index 0000000000..0ad62c5957
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/verified/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-verified-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.28 5.72a.75.75 0 010 1.06l-4 4a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 011.06-1.06l.97.97 3.47-3.47a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M6.402 1.22a2.75 2.75 0 013.196 0l.69.493c.154.11.332.184.519.215l.865.146a2.75 2.75 0 012.254 2.254l.146.866c.031.187.105.364.215.518l.493.69a2.75 2.75 0 010 3.197l-.493.69c-.11.154-.184.33-.215.518l-.146.865a2.75 2.75 0 01-2.254 2.254l-.865.146a1.25 1.25 0 00-.519.216l-.69.492a2.75 2.75 0 01-3.196 0l-.69-.492a1.25 1.25 0 00-.519-.216l-.865-.146a2.75 2.75 0 01-2.254-2.254l-.146-.865a1.25 1.25 0 00-.215-.519l-.493-.69a2.75 2.75 0 010-3.196l.493-.69a1.25 1.25 0 00.215-.518l.146-.866a2.75 2.75 0 012.254-2.254l.865-.146a1.25 1.25 0 00.519-.215l.69-.493zm2.324 1.22a1.25 1.25 0 00-1.453 0l-.69.493a2.75 2.75 0 01-1.14.474l-.865.146a1.25 1.25 0 00-1.025 1.025l-.146.865a2.75 2.75 0 01-.474 1.141l-.492.69a1.25 1.25 0 000 1.453l.492.69c.243.339.405.729.474 1.14l.146.865c.089.525.5.936 1.025 1.025l.865.146c.411.07.801.232 1.14.474l.69.493a1.25 1.25 0 001.454 0l.69-.493a2.75 2.75 0 011.14-.474l.865-.146a1.25 1.25 0 001.025-1.024l.146-.866a2.75 2.75 0 01.474-1.14l.492-.69a1.25 1.25 0 000-1.453l-.492-.69a2.75 2.75 0 01-.474-1.14l-.146-.866a1.25 1.25 0 00-1.025-1.025l-.865-.146a2.75 2.75 0 01-1.14-.474l-.69-.492z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/verified/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/verified/property-24.scss
new file mode 100644
index 0000000000..2292cc48ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/verified/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-verified-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.78 8.22a.75.75 0 010 1.06l-6.5 6.5a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 5.97-5.97a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M9.82 1.635a3.75 3.75 0 014.36 0l1.193.853c.278.198.597.33.934.387l1.492.252a3.75 3.75 0 013.074 3.074l.252 1.492c.056.337.189.656.387.934l.853 1.193a3.75 3.75 0 010 4.36l-.853 1.193a2.248 2.248 0 00-.387.934l-.252 1.492a3.75 3.75 0 01-3.074 3.073l-1.492.252a2.25 2.25 0 00-.934.388l-1.193.853a3.75 3.75 0 01-4.36 0l-1.193-.853a2.25 2.25 0 00-.934-.388l-1.492-.252A3.75 3.75 0 013.127 17.8l-.251-1.492a2.25 2.25 0 00-.388-.934l-.853-1.193a3.75 3.75 0 010-4.36l.853-1.193a2.25 2.25 0 00.388-.934l.251-1.492a3.75 3.75 0 013.074-3.074l1.492-.252a2.25 2.25 0 00.934-.387l1.193-.853zm3.488 1.22a2.25 2.25 0 00-2.616 0L9.5 3.709a3.75 3.75 0 01-1.556.646l-1.492.252A2.25 2.25 0 004.606 6.45l-.251 1.493a3.75 3.75 0 01-.647 1.555l-.852 1.194a2.25 2.25 0 000 2.616l.852 1.193c.331.463.552.995.647 1.556l.251 1.492c.16.945.9 1.685 1.845 1.844l1.492.252c.56.095 1.093.316 1.556.646l1.193.853a2.25 2.25 0 002.616 0l1.193-.852c.463-.331.995-.552 1.556-.647l1.492-.252a2.25 2.25 0 001.845-1.844l.252-1.492a3.75 3.75 0 01.646-1.556l.852-1.193a2.25 2.25 0 000-2.616l-.852-1.194a3.75 3.75 0 01-.647-1.555l-.251-1.493a2.25 2.25 0 00-1.845-1.844l-1.492-.252a3.75 3.75 0 01-1.556-.646l-1.193-.852z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/keyframes.scss
new file mode 100644
index 0000000000..9e06a33ef5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-video-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-video-off-500, currentColor));
+    -webkit-mask-image: var(--icon-video-off-24);
+    mask-image: var(--icon-video-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-video-off-500, currentColor));
+    -webkit-mask-image: var(--icon-video-off-16);
+    mask-image: var(--icon-video-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/placeholders.scss
new file mode 100644
index 0000000000..9a44d5b29b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-video-off-icon {
+  --icon-name: icon-video-off;
+  content: '';
+}
+%with-video-off-mask {
+  --icon-name: icon-video-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/property-16.scss
new file mode 100644
index 0000000000..d81049e761
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-video-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06l.738.739A2.25 2.25 0 000 5.25v5.5A2.25 2.25 0 002.25 13h6.5a2.25 2.25 0 001.99-1.2l2.98 2.98a.75.75 0 101.06-1.06L2.28 1.22zm7.22 9.34L3.44 4.5H2.25a.75.75 0 00-.75.75v5.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.19z" clip-rule="evenodd"/><path d="M7.688 3a.75.75 0 000 1.5H8.75a.75.75 0 01.75.75v.733a1.544 1.544 0 002.424 1.27L14.5 5.47v5.54a.75.75 0 001.5 0V4.99c0-1.021-1.157-1.61-1.982-1.013L11.07 6.02a.045.045 0 01-.07-.037V5.25A2.25 2.25 0 008.75 3H7.687z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/property-24.scss
new file mode 100644
index 0000000000..4cf11bc50a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/video-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-video-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06L2.94 4h-.19A2.75 2.75 0 000 6.75v10.5A2.75 2.75 0 002.75 20h11.5c1.271 0 2.34-.862 2.656-2.034l4.814 4.814a.75.75 0 101.06-1.06L2.28 1.22zM15.5 16.56L4.44 5.5H2.75c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h11.5c.69 0 1.25-.56 1.25-1.25v-.69z" clip-rule="evenodd"/><path d="M10.5 4a.75.75 0 000 1.5h3.75c.69 0 1.25.56 1.25 1.25v3.514a1.32 1.32 0 002.148 1.028l4.426-3.563.014-.012a.25.25 0 01.412.19v8.185c0 .06-.015.101-.035.133a.253.253 0 01-.096.087.75.75 0 00.708 1.322c.527-.281.923-.84.923-1.542V7.908c0-1.487-1.736-2.295-2.873-1.342L17 9.888V6.75A2.75 2.75 0 0014.25 4H10.5z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/video/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/video/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/video/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/video/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/video/keyframes.scss
new file mode 100644
index 0000000000..c454acb17d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/video/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-video {
+  50% {
+
+    background-color: var(--icon-color, var(--color-video-500, currentColor));
+    -webkit-mask-image: var(--icon-video-24);
+    mask-image: var(--icon-video-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-video-500, currentColor));
+    -webkit-mask-image: var(--icon-video-16);
+    mask-image: var(--icon-video-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/video/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/video/placeholders.scss
new file mode 100644
index 0000000000..398e364259
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/video/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-video-icon {
+  --icon-name: icon-video;
+  content: '';
+}
+%with-video-mask {
+  --icon-name: icon-video;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/video/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/video/property-16.scss
new file mode 100644
index 0000000000..318e9ba3ea
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/video/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-video-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M0 5.25A2.25 2.25 0 012.25 3h6.5A2.25 2.25 0 0111 5.25v.818l3.018-2.09C14.843 3.382 16 3.97 16 4.991v6.018c0 1.021-1.157 1.61-1.982 1.013L11 9.932v.818A2.25 2.25 0 018.75 13h-6.5A2.25 2.25 0 010 10.75v-5.5zM11 8c0 .067.033.13.088.168l3.412 2.363V5.47l-3.412 2.363A.204.204 0 0011 8zM9.5 5.25a.75.75 0 00-.75-.75h-6.5a.75.75 0 00-.75.75v5.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-5.5z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/video/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/video/property-24.scss
new file mode 100644
index 0000000000..3810245be4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/video/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-video-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M0 6.75A2.75 2.75 0 012.75 4h11.5A2.75 2.75 0 0117 6.75v3.138l4.127-3.322C22.264 5.613 24 6.42 24 7.908v8.184c0 1.488-1.738 2.296-2.875 1.34L17 14.078v3.173A2.75 2.75 0 0114.25 20H2.75A2.75 2.75 0 010 17.25V6.75zm17 5.23c0 .103.047.201.127.267l4.95 4.026.011.01a.25.25 0 00.412-.19V7.907a.25.25 0 00-.412-.19l-.014.011-4.945 3.981a.345.345 0 00-.129.27zm-1.5-5.23c0-.69-.56-1.25-1.25-1.25H2.75c-.69 0-1.25.56-1.25 1.25v10.5c0 .69.56 1.25 1.25 1.25h11.5c.69 0 1.25-.56 1.25-1.25V6.75z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/index.scss
new file mode 100644
index 0000000000..38c4103b7f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../eye-off/property-16';
+        @import '../eye-off/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/keyframes.scss
new file mode 100644
index 0000000000..bdb764fdae
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-visibility-hide {
+  50% {
+
+    background-color: var(--icon-color, var(--color-visibility-hide-500, currentColor));
+    -webkit-mask-image: var(--icon-eye-off-24);
+    mask-image: var(--icon-eye-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-visibility-hide-500, currentColor));
+    -webkit-mask-image: var(--icon-eye-off-16);
+    mask-image: var(--icon-eye-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/placeholders.scss
new file mode 100644
index 0000000000..e9cafc47cc
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-hide/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-visibility-hide-icon {
+  --icon-name: icon-visibility-hide;
+  content: '';
+}
+%with-visibility-hide-mask {
+  --icon-name: icon-visibility-hide;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/index.scss
new file mode 100644
index 0000000000..ca98fc3f5f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../eye/property-16';
+        @import '../eye/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/keyframes.scss
new file mode 100644
index 0000000000..0b88a97ac8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-visibility-show {
+  50% {
+
+    background-color: var(--icon-color, var(--color-visibility-show-500, currentColor));
+    -webkit-mask-image: var(--icon-eye-24);
+    mask-image: var(--icon-eye-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-visibility-show-500, currentColor));
+    -webkit-mask-image: var(--icon-eye-16);
+    mask-image: var(--icon-eye-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/placeholders.scss
new file mode 100644
index 0000000000..64bc541d03
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/visibility-show/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-visibility-show-icon {
+  --icon-name: icon-visibility-show;
+  content: '';
+}
+%with-visibility-show-mask {
+  --icon-name: icon-visibility-show;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/keyframes.scss
new file mode 100644
index 0000000000..0d288e3fc9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-vmware-color {
+  50% {
+    background-image: var(--icon-vmware-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-vmware-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/placeholders.scss
new file mode 100644
index 0000000000..44cfb957b6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-vmware-color-icon {
+  --icon-name: icon-vmware-color;
+  content: '';
+}
+%with-vmware-color-mask {
+  --icon-name: icon-vmware-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/property-16.scss
new file mode 100644
index 0000000000..812bdf546a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vmware-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23696566" d="M1.677 5.14c-.201-.46-.698-.67-1.162-.454-.465.216-.636.756-.426 1.218l1.949 4.436c.306.696.63 1.06 1.236 1.06.647 0 .93-.397 1.236-1.06l1.717-3.916a.247.247 0 01.245-.165c.146 0 .27.123.27.287v3.79c0 .585.308 1.064.904 1.064.595 0 .916-.48.916-1.064V7.235c0-.599.41-.987.968-.987s.929.402.929.987v3.101c0 .585.31 1.064.905 1.064s.918-.48.918-1.064V7.235c0-.599.408-.987.966-.987.557 0 .93.402.93.987v3.101c0 .585.31 1.064.905 1.064.594 0 .917-.48.917-1.064v-3.53C16 5.51 15.004 4.6 13.805 4.6c-1.197 0-1.947.868-1.947.868-.4-.542-.949-.867-1.878-.867-.982 0-1.84.867-1.84.867-.4-.542-1.078-.867-1.64-.867-.87 0-1.56.4-1.982 1.41L3.274 9.082 1.677 5.14z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/property-24.scss
new file mode 100644
index 0000000000..169a078113
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vmware-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23696566" d="M4.096 8.468c-.251-.57-.873-.829-1.453-.562-.58.267-.795.934-.532 1.505l2.436 5.48c.383.859.787 1.31 1.545 1.31.81 0 1.163-.491 1.545-1.31l2.147-4.838a.309.309 0 01.306-.204.345.345 0 01.336.355v4.682c0 .722.387 1.314 1.131 1.314s1.146-.592 1.146-1.314v-3.831c0-.74.512-1.219 1.21-1.219.697 0 1.16.497 1.16 1.219v3.831c0 .722.389 1.314 1.132 1.314.743 0 1.147-.592 1.147-1.314v-3.831c0-.74.51-1.219 1.208-1.219.696 0 1.162.497 1.162 1.219v3.831c0 .722.388 1.314 1.131 1.314.744 0 1.147-.592 1.147-1.314v-4.36C22 8.922 20.755 7.8 19.256 7.8c-1.497 0-2.434 1.072-2.434 1.072-.498-.669-1.185-1.07-2.347-1.07-1.227 0-2.3 1.07-2.3 1.07-.499-.669-1.348-1.07-2.05-1.07-1.087 0-1.95.494-2.477 1.74l-1.556 3.795-1.996-4.869z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/index.scss
new file mode 100644
index 0000000000..00f6f1d949
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../vmware-color/property-16';
+        @import '../vmware-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/keyframes.scss
new file mode 100644
index 0000000000..c7134a3266
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-vmware {
+  50% {
+
+    background-color: var(--icon-color, var(--color-vmware-500, currentColor));
+    -webkit-mask-image: var(--icon-vmware-color-24);
+    mask-image: var(--icon-vmware-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-vmware-500, currentColor));
+    -webkit-mask-image: var(--icon-vmware-color-16);
+    mask-image: var(--icon-vmware-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/placeholders.scss
new file mode 100644
index 0000000000..efc4a5167b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-vmware-icon {
+  --icon-name: icon-vmware;
+  content: '';
+}
+%with-vmware-mask {
+  --icon-name: icon-vmware;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/property-16.scss
new file mode 100644
index 0000000000..a6552f1b95
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vmware-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M1.677 5.14c-.201-.46-.698-.67-1.162-.454-.465.216-.636.756-.426 1.218l1.949 4.436c.306.696.63 1.06 1.236 1.06.647 0 .93-.397 1.236-1.06l1.717-3.916a.247.247 0 01.245-.166c.146.001.27.124.27.288v3.79c0 .585.308 1.064.904 1.064.595 0 .916-.48.916-1.064V7.235c0-.599.41-.987.968-.987s.929.402.929.987v3.101c0 .585.31 1.064.905 1.064s.918-.48.918-1.064V7.235c0-.599.408-.987.966-.987.557 0 .93.402.93.987v3.101c0 .585.31 1.064.905 1.064.594 0 .917-.48.917-1.064v-3.53C16 5.51 15.004 4.6 13.805 4.6c-1.197 0-1.947.867-1.947.867-.4-.54-.949-.866-1.878-.866-.982 0-1.84.866-1.84.866-.4-.54-1.078-.866-1.64-.866-.87 0-1.56.4-1.982 1.41L3.274 9.082 1.677 5.14z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/property-24.scss
new file mode 100644
index 0000000000..4a43b641db
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/vmware/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-vmware-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M1.677 5.14c-.201-.46-.698-.67-1.162-.454-.465.216-.636.756-.426 1.218l1.949 4.436c.306.696.63 1.06 1.236 1.06.647 0 .93-.397 1.236-1.06l1.717-3.916a.247.247 0 01.245-.166c.146.001.27.124.27.288v3.79c0 .585.308 1.064.904 1.064.595 0 .916-.48.916-1.064V7.235c0-.599.41-.987.968-.987s.929.402.929.987v3.101c0 .585.31 1.064.905 1.064s.918-.48.918-1.064V7.235c0-.599.408-.987.966-.987.557 0 .93.402.93.987v3.101c0 .585.31 1.064.905 1.064.594 0 .917-.48.917-1.064v-3.53C16 5.51 15.004 4.6 13.805 4.6c-1.197 0-1.947.867-1.947.867-.4-.54-.949-.866-1.878-.866-.982 0-1.84.866-1.84.866-.4-.54-1.078-.866-1.64-.866-.87 0-1.56.4-1.982 1.41L3.274 9.082 1.677 5.14z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/keyframes.scss
new file mode 100644
index 0000000000..b9a9377072
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-volume-2 {
+  50% {
+
+    background-color: var(--icon-color, var(--color-volume-2-500, currentColor));
+    -webkit-mask-image: var(--icon-volume-2-24);
+    mask-image: var(--icon-volume-2-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-volume-2-500, currentColor));
+    -webkit-mask-image: var(--icon-volume-2-16);
+    mask-image: var(--icon-volume-2-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/placeholders.scss
new file mode 100644
index 0000000000..5cf4f35539
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-volume-2-icon {
+  --icon-name: icon-volume-2;
+  content: '';
+}
+%with-volume-2-mask {
+  --icon-name: icon-volume-2;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/property-16.scss
new file mode 100644
index 0000000000..6e2b961eb1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-volume-2-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M13.242 2.184a.75.75 0 10-.984 1.132C13.709 4.578 14.5 6.266 14.5 8s-.79 3.422-2.242 4.684a.75.75 0 10.984 1.132C14.992 12.293 16 10.204 16 8c0-2.204-1.008-4.293-2.758-5.816z"/><path fill-rule="evenodd" d="M7.033 2.686A1.25 1.25 0 019 3.71v8.58a1.25 1.25 0 01-1.967 1.024L3.728 11H1.25C.56 11 0 10.44 0 9.75v-3.5C0 5.56.56 5 1.25 5h2.478l3.305-2.314zM7.5 4.19L4.524 6.274a1.25 1.25 0 01-.717.226H1.5v3h2.307c.256 0 .506.079.717.226L7.5 11.809V4.19z" clip-rule="evenodd"/><path d="M10.701 5.239a.75.75 0 011.06-.038A3.826 3.826 0 0113 8c0 1.06-.453 2.066-1.239 2.799A.75.75 0 1110.74 9.7c.494-.46.761-1.074.761-1.701s-.267-1.24-.761-1.701a.75.75 0 01-.038-1.06z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/property-24.scss
new file mode 100644
index 0000000000..fac4ec64f8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-2/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-volume-2-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M18.72 4.22a.75.75 0 011.06 0 11.009 11.009 0 010 15.56.75.75 0 11-1.06-1.06 9.51 9.51 0 000-13.44.75.75 0 010-1.06z"/><path fill-rule="evenodd" d="M9.046 4.804C10.162 3.748 12 4.538 12 6.074v11.851c0 1.536-1.838 2.327-2.954 1.27l-3.3-3.127A.25.25 0 005.574 16H2.75A1.75 1.75 0 011 14.25v-4.5C1 8.783 1.784 8 2.75 8h2.824a.25.25 0 00.172-.069l3.3-3.127zm1.454 1.27a.25.25 0 00-.422-.18l-3.3 3.126a1.75 1.75 0 01-1.204.48H2.75a.25.25 0 00-.25.25v4.5c0 .138.112.25.25.25h2.824c.448 0 .878.171 1.203.48l3.301 3.127a.25.25 0 00.422-.182V6.075z" clip-rule="evenodd"/><path d="M16.271 7.96a.75.75 0 10-1.042 1.08A4.118 4.118 0 0116.5 12c0 1.105-.454 2.17-1.271 2.96a.75.75 0 101.042 1.08A5.617 5.617 0 0018 12c0-1.52-.625-2.972-1.729-4.04z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/keyframes.scss
new file mode 100644
index 0000000000..fa5531fea4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-volume-down {
+  50% {
+
+    background-color: var(--icon-color, var(--color-volume-down-500, currentColor));
+    -webkit-mask-image: var(--icon-volume-down-24);
+    mask-image: var(--icon-volume-down-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-volume-down-500, currentColor));
+    -webkit-mask-image: var(--icon-volume-down-16);
+    mask-image: var(--icon-volume-down-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/placeholders.scss
new file mode 100644
index 0000000000..1e1ebb3e67
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-volume-down-icon {
+  --icon-name: icon-volume-down;
+  content: '';
+}
+%with-volume-down-mask {
+  --icon-name: icon-volume-down;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/property-16.scss
new file mode 100644
index 0000000000..158b851b45
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-volume-down-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M9 3.71a1.25 1.25 0 00-1.967-1.024L3.728 5H1.25C.56 5 0 5.56 0 6.25v3.5C0 10.44.56 11 1.25 11h2.478l3.305 2.314A1.25 1.25 0 009 12.29V3.71zM4.524 6.274L7.5 4.19v7.62L4.524 9.725a1.25 1.25 0 00-.717-.226H1.5v-3h2.307c.256 0 .506-.079.717-.226z" clip-rule="evenodd"/><path d="M11.761 5.201A.75.75 0 0010.74 6.3c.494.46.761 1.074.761 1.701s-.267 1.24-.761 1.701A.75.75 0 1011.76 10.8 3.826 3.826 0 0013 8c0-1.06-.453-2.066-1.239-2.799z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/property-24.scss
new file mode 100644
index 0000000000..2fa8d865c7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-down/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-volume-down-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M12 6.075c0-1.537-1.838-2.327-2.954-1.27l-3.3 3.126A.25.25 0 015.574 8H2.75A1.75 1.75 0 001 9.75v4.5c0 .966.784 1.75 1.75 1.75h2.824a.25.25 0 01.172.068l3.3 3.127c1.116 1.057 2.954.266 2.954-1.27V6.075zm-1.922-.182a.25.25 0 01.422.182v11.85a.25.25 0 01-.422.181l-3.3-3.127a1.75 1.75 0 00-1.204-.48H2.75a.25.25 0 01-.25-.25v-4.5a.25.25 0 01.25-.25h2.824a1.75 1.75 0 001.203-.479l3.301-3.127z" clip-rule="evenodd"/><path d="M16.271 7.96a.75.75 0 10-1.042 1.08A4.118 4.118 0 0116.5 12c0 1.105-.454 2.17-1.271 2.96a.75.75 0 101.042 1.08A5.617 5.617 0 0018 12c0-1.52-.625-2.972-1.729-4.04z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/keyframes.scss
new file mode 100644
index 0000000000..3e58ccf8d4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-volume-x {
+  50% {
+
+    background-color: var(--icon-color, var(--color-volume-x-500, currentColor));
+    -webkit-mask-image: var(--icon-volume-x-24);
+    mask-image: var(--icon-volume-x-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-volume-x-500, currentColor));
+    -webkit-mask-image: var(--icon-volume-x-16);
+    mask-image: var(--icon-volume-x-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/placeholders.scss
new file mode 100644
index 0000000000..7d1760d076
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-volume-x-icon {
+  --icon-name: icon-volume-x;
+  content: '';
+}
+%with-volume-x-mask {
+  --icon-name: icon-volume-x;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/property-16.scss
new file mode 100644
index 0000000000..e74f8d41ff
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-volume-x-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M7.033 2.686A1.25 1.25 0 019 3.71v8.58a1.25 1.25 0 01-1.967 1.024L3.728 11H1.25C.56 11 0 10.44 0 9.75v-3.5C0 5.56.56 5 1.25 5h2.478l3.305-2.314zM7.5 4.19L4.524 6.274a1.25 1.25 0 01-.717.226H1.5v3h2.307c.256 0 .506.079.717.226L7.5 11.809V4.19z" clip-rule="evenodd"/><path d="M15.28 5.72a.75.75 0 010 1.06L14.06 8l1.22 1.22a.75.75 0 11-1.06 1.06L13 9.06l-1.22 1.22a.75.75 0 11-1.06-1.06L11.94 8l-1.22-1.22a.75.75 0 011.06-1.06L13 6.94l1.22-1.22a.75.75 0 011.06 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/property-24.scss
new file mode 100644
index 0000000000..8bfde557b1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume-x/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-volume-x-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M9.046 4.804C10.162 3.748 12 4.538 12 6.074v11.851c0 1.536-1.838 2.327-2.954 1.27l-3.3-3.127A.25.25 0 005.574 16H2.75A1.75 1.75 0 011 14.25v-4.5C1 8.783 1.784 8 2.75 8h2.824a.25.25 0 00.172-.069l3.3-3.127zm1.454 1.27a.25.25 0 00-.422-.18l-3.3 3.126a1.75 1.75 0 01-1.204.48H2.75a.25.25 0 00-.25.25v4.5c0 .138.112.25.25.25h2.824c.448 0 .878.171 1.203.48l3.301 3.127a.25.25 0 00.422-.182V6.075z" clip-rule="evenodd"/><path d="M22.78 8.22a.75.75 0 010 1.06L20.06 12l2.72 2.72a.75.75 0 11-1.06 1.06L19 13.06l-2.72 2.72a.75.75 0 11-1.06-1.06L17.94 12l-2.72-2.72a.75.75 0 011.06-1.06L19 10.94l2.72-2.72a.75.75 0 011.06 0z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume/keyframes.scss
new file mode 100644
index 0000000000..2bc76ce0c9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-volume {
+  50% {
+
+    background-color: var(--icon-color, var(--color-volume-500, currentColor));
+    -webkit-mask-image: var(--icon-volume-24);
+    mask-image: var(--icon-volume-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-volume-500, currentColor));
+    -webkit-mask-image: var(--icon-volume-16);
+    mask-image: var(--icon-volume-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume/placeholders.scss
new file mode 100644
index 0000000000..707235c27e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-volume-icon {
+  --icon-name: icon-volume;
+  content: '';
+}
+%with-volume-mask {
+  --icon-name: icon-volume;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume/property-16.scss
new file mode 100644
index 0000000000..53b82d6795
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-volume-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M7.5 4.19L4.524 6.274a1.25 1.25 0 01-.717.226H1.5v3h2.307c.256 0 .506.079.717.226L7.5 11.809V4.19zm-.467-1.504A1.25 1.25 0 019 3.71v8.58a1.25 1.25 0 01-1.967 1.024L3.728 11H1.25C.56 11 0 10.44 0 9.75v-3.5C0 5.56.56 5 1.25 5h2.478l3.305-2.314z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/volume/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/volume/property-24.scss
new file mode 100644
index 0000000000..ac4f6b735c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/volume/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-volume-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M10.5 6.075a.25.25 0 00-.422-.182l-3.3 3.127a1.75 1.75 0 01-1.204.48H2.75a.25.25 0 00-.25.25v4.5c0 .138.112.25.25.25h2.824c.448 0 .878.171 1.203.48l3.301 3.127a.25.25 0 00.422-.182V6.075zm-1.454-1.27C10.162 3.747 12 4.537 12 6.074v11.85c0 1.536-1.838 2.327-2.954 1.27l-3.3-3.127A.25.25 0 005.574 16H2.75A1.75 1.75 0 011 14.25v-4.5C1 8.783 1.784 8 2.75 8h2.824a.25.25 0 00.172-.069l3.3-3.127z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wall/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wall/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wall/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wall/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wall/keyframes.scss
new file mode 100644
index 0000000000..1fa3ae40c8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wall/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-wall {
+  50% {
+
+    background-color: var(--icon-color, var(--color-wall-500, currentColor));
+    -webkit-mask-image: var(--icon-wall-24);
+    mask-image: var(--icon-wall-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-wall-500, currentColor));
+    -webkit-mask-image: var(--icon-wall-16);
+    mask-image: var(--icon-wall-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wall/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wall/placeholders.scss
new file mode 100644
index 0000000000..61e06021aa
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wall/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-wall-icon {
+  --icon-name: icon-wall;
+  content: '';
+}
+%with-wall-mask {
+  --icon-name: icon-wall;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wall/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wall/property-16.scss
new file mode 100644
index 0000000000..032c5914ee
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wall/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-wall-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15h11.5A2.25 2.25 0 0016 12.75v-9.5A2.25 2.25 0 0013.75 1H2.25zM4.5 2.5H2.25a.75.75 0 00-.75.75V5h3V2.5zm-3 4v3H7v-3H1.5zm0 4.5v1.75c0 .414.336.75.75.75H4.5V11h-3zM6 13.5h4V11H6v2.5zm5.5 0h2.25a.75.75 0 00.75-.75V11h-3v2.5zm3-4v-3h-6v3h6zm0-4.5V3.25a.75.75 0 00-.75-.75H11.5V5h3zM10 2.5V5H6V2.5h4z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wall/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wall/property-24.scss
new file mode 100644
index 0000000000..6801ea7552
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wall/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-wall-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M3.75 2A2.75 2.75 0 001 4.75v14.5A2.75 2.75 0 003.75 22h16.5A2.75 2.75 0 0023 19.25V4.75A2.75 2.75 0 0020.25 2H3.75zM6.5 3.5H3.75c-.69 0-1.25.56-1.25 1.25V8h4V3.5zm-4 6v5H11v-5H2.5zm0 6.5v3.25c0 .69.56 1.25 1.25 1.25H6.5V16h-4zM8 20.5h8V16H8v4.5zm9.5 0h2.75c.69 0 1.25-.56 1.25-1.25V16h-4v4.5zm4-6v-5h-9v5h9zm0-6.5V4.75c0-.69-.56-1.25-1.25-1.25H17.5V8h4zM16 3.5V8H8V3.5h8z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wand/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wand/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wand/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wand/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wand/keyframes.scss
new file mode 100644
index 0000000000..0d74984f8e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wand/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-wand {
+  50% {
+
+    background-color: var(--icon-color, var(--color-wand-500, currentColor));
+    -webkit-mask-image: var(--icon-wand-24);
+    mask-image: var(--icon-wand-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-wand-500, currentColor));
+    -webkit-mask-image: var(--icon-wand-16);
+    mask-image: var(--icon-wand-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wand/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wand/placeholders.scss
new file mode 100644
index 0000000000..eea652dcc1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wand/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-wand-icon {
+  --icon-name: icon-wand;
+  content: '';
+}
+%with-wand-mask {
+  --icon-name: icon-wand;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wand/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wand/property-16.scss
new file mode 100644
index 0000000000..6725e8fa8a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wand/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-wand-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.083.183a.5.5 0 00-.65.65l.393.981a.5.5 0 010 .371l-.393.982a.5.5 0 00.65.65l.981-.393a.5.5 0 01.372 0l.98.392a.5.5 0 00.65-.65l-.392-.98a.5.5 0 010-.372l.393-.981a.5.5 0 00-.65-.65l-.981.392a.5.5 0 01-.372 0l-.98-.392z"/><path fill-rule="evenodd" d="M11.414 4.104a2 2 0 00-2.828 0L.808 11.882a2 2 0 002.828 2.828l7.778-7.778a2 2 0 000-2.828zm-1.768 1.06a.5.5 0 11.707.707l-.883.884-.707-.707.883-.884zM7.702 7.11l.707.707-5.834 5.834a.5.5 0 11-.707-.707l5.834-5.834z" clip-rule="evenodd"/><path d="M10.572 11.21a.5.5 0 010-.92l1.219-.522a.5.5 0 00.263-.262l.522-1.22a.5.5 0 01.92 0l.521 1.22a.5.5 0 00.263.262l1.219.522a.5.5 0 010 .92l-1.219.522a.5.5 0 00-.263.263l-.522 1.218a.5.5 0 01-.919 0l-.522-1.218a.5.5 0 00-.263-.263l-1.219-.522zM12.833.183a.5.5 0 00-.65.65l.293.731a.5.5 0 010 .371l-.293.732a.5.5 0 00.65.65l.731-.293a.5.5 0 01.372 0l.73.292a.5.5 0 00.65-.65l-.292-.73a.5.5 0 010-.372l.293-.731a.5.5 0 00-.65-.65l-.731.292a.5.5 0 01-.372 0l-.73-.292z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wand/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wand/property-24.scss
new file mode 100644
index 0000000000..86037b14f9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wand/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-wand-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M18.875 1.15a.75.75 0 00-.975.975l.289.721a.75.75 0 010 .557l-.29.722a.75.75 0 00.976.975l.721-.289a.75.75 0 01.558 0l.721.289a.75.75 0 00.975-.975l-.289-.722a.75.75 0 010-.557l.29-.721a.75.75 0 00-.976-.975l-.721.288a.75.75 0 01-.558 0l-.721-.288zM7.125 1.15a.75.75 0 00-.975.975l.439 1.096a.75.75 0 010 .557l-.44 1.097a.75.75 0 00.976.975l1.096-.439a.75.75 0 01.558 0l1.096.439a.75.75 0 00.975-.975l-.439-1.097a.75.75 0 010-.557l.44-1.096a.75.75 0 00-.976-.975l-1.096.438a.75.75 0 01-.558 0L7.125 1.15z"/><path fill-rule="evenodd" d="M17.017 6.707a2.5 2.5 0 00-3.535 0L2.168 18.021a2.5 2.5 0 003.536 3.535l11.313-11.313a2.5 2.5 0 000-3.536zm-2.474 1.06a1 1 0 011.414 1.415l-1.591 1.591-1.414-1.414 1.59-1.591zM11.89 10.42l1.414 1.415-8.662 8.662a1 1 0 01-1.414-1.414l8.662-8.663z" clip-rule="evenodd"/><path d="M16.108 16.69a.75.75 0 010-1.38l1.334-.57a.75.75 0 00.393-.395l.572-1.333a.75.75 0 011.378 0l.572 1.333a.75.75 0 00.394.394l1.333.572a.75.75 0 010 1.378l-1.333.572a.75.75 0 00-.394.394l-.572 1.333a.75.75 0 01-1.378 0l-.572-1.333a.75.75 0 00-.393-.394l-1.334-.572z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/watch/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/watch/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/watch/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/watch/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/watch/keyframes.scss
new file mode 100644
index 0000000000..a2e40b4510
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/watch/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-watch {
+  50% {
+
+    background-color: var(--icon-color, var(--color-watch-500, currentColor));
+    -webkit-mask-image: var(--icon-watch-24);
+    mask-image: var(--icon-watch-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-watch-500, currentColor));
+    -webkit-mask-image: var(--icon-watch-16);
+    mask-image: var(--icon-watch-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/watch/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/watch/placeholders.scss
new file mode 100644
index 0000000000..f9f435171e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/watch/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-watch-icon {
+  --icon-name: icon-watch;
+  content: '';
+}
+%with-watch-mask {
+  --icon-name: icon-watch;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/watch/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/watch/property-16.scss
new file mode 100644
index 0000000000..a2a4c4ffeb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/watch/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-watch-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9 6.25a.75.75 0 00-1.5 0V8.5c0 .323.207.61.513.712l1.5.5a.75.75 0 10.474-1.424L9 7.96V6.25z"/><path fill-rule="evenodd" d="M4.574 1.932A2.25 2.25 0 016.8 0h2.398c1.12 0 2.07.823 2.227 1.932l.288 2.011A5.485 5.485 0 0113.5 8a5.485 5.485 0 01-1.786 4.057l-.288 2.011A2.25 2.25 0 019.2 16H6.801a2.25 2.25 0 01-2.227-1.932l-.288-2.011A5.485 5.485 0 012.5 8c0-1.606.688-3.051 1.786-4.057l.288-2.011zM5.95 13.106l.107.75a.75.75 0 00.743.644h2.398a.75.75 0 00.742-.644l.108-.75A5.485 5.485 0 018 13.5c-.724 0-1.416-.14-2.049-.394zm3.99-10.962l.108.75A5.485 5.485 0 008 2.5c-.724 0-1.416.14-2.049.394l.107-.75a.75.75 0 01.743-.644h2.398a.75.75 0 01.742.644zM4 8a4 4 0 118 0 4 4 0 01-8 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/watch/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/watch/property-24.scss
new file mode 100644
index 0000000000..78b49c5065
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/watch/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-watch-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M12.5 8.25a.75.75 0 00-1.5 0v4.25c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L12.5 12.036V8.25z"/><path fill-rule="evenodd" d="M7.464 2.258A2.75 2.75 0 0110.169 0h3.662a2.75 2.75 0 012.706 2.258l.666 3.665A7.982 7.982 0 0120 12a7.982 7.982 0 01-2.797 6.077l-.666 3.665A2.75 2.75 0 0113.83 24h-3.662a2.75 2.75 0 01-2.705-2.258l-.667-3.665A7.982 7.982 0 014 12a7.982 7.982 0 012.797-6.077l.667-3.665zM8.528 19.21l.411 2.265a1.25 1.25 0 001.23 1.026h3.662a1.25 1.25 0 001.23-1.026l.411-2.265A7.968 7.968 0 0112 20a7.97 7.97 0 01-3.472-.79zM15.06 2.526l.411 2.265A7.968 7.968 0 0012 4a7.968 7.968 0 00-3.472.79l.411-2.264A1.25 1.25 0 0110.17 1.5h3.662a1.25 1.25 0 011.23 1.026zM5.5 12a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/keyframes.scss
new file mode 100644
index 0000000000..262c46692d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-waypoint-color {
+  50% {
+    background-image: var(--icon-waypoint-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-waypoint-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/placeholders.scss
new file mode 100644
index 0000000000..0a61c4981a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-waypoint-color-icon {
+  --icon-name: icon-waypoint-color;
+  content: '';
+}
+%with-waypoint-color-mask {
+  --icon-name: icon-waypoint-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/property-16.scss
new file mode 100644
index 0000000000..c9ac6d5600
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-waypoint-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%2314C6CB"><path d="M16 3l-1.998 3.463L12.004 3H16zM5.334 5.312H4l3.332 5.777L6 13.4 0 3h6.667L10 8.778l.666-1.155L8 3h2.666L12 5.312l1.334 2.31L10 13.4 5.334 5.312z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/property-24.scss
new file mode 100644
index 0000000000..2285f7ac2d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-waypoint-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%2314C6CB"><path d="M24 5l-2.997 5.194L18.006 5H24zM8 8.468H6l5 8.666L9 20.6 0 5h10l5 8.667 1-1.733L12 5h4l2 3.468 2 3.466-5 8.666L8 8.468z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/index.scss
new file mode 100644
index 0000000000..97f6657965
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../waypoint-color/property-16';
+        @import '../waypoint-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/keyframes.scss
new file mode 100644
index 0000000000..c9c6707c49
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-waypoint {
+  50% {
+
+    background-color: var(--icon-color, var(--color-waypoint-500, currentColor));
+    -webkit-mask-image: var(--icon-waypoint-color-24);
+    mask-image: var(--icon-waypoint-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-waypoint-500, currentColor));
+    -webkit-mask-image: var(--icon-waypoint-color-16);
+    mask-image: var(--icon-waypoint-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/placeholders.scss
new file mode 100644
index 0000000000..3bac39e376
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-waypoint-icon {
+  --icon-name: icon-waypoint;
+  content: '';
+}
+%with-waypoint-mask {
+  --icon-name: icon-waypoint;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/property-16.scss
new file mode 100644
index 0000000000..d6f2df66bb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-waypoint-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4 5.312h1.334L10 13.4l3.334-5.777L10.666 3H8l2.666 4.623L10 8.778 6.667 3H0l6 10.4 1.333-2.31L4 5.311zM14.002 6.463L16 3h-3.996l1.998 3.463z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/property-24.scss
new file mode 100644
index 0000000000..9e7237eb4a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/waypoint/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-waypoint-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4 5.312h1.334L10 13.4l3.334-5.777L10.666 3H8l2.666 4.623L10 8.778 6.667 3H0l6 10.4 1.333-2.31L4 5.311zM14.002 6.463L16 3h-3.996l1.998 3.463z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/keyframes.scss
new file mode 100644
index 0000000000..17d41c5b5b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-webhook {
+  50% {
+
+    background-color: var(--icon-color, var(--color-webhook-500, currentColor));
+    -webkit-mask-image: var(--icon-webhook-24);
+    mask-image: var(--icon-webhook-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-webhook-500, currentColor));
+    -webkit-mask-image: var(--icon-webhook-16);
+    mask-image: var(--icon-webhook-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/placeholders.scss
new file mode 100644
index 0000000000..e6ed95ed82
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-webhook-icon {
+  --icon-name: icon-webhook;
+  content: '';
+}
+%with-webhook-mask {
+  --icon-name: icon-webhook;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/property-16.scss
new file mode 100644
index 0000000000..ae87ce0eca
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-webhook-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M6.032 4.132c0-1.039.843-1.882 1.886-1.882.709 0 1.328.39 1.65.97a.75.75 0 101.311-.728A3.385 3.385 0 007.918.75a3.383 3.383 0 00-3.386 3.382c0 .94.385 1.79 1.003 2.402l-2.054 3.594a1.25 1.25 0 00.151 2.49h.007a1.25 1.25 0 001.146-1.75l2.369-4.144a.75.75 0 00-.249-1.005 1.879 1.879 0 01-.873-1.587z"/><path d="M7.793 5.375a1.25 1.25 0 01.125-2.494h.006a1.25 1.25 0 011.157 1.725l2.159 3.572a3.383 3.383 0 014.51 3.19 3.383 3.383 0 01-4.23 3.275.75.75 0 11.373-1.452 1.883 1.883 0 002.357-1.822 1.883 1.883 0 00-2.897-1.588.75.75 0 01-1.045-.245l-2.515-4.16z"/><path d="M2.002 10.429a.75.75 0 00-1.298-.752 3.383 3.383 0 002.932 5.073c1.61 0 2.96-1.124 3.301-2.632h4.42c.229.304.592.5 1.001.5h.007a1.25 1.25 0 000-2.5h-.007c-.409 0-.772.197-1 .5H6.271a.75.75 0 00-.75.75 1.883 1.883 0 01-1.886 1.882 1.883 1.883 0 01-1.633-2.821z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/property-24.scss
new file mode 100644
index 0000000000..81be6a26e6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/webhook/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-webhook-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M8.75 6a3.25 3.25 0 016.094-1.574.75.75 0 101.312-.728 4.75 4.75 0 10-7.307 5.856l-3.485 5.477A2.013 2.013 0 005.01 15H5a2 2 0 100 4h.01a2 2 0 001.623-3.17l3.852-6.052a.75.75 0 00-.23-1.035A3.247 3.247 0 018.75 6z"/><path d="M12.364 7.969c-.115.02-.233.031-.354.031H12a2 2 0 110-4h.01a2 2 0 011.623 3.17l3.481 5.47a4.75 4.75 0 11.7 8.96.75.75 0 11.373-1.452 3.25 3.25 0 10-.931-5.89.75.75 0 01-1.037-.23l-3.855-6.06z"/><path d="M2.184 15.376a.75.75 0 10-1.298-.752A4.75 4.75 0 109.69 17.75h7.454A2 2 0 0019 19h.01a2 2 0 100-4H19a2 2 0 00-1.855 1.25H9a.75.75 0 00-.75.75 3.25 3.25 0 11-6.066-1.624z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/keyframes.scss
new file mode 100644
index 0000000000..5466c20fbd
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-wifi-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-wifi-off-500, currentColor));
+    -webkit-mask-image: var(--icon-wifi-off-24);
+    mask-image: var(--icon-wifi-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-wifi-off-500, currentColor));
+    -webkit-mask-image: var(--icon-wifi-off-16);
+    mask-image: var(--icon-wifi-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/placeholders.scss
new file mode 100644
index 0000000000..0b925eb698
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-wifi-off-icon {
+  --icon-name: icon-wifi-off;
+  content: '';
+}
+%with-wifi-off-mask {
+  --icon-name: icon-wifi-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/property-16.scss
new file mode 100644
index 0000000000..d5ddf1729d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-wifi-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.22 1.22a.75.75 0 011.06 0l12.5 12.5a.75.75 0 11-1.06 1.06l-3.558-3.557a.749.749 0 01-.276-.122 3.25 3.25 0 00-3.765 0 .75.75 0 01-.869-1.223A4.75 4.75 0 017.94 9L6.198 7.26c-.867.25-1.68.68-2.385 1.266a.75.75 0 01-.96-1.153A8.083 8.083 0 015.02 6.08L3.513 4.573a9.914 9.914 0 00-2.07 1.405.75.75 0 11-.992-1.126c.605-.533 1.26-.997 1.954-1.387L1.22 2.28a.75.75 0 010-1.06zM8 3.5c-.42 0-.837.027-1.25.08a.75.75 0 11-.19-1.489 11.418 11.418 0 018.99 2.761.75.75 0 01-.993 1.126A9.917 9.917 0 008 3.5zM9.794 6.427a.75.75 0 01.959-.453A8.083 8.083 0 0113.2 7.372a.75.75 0 11-.96 1.153 6.583 6.583 0 00-1.993-1.14.75.75 0 01-.453-.958z"/><path d="M8 12a1 1 0 100 2h.007a1 1 0 100-2H8z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/property-24.scss
new file mode 100644
index 0000000000..ad033825ae
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-wifi-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M1.22 1.22a.75.75 0 011.06 0l20.5 20.5a.75.75 0 11-1.06 1.06l-6.175-6.174a.747.747 0 01-.5-.136 5.25 5.25 0 00-6.08 0 .75.75 0 01-.87-1.223 6.75 6.75 0 014.92-1.171l-3.307-3.307a10.249 10.249 0 00-4.228 2.105.75.75 0 01-.96-1.152A11.749 11.749 0 018.49 9.55L5.77 6.83a15.247 15.247 0 00-3.854 2.48.75.75 0 11-.992-1.125 16.746 16.746 0 013.718-2.482L1.22 2.28a.75.75 0 010-1.06zM12 5.5c-.72 0-1.436.051-2.142.151a.75.75 0 01-.21-1.485 16.75 16.75 0 0113.428 4.019.75.75 0 01-.992 1.125A15.25 15.25 0 0012 5.5zM14.278 9.954a.75.75 0 01.924-.52 11.75 11.75 0 014.358 2.288.75.75 0 01-.96 1.152 10.248 10.248 0 00-3.802-1.996.75.75 0 01-.52-.924zM12 19a1 1 0 100 2h.01a1 1 0 100-2H12z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/keyframes.scss
new file mode 100644
index 0000000000..f45656f7ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-wifi {
+  50% {
+
+    background-color: var(--icon-color, var(--color-wifi-500, currentColor));
+    -webkit-mask-image: var(--icon-wifi-24);
+    mask-image: var(--icon-wifi-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-wifi-500, currentColor));
+    -webkit-mask-image: var(--icon-wifi-16);
+    mask-image: var(--icon-wifi-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/placeholders.scss
new file mode 100644
index 0000000000..b5a48b1506
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-wifi-icon {
+  --icon-name: icon-wifi;
+  content: '';
+}
+%with-wifi-mask {
+  --icon-name: icon-wifi;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/property-16.scss
new file mode 100644
index 0000000000..9482bb5c63
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-wifi-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M1.443 5.978a9.917 9.917 0 0113.114 0 .75.75 0 00.992-1.126 11.417 11.417 0 00-15.098 0 .75.75 0 10.992 1.126z"/><path d="M3.813 8.525a6.583 6.583 0 018.427 0 .75.75 0 00.96-1.153 8.083 8.083 0 00-10.347 0 .75.75 0 00.96 1.153z"/><path d="M8.003 10.5a3.25 3.25 0 00-1.882.6.75.75 0 01-.869-1.222 4.75 4.75 0 015.502 0 .75.75 0 11-.868 1.223 3.25 3.25 0 00-1.883-.601zM8 12a1 1 0 100 2h.007a1 1 0 100-2H8z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/property-24.scss
new file mode 100644
index 0000000000..33f8c830f1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wifi/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-wifi-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M1.916 9.31a15.25 15.25 0 0120.168 0 .75.75 0 00.992-1.125 16.75 16.75 0 00-22.152 0 .75.75 0 10.992 1.125z"/><path d="M5.48 12.874a10.25 10.25 0 0113.12 0 .75.75 0 00.96-1.152 11.75 11.75 0 00-15.04 0 .75.75 0 00.96 1.152zM12.005 15.5a5.25 5.25 0 00-3.04.97.75.75 0 01-.87-1.223 6.75 6.75 0 017.82 0 .75.75 0 11-.87 1.223 5.25 5.25 0 00-3.04-.97zM12 19a1 1 0 100 2h.01a1 1 0 100-2H12z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/keyframes.scss
new file mode 100644
index 0000000000..4a390580c6
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-wrench {
+  50% {
+
+    background-color: var(--icon-color, var(--color-wrench-500, currentColor));
+    -webkit-mask-image: var(--icon-wrench-24);
+    mask-image: var(--icon-wrench-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-wrench-500, currentColor));
+    -webkit-mask-image: var(--icon-wrench-16);
+    mask-image: var(--icon-wrench-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/placeholders.scss
new file mode 100644
index 0000000000..fa592ba12f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-wrench-icon {
+  --icon-name: icon-wrench;
+  content: '';
+}
+%with-wrench-mask {
+  --icon-name: icon-wrench;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/property-16.scss
new file mode 100644
index 0000000000..4567c44d47
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-wrench-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M10.973 1.506a18.525 18.525 0 00-.497-.006A4.024 4.024 0 006.45 5.524c0 .43.095.865.199 1.205.054.18.116.356.192.527v.002a.75.75 0 01-.15.848l-4.937 4.911a.871.871 0 000 1.229.869.869 0 001.227 0L7.896 9.31a.75.75 0 01.847-.151c.17.079.35.139.529.193.34.103.774.198 1.204.198A4.024 4.024 0 0014.5 5.524c0-.177-.002-.338-.006-.483-.208.25-.438.517-.675.774-.32.345-.677.696-1.048.964-.354.257-.82.512-1.339.512-.396 0-.776-.156-1.059-.433L9.142 5.627a1.513 1.513 0 01-.432-1.06c0-.52.256-.985.514-1.34.27-.37.623-.727.97-1.046.258-.237.529-.466.78-.675zm-2.36 9.209l-4.57 4.59a2.37 2.37 0 01-3.35-3.348l.002-.001 4.591-4.568a6.887 6.887 0 01-.072-.223 5.77 5.77 0 01-.263-1.64A5.524 5.524 0 0110.476 0 12 12 0 0112 .076c.331.044.64.115.873.264a.92.92 0 01.374.45.843.843 0 01-.013.625.922.922 0 01-.241.332c-.26.257-.547.487-.829.72-.315.26-.647.535-.957.82a5.947 5.947 0 00-.771.824c-.197.27-.227.415-.227.457 0 .003 0 .006.003.008l1.211 1.211a.013.013 0 00.008.004c.043 0 .19-.032.46-.227.253-.183.532-.45.826-.767.284-.308.56-.638.82-.95.233-.28.463-.565.72-.823a.925.925 0 01.31-.235.841.841 0 01.628-.033.911.911 0 01.467.376c.15.233.22.543.262.87.047.356.075.847.075 1.522a5.524 5.524 0 01-5.524 5.525c-.631 0-1.221-.136-1.64-.263a6.969 6.969 0 01-.222-.071z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/property-24.scss
new file mode 100644
index 0000000000..0dd4a8ef18
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/wrench/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-wrench-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M15.5 2.5a6 6 0 00-6 6c0 .65.143 1.296.294 1.794a7.667 7.667 0 00.285.78l.003.007a.75.75 0 01-.15.85L2.95 18.873A1.54 1.54 0 004.038 21.5c.408 0 .799-.162 1.087-.45l6.948-6.98a.75.75 0 01.848-.15l.008.003.037.016.156.065c.139.054.34.129.586.203.497.15 1.143.293 1.792.293a6 6 0 006-6c0-.635-.018-1.122-.047-1.492l-.207.248-.034.04c-.362.435-.778.934-1.213 1.404-.446.483-.935.96-1.436 1.323-.483.35-1.075.664-1.71.664-.479 0-.939-.188-1.28-.523l-.006-.005-1.73-1.732a1.829 1.829 0 01-.524-1.28c0-.637.317-1.229.669-1.711.364-.5.844-.989 1.33-1.434.473-.434.975-.85 1.412-1.212l.04-.032.251-.209c-.373-.03-.867-.049-1.515-.049zm3.348.432a.982.982 0 00.266-.363c.07-.165.11-.4.015-.653a.991.991 0 00-.405-.485c-.27-.172-.648-.265-1.108-.327C17.129 1.04 16.449 1 15.5 1A7.5 7.5 0 008 8.5c0 .85.183 1.653.358 2.23.056.184.112.348.163.487L1.89 17.814a3.038 3.038 0 004.297 4.296l6.6-6.63c.138.05.301.107.485.162.576.175 1.377.358 2.228.358A7.5 7.5 0 0023 8.5c0-.948-.039-1.627-.103-2.111-.06-.456-.152-.835-.324-1.104a.978.978 0 00-.5-.406.879.879 0 00-.658.035.989.989 0 00-.34.262c-.287.287-.63.7-.98 1.119l-.026.03c-.368.442-.763.915-1.171 1.357-.42.454-.832.849-1.214 1.125-.399.29-.672.38-.831.38a.329.329 0 01-.228-.092l-1.72-1.72a.328.328 0 01-.091-.228c0-.157.09-.43.38-.828.278-.382.675-.792 1.132-1.212.444-.408.92-.802 1.365-1.17l.029-.023c.423-.35.84-.695 1.128-.982z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/keyframes.scss
new file mode 100644
index 0000000000..e2f5f958cf
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-x-circle-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-x-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-circle-fill-24);
+    mask-image: var(--icon-x-circle-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-x-circle-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-circle-fill-16);
+    mask-image: var(--icon-x-circle-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/placeholders.scss
new file mode 100644
index 0000000000..1f84b9a46b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-x-circle-fill-icon {
+  --icon-name: icon-x-circle-fill;
+  content: '';
+}
+%with-x-circle-fill-mask {
+  --icon-name: icon-x-circle-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/property-16.scss
new file mode 100644
index 0000000000..92d29c931a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-circle-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M8 .25a7.75 7.75 0 100 15.5A7.75 7.75 0 008 .25zm2.72 3.97a.75.75 0 111.06 1.06L9.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L8 9.06l-2.72 2.72a.75.75 0 01-1.06-1.06L6.94 8 4.22 5.28a.75.75 0 011.06-1.06L8 6.94l2.72-2.72z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/property-24.scss
new file mode 100644
index 0000000000..92b24143b9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-circle-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M12 1.25C6.063 1.25 1.25 6.063 1.25 12S6.063 22.75 12 22.75 22.75 17.937 22.75 12 17.937 1.25 12 1.25zM7.22 7.22a.75.75 0 011.06 0L12 10.94l3.72-3.72a.75.75 0 111.06 1.06L13.06 12l3.72 3.72a.75.75 0 11-1.06 1.06L12 13.06l-3.72 3.72a.75.75 0 01-1.06-1.06L10.94 12 7.22 8.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/keyframes.scss
new file mode 100644
index 0000000000..0860a7fd42
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-x-circle {
+  50% {
+
+    background-color: var(--icon-color, var(--color-x-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-x-circle-24);
+    mask-image: var(--icon-x-circle-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-x-circle-500, currentColor));
+    -webkit-mask-image: var(--icon-x-circle-16);
+    mask-image: var(--icon-x-circle-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/placeholders.scss
new file mode 100644
index 0000000000..ea55e0746d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-x-circle-icon {
+  --icon-name: icon-x-circle;
+  content: '';
+}
+%with-x-circle-mask {
+  --icon-name: icon-x-circle;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/property-16.scss
new file mode 100644
index 0000000000..69c03221f5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-circle-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M11.28 4.72a.75.75 0 010 1.06L9.06 8l2.22 2.22a.75.75 0 11-1.06 1.06L8 9.06l-2.22 2.22a.75.75 0 01-1.06-1.06L6.94 8 4.72 5.78a.75.75 0 011.06-1.06L8 6.94l2.22-2.22a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M.25 8a7.75 7.75 0 1115.5 0A7.75 7.75 0 01.25 8zM8 1.75a6.25 6.25 0 100 12.5 6.25 6.25 0 000-12.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/property-24.scss
new file mode 100644
index 0000000000..eb51608e00
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-circle/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-circle-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M16.78 7.22a.75.75 0 010 1.06L13.06 12l3.72 3.72a.75.75 0 11-1.06 1.06L12 13.06l-3.72 3.72a.75.75 0 01-1.06-1.06L10.94 12 7.22 8.28a.75.75 0 011.06-1.06L12 10.94l3.72-3.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M1.25 12C1.25 6.063 6.063 1.25 12 1.25S22.75 6.063 22.75 12 17.937 22.75 12 22.75 1.25 17.937 1.25 12zM12 2.75a9.25 9.25 0 100 18.5 9.25 9.25 0 000-18.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/keyframes.scss
new file mode 100644
index 0000000000..3ad898824d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-x-diamond-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-x-diamond-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-diamond-fill-24);
+    mask-image: var(--icon-x-diamond-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-x-diamond-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-diamond-fill-16);
+    mask-image: var(--icon-x-diamond-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/placeholders.scss
new file mode 100644
index 0000000000..d5a7cc57ba
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-x-diamond-fill-icon {
+  --icon-name: icon-x-diamond-fill;
+  content: '';
+}
+%with-x-diamond-fill-mask {
+  --icon-name: icon-x-diamond-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/property-16.scss
new file mode 100644
index 0000000000..9086d8d653
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-diamond-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.57.752a2.25 2.25 0 00-3.183 0L.73 6.41a2.25 2.25 0 000 3.182l5.657 5.657a2.25 2.25 0 003.182 0l5.657-5.657a2.25 2.25 0 000-3.182L9.569.752zM5.22 5.22a.75.75 0 011.06 0L8 6.94l1.72-1.72a.75.75 0 111.06 1.06L9.06 8l1.72 1.72a.75.75 0 11-1.06 1.06L8 9.06l-1.72 1.72a.75.75 0 11-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/property-24.scss
new file mode 100644
index 0000000000..fbe7e9dd8b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-diamond-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.944 1.884a2.75 2.75 0 00-3.889 0l-8.171 8.172a2.75 2.75 0 000 3.889l8.171 8.171a2.75 2.75 0 003.89 0l8.171-8.171a2.75 2.75 0 000-3.89l-8.171-8.17zM8.22 8.22a.75.75 0 011.06 0L12 10.94l2.72-2.72a.75.75 0 011.06 1.06L13.06 12l2.72 2.72a.75.75 0 01-1.06 1.06L12 13.06l-2.72 2.72a.75.75 0 11-1.06-1.06L10.94 12 8.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/keyframes.scss
new file mode 100644
index 0000000000..f91c592b09
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-x-diamond {
+  50% {
+
+    background-color: var(--icon-color, var(--color-x-diamond-500, currentColor));
+    -webkit-mask-image: var(--icon-x-diamond-24);
+    mask-image: var(--icon-x-diamond-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-x-diamond-500, currentColor));
+    -webkit-mask-image: var(--icon-x-diamond-16);
+    mask-image: var(--icon-x-diamond-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/placeholders.scss
new file mode 100644
index 0000000000..d88fd9b87c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-x-diamond-icon {
+  --icon-name: icon-x-diamond;
+  content: '';
+}
+%with-x-diamond-mask {
+  --icon-name: icon-x-diamond;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/property-16.scss
new file mode 100644
index 0000000000..3f4ce0f477
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-diamond-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.78 5.22a.75.75 0 010 1.06L9.06 8l1.72 1.72a.75.75 0 01-1.06 1.06L8 9.06l-1.72 1.72a.75.75 0 11-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 011.06-1.06L8 6.94l1.72-1.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M.75 6.41L6.407.753a2.25 2.25 0 013.182 0l5.657 5.657a2.25 2.25 0 010 3.182l-5.657 5.656a2.25 2.25 0 01-3.182 0L.75 9.592a2.25 2.25 0 010-3.182zm6.718-4.597L1.81 7.47a.75.75 0 000 1.06l5.657 5.658a.75.75 0 001.06 0l5.657-5.657a.75.75 0 000-1.06L8.53 1.812a.75.75 0 00-1.061 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/property-24.scss
new file mode 100644
index 0000000000..ccdf99a6b7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-diamond/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-diamond-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15.78 8.22a.75.75 0 010 1.06L13.06 12l2.72 2.72a.75.75 0 11-1.06 1.06L12 13.06l-2.72 2.72a.75.75 0 01-1.06-1.06L10.94 12 8.22 9.28a.75.75 0 111.06-1.06L12 10.94l2.72-2.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M1.884 10.056l8.171-8.172a2.75 2.75 0 013.89 0l8.171 8.172a2.75 2.75 0 010 3.889l-8.171 8.171a2.75 2.75 0 01-3.89 0l-8.171-8.171a2.75 2.75 0 010-3.89zm9.232-7.111l-8.172 8.171a1.25 1.25 0 000 1.768l8.172 8.172a1.25 1.25 0 001.768 0l8.171-8.172a1.25 1.25 0 000-1.768l-8.171-8.171a1.25 1.25 0 00-1.768 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/keyframes.scss
new file mode 100644
index 0000000000..c20cfe4649
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-x-hexagon-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-x-hexagon-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-hexagon-fill-24);
+    mask-image: var(--icon-x-hexagon-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-x-hexagon-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-hexagon-fill-16);
+    mask-image: var(--icon-x-hexagon-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/placeholders.scss
new file mode 100644
index 0000000000..8c6b16133e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-x-hexagon-fill-icon {
+  --icon-name: icon-x-hexagon-fill;
+  content: '';
+}
+%with-x-hexagon-fill-mask {
+  --icon-name: icon-x-hexagon-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/property-16.scss
new file mode 100644
index 0000000000..a02a46836d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-hexagon-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.166.33a2.25 2.25 0 00-2.332 0l-5.25 3.182A2.25 2.25 0 00.5 5.436v5.128a2.25 2.25 0 001.084 1.924l5.25 3.182a2.25 2.25 0 002.332 0l5.25-3.182a2.25 2.25 0 001.084-1.924V5.436a2.25 2.25 0 00-1.084-1.924L9.166.33zM5.22 5.22a.75.75 0 011.06 0L8 6.94l1.72-1.72a.75.75 0 111.06 1.06L9.06 8l1.72 1.72a.75.75 0 11-1.06 1.06L8 9.06l-1.72 1.72a.75.75 0 11-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/property-24.scss
new file mode 100644
index 0000000000..2b008114f4
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-hexagon-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.441 1.006a2.75 2.75 0 00-2.882 0l-7.75 4.77A2.75 2.75 0 001.5 8.116v7.765a2.75 2.75 0 001.309 2.342l7.75 4.77a2.75 2.75 0 002.882 0l7.75-4.77a2.75 2.75 0 001.309-2.342V8.117a2.75 2.75 0 00-1.309-2.342l-7.75-4.769zM14.72 8.22a.75.75 0 111.06 1.061L13.06 12l2.72 2.72a.75.75 0 01-1.06 1.06L12 13.06l-2.72 2.72a.75.75 0 11-1.06-1.06L10.94 12 8.22 9.28a.75.75 0 011.06-1.06L12 10.94l2.72-2.72z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/keyframes.scss
new file mode 100644
index 0000000000..1e234aeba8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-x-hexagon {
+  50% {
+
+    background-color: var(--icon-color, var(--color-x-hexagon-500, currentColor));
+    -webkit-mask-image: var(--icon-x-hexagon-24);
+    mask-image: var(--icon-x-hexagon-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-x-hexagon-500, currentColor));
+    -webkit-mask-image: var(--icon-x-hexagon-16);
+    mask-image: var(--icon-x-hexagon-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/placeholders.scss
new file mode 100644
index 0000000000..b075ce0ae9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-x-hexagon-icon {
+  --icon-name: icon-x-hexagon;
+  content: '';
+}
+%with-x-hexagon-mask {
+  --icon-name: icon-x-hexagon;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/property-16.scss
new file mode 100644
index 0000000000..0c415ee786
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-hexagon-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M10.78 5.22a.75.75 0 010 1.06L9.06 8l1.72 1.72a.75.75 0 11-1.06 1.06L8 9.06l-1.72 1.72a.75.75 0 11-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 011.06-1.06L8 6.94l1.72-1.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M6.834.33a2.25 2.25 0 012.332 0l5.25 3.182A2.25 2.25 0 0115.5 5.436v5.128a2.25 2.25 0 01-1.084 1.924l-5.25 3.182a2.25 2.25 0 01-2.332 0l-5.25-3.182A2.25 2.25 0 01.5 10.564V5.436a2.25 2.25 0 011.084-1.924L6.834.33zm1.555 1.283a.75.75 0 00-.778 0l-5.25 3.181A.75.75 0 002 5.436v5.128a.75.75 0 00.361.642l5.25 3.181a.75.75 0 00.778 0l5.25-3.181a.75.75 0 00.361-.642V5.436a.75.75 0 00-.361-.642l-5.25-3.181z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/property-24.scss
new file mode 100644
index 0000000000..34e4679f81
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-hexagon/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-hexagon-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M15.78 8.22a.75.75 0 010 1.06L13.06 12l2.72 2.72a.75.75 0 11-1.06 1.06L12 13.06l-2.72 2.72a.75.75 0 01-1.06-1.06L10.94 12 8.22 9.28a.75.75 0 011.06-1.06L12 10.94l2.72-2.72a.75.75 0 011.06 0z"/><path fill-rule="evenodd" d="M10.559 1.006a2.75 2.75 0 012.882 0l7.75 4.77A2.75 2.75 0 0122.5 8.116v7.765a2.75 2.75 0 01-1.309 2.342l-7.75 4.77a2.75 2.75 0 01-2.882 0l-7.75-4.77A2.75 2.75 0 011.5 15.882V8.117a2.75 2.75 0 011.309-2.342l7.75-4.769zm2.096 1.278a1.25 1.25 0 00-1.31 0l-7.75 4.769A1.25 1.25 0 003 8.117v7.765c0 .434.225.837.595 1.065l7.75 4.769a1.25 1.25 0 001.31 0l7.75-4.77c.37-.227.595-.63.595-1.064V8.117a1.25 1.25 0 00-.595-1.064l-7.75-4.77z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/keyframes.scss
new file mode 100644
index 0000000000..c6c127ab16
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-x-square-fill {
+  50% {
+
+    background-color: var(--icon-color, var(--color-x-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-square-fill-24);
+    mask-image: var(--icon-x-square-fill-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-x-square-fill-500, currentColor));
+    -webkit-mask-image: var(--icon-x-square-fill-16);
+    mask-image: var(--icon-x-square-fill-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/placeholders.scss
new file mode 100644
index 0000000000..155a1a8312
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-x-square-fill-icon {
+  --icon-name: icon-x-square-fill;
+  content: '';
+}
+%with-x-square-fill-mask {
+  --icon-name: icon-x-square-fill;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/property-16.scss
new file mode 100644
index 0000000000..71fe3881d1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-square-fill-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M1 3.139C1 1.958 1.958 1 3.139 1h9.722C14.042 1 15 1.958 15 3.139v9.722A2.139 2.139 0 0112.861 15H3.14A2.139 2.139 0 011 12.861V3.14zm4.28 1.08A.75.75 0 004.22 5.28L6.94 8l-2.72 2.72a.75.75 0 101.06 1.06L8 9.06l2.72 2.72a.75.75 0 101.06-1.06L9.06 8l2.72-2.72a.75.75 0 00-1.06-1.06L8 6.94 5.28 4.22z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/property-24.scss
new file mode 100644
index 0000000000..e279508891
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square-fill/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-square-fill-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M2 4.806A2.806 2.806 0 014.806 2h14.388A2.806 2.806 0 0122 4.806v14.388A2.806 2.806 0 0119.194 22H4.806A2.806 2.806 0 012 19.194V4.806zM8.28 7.22a.75.75 0 00-1.06 1.06L10.94 12l-3.72 3.72a.75.75 0 101.06 1.06L12 13.06l3.72 3.72a.75.75 0 101.06-1.06L13.06 12l3.72-3.72a.75.75 0 00-1.06-1.06L12 10.94 8.28 7.22z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/keyframes.scss
new file mode 100644
index 0000000000..f44af5cc70
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-x-square {
+  50% {
+
+    background-color: var(--icon-color, var(--color-x-square-500, currentColor));
+    -webkit-mask-image: var(--icon-x-square-24);
+    mask-image: var(--icon-x-square-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-x-square-500, currentColor));
+    -webkit-mask-image: var(--icon-x-square-16);
+    mask-image: var(--icon-x-square-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/placeholders.scss
new file mode 100644
index 0000000000..7c371dac64
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-x-square-icon {
+  --icon-name: icon-x-square;
+  content: '';
+}
+%with-x-square-mask {
+  --icon-name: icon-x-square;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/property-16.scss
new file mode 100644
index 0000000000..008fed1f35
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-square-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M3.139 2.5a.639.639 0 00-.639.639v9.722c0 .353.286.639.639.639h9.722a.639.639 0 00.639-.639V3.14a.639.639 0 00-.639-.639H3.14zM1 3.139C1 1.958 1.958 1 3.139 1h9.722C14.042 1 15 1.958 15 3.139v9.722A2.139 2.139 0 0112.861 15H3.14A2.139 2.139 0 011 12.861V3.14zm3.72 1.58a.75.75 0 011.06 0L8 6.94l2.22-2.22a.75.75 0 111.06 1.061L9.06 8l2.22 2.22a.75.75 0 11-1.06 1.06L8 9.06l-2.22 2.22a.75.75 0 01-1.06-1.06L6.94 8 4.72 5.78a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/property-24.scss
new file mode 100644
index 0000000000..b5e6c0b54d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x-square/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-square-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M4.806 3.5c-.721 0-1.306.585-1.306 1.306v14.388c0 .722.585 1.306 1.306 1.306h14.388c.722 0 1.306-.584 1.306-1.306V4.806c0-.721-.584-1.306-1.306-1.306H4.806zM2 4.806A2.806 2.806 0 014.806 2h14.388A2.806 2.806 0 0122 4.806v14.388A2.806 2.806 0 0119.194 22H4.806A2.806 2.806 0 012 19.194V4.806zM7.22 7.22a.75.75 0 011.06 0L12 10.94l3.72-3.72a.75.75 0 111.06 1.06L13.06 12l3.72 3.72a.75.75 0 11-1.06 1.06L12 13.06l-3.72 3.72a.75.75 0 01-1.06-1.06L10.94 12 7.22 8.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x/keyframes.scss
new file mode 100644
index 0000000000..d4d2fa7865
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-x {
+  50% {
+
+    background-color: var(--icon-color, var(--color-x-500, currentColor));
+    -webkit-mask-image: var(--icon-x-24);
+    mask-image: var(--icon-x-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-x-500, currentColor));
+    -webkit-mask-image: var(--icon-x-16);
+    mask-image: var(--icon-x-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x/placeholders.scss
new file mode 100644
index 0000000000..9c76ad4e7f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-x-icon {
+  --icon-name: icon-x;
+  content: '';
+}
+%with-x-mask {
+  --icon-name: icon-x;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x/property-16.scss
new file mode 100644
index 0000000000..501b97619f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/x/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/x/property-24.scss
new file mode 100644
index 0000000000..7c8b44df85
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/x/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-x-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" d="M18.78 6.28a.75.75 0 00-1.06-1.06L12 10.94 6.28 5.22a.75.75 0 00-1.06 1.06L10.94 12l-5.72 5.72a.75.75 0 101.06 1.06L12 13.06l5.72 5.72a.75.75 0 101.06-1.06L13.06 12l5.72-5.72z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/keyframes.scss
new file mode 100644
index 0000000000..f343ccceb1
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/keyframes.scss
@@ -0,0 +1,9 @@
+@keyframes icon-youtube-color {
+  50% {
+    background-image: var(--icon-youtube-color-24);
+  }
+
+  100% {
+    background-image: var(--icon-youtube-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/placeholders.scss
new file mode 100644
index 0000000000..7c8085dab9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-youtube-color-icon {
+  --icon-name: icon-youtube-color;
+  content: '';
+}
+%with-youtube-color-mask {
+  --icon-name: icon-youtube-color;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/property-16.scss
new file mode 100644
index 0000000000..6e31fc712a
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-youtube-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="red" d="M14.712 4.633a1.754 1.754 0 00-1.234-1.234C12.382 3.11 8 3.11 8 3.11s-4.382 0-5.478.289c-.6.161-1.072.634-1.234 1.234C1 5.728 1 8 1 8s0 2.283.288 3.367c.162.6.635 1.073 1.234 1.234C3.618 12.89 8 12.89 8 12.89s4.382 0 5.478-.289a1.754 1.754 0 001.234-1.234C15 10.272 15 8 15 8s0-2.272-.288-3.367z"/><path fill="%23fff" d="M6.593 10.11l3.644-2.098-3.644-2.11v4.208z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/property-24.scss
new file mode 100644
index 0000000000..fc6e76a7be
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube-color/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-youtube-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="red" d="M22.547 6.708a2.757 2.757 0 00-1.94-1.939C18.888 4.316 12 4.316 12 4.316s-6.886 0-8.608.453a2.756 2.756 0 00-1.939 1.94C1 8.43 1 12 1 12s0 3.588.453 5.292a2.756 2.756 0 001.94 1.939c1.72.453 8.607.453 8.607.453s6.886 0 8.608-.453a2.757 2.757 0 001.939-1.94C23 15.57 23 12 23 12s0-3.57-.453-5.292z"/><path fill="%23fff" d="M9.79 15.316l5.726-3.298-5.727-3.316v6.614z"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/index.scss
new file mode 100644
index 0000000000..e469843a66
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/index.scss
@@ -0,0 +1,6 @@
+
+        @import '../youtube-color/property-16';
+        @import '../youtube-color/property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/keyframes.scss
new file mode 100644
index 0000000000..b793f60499
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-youtube {
+  50% {
+
+    background-color: var(--icon-color, var(--color-youtube-500, currentColor));
+    -webkit-mask-image: var(--icon-youtube-color-24);
+    mask-image: var(--icon-youtube-color-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-youtube-500, currentColor));
+    -webkit-mask-image: var(--icon-youtube-color-16);
+    mask-image: var(--icon-youtube-color-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/placeholders.scss
new file mode 100644
index 0000000000..c04e464e7f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-youtube-icon {
+  --icon-name: icon-youtube;
+  content: '';
+}
+%with-youtube-mask {
+  --icon-name: icon-youtube;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/property-16.scss
new file mode 100644
index 0000000000..5225a587a7
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-youtube-color-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M13.478 3.399c.6.161 1.072.634 1.234 1.234C15 5.728 15 8 15 8s0 2.272-.288 3.367a1.754 1.754 0 01-1.234 1.234C12.382 12.89 8 12.89 8 12.89s-4.382 0-5.478-.289a1.754 1.754 0 01-1.234-1.234C1 10.283 1 8 1 8s0-2.272.288-3.367c.162-.6.635-1.073 1.234-1.234C3.618 3.11 8 3.11 8 3.11s4.382 0 5.478.289zm-3.24 4.612l-3.645 2.1V5.9l3.644 2.11z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/property-24.scss
new file mode 100644
index 0000000000..0e484a8315
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/youtube/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-youtube-color-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M13.478 3.399c.6.161 1.072.634 1.234 1.234C15 5.728 15 8 15 8s0 2.272-.288 3.367a1.754 1.754 0 01-1.234 1.234C12.382 12.89 8 12.89 8 12.89s-4.382 0-5.478-.289a1.754 1.754 0 01-1.234-1.234C1 10.283 1 8 1 8s0-2.272.288-3.367c.162-.6.635-1.073 1.234-1.234C3.618 3.11 8 3.11 8 3.11s4.382 0 5.478.289zm-3.24 4.612l-3.645 2.1V5.9l3.644 2.11z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/keyframes.scss
new file mode 100644
index 0000000000..306892212f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-zap-off {
+  50% {
+
+    background-color: var(--icon-color, var(--color-zap-off-500, currentColor));
+    -webkit-mask-image: var(--icon-zap-off-24);
+    mask-image: var(--icon-zap-off-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-zap-off-500, currentColor));
+    -webkit-mask-image: var(--icon-zap-off-16);
+    mask-image: var(--icon-zap-off-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/placeholders.scss
new file mode 100644
index 0000000000..cb0aa31281
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-zap-off-icon {
+  --icon-name: icon-zap-off;
+  content: '';
+}
+%with-zap-off-mask {
+  --icon-name: icon-zap-off;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/property-16.scss
new file mode 100644
index 0000000000..bfb9b1dfe2
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-zap-off-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M9.777.898A.75.75 0 008.479.255L6.473 2.533a.75.75 0 001.126.991l.155-.175-.164.814a.75.75 0 101.47.296L9.778.898z"/><path fill-rule="evenodd" d="M10.874 11.935l-3.353 3.81a.75.75 0 01-1.309-.57l.452-4.489-5.047-.912a.75.75 0 01-.43-1.234l2.946-3.347L1.22 2.28a.75.75 0 011.06-1.06l12.5 12.5a.75.75 0 11-1.06 1.06l-2.846-2.845zM5.195 6.256L3.191 8.534l4.422.8a.75.75 0 01.612.813L7.938 13l1.874-2.129-4.617-4.616z" clip-rule="evenodd"/><path d="M11.248 5.707a.75.75 0 00-.246 1.48l1.792.296-.322.367a.75.75 0 001.126.99l1.215-1.38a.75.75 0 00-.44-1.236l-3.125-.517z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/property-24.scss
new file mode 100644
index 0000000000..abe94faf27
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zap-off/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-zap-off-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path fill-rule="evenodd" d="M2.28 1.22a.75.75 0 00-1.06 1.06l5.659 5.66-4.705 5.63a.75.75 0 00.493 1.226l8.48.94-.917 6.408a.75.75 0 001.318.587l4.608-5.515 5.564 5.564a.75.75 0 101.06-1.06l-6.067-6.067a.753.753 0 00-.154-.154L2.28 1.219zM15.09 16.15L7.945 9.004 4.222 13.46l7.86.87a.75.75 0 01.66.852l-.653 4.563 3.002-3.593z" clip-rule="evenodd"/><path d="M13.77 1.856a.75.75 0 00-1.318-.587l-2.57 3.075a.75.75 0 101.152.962l.877-1.05-.332 2.32a.75.75 0 101.485.213l.706-4.933zM14.973 8.5a.75.75 0 10-.165 1.49l4.97.552-1.673 2.002a.75.75 0 001.151.962l2.57-3.075a.75.75 0 00-.493-1.226l-6.36-.705z"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zap/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zap/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zap/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zap/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zap/keyframes.scss
new file mode 100644
index 0000000000..deb343f9d5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zap/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-zap {
+  50% {
+
+    background-color: var(--icon-color, var(--color-zap-500, currentColor));
+    -webkit-mask-image: var(--icon-zap-24);
+    mask-image: var(--icon-zap-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-zap-500, currentColor));
+    -webkit-mask-image: var(--icon-zap-16);
+    mask-image: var(--icon-zap-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zap/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zap/placeholders.scss
new file mode 100644
index 0000000000..5e16481035
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zap/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-zap-icon {
+  --icon-name: icon-zap;
+  content: '';
+}
+%with-zap-mask {
+  --icon-name: icon-zap;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zap/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zap/property-16.scss
new file mode 100644
index 0000000000..a9932a1c19
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zap/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-zap-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="%23000" fill-rule="evenodd" d="M9.375.078a.75.75 0 01.402.82l-.889 4.418 5.485.908a.75.75 0 01.44 1.236l-7.292 8.285a.75.75 0 01-1.298-.643l.889-4.418-5.485-.908a.75.75 0 01-.44-1.236L8.479.255a.75.75 0 01.896-.177zm-6.17 8.439l4.918.815a.75.75 0 01.612.887l-.489 2.433 4.548-5.169-4.917-.814a.75.75 0 01-.612-.888l.489-2.432-4.548 5.168z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zap/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zap/property-24.scss
new file mode 100644
index 0000000000..17b1c3ca2f
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zap/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-zap-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23000" fill-rule="evenodd" d="M13.333 1.065a.75.75 0 01.437.791l-.918 6.409 8.48.94a.75.75 0 01.494 1.226l-10.278 12.3a.75.75 0 01-1.318-.587l.918-6.409-8.48-.94a.75.75 0 01-.494-1.226l10.278-12.3a.75.75 0 01.881-.204zM4.222 13.458l7.86.872a.75.75 0 01.66.851l-.653 4.563 7.69-9.202-7.862-.872a.75.75 0 01-.66-.851l.654-4.563-7.69 9.203z" clip-rule="evenodd"/></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/keyframes.scss
new file mode 100644
index 0000000000..32d275987e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-zoom-in {
+  50% {
+
+    background-color: var(--icon-color, var(--color-zoom-in-500, currentColor));
+    -webkit-mask-image: var(--icon-zoom-in-24);
+    mask-image: var(--icon-zoom-in-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-zoom-in-500, currentColor));
+    -webkit-mask-image: var(--icon-zoom-in-16);
+    mask-image: var(--icon-zoom-in-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/placeholders.scss
new file mode 100644
index 0000000000..fa27575960
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-zoom-in-icon {
+  --icon-name: icon-zoom-in;
+  content: '';
+}
+%with-zoom-in-mask {
+  --icon-name: icon-zoom-in;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/property-16.scss
new file mode 100644
index 0000000000..3cf0015d18
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-zoom-in-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M7.25 4a.75.75 0 01.75.75V6.5h1.75a.75.75 0 010 1.5H8v1.75a.75.75 0 01-1.5 0V8H4.75a.75.75 0 010-1.5H6.5V4.75A.75.75 0 017.25 4z"/><path fill-rule="evenodd" d="M7.25 1a6.25 6.25 0 103.857 11.168l2.613 2.612a.75.75 0 101.06-1.06l-2.612-2.613A6.25 6.25 0 007.25 1zM2.5 7.25a4.75 4.75 0 119.5 0 4.75 4.75 0 01-9.5 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/property-24.scss
new file mode 100644
index 0000000000..93119640a9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-in/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-zoom-in-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M10.75 6.5a.75.75 0 01.75.75V10h2.75a.75.75 0 010 1.5H11.5v2.75a.75.75 0 01-1.5 0V11.5H7.25a.75.75 0 010-1.5H10V7.25a.75.75 0 01.75-.75z"/><path fill-rule="evenodd" d="M10.75 2a8.75 8.75 0 105.634 15.445l4.336 4.335a.75.75 0 101.06-1.06l-4.335-4.336A8.75 8.75 0 0010.75 2zM3.5 10.75a7.25 7.25 0 1114.5 0 7.25 7.25 0 01-14.5 0z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/index.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/index.scss
new file mode 100644
index 0000000000..ba3c10a4ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/index.scss
@@ -0,0 +1,6 @@
+
+        @import './property-16';
+        @import './property-24';
+        @import './keyframes';
+        @import './placeholders';
+      
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/keyframes.scss
new file mode 100644
index 0000000000..dc5aad8893
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/keyframes.scss
@@ -0,0 +1,15 @@
+@keyframes icon-zoom-out {
+  50% {
+
+    background-color: var(--icon-color, var(--color-zoom-out-500, currentColor));
+    -webkit-mask-image: var(--icon-zoom-out-24);
+    mask-image: var(--icon-zoom-out-24);
+  }
+
+  100% {
+
+    background-color: var(--icon-color, var(--color-zoom-out-500, currentColor));
+    -webkit-mask-image: var(--icon-zoom-out-16);
+    mask-image: var(--icon-zoom-out-16);
+  }
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/placeholders.scss
new file mode 100644
index 0000000000..e1d30a7717
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/placeholders.scss
@@ -0,0 +1,10 @@
+
+%with-zoom-out-icon {
+  --icon-name: icon-zoom-out;
+  content: '';
+}
+%with-zoom-out-mask {
+  --icon-name: icon-zoom-out;
+  content: '';
+}
+  
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/property-16.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/property-16.scss
new file mode 100644
index 0000000000..e4e9c00c8c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/property-16.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-zoom-out-16: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path d="M4.75 6.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5z"/><path fill-rule="evenodd" d="M1 7.25a6.25 6.25 0 1111.168 3.857l2.612 2.613a.75.75 0 11-1.06 1.06l-2.613-2.612A6.25 6.25 0 011 7.25zM7.25 2.5a4.75 4.75 0 100 9.5 4.75 4.75 0 000-9.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/property-24.scss b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/property-24.scss
new file mode 100644
index 0000000000..cd0959d147
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/icons/zoom-out/property-24.scss
@@ -0,0 +1,3 @@
+:root {
+  --icon-zoom-out-24: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g fill="%23000"><path d="M7.25 10a.75.75 0 000 1.5h7a.75.75 0 000-1.5h-7z"/><path fill-rule="evenodd" d="M2 10.75a8.75 8.75 0 1115.445 5.634l4.335 4.336a.75.75 0 11-1.06 1.06l-4.336-4.335A8.75 8.75 0 012 10.75zm8.75-7.25a7.25 7.25 0 100 14.5 7.25 7.25 0 000-14.5z" clip-rule="evenodd"/></g></svg>');
+}
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/styles/base/icons/index.scss b/ui/packages/consul-ui/app/styles/base/icons/index.scss
index 02429af2ee..ce58e68bdb 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/index.scss
@@ -1,4 +1,4 @@
-@import './base-variables';
+@import './base-keyframes';
 @import './base-placeholders';
-@import './icon-placeholders';
+@import './icons/index';
 @import './overrides';
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
index fb83217bef..f99e263a23 100644
--- a/ui/packages/consul-ui/app/styles/debug.scss
+++ b/ui/packages/consul-ui/app/styles/debug.scss
@@ -1,4 +1,3 @@
-@import './base/icons/debug';
 @import 'prism-coldark-dark';
 
 // temporary component debugging setup
@@ -47,11 +46,11 @@
   border-color: rgb(var(--tone-gray-300));
   height: 80px;
 }
+
 [id^='docfy-demo-preview-icons'] figure::before {
   position: relative;
   top: 20px;
 }
-
 [id^='docfy-demo-preview-color'] figure {
   height: 40px;
 }
diff --git a/ui/packages/consul-ui/app/styles/icons.scss b/ui/packages/consul-ui/app/styles/icons.scss
index 0ab6ec6c64..ca277f1d74 100644
--- a/ui/packages/consul-ui/app/styles/icons.scss
+++ b/ui/packages/consul-ui/app/styles/icons.scss
@@ -1,47 +1,67 @@
-%with-vault-100 {
-  @extend %with-vault-16-mask, %as-pseudo;
-  color: rgb(var(--tone-vault-500));
+:root {
+  --icon-loading: icon-loading-motion;
 }
+.prefers-reduced-motion {
+  --icon-loading: icon-loading;
+}
+@media (prefers-reduced-motion) {
+  :root {
+    --icon-loading: icon-loading;
+  }
+}
+
+%theme-light {
+  --icon-aws: icon-aws-color;
+  --icon-vault: icon-vault;
+  --color-vault-500: rgb(var(--black));
+}
+%theme-dark {
+  --icon-aws: icon-aws;
+  --icon-vault: icon-vault;
+  --color-aws-500: rgb(var(--white));
+  --color-vault-500: rgb(var(--tone-lemon-500));
+}
+
+%with-vault-100,
 %with-vault-300 {
-  @extend %with-vault-16-mask, %as-pseudo;
-  color: rgb(var(--tone-vault-500));
+  --icon-name: icon-vault;
+  content: '';
 }
 %with-aws-100,
 %with-aws-300 {
-  @extend %aws-color-16-svg-prop;
-  @extend %with-icon, %as-pseudo;
-
-  background-image: var(--theme-dark-none) var(--aws-color-16-svg);
-
-  -webkit-mask-image: var(--theme-light-none) var(--aws-color-16-svg);
-  -webkit-mask-repeat: var(--theme-light-none) no-repeat;
-  -webkit-mask-position: var(--theme-light-none) center;
-  mask-image: var(--theme-light-none) var(--aws-color-16-svg);
-  mask-repeat: var(--theme-light-none) no-repeat;
-  mask-position: var(--theme-light-none) center;
-  background-color: var(--theme-light-none) rgb(var(--white));
+  --icon-name: var(--icon-aws);
+  content: '';
 }
 %with-allow-100,
 %with-aws-100,
 %with-deny-100,
 %with-l7-100,
 %with-vault-100 {
-  width: 0.75rem; /* 12px */
-  height: 0.75rem; /* 12px */
+  --icon-size: icon-200; /* 12px */
 }
 %with-allow-500,
 %with-deny-500,
 %with-l7-500 {
-  width: 1.25rem; /* 20px */
-  height: 1.25rem; /* 20px */
+  --icon-size: icon-500; /* 20px */
 }
 %with-allow-300,
 %with-allow-500 {
-  color: rgb(var(--tone-green-500));
+  --icon-name: icon-arrow-right;
+  --icon-color: rgb(var(--tone-green-500));
 }
 %with-deny-300,
 %with-deny-500 {
-  color: rgb(var(--tone-red-500));
+  --icon-name: icon-skip;
+  --icon-color: rgb(var(--tone-red-500));
+}
+%with-l7-300,
+%with-l7-500 {
+  --icon-name: icon-layers;
+}
+%with-allow-500,
+%with-deny-500,
+%with-l7-500 {
+  --icon-resolution: .5;
 }
 %with-allow-300,
 %with-allow-500,
@@ -51,21 +71,3 @@
 %with-l7-500 {
   @extend %as-pseudo;
 }
-%with-allow-300 {
-  @extend %with-arrow-right-16-mask;
-}
-%with-allow-500 {
-  @extend %with-arrow-right-24-mask;
-}
-%with-deny-300 {
-  @extend %with-skip-16-mask;
-}
-%with-deny-500 {
-  @extend %with-skip-24-mask;
-}
-%with-l7-300 {
-  @extend %with-layers-16-mask;
-}
-%with-l7-500 {
-  @extend %with-layers-24-mask;
-}