From e5f6be2f0296095b61ed7caf28f13268849bac0e Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Wed, 27 Sep 2023 02:02:09 -0500
Subject: [PATCH] web/satellite/vuetify-poc: prepend icons to dashboard card
 titles

This change adds icons before the titles of cards in the project
dashboard.

Resolves #6294

Change-Id: I65a0e3be5433bd156568a76a875552ace8905a91
---
 .../vuetify-poc/src/assets/icon-card.svg      |  3 --
 .../vuetify-poc/src/assets/icon-file.svg      |  3 --
 .../vuetify-poc/src/assets/icon-satellite.svg |  3 --
 .../src/components/CardStatsComponent.vue     | 31 +++++++++++++++++--
 .../src/components/ProjectCard.vue            |  2 +-
 .../src/components/ProjectsTableComponent.vue |  2 +-
 .../src/components/UsageProgressComponent.vue | 21 ++++++++++++-
 .../src/components/icons/IconAccess.vue       | 11 ++++---
 .../src/components/icons/IconArrowDown.vue    |  8 +++++
 .../src/components/icons/IconBucket.vue       |  7 +++--
 .../src/components/icons/IconCard.vue         | 16 ++++++++++
 .../src/components/icons/IconCircleCheck.vue  |  8 +++++
 .../src/components/icons/IconCloud.vue        |  8 +++++
 .../src/components/icons/IconFile.vue         |  8 ++---
 .../src/components/icons/IconGlobe.vue        | 16 ++++++++++
 .../src/components/icons/IconTeam.vue         | 11 ++++---
 .../src/layouts/default/AppBar.vue            |  7 +++--
 .../src/layouts/default/ProjectNav.vue        |  4 +--
 .../vuetify-poc/src/views/Bucket.vue          |  2 +-
 .../vuetify-poc/src/views/Dashboard.vue       | 20 ++++++------
 20 files changed, 147 insertions(+), 44 deletions(-)
 delete mode 100644 web/satellite/vuetify-poc/src/assets/icon-card.svg
 delete mode 100644 web/satellite/vuetify-poc/src/assets/icon-file.svg
 delete mode 100644 web/satellite/vuetify-poc/src/assets/icon-satellite.svg
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconArrowDown.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconCard.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconCircleCheck.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconCloud.vue
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconGlobe.vue

diff --git a/web/satellite/vuetify-poc/src/assets/icon-card.svg b/web/satellite/vuetify-poc/src/assets/icon-card.svg
deleted file mode 100644
index 0c4fab266..000000000
--- a/web/satellite/vuetify-poc/src/assets/icon-card.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.6971 2.69995L14.8103 2.70051C15.5609 2.70821 15.8499 2.79454 16.1411 2.95031C16.4466 3.11366 16.6863 3.35339 16.8496 3.65884L16.8719 3.7015C17.0209 3.99363 17.1 4.30614 17.1 5.1028V12.2128C17.1 13.0483 17.013 13.3513 16.8496 13.6568C16.6863 13.9622 16.4466 14.2019 16.1411 14.3653L16.0984 14.3876C15.8063 14.5366 15.4938 14.6157 14.6971 14.6157H3.30284L3.18966 14.6151C2.43913 14.6074 2.15013 14.5211 1.85888 14.3653C1.55343 14.2019 1.31371 13.9622 1.15035 13.6568L1.12805 13.6141C0.979085 13.322 0.899994 13.0095 0.899994 12.2128V5.1028L0.900557 4.98962C0.908252 4.23909 0.994587 3.95009 1.15035 3.65884C1.31371 3.35339 1.55343 3.11366 1.85888 2.95031L1.90154 2.92801C2.19367 2.77904 2.50618 2.69995 3.30284 2.69995H14.6971ZM15.6273 8.72474H2.37286L2.37291 12.2988C2.37509 12.7639 2.39618 12.8634 2.44902 12.9622C2.47512 13.011 2.50462 13.0405 2.55342 13.0666L2.57984 13.0799C2.66664 13.1203 2.77736 13.1384 3.13851 13.1422L3.30284 13.1429L14.7831 13.1427C15.2483 13.1406 15.3478 13.1195 15.4466 13.0666C15.4954 13.0405 15.5249 13.011 15.551 12.9622L15.5642 12.9358C15.6102 12.837 15.6273 12.7073 15.6273 12.2128V8.72474ZM3.25888 4.17273C2.75755 4.17384 2.65513 4.19458 2.55342 4.24898C2.50462 4.27508 2.47512 4.30457 2.44902 4.35338L2.43576 4.3798C2.39539 4.4666 2.37729 4.57732 2.3735 4.93847L2.37272 5.1028V6.31483H15.6273V5.05884C15.6261 4.55751 15.6054 4.45509 15.551 4.35338C15.5249 4.30457 15.4954 4.27508 15.4466 4.24898L15.4201 4.23572C15.3274 4.19256 15.2072 4.17486 14.7831 4.17287L3.25888 4.17273Z" fill="#56606D"/>
-</svg>
diff --git a/web/satellite/vuetify-poc/src/assets/icon-file.svg b/web/satellite/vuetify-poc/src/assets/icon-file.svg
deleted file mode 100644
index 39a78dd66..000000000
--- a/web/satellite/vuetify-poc/src/assets/icon-file.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.85066 0.900024C10.2768 0.900024 10.6854 1.06929 10.9867 1.37057L15.2161 5.5999C15.5174 5.9012 15.6867 6.30985 15.6867 6.73596V14.5562C15.6867 15.9611 14.5478 17.1 13.1429 17.1H5.2438C3.8389 17.1 2.70001 15.9611 2.70001 14.5562V3.44392C2.70001 2.03902 3.8389 0.900024 5.2438 0.900024H9.85066ZM9.19322 2.37274H5.2438C4.66346 2.37274 4.19087 2.83442 4.17324 3.41055L4.17273 3.44392V14.5562C4.17273 15.1366 4.63434 15.6092 5.21044 15.6268L5.2438 15.6273H13.1429C13.7233 15.6273 14.1959 15.1657 14.2135 14.5896L14.214 14.5562V7.39337L9.92972 7.39348C9.53296 7.39348 9.20949 7.07968 9.19394 6.68673L9.19336 6.65712L9.19322 2.37274ZM13.4542 5.92065L10.6659 3.13253L10.6661 5.92076L13.4542 5.92065Z" fill="#56606D"/>
-</svg>
diff --git a/web/satellite/vuetify-poc/src/assets/icon-satellite.svg b/web/satellite/vuetify-poc/src/assets/icon-satellite.svg
deleted file mode 100644
index 2734e333f..000000000
--- a/web/satellite/vuetify-poc/src/assets/icon-satellite.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.06749 0.900024L9.11645 0.900438L9.16529 0.901677C9.53115 0.909002 9.89106 0.940584 10.2435 0.99488C9.98774 1.47157 9.8346 2.00947 9.81271 2.58037L9.8101 2.57899V15.4211C11.1641 14.7192 12.375 12.1847 12.375 9.00002C12.375 7.94799 12.2428 6.96691 12.0171 6.0994C12.496 6.31487 13.0287 6.43502 13.59 6.43502L13.6147 6.43474C13.7738 7.2409 13.86 8.10345 13.86 9.00002C13.86 11.169 13.3556 13.1389 12.5342 14.5928C14.3857 13.4203 15.615 11.3537 15.615 9.00002C15.615 7.98925 15.3883 7.03143 14.983 6.17462C15.4572 5.99009 15.8844 5.71379 16.2419 5.36813C16.7909 6.46038 17.1 7.69411 17.1 9.00002C17.1 13.3741 13.6329 16.9384 9.29698 17.0947L9.16532 17.0984C9.13277 17.0995 9.10017 17.1 9.06749 17.1H8.99999C4.52649 17.1 0.899994 13.4735 0.899994 9.00002C0.899994 4.52652 4.52649 0.900024 8.99999 0.900024H9.06749ZM8.32503 2.57892C6.971 3.28067 5.75999 5.81527 5.75999 9.00002C5.75999 12.1848 6.971 14.7194 8.32503 15.4211V2.57892ZM5.6737 3.2809L5.60267 3.3229C3.67508 4.4789 2.38499 6.5888 2.38499 9.00002C2.38499 11.4407 3.70681 13.5727 5.67364 14.7191C4.80936 13.254 4.27499 11.2325 4.27499 9.00002C4.27499 6.76756 4.80936 4.74604 5.6737 3.2809ZM13.6575 0.900024C14.7013 0.900024 15.5475 1.71599 15.5475 2.72252C15.5475 3.72906 14.7013 4.54502 13.6575 4.54502C12.6137 4.54502 11.7675 3.72906 11.7675 2.72252C11.7675 1.71599 12.6137 0.900024 13.6575 0.900024Z" fill="#56606D"/>
-</svg>
diff --git a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
index ff65ab503..72f217543 100644
--- a/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/CardStatsComponent.vue
@@ -2,7 +2,13 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-card :title="title" :subtitle="subtitle" variant="flat" :border="true" rounded="xlg" :to="to">
+    <v-card :subtitle="subtitle" variant="flat" :border="true" rounded="xlg" :to="to">
+        <template #title>
+            <v-card-title class="d-flex align-center">
+                <component :is="iconComponent" v-if="icon" v-bind="iconProps" class="mr-2" />
+                {{ title }}
+            </v-card-title>
+        </template>
         <v-card-text>
             <v-chip rounded color="success" variant="outlined" class="font-weight-bold">{{ data }}</v-chip>
         </v-card-text>
