diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
new file mode 100644
index 0000000000..6f8365c3e3
--- /dev/null
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/logo/logo.component.ts
@@ -0,0 +1,29 @@
+import { Config, ConfigState } from '@abp/ng.core';
+import { Component } from '@angular/core';
+import { Store } from '@ngxs/store';
+
+@Component({
+  selector: 'abp-logo',
+  template: `
+    <a class="navbar-brand" routerLink="/">
+      <img
+        *ngIf="appInfo.logoUrl; else appName"
+        [src]="appInfo.logoUrl"
+        [alt]="appInfo.name"
+        width="100%"
+        height="auto"
+      />
+    </a>
+
+    <ng-template #appName>
+      {{ appInfo.name }}
+    </ng-template>
+  `,
+})
+export class LogoComponent {
+  get appInfo(): Config.Application {
+    return this.store.selectSnapshot(ConfigState.getApplicationInfo);
+  }
+
+  constructor(private store: Store) {}
+}