From 0b04dc51720832d15fb78ede8ca330dcf4a16ff6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 5 Aug 2022 10:37:35 +0100
Subject: [PATCH] Use core icon component for app rows

---
 packages/bbui/src/Icon/IconAvatar.svelte            | 4 ++--
 packages/builder/src/components/start/AppRow.svelte | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/bbui/src/Icon/IconAvatar.svelte b/packages/bbui/src/Icon/IconAvatar.svelte
index 8ae2774dbb..b404cdea9f 100644
--- a/packages/bbui/src/Icon/IconAvatar.svelte
+++ b/packages/bbui/src/Icon/IconAvatar.svelte
@@ -24,8 +24,8 @@
     border-radius: 50%;
   }
   .icon :global(.spectrum-Icon) {
-    width: 20px;
-    height: 20px;
+    width: 22px;
+    height: 22px;
   }
   .icon.filled :global(.spectrum-Icon) {
     width: 16px;
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 49f99c9f77..f6f9f70975 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Heading, Button, Icon } from "@budibase/bbui"
+  import { Heading, Button, Icon, IconAvatar } from "@budibase/bbui"
   import AppLockModal from "../common/AppLockModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
 
@@ -10,9 +10,7 @@
 
 <div class="title" data-cy={`${app.devId}`}>
   <div style="display: flex;">
-    <div class="app-icon" style="color: {app.icon?.color || ''}">
-      <Icon size="XL" name={app.icon?.name || "Apps"} />
-    </div>
+    <IconAvatar icon={app.icon?.name || "Apps"} color={app.icon?.color} />
     <div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
       <Heading size="XS">
         {app.name}