@@ -10,12 +16,33 @@
 </template>
 
 <script setup lang="ts">
-import { VCard, VCardText, VChip } from 'vuetify/components';
+import { computed, Component } from 'vue';
+import { VCard, VCardText, VChip, VCardTitle } from 'vuetify/components';
+
+import IconFile from '@poc/components/icons/IconFile.vue';
+import IconGlobe from '@poc/components/icons/IconGlobe.vue';
+import IconBucket from '@poc/components/icons/IconBucket.vue';
+import IconAccess from '@poc/components/icons/IconAccess.vue';
+import IconTeam from '@poc/components/icons/IconTeam.vue';
+import IconCard from '@poc/components/icons/IconCard.vue';
 
 const props = defineProps<{
     title: string;
     subtitle: string;
     data: string;
     to: string;
+    icon?: keyof typeof iconComponents;
 }>();
+
+const iconComponents = {
+    file: IconFile,
+    globe: IconGlobe,
+    bucket: IconBucket,
+    access: IconAccess,
+    team: IconTeam,
+    card: IconCard,
+};
+
+const iconComponent = computed<Component | null>(() => props.icon ? iconComponents[props.icon] : null);
+const iconProps = computed<object | null>(() => iconComponent.value?.['props']?.['bold'] ? { bold: true } : null);
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/ProjectCard.vue b/web/satellite/vuetify-poc/src/components/ProjectCard.vue
index 311f693ea..0e4cc293f 100644
--- a/web/satellite/vuetify-poc/src/components/ProjectCard.vue
+++ b/web/satellite/vuetify-poc/src/components/ProjectCard.vue
@@ -29,7 +29,7 @@
 
                                 <v-list-item link class="mt-1" rounded="lg">
                                     <template #prepend>
-                                        <icon-team />
+                                        <icon-team size="18" />
                                     </template>
                                     <v-list-item-title class="text-body-2 ml-3">
                                         Invite Members
diff --git a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
index 73aaac606..54e647b02 100644
--- a/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue
@@ -95,7 +95,7 @@
 
                                     <v-list-item link>
                                         <template #prepend>
-                                            <icon-team />
+                                            <icon-team size="18" />
                                         </template>
                                         <v-list-item-title class="text-body-2 ml-3">
                                             Invite Members
diff --git a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
index 611c7340e..2e8d91ec8 100644
--- a/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/UsageProgressComponent.vue
@@ -3,6 +3,12 @@
 
 <template>
     <v-card :title="title" variant="flat" :border="true" rounded="xlg">
+        <template #title>
+            <v-card-title class="d-flex align-center">
+                <component :is="iconComponents[icon]" v-if="icon" class="mr-2" />
+                {{ title }}
+            </v-card-title>
+        </template>
         <v-card-item>
             <v-progress-linear color="success" :model-value="progress" rounded height="6" />
         </v-card-item>
@@ -22,7 +28,12 @@
 </template>
 
 <script setup lang="ts">
