diff --git a/src/lib/CardsHeader.svelte b/src/lib/CardsHeader.svelte
index d873eb81..fe09f7bc 100644
--- a/src/lib/CardsHeader.svelte
+++ b/src/lib/CardsHeader.svelte
@@ -5,6 +5,8 @@
 
     export let item: any;
 
+    let icon_url = item.avatar_url ? item.avatar_url : item.icon ? item.icon : default_avatar;
+
     let avatarOpen = false;
     const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
     
@@ -22,15 +24,15 @@
         {#if loading}
         <div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div>
         {/if}
-        {#if item && item.avatar_url}
-        <img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={item.avatar_url} alt="Icon" />
+        {#if item && (item.avatar_url || item.icon)}
+        <img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={icon_url} alt="Icon" />
         {:else}
         <img class="rounded-circle avatar" src={default_avatar} alt="your system avatar (default)" />
         {/if}
         </div>
         <Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
             <div slot="external" on:click={toggleAvatarModal} style="height: 100%;  max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; display: flex;">
-                <Image style="display: block; margin: auto;" src={item.avatar_url} thumbnail alt="Your system avatar" />
+                <Image style="display: block; margin: auto;" src={icon_url} thumbnail alt="Your system avatar" />
             </div>
         </Modal>
     </CardTitle>
\ No newline at end of file