diff --git a/angular.json b/angular.json
index 49ad6cff68..55293256b1 100644
--- a/angular.json
+++ b/angular.json
@@ -50,8 +50,8 @@
                                 "output": "/assets/SVGIcons"
                             },
                             {
-                                "glob": "**/*",
-                                "input": "node_modules/@koobiq/icons/images",
+                                "glob": "**/*.webp",
+                                "input": "node_modules/@koobiq/visuals",
                                 "output": "/assets/images"
                             },
                             {
@@ -390,8 +390,8 @@
                                 "output": "/assets/svg-icons"
                             },
                             {
-                                "glob": "**/*",
-                                "input": "node_modules/@koobiq/icons/images",
+                                "glob": "**/*.webp",
+                                "input": "node_modules/@koobiq/visuals",
                                 "output": "/assets/images"
                             },
                             {
@@ -1056,8 +1056,8 @@
                         },
                         "assets": [
                             {
-                                "glob": "**/*",
-                                "input": "node_modules/@koobiq/icons/images",
+                                "glob": "**/*.webp",
+                                "input": "node_modules/@koobiq/visuals",
                                 "output": "/assets/images"
                             }
                         ],
diff --git a/package.json b/package.json
index 0199b0da9a..d225c2fed7 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
         "@koobiq/date-adapter": "^3.5.1",
         "@koobiq/date-formatter": "^3.5.1",
         "@koobiq/icons": "^12.4.0",
+        "@koobiq/visuals": "^12.4.0",
         "@maskito/angular": "^5.1.0",
         "@maskito/core": "^5.1.0",
         "@maskito/kit": "^5.6.0",
diff --git a/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts b/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts
index ae6b38ab8a..ab830348d3 100644
--- a/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts
+++ b/packages/docs-examples/components/empty-state/empty-state-content/empty-state-content-example.ts
@@ -19,7 +19,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
             <kbq-empty-state class="flex" size="big" style="min-height: 216px">
                 <div kbq-empty-state-icon>
                     <img
-                        src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.png"
+                        src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.webp"
                         alt="Empty state"
                         height="192"
                         width="192"
@@ -39,7 +39,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
             <kbq-empty-state class="flex" style="min-height: 216px">
                 <div kbq-empty-state-icon>
                     <img
-                        src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.png"
+                        src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.webp"
                         alt="Empty state"
                         width="80"
                         height="80"