-import { VCard, VCardItem, VProgressLinear, VRow, VCol } from 'vuetify/components';
+import { VCard, VCardItem, VProgressLinear, VRow, VCol, VCardTitle } from 'vuetify/components';
+
+import IconCloud from '@poc/components/icons/IconCloud.vue';
+import IconArrowDown from '@poc/components/icons/IconArrowDown.vue';
+import IconGlobe from '@poc/components/icons/IconGlobe.vue';
+import IconCircleCheck from '@poc/components/icons/IconCircleCheck.vue';
 
 const props = defineProps<{
     title: string;
@@ -31,9 +42,17 @@ const props = defineProps<{
     limit: string;
     available: string;
     cta: string;
+    icon?: keyof typeof iconComponents;
 }>();
 
 const emit = defineEmits<{
     ctaClick: [];
 }>();
+
+const iconComponents = {
+    cloud: IconCloud,
+    'arrow-down': IconArrowDown,
+    globe: IconGlobe,
+    check: IconCircleCheck,
+};
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue b/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue
index 8b5b3ad67..6e7dbde6c 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconAccess.vue
@@ -3,15 +3,18 @@
 
 <template>
     <!-- Access Icon -->
-    <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path :fill="color" d="M17.0859 2.9141C19.638 5.46622 19.638 9.60404 17.0859 12.1562C15.3894 13.8527 12.9396 14.4568 10.6985 13.8283L10.6263 13.8076L10.5659 13.7897L5.76518 18.5903C5.66164 18.6938 5.52387 18.756 5.37774 18.7651L1.63842 18.9988C1.30718 19.0195 1.02187 18.7678 1.00117 18.4365C0.99961 18.4116 0.99961 18.3865 1.00117 18.3616L1.23488 14.6222C1.24401 14.4761 1.30618 14.3383 1.40971 14.2348L6.21041 9.43399L6.19228 9.37352C5.54455 7.16162 6.10394 4.73554 7.73473 3.02578L7.78829 2.97028L7.84381 2.9141C10.3959 0.361968 14.5338 0.361968 17.0859 2.9141ZM8.65636 3.58979L8.59185 3.65326L8.54502 3.70055L8.49571 3.75161C7.15718 5.15496 6.66574 7.15205 7.17887 8.99879L7.19964 9.07161L7.39804 9.73358L2.27364 14.8581L2.08255 17.9173L5.14189 17.7262L10.2653 12.603L10.9161 12.7967L10.9825 12.8158C12.8841 13.3491 14.9337 12.8211 16.3423 11.4126C18.4837 9.27111 18.4837 5.79915 16.3423 3.65771C14.2222 1.53768 10.7982 1.51648 8.65636 3.58979ZM12.882 5.52457C13.322 5.08455 14.0354 5.08455 14.4754 5.52457C14.9154 5.96459 14.9154 6.67801 14.4754 7.11803C14.0354 7.55805 13.322 7.55805 12.882 7.11803C12.4419 6.67801 12.4419 5.96459 12.882 5.52457Z" />
+    <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path v-if="!bold" d="M17.0859 2.9141C19.638 5.46622 19.638 9.60404 17.0859 12.1562C15.3894 13.8527 12.9396 14.4568 10.6985 13.8283L10.6263 13.8076L10.5659 13.7897L5.76518 18.5903C5.66164 18.6938 5.52387 18.756 5.37774 18.7651L1.63842 18.9988C1.30718 19.0195 1.02187 18.7678 1.00117 18.4365C0.99961 18.4116 0.99961 18.3865 1.00117 18.3616L1.23488 14.6222C1.24401 14.4761 1.30618 14.3383 1.40971 14.2348L6.21041 9.43399L6.19228 9.37352C5.54455 7.16162 6.10394 4.73554 7.73473 3.02578L7.78829 2.97028L7.84381 2.9141C10.3959 0.361968 14.5338 0.361968 17.0859 2.9141ZM8.65636 3.58979L8.59185 3.65326L8.54502 3.70055L8.49571 3.75161C7.15718 5.15496 6.66574 7.15205 7.17887 8.99879L7.19964 9.07161L7.39804 9.73358L2.27364 14.8581L2.08255 17.9173L5.14189 17.7262L10.2653 12.603L10.9161 12.7967L10.9825 12.8158C12.8841 13.3491 14.9337 12.8211 16.3423 11.4126C18.4837 9.27111 18.4837 5.79915 16.3423 3.65771C14.2222 1.53768 10.7982 1.51648 8.65636 3.58979ZM12.882 5.52457C13.322 5.08455 14.0354 5.08455 14.4754 5.52457C14.9154 5.96459 14.9154 6.67801 14.4754 7.11803C14.0354 7.55805 13.322 7.55805 12.882 7.11803C12.4419 6.67801 12.4419 5.96459 12.882 5.52457Z" fill="currentColor" />
+        <path v-else d="M5.37774 18.7651L1.63842 18.9988C1.30718 19.0195 1.02187 18.7678 1.00117 18.4365C0.99961 18.4116 0.99961 18.3865 1.00117 18.3616L1.23488 14.6222C1.24401 14.4761 1.30618 14.3383 1.40971 14.2348L6.2104 9.43399L6.19228 9.37352C5.54455 7.16162 6.10394 4.73554 7.73473 3.02578L7.78829 2.97028L7.84381 2.9141C10.3959 0.361968 14.5338 0.361968 17.0859 2.9141C19.638 5.46622 19.638 9.60404 17.0859 12.1562C15.3894 13.8527 12.9396 14.4568 10.6985 13.8284L10.6263 13.8076L10.5659 13.7897L5.76518 18.5903C5.66164 18.6938 5.52387 18.756 5.37774 18.7651ZM2.72487 17.2752L4.87785 17.1406L10.1487 11.8697L10.6541 12.0711C12.4527 12.7879 14.5245 12.3804 15.9173 10.9876C17.8241 9.08087 17.8241 5.9894 15.9173 4.08263C14.0106 2.17587 10.9191 2.17587 9.01235 4.08263C7.63541 5.45957 7.22148 7.5002 7.90482 9.28431L7.92882 9.34572L8.13023 9.85114L2.85946 15.1222L2.72487 17.2752ZM11.9843 8.01565C12.6297 8.66102 13.676 8.66102 14.3214 8.01565C14.9668 7.37029 14.9668 6.32394 14.3214 5.67858C13.676 5.03321 12.6297 5.03321 11.9843 5.67858C11.339 6.32394 11.339 7.37029 11.9843 8.01565Z" fill="currentColor" />
     </svg>
 </template>
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
-    color: string;
+    size: number | string;
+    bold: boolean;
 }>(), {
-    color: 'currentColor',
+    size: 20,
+    bold: false,
 });
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconArrowDown.vue b/web/satellite/vuetify-poc/src/components/icons/IconArrowDown.vue
new file mode 100644
index 000000000..201123689
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconArrowDown.vue
@@ -0,0 +1,8 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.5768 13.7261L15.5505 13.7535L10.5801 18.7238C10.2209 19.0831 9.64384 19.0918 9.27396 18.7501L9.24661 18.7238L4.27625 13.7535C3.90801 13.3852 3.90801 12.7882 4.27625 12.42C4.63551 12.0607 5.21254 12.0519 5.58242 12.3937L5.60976 12.42L8.9705 15.7804L8.97043 1.94293C8.97043 1.42217 9.3926 1 9.91337 1C10.4214 1 10.8356 1.40182 10.8556 1.90501L10.8563 1.94293L10.8564 15.7804L14.217 12.42C14.5762 12.0607 15.1533 12.0519 15.5231 12.3937L15.5505 12.42C15.9097 12.7792 15.9185 13.3562 15.5768 13.7261Z" fill="currentColor" />
+    </svg>
+</template>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue b/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue
index 33446ac20..be120c1f2 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconBucket.vue
@@ -4,14 +4,15 @@
 <template>
     <!-- Bucket Icon -->
     <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path :fill="color" d="M9.94232 1C14.3287 1 17.8846 2.41577 17.8846 4.16222C17.8846 4.18679 17.8839 4.21129 17.8825 4.23573L17.8846 4.23576L17.8812 4.25647C17.8747 4.34405 17.8594 4.43074 17.8354 4.51639L17.2448 7.86246L17.9754 8.59315C19.4245 10.0422 19.4378 12.3818 18.0009 13.8187C17.4404 14.3792 16.7425 14.7191 16.0136 14.8391L15.6784 16.7376C15.6578 17.9885 13.0975 19 9.94232 19C6.80603 19 4.25762 18.0006 4.20697 16.7601L4.20649 16.7376L2.04971 4.51801C2.02531 4.43125 2.00973 4.34344 2.00333 4.2547L2 4.23576L2.0021 4.23573C2.0007 4.21129 2 4.18679 2 4.16222C2 2.41577 5.5559 1 9.94232 1ZM16.5417 5.92227C15.1162 6.76791 12.6925 7.32444 9.94232 7.32444C7.19224 7.32444 4.76862 6.76794 3.34307 5.92236L5.07 15.708L5.23576 16.7077L5.24057 16.7148C5.26274 16.7549 5.30682 16.8087 5.37589 16.8715C5.56623 17.0445 5.87973 17.225 6.29249 17.3864C7.23129 17.7535 8.53735 17.9704 9.94232 17.9704C11.3555 17.9704 12.6685 17.7509 13.6079 17.3802C14.0199 17.2176 14.331 17.0363 14.5174 16.8636C14.5757 16.8096 14.6149 16.7629 14.6373 16.7265L14.6486 16.7072C14.6484 16.707 14.6488 16.707 14.6486 16.7072L14.6504 16.639L14.9642 14.8612C14.1844 14.7668 13.4269 14.4248 12.8191 13.8363L12.7754 13.7932L9.52478 10.5426C9.32375 10.3416 9.32375 10.0156 9.52478 9.81461C9.71912 9.62028 10.0302 9.6138 10.2323 9.79518L10.2528 9.81461L13.5034 13.0652C13.9635 13.5253 14.5466 13.7854 15.1434 13.8453L16.5417 5.92227ZM17.0264 9.10014L16.2081 13.7368C16.5984 13.6141 16.9648 13.3988 17.2729 13.0907C18.2944 12.0692 18.2964 10.4074 17.282 9.35635L17.2474 9.32116L17.0264 9.10014ZM9.94232 2.02956C7.93079 2.02956 6.05766 2.345 4.70709 2.88273L4.58604 2.93209C3.53715 3.37015 3.02956 3.85899 3.02956 4.16222C3.02956 4.4769 3.57618 4.99144 4.70709 5.44172C6.05766 5.97944 7.93079 6.29488 9.94232 6.29488C11.9539 6.29488 13.827 5.97944 15.1775 5.44172L15.2986 5.39235C16.3475 4.95429 16.8551 4.46546 16.8551 4.16222C16.8551 3.84754 16.3085 3.333 15.1775 2.88273C13.827 2.345 11.9539 2.02956 9.94232 2.02956Z" />
