update nft placeholder icons (#5302)

* setup file structure for collectible placeholder icons * Update icons to variation of ones provided by design * update placeholder icons * adjust nftPlaceholder icon shown depending on nftMediaContainer size * Adjust large placeholder icons * improve color coordination and remove extraneous svg parameters * fix broken functionality caused by merge * make small adjustments * fix color issues * update size of collectibles_unknown_large icon * improve background color selection for NftPlaceholderIcon component * color tweaking
iotaledger · Dec 8, 2022 · 3335c7e · 3335c7e
1 parent 4163211
commit 3335c7e
Show file tree

Hide file tree

Showing 22 changed files with 426 additions and 17 deletions.
diff --git a/packages/desktop/views/dashboard/collectibles/views/NftDetailsView.svelte b/packages/desktop/views/dashboard/collectibles/views/NftDetailsView.svelte
@@ -76,7 +76,7 @@
 </script>
 
 <div class="flex flex-row w-full h-full space-x-4 overflow-auto">
-    <div class="flex w-full h-full bg-gray-500 items-center justify-center rounded-2xl">
+    <div class="flex w-full h-full bg-gray-200 dark:bg-gray-700 items-center justify-center rounded-2xl">
         <NftMediaContainer nftId={id} size={NftMediaSize.ExtraLarge} />
     </div>
     <Pane classes="flex flex-col p-6 w-full h-full max-w-lg">

diff --git a/packages/shared/components/molecules/NftMediaContainer.svelte b/packages/shared/components/molecules/NftMediaContainer.svelte
@@ -14,46 +14,60 @@
     let height
     let radius
     let padding
+    let bgColor
+    let darkBgColor
     $: size, setShapeAndSize()
     function setShapeAndSize(): void {
         switch (size) {
             case NftMediaSize.ExtraSmall:
                 width = 'w-6'
-                height = 6
+                height = 'w-6'
                 // squircle or circle
                 radius = shape === 'squircle' ? 'md' : 'full'
                 padding = 1
+                bgColor = 'gray-500'
+                darkBgColor = 'gray-500'
                 break
             case NftMediaSize.Small:
                 width = 'w-8'
-                height = 8
+                height = 'w-8'
                 // squircle or circle
                 radius = shape === 'squircle' ? 'lg' : 'full'
                 padding = 2
+                bgColor = 'gray-500'
+                darkBgColor = 'gray-500'
                 break
             case NftMediaSize.Medium:
                 width = 'w-20'
                 height = 'h-20'
                 // squircle or circle
                 radius = shape === 'squircle' ? 'xl' : 'full'
                 padding = 2
+                bgColor = 'gray-500'
+                darkBgColor = 'gray-500'
                 break
             case NftMediaSize.Large:
                 width = 'w-60'
                 height = 'h-60'
                 // squircle or circle
                 radius = shape === 'squircle' ? '2xl' : 'full'
                 padding = 2
+                bgColor = 'gray-200'
+                darkBgColor = 'gray-700'
                 break
             case NftMediaSize.ExtraLarge:
                 width = 'w-96'
                 height = 'h-96'
                 // squircle or circle
                 radius = shape === 'squircle' ? '2xl' : 'full'
+                bgColor = 'gray-200'
+                darkBgColor = 'gray-700'
                 break
             case NftMediaSize.Flexible:
                 // squircle or circle
                 radius = shape === 'squircle' ? '2xl' : 'full'
+                bgColor = 'gray-200'
+                darkBgColor = 'gray-700'
                 break
         }
 
@@ -65,10 +79,10 @@
 </script>
 
 <div
-    class="flex justify-center items-center transition-none flex-shrink-0 p-{padding} bg-gray-500 {width} {height} rounded-{radius} {classes}"
+    class="overflow-hidden flex justify-center items-center transition-none flex-shrink-0 p-{padding} bg-{bgColor} dark:bg-{darkBgColor} {width} {height} rounded-{radius} {classes}"
 >
     {#if !isLoaded}
-        <NftPlaceholderIcon {nft} />
+        <NftPlaceholderIcon {nft} {size} {bgColor} {darkBgColor} />
     {:else}
         <div>
             <!-- Loaded and Secure NFT Media  -->

diff --git a/packages/shared/components/molecules/NftPlaceholderIcon.svelte b/packages/shared/components/molecules/NftPlaceholderIcon.svelte
@@ -1,37 +1,58 @@
 <script lang="typescript">
     import { INft, ParentMimeType } from '@core/nfts'
-    import { Icon } from 'shared/components'
+    import { Icon, NftMediaSize } from 'shared/components'
     import { Icon as IconEnum } from '@auxiliary/icon'
+    import { appSettings } from '@core/app'
 
     export let nft: INft = undefined
+    export let size: NftMediaSize
+    export let bgColor = 'gray-500'
+    export let darkBgColor = 'gray-500'
 
     const width = '100%'
     const height = '100%'
 
-    $: icon = mapNftToIcon(nft)
+    // primaryColor: gives extra color customization outside of default text colors, used in CollectiblesImageLarge to change mountain color
+    // secondaryColor: alters the large icon's circle color
+    $: primaryColor = $appSettings.darkMode ? '#25395F' : '#C4D1E8'
+    $: secondaryColor = $appSettings.darkMode ? '#F0F5FE' : '#D8E3F5'
 
-    function mapNftToIcon(nft: INft): IconEnum {
+    let iconSize: 'Small' | 'Large'
+    $: iconSize =
+        size === NftMediaSize.Large || size === NftMediaSize.ExtraLarge || size === NftMediaSize.Flexible
+            ? 'Large'
+            : 'Small'
+    $: icon = mapNftToIcon(nft, iconSize)
+
+    function mapNftToIcon(nft: INft, iconSize: 'Small' | 'Large'): IconEnum {
         const nftType = nft?.parsedMetadata?.type?.split('/', 1)
 
         switch (nftType?.[0]) {
             case ParentMimeType.Image:
-                return IconEnum.Picture
+                return IconEnum[`CollectiblesImage${iconSize}`]
             case ParentMimeType.Video:
-                return IconEnum.Play
+                return IconEnum[`CollectiblesVideo${iconSize}`]
             case ParentMimeType.Audio:
-                return IconEnum.Bell
+                return IconEnum[`CollectiblesAudio${iconSize}`]
             case ParentMimeType.Text:
-                return IconEnum.Doc
+                return IconEnum[`CollectiblesText${iconSize}`]
             case ParentMimeType.Application:
-                return IconEnum.Parchment
+                return IconEnum[`CollectiblesApplication${iconSize}`]
             case ParentMimeType.Model:
-                return IconEnum.Help
+                return IconEnum[`CollectiblesModel${iconSize}`]
             case ParentMimeType.Font:
-                return IconEnum.Language
+                return IconEnum[`CollectiblesFont${iconSize}`]
             default:
-                return IconEnum.Collectibles
+                return IconEnum[`CollectiblesUnknown${iconSize}`]
         }
     }
 </script>
 
-<Icon {icon} {width} {height} classes="text-white dark:text-gray-800 text-center" />
+<Icon
+    {icon}
+    {width}
+    {height}
+    {primaryColor}
+    {secondaryColor}
+    classes={`text-white dark:text-gray-800 bg-${bgColor} dark:bg-${darkBgColor} text-center`}
+/>
diff --git a/packages/shared/lib/auxiliary/icon/constants/icon-svg.ts b/packages/shared/lib/auxiliary/icon/constants/icon-svg.ts
@@ -22,6 +22,22 @@ import {
     CHIP_SVG,
     CLOSE_SVG,
     COPY_SVG,
+    COLLECTIBLES_APPLICATION_LARGE_SVG,
+    COLLECTIBLES_APPLICATION_SMALL_SVG,
+    COLLECTIBLES_AUDIO_LARGE_SVG,
+    COLLECTIBLES_AUDIO_SMALL_SVG,
+    COLLECTIBLES_FONT_LARGE_SVG,
+    COLLECTIBLES_FONT_SMALL_SVG,
+    COLLECTIBLES_IMAGE_LARGE_SVG,
+    COLLECTIBLES_IMAGE_SMALL_SVG,
+    COLLECTIBLES_MODEL_LARGE_SVG,
+    COLLECTIBLES_MODEL_SMALL_SVG,
+    COLLECTIBLES_TEXT_LARGE_SVG,
+    COLLECTIBLES_TEXT_SMALL_SVG,
+    COLLECTIBLES_UNKNOWN_LARGE_SVG,
+    COLLECTIBLES_UNKNOWN_SMALL_SVG,
+    COLLECTIBLES_VIDEO_LARGE_SVG,
+    COLLECTIBLES_VIDEO_SMALL_SVG,
     COLLECTIBLES_SVG,
     CURRENCY_SVG,
     CUSTOMIZE_SVG,
@@ -131,6 +147,22 @@ export const ICON_SVG = {
     [Icon.ChevronUp]: CHEVRON_UP_SVG,
     [Icon.Chip]: CHIP_SVG,
     [Icon.Close]: CLOSE_SVG,
+    [Icon.CollectiblesApplicationLarge]: COLLECTIBLES_APPLICATION_LARGE_SVG,
+    [Icon.CollectiblesApplicationSmall]: COLLECTIBLES_APPLICATION_SMALL_SVG,
+    [Icon.CollectiblesAudioLarge]: COLLECTIBLES_AUDIO_LARGE_SVG,
+    [Icon.CollectiblesAudioSmall]: COLLECTIBLES_AUDIO_SMALL_SVG,
+    [Icon.CollectiblesFontLarge]: COLLECTIBLES_FONT_LARGE_SVG,
+    [Icon.CollectiblesFontSmall]: COLLECTIBLES_FONT_SMALL_SVG,
+    [Icon.CollectiblesImageLarge]: COLLECTIBLES_IMAGE_LARGE_SVG,
+    [Icon.CollectiblesImageSmall]: COLLECTIBLES_IMAGE_SMALL_SVG,
+    [Icon.CollectiblesModelLarge]: COLLECTIBLES_MODEL_LARGE_SVG,
+    [Icon.CollectiblesModelSmall]: COLLECTIBLES_MODEL_SMALL_SVG,
+    [Icon.CollectiblesTextLarge]: COLLECTIBLES_TEXT_LARGE_SVG,
+    [Icon.CollectiblesTextSmall]: COLLECTIBLES_TEXT_SMALL_SVG,
+    [Icon.CollectiblesUnknownLarge]: COLLECTIBLES_UNKNOWN_LARGE_SVG,
+    [Icon.CollectiblesUnknownSmall]: COLLECTIBLES_UNKNOWN_SMALL_SVG,
+    [Icon.CollectiblesVideoLarge]: COLLECTIBLES_VIDEO_LARGE_SVG,
+    [Icon.CollectiblesVideoSmall]: COLLECTIBLES_VIDEO_SMALL_SVG,
     [Icon.Collectibles]: COLLECTIBLES_SVG,
     [Icon.Copy]: COPY_SVG,
     [Icon.Currency]: CURRENCY_SVG,

diff --git a/packages/shared/lib/auxiliary/icon/enums/icon.enum.ts b/packages/shared/lib/auxiliary/icon/enums/icon.enum.ts
@@ -23,6 +23,22 @@ export enum Icon {
     ChevronUp = 'chevron-up',
     Chip = 'chip',
     Close = 'close',
+    CollectiblesApplicationLarge = 'collectibles-application-large',
+    CollectiblesApplicationSmall = 'collectibles-application-small',
+    CollectiblesAudioLarge = 'collectibles-audio-large',
+    CollectiblesAudioSmall = 'collectibles-audio-small',
+    CollectiblesFontLarge = 'collectibles-font-large',
+    CollectiblesFontSmall = 'collectibles-font-small',
+    CollectiblesImageLarge = 'collectibles-image-large',
+    CollectiblesImageSmall = 'collectibles-image-small',
+    CollectiblesModelLarge = 'collectibles-model-large',
+    CollectiblesModelSmall = 'collectibles-model-small',
+    CollectiblesTextLarge = 'collectibles-text-large',
+    CollectiblesTextSmall = 'collectibles-text-small',
+    CollectiblesUnknownLarge = 'collectibles-unknown-large',
+    CollectiblesUnknownSmall = 'collectibles-unknown-small',
+    CollectiblesVideoLarge = 'collectibles-video-large',
+    CollectiblesVideoSmall = 'collectibles-video-small',
     Collectibles = 'collectibles',
     Copy = 'copy',
     Currency = 'currency',

diff --git a/packages/shared/lib/auxiliary/icon/svgs/collectibles-application-large.svg.ts b/packages/shared/lib/auxiliary/icon/svgs/collectibles-application-large.svg.ts
@@ -0,0 +1,18 @@
+import { ISvg } from '../interfaces'
+
+export const COLLECTIBLES_APPLICATION_LARGE_SVG: ISvg = {
+    width: 24,
+    height: 24,
+    path: [
+        {
+            d: 'M17.4098 11.5082C17.4098 8.52042 14.9877 6.09836 11.9999 6.09836C9.01215 6.09836 6.59009 8.52042 6.59009 11.5082C6.59009 14.496 9.01215 16.918 11.9999 16.918C14.9877 16.918 17.4098 14.496 17.4098 11.5082Z',
+            fillPriority: 'secondary',
+        },
+        {
+            d: 'M15.1041 11.2233C15.2519 11.3385 15.2519 11.5795 15.1041 11.6947L13.3349 13.0741C13.0638 13.2855 12.6885 13.0724 12.6885 12.7072C12.6885 12.5891 12.7413 12.4784 12.8297 12.4112L14.0832 11.459L12.8297 10.5068C12.7413 10.4396 12.6885 10.3289 12.6885 10.2108C12.6885 9.8455 13.0638 9.63257 13.3349 9.84393L15.1041 11.2233Z',
+        },
+        {
+            d: 'M8.86495 11.2233C8.71722 11.3385 8.71722 11.5795 8.86495 11.6947L10.6342 13.0741C10.9053 13.2855 11.2806 13.0724 11.2806 12.7072C11.2806 12.5891 11.2278 12.4784 11.1394 12.4112L9.88589 11.459L11.1394 10.5068C11.2278 10.4396 11.2806 10.3289 11.2806 10.2108C11.2806 9.8455 10.9053 9.63257 10.6342 9.84393L8.86495 11.2233Z',
+        },
+    ],
+}
diff --git a/packages/shared/lib/auxiliary/icon/svgs/collectibles-application-small.svg.ts b/packages/shared/lib/auxiliary/icon/svgs/collectibles-application-small.svg.ts
@@ -0,0 +1,18 @@
+import { ISvg } from '../interfaces'
+
+export const COLLECTIBLES_APPLICATION_SMALL_SVG: ISvg = {
+    width: 24,
+    height: 24,
+    path: [
+        {
+            d: 'M21.4719 11.1721C21.9225 11.5234 21.9225 12.2584 21.4719 12.6097L16.0758 16.8169C15.249 17.4616 14.1042 16.8118 14.1042 15.6979C14.1042 15.3376 14.2653 15.0001 14.535 14.7952L18.3582 11.8909L14.535 8.98661C14.2653 8.78171 14.1042 8.44421 14.1042 8.08391C14.1042 6.96971 15.249 6.32027 16.0758 6.96491L21.4719 11.1721Z',
+            fillRule: 'evenodd',
+            clipRule: 'evenodd',
+        },
+        {
+            d: 'M2.44219 11.1721C1.9916 11.5234 1.9916 12.2584 2.44219 12.6097L7.83839 16.8169C8.66519 17.4616 9.80997 16.8118 9.80997 15.6979C9.80997 15.3376 9.64888 15.0001 9.37918 14.7952L5.55601 11.8909L9.37918 8.98661C9.64888 8.78171 9.80997 8.44421 9.80997 8.08391C9.80997 6.96971 8.66519 6.32027 7.83839 6.96491L2.44219 11.1721Z',
+            fillRule: 'evenodd',
+            clipRule: 'evenodd',
+        },
+    ],
+}
diff --git a/packages/shared/lib/auxiliary/icon/svgs/collectibles-audio-large.svg.ts b/packages/shared/lib/auxiliary/icon/svgs/collectibles-audio-large.svg.ts
@@ -0,0 +1,15 @@
+import { ISvg } from '../interfaces'
+
+export const COLLECTIBLES_AUDIO_LARGE_SVG: ISvg = {
+    width: 24,
+    height: 24,
+    path: [
+        {
+            d: 'M17.4098 11.5082C17.4098 8.52042 14.9877 6.09836 11.9999 6.09836C9.01215 6.09836 6.59009 8.52042 6.59009 11.5082C6.59009 14.496 9.01215 16.918 11.9999 16.918C14.9877 16.918 17.4098 14.496 17.4098 11.5082Z',
+            fillPriority: 'secondary',
+        },
+        {
+            d: 'M10.3591 9.71377C10.3591 9.36649 10.6406 9.08496 10.988 9.08496H13.608C13.9553 9.08496 14.2368 9.36649 14.2368 9.71377V10.0806C14.2368 10.1021 14.2357 10.1234 14.2336 10.1443C14.2357 10.1577 14.2368 10.1714 14.2368 10.1853V12.9627C14.2368 12.9766 14.2357 12.9903 14.2336 13.0037C14.2357 13.0246 14.2368 13.0459 14.2368 13.0674V13.3294C14.2368 13.6768 13.9553 13.9583 13.608 13.9583H13.0316C12.6843 13.9583 12.4028 13.6768 12.4028 13.3294V13.0674C12.4028 12.7201 12.6843 12.4386 13.0316 12.4386H13.608C13.6437 12.4386 13.6787 12.4415 13.7127 12.4473V10.7008C13.6787 10.7065 13.6437 10.7094 13.608 10.7094H10.988C10.9523 10.7094 10.9172 10.7065 10.8831 10.7008V12.9627C10.8831 12.9766 10.882 12.9903 10.88 13.0037C10.882 13.0246 10.8831 13.0459 10.8831 13.0674V13.3294C10.8831 13.6768 10.6016 13.9583 10.2543 13.9583H9.67789C9.3306 13.9583 9.04907 13.6768 9.04907 13.3294V13.0674C9.04907 12.7201 9.3306 12.4386 9.67789 12.4386H10.2543C10.29 12.4386 10.325 12.4415 10.3591 12.4473V10.1853C10.3591 10.1714 10.3602 10.1577 10.3623 10.1443C10.3602 10.1234 10.3591 10.1021 10.3591 10.0806V9.71377Z',
+        },
+    ],
+}
diff --git a/packages/shared/lib/auxiliary/icon/svgs/collectibles-audio-small.svg.ts b/packages/shared/lib/auxiliary/icon/svgs/collectibles-audio-small.svg.ts
@@ -0,0 +1,13 @@
+import { ISvg } from '../interfaces'
+
+export const COLLECTIBLES_AUDIO_SMALL_SVG: ISvg = {
+    width: 24,
+    height: 24,
+    path: [
+        {
+            d: 'M7.2926 6.51585C7.2926 5.45664 8.15121 4.59798 9.21051 4.59798H17.2017C18.261 4.59798 19.1196 5.45664 19.1196 6.51585V7.63464C19.1196 7.70034 19.1163 7.76514 19.1097 7.82904C19.1163 7.86984 19.1196 7.91154 19.1196 7.95414V16.4249C19.1196 16.4675 19.1163 16.5092 19.1097 16.55C19.1163 16.6139 19.1196 16.6787 19.1196 16.7444V17.5436C19.1196 18.6029 18.261 19.4615 17.2017 19.4615H15.4437C14.3843 19.4615 13.5257 18.6029 13.5257 17.5436V16.7444C13.5257 15.6851 14.3843 14.8265 15.4437 14.8265H17.2017C17.3106 14.8265 17.4174 14.8355 17.5212 14.8532V9.52614C17.4174 9.54354 17.3106 9.55254 17.2017 9.55254H9.21051C9.10161 9.55254 8.99481 9.54354 8.89071 9.52614V16.4249C8.89071 16.4675 8.88741 16.5092 8.88111 16.55C8.88741 16.6139 8.89071 16.6787 8.89071 16.7444V17.5436C8.89071 18.6029 8.03211 19.4615 6.9728 19.4615H5.21479C4.15554 19.4615 3.29688 18.6029 3.29688 17.5436V16.7444C3.29688 15.6851 4.15554 14.8265 5.21479 14.8265H6.9728C7.0817 14.8265 7.1885 14.8355 7.2926 14.8532V7.95414C7.2926 7.91154 7.2959 7.86984 7.3022 7.82904C7.2959 7.76514 7.2926 7.70034 7.2926 7.63464V6.51585Z',
+            fillRule: 'evenodd',
+            clipRule: 'evenodd',
+        },
+    ],
+}
diff --git a/packages/shared/lib/auxiliary/icon/svgs/collectibles-font-large.svg.ts b/packages/shared/lib/auxiliary/icon/svgs/collectibles-font-large.svg.ts
@@ -0,0 +1,15 @@
+import { ISvg } from '../interfaces'
+
+export const COLLECTIBLES_FONT_LARGE_SVG: ISvg = {
+    width: 24,
+    height: 24,
+    path: [
+        {
+            d: 'M17.4098 11.5082C17.4098 8.52042 14.9877 6.09836 11.9999 6.09836C9.01215 6.09836 6.59009 8.52042 6.59009 11.5082C6.59009 14.496 9.01215 16.918 11.9999 16.918C14.9877 16.918 17.4098 14.496 17.4098 11.5082Z',
+            fillPriority: 'secondary',
+        },
+        {
+            d: 'M10.5495 9.84344V10.317C10.5495 10.4383 10.4512 10.5366 10.3299 10.5366H10.0784C9.95715 10.5366 9.85889 10.4383 9.85889 10.317V9.30737C9.85889 9.21945 9.9301 9.14818 10.018 9.14818H10.1769L10.1772 9.14786L10.1776 9.14754H13.8144L13.8147 9.14786L13.815 9.14818H13.9778C14.0679 9.14818 14.1409 9.22123 14.1409 9.31134V10.317C14.1409 10.4383 14.0427 10.5366 13.9214 10.5366H13.6699C13.5486 10.5366 13.4503 10.4383 13.4503 10.317V9.84344H12.4055V13.1746H12.8853C13.0066 13.1746 13.105 13.273 13.105 13.3943V13.6492C13.105 13.7705 13.0066 13.8688 12.8853 13.8688H11.1145C10.9932 13.8688 10.8948 13.7705 10.8948 13.6492V13.3943C10.8948 13.273 10.9932 13.1746 11.1145 13.1746H11.5863V9.84344H10.5495Z',
+        },
+    ],
+}
diff --git a/packages/shared/lib/auxiliary/icon/svgs/collectibles-font-small.svg.ts b/packages/shared/lib/auxiliary/icon/svgs/collectibles-font-small.svg.ts
@@ -0,0 +1,13 @@
+import { ISvg } from '../interfaces'
+
+export const COLLECTIBLES_FONT_SMALL_SVG: ISvg = {
+    width: 24,
+    height: 24,
+    path: [
+        {
+            d: 'M7.57601 6.9225V8.367C7.57601 8.7369 7.27631 9.0366 6.90641 9.0366H6.13932C5.76942 9.0366 5.46973 8.7369 5.46973 8.367V5.2875C5.46973 5.01933 5.68692 4.80195 5.95512 4.80195H6.43962L6.44052 4.80099L6.44172 4.8H17.5338L17.5347 4.80099L17.5356 4.80195H18.0324C18.3072 4.80195 18.5298 5.02476 18.5298 5.29959V8.367C18.5298 8.7369 18.2301 9.0366 17.8602 9.0366H17.0931C16.7232 9.0366 16.4235 8.7369 16.4235 8.367V6.9225H13.237V17.0826H14.7003C15.0702 17.0826 15.3702 17.3826 15.3702 17.7525V18.5301C15.3702 18.9 15.0702 19.2 14.7003 19.2H9.29919C8.9293 19.2 8.6293 18.9 8.6293 18.5301V17.7525C8.6293 17.3826 8.9293 17.0826 9.29919 17.0826H10.7383V6.9225H7.57601Z',
+            fillRule: 'evenodd',
+            clipRule: 'evenodd',
+        },
+    ],
+}
diff --git a/packages/shared/lib/auxiliary/icon/svgs/collectibles-image-large.svg.ts b/packages/shared/lib/auxiliary/icon/svgs/collectibles-image-large.svg.ts
@@ -0,0 +1,21 @@
+import { ISvg } from '../interfaces'
+
+export const COLLECTIBLES_IMAGE_LARGE_SVG: ISvg = {
+    width: 24,
+    height: 24,
+    path: [
+        {
+            d: 'M17.4098 11.5082C17.4098 8.52042 14.9877 6.09836 11.9999 6.09836C9.01215 6.09836 6.59009 8.52042 6.59009 11.5082C6.59009 14.496 9.01215 16.918 11.9999 16.918C14.9877 16.918 17.4098 14.496 17.4098 11.5082Z',
+            fillPriority: 'secondary',
+        },
+        {
+            d: 'M6.59027 11.5993L9.16254 10.3388C9.54789 10.1499 10.0053 10.1851 10.3573 10.4307L13.4899 12.6162C13.8182 12.8453 14.2404 12.8923 14.6111 12.741L17.4099 11.5993C17.5 14.5 14.8059 17 12.0002 17C9.16254 17 6.50001 14.5 6.59027 11.5993Z',
+            fillPriority: 'primary',
+            opacity: 0.98,
+        },
+        {
+            d: 'M13.8197 10.7213C14.39 10.7213 14.8524 10.2589 14.8524 9.68852C14.8524 9.11813 14.39 8.65573 13.8197 8.65573C13.2493 8.65573 12.7869 9.11813 12.7869 9.68852C12.7869 10.2589 13.2493 10.7213 13.8197 10.7213Z',
+            opacity: 0.95,
+        },
+    ],
+}
diff --git a/packages/shared/lib/auxiliary/icon/svgs/collectibles-image-small.svg.ts b/packages/shared/lib/auxiliary/icon/svgs/collectibles-image-small.svg.ts
@@ -0,0 +1,16 @@
+import { ISvg } from '../interfaces'
+
+export const COLLECTIBLES_IMAGE_SMALL_SVG: ISvg = {
+    width: 24,
+    height: 24,
+    path: [
+        {
+            d: 'M15.5 10C16.3284 10 17 9.32843 17 8.5C17 7.67157 16.3284 7 15.5 7C14.6716 7 14 7.67157 14 8.5C14 9.32843 14.6716 10 15.5 10Z',
+        },
+        {
+            d: 'M7 2C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2H7ZM17 4H7C5.34315 4 4 5.34315 4 7V13.9555L6.47255 12.0324C8.21133 10.68 10.6303 10.6249 12.4289 11.8966L15.356 13.9663C16.1641 14.5376 17.2019 14.6737 18.13 14.33L20 13.6374V7C20 5.34315 18.6569 4 17 4ZM4 17V16.4892L7.70043 13.6111C8.7437 12.7997 10.1951 12.7666 11.2742 13.5296L14.2014 15.5993C15.5481 16.5516 17.2779 16.7784 18.8246 16.2055L20 15.7702V17C20 18.6569 18.6569 20 17 20H7C5.34315 20 4 18.6569 4 17Z',
+            fillRule: 'evenodd',
+            clipRule: 'evenodd',
+        },
+    ],
+}
diff --git a/packages/shared/lib/auxiliary/icon/svgs/collectibles-model-large.svg.ts b/packages/shared/lib/auxiliary/icon/svgs/collectibles-model-large.svg.ts
@@ -0,0 +1,24 @@
+import { ISvg } from '../interfaces'
+
+const strokeWidth = 0.5
+
+export const COLLECTIBLES_MODEL_LARGE_SVG: ISvg = {
+    width: 24,
+    height: 24,
+    path: [
+        {
+            d: 'M17.4098 11.5082C17.4098 8.52042 14.9877 6.09836 11.9999 6.09836C9.01215 6.09836 6.59009 8.52042 6.59009 11.5082C6.59009 14.496 9.01215 16.918 11.9999 16.918C14.9877 16.918 17.4098 14.496 17.4098 11.5082Z',
+            fillPriority: 'secondary',
+        },
+        {
+            d: 'M12 9.2084L13.9917 10.3583V12.6581L12 13.808L10.0083 12.6581V10.3583L12 9.2084Z',
+            fillPriority: 'secondary',
+            strokeWidth,
+        },
+        {
+            d: 'M10.1311 10.4262L11.9137 11.3588M11.9137 11.3588L13.8688 10.4262M11.9137 11.3588V13.5738',
+            fillPriority: 'secondary',
+            strokeWidth,
+        },
+    ],
+}