diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss
index a89d05dde..b5301878a 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss
@@ -1,5 +1,5 @@
 .artifact-icon {
-  width: 0.8rem;
+  width: 2.5rem;
   height: 0.8rem;
 }
 .cell {
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts
index 25d7681b7..048eef4a3 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts
@@ -85,6 +85,7 @@ export class SubAccessoriesComponent implements OnInit {
     clrLoad() {
         if (this.currentPage === 1) {
             this.displayedAccessories = clone(this.accessories);
+            this.getIconFromBackend();
             return;
         }
         this.loading = true;
@@ -100,10 +101,16 @@ export class SubAccessoriesComponent implements OnInit {
             .subscribe(
                 res => {
                     this.displayedAccessories = res;
+                    this.getIconFromBackend();
                 },
                 error => {
                     this.errorHandlerService.error(error);
                 }
             );
     }
+    getIconFromBackend() {
+        if (this.displayedAccessories?.length) {
+            this.artifactService.getIconsFromBackEnd(this.displayedAccessories);
+        }
+    }
 }
diff --git a/src/portal/src/app/base/project/repository/artifact/artifact.service.ts b/src/portal/src/app/base/project/repository/artifact/artifact.service.ts
index 5357cf424..b78a12b3b 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact.service.ts
+++ b/src/portal/src/app/base/project/repository/artifact/artifact.service.ts
@@ -5,6 +5,7 @@ import { Artifact } from '../../../../../../ng-swagger-gen/models/artifact';
 import { IconService } from '../../../../../../ng-swagger-gen/services/icon.service';
 import { share } from "rxjs/operators";
 import { Icon } from "ng-swagger-gen/models/icon";
+import { Accessory } from '../../../../../../ng-swagger-gen/models/accessory';
 
 
 /**
@@ -19,7 +20,7 @@ export abstract class ArtifactService {
   triggerUploadArtifact = new Subject<string>();
   abstract getIcon(digest: string): SafeUrl;
   abstract setIcon(digest: string, url: SafeUrl);
-  abstract getIconsFromBackEnd(artifactList: Artifact[]);
+  abstract getIconsFromBackEnd(artifactList: Artifact[] | Accessory[]);
 }
 @Injectable()
 export class ArtifactDefaultService extends ArtifactService {