+        <path v-if="!bold" d="M9.94232 1C14.3287 1 17.8846 2.41577 17.8846 4.16222C17.8846 4.18679 17.8839 4.21129 17.8825 4.23573L17.8846 4.23576L17.8812 4.25647C17.8747 4.34405 17.8594 4.43074 17.8354 4.51639L17.2448 7.86246L17.9754 8.59315C19.4245 10.0422 19.4378 12.3818 18.0009 13.8187C17.4404 14.3792 16.7425 14.7191 16.0136 14.8391L15.6784 16.7376C15.6578 17.9885 13.0975 19 9.94232 19C6.80603 19 4.25762 18.0006 4.20697 16.7601L4.20649 16.7376L2.04971 4.51801C2.02531 4.43125 2.00973 4.34344 2.00333 4.2547L2 4.23576L2.0021 4.23573C2.0007 4.21129 2 4.18679 2 4.16222C2 2.41577 5.5559 1 9.94232 1ZM16.5417 5.92227C15.1162 6.76791 12.6925 7.32444 9.94232 7.32444C7.19224 7.32444 4.76862 6.76794 3.34307 5.92236L5.07 15.708L5.23576 16.7077L5.24057 16.7148C5.26274 16.7549 5.30682 16.8087 5.37589 16.8715C5.56623 17.0445 5.87973 17.225 6.29249 17.3864C7.23129 17.7535 8.53735 17.9704 9.94232 17.9704C11.3555 17.9704 12.6685 17.7509 13.6079 17.3802C14.0199 17.2176 14.331 17.0363 14.5174 16.8636C14.5757 16.8096 14.6149 16.7629 14.6373 16.7265L14.6486 16.7072C14.6484 16.707 14.6488 16.707 14.6486 16.7072L14.6504 16.639L14.9642 14.8612C14.1844 14.7668 13.4269 14.4248 12.8191 13.8363L12.7754 13.7932L9.52478 10.5426C9.32375 10.3416 9.32375 10.0156 9.52478 9.81461C9.71912 9.62028 10.0302 9.6138 10.2323 9.79518L10.2528 9.81461L13.5034 13.0652C13.9635 13.5253 14.5466 13.7854 15.1434 13.8453L16.5417 5.92227ZM17.0264 9.10014L16.2081 13.7368C16.5984 13.6141 16.9648 13.3988 17.2729 13.0907C18.2944 12.0692 18.2964 10.4074 17.282 9.35635L17.2474 9.32116L17.0264 9.10014ZM9.94232 2.02956C7.93079 2.02956 6.05766 2.345 4.70709 2.88273L4.58604 2.93209C3.53715 3.37015 3.02956 3.85899 3.02956 4.16222C3.02956 4.4769 3.57618 4.99144 4.70709 5.44172C6.05766 5.97944 7.93079 6.29488 9.94232 6.29488C11.9539 6.29488 13.827 5.97944 15.1775 5.44172L15.2986 5.39235C16.3475 4.95429 16.8551 4.46546 16.8551 4.16222C16.8551 3.84754 16.3085 3.333 15.1775 2.88273C13.827 2.345 11.9539 2.02956 9.94232 2.02956Z" fill="currentColor" />
+        <path v-else d="M18.1721 8.38515C19.7355 9.9486 19.7498 12.4744 18.1975 14.0267C17.5686 14.6556 16.7797 15.0274 15.9599 15.1431L15.6784 16.7376C15.6578 17.9885 13.0975 19 9.94232 19C6.80603 19 4.25762 18.0006 4.20697 16.7601L4.20649 16.7376L2.04963 4.51771C2.02535 4.43129 2.00981 4.34382 2.00338 4.25544L2 4.23576L2.00211 4.23587C2.00071 4.21139 2 4.18684 2 4.16222C2 2.41577 5.5559 1 9.94232 1C14.3287 1 17.8846 2.41577 17.8846 4.16222C17.8846 4.18684 17.8839 4.21139 17.8825 4.23587L17.8846 4.23576L17.8812 4.25676C17.8747 4.34414 17.8594 4.43063 17.8355 4.5161L17.3054 7.51844L18.1721 8.38515ZM15.8846 6.26039C14.4297 6.91312 12.3066 7.32444 9.94232 7.32444C7.57808 7.32444 5.45511 6.91314 4.00017 6.26045L5.5636 15.1197L5.81923 16.4762L5.84291 16.4946C5.9766 16.5948 6.18351 16.7078 6.45219 16.8167L6.50675 16.8385C7.37281 17.1771 8.60689 17.3821 9.94232 17.3821C11.2855 17.3821 12.5259 17.1747 13.392 16.8329C13.7041 16.7097 13.9368 16.5803 14.0734 16.4701L14.0845 16.4609L14.3355 15.0387C13.7042 14.8652 13.1061 14.5347 12.6032 14.0477L12.556 14.0012L9.30543 10.7506C8.98952 10.4347 8.98952 9.92252 9.30543 9.60661C9.61364 9.2984 10.1087 9.29089 10.426 9.58406L10.4494 9.60661L13.7 12.8572C13.9686 13.1257 14.2839 13.3178 14.6188 13.4334L15.8846 6.26039ZM16.9623 9.46328L16.2676 13.3997C16.5543 13.2861 16.8224 13.1137 17.0535 12.8827C17.9602 11.976 17.9627 10.4993 17.0611 9.56277L17.0281 9.52916L16.9623 9.46328ZM9.94232 2.61788C8.0014 2.61788 6.2014 2.921 4.92472 3.42932C4.37614 3.64773 3.96798 3.88827 3.73308 4.10939C3.71811 4.12348 3.70445 4.13691 3.69205 4.14963L3.68024 4.16207L3.70159 4.18448L3.73308 4.21505C3.96798 4.43617 4.37614 4.67671 4.92472 4.89513C6.2014 5.40344 8.0014 5.70656 9.94232 5.70656C11.8832 5.70656 13.6832 5.40344 14.9599 4.89513C15.5085 4.67671 15.9167 4.43617 16.1516 4.21505C16.1665 4.20096 16.1802 4.18753 16.1926 4.17481L16.2045 4.16207L16.1831 4.13996L16.1516 4.10939C15.9167 3.88827 15.5085 3.64773 14.9599 3.42932C13.6832 2.921 11.8832 2.61788 9.94232 2.61788Z" fill="currentColor" />
     </svg>
 </template>
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
-    color: string;
+    bold: boolean;
 }>(), {
-    color: 'currentColor',
+    bold: false,
 });
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconCard.vue b/web/satellite/vuetify-poc/src/components/icons/IconCard.vue
new file mode 100644
index 000000000..86f120d98
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconCard.vue
@@ -0,0 +1,16 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16.3302 3L16.4559 3.00063C17.2899 3.00918 17.611 3.1051 17.9346 3.27817C18.274 3.45968 18.5403 3.72604 18.7218 4.06543L18.7466 4.11283C18.9121 4.43742 19 4.78465 19 5.66983V13.5698C19 14.4982 18.9033 14.8348 18.7218 15.1742C18.5403 15.5136 18.274 15.78 17.9346 15.9615L17.8872 15.9863C17.5626 16.1518 17.2153 16.2397 16.3302 16.2397H3.66983L3.54407 16.239C2.71015 16.2305 2.38904 16.1346 2.06543 15.9615C1.72604 15.78 1.45968 15.5136 1.27817 15.1742L1.2534 15.1268C1.08788 14.8022 1 14.455 1 13.5698V5.66983L1.00063 5.54407C1.00918 4.71015 1.1051 4.38904 1.27817 4.06543C1.45968 3.72604 1.72604 3.45968 2.06543 3.27817L2.11283 3.2534C2.43742 3.08788 2.78465 3 3.66983 3H16.3302ZM17.3636 9.69421H2.63651L2.63658 13.6653C2.639 14.1822 2.66243 14.2927 2.72114 14.4025C2.75014 14.4568 2.78291 14.4895 2.83714 14.5185L2.8665 14.5333C2.96294 14.5781 3.08596 14.5982 3.48724 14.6024L3.66983 14.6033L16.4257 14.6031C16.9425 14.6007 17.0531 14.5772 17.1629 14.5185C17.2171 14.4895 17.2499 14.4568 17.2789 14.4025L17.2936 14.3732C17.3446 14.2634 17.3636 14.1193 17.3636 13.5698V9.69421ZM3.62099 4.63642C3.06396 4.63765 2.95015 4.6607 2.83714 4.72114C2.78291 4.75014 2.75014 4.78291 2.72114 4.83714L2.70641 4.8665C2.66155 4.96294 2.64144 5.08596 2.63722 5.48724L2.63636 5.66983V7.01653H17.3636V5.62099C17.3624 5.06396 17.3393 4.95015 17.2789 4.83714C17.2499 4.78291 17.2171 4.75014 17.1629 4.72114L17.1335 4.70641C17.0304 4.65846 16.8969 4.63878 16.4257 4.63658L3.62099 4.63642Z" fill="currentColor" />
+    </svg>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    size: number | string;
+}>(), {
+    size: 20,
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconCircleCheck.vue b/web/satellite/vuetify-poc/src/components/icons/IconCircleCheck.vue
new file mode 100644
index 000000000..b3a96d73b
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconCircleCheck.vue
@@ -0,0 +1,8 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM13.8388 7.50461C14.1531 7.81893 14.1608 8.32379 13.8618 8.64741L13.8388 8.67134L9.77957 12.7306C9.65841 12.8517 9.50962 12.929 9.35321 12.962C9.08427 13.0519 8.77588 12.9952 8.55428 12.7879L8.54466 12.7787L6.13418 10.3684C5.812 10.0462 5.812 9.52385 6.13418 9.20167C6.44851 8.88734 6.95336 8.87967 7.27698 9.17867L7.30091 9.20167L9.13808 11.0386L12.6721 7.50461C12.9943 7.18243 13.5166 7.18243 13.8388 7.50461Z" fill="currentColor" />
+    </svg>
+</template>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconCloud.vue b/web/satellite/vuetify-poc/src/components/icons/IconCloud.vue
new file mode 100644
index 000000000..8887b0691
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconCloud.vue
@@ -0,0 +1,8 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9.59239 15.9991L9.67232 16L16.52 16C18.4421 16 20 14.4408 20 12.5178C20 10.6188 18.4795 9.07069 16.5843 9.03614L16.5274 9.03559L15.8124 9.03567L15.7945 8.81148C15.5589 5.87966 13.1046 3.61194 10.1572 3.61194C7.84008 3.61194 5.76525 5.02367 4.9068 7.1636L4.88085 7.22953L4.81866 7.39045L4.30194 7.39037C1.92589 7.39037 0 9.31785 0 11.6952C0 14.046 1.88475 15.9614 4.23105 15.9994L4.29527 16L9.54038 15.9998L9.59239 15.9991ZM9.4971 14.3582H4.30193L4.25102 14.3578C2.80758 14.3343 1.64179 13.1496 1.64179 11.6952C1.64179 10.2243 2.83293 9.03216 4.30193 9.03216L5.94531 9.03219L6.41068 7.82539L6.4326 7.76973C7.03996 6.25576 8.51265 5.25373 10.1572 5.25373C12.2484 5.25373 13.9909 6.86374 14.158 8.94298L14.2973 10.6773L16.5199 10.6773L16.5619 10.6778C17.5547 10.6959 18.3582 11.514 18.3582 12.5178C18.3582 13.5344 17.5351 14.3582 16.52 14.3582L9.68142 14.3582L9.60902 14.3572L9.5763 14.3572L9.4971 14.3582Z" fill="currentColor" />
+    </svg>
+</template>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconFile.vue b/web/satellite/vuetify-poc/src/components/icons/IconFile.vue
index c1c309ea8..0e110b753 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconFile.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconFile.vue
@@ -3,15 +3,15 @@
 
 <template>
     <!-- File Icon -->
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="mr-2" xmlns="http://www.w3.org/2000/svg">
-        <path :fill="color" d="M8.75652 0.799805C9.13527 0.799805 9.49851 0.950259 9.76632 1.21807L13.5258 4.97747C13.7937 5.24529 13.9441 5.60854 13.9441 5.9873V12.9387C13.9441 14.1875 12.9318 15.1998 11.683 15.1998H4.66153C3.41274 15.1998 2.40039 14.1875 2.40039 12.9387V3.06104C2.40039 1.81225 3.41274 0.799805 4.66153 0.799805H8.75652ZM8.17213 2.10889H4.66153C4.14568 2.10889 3.72559 2.51926 3.70993 3.03139L3.70947 3.06104V12.9387C3.70947 13.4545 4.11979 13.8746 4.63188 13.8903L4.66153 13.8907H11.683C12.1989 13.8907 12.6189 13.4804 12.6346 12.9683L12.635 12.9387V6.57167L8.82679 6.57176C8.47412 6.57176 8.18659 6.29284 8.17277 5.94355L8.17225 5.91722L8.17213 2.10889ZM11.9597 5.26259L9.48122 2.78425L9.48134 5.26268L11.9597 5.26259Z" />
+    <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10.9452 1C11.4186 1 11.8726 1.18807 12.2074 1.52283L16.9068 6.22209C17.2416 6.55686 17.4297 7.01092 17.4297 7.48437V16.1736C17.4297 17.7346 16.1642 19 14.6032 19H5.82643C4.26543 19 3 17.7346 3 16.1736V3.82655C3 2.26555 4.26543 1 5.82643 1H10.9452ZM10.2147 2.63635H5.82643C5.18161 2.63635 4.6565 3.14932 4.63692 3.78948L4.63635 3.82655V16.1736C4.63635 16.8184 5.14925 17.3435 5.78936 17.3631L5.82643 17.3636H14.6032C15.2481 17.3636 15.7732 16.8507 15.7927 16.2106L15.7933 16.1736V8.21483L11.033 8.21495C10.5922 8.21495 10.2327 7.86629 10.2155 7.42968L10.2148 7.39677L10.2147 2.63635ZM14.9491 6.57848L11.851 3.48056L11.8512 6.57859L14.9491 6.57848Z" fill="currentColor" />
     </svg>
 </template>
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
-    color: string;
+    size: number | string;
 }>(), {
-    color: 'currentColor',
+    size: 20,
 });
 </script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconGlobe.vue b/web/satellite/vuetify-poc/src/components/icons/IconGlobe.vue
