diff --git a/src/app/components/preferences/common/symbols/symbols.component.html b/src/app/components/preferences/common/symbols/symbols.component.html
index 00279958..2b2e0cec 100644
--- a/src/app/components/preferences/common/symbols/symbols.component.html
+++ b/src/app/components/preferences/common/symbols/symbols.component.html
@@ -26,7 +26,7 @@
 <div class="wrapper">
     <div class="buttonWrapper" *ngFor="let symbol of filteredSymbols | filenamefilter: searchText">
         <button [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }" class="button" (click)="setSelected(symbol.symbol_id)">
-            <img [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" [src]="getImageSourceForTemplate(symbol.symbol_id)"/>
+            <img lazyimg [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" [src]="getImageSourceForTemplate(symbol.symbol_id)"/>
         </button>
     </div>
 </div>
diff --git a/src/app/directives/LazyImg.directive.ts b/src/app/directives/LazyImg.directive.ts
new file mode 100644
index 00000000..fa4827f7
--- /dev/null
+++ b/src/app/directives/LazyImg.directive.ts
@@ -0,0 +1,12 @@
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({ selector: '[lazyimg]' })
+export class LazyImgDirective {
+  constructor({ nativeElement }: ElementRef<HTMLImageElement>) {
+    const supports = 'loading' in HTMLImageElement.prototype;
+
+    if (supports) {
+      nativeElement.setAttribute('loading', 'lazy');
+    }
+  }
+}