diff --git a/package-lock.json b/package-lock.json
index 8e5b922fa..6a4e1b6e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "class-validator": "0.14.0",
         "commander": "7.2.0",
         "dayjs": "1.11.10",
+        "emoji-js": "^3.7.0",
         "fastify": "4.23.2",
         "fs-extra": "10.1.0",
         "node-cache": "5.1.2",
@@ -4615,6 +4616,19 @@
         "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
+    "node_modules/emoji-datasource": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/emoji-datasource/-/emoji-datasource-7.0.2.tgz",
+      "integrity": "sha512-F5TTUSktTIfbjHIlaz8tjsQ8EAD0UpJtj1i5O13jQARWTddtFgam3nE1W5WgSQoqU/cuTnF1H9tK/wlCOyzfiA=="
+    },
+    "node_modules/emoji-js": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/emoji-js/-/emoji-js-3.7.0.tgz",
+      "integrity": "sha512-YNJCF8DOYI1AZnkSIcJbmIN6rtXtSv5DObqzvHuGAP8VLQc15MMN+DG9rQVSfHPXGFkFub9pGvbiO4FNz5+sjg==",
+      "dependencies": {
+        "emoji-datasource": "7.0.2"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
diff --git a/package.json b/package.json
index 0e4105b3e..282315951 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "class-validator": "0.14.0",
     "commander": "7.2.0",
     "dayjs": "1.11.10",
+    "emoji-js": "^3.7.0",
     "fastify": "4.23.2",
     "fs-extra": "10.1.0",
     "node-cache": "5.1.2",
diff --git a/ui/angular.json b/ui/angular.json
index 0cd55b453..fba322178 100644
--- a/ui/angular.json
+++ b/ui/angular.json
@@ -61,7 +61,8 @@
               "xterm",
               "xterm-addon-fit",
               "xterm-addon-web-links",
-              "mobile-detect"
+              "mobile-detect",
+              "emoji-js"
             ],
             "aot": false,
             "stylePreprocessorOptions": {
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
index 7b08bffa0..d72b01aa6 100644
--- a/ui/src/app/core/core.module.ts
+++ b/ui/src/app/core/core.module.ts
@@ -7,7 +7,7 @@ import { SpinnerComponent } from './components/spinner/spinner.component';
 import { ConvertTempPipe } from './pipes/convert-temp.pipe';
 import { ReplacePipe } from './pipes/replace.pipe';
 import { ExternalLinkIconPipe } from './pipes/external-link-icon.pipe';
-import { HrefTargetBlankDirective } from './directives/href-target-blank.directive';
+import { PluginsMarkdownDirective } from './directives/plugins.markdown.directive';
 import { LongClickDirective } from './directives/longclick.directive';
 import { BackupRestoreComponent } from './backup-restore/backup-restore.component';
 import { ScheduledBackupsComponent } from './backup-restore/scheduled-backups/scheduled-backups.component';
@@ -24,7 +24,7 @@ import { JsonSchemaFormPatchDirective } from './directives/json-schema-form-patc
         ConvertTempPipe,
         ReplacePipe,
         ExternalLinkIconPipe,
-        HrefTargetBlankDirective,
+        PluginsMarkdownDirective,
         LongClickDirective,
         RtlDirective,
         JsonSchemaFormPatchDirective,
@@ -46,7 +46,7 @@ import { JsonSchemaFormPatchDirective } from './directives/json-schema-form-patc
         ConvertTempPipe,
         ReplacePipe,
         ExternalLinkIconPipe,
-        HrefTargetBlankDirective,
+        PluginsMarkdownDirective,
         LongClickDirective,
         RtlDirective,
         JsonSchemaFormPatchDirective,
diff --git a/ui/src/app/core/directives/href-target-blank.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
similarity index 57%
rename from ui/src/app/core/directives/href-target-blank.directive.ts
rename to ui/src/app/core/directives/plugins.markdown.directive.ts
index 085c1aae1..e0e2f0930 100644
--- a/ui/src/app/core/directives/href-target-blank.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,9 +1,10 @@
 import { Directive, ElementRef, OnInit } from '@angular/core';
+import { EmojiConvertor } from 'emoji-js';
 
 @Directive({
-  selector: '[hrefTargetBlank]',
+  selector: 'markdown',
 })
-export class HrefTargetBlankDirective implements OnInit {
+export class PluginsMarkdownDirective implements OnInit {
 
   constructor(
     private el: ElementRef,
@@ -16,6 +17,10 @@ export class HrefTargetBlankDirective implements OnInit {
       a.target = '_blank';
       a.rel = 'noopener noreferrer';
     });
+
+    // replace colon emojis
+    const emoji = new EmojiConvertor();
+    this.el.nativeElement.innerHTML = emoji.replace_colons(this.el.nativeElement.innerHTML);
   }
 
 }
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
index 1924098ab..8a1a5c6bf 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
@@ -47,7 +47,7 @@ <h4 class="mt-2">
     </div>
 
     <div class="mt-3" *ngIf="gshConfig && gshConfig.token">
-      <markdown hrefTargetBlank class="plugin-md" [data]="schema.footerDisplay" *ngIf="schema.footerDisplay">
+      <markdown class="plugin-md" [data]="schema.footerDisplay" *ngIf="schema.footerDisplay">
       </markdown>
     </div>
 
diff --git a/ui/src/app/core/manage-plugins/manage-plugins-modal/manage-plugins-modal.component.html b/ui/src/app/core/manage-plugins/manage-plugins-modal/manage-plugins-modal.component.html
index 73dc3150e..1b85e40ee 100644
--- a/ui/src/app/core/manage-plugins/manage-plugins-modal/manage-plugins-modal.component.html
+++ b/ui/src/app/core/manage-plugins/manage-plugins-modal/manage-plugins-modal.component.html
@@ -17,7 +17,7 @@ <h3 class="text-center primary-text" [translate]="'platform.version.title_servic
       </div>
       <hr>
     </div>
-    <markdown hrefTargetBlank class="plugin-md" [data]="changeLog"></markdown>
+    <markdown class="plugin-md" [data]="changeLog"></markdown>
   </div>
   <div *ngIf="!onlineUpdateOk" class="modal-body">
     <h4 class="primary-text text-center" [translate]="'plugins.manage.label_manual_update_required'">
@@ -41,7 +41,7 @@ <h4 class="primary-text text-center" [translate]="'plugins.manage.label_manual_u
   <div *ngIf="showReleaseNotes && !actionComplete" class="modal-body plugin-modal-body">
     <h3>Release Notes</h3>
     <h5>{{ release.name }}</h5>
-    <markdown hrefTargetBlank class="plugin-md" [data]="release.changelog"></markdown>
+    <markdown class="plugin-md" [data]="release.changelog"></markdown>
   </div>
   <div class="modal-footer" *ngIf="!onlineUpdateOk || actionComplete || showReleaseNotes || actionFailed">
     <button type="button" class="btn btn-elegant" data-dismiss="modal" (click)="activeModal.dismiss('Cross click')"
diff --git a/ui/src/app/core/manage-plugins/settings-plugins-modal/settings-plugins-modal.component.html b/ui/src/app/core/manage-plugins/settings-plugins-modal/settings-plugins-modal.component.html
index 34c75ec8f..d7d40c37c 100644
--- a/ui/src/app/core/manage-plugins/settings-plugins-modal/settings-plugins-modal.component.html
+++ b/ui/src/app/core/manage-plugins/settings-plugins-modal/settings-plugins-modal.component.html
@@ -11,7 +11,7 @@ <h5 class="modal-title">
   </div>
   <div class="modal-body">
     <div>
-      <markdown hrefTargetBlank class="plugin-md" [data]="schema.headerDisplay | interpolateMd"
+      <markdown class="plugin-md" [data]="schema.headerDisplay | interpolateMd"
         *ngIf="schema.headerDisplay"></markdown>
     </div>
 
@@ -50,7 +50,7 @@ <h5 class="m-0">{{ block.name }}</h5>
     </div>
 
     <div class="mt-3">
-      <markdown hrefTargetBlank class="plugin-md" [data]="schema.footerDisplay | interpolateMd"
+      <markdown class="plugin-md" [data]="schema.footerDisplay | interpolateMd"
         *ngIf="schema.footerDisplay"></markdown>
     </div>
   </div>