new file mode 100644
index 000000000..599f47912
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/icons/IconGlobe.vue
@@ -0,0 +1,16 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10.075 1L10.1294 1.00046L10.1837 1.00184C10.5902 1.00998 10.9901 1.04507 11.3816 1.1054C11.0975 1.63505 10.9273 2.23272 10.903 2.86705L10.9001 2.86552V17.1345C12.4045 16.3547 13.75 13.5385 13.75 10C13.75 8.83108 13.6032 7.74098 13.3523 6.77708C13.8844 7.01649 14.4763 7.15 15.1 7.15L15.1274 7.14969C15.3042 8.04541 15.4 9.00381 15.4 10C15.4 12.41 14.8396 14.5987 13.9269 16.2142C15.9841 14.9114 17.35 12.6152 17.35 10C17.35 8.87692 17.0981 7.81267 16.6477 6.86067C17.1747 6.65563 17.6493 6.34863 18.0465 5.96456C18.6566 7.17817 19 8.54898 19 10C19 14.8601 15.1477 18.8204 10.33 18.9941L10.1837 18.9982C10.1475 18.9994 10.1113 19 10.075 19H10C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1H10.075ZM9.25004 2.86544C7.74556 3.64516 6.4 6.46138 6.4 10C6.4 13.5386 7.74556 16.3548 9.25004 17.1346V2.86544ZM6.30412 3.64542L6.2252 3.69209C4.08343 4.97653 2.65 7.32087 2.65 10C2.65 12.7119 4.11869 15.0807 6.30405 16.3545C5.34374 14.7267 4.75 12.4805 4.75 10C4.75 7.51948 5.34374 5.27335 6.30412 3.64542ZM15.175 1C16.3348 1 17.275 1.90662 17.275 3.025C17.275 4.14338 16.3348 5.05 15.175 5.05C14.0152 5.05 13.075 4.14338 13.075 3.025C13.075 1.90662 14.0152 1 15.175 1Z" fill="currentColor" />
+    </svg>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    size: number | string;
+}>(), {
+    size: 20,
+});
+</script>
diff --git a/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue b/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue
index 163383983..f4d05a50e 100644
--- a/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue
+++ b/web/satellite/vuetify-poc/src/components/icons/IconTeam.vue
@@ -3,15 +3,18 @@
 
 <template>
     <!-- Team Icon -->
