Add sync icon to group icon

packages/builder/src/pages/builder/portal/users/_components/SCIMInfo.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { IconAvatar } from "@budibase/bbui"
+
+  export let text = ""
+  export let size = "S"
+</script>
+
+<div class="scim-banner">
+  <IconAvatar
+    name="Sync"
+    {size}
+    background={"var(--spectrum-global-color-gray-500)"}
+  />
+  {text}
+</div>
+
+<style>
+  .scim-banner {
+    display: flex;
+    gap: var(--spacing-s);
+  }
+</style>

packages/builder/src/pages/builder/portal/users/groups/_components/GroupIcon.svelte

@@ -1,8 +1,29 @@
 <script>
   import { IconAvatar } from "@budibase/bbui"
+  import ScimInfo from "../../_components/SCIMInfo.svelte"
 
   export let group
   export let size = "M"
 </script>
 
-<IconAvatar icon={group?.icon} background={group?.color} {size} />
+<div class="icon-group">
+  <IconAvatar icon={group?.icon} background={group?.color} {size} />
+
+  {#if group.scimInfo?.isSync}
+    <div class="scim-sync">
+      <ScimInfo size="XXS" />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .icon-group {
+    position: relative;
+  }
+
+  .scim-sync {
+    position: absolute;
+    bottom: -4px;
+    right: 0;
+  }
+</style>

packages/builder/src/pages/builder/portal/users/groups/_components/GroupNameTableRenderer.svelte

@@ -20,7 +20,7 @@
   .align {
     display: flex;
     align-items: center;
-    overflow: hidden;
+    overflow: visible;
     gap: var(--spacing-m);
     max-width: var(--max-cell-width);
     flex: 1 1 auto;