@@ -68,7 +68,7 @@ export class EmptyStateContentExample {
     protected readonly srcSet = computed(() => {
         const currentTheme = this.currentTheme();
 
-        return `https://koobiq.io/assets/images/${currentTheme}/empty_192.png 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.png 2x`;
+        return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`;
     });
 
     buttonText = 'Создать группу';
diff --git a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html
index 4906f13f38..f8f73a9e15 100644
--- a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html
+++ b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.html
@@ -142,7 +142,7 @@
         <kbq-empty-state style="min-height: 216px">
             <div kbq-empty-state-icon>
                 <img
-                    src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.png"
+                    src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.webp"
                     height="80"
                     width="80"
                     [alt]="text().emptyState.image"
diff --git a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.ts b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.ts
index 810c49be30..6adcd3675b 100644
--- a/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.ts
+++ b/packages/docs-examples/components/notification-center/notification-center-empty/notification-center-empty-example.ts
@@ -70,7 +70,7 @@ export class NotificationCenterEmptyExample {
     protected readonly srcSet = computed(() => {
         const currentTheme = this.currentTheme();
 
-        return `https://koobiq.io/assets/images/${currentTheme}/empty_192.png 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.png 2x`;
+        return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`;
     });
 
     readonly isDesktop = toSignal(
diff --git a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html
index 7ac8f360f1..4f09a4b388 100644
--- a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html
+++ b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.html
@@ -147,7 +147,7 @@
         <kbq-empty-state style="min-height: 216px">
             <div kbq-empty-state-icon>
                 <img
-                    src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.png"
+                    src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.webp"
                     height="80"
                     width="80"
                     [alt]="text().emptyState.image"
diff --git a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.ts b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.ts
index 4b15a15523..b8eb0c3c9e 100644
--- a/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.ts
+++ b/packages/docs-examples/components/notification-center/notification-center-error/notification-center-error-example.ts
@@ -86,7 +86,7 @@ export class NotificationCenterErrorExample {
     protected readonly srcSet = computed(() => {
         const currentTheme = this.currentTheme();
 
-        return `https://koobiq.io/assets/images/${currentTheme}/empty_192.png 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.png 2x`;
+        return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`;
     });
 
     readonly isDesktop = toSignal(
diff --git a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html
index 5c59b43f5f..1c3e7f7e6c 100644
--- a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html
+++ b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.html
@@ -143,7 +143,7 @@
         <kbq-empty-state style="min-height: 216px">
             <div kbq-empty-state-icon>
                 <img
-                    src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.png"
+                    src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.webp"
                     height="80"
                     width="80"
                     [alt]="text().emptyState.image"
diff --git a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.ts b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.ts
index a70b2480ce..ddb77f112a 100644
--- a/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.ts
+++ b/packages/docs-examples/components/notification-center/notification-center-infinite-scroll/notification-center-infinite-scroll-example.ts
@@ -172,7 +172,7 @@ export class NotificationCenterInfiniteScrollExample {
     protected readonly srcSet = computed(() => {
         const currentTheme = this.currentTheme();
 
-        return `https://koobiq.io/assets/images/${currentTheme}/empty_192.png 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.png 2x`;
+        return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`;
     });
 
     private readonly themeService = inject(KbqThemeService, { optional: true });
diff --git a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html
index f5af2f430b..e91264fd04 100644
--- a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html
+++ b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.html
@@ -154,7 +154,7 @@
         <kbq-empty-state style="min-height: 216px">
             <div kbq-empty-state-icon>
                 <img
-                    src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.png"
+                    src="https://koobiq.io/assets/images/{{ currentTheme() }}/empty_192.webp"
                     height="80"
                     width="80"
                     [alt]="text().emptyState.image"
diff --git a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.ts b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.ts
index 6e2c0deb83..3a6e2d035f 100644
--- a/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.ts
+++ b/packages/docs-examples/components/notification-center/notification-center-overview/notification-center-overview-example.ts
@@ -72,7 +72,7 @@ export class NotificationCenterOverviewExample {
     protected readonly srcSet = computed(() => {
         const currentTheme = this.currentTheme();
 
-        return `https://koobiq.io/assets/images/${currentTheme}/empty_192.png 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.png 2x`;
+        return `https://koobiq.io/assets/images/${currentTheme}/empty_192.webp 1x, https://koobiq.io/assets/images/${currentTheme}/empty_192@2x.webp 2x`;
     });
 
     readonly isDesktop = toSignal(
diff --git a/yarn.lock b/yarn.lock
index ab1e261f83..38cd1d2978 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3700,6 +3700,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@koobiq/visuals@npm:^12.4.0":
+  version: 12.4.0
+  resolution: "@koobiq/visuals@npm:12.4.0"
+  checksum: 10c0/88b5c39f7baf50b1fc2549e68b08c2ed50dc95344c0e8765f3ed2c801dde34f2ea170cbea17806c51797a2263038fddae8941a1322fb09d02d76e9fa6e627dc8
+  languageName: node
+  linkType: hard
+
 "@listr2/prompt-adapter-inquirer@npm:3.0.5":
   version: 3.0.5
   resolution: "@listr2/prompt-adapter-inquirer@npm:3.0.5"
@@ -10760,6 +10767,7 @@ __metadata:
     "@koobiq/icons": "npm:^12.4.0"
     "@koobiq/luxon-date-adapter": "npm:^3.5.1"
     "@koobiq/moment-date-adapter": "npm:^3.5.1"
+    "@koobiq/visuals": "npm:^12.4.0"
     "@maskito/angular": "npm:^5.1.0"
     "@maskito/core": "npm:^5.1.0"
     "@maskito/kit": "npm:^5.6.0"