-    <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path :fill="color" fill-rule="evenodd" clip-rule="evenodd" d="M6.59292 2.93258C7.47745 2.04805 8.70097 1.5 10.0515 1.5C11.402 1.5 12.6255 2.04805 13.51 2.93258C14.3946 3.81711 14.9426 5.04064 14.9426 6.39114C14.9426 7.74164 14.3946 8.96517 13.51 9.8497C12.6255 10.7342 11.402 11.2823 10.0515 11.2823C8.70097 11.2823 7.47745 10.7342 6.59292 9.8497C5.70838 8.96517 5.16033 7.74164 5.16033 6.39114C5.16033 5.04064 5.70838 3.81711 6.59292 2.93258ZM10.0515 2.57814C8.9984 2.57814 8.04588 3.00434 7.35528 3.69494C6.66467 4.38555 6.23848 5.33806 6.23848 6.39114C6.23848 7.44422 6.66467 8.39673 7.35528 9.08734C8.04588 9.77795 8.9984 10.2041 10.0515 10.2041C11.1046 10.2041 12.0571 9.77795 12.7477 9.08734C13.4383 8.39673 13.8645 7.44422 13.8645 6.39114C13.8645 5.33806 13.4383 4.38555 12.7477 3.69494C12.0571 3.00434 11.1046 2.57814 10.0515 2.57814ZM9.96087 11.7423L10.0947 11.7433L10.0966 11.7433C11.9281 11.7697 13.66 12.3299 15.1558 13.2961C16.6886 14.2862 17.9725 15.7011 18.8722 17.4074L18.879 17.4202L18.885 17.4333C18.9481 17.5702 19 17.7282 19 17.9137C19 18.2083 18.8799 18.476 18.6873 18.6686C18.4947 18.8612 18.227 18.9813 17.9324 18.9813H2.18398C1.98449 18.9813 1.78824 18.9309 1.61346 18.8348C1.32713 18.6773 1.13129 18.4177 1.04705 18.1275C0.962982 17.838 0.989049 17.5146 1.14566 17.2287L1.14651 17.2271L1.20211 17.1272L1.20277 17.126C2.13132 15.4766 3.42591 14.117 4.95689 13.1758C6.4453 12.2607 8.15595 11.7427 9.9589 11.7423H9.96087ZM9.95726 12.8205C8.36486 12.8212 6.84891 13.2782 5.52155 14.0942C4.15437 14.9348 2.98599 16.1566 2.14294 17.6537L2.14227 17.6549L2.09123 17.7467L2.09073 17.7476C2.07712 17.773 2.07477 17.8005 2.08243 17.8269C2.09021 17.8537 2.10731 17.8759 2.13302 17.8901C2.14863 17.8987 2.16615 17.9032 2.18396 17.9032H17.914C17.9131 17.9009 17.912 17.8984 17.9109 17.8958C17.0938 16.352 15.9367 15.0841 14.5708 14.2017C13.2357 13.3393 11.7002 12.8451 10.083 12.8214L10.0811 12.8214L9.95913 12.8205L9.95726 12.8205Z" />
+    <svg :width="size" :height="size" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path v-if="!bold" fill-rule="evenodd" clip-rule="evenodd" d="M6.59292 2.93258C7.47745 2.04805 8.70097 1.5 10.0515 1.5C11.402 1.5 12.6255 2.04805 13.51 2.93258C14.3946 3.81711 14.9426 5.04064 14.9426 6.39114C14.9426 7.74164 14.3946 8.96517 13.51 9.8497C12.6255 10.7342 11.402 11.2823 10.0515 11.2823C8.70097 11.2823 7.47745 10.7342 6.59292 9.8497C5.70838 8.96517 5.16033 7.74164 5.16033 6.39114C5.16033 5.04064 5.70838 3.81711 6.59292 2.93258ZM10.0515 2.57814C8.9984 2.57814 8.04588 3.00434 7.35528 3.69494C6.66467 4.38555 6.23848 5.33806 6.23848 6.39114C6.23848 7.44422 6.66467 8.39673 7.35528 9.08734C8.04588 9.77795 8.9984 10.2041 10.0515 10.2041C11.1046 10.2041 12.0571 9.77795 12.7477 9.08734C13.4383 8.39673 13.8645 7.44422 13.8645 6.39114C13.8645 5.33806 13.4383 4.38555 12.7477 3.69494C12.0571 3.00434 11.1046 2.57814 10.0515 2.57814ZM9.96087 11.7423L10.0947 11.7433L10.0966 11.7433C11.9281 11.7697 13.66 12.3299 15.1558 13.2961C16.6886 14.2862 17.9725 15.7011 18.8722 17.4074L18.879 17.4202L18.885 17.4333C18.9481 17.5702 19 17.7282 19 17.9137C19 18.2083 18.8799 18.476 18.6873 18.6686C18.4947 18.8612 18.227 18.9813 17.9324 18.9813H2.18398C1.98449 18.9813 1.78824 18.9309 1.61346 18.8348C1.32713 18.6773 1.13129 18.4177 1.04705 18.1275C0.962982 17.838 0.989049 17.5146 1.14566 17.2287L1.14651 17.2271L1.20211 17.1272L1.20277 17.126C2.13132 15.4766 3.42591 14.117 4.95689 13.1758C6.4453 12.2607 8.15595 11.7427 9.9589 11.7423H9.96087ZM9.95726 12.8205C8.36486 12.8212 6.84891 13.2782 5.52155 14.0942C4.15437 14.9348 2.98599 16.1566 2.14294 17.6537L2.14227 17.6549L2.09123 17.7467L2.09073 17.7476C2.07712 17.773 2.07477 17.8005 2.08243 17.8269C2.09021 17.8537 2.10731 17.8759 2.13302 17.8901C2.14863 17.8987 2.16615 17.9032 2.18396 17.9032H17.914C17.9131 17.9009 17.912 17.8984 17.9109 17.8958C17.0938 16.352 15.9367 15.0841 14.5708 14.2017C13.2357 13.3393 11.7002 12.8451 10.083 12.8214L10.0811 12.8214L9.95913 12.8205L9.95726 12.8205Z" fill="currentColor" />
+        <path v-else d="M10.0772 1.5C13.0087 1.5 15.3851 3.87642 15.3851 6.80788C15.3851 8.56688 14.5295 10.126 13.2117 11.0919C15.8554 12.0628 17.9374 14.1988 18.8374 16.8784C18.8652 16.9612 18.8918 17.0445 18.9174 17.1283L18.9548 17.2543C19.1299 17.8598 18.781 18.4927 18.1754 18.6678C18.0724 18.6976 17.9657 18.7127 17.8584 18.7127H2.13186C1.50675 18.7127 1 18.2059 1 17.5808C1 17.4927 1.0103 17.4049 1.03065 17.3192L1.04406 17.2681C1.08085 17.1401 1.12031 17.0133 1.16236 16.8876C2.07214 14.1692 4.19808 12.0091 6.89322 11.0549C5.60362 10.0868 4.76936 8.54476 4.76936 6.80788C4.76936 3.87642 7.14578 1.5 10.0772 1.5ZM10.0014 12.1916C6.85328 12.1916 4.07232 14.1131 2.91359 16.96L2.87976 17.0445H17.1231L17.1225 17.0431C15.9962 14.1805 13.2381 12.2325 10.1006 12.1922L10.0014 12.1916ZM10.0772 3.16819C8.06709 3.16819 6.43755 4.79773 6.43755 6.80788C6.43755 8.81802 8.06709 10.4476 10.0772 10.4476C12.0874 10.4476 13.7169 8.81802 13.7169 6.80788C13.7169 4.79773 12.0874 3.16819 10.0772 3.16819Z" fill="currentColor" />
     </svg>
 </template>
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
-    color: string;
+    size: number | string;
+    bold: boolean;
 }>(), {
-    color: 'currentColor',
+    size: 20,
+    bold: false,
 });
 </script>
