fix: avatars and some tables

package.json

@@ -21,9 +21,9 @@
     "dependencies": {
         "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@043791aa",
         "@appwrite.io/pink-legacy": "^1.0.0",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@753c7733",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@043791aa ",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

pnpm-lock.yaml

@@ -15,14 +15,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@043791aa
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@043791aa(svelte@4.2.19)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.0
         version: 1.0.0
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@753c7733
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@753c7733(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: 'https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@043791aa '
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@043791aa(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -218,14 +218,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@043791aa':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@043791aa}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733efd753b1a94ab9d28fa3499b580a9f74':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733efd753b1a94ab9d28fa3499b580a9f74}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@043791aa5aa0508322b43a6abebd692137b142f4':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@043791aa5aa0508322b43a6abebd692137b142f4}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -239,8 +239,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.0':
     resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@753c7733':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@753c7733}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@043791aa':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@043791aa}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4089,11 +4089,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@043791aa(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733efd753b1a94ab9d28fa3499b580a9f74(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@043791aa5aa0508322b43a6abebd692137b142f4(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4106,9 +4106,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@753c7733(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@043791aa(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@753c7733efd753b1a94ab9d28fa3499b580a9f74(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@043791aa5aa0508322b43a6abebd692137b142f4(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.2(svelte@4.2.19)

src/lib/commandCenter/panels/ai.svelte

@@ -229,7 +229,7 @@
 
     <div class="footer" slot="footer">
         <div class="u-flex u-cross-center u-gap-4">
-            <AvatarInitials size={32} name={$user.name} />
+            <AvatarInitials size="s" name={$user.name} />
             <form
                 class="input-text-wrapper u-width-full-line"
                 style="--amount-of-buttons: 1;"

src/lib/components/avatar.svelte

@@ -1,15 +1,10 @@
 <script lang="ts">
-    export let size: number;
-    export let src: string;
-    export let name: string;
-    export let color = 'transparent';
+    import { Avatar } from '@appwrite.io/pink-svelte';
+    import type { AvatarProps } from '@appwrite.io/pink-svelte/dist/avatar/Avatar.svelte';
+
+    export let size: AvatarProps['size'] = 'm';
+    export let src: AvatarProps['src'];
+    export let alt: AvatarProps['alt'];
 </script>
 
-<img
-    width={size}
-    height={size}
-    class="avatar"
-    style="--size: {size / 16}rem; background-color: {color};"
-    {src}
-    title={name}
-    alt={name} />
+<Avatar {alt} {src} {size} />

src/lib/components/avatarInitials.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
     import { sdk } from '$lib/stores/sdk';
+    import type { ComponentProps } from 'svelte';
     import Avatar from './avatar.svelte';
 
-    export let name: string;
-    export let size: number;
-    export let background: string | undefined = undefined;
-    export let color = 'black';
+    type AvatarProps = ComponentProps<Avatar>;
 
-    $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2, background).toString();
+    export let name: string;
+    export let size: AvatarProps['size'] = 'm';
+    export let background: string | undefined = undefined;
+
+    $: src = sdk.forConsole.avatars.getInitials(name, 192, 192, background).toString();
 </script>
 
-<Avatar {name} {size} {src} {color} />
+<Avatar alt={name} {size} {src} />

src/lib/components/backupDatabaseAlert.svelte

@@ -8,6 +8,8 @@
     import { upgradeURL } from '$lib/stores/billing';
     import { hideNotification } from '$lib/helpers/notifications';
     import { backupsBannerId, showPolicyAlert } from '$lib/stores/database';
+    import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     function handleClose() {
         showPolicyAlert.set(false);
@@ -38,7 +40,7 @@
                 </Button>
 
                 <Button text on:click={handleClose} event="backup_banner_close">
-                    <span class="icon-x" aria-hidden="true"></span>
+                    <Icon icon={IconX} slot="start" size="s" />
                 </Button>
             </div>
         </svelte:fragment>

src/lib/components/billing/selectPaymentMethod.svelte

@@ -7,6 +7,8 @@
     import { Alert, Card, CreditCardBrandImage } from '..';
     import PaymentModal from './paymentModal.svelte';
     import { capitalize } from '$lib/helpers/string';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let methods: PaymentList;
     export let value: string;
@@ -91,8 +93,8 @@
         </span>
         <svelte:fragment slot="listEnd">
             <Button text on:click={() => (showPaymentModal = true)}>
-                <span class="icon-plus"></span>
-                <span class="text">Add new payment method</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add new payment method
             </Button>
         </svelte:fragment>
     </InputSelectSearch>
@@ -116,7 +118,8 @@
                     <span class="text">No saved payment methods</span>
                 </p>
                 <Button secondary on:click={() => (showPaymentModal = true)}>
-                    <span class="icon-plus"></span> <span class="text">Add</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add
                 </Button>
             </div>
         </Card>

src/lib/components/filters/content.svelte

@@ -14,6 +14,8 @@
     import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
     import { TagList } from '.';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     // We cast to any to not cause type errors in the input components
     /* eslint  @typescript-eslint/no-explicit-any: 'off' */
@@ -151,8 +153,8 @@
             {/if}
         {/if}
         {#if !singleCondition}
-            <Button text disabled={isDisabled} class="u-margin-block-start-4" noMargin submit>
-                <i class="icon-plus" />
+            <Button text disabled={isDisabled} class="u-margin-block-start-4" submit>
+                <Icon icon={IconPlus} slot="start" size="s" />
                 Add condition
             </Button>
         {/if}

src/lib/components/filters/filters.svelte

@@ -14,6 +14,8 @@
         ValidOperators
     } from './store';
     import { createEventDispatcher } from 'svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconFilter } from '@appwrite.io/pink-icons-svelte';
 
     export let query = '[]';
     export let columns: Writable<Column[]>;
@@ -118,7 +120,7 @@
     <Drop bind:show={showFiltersDesktop} noArrow>
         <slot {disabled} toggle={toggleDropdown}>
             <Button secondary on:click={toggleDropdown} {disabled}>
-                <i class="icon-filter u-opacity-50" />
+                <Icon icon={IconFilter} slot="start" size="s" />
                 Filters
                 {#if applied > 0}
                     <span class="inline-tag">
@@ -175,7 +177,7 @@
 <div class="is-only-mobile">
     <slot name="mobile" {disabled} toggle={toggleMobileModal}>
         <Button size="s" secondary on:click={toggleMobileModal} {fullWidthMobile}>
-            <i class="icon-filter u-opacity-50" />
+            <Icon icon={IconFilter} slot="start" size="s" />
             Filters
             {#if applied > 0}
                 <span class="inline-tag">
@@ -185,7 +187,7 @@
         </Button>
     </slot>
 
-    <Modal title="Filters" bind:show={showFiltersMobile} size="big">
+    <Modal title="Filters" bind:show={showFiltersMobile}>
         <span slot="description"> Apply filter rules to refine the table view </span>
         {#if displayQuickFilters}
             <slot name="quick" />
@@ -208,7 +210,6 @@
                 {#if quickFilters}
                     <Button
                         text
-                        noMargin
                         on:click={() => (displayQuickFilters = !displayQuickFilters)}
                         class="u-margin-block-end-auto">
                         {displayQuickFilters ? 'Advanced filters' : 'Quick filters'}

src/lib/components/mfaChallengeFormList.svelte

@@ -28,6 +28,8 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { AuthenticationFactor, type Models } from '@appwrite.io/console';
     import { addNotification } from '$lib/stores/notifications';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconChatAlt, IconDeviceMobile, IconMail } from '@appwrite.io/pink-icons-svelte';
 
     export let factors: Models.MfaFactors & { recoveryCode: boolean };
     /** If true, the form will be submitted automatically when the code is entered. */
@@ -103,8 +105,8 @@
                     fullWidth
                     {disabled}
                     on:click={() => createChallenge(AuthenticationFactor.Totp)}>
-                    <span class="icon-device-mobile u-font-size-20" aria-hidden="true" />
-                    <span class="text">Authenticator app</span>
+                    <Icon icon={IconDeviceMobile} slot="start" size="s" />
+                    Authenticator app
                 </Button>
             {/if}
             {#if factors.email && challengeType != AuthenticationFactor.Email}
@@ -114,7 +116,8 @@
                     {disabled}
                     on:click={() => createChallenge(AuthenticationFactor.Email)}>
                     <span class="icon-mail u-font-size-20" aria-hidden="true" />
-                    <span class="text">Email verification</span>
+                    <Icon icon={IconMail} slot="start" size="s" />
+                    Email verification
                 </Button>
             {/if}
             {#if factors.phone && challengeType != AuthenticationFactor.Phone}
@@ -123,8 +126,8 @@
                     fullWidth
                     {disabled}
                     on:click={() => createChallenge(AuthenticationFactor.Phone)}>
-                    <span class="icon-chat-alt u-font-size-20" aria-hidden="true" />
-                    <span class="text">Phone verification</span>
+                    <Icon icon={IconChatAlt} slot="start" size="s" />
+                    Phone verification
                 </Button>
             {/if}
             {#if factors.recoveryCode && challengeType != AuthenticationFactor.Recoverycode}

src/lib/components/permissions/permissions.svelte

@@ -24,6 +24,8 @@
     import Actions from './actions.svelte';
     import Row from './row.svelte';
     import Table from '$lib/elements/table/table.svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let withCreate = false;
     export let permissions: string[] = [];
@@ -215,9 +217,9 @@
         bind:showUser
         {groups}
         on:create={create}>
-        <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Add role</span>
+        <Button text on:click={() => (showDropdown = !showDropdown)}>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Add role
         </Button>
     </Actions>
 {:else}
@@ -233,7 +235,7 @@
                     {groups}
                     on:create={create}>
                     <Button secondary icon on:click={() => (showDropdown = !showDropdown)}>
-                        <i class="icon-plus" />
+                        <Icon icon={IconPlus} size="s" />
                     </Button>
                 </Actions>
             </div>

src/lib/components/permissions/roles.svelte

@@ -15,6 +15,8 @@
     import Actions from './actions.svelte';
     import type { Permission } from './permissions.svelte';
     import Row from './row.svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let roles: string[] = [];
 
@@ -120,9 +122,9 @@
         bind:showUser
         {groups}
         on:create={create}>
-        <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Add role</span>
+        <Button text on:click={() => (showDropdown = !showDropdown)}>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Add role
         </Button>
     </Actions>
 {:else}
@@ -138,7 +140,7 @@
                     {groups}
                     on:create={create}>
                     <Button secondary icon on:click={() => (showDropdown = !showDropdown)}>
-                        <i class="icon-plus" />
+                        <Icon icon={IconPlus} size="s" />
                     </Button>
                 </Actions>
             </div>

src/lib/components/permissions/row.svelte

@@ -74,7 +74,7 @@
                                     <span class="icon-anonymous" aria-hidden="true" />
                                 </div>
                             {:else if data.name}
-                                <AvatarInitials name={data.name} size={40} />
+                                <AvatarInitials name={data.name} size="s" />
                             {:else}
                                 <div class="avatar is-size-small">
                                     <span class="icon-minus-sm" aria-hidden="true" />

src/lib/components/permissions/team.svelte

@@ -97,7 +97,7 @@
                             </TableCell>
                             <TableCell title="Team">
                                 <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
-                                    <AvatarInitials size={32} name={team.name} />
+                                    <AvatarInitials size="s" name={team.name} />
                                     <div class="u-line-height-1-5">
                                         <div class="body-text-2 u-bold">{team.name}</div>
                                         <div class="u-x-small">{team.$id}</div>

src/lib/components/permissions/user.svelte

@@ -90,7 +90,7 @@
                                 <label class="u-flex u-cross-center u-gap-8" for={user.$id}>
                                     {#if user.email || user.phone}
                                         {#if user.name}
-                                            <AvatarInitials size={32} name={user.name} />
+                                            <AvatarInitials size="s" name={user.name} />
                                             <div class="u-line-height-1-5">
                                                 <div class="body-text-2 u-bold">
                                                     {user.name}

src/lib/components/viewSelector.svelte

@@ -6,8 +6,8 @@
     import { onMount } from 'svelte';
     import { View } from '$lib/helpers/load';
     import type { Column } from '$lib/helpers/types';
-    import { ActionMenu, Layout, Popover, ToggleButton } from '@appwrite.io/pink-svelte';
-    import { IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
+    import { ActionMenu, Icon, Layout, Popover, ToggleButton } from '@appwrite.io/pink-svelte';
+    import { IconViewBoards, IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
     import { goto } from '$app/navigation';
 
     export let columns: Writable<Column[]>;
@@ -82,15 +82,16 @@
 {#if !hideColumns && view === View.Table}
     {#if $columns?.length}
         <Popover let:toggle>
-            <Button size="s" secondary on:click={toggle} {fullWidthMobile}>
-                <span
-                    class="icon-view-boards u-opacity-50"
-                    aria-hidden="true"
-                    aria-label="columns" />
+            <Button
+                size="s"
+                secondary
+                badge={selectedColumnsNumber.toString()}
+                on:click={toggle}
+                {fullWidthMobile}>
+                <Icon slot="start" icon={IconViewBoards} />
                 {#if !hideText}
                     <span class="text {showColsTextMobile ? '' : 'is-only-desktop'}">Columns</span>
                 {/if}
-                <span class="inline-tag">{selectedColumnsNumber}</span>
             </Button>
             <svelte:fragment slot="tooltip">
                 <ActionMenu.Root>

src/lib/elements/forms/button.svelte

@@ -17,6 +17,7 @@
     export let external = false;
     export let href: string = null;
     export let download: string = undefined;
+    export let badge: string = null;
     export let fullWidth = false;
     export let fullWidthMobile = false;
     export let ariaLabel: string = null;
@@ -78,6 +79,7 @@
         on:click={track}
         {size}
         {icon}
+        {badge}
         disabled={internalDisabled}
         variant={secondary ? 'secondary' : text ? 'text' : 'primary'}
         class={resolvedClasses}

src/lib/elements/table/cellHeadCheck.svelte

@@ -26,7 +26,6 @@
 <TableCellHead width={10}>
     <InputCheckbox
         id="select-all"
-        wrapperTag="div"
         indeterminate={someSelected && !allSelected}
         checked={allSelected}
         on:click={handleClick} />

src/lib/layout/activity.svelte

@@ -27,10 +27,10 @@
                         <Layout.Stack direction="row" alignItems="center">
                             {#if log.userEmail}
                                 {#if log.userName}
-                                    <AvatarInitials size={32} name={log.userName} />
+                                    <AvatarInitials size="xs" name={log.userName} />
                                     <Trim>{log.userName}</Trim>
                                 {:else}
-                                    <AvatarInitials size={32} name={log.userEmail} />
+                                    <AvatarInitials size="xs" name={log.userEmail} />
                                     <Trim>{log.userEmail}</Trim>
                                 {/if}
                             {:else}

src/lib/layout/header.svelte

@@ -158,7 +158,7 @@
         {#if $user}
             <div class="drop-wrapper" class:is-open={showDropdown} bind:this={droplistElement}>
                 <button class="user-profile-button" on:click={() => (showDropdown = !showDropdown)}>
-                    <AvatarInitials size={40} name={$user.name || $user.email} />
+                    <AvatarInitials size="m" name={$user.name || $user.email} />
                     <span class="user-profile-info is-only-desktop">
                         <span class="name" data-private>{$user.name || $user.email}</span>
                         {#if $organization}

src/lib/layout/unauthenticated.svelte

@@ -152,10 +152,10 @@
                             {#if currentReview?.image}
                                 <Avatar
                                     src={getImage(currentReview?.image)}
-                                    name={currentReview.name}
-                                    size={40} />
+                                    alt={currentReview.name}
+                                    size="m" />
                             {:else}
-                                <AvatarInitials size={40} name={currentReview.name} />
+                                <AvatarInitials size="m" name={currentReview.name} />
                             {/if}
                             <div>
                                 <p class="body-text-2 u-bold">{currentReview.name}</p>

src/lib/pages/domains/index.svelte

@@ -12,7 +12,8 @@
     import Retry from './wizard/retry.svelte';
     import { Pill } from '$lib/elements';
     import { canWriteRules } from '$lib/stores/roles';
-    import { Layout, Table, Link } from '@appwrite.io/pink-svelte';
+    import { Layout, Table, Link, Icon } from '@appwrite.io/pink-svelte';
+    import { IconDotsHorizontal, IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let rules: Models.ProxyRuleList;
     export let type: ResourceType;
@@ -46,7 +47,8 @@
 {#if $canWriteRules}
     <Layout.Stack alignItems="flex-end">
         <Button on:click={openWizard}>
-            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create domain</span>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create domain
         </Button>
     </Layout.Stack>
 {/if}
@@ -137,7 +139,7 @@
                                 ariaLabel="more options"
                                 on:click={() =>
                                     (showDomainsDropdown[index] = !showDomainsDropdown[index])}>
-                                <span class="icon-dots-horizontal" aria-hidden="true" />
+                                <Icon icon={IconDotsHorizontal} size="s" />
                             </Button>
                             <svelte:fragment slot="list">
                                 {#if domain.status !== 'verified'}

src/lib/wizards/functions/components/repositories.svelte

@@ -9,7 +9,13 @@
     import { repositories } from '$routes/(console)/project-[project]/functions/function-[function]/store';
     import { installation, installations, repository } from '../store';
     import { createEventDispatcher } from 'svelte';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import {
+        IconAzure,
+        IconBitBucket,
+        IconGithub,
+        IconGitlab
+    } from '@appwrite.io/pink-icons-svelte';
 
     const dispatch = createEventDispatcher();
 
@@ -204,20 +210,20 @@
 {:else}
     <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
         <Button href={connectGitHub().toString()} fullWidth secondary>
-            <span class="icon-github" aria-hidden="true" />
-            <span class="text">GitHub</span>
+            <Icon icon={IconGithub} slot="start" size="s" />
+            GitHub
         </Button>
         <Button disabled fullWidth secondary>
-            <span class="icon-gitlab" aria-hidden="true" />
-            <span class="text">GitLab (coming soon)</span>
+            <Icon icon={IconGitlab} slot="start" size="s" />
+            GitLab (coming soon)
         </Button>
         <Button disabled fullWidth secondary>
-            <span class="icon-bitBucket" aria-hidden="true" />
-            <span class="text">BitBucket (coming soon)</span>
+            <Icon icon={IconBitBucket} slot="start" size="s" />
+            BitBucket (coming soon)
         </Button>
         <Button disabled fullWidth secondary>
-            <span class="icon-azure" aria-hidden="true" />
-            <span class="text">Azure (coming soon)</span>
+            <Icon icon={IconAzure} slot="start" size="s" />
+            Azure (coming soon)
         </Button>
     </div>
 {/if}

src/lib/wizards/functions/steps/createRepository.svelte

@@ -12,6 +12,13 @@
     import Repositories from '../components/repositories.svelte';
     import { installation, repository, template, templateConfig } from '../store';
     import { Box } from '$lib/components';
+    import {
+        IconAzure,
+        IconBitBucket,
+        IconGithub,
+        IconGitlab
+    } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     let selectedInstallationId: string;
     let hasInstallations: boolean;
@@ -123,20 +130,20 @@
             {:else}
                 <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
                     <Button href={connectGitHub().toString()} fullWidth secondary>
-                        <span class="icon-github" aria-hidden="true" />
-                        <span class="text">GitHub</span>
+                        <Icon icon={IconGithub} slot="start" size="s" />
+                        GitHub
                     </Button>
                     <Button disabled fullWidth secondary>
-                        <span class="icon-gitlab" aria-hidden="true" />
-                        <span class="text">GitLab (coming soon)</span>
+                        <Icon icon={IconGitlab} slot="start" size="s" />
+                        GitLab (coming soon)
                     </Button>
                     <Button disabled fullWidth secondary>
-                        <span class="icon-bitBucket" aria-hidden="true" />
-                        <span class="text">BitBucket (coming soon)</span>
+                        <Icon icon={IconBitBucket} slot="start" size="s" />
+                        BitBucket (coming soon)
                     </Button>
                     <Button disabled fullWidth secondary>
-                        <span class="icon-azure" aria-hidden="true" />
-                        <span class="text">Azure (coming soon)</span>
+                        <Icon icon={IconAzure} slot="start" size="s" />
+                        Azure (coming soon)
                     </Button>
                 </div>
             {/if}

src/routes/(authenticated)/mfa/+page.svelte

@@ -8,6 +8,8 @@
     import MfaChallengeFormList, { verify } from '$lib/components/mfaChallengeFormList.svelte';
     import { page } from '$app/stores';
     import { addNotification } from '$lib/stores/notifications.js';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
 
     export let data;
 
@@ -55,9 +57,10 @@
     <svelte:fragment slot="top">
         <div class="top u-flex u-position-absolute u-main-center">
             <div class="flex u-width-full-line">
-                <Button text noMargin class="u-border-width-0" on:click={back}>
-                    <span class="icon-cheveron-left u-font-size-20" aria-hidden="true" />
-                    Back</Button>
+                <Button text class="u-border-width-0" on:click={back}>
+                    <Icon icon={IconChevronLeft} slot="start" size="s" />
+                    Back
+                </Button>
             </div>
         </div>
     </svelte:fragment>

src/routes/(console)/account/deleteAccount.svelte

@@ -18,7 +18,7 @@
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="image">
-                <AvatarInitials size={48} name={$user.name} />
+                <AvatarInitials size="l" name={$user.name} />
             </svelte:fragment>
             <svelte:fragment slot="title">
                 <span class="u-bold u-trim-1" data-private>{$user.name}</span>

src/routes/(console)/account/identities.svelte

@@ -10,7 +10,8 @@
     import { Dependencies } from '$lib/constants';
     import { oAuthProviders } from '$lib/stores/oauth-providers';
     import EmptySearch from '$lib/components/emptySearch.svelte';
-    import { Layout, Table } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Table } from '@appwrite.io/pink-svelte';
+    import { IconTrash } from '@appwrite.io/pink-icons-svelte';
 
     async function deleteIdentity(id: string) {
         try {
@@ -80,8 +81,9 @@
                             <Button
                                 text
                                 class="is-only-icon"
-                                on:click={() => deleteIdentity(identity.$id)}
-                                ><span class="icon-trash" aria-hidden="true" /></Button>
+                                on:click={() => deleteIdentity(identity.$id)}>
+                                <Icon icon={IconTrash} size="s" />
+                            </Button>
                         </Table.Cell>
                     </Table.Row>
                 {/each}

src/routes/(console)/account/mfaRecoveryCodes.svelte

@@ -3,6 +3,8 @@
     import { Button } from '$lib/elements/forms';
     import { Table, TableBody, TableCell, TableRow } from '$lib/elements/table';
     import { type Models } from '@appwrite.io/console';
+    import { IconDownload } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     export let showRecoveryCodes = false;
     export let codes: Models.MfaRecoveryCodes = null;
@@ -30,8 +32,8 @@
                         download="appwrite-backups.txt"
                         href={`data:application/octet-stream;charset=utf-8,${formattedBackupCodes}`}
                         text>
-                        <span class="icon-download u-font-size-20" aria-hidden="true" />
-                        <span class="text">Download .txt</span>
+                        <Icon icon={IconDownload} slot="start" size="s" />
+                        Download .txt
                     </Button>
                 </li>
                 <li class="buttons-list-item">

src/routes/(console)/account/organizations/+page.svelte

@@ -21,7 +21,8 @@
     import { toLocaleDate } from '$lib/helpers/date';
     import { BillingPlan } from '$lib/constants';
     import { goto } from '$app/navigation';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
     let addOrganization = false;
@@ -49,8 +50,8 @@
         <Heading tag="h2" size="5">Organizations</Heading>
 
         <Button on:click={createOrg} event="create_organization">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create organization</span>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create organization
         </Button>
     </div>
 

src/routes/(console)/account/payments/billingAddress.svelte

@@ -20,6 +20,8 @@
     import { organizationList, type Organization } from '$lib/stores/organization';
     import { base } from '$app/paths';
     import { Pill } from '$lib/elements';
+    import { IconDotsHorizontal, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     let show = false;
     let showEdit = false;
@@ -112,7 +114,7 @@
                                         on:click={() => {
                                             showDropdown[i] = !showDropdown[i];
                                         }}>
-                                        <span class="icon-dots-horizontal" aria-hidden="true" />
+                                        <Icon icon={IconDotsHorizontal} size="s" />
                                     </Button>
                                     <svelte:fragment slot="list">
                                         <DropListItem
@@ -142,9 +144,9 @@
                 </TableBody>
             </Table>
 
-            <Button text noMargin on:click={() => (show = true)}>
-                <span class="icon-plus" />
-                <span class="text">Add a billing address</span>
+            <Button text on:click={() => (show = true)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add a billing address
             </Button>
         {:else}
             <Empty on:click={() => (show = true)}>

src/routes/(console)/account/payments/paymentMethods.svelte

@@ -25,6 +25,8 @@
     import DeletePaymentModal from './deletePaymentModal.svelte';
     import { hasStripePublicKey, isCloud } from '$lib/system';
     import PaymentModal from '$lib/components/billing/paymentModal.svelte';
+    import { IconDotsHorizontal, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     export let showPayment = false;
     let showDropdown = [];
@@ -106,7 +108,7 @@
                                                 on:click={() => {
                                                     showDropdown[i] = !showDropdown[i];
                                                 }}>
-                                                <span class="icon-dots-horizontal" />
+                                                <Icon icon={IconDotsHorizontal} size="s" />
                                             </Button>
                                             <svelte:fragment slot="list">
                                                 <DropListItem
@@ -138,9 +140,9 @@
                     {/each}
                 </TableBody>
             </Table>
-            <Button text noMargin on:click={() => (showPayment = true)}>
-                <span class="icon-plus" />
-                <span class="text">Add a payment method</span>
+            <Button text on:click={() => (showPayment = true)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add a payment method
             </Button>
         {:else}
             <Empty on:click={() => (showPayment = true)}>

src/routes/(console)/create-organization/+page.svelte

@@ -24,6 +24,8 @@
     import { organizationList, type Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
 
@@ -201,12 +203,9 @@
                     ></SelectPaymentMethod>
                 </FormList>
                 {#if !couponData?.code}
-                    <Button
-                        text
-                        noMargin
-                        class="u-margin-block-start-16"
-                        on:click={() => (showCreditModal = true)}>
-                        <span class="icon-plus"></span> <span class="text">Add credits</span>
+                    <Button text on:click={() => (showCreditModal = true)}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add credits
                     </Button>
                 {/if}
             {/if}

src/routes/(console)/organization-[organization]/+page.svelte

@@ -33,6 +33,8 @@
     import { organization } from '$lib/stores/organization';
     import { canWriteProjects } from '$lib/stores/roles';
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data;
 
@@ -150,8 +152,8 @@
                         on:click={handleCreateProject}
                         event="create_project"
                         disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create project</span>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Create project
                     </Button>
                 {/if}
                 <svelte:fragment slot="list">

src/routes/(console)/organization-[organization]/billing/availableCredit.svelte

@@ -23,7 +23,8 @@
     import { trackEvent } from '$lib/actions/analytics';
     import { upgradeURL } from '$lib/stores/billing';
     import { Pill } from '$lib/elements';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let offset = 0;
     let creditList: CreditList = {
@@ -115,8 +116,8 @@
                 </div>
                 {#if creditList?.total}
                     <Button secondary on:click={handleCredits}>
-                        <span class="icon-plus" aria-hidden="true"></span>
-                        <span class="text">Add credits</span>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add credits
                     </Button>
                 {/if}
             </div>

src/routes/(console)/organization-[organization]/billing/billingAddress.svelte

@@ -15,6 +15,8 @@
     import AddressModal from '$routes/(console)/account/payments/addressModal.svelte';
     import EditAddressModal from '$routes/(console)/account/payments/editAddressModal.svelte';
     import ReplaceAddress from './replaceAddress.svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconDotsHorizontal, IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let billingAddress: Address = null;
 
@@ -81,7 +83,7 @@
                             on:click={() => {
                                 showBillingAddressDropdown = !showBillingAddressDropdown;
                             }}>
-                            <span class="icon-dots-horizontal" aria-hidden="true" />
+                            <Icon icon={IconDotsHorizontal} size="s" />
                         </Button>
                         <svelte:fragment slot="list">
                             {#if billingAddress.userId === $user.$id}
@@ -129,7 +131,7 @@
                                         showCreate = true;
                                     }
                                 }}>
-                                <i class="icon-plus" />
+                                <Icon icon={IconPlus} size="s" />
                             </Button>
                             <svelte:fragment slot="list">
                                 {#if $addressList?.total}

src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte

@@ -19,6 +19,8 @@
     import { currentPlan, organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let search: string;
     let selectedAlert: number;
@@ -145,7 +147,7 @@
                                             ariaLabel="remove alert"
                                             on:click={() =>
                                                 (alerts = alerts.filter((a) => a !== alert))}>
-                                            <span class="icon-x" aria-hidden="true" />
+                                            <Icon icon={IconPlus} size="s" />
                                         </Button>
                                     </TableCell>
                                 </TableRow>

src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte

@@ -22,7 +22,8 @@
     import EditPaymentModal from '$routes/(console)/account/payments/editPaymentModal.svelte';
     import PaymentModal from '$lib/components/billing/paymentModal.svelte';
     import { user } from '$lib/stores/user';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let showDropdown = false;
     let showDropdownBackup = false;
@@ -162,7 +163,7 @@
                                             showPayment = true;
                                         }
                                     }}>
-                                    <i class="icon-plus" />
+                                    <Icon icon={IconPlus} size="s" />
                                 </Button>
                                 <svelte:fragment slot="list">
                                     {#if $paymentMethods.total}
@@ -262,8 +263,8 @@
                                             showPayment = true;
                                         }
                                     }}>
-                                    <span class="icon-plus" />
-                                    <span class="text"> Add a backup payment method </span>
+                                    <Icon icon={IconPlus} slot="start" size="s" />
+                                    Add a backup payment method
                                 </Button>
 
                                 <span

src/routes/(console)/organization-[organization]/change-plan/+page.svelte

@@ -41,6 +41,8 @@
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
     import { VARS } from '$lib/system';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
 
@@ -310,7 +312,8 @@
                             text
                             class="u-margin-block-start-16 align-left"
                             on:click={() => (showCreditModal = true)}>
-                            <span class="icon-plus"></span> <span class="text">Add credits</span>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Add credits
                         </Button>
                     {/if}
                 </FormList>

src/routes/(console)/organization-[organization]/header.svelte

@@ -31,7 +31,8 @@
         isOwner
     } from '$lib/stores/roles';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
-    import { Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Tooltip, Typography } from '@appwrite.io/pink-svelte';
 
     let areMembersLimited: boolean;
     $: organization.subscribe(() => {
@@ -131,8 +132,8 @@
                                 size="s"
                                 on:click={() => newMemberModal.set(true)}
                                 disabled={areMembersLimited}>
-                                <span class="icon-plus" aria-hidden="true" />
-                                <span class="text">Invite</span>
+                                <Icon icon={IconPlus} size="s" slot="start" />
+                                Invite
                             </Button>
                         {/if}
                     </div>

src/routes/(console)/organization-[organization]/members/+page.svelte

@@ -2,8 +2,8 @@
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { AvatarInitials, DropList, DropListItem, PaginationWithLimit } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { Button as ConsoleButton } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { newMemberModal, organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
@@ -15,8 +15,8 @@
     import Edit from './edit.svelte';
     import { getRoleLabel } from '$lib/stores/billing';
     import { Drop } from '$lib/components';
-    import { Layout, Table } from '@appwrite.io/pink-svelte';
-
+    import { IconDotsHorizontal, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Layout, Table, Badge, Button, Icon } from '@appwrite.io/pink-svelte';
     import Upgrade from '$lib/components/roles/upgrade.svelte';
 
     export let data: PageData;
@@ -54,133 +54,127 @@
 </script>
 
 <Container>
-    {#if data.organizationMembers.total}
-        <ContainerHeader
-            title="Members"
-            total={data.organizationMembers.total}
-            buttonText={$isOwner ? 'Invite' : ''}
-            buttonMethod={() => newMemberModal.set(true)}
-            showAlert={false} />
-        <Table.Root>
-            <svelte:fragment slot="header">
-                <Table.Header.Cell>Name</Table.Header.Cell>
-                <Table.Header.Cell>Email</Table.Header.Cell>
-                <Table.Header.Cell
-                    >Roles
-                    <Drop isPopover bind:show={showPopover} display="inline-block">
-                        &nbsp;<button
-                            type="button"
-                            on:click={() => (showPopover = !showPopover)}
-                            aria-label="input tooltip">
-                            <span
-                                class="icon-info"
-                                aria-hidden="true"
-                                style="font-size: var(--icon-size-small)" />
-                        </button>
-                        <svelte:fragment slot="list">
-                            <div
-                                class="dropped card u-max-width-300 u-break-word"
-                                style:--card-border-radius="var(--border-radius-small)"
-                                style:--p-card-padding=".75rem"
-                                style:box-shadow="var(--shadow-large)">
-                                <svelte:component this={Upgrade} />
-                            </div>
-                        </svelte:fragment>
-                    </Drop>
-                </Table.Header.Cell>
-                <Table.Header.Cell>2FA</Table.Header.Cell>
-                {#if $isOwner}
-                    <Table.Header.Cell />
-                {/if}
-            </svelte:fragment>
-            {#each data.organizationMembers.memberships as member, index}
-                <Table.Row>
-                    <Table.Cell>
-                        <Layout.Stack direction="row" alignItems="center">
-                            <AvatarInitials size={40} name={member.userName} />
-                            <span class="u-trim">
-                                {member.userName ? member.userName : 'n/a'}
-                            </span>
-                            {#if member.invited && !member.joined}
-                                <Pill warning>Pending</Pill>
-                            {/if}
-                        </Layout.Stack>
-                    </Table.Cell>
-                    <Table.Cell>
-                        {member.userEmail}
-                    </Table.Cell>
-                    <Table.Cell>
-                        {member.roles.map((role) => getRoleLabel(role)).join(', ')}
-                    </Table.Cell>
-                    <Table.Cell>
-                        <Pill success={member.mfa}>
-                            {#if member.mfa}
-                                <span
-                                    class="icon-check-circle u-color-text-success"
-                                    aria-hidden="true" />
-                                <p class="text">enabled</p>
-                            {:else}
-                                <p class="text">disabled</p>
-                            {/if}
-                        </Pill>
-                    </Table.Cell>
-                    {#if $isOwner}
-                        <Table.Cell>
-                            <DropList
-                                bind:show={showDropdown[index]}
-                                placement="bottom-start"
-                                noArrow>
-                                <button
-                                    class="button is-only-icon is-text"
-                                    aria-label="More options"
-                                    on:click|preventDefault={() => {
-                                        showDropdown[index] = !showDropdown[index];
-                                    }}>
-                                    <span class="icon-dots-horizontal" aria-hidden="true" />
-                                </button>
-                                <svelte:fragment slot="list">
-                                    <DropListItem
-                                        icon="pencil"
-                                        on:click={() => {
-                                            selectedMember = member;
-                                            showEdit = true;
-                                            showDropdown[index] = false;
-                                        }}>
-                                        Edit role
-                                    </DropListItem>
-                                    {#if member.invited && !member.joined}
-                                        <DropListItem
-                                            icon="refresh"
-                                            on:click={() => {
-                                                resend(member);
-                                                showDropdown[index] = false;
-                                            }}>
-                                            Resend
-                                        </DropListItem>
-                                    {/if}
-                                    <DropListItem
-                                        icon="trash"
-                                        on:click={() => {
-                                            selectedMember = member;
-                                            showDelete = true;
-                                            showDropdown[index] = false;
-                                        }}>
-                                        Remove
-                                    </DropListItem>
-                                </svelte:fragment>
-                            </DropList>
-                        </Table.Cell>
-                    {/if}
-                </Table.Row>
-            {/each}
-        </Table.Root>
+    <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+        <ConsoleButton on:mousedown={() => newMemberModal.set(true)} event="create_user" size="s">
+            <Icon size="s" icon={IconPlus} slot="start" />
+            <span class="text">Invite</span>
+        </ConsoleButton>
+    </Layout.Stack>
 
-        <PaginationWithLimit
-            name="Members"
-            limit={data.limit}
-            offset={data.offset}
-            total={data.members.total} />
-    {/if}
+    <Table.Root>
+        <svelte:fragment slot="header">
+            <Table.Header.Cell>Name</Table.Header.Cell>
+            <Table.Header.Cell>Email</Table.Header.Cell>
+            <Table.Header.Cell
+                >Roles
+                <Drop isPopover bind:show={showPopover} display="inline-block">
+                    &nbsp;<button
+                        type="button"
+                        on:click={() => (showPopover = !showPopover)}
+                        aria-label="input tooltip">
+                        <span
+                            class="icon-info"
+                            aria-hidden="true"
+                            style="font-size: var(--icon-size-small)" />
+                    </button>
+                    <svelte:fragment slot="list">
+                        <div
+                            class="dropped card u-max-width-300 u-break-word"
+                            style:--card-border-radius="var(--border-radius-small)"
+                            style:--p-card-padding=".75rem"
+                            style:box-shadow="var(--shadow-large)">
+                            <svelte:component this={Upgrade} />
+                        </div>
+                    </svelte:fragment>
+                </Drop>
+            </Table.Header.Cell>
+            <Table.Header.Cell>2FA</Table.Header.Cell>
+            {#if $isOwner}
+                <Table.Header.Cell width="40px" />
+            {/if}
+        </svelte:fragment>
+        {#each data.organizationMembers.memberships as member, index}
+            <Table.Row>
+                <Table.Cell width="40%">
+                    <Layout.Stack direction="row" alignItems="center" gap="s">
+                        <AvatarInitials size="xs" name={member.userName} />
+                        <span class="u-trim">
+                            {member.userName ? member.userName : 'n/a'}
+                        </span>
+                        {#if member.invited && !member.joined}
+                            <Badge type="warning" variant="secondary" content="Pending" />
+                        {/if}
+                    </Layout.Stack>
+                </Table.Cell>
+                <Table.Cell width="30%">
+                    {member.userEmail}
+                </Table.Cell>
+                <Table.Cell width="20%">
+                    {member.roles.map((role) => getRoleLabel(role)).join(', ')}
+                </Table.Cell>
+                <Table.Cell width="10%">
+                    <Badge
+                        size="xs"
+                        type={member.mfa ? 'success' : undefined}
+                        variant="secondary"
+                        content={member.mfa ? 'Enabled' : 'Disabled'} />
+                </Table.Cell>
+                {#if $isOwner}
+                    <Table.Cell>
+                        <DropList bind:show={showDropdown[index]} placement="bottom-end" noArrow>
+                            <Button.Button
+                                icon
+                                variant="text"
+                                size="s"
+                                aria-label="More options"
+                                on:click={(e) => {
+                                    e.preventDefault();
+                                    showDropdown[index] = !showDropdown[index];
+                                }}>
+                                <Icon icon={IconDotsHorizontal} size="m" />
+                            </Button.Button>
+                            <svelte:fragment slot="list">
+                                <DropListItem
+                                    icon="pencil"
+                                    on:click={() => {
+                                        selectedMember = member;
+                                        showEdit = true;
+                                        showDropdown[index] = false;
+                                    }}>
+                                    Edit role
+                                </DropListItem>
+                                {#if member.invited && !member.joined}
+                                    <DropListItem
+                                        icon="refresh"
+                                        on:click={() => {
+                                            resend(member);
+                                            showDropdown[index] = false;
+                                        }}>
+                                        Resend
+                                    </DropListItem>
+                                {/if}
+                                <DropListItem
+                                    icon="trash"
+                                    on:click={() => {
+                                        selectedMember = member;
+                                        showDelete = true;
+                                        showDropdown[index] = false;
+                                    }}>
+                                    Remove
+                                </DropListItem>
+                            </svelte:fragment>
+                        </DropList>
+                    </Table.Cell>
+                {/if}
+            </Table.Row>
+        {/each}
+    </Table.Root>
+
+    <PaginationWithLimit
+        name="Members"
+        limit={data.limit}
+        offset={data.offset}
+        total={data.members.total} />
 </Container>
 
 <Delete {selectedMember} bind:showDelete />

src/routes/(console)/organization-[organization]/members/+page.ts

@@ -1,5 +1,5 @@
 import { Dependencies, PAGE_LIMIT } from '$lib/constants';
-import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
@@ -8,15 +8,18 @@ export const load: PageLoad = async ({ url, params, route, depends }) => {
     depends(Dependencies.ORGANIZATION);
     depends(Dependencies.MEMBERS);
     const page = getPage(url);
+    const search = getSearch(url);
     const limit = getLimit(url, route, PAGE_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
         offset,
         limit,
-        organizationMembers: await sdk.forConsole.teams.listMemberships(params.organization, [
-            Query.limit(limit),
-            Query.offset(offset)
-        ])
+        search,
+        organizationMembers: await sdk.forConsole.teams.listMemberships(
+            params.organization,
+            [Query.limit(limit), Query.offset(offset)],
+            search
+        )
     };
 };

src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte

@@ -17,7 +17,8 @@
     import { plansInfo, tierToPlan } from '$lib/stores/billing';
     import { newMemberModal, organization } from '$lib/stores/organization';
     import type { Models } from '@appwrite.io/console';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
 
     export let members: Models.MembershipList;
 
@@ -38,7 +39,8 @@
                         <span class="body-text-1 u-bold">Members</span>
                     </p>
                     <Button secondary on:click={() => newMemberModal.set(true)}>
-                        <span class="icon-plus"></span> <span class="text">Invite</span>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Invite
                     </Button>
                 </div>
                 <p class="body-text-2">
@@ -64,7 +66,7 @@
                             <TableRow>
                                 <TableCell title="name">
                                     <div class="u-flex u-gap-12 u-cross-center">
-                                        <AvatarInitials size={32} name={member.userName} />
+                                        <AvatarInitials size="s" name={member.userName} />
                                         <span class="text u-trim">
                                             {member.userName ? member.userName : member.userEmail}
                                         </span>

src/routes/(console)/project-[project]/auth/+page.svelte

@@ -25,10 +25,23 @@
     import { Tag } from '@appwrite.io/pink-svelte';
     import { IconDuplicate, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { canWriteUsers } from '$lib/stores/roles';
+    import type { Column } from '$lib/helpers/types';
+    import ViewSelector from '$lib/components/viewSelector.svelte';
+    import { View } from '$lib/helpers/load';
 
     export let data: PageData;
 
     const projectId = $page.params.project;
+    const columns = writable<Column[]>([
+        { id: '$id', title: 'User ID', type: 'string', show: true, width: 140 },
+        { id: 'name', title: 'Name', type: 'string', show: true, width: 260 },
+        { id: 'identifiers', title: 'Identifiers', type: 'string', show: true, width: 140 },
+        { id: 'status', title: 'Status', type: 'string', show: true, width: 140 },
+        { id: 'labels', title: 'Labels', type: 'string', show: false, width: 140 },
+        { id: 'joined', title: 'Joined', type: 'string', show: true, width: 140 },
+        { id: 'lastActivity', title: 'Last activity', type: 'string', show: false, width: 140 }
+    ]);
+
     async function userCreated(event: CustomEvent<Models.User<Record<string, unknown>>>) {
         await goto(`${base}/project-${projectId}/auth/user-${event.detail.$id}`);
     }
@@ -40,6 +53,7 @@
             <SearchQuery search={data.search} placeholder="Search by name, email, phone, or ID" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <ViewSelector view={View.Table} {columns} hideView allowNoColumns showColsTextMobile />
             <Button on:mousedown={() => ($showCreateUser = true)} event="create_user" size="s">
                 <Icon size="s" icon={IconPlus} slot="start" />
                 <span class="text">Create user</span>
@@ -50,21 +64,104 @@
     {#if data.users.total}
         <Table.Root>
             <svelte:fragment slot="header">
-                <Table.Header.Cell>Name</Table.Header.Cell>
-                <Table.Header.Cell>Identifiers</Table.Header.Cell>
-                <Table.Header.Cell width="130px">Status</Table.Header.Cell>
-                <Table.Header.Cell width="100px">ID</Table.Header.Cell>
-                <Table.Header.Cell width="100px">Labels</Table.Header.Cell>
-                <Table.Header.Cell>Joined</Table.Header.Cell>
-                <Table.Header.Cell>Last Activity</Table.Header.Cell>
+                {#each $columns as column (column.id)}
+                    {#if column.show}
+                        <Table.Header.Cell>{column.title}</Table.Header.Cell>
+                    {/if}
+                {/each}
             </svelte:fragment>
             {#each data.users.users as user}
                 <Table.Link href={`${base}/project-${projectId}/auth/user-${user.$id}`}>
-                    <Table.Cell>
-                        <Layout.Stack direction="row" alignItems="center">
+                    {#each $columns as column (column.id)}
+                        {#if column.show}
+                            {#if column.id === '$id'}
+                                <Table.Cell width={column.width + 'px'}>
+                                    <Copy value={user.$id} event="user">
+                                        <Tag size="xs" variant="code">
+                                            <Icon size="s" icon={IconDuplicate} />
+                                            {user.$id}
+                                        </Tag>
+                                    </Copy>
+                                </Table.Cell>
+                            {:else if column.id === 'name'}
+                                <Table.Cell>
+                                    <Layout.Stack direction="row" alignItems="center" gap="s">
+                                        {#if user.email || user.phone}
+                                            {#if user.name}
+                                                <AvatarInitials size="xs" name={user.name} />
+                                                <span>
+                                                    {user.name}
+                                                </span>
+                                            {:else}
+                                                <div class="avatar is-size-small">
+                                                    <span
+                                                        class="icon-minus-sm"
+                                                        aria-hidden="true" />
+                                                </div>
+                                            {/if}
+                                        {:else}
+                                            <div class="avatar is-size-small">
+                                                <span class="icon-anonymous" aria-hidden="true" />
+                                            </div>
+                                            <span class="text u-trim">{user.name}</span>
+                                        {/if}
+                                    </Layout.Stack>
+                                </Table.Cell>
+                            {:else if column.id === 'identifiers'}
+                                <Table.Cell>
+                                    {user.email && user.phone
+                                        ? [user.email, user.phone].join(',')
+                                        : user.email || user.phone}
+                                </Table.Cell>
+                            {:else if column.id === 'status'}
+                                <Table.Cell>
+                                    {#if user.status}
+                                        {@const success =
+                                            user.emailVerification || user.phoneVerification}
+                                        <Badge
+                                            size="xs"
+                                            variant="secondary"
+                                            type={success ? 'success' : undefined}
+                                            content={user.emailVerification &&
+                                            user.phoneVerification
+                                                ? 'verified'
+                                                : user.emailVerification
+                                                  ? 'verified email'
+                                                  : user.phoneVerification
+                                                    ? 'verified phone'
+                                                    : 'unverified'} />
+                                    {:else}
+                                        <Badge
+                                            size="xs"
+                                            variant="secondary"
+                                            type="error"
+                                            content="blocked" />
+                                    {/if}
+                                </Table.Cell>
+                            {:else if column.id === 'labels'}
+                                <Table.Cell>
+                                    {user.labels.join(', ')}
+                                </Table.Cell>
+                            {:else if column.id === 'joined'}
+                                <Table.Cell>
+                                    {toLocaleDateTime(user.registration)}
+                                </Table.Cell>
+                            {:else if column.id === 'lastActivity'}
+                                <Table.Cell>
+                                    {user.accessedAt ? toLocaleDate(user.accessedAt) : 'never'}
+                                </Table.Cell>
+                            {:else}
+                                <Table.Cell width={column.width + 'px'}>
+                                    {user[column.id]}
+                                </Table.Cell>
+                            {/if}
+                        {/if}
+                    {/each}
+                    <!-- <Table.Cell>
+                        <Layout.Stack direction="row" alignItems="center" gap="s">
                             {#if user.email || user.phone}
                                 {#if user.name}
-                                    <AvatarInitials size={32} name={user.name} />
+                                    <AvatarInitials size="xs" name={user.name} />
                                     <span class="text u-trim">{user.name}</span>
                                 {:else}
                                     <div class="avatar is-size-small">
@@ -104,9 +201,9 @@
                     </Table.Cell>
                     <Table.Cell>
                         <Copy value={user.$id} event="user">
-                            <Tag size="xs">
+                            <Tag size="xs" variant="code">
                                 <Icon size="s" icon={IconDuplicate} />
-                                User ID
+                                {user.$id}
                             </Tag>
                         </Copy>
                     </Table.Cell>
@@ -118,7 +215,7 @@
                     </Table.Cell>
                     <Table.Cell>
                         {user.accessedAt ? toLocaleDate(user.accessedAt) : 'never'}
-                    </Table.Cell>
+                    </Table.Cell> -->
                 </Table.Link>
             {/each}
         </Table.Root>

src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte

@@ -17,7 +17,8 @@
     import { app } from '$lib/stores/app';
     import Empty from '$lib/components/empty.svelte';
     import type { Models } from '@appwrite.io/console';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let numbers: Models.MockNumber[] = $project?.authMockNumbers ?? [];
     let initialNumbers = [];
@@ -217,8 +218,8 @@
                                 otp: generateOTP()
                             })}
                         disabled={numbers.length >= 10}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Add number</span>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add number
                     </Button>
                 {/if}
             {:else}

src/routes/(console)/project-[project]/auth/teams/+page.svelte

@@ -21,7 +21,8 @@
     import type { PageData } from './$types';
     import { writable } from 'svelte/store';
     import { canWriteTeams } from '$lib/stores/roles';
-    import { Layout, Table } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Table } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 
@@ -38,8 +39,8 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <Button on:mousedown={() => ($showCreateTeam = true)} event="create_user" size="s">
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create team</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create team
             </Button>
         </Layout.Stack>
     </Layout.Stack>
@@ -55,7 +56,7 @@
                 <Table.Link href={`${base}/project-${project}/auth/teams/team-${team.$id}`}>
                     <Table.Cell>
                         <Layout.Stack direction="row" alignItems="center">
-                            <AvatarInitials size={32} name={team.name} />
+                            <AvatarInitials size="xs" name={team.name} />
                             <span class="u-trim">{team.name}</span>
                         </Layout.Stack>
                     </Table.Cell>

src/routes/(console)/project-[project]/auth/teams/team-[team]/+page.svelte

@@ -11,7 +11,7 @@
 <Container>
     <CardGrid>
         <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
-            <AvatarInitials size={48} name={$team.name} />
+            <AvatarInitials size="l" name={$team.name} />
             <div>
                 <Heading tag="h6" size="7">{$team.name}</Heading>
             </div>

src/routes/(console)/project-[project]/auth/teams/team-[team]/dangerZone.svelte

@@ -19,7 +19,7 @@
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="image">
-                <AvatarInitials size={48} name={$team.name} />
+                <AvatarInitials size="l" name={$team.name} />
             </svelte:fragment>
             <svelte:fragment slot="title">
                 <h6 class="u-bold u-trim-1">{$team.name}</h6>

src/routes/(console)/project-[project]/auth/teams/team-[team]/members/+page.svelte

@@ -1,12 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import {
-        Empty,
-        EmptySearch,
-        AvatarInitials,
-        SearchQuery,
-        PaginationWithLimit
-    } from '$lib/components';
+    import { Empty, EmptySearch, AvatarInitials, PaginationWithLimit } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
@@ -18,7 +12,8 @@
     import DeleteMembership from '../deleteMembership.svelte';
     import { Dependencies } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
-    import { Table, Layout } from '@appwrite.io/pink-svelte';
+    import { Table, Layout, Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 
@@ -34,16 +29,11 @@
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery search={data.search} placeholder="Search by ID" />
-        </Layout.Stack>
-        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <Button on:mousedown={() => (showCreate = true)} event="create_membership" size="s">
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create membership</span>
-            </Button>
-        </Layout.Stack>
+    <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+        <Button on:mousedown={() => (showCreate = true)} event="create_membership" size="s">
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create membership
+        </Button>
     </Layout.Stack>
 
     {#if data.memberships.total}
@@ -58,7 +48,7 @@
                 <Table.Link href={`${base}/project-${project}/auth/user-${membership.userId}`}>
                     <Table.Cell>
                         <Layout.Stack direction="row" alignItems="center">
-                            <AvatarInitials size={32} name={membership.teamName} />
+                            <AvatarInitials size="xs" name={membership.teamName} />
                             <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
                         </Layout.Stack>
                     </Table.Cell>

src/routes/(console)/project-[project]/auth/teams/team-[team]/updatePrefs.svelte

@@ -8,7 +8,8 @@
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { team } from './store';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     $: if (prefs) {
         if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($team.prefs))) {
@@ -106,8 +107,8 @@
                         prefs = prefs;
                     }
                 }}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Add Preference</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add Preference
             </Button>
         </svelte:fragment>
 

src/routes/(console)/project-[project]/auth/user-[user]/dangerZone.svelte

@@ -35,7 +35,7 @@
             <svelte:fragment slot="image">
                 {#if $user.email || $user.phone}
                     {#if $user.name}
-                        <AvatarInitials size={48} name={$user.name} />
+                        <AvatarInitials size="l" name={$user.name} />
                     {:else}
                         <div class="avatar">
                             <span class="icon-minus-sm" aria-hidden="true" />

src/routes/(console)/project-[project]/auth/user-[user]/memberships/+page.svelte

@@ -33,7 +33,7 @@
                     href={`${base}/project-${project}/auth/teams/team-${membership.teamId}`}>
                     <Table.Cell>
                         <Layout.Stack direction="row" alignItems="center">
-                            <AvatarInitials size={32} name={membership.teamName} />
+                            <AvatarInitials size="xs" name={membership.teamName} />
                             <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
                         </Layout.Stack>
                     </Table.Cell>

src/routes/(console)/project-[project]/auth/user-[user]/targets/+page.svelte

@@ -16,6 +16,8 @@
     import { View } from '$lib/helpers/load';
     import Create from './create.svelte';
     import { Pill } from '$lib/elements';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
     let showAdd = false;
@@ -46,8 +48,8 @@
             <!-- TODO: Remove u-hide to add creating a target -->
             <div class="is-only-mobile u-hide">
                 <Button on:click={() => (showAdd = true)} event="create_user_target">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add target</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add target
                 </Button>
             </div>
             <!-- TODO: Remove when searching is added -->
@@ -62,8 +64,8 @@
                         showColsTextMobile />
                     <div class="u-hide">
                         <Button on:click={() => (showAdd = true)} event="create_user_target">
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Add target</span>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Add target
                         </Button>
                     </div>
                 </div>

src/routes/(console)/project-[project]/auth/user-[user]/updateMfa.svelte

@@ -20,6 +20,8 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let showDelete = false;
     let userMfa: boolean = null;
@@ -81,9 +83,9 @@
                         </TableRow>
                     </TableBody>
                 </Table>
-                <Button disabled text noMargin>
-                    <span class="icon-plus" />
-                    <span class="text">Add authentication factor</span>
+                <Button disabled text>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add authentication factor
                 </Button>
             {:else}
                 <EmptySearch hidePagination hidePages>

src/routes/(console)/project-[project]/auth/user-[user]/updatePrefs.svelte

@@ -8,7 +8,8 @@
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { user } from './store';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     $: if (prefs) {
         if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($user.prefs))) {
@@ -99,8 +100,8 @@
                         prefs = prefs;
                     }
                 }}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Add preference</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add preference
             </Button>
         </svelte:fragment>
 

src/routes/(console)/project-[project]/auth/user-[user]/updateStatus.svelte

@@ -80,7 +80,7 @@
     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
         {#if $user.email || $user.phone}
             {#if $user.name}
-                <AvatarInitials size={48} name={$user.name} />
+                <AvatarInitials size="l" name={$user.name} />
                 <Heading tag="h6" size="7">{$user.name}</Heading>
             {:else}
                 <div class="avatar">

src/routes/(console)/project-[project]/databases/+page.svelte

@@ -14,7 +14,8 @@
     import Table from './table.svelte';
     import { registerCommands } from '$lib/commandCenter';
     import { canWriteDatabases } from '$lib/stores/roles';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 
@@ -58,8 +59,8 @@
                     on:click={() => (showCreate = true)}
                     event="create_database"
                     disabled={isCreationDisabled}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Create database</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create database
                 </Button>
             {/if}
         </Layout.Stack>

src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte

@@ -7,7 +7,8 @@
     import Grid from './grid.svelte';
     import type { PageData } from './$types';
     import { canWriteCollections } from '$lib/stores/roles';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 </script>
@@ -25,8 +26,8 @@
                 hideView={!data.collections.total} />
             {#if $canWriteCollections}
                 <Button on:click={() => ($showCreate = true)} event="create_collection">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Create collection</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create collection
                 </Button>
             {/if}
         </Layout.Stack>

src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte

@@ -4,6 +4,8 @@
     import { Pill } from '$lib/elements';
     import { wizard } from '$lib/stores/wizard';
     import SupportWizard from '$routes/(console)/supportWizard.svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let isFlex = true;
     export let title: string;
@@ -58,7 +60,7 @@
             disabled={buttonDisabled}
             text={buttonType === 'text'}
             secondary={buttonType === 'secondary'}>
-            <span class="icon-plus" aria-hidden="true" />
+            <Icon icon={IconPlus} slot="start" size="s" />
             {buttonText}
         </Button>
     {/if}

src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte

@@ -16,7 +16,8 @@
     import type { BackupPolicy, BackupPolicyList } from '$lib/sdk/backups';
     import { backupFrequencies } from '$lib/helpers/backups';
     import { trackEvent } from '$lib/actions/analytics';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let showDropdown = [];
     let showDelete = false;
@@ -263,8 +264,8 @@
                             event="create_policy"
                             class="small-radius-border-button"
                             on:click={() => (showCreatePolicy = true)}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Create policy</span>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Create policy
                         </Button>
                     </div>
                 </div>

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte

@@ -9,6 +9,7 @@
     import { preferences } from '$lib/stores/preferences';
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
     import { wizard } from '$lib/stores/wizard';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
@@ -16,6 +17,7 @@
     import Create from './createDocument.svelte';
     import { collection, columns } from './store';
     import Table from './table.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 
@@ -55,8 +57,8 @@
                     disabled={!(hasAttributes && hasValidAttributes)}
                     on:click={openWizard}
                     event="create_document">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Create document</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create document
                 </Button>
             </div>
 
@@ -78,8 +80,8 @@
                         disabled={!(hasAttributes && hasValidAttributes)}
                         on:click={openWizard}
                         event="create_document">
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create document</span>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Create document
                     </Button>
                 </div>
             </div>

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
     import { DropList, DropListItem } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { attributeOptions, type Option } from './store';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let showCreateDropdown = false;
 
@@ -14,8 +16,8 @@
         <Button
             on:click={() => (showCreateDropdown = !showCreateDropdown)}
             event="create_attribute">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create attribute</span>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create attribute
         </Button>
     </slot>
     <svelte:fragment slot="list">

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import { Button, FormList } from '$lib/elements/forms';
     import { capitalize } from '$lib/helpers/string';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import type { Attributes } from '../store';
     import Attribute from './attribute.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let attribute: Attributes;
     export let formValues: object = {};
@@ -52,9 +54,9 @@
                     {getAttributeType(attribute)}
                 </span>
             </span>
-            <Button text noMargin on:click={() => addArrayItem(attribute.key)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Add item</span>
+            <Button text on:click={() => addArrayItem(attribute.key)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add item
             </Button>
         </div>
     {:else}
@@ -80,9 +82,9 @@
                     </div>
                 </li>
             {/each}
-            <Button text noMargin on:click={() => addArrayItem(attribute.key)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text"> Add item</span>
+            <Button text on:click={() => addArrayItem(attribute.key)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add item
             </Button>
         </ul>
     {/if}

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte

@@ -9,6 +9,8 @@
     import { onMount } from 'svelte';
     import { doc } from '../store';
     import { isRelationshipToMany } from './store';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let id: string;
     export let label: string;
@@ -109,8 +111,8 @@
                     on:click={() => {
                         showInput = true;
                     }}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add item</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add item
                 </Button>
             {/if}
         </div>
@@ -242,8 +244,8 @@
                 on:click={() => {
                     showInput = true;
                 }}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Add item</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add item
             </Button>
         {/if}
     </div>

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte

@@ -22,6 +22,8 @@
     import type { Option } from '../attributes/store';
     import FailedModal from '../failedModal.svelte';
     import { canWriteCollections } from '$lib/stores/roles';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let showDropdown = [];
     let selectedIndex: Models.Index = null;
@@ -44,8 +46,8 @@
                 event="create_index"
                 disabled={!$collection?.attributes?.length}
                 on:click={() => (showCreateIndex = true)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create index</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create index
             </Button>
         {/if}
     </div>

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte

@@ -13,6 +13,8 @@
     import { isRelationship } from '../document-[document]/attributes/store';
     import { type Attributes, collection, indexes } from '../store';
     import Select from './select.svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let showCreateIndex = false;
     export let externalAttribute: Attributes = null;
@@ -156,9 +158,9 @@
             </li>
         {/each}
 
-        <Button text noMargin on:click={addAttribute} disabled={addAttributeDisabled}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Add attribute</span>
+        <Button text on:click={addAttribute} disabled={addAttributeDisabled}>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Add attribute
         </Button>
     </FormList>
     <svelte:fragment slot="footer">

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte

@@ -10,6 +10,8 @@
     import { attributes } from '../store';
     import { preferences } from '$lib/stores/preferences';
     import { page } from '$app/stores';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     const collectionId = $page.params.collection;
     let names: string[] = [...(preferences.getDisplayNames()?.[collectionId] ?? [])];
@@ -121,7 +123,6 @@
                     {/if}
                 </ul>
                 <Button
-                    noMargin
                     text
                     disabled={addAttributeDisabled}
                     on:click={() => {
@@ -129,8 +130,8 @@
                         search = null;
                         names = names;
                     }}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add attribute</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add attribute
                 </Button>
             </div>
         </svelte:fragment>

src/routes/(console)/project-[project]/functions/function-[function]/executions/+page.svelte

@@ -227,8 +227,7 @@
             <Button
                 text
                 on:click={() => (showMobileFilters = !showMobileFilters)}
-                ariaLabel="toggle filters"
-                noMargin>
+                ariaLabel="toggle filters">
                 <span class="icon-filter-line" />
                 <span class="text">Filters</span>
             </Button>

src/routes/(console)/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte

@@ -42,7 +42,8 @@
         toLocaleTimeISO
     } from '$lib/helpers/date';
     import { last } from '$lib/helpers/array';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let previousPage: string = `${base}/project-${$page.params.project}/functions/function-${$page.params.function}/executions`;
 
@@ -221,7 +222,6 @@
                                         bind:value />
                                     <Button
                                         text
-                                        noMargin
                                         disabled={(!name || !value) && index === 0}
                                         on:click={() => {
                                             if (index === 0) {
@@ -237,7 +237,6 @@
                             {/if}
                         </FormList>
                         <Button
-                            noMargin
                             text
                             disabled={headers?.length && headers[headers.length - 1][0]
                                 ? false
@@ -248,8 +247,8 @@
                                     headers = headers;
                                 }
                             }}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Add Header</span>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Add Header
                         </Button>
                     </div>
 

src/routes/(console)/project-[project]/functions/function-[function]/settings/updateEvents.svelte

@@ -21,6 +21,8 @@
     import DropListItem from '$lib/components/dropListItem.svelte';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { Runtime } from '@appwrite.io/console';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     const functionId = $page.params.function;
     const eventSet: Writable<Set<string>> = writable(new Set($func.events));
@@ -141,9 +143,9 @@
                 </TableList>
 
                 <div class="u-flex u-margin-block-start-16">
-                    <Button text noMargin on:click={() => (showEvents = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="u-text">Add event</span>
+                    <Button text on:click={() => (showEvents = true)}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add event
                     </Button>
                 </div>
             {:else}

src/routes/(console)/project-[project]/functions/wizard/step3.svelte

@@ -5,6 +5,8 @@
     import { createFunction } from './store';
     import { EventModal } from '$lib/components';
     import { TableList, TableCellText, TableCell } from '$lib/elements/table';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let showCreate = false;
 
@@ -50,9 +52,9 @@
             {/each}
         </TableList>
         <div class="u-flex u-margin-block-start-16">
-            <Button text noMargin on:click={() => (showCreate = !showCreate)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="u-text">Add event</span>
+            <Button text on:click={() => (showCreate = !showCreate)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add event
             </Button>
         </div>
     {:else}

src/routes/(console)/project-[project]/functions/wizard/step5.svelte

@@ -13,6 +13,8 @@
         TableRow
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let showCreate = false;
 
@@ -108,9 +110,9 @@
             </TableBody>
         </Table>
         <div class="u-flex u-margin-block-start-16">
-            <Button text noMargin on:click={() => (showCreate = !showCreate)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="u-text">Create variable</span>
+            <Button text on:click={() => (showCreate = !showCreate)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create variable
             </Button>
         </div>
     {:else}

src/routes/(console)/project-[project]/messaging/createMessageDropdown.svelte

@@ -7,6 +7,8 @@
     import { messageParams, providerType, targetsById } from './wizard/store';
     import { topicsById } from './store';
     import { MessagingProviderType } from '@appwrite.io/console';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let showCreateDropdown = false;
 </script>
@@ -14,8 +16,8 @@
 <DropList bind:show={showCreateDropdown} scrollable placement="bottom-end">
     <slot>
         <Button on:click={() => (showCreateDropdown = !showCreateDropdown)} event="create_message">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create message</span>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create message
         </Button>
     </slot>
     <svelte:fragment slot="list">

src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte

@@ -19,6 +19,8 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { validateData } from '../wizard/pushFormList.svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     /* eslint  @typescript-eslint/no-explicit-any: 'off' */
     export let message: Models.Message & { data: Record<string, any> };
@@ -164,14 +166,13 @@
                             <Helper type="warning">{dataError}</Helper>
                         {/if}
                         <Button
-                            noMargin
                             text
                             disabled={customData && customData[customData.length - 1][0] === ''}
                             on:click={() => {
                                 customData = [...customData, ['', '']];
                             }}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Add data</span>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Add data
                         </Button>
                     </div>
                 </form>

src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte

@@ -26,6 +26,8 @@
     import { Button, Form } from '$lib/elements/forms';
     import UserTargetsModal from '../userTargetsModal.svelte';
     import { isValueOfStringEnum } from '$lib/helpers/types';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     export let message: Models.Message & { data: Record<string, unknown> };
     export let selectedTargetsById: Record<string, Models.Target>;
@@ -176,12 +178,11 @@
                     {#if isDraft}
                         <Button
                             text
-                            noMargin
                             on:click={() => {
                                 showTargets = true;
                             }}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Add</span>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Add
                         </Button>
                     {/if}
                 </div>

src/routes/(console)/project-[project]/messaging/message-[message]/updateTopics.svelte

@@ -20,6 +20,8 @@
     import { onMount } from 'svelte';
     import { getTotal } from '../wizard/store';
     import { isValueOfStringEnum } from '$lib/helpers/types';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     export let message: Models.Message;
     export let selectedTopicsById: Record<string, Models.Topic>;
@@ -95,12 +97,11 @@
                     {#if message.status == 'draft'}
                         <Button
                             text
-                            noMargin
                             on:click={() => {
                                 showTopics = true;
                             }}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Add</span>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Add
                         </Button>
                     {/if}
                 </div>

src/routes/(console)/project-[project]/messaging/providers/createProviderDropdown.svelte

@@ -8,6 +8,8 @@
     import { Providers } from '../provider.svelte';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { MessagingProviderType } from '@appwrite.io/console';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let showCreateDropdown = false;
 </script>
@@ -15,8 +17,8 @@
 <DropList bind:show={showCreateDropdown} scrollable placement="bottom-end">
     <slot>
         <Button on:click={() => (showCreateDropdown = !showCreateDropdown)} event="create_provider">
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create provider</span>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Create provider
         </Button>
     </slot>
     <svelte:fragment slot="list">

src/routes/(console)/project-[project]/messaging/topics/+page.svelte

@@ -21,8 +21,9 @@
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
     import { canWriteTopics } from '$lib/stores/roles';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { View } from '$lib/helpers/load';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 
@@ -59,8 +60,8 @@
             <ViewSelector view={View.Table} {columns} hideView allowNoColumns showColsTextMobile />
             {#if $canWriteTopics}
                 <Button on:click={() => ($showCreate = true)} event="create_topic">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Create topic</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create topic
                 </Button>
             {/if}
         </Layout.Stack>

src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/+page.svelte

@@ -27,6 +27,8 @@
     import { writable } from 'svelte/store';
     import type { Column } from '$lib/helpers/types';
     import { base } from '$app/paths';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
     let showAdd = false;
@@ -91,8 +93,8 @@
             <Heading tag="h2" size="5">Subscribers</Heading>
             <div class="is-only-mobile">
                 <Button on:click={() => (showAdd = true)} event="create_subscriber">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add subscriber</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add subscriber
                 </Button>
             </div>
         </div>
@@ -109,8 +111,8 @@
                     allowNoColumns
                     showColsTextMobile />
                 <Button on:click={() => (showAdd = true)} event="create_subscriber">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add subscriber</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add subscriber
                 </Button>
             </div>
         </SearchQuery>

src/routes/(console)/project-[project]/messaging/wizard/pushFormList.svelte

@@ -44,6 +44,8 @@
     import PushPhone from '../pushPhone.svelte';
     import { onMount } from 'svelte';
     import InputFilePicker from '$lib/elements/forms/inputFilePicker.svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let showCustomId = false;
     let showTest = false;
@@ -199,14 +201,13 @@
                     <Helper type="warning">{dataError}</Helper>
                 {/if}
                 <Button
-                    noMargin
                     text
                     disabled={customData && customData[customData.length - 1][0] === ''}
                     on:click={() => {
                         $messageParams[MessagingProviderType.Push].data = [...customData, ['', '']];
                     }}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Add data</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add data
                 </Button>
             </div>
         </form>

src/routes/(console)/project-[project]/messaging/wizard/step2.svelte

@@ -14,6 +14,8 @@
     import Actions from '../actions.svelte';
     import { topicsById } from '../store';
     import type { Models } from '@appwrite.io/console';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
 
     let showDropdown = false;
     let showTopics = false;
@@ -69,7 +71,7 @@
                     on:addTargets={addTargets}
                     on:addTopics={addTopics}>
                     <Button secondary icon on:click={() => (showDropdown = !showDropdown)}>
-                        <i class="icon-plus" />
+                        <Icon icon={IconPlus} size="s" />
                     </Button>
                 </Actions>
                 <div class="common-section">
@@ -146,9 +148,9 @@
             bind:showTopics
             on:addTargets={addTargets}
             on:addTopics={addTopics}>
-            <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Add</span>
+            <Button text on:click={() => (showDropdown = !showDropdown)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add
             </Button>
         </Actions>
     {/if}

src/routes/(console)/project-[project]/overview/keys/action.svelte

@@ -1,12 +1,14 @@
 <script>
     import Button from '$lib/elements/forms/button.svelte';
     import { canWriteKeys } from '$lib/stores/roles';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { createApiKey } from './+page.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 </script>
 
 {#if $canWriteKeys}
     <Button on:click={createApiKey}>
-        <span class="icon-plus" aria-hidden="true" />
-        <span class="text">Create API key</span>
+        <Icon icon={IconPlus} slot="start" size="s" />
+        Create API key
     </Button>
 {/if}

src/routes/(console)/project-[project]/overview/platforms/action.svelte

@@ -3,7 +3,9 @@
     import DropListItem from '$lib/components/dropListItem.svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import { canWritePlatforms } from '$lib/stores/roles';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { addPlatform, Platform } from './+page.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let showDropdown = false;
 </script>
@@ -11,8 +13,8 @@
 {#if $canWritePlatforms}
     <DropList bind:show={showDropdown} placement="bottom-start">
         <Button on:click={() => (showDropdown = !showDropdown)}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Add platform</span>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Add platform
         </Button>
         <svelte:fragment slot="list">
             <DropListItem on:click={() => addPlatform(Platform.Flutter)}>Flutter app</DropListItem>

src/routes/(console)/project-[project]/settings/updateInstallations.svelte

@@ -31,6 +31,8 @@
     import dayjs from 'dayjs';
     import { isSelfHosted } from '$lib/system';
     import { consoleVariables } from '$routes/(console)/store';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let total: number;
     export let limit: number;
@@ -94,8 +96,8 @@
                     <ul class="buttons-list">
                         <li class="buttons-list-item">
                             <Button secondary on:click={() => (showGitIstall = true)}>
-                                <span class="icon-plus" />
-                                <span class="text">Add installation</span>
+                                <Icon icon={IconPlus} slot="start" size="s" />
+                                Add installation
                             </Button>
                         </li>
                     </ul>

src/routes/(console)/project-[project]/settings/webhooks/+page.svelte

@@ -33,8 +33,9 @@
     import MessageStatusPill from './messageStatusPill.svelte';
     import { canWriteWebhooks } from '$lib/stores/roles';
     import { get } from 'svelte/store';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import ViewSelector from '$lib/components/viewSelector.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 
@@ -62,8 +63,8 @@
         <ViewSelector {columns} view={data.view} hideView />
         {#if $canWriteWebhooks}
             <Button on:click={openWizard} event="create_webhook">
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create database</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create database
             </Button>
         {/if}
     </Layout.Stack>

src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte

@@ -12,6 +12,8 @@
     import { onMount } from 'svelte';
     import { writable, type Writable } from 'svelte/store';
     import { webhook } from './store';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     const projectId = $page.params.project;
     const eventSet: Writable<Set<string>> = writable(new Set());
@@ -95,8 +97,8 @@
                 </TableList>
                 <div class="u-flex u-margin-block-start-16">
                     <Button text on:click={() => (showCreateEvent = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="u-text">Add event</span>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add event
                     </Button>
                 </div>
             {:else}

src/routes/(console)/project-[project]/settings/webhooks/wizard/step2.svelte

@@ -5,6 +5,8 @@
     import { createWebhook } from './store';
     import { EventModal } from '$lib/components';
     import { TableList, TableCellText, TableCell } from '$lib/elements/table';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     let showCreate = false;
 
@@ -45,8 +47,8 @@
         </TableList>
         <div class="u-flex u-margin-block-start-16">
             <Button text on:click={() => (showCreate = !showCreate)}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="u-text">Add event</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Add event
             </Button>
         </div>
     {:else}

src/routes/(console)/project-[project]/sites/site-[site]/logs/+page.ts

@@ -21,6 +21,7 @@ export const load = async ({ params, depends, url, route, parent }) => {
         limit,
         query,
         search,
+        site,
         logs: await sdk.forProject.sites.listLogs(
             params.site,
             [
@@ -30,7 +31,6 @@ export const load = async ({ params, depends, url, route, parent }) => {
                 ...parsedQueries.values()
             ],
             search
-        ),
-        site
+        )
     };
 };

src/routes/(console)/project-[project]/storage/+page.svelte

@@ -13,12 +13,13 @@
     import { writable } from 'svelte/store';
     import type { PageData } from './$types';
     import { canWriteBuckets } from '$lib/stores/roles';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import { columns } from './store';
     import Grid from './grid.svelte';
     import Table from './table.svelte';
     import ViewSelector from '$lib/components/viewSelector.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 
@@ -46,8 +47,8 @@
                     on:mousedown={() => ($showCreateBucket = true)}
                     event="create_bucket"
                     size="s">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Create bucket</span>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Create bucket
                 </Button>
             {/if}
         </Layout.Stack>

src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte

@@ -39,8 +39,9 @@
     import Create from './create-file/create.svelte';
     import DeleteFile from './deleteFile.svelte';
     import { isCloud } from '$lib/system';
-    import { Layout, Tooltip, Table } from '@appwrite.io/pink-svelte';
+    import { Layout, Tooltip, Table, Icon } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data;
 
@@ -113,8 +114,8 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <Button on:mousedown={() => wizard.start(Create)} event="create_file" size="s">
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create file</span>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create file
             </Button>
         </Layout.Stack>
     </Layout.Stack>
@@ -165,7 +166,7 @@
                         href={`${base}/project-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}>
                         <Table.Cell>
                             <div class="u-flex u-gap-12 u-cross-center">
-                                <Avatar size={32} src={getPreview(file.$id)} name={file.name} />
+                                <Avatar size="s" src={getPreview(file.$id)} alt={file.name} />
                                 <span class="text u-trim">{file.name}</span>
                             </div>
                         </Table.Cell>