diff --git a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
index 5f9dcf8f1..b0cfc91de 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/AppBar.vue
@@ -96,7 +96,7 @@
                 <v-list class="px-2">
                     <v-list-item class="py-2 rounded-lg">
                         <template #prepend>
-                            <img src="@poc/assets/icon-satellite.svg" alt="Region">
+                            <icon-globe size="18" />
                         </template>
                         <v-list-item-title class="text-body-2 ml-3">Region</v-list-item-title>
                         <v-list-item-subtitle class="ml-3">
@@ -117,7 +117,7 @@
 
                     <v-list-item link class="my-1 rounded-lg" router-link to="/account/billing" @click="closeSideNav">
                         <template #prepend>
-                            <img src="@poc/assets/icon-card.svg" alt="Billing">
+                            <icon-card size="18" />
                         </template>
                         <v-list-item-title class="text-body-2 ml-3">
                             Billing
@@ -183,6 +183,9 @@ import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 
+import IconCard from '@poc/components/icons/IconCard.vue';
+import IconGlobe from '@poc/components/icons/IconGlobe.vue';
+
 const activeTheme = ref<number>(0);
 const theme = useTheme();
 
diff --git a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
index 72bb01539..81563b9ba 100644
--- a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
+++ b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
@@ -156,7 +156,7 @@
 
                 <v-list-item link router-link :to="`/projects/${selectedProject.id}/access`" class="my-1" rounded="lg" @click="() => registerLinkClick('/access')">
                     <template #prepend>
-                        <IconAccess />
+                        <IconAccess size="18" />
                     </template>
                     <v-list-item-title class="text-body-2 ml-3">
                         Access
@@ -165,7 +165,7 @@
 
                 <v-list-item link router-link :to="`/projects/${selectedProject.id}/team`" class="my-1" rounded="lg" @click="() => registerLinkClick('/team')">
                     <template #prepend>
-                        <IconTeam />
+                        <IconTeam size="18" />
                     </template>
                     <v-list-item-title class="text-body-2 ml-3">
                         Team
diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue
index 83b49794d..1b3a95d01 100644
--- a/web/satellite/vuetify-poc/src/views/Bucket.vue
+++ b/web/satellite/vuetify-poc/src/views/Bucket.vue
@@ -28,7 +28,7 @@
                     <v-list class="pa-2">
                         <v-list-item rounded="lg" :disabled="!isInitialized" @click.stop="buttonFileUpload">
                             <template #prepend>
-                                <IconFile />
+                                <IconFile size="16" class="mr-2" />
                             </template>
                             <v-list-item-title class="text-body-2 ml-3">
                                 Upload File
diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue
index 35cceb25a..48fd78e74 100644
--- a/web/satellite/vuetify-poc/src/views/Dashboard.vue
+++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue
@@ -47,37 +47,37 @@
 
         <v-row class="d-flex align-center justify-center mt-2">
             <v-col cols="12" sm="6" md="4" lg="2">
-                <CardStatsComponent title="Files" subtitle="Project files" :data="limits.objectCount.toLocaleString()" to="buckets" />
+                <CardStatsComponent icon="file" title="Files" subtitle="Project files" :data="limits.objectCount.toLocaleString()" to="buckets" />
             </v-col>
             <v-col cols="12" sm="6" md="4" lg="2">
-                <CardStatsComponent title="Segments" subtitle="All file pieces" :data="limits.segmentCount.toLocaleString()" to="buckets" />
+                <CardStatsComponent icon="globe" title="Segments" subtitle="All file pieces" :data="limits.segmentCount.toLocaleString()" to="buckets" />
             </v-col>
             <v-col cols="12" sm="6" md="4" lg="2">
-                <CardStatsComponent title="Buckets" subtitle="Project buckets" :data="bucketsCount.toLocaleString()" to="buckets" />
+                <CardStatsComponent icon="bucket" title="Buckets" subtitle="Project buckets" :data="bucketsCount.toLocaleString()" to="buckets" />
             </v-col>
             <v-col cols="12" sm="6" md="4" lg="2">
-                <CardStatsComponent title="Access" subtitle="Project accesses" :data="accessGrantsCount.toLocaleString()" to="access" />
+                <CardStatsComponent icon="access" title="Access" subtitle="Project accesses" :data="accessGrantsCount.toLocaleString()" to="access" />
             </v-col>
             <v-col cols="12" sm="6" md="4" lg="2">
-                <CardStatsComponent title="Team" subtitle="Project members" :data="teamSize.toLocaleString()" to="team" />
+                <CardStatsComponent icon="team" title="Team" subtitle="Project members" :data="teamSize.toLocaleString()" to="team" />
             </v-col>
             <v-col cols="12" sm="6" md="4" lg="2">
-                <CardStatsComponent title="Billing" :subtitle="`${paidTierString} account`" :data="paidTierString" to="/account/billing" />
+                <CardStatsComponent icon="card" title="Billing" :subtitle="`${paidTierString} account`" :data="paidTierString" to="/account/billing" />
             </v-col>
         </v-row>
 
         <v-row class="d-flex align-center justify-center">
             <v-col cols="12" md="6">
-                <UsageProgressComponent title="Storage" :progress="storageUsedPercent" :used="`${usedLimitFormatted(limits.storageUsed)} Used`" :limit="`Limit: ${usedLimitFormatted(limits.storageLimit)}`" :available="`${usedLimitFormatted(availableStorage)} Available`" cta="Need more?" @cta-click="onNeedMoreClicked(LimitToChange.Storage)" />
+                <UsageProgressComponent icon="cloud" title="Storage" :progress="storageUsedPercent" :used="`${usedLimitFormatted(limits.storageUsed)} Used`" :limit="`Limit: ${usedLimitFormatted(limits.storageLimit)}`" :available="`${usedLimitFormatted(availableStorage)} Available`" cta="Need more?" @cta-click="onNeedMoreClicked(LimitToChange.Storage)" />
             </v-col>
             <v-col cols="12" md="6">
-                <UsageProgressComponent title="Download" :progress="egressUsedPercent" :used="`${usedLimitFormatted(limits.bandwidthUsed)} Used`" :limit="`Limit: ${usedLimitFormatted(limits.bandwidthLimit)}`" :available="`${usedLimitFormatted(availableEgress)} Available`" cta="Need more?" @cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)" />
+                <UsageProgressComponent icon="arrow-down" title="Download" :progress="egressUsedPercent" :used="`${usedLimitFormatted(limits.bandwidthUsed)} Used`" :limit="`Limit: ${usedLimitFormatted(limits.bandwidthLimit)}`" :available="`${usedLimitFormatted(availableEgress)} Available`" cta="Need more?" @cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)" />
             </v-col>
             <v-col cols="12" md="6">
-                <UsageProgressComponent title="Segments" :progress="segmentUsedPercent" :used="`${limits.segmentUsed} Used`" :limit="`Limit: ${limits.segmentLimit}`" :available="`${availableSegment} Available`" cta="Learn more" />
+                <UsageProgressComponent icon="globe" title="Segments" :progress="segmentUsedPercent" :used="`${limits.segmentUsed} Used`" :limit="`Limit: ${limits.segmentLimit}`" :available="`${availableSegment} Available`" cta="Learn more" />
             </v-col>
             <v-col cols="12" md="6">
-                <UsageProgressComponent v-if="billingStore.state.coupon" :title="billingStore.state.coupon.name" :progress="couponProgress" :used="`${usedLimitFormatted(limits.storageUsed + limits.bandwidthUsed)} Used`" :limit="`Limit: ${couponValue}`" :available="`${couponRemainingPercent}% Available`" cta="" />
+                <UsageProgressComponent v-if="billingStore.state.coupon" icon="check" :title="billingStore.state.coupon.name" :progress="couponProgress" :used="`${usedLimitFormatted(limits.storageUsed + limits.bandwidthUsed)} Used`" :limit="`Limit: ${couponValue}`" :available="`${couponRemainingPercent}% Available`" cta="" />
             </v-col>
         </v-row>
         <v-col class="pa-0 mt-6" cols="12">