diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index 71d7401aefc6c..536461d6d9fc4 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -1,5 +1,6 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
+import {tuiProvideRoutePageTab as route} from '@taiga-ui/addon-doc';
 
 export const ROUTES: Routes = [
     {
@@ -173,14 +174,11 @@ export const ROUTES: Routes = [
             title: 'Action',
         },
     },
-    {
+    route({
         path: 'components/avatar',
-        loadChildren: async () =>
-            (await import('../components/avatar/avatar.module')).ExampleTuiAvatarModule,
-        data: {
-            title: 'Avatar',
-        },
-    },
+        loadComponent: async () => import('../components/avatar/avatar.component'),
+        title: 'Avatar',
+    }),
     {
         path: 'components/badge',
         loadChildren: async () =>
@@ -224,14 +222,6 @@ export const ROUTES: Routes = [
             title: 'Appearance',
         },
     },
-    {
-        path: 'experimental/avatar',
-        loadChildren: async () =>
-            (await import('../experimental/avatar/avatar.module')).ExampleTuiAvatarModule,
-        data: {
-            title: 'Avatar ',
-        },
-    },
     {
         path: 'experimental/chip',
         loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 024a9d61a92ff..5def5b5aefa9b 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -153,7 +153,8 @@ export const pages: TuiDocPages = [
     {
         section: 'Components',
         title: 'Avatar',
-        keywords: 'аватар, image, pic, картинка, изображение, avatar, stack',
+        keywords:
+            'аватар, image, pic, icon, картинка, изображение, avatar, stack, labeled',
         route: '/components/avatar',
     },
     {
@@ -858,12 +859,6 @@ export const pages: TuiDocPages = [
         route: '/icons/overview/Component',
     },
     // Experimental
-    {
-        section: 'Experimental',
-        title: 'Avatar ',
-        keywords: 'аватар, image, pic, icon, картинка, изображение, avatar, stack',
-        route: '/experimental/avatar',
-    },
     {
         section: 'Experimental',
         title: 'Badge',
diff --git a/projects/demo/src/modules/components/avatar/avatar.component.ts b/projects/demo/src/modules/components/avatar/avatar.component.ts
index 708c6320456e1..f23214fba6b9b 100644
--- a/projects/demo/src/modules/components/avatar/avatar.component.ts
+++ b/projects/demo/src/modules/components/avatar/avatar.component.ts
@@ -1,19 +1,47 @@
-import {Component} from '@angular/core';
+import {Component, Inject} from '@angular/core';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
-import {TuiSafeHtml} from '@taiga-ui/cdk';
-import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
+import {
+    TuiDocCodeModule,
+    TuiDocDemoModule,
+    TuiDocDocumentationModule,
+    TuiDocExample,
+    TuiDocExampleModule,
+    TuiDocPageModule,
+    TuiRawLoaderContent,
+} from '@taiga-ui/addon-doc';
+import {TuiNotificationModule, TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
+
+import {TuiAvatarExample1} from './examples/1';
+import {TuiAvatarExample2} from './examples/2';
+import {TuiAvatarExample3} from './examples/3';
+import {TuiAvatarExample4} from './examples/4';
+import {TuiAvatarExample5} from './examples/5';
+import {TuiAvatarExample6} from './examples/6';
 
 @Component({
+    standalone: true,
     selector: 'example-avatar',
+    imports: [
+        TuiDocPageModule,
+        TuiDocExampleModule,
+        TuiNotificationModule,
+        TuiAvatarExample1,
+        TuiAvatarExample2,
+        TuiAvatarExample3,
+        TuiAvatarExample4,
+        TuiAvatarExample5,
+        TuiAvatarExample6,
+        TuiDocDemoModule,
+        TuiAvatarComponent,
+        TuiDocDocumentationModule,
+        TuiDocCodeModule,
+    ],
     templateUrl: './avatar.template.html',
     changeDetection,
 })
-export class ExampleTuiAvatarComponent {
-    readonly exampleOptions: TuiRawLoaderContent = import(
-        './examples/import/define-options.md?raw'
-    );
-
+export default class ExampleTuiAvatarComponent {
     readonly exampleModule: TuiRawLoaderContent = import(
         './examples/import/import-module.md?raw'
     );
@@ -30,6 +58,7 @@ export class ExampleTuiAvatarComponent {
     readonly example2: TuiDocExample = {
         TypeScript: import('./examples/2/index.ts?raw'),
         HTML: import('./examples/2/index.html?raw'),
+        LESS: import('./examples/2/index.less?raw'),
     };
 
     readonly example3: TuiDocExample = {
@@ -40,7 +69,6 @@ export class ExampleTuiAvatarComponent {
     readonly example4: TuiDocExample = {
         TypeScript: import('./examples/4/index.ts?raw'),
         HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
     };
 
     readonly example5: TuiDocExample = {
@@ -54,28 +82,7 @@ export class ExampleTuiAvatarComponent {
         LESS: import('./examples/6/index.less?raw'),
     };
 
-    readonly avatarUrlVariants: readonly string[] = [
-        'https://ng-web-apis.github.io/dist/assets/images/web-api.svg',
-        'https://taiga-ui.dev/assets/images/test-not-found.png',
-    ];
-
-    readonly fallbackVariants: readonly TuiSafeHtml[] = [
-        'tuiIconUserLarge',
-        '<svg enable-background="new 0 0 32 32" height="32px" viewBox="0 0 32 32" width="32px"' +
-            ' xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Error_x2C__lost_x2C__no_page_x2C__not_found"><g><g><g><circle cx="7.5" cy="5.5" fill="#263238" r="0.5"/><circle cx="5.5" cy="5.5" fill="#263238" r="0.5"/><circle cx="3.5" cy="5.5" fill="#263238" r="0.5"/><path d="M30.5,8h-29C1.224,8,1,7.776,1,7.5S1.224,7,1.5,7h29C30.776,7,31,7.224,31,7.5S30.776,8,30.5,8z" fill="#263238"/><path d="M29.5,29h-27C1.673,29,1,28.327,1,27.5v-23C1,3.673,1.673,3,2.5,3h27C30.327,3,31,3.673,31,4.5v23      C31,28.327,30.327,29,29.5,29z M2.5,4C2.224,4,2,4.225,2,4.5v23C2,27.775,2.224,28,2.5,28h27c0.276,0,0.5-0.225,0.5-0.5v-23      C30,4.225,29.776,4,29.5,4H2.5z" fill="#263238"/></g></g></g><g><path d="M24.5,24c-0.276,0-0.5-0.224-0.5-0.5V21h-3.5c-0.163,0-0.315-0.079-0.409-0.212s-0.117-0.303-0.062-0.456    l2.5-7C22.6,13.133,22.789,13,23,13h1.5c0.276,0,0.5,0.224,0.5,0.5V20h0.5c0.276,0,0.5,0.224,0.5,0.5S25.776,21,25.5,21H25v2.5    C25,23.776,24.776,24,24.5,24z M21.209,20H24v-6h-0.647L21.209,20z" fill="#263238"/><path d="M10.5,24c-0.276,0-0.5-0.224-0.5-0.5V21H6.5c-0.163,0-0.315-0.079-0.409-0.212s-0.117-0.303-0.062-0.456    l2.5-7C8.6,13.133,8.789,13,9,13h1.5c0.276,0,0.5,0.224,0.5,0.5V20h0.5c0.276,0,0.5,0.224,0.5,0.5S11.776,21,11.5,21H11v2.5    C11,23.776,10.776,24,10.5,24z M7.209,20H10v-6H9.353L7.209,20z" fill="#263238"/><path d="M17.5,24h-3c-0.827,0-1.5-0.673-1.5-1.5v-8c0-0.827,0.673-1.5,1.5-1.5h3c0.827,0,1.5,0.673,1.5,1.5v8    C19,23.327,18.327,24,17.5,24z M14.5,14c-0.276,0-0.5,0.225-0.5,0.5v8c0,0.275,0.224,0.5,0.5,0.5h3c0.276,0,0.5-0.225,0.5-0.5v-8    c0-0.275-0.224-0.5-0.5-0.5H14.5z" fill="#263238"/></g></g></svg>',
-    ];
-
-    avatarUrl: string | null = null;
-
-    fallback: TuiSafeHtml | null = this.fallbackVariants[0];
-
-    text = 'daenerys targaryen';
-
-    rounded = false;
-
-    autoColor = false;
-
-    readonly sizeVariants: ReadonlyArray<TuiSizeXXL | TuiSizeXXS> = [
+    readonly sizes: ReadonlyArray<TuiSizeXXL | TuiSizeXXS> = [
         'xxs',
         'xs',
         's',
@@ -85,11 +92,21 @@ export class ExampleTuiAvatarComponent {
         'xxl',
     ];
 
-    size = this.sizeVariants[3];
+    size = this.sizes[3];
+
+    readonly srcVariants: ReadonlyArray<SafeResourceUrl | string> = [
+        'MW',
+        'https://avatars.githubusercontent.com/u/11832552',
+        'https://taiga-ui.dev/assets/images/test-not-found.png',
+        'tuiIconUserLarge',
+        this.sanitizer.bypassSecurityTrustResourceUrl(
+            'https://avatars.githubusercontent.com/u/10106368',
+        ),
+    ];
 
-    border = 'var(--tui-base-01)';
+    src = this.srcVariants[0];
 
-    color = 'var(--tui-text-01)';
+    round = true;
 
-    background = 'var(--tui-secondary-active)';
+    constructor(@Inject(DomSanitizer) private readonly sanitizer: DomSanitizer) {}
 }
diff --git a/projects/demo/src/modules/components/avatar/avatar.module.ts b/projects/demo/src/modules/components/avatar/avatar.module.ts
deleted file mode 100644
index 24a8136fd1f66..0000000000000
--- a/projects/demo/src/modules/components/avatar/avatar.module.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiNotificationModule} from '@taiga-ui/core';
-import {TuiAvatarModule} from '@taiga-ui/kit';
-
-import {ExampleTuiAvatarComponent} from './avatar.component';
-import {TuiAvatarExample1} from './examples/1';
-import {TuiAvatarExample2} from './examples/2';
-import {TuiAvatarExample3} from './examples/3';
-import {TuiAvatarExample4} from './examples/4';
-import {TuiAvatarExample5} from './examples/5';
-import {TuiAvatarExample6} from './examples/6';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAvatarModule,
-        TuiNotificationModule,
-        TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiAvatarComponent)),
-    ],
-    declarations: [
-        ExampleTuiAvatarComponent,
-        TuiAvatarExample1,
-        TuiAvatarExample2,
-        TuiAvatarExample3,
-        TuiAvatarExample4,
-        TuiAvatarExample5,
-        TuiAvatarExample6,
-    ],
-    exports: [ExampleTuiAvatarComponent],
-})
-export class ExampleTuiAvatarModule {}
diff --git a/projects/demo/src/modules/components/avatar/avatar.template.html b/projects/demo/src/modules/components/avatar/avatar.template.html
index 767f7fcfdff9e..ce9c76986fdc2 100644
--- a/projects/demo/src/modules/components/avatar/avatar.template.html
+++ b/projects/demo/src/modules/components/avatar/avatar.template.html
@@ -1,30 +1,38 @@
 <tui-doc-page
     header="Avatar"
-    package="KIT"
+    package="EXPERIMENTAL"
     type="components"
 >
     <ng-template pageTab>
-        <p>Use Avatar to view person or company. It can be photo, icon or first letters of name.</p>
+        <p>New version for Avatar component following updated design specs for displaying text, pictures and icons.</p>
 
         <tui-doc-example
-            id="base"
-            heading="Basic"
+            id="content"
+            heading="Content types"
             [content]="example1"
         >
+            <tui-notification class="tui-space_bottom-4">
+                This example requires import of
+                <code>TuiFallbackSrcModule</code>
+            </tui-notification>
             <tui-avatar-example-1></tui-avatar-example-1>
         </tui-doc-example>
 
         <tui-doc-example
-            id="autocolor"
+            id="color"
             heading="Colors"
             [content]="example2"
         >
+            <tui-notification class="tui-space_bottom-4">
+                This example requires import of
+                <code>TuiFadeModule</code>
+            </tui-notification>
             <tui-avatar-example-2></tui-avatar-example-2>
         </tui-doc-example>
 
         <tui-doc-example
-            id="options"
-            heading="Options"
+            id="size"
+            heading="Sizes"
             [content]="example3"
         >
             <tui-avatar-example-3></tui-avatar-example-3>
@@ -32,40 +40,27 @@
 
         <tui-doc-example
             id="stacking"
-            heading="Stacking avatars"
+            heading="Stacking"
             [content]="example4"
         >
             <tui-notification class="tui-space_bottom-4">
-                Use special
-                <code>tui-avatar-stack</code>
-                class to enable stacking
+                This example requires import of
+                <code>TuiAvatarStackComponent</code>
             </tui-notification>
             <tui-avatar-example-4></tui-avatar-example-4>
         </tui-doc-example>
 
         <tui-doc-example
-            id="icons"
-            heading="Icons"
+            id="options"
+            heading="Options with DI"
             [content]="example5"
         >
-            <tui-notification class="tui-space_bottom-4">
-                Sizes were updated and synced with
-                <a
-                    routerLink="/icons/marker-icon"
-                    tuiLink
-                >
-                    <code>MarkerIcon</code>
-                </a>
-                . To prevent breaking changes
-                <code>new</code>
-                attribute has to be added to enable new sizes.
-            </tui-notification>
             <tui-avatar-example-5></tui-avatar-example-5>
         </tui-doc-example>
 
         <tui-doc-example
-            id="fallback"
-            heading="Fallback"
+            id="labeled"
+            heading="Labeled"
             [content]="example6"
         >
             <tui-avatar-example-6></tui-avatar-example-6>
@@ -75,91 +70,39 @@
     <ng-template pageTab>
         <tui-doc-demo>
             <tui-avatar
-                new
-                [autoColor]="autoColor"
-                [avatarUrl]="avatarUrl"
-                [fallback]="fallback"
-                [rounded]="rounded"
+                [round]="round"
                 [size]="size"
-                [style.--tui-avatar-background]="background"
-                [style.--tui-avatar-color]="color"
-                [text]="text"
+                [src]="src"
             ></tui-avatar>
         </tui-doc-demo>
         <tui-doc-documentation>
             <ng-template
                 documentationPropertyMode="input"
-                documentationPropertyName="autoColor"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="autoColor"
-            >
-                Auto color if there is no image
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="avatarUrl"
-                documentationPropertyType="string | SafeResourceUrl | null"
-                [documentationPropertyValues]="avatarUrlVariants"
-                [(documentationPropertyValue)]="avatarUrl"
-            >
-                Avatar URL or Taiga UI icon name
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="fallback"
-                documentationPropertyType="string | SafeHtml | null"
-                [documentationPropertyValues]="fallbackVariants"
-                [(documentationPropertyValue)]="fallback"
-            >
-                Avatar URL or Taiga UI icon name
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="rounded"
+                documentationPropertyName="round"
                 documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="rounded"
+                [(documentationPropertyValue)]="round"
             >
-                Rounded mode
+                Use round shape
             </ng-template>
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="size"
-                documentationPropertyType="TuiSizeXXS | TuiSizeXXL"
-                [documentationPropertyValues]="sizeVariants"
+                documentationPropertyType="TuiSizeS | TuiSizeL"
+                [documentationPropertyValues]="sizes"
                 [(documentationPropertyValue)]="size"
             >
                 Size
             </ng-template>
             <ng-template
                 documentationPropertyMode="input"
-                documentationPropertyName="text"
-                documentationPropertyType="string"
-                [(documentationPropertyValue)]="text"
+                documentationPropertyName="src"
+                documentationPropertyType="SafeResourceUrl | string | null"
+                [documentationPropertyValues]="srcVariants"
+                [(documentationPropertyValue)]="src"
             >
-                Name (Avatar shows first letters of name if there is no image)
-            </ng-template>
-        </tui-doc-documentation>
-        <tui-doc-documentation heading="CSS variables">
-            <ng-template
-                documentationPropertyName="--tui-avatar-border"
-                documentationPropertyType="string"
-                [(documentationPropertyValue)]="border"
-            >
-                Color of the border for stacking avatars
-            </ng-template>
-            <ng-template
-                documentationPropertyName="--tui-avatar-color"
-                documentationPropertyType="string"
-                [(documentationPropertyValue)]="color"
-            >
-                Color of the text
-            </ng-template>
-            <ng-template
-                documentationPropertyName="--tui-avatar-background"
-                documentationPropertyType="string"
-                [(documentationPropertyValue)]="background"
-            >
-                Background
+                Initials, image URL, or icon name. Alternatively you can pass text as
+                <code>ng-content</code>
+                which would be styled differently from initials and fade if overflown
             </ng-template>
         </tui-doc-documentation>
     </ng-template>
@@ -167,11 +110,7 @@
     <ng-template pageTab>
         <ol class="b-demo-steps">
             <li>
-                <p>
-                    Import
-                    <code>TuiAvatarModule</code>
-                    into a module where you want to use our component
-                </p>
+                <p>Import module:</p>
 
                 <tui-doc-code
                     filename="my.module.ts"
@@ -187,19 +126,6 @@
                     [code]="exampleHtml"
                 ></tui-doc-code>
             </li>
-
-            <li>
-                <p>
-                    Optionally use the
-                    <code>TUI_AVATAR_OPTIONS</code>
-                    injection token to override the default options for the component.
-                </p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleOptions"
-                ></tui-doc-code>
-            </li>
         </ol>
     </ng-template>
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/avatar/examples/1/index.html b/projects/demo/src/modules/components/avatar/examples/1/index.html
index df6655e2c7d9c..eaf75bc5fed59 100644
--- a/projects/demo/src/modules/components/avatar/examples/1/index.html
+++ b/projects/demo/src/modules/components/avatar/examples/1/index.html
@@ -1,14 +1,31 @@
+<tui-avatar src="tuiIconUserLarge"></tui-avatar>
 <tui-avatar
-    class="tui-space_top-1"
-    [avatarUrl]="avatar"
-></tui-avatar>
-<tui-avatar
-    text="alex inkin"
-    class="tui-space_top-1"
-></tui-avatar>
-<tui-avatar
-    size="l"
-    text="dmitriy demenskiy"
-    class="tui-space_top-1"
-    [rounded]="true"
+    [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
 ></tui-avatar>
+<tui-avatar src="AI"></tui-avatar>
+<tui-avatar>99+</tui-avatar>
+<tui-avatar>
+    <picture>
+        <source
+            media="(min-width: 600px)"
+            srcset="/assets/images/angular.svg"
+        />
+        <img
+            alt="Alex Inkin"
+            src="/assets/images/avatar.jpg"
+        />
+    </picture>
+</tui-avatar>
+<tui-avatar>
+    <video
+        autoplay
+        loop
+        playsinline
+        [muted]="true"
+    >
+        <source
+            src="/assets/media/bbb.mp4"
+            type="video/mp4"
+        />
+    </video>
+</tui-avatar>
diff --git a/projects/demo/src/modules/experimental/avatar/examples/1/index.less b/projects/demo/src/modules/components/avatar/examples/1/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/avatar/examples/1/index.less
rename to projects/demo/src/modules/components/avatar/examples/1/index.less
diff --git a/projects/demo/src/modules/components/avatar/examples/1/index.ts b/projects/demo/src/modules/components/avatar/examples/1/index.ts
index f87fbcb6adeac..7885891bf1373 100644
--- a/projects/demo/src/modules/components/avatar/examples/1/index.ts
+++ b/projects/demo/src/modules/components/avatar/examples/1/index.ts
@@ -1,13 +1,17 @@
+import {AsyncPipe} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiFallbackSrcModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-avatar-example-1',
+    imports: [TuiAvatarComponent, TuiFallbackSrcModule, AsyncPipe],
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiAvatarExample1 {
-    avatar = 'https://ng-web-apis.github.io/dist/assets/images/web-api.svg';
-}
+export class TuiAvatarExample1 {}
diff --git a/projects/demo/src/modules/components/avatar/examples/2/index.html b/projects/demo/src/modules/components/avatar/examples/2/index.html
index 5f18e2cdbe4e0..3c93cc27b5562 100644
--- a/projects/demo/src/modules/components/avatar/examples/2/index.html
+++ b/projects/demo/src/modules/components/avatar/examples/2/index.html
@@ -1,19 +1,12 @@
 <tui-avatar
-    text="Yulia Tsareva"
-    class="tui-space_top-1"
-    [autoColor]="true"
+    appearance="accent"
+    src="tuiIconUserLarge"
 ></tui-avatar>
 <tui-avatar
-    text="Alex Inkin"
-    class="tui-space_top-1"
-    [autoColor]="true"
-></tui-avatar>
-<tui-avatar
-    text="Dmitriy Demenskiy"
-    class="tui-space_top-1"
-    [autoColor]="true"
-></tui-avatar>
-<tui-avatar
-    text="Evgeniy Mamaev"
-    class="custom tui-space_top-1"
+    src="AI"
+    class="text"
+    [style.background]="'AI' | tuiAutoColor"
 ></tui-avatar>
+<tui-avatar class="text">
+    <div tuiFade>Fading</div>
+</tui-avatar>
diff --git a/projects/demo/src/modules/components/avatar/examples/2/index.less b/projects/demo/src/modules/components/avatar/examples/2/index.less
index af9ab4815f296..7c34c000eadfe 100644
--- a/projects/demo/src/modules/components/avatar/examples/2/index.less
+++ b/projects/demo/src/modules/components/avatar/examples/2/index.less
@@ -1,4 +1,9 @@
-.custom {
-    --tui-avatar-color: #fff;
-    --tui-avatar-background: linear-gradient(to bottom right, #cd56c2, #6e48aa);
+:host {
+    display: flex;
+    gap: 1rem;
+}
+
+.text {
+    background: var(--tui-base-05);
+    color: var(--tui-text-01-night);
 }
diff --git a/projects/demo/src/modules/components/avatar/examples/2/index.ts b/projects/demo/src/modules/components/avatar/examples/2/index.ts
index e75c6c3ef780d..14b8680420ee8 100644
--- a/projects/demo/src/modules/components/avatar/examples/2/index.ts
+++ b/projects/demo/src/modules/components/avatar/examples/2/index.ts
@@ -1,9 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAutoColorModule, TuiFadeModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-avatar-example-2',
+    imports: [TuiAvatarComponent, TuiAutoColorModule, TuiFadeModule],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
diff --git a/projects/demo/src/modules/components/avatar/examples/3/index.html b/projects/demo/src/modules/components/avatar/examples/3/index.html
index 4946d4efa6abf..58b3e218997aa 100644
--- a/projects/demo/src/modules/components/avatar/examples/3/index.html
+++ b/projects/demo/src/modules/components/avatar/examples/3/index.html
@@ -1,4 +1,7 @@
-<tui-avatar
-    text="Yulia Tsareva"
-    class="tui-space_top-1"
-></tui-avatar>
+<tui-avatar size="xxl">XXL</tui-avatar>
+<tui-avatar size="xl">XL</tui-avatar>
+<tui-avatar size="l">L</tui-avatar>
+<tui-avatar size="m">M</tui-avatar>
+<tui-avatar size="s">S</tui-avatar>
+<tui-avatar size="xs">XS</tui-avatar>
+<tui-avatar size="xxs">XXS</tui-avatar>
diff --git a/projects/demo/src/modules/experimental/avatar/examples/3/index.less b/projects/demo/src/modules/components/avatar/examples/3/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/avatar/examples/3/index.less
rename to projects/demo/src/modules/components/avatar/examples/3/index.less
diff --git a/projects/demo/src/modules/components/avatar/examples/3/index.ts b/projects/demo/src/modules/components/avatar/examples/3/index.ts
index 70a5de48bf1f0..505eead3c095d 100644
--- a/projects/demo/src/modules/components/avatar/examples/3/index.ts
+++ b/projects/demo/src/modules/components/avatar/examples/3/index.ts
@@ -1,19 +1,17 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {tuiAvatarOptionsProvider} from '@taiga-ui/kit';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-avatar-example-3',
+    imports: [TuiAvatarComponent],
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
-    providers: [
-        tuiAvatarOptionsProvider({
-            size: 'l',
-            autoColor: true,
-            rounded: true,
-        }),
-    ],
 })
-export class TuiAvatarExample3 {}
+export class TuiAvatarExample3 {
+    readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan'];
+}
diff --git a/projects/demo/src/modules/components/avatar/examples/4/index.html b/projects/demo/src/modules/components/avatar/examples/4/index.html
index 680580682a986..c73e5d628a62a 100644
--- a/projects/demo/src/modules/components/avatar/examples/4/index.html
+++ b/projects/demo/src/modules/components/avatar/examples/4/index.html
@@ -1,17 +1,20 @@
-<div class="tui-avatar-stack">
+<tui-avatar-stack
+    *ngFor="let size of sizes; let odd = odd"
+    class="tui-space_vertical-4"
+    [direction]="odd ? 'left' : 'right'"
+>
     <tui-avatar
-        *ngFor="let user of users"
-        [autoColor]="true"
-        [text]="user"
+        *ngFor="let name of names"
+        [round]="odd"
+        [size]="size"
+        [src]="name | tuiInitials"
+        [style.background]="name | tuiAutoColor"
     ></tui-avatar>
-</div>
-
-<div class="tui-avatar-stack reversed">
     <tui-avatar
-        *ngFor="let user of users"
         size="l"
-        [autoColor]="true"
-        [rounded]="true"
-        [text]="user"
-    ></tui-avatar>
-</div>
+        [round]="odd"
+        [size]="size"
+    >
+        99+
+    </tui-avatar>
+</tui-avatar-stack>
diff --git a/projects/demo/src/modules/components/avatar/examples/4/index.less b/projects/demo/src/modules/components/avatar/examples/4/index.less
deleted file mode 100644
index eabebfa1790af..0000000000000
--- a/projects/demo/src/modules/components/avatar/examples/4/index.less
+++ /dev/null
@@ -1,4 +0,0 @@
-.reversed {
-    flex-direction: row-reverse;
-    margin-top: 1rem;
-}
diff --git a/projects/demo/src/modules/components/avatar/examples/4/index.ts b/projects/demo/src/modules/components/avatar/examples/4/index.ts
index d325a83a9623e..8db1a8ce1aeeb 100644
--- a/projects/demo/src/modules/components/avatar/examples/4/index.ts
+++ b/projects/demo/src/modules/components/avatar/examples/4/index.ts
@@ -1,19 +1,34 @@
+import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
+import {TuiAutoColorModule, TuiInitialsModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiAvatarStackComponent} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-avatar-example-4',
+    imports: [
+        TuiAvatarStackComponent,
+        NgForOf,
+        TuiAvatarComponent,
+        TuiInitialsModule,
+        TuiAutoColorModule,
+    ],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
 export class TuiAvatarExample4 {
-    readonly users = [
-        'Alex Inkin',
-        'Vladimir Potekhin',
-        'Nikita Barsukov',
-        'Maxim Ivanov',
+    readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan'];
+    readonly sizes: ReadonlyArray<TuiSizeXXL | TuiSizeXXS> = [
+        'xxl',
+        'xl',
+        'l',
+        'm',
+        's',
+        'xs',
+        'xxs',
     ];
 }
diff --git a/projects/demo/src/modules/components/avatar/examples/5/index.html b/projects/demo/src/modules/components/avatar/examples/5/index.html
index a92a087806c4e..2b74bf735f1a2 100644
--- a/projects/demo/src/modules/components/avatar/examples/5/index.html
+++ b/projects/demo/src/modules/components/avatar/examples/5/index.html
@@ -1,46 +1 @@
-<tui-avatar
-    avatarUrl="tuiIconUser"
-    new
-    size="xxs"
-    text="alex inkin"
-></tui-avatar>
-<tui-avatar
-    avatarUrl="tuiIconUser"
-    new
-    size="xs"
-    text="alex inkin"
-    class="tui-space_vertical-1"
-></tui-avatar>
-<tui-avatar
-    avatarUrl="tuiIconUser"
-    new
-    size="s"
-    text="alex inkin"
-    class="tui-space_vertical-1"
-></tui-avatar>
-<tui-avatar
-    avatarUrl="tuiIconUser"
-    new
-    size="m"
-    text="alex inkin"
-></tui-avatar>
-<tui-avatar
-    avatarUrl="tuiIconUser"
-    new
-    size="l"
-    text="alex inkin"
-    class="tui-space_vertical-1"
-></tui-avatar>
-<tui-avatar
-    avatarUrl="tuiIconUser"
-    new
-    size="xl"
-    text="alex inkin"
-    class="tui-space_vertical-1"
-></tui-avatar>
-<tui-avatar
-    avatarUrl="tuiIconUser"
-    new
-    size="xxl"
-    text="alex inkin"
-></tui-avatar>
+<tui-avatar src="DI"></tui-avatar>
diff --git a/projects/demo/src/modules/components/avatar/examples/5/index.ts b/projects/demo/src/modules/components/avatar/examples/5/index.ts
index 61abb00b12f1e..dac85d2eeec7e 100644
--- a/projects/demo/src/modules/components/avatar/examples/5/index.ts
+++ b/projects/demo/src/modules/components/avatar/examples/5/index.ts
@@ -1,11 +1,15 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiAvatarComponent, tuiAvatarOptionsProvider} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-avatar-example-5',
+    imports: [TuiAvatarComponent],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
+    providers: [tuiAvatarOptionsProvider({size: 'l'})],
 })
 export class TuiAvatarExample5 {}
diff --git a/projects/demo/src/modules/components/avatar/examples/6/index.html b/projects/demo/src/modules/components/avatar/examples/6/index.html
index 3a9fbbae55070..09cdaa5b4fa51 100644
--- a/projects/demo/src/modules/components/avatar/examples/6/index.html
+++ b/projects/demo/src/modules/components/avatar/examples/6/index.html
@@ -1,12 +1,34 @@
-<tui-avatar
-    new
-    class="avatar"
-    [avatarUrl]="waterplea"
-></tui-avatar>
-
-<tui-avatar
-    fallback="tuiIconUserLarge"
-    new
-    class="tui-space_left-3 avatar"
-    [avatarUrl]="wrongUrl"
-></tui-avatar>
+<tui-avatar-labeled>
+    <tui-avatar
+        [src]="'https://avatars.githubusercontent.com/u/10106368' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
+    ></tui-avatar>
+
+    <div tuiFade>MarsiBarsi</div>
+</tui-avatar-labeled>
+
+<tui-avatar-labeled>
+    <tui-avatar
+        [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
+    ></tui-avatar>
+
+    <div tuiFade>Inkin</div>
+    <div tuiFade>Alexander</div>
+</tui-avatar-labeled>
+
+<tui-avatar-labeled>
+    <tui-avatar
+        [src]="'https://avatars.githubusercontent.com/u/46284632' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
+    ></tui-avatar>
+
+    <div tuiFade>Potekhin</div>
+    <div tuiFade>Vladimir</div>
+</tui-avatar-labeled>
+
+<tui-avatar-labeled>
+    <tui-avatar
+        [src]="'https://avatars.githubusercontent.com/u/35179038' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
+    ></tui-avatar>
+
+    <div tuiFade>Barsukov</div>
+    <div tuiFade>Nikita</div>
+</tui-avatar-labeled>
diff --git a/projects/demo/src/modules/components/avatar/examples/6/index.less b/projects/demo/src/modules/components/avatar/examples/6/index.less
index e7969422a645d..d8787b7d1879d 100644
--- a/projects/demo/src/modules/components/avatar/examples/6/index.less
+++ b/projects/demo/src/modules/components/avatar/examples/6/index.less
@@ -1,15 +1,8 @@
-@import '@taiga-ui/core/styles/taiga-ui-local';
-
 :host {
     display: flex;
+    gap: 1rem;
 }
 
-.avatar {
-    box-shadow: var(--tui-shadow);
-    background: transparent;
-    border: 1px solid;
-
-    &:hover {
-        box-shadow: var(--tui-shadow-hover);
-    }
+tui-avatar {
+    border: 1px solid var(--tui-base-04);
 }
diff --git a/projects/demo/src/modules/components/avatar/examples/6/index.ts b/projects/demo/src/modules/components/avatar/examples/6/index.ts
index 7b4b6333b7de5..372416059646a 100644
--- a/projects/demo/src/modules/components/avatar/examples/6/index.ts
+++ b/projects/demo/src/modules/components/avatar/examples/6/index.ts
@@ -1,15 +1,23 @@
+import {AsyncPipe} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiFadeModule, TuiFallbackSrcModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiAvatarLabeledComponent} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'tui-avatar-example-6',
+    imports: [
+        TuiFallbackSrcModule,
+        AsyncPipe,
+        TuiAvatarLabeledComponent,
+        TuiAvatarComponent,
+        TuiFadeModule,
+    ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiAvatarExample6 {
-    readonly waterplea = 'https://avatars.githubusercontent.com/u/11832552?v=4';
-    readonly wrongUrl = 'https://taiga-ui.dev/assets/images/test-not-found.png';
-}
+export class TuiAvatarExample6 {}
diff --git a/projects/demo/src/modules/components/avatar/examples/import/define-options.md b/projects/demo/src/modules/components/avatar/examples/import/define-options.md
deleted file mode 100644
index 547c4e019f857..0000000000000
--- a/projects/demo/src/modules/components/avatar/examples/import/define-options.md
+++ /dev/null
@@ -1,15 +0,0 @@
-```ts
-import {tuiAvatarOptionsProvider} from '@taiga-ui/kit';
-// ...
-
-@NgModule({
-  providers: [
-    tuiAvatarOptionsProvider({
-      size: 'l',
-      autoColor: true,
-      rounded: true,
-    }),
-  ],
-})
-export class MyModule {}
-```
diff --git a/projects/demo/src/modules/components/avatar/examples/import/import-module.md b/projects/demo/src/modules/components/avatar/examples/import/import-module.md
index fa397d5c8819d..c498d9ead48be 100644
--- a/projects/demo/src/modules/components/avatar/examples/import/import-module.md
+++ b/projects/demo/src/modules/components/avatar/examples/import/import-module.md
@@ -1,13 +1,14 @@
 ```ts
 import {NgModule} from '@angular/core';
-import {TuiAvatarModule} from '@taiga-ui/kit';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 // ...
 
-@NgModule({
+@Component({
+  standalone: true,
   imports: [
     // ...
-    TuiAvatarModule,
+    TuiAvatarComponent,
   ],
 })
-export class MyModule {}
+export class MyComponent {}
 ```
diff --git a/projects/demo/src/modules/components/avatar/examples/import/insert-template.md b/projects/demo/src/modules/components/avatar/examples/import/insert-template.md
index a9f89e91ed0b2..02d2e7ed2b7da 100644
--- a/projects/demo/src/modules/components/avatar/examples/import/insert-template.md
+++ b/projects/demo/src/modules/components/avatar/examples/import/insert-template.md
@@ -1,3 +1,3 @@
 ```html
-<tui-avatar text="Batman"></tui-avatar>
+<tui-avatar>Batman</tui-avatar>
 ```
diff --git a/projects/demo/src/modules/components/badged-content/badged-content.module.ts b/projects/demo/src/modules/components/badged-content/badged-content.module.ts
index c402647dc8fe9..cae900635b2d3 100644
--- a/projects/demo/src/modules/components/badged-content/badged-content.module.ts
+++ b/projects/demo/src/modules/components/badged-content/badged-content.module.ts
@@ -5,13 +5,13 @@ import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiPlatformModule} from '@taiga-ui/cdk';
 import {TuiNotificationModule} from '@taiga-ui/core';
 import {
-    TuiAvatarModule,
     TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiFallbackSrcModule,
     TuiIconModule,
 } from '@taiga-ui/experimental';
 import {
+    TuiAvatarComponent,
     TuiBadgedContentComponent,
     TuiBadgeDirective,
     TuiInputModule,
@@ -29,7 +29,7 @@ import {TuiBadgedContentExample3} from './examples/3';
         TuiIconModule,
         TuiBadgeDirective,
         TuiBadgedContentComponent,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiFallbackSrcModule,
         TuiInputModule,
         TuiButtonModule,
diff --git a/projects/demo/src/modules/components/block-status/block-status.module.ts b/projects/demo/src/modules/components/block-status/block-status.module.ts
index 7422e9da57495..2bab17573d3c0 100644
--- a/projects/demo/src/modules/components/block-status/block-status.module.ts
+++ b/projects/demo/src/modules/components/block-status/block-status.module.ts
@@ -4,7 +4,8 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core';
-import {TuiAvatarModule} from '@taiga-ui/kit';
+import {TuiAutoColorModule, TuiInitialsModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 import {TuiBlockStatusModule} from '@taiga-ui/layout';
 
 import {ExampleTuiBlockStatusComponent} from './block-status.component';
@@ -22,8 +23,10 @@ import {TuiBlockStatusExample4} from './examples/4';
         ReactiveFormsModule,
         TuiAddonDocModule,
         TuiButtonModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBlockStatusComponent)),
+        TuiInitialsModule,
+        TuiAutoColorModule,
     ],
     declarations: [
         ExampleTuiBlockStatusComponent,
diff --git a/projects/demo/src/modules/components/block-status/examples/4/index.html b/projects/demo/src/modules/components/block-status/examples/4/index.html
index a54b3765f1b57..3863cfee85a5e 100644
--- a/projects/demo/src/modules/components/block-status/examples/4/index.html
+++ b/projects/demo/src/modules/components/block-status/examples/4/index.html
@@ -10,10 +10,11 @@
             <tui-avatar
                 *ngFor="let user of users"
                 size="l"
-                [autoColor]="true"
-                [rounded]="true"
-                [text]="user"
-            ></tui-avatar>
+                [round]="true"
+                [style.background]="user | tuiAutoColor"
+            >
+                {{ user | tuiInitials }}
+            </tui-avatar>
         </div>
 
         You can put other content instead of image using
diff --git a/projects/demo/src/modules/components/button/button.module.ts b/projects/demo/src/modules/components/button/button.module.ts
index de759c7a22ec3..d2bca54399a93 100644
--- a/projects/demo/src/modules/components/button/button.module.ts
+++ b/projects/demo/src/modules/components/button/button.module.ts
@@ -14,7 +14,7 @@ import {
     TuiNotificationModule,
     TuiSvgModule,
 } from '@taiga-ui/core';
-import {TuiArrowModule, TuiAvatarModule, TuiToggleModule} from '@taiga-ui/kit';
+import {TuiArrowModule, TuiAvatarComponent, TuiToggleModule} from '@taiga-ui/kit';
 
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {ExampleTuiButtonComponent} from './button.component';
@@ -30,7 +30,7 @@ import {TuiButtonExample6} from './examples/6';
         CommonModule,
         FormsModule,
         TuiThumbnailCardModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiSvgModule,
         TuiToggleModule,
         TuiFocusableModule,
diff --git a/projects/demo/src/modules/components/button/examples/1/index.html b/projects/demo/src/modules/components/button/examples/1/index.html
index e9381e9e274f7..4d68e9abc8fa3 100644
--- a/projects/demo/src/modules/components/button/examples/1/index.html
+++ b/projects/demo/src/modules/components/button/examples/1/index.html
@@ -1,8 +1,8 @@
 <ng-template #icon>
     <tui-avatar
         size="xs"
-        [avatarUrl]="avatarUrl"
-        [rounded]="true"
+        [round]="true"
+        [src]="avatarUrl"
     ></tui-avatar>
 </ng-template>
 <h3>button[tuiButton]</h3>
diff --git a/projects/demo/src/modules/components/checkbox-block/checkbox-block.module.ts b/projects/demo/src/modules/components/checkbox-block/checkbox-block.module.ts
index a8144fcffeb7d..baa28fc773c52 100644
--- a/projects/demo/src/modules/components/checkbox-block/checkbox-block.module.ts
+++ b/projects/demo/src/modules/components/checkbox-block/checkbox-block.module.ts
@@ -4,7 +4,12 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiButtonModule, TuiGroupModule, TuiTooltipModule} from '@taiga-ui/core';
-import {TuiAvatarModule, TuiCheckboxBlockModule, TuiRadioListModule} from '@taiga-ui/kit';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
+import {
+    TuiAvatarComponent,
+    TuiCheckboxBlockModule,
+    TuiRadioListModule,
+} from '@taiga-ui/kit';
 
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {ExampleTuiCheckboxBlockComponent} from './checkbox-block.component';
@@ -22,11 +27,12 @@ import {TuiCheckboxBlockExample3} from './examples/3';
         InheritedDocumentationModule,
         ReactiveFormsModule,
         CommonModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiRadioListModule,
         TuiButtonModule,
         TuiTooltipModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiCheckboxBlockComponent)),
+        TuiInitialsModule,
     ],
     declarations: [
         TuiCheckboxBlockExample1,
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/3/index.html b/projects/demo/src/modules/components/checkbox-block/examples/3/index.html
index 8224749701753..72d0ce7f34344 100644
--- a/projects/demo/src/modules/components/checkbox-block/examples/3/index.html
+++ b/projects/demo/src/modules/components/checkbox-block/examples/3/index.html
@@ -10,10 +10,11 @@
             <div class="content">
                 <tui-avatar
                     size="s"
-                    text="Heading"
                     class="tui-space_right-3"
-                    [rounded]="true"
-                ></tui-avatar>
+                    [round]="true"
+                >
+                    {{ 'Heading' | tuiInitials }}
+                </tui-avatar>
                 Heading
             </div>
         </tui-checkbox-block>
@@ -26,10 +27,11 @@
             <div class="content">
                 <tui-avatar
                     size="s"
-                    text="placeholder"
                     class="tui-space_right-3"
-                    [rounded]="true"
-                ></tui-avatar>
+                    [round]="true"
+                >
+                    {{ 'Placeholder' | tuiInitials }}
+                </tui-avatar>
                 <div>
                     <div class="label">Label</div>
                     Placeholder
diff --git a/projects/demo/src/modules/components/combo-box/combo-box.module.ts b/projects/demo/src/modules/components/combo-box/combo-box.module.ts
index 1b2aeee3051ee..83f1e413898b5 100644
--- a/projects/demo/src/modules/components/combo-box/combo-box.module.ts
+++ b/projects/demo/src/modules/components/combo-box/combo-box.module.ts
@@ -21,8 +21,9 @@ import {
     TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
 import {
-    TuiAvatarModule,
+    TuiAvatarComponent,
     TuiComboBoxModule,
     TuiDataListWrapperModule,
     TuiFilterByInputPipeModule,
@@ -52,7 +53,7 @@ import {TuiComboBoxExample8} from './examples/8';
         TuiComboBoxModule,
         TuiButtonModule,
         TuiLinkModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiSvgModule,
         TuiDataListModule,
         TuiLoaderModule,
@@ -69,6 +70,7 @@ import {TuiComboBoxExample8} from './examples/8';
         InheritedDocumentationModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiComboBoxComponent)),
         TuiTextCodeModule,
+        TuiInitialsModule,
     ],
     declarations: [
         ExampleTuiComboBoxComponent,
diff --git a/projects/demo/src/modules/components/combo-box/examples/1/index.html b/projects/demo/src/modules/components/combo-box/examples/1/index.html
index 7cd996495fa3c..4fc75fc881dad 100644
--- a/projects/demo/src/modules/components/combo-box/examples/1/index.html
+++ b/projects/demo/src/modules/components/combo-box/examples/1/index.html
@@ -63,11 +63,12 @@
 >
     <div class="template">
         <tui-avatar
-            size="xs"
+            size="xxs"
             class="avatar"
-            [avatarUrl]="data.avatarUrl || null"
-            [text]="data.toString()"
-        ></tui-avatar>
+            [src]="data.avatarUrl"
+        >
+            {{ data.toString() | tuiInitials }}
+        </tui-avatar>
         <div class="name">{{ data }}</div>
     </div>
 </ng-template>
diff --git a/projects/demo/src/modules/components/combo-box/examples/2/index.html b/projects/demo/src/modules/components/combo-box/examples/2/index.html
index 28abfca7c87e6..6c2d4382f12e2 100644
--- a/projects/demo/src/modules/components/combo-box/examples/2/index.html
+++ b/projects/demo/src/modules/components/combo-box/examples/2/index.html
@@ -21,9 +21,10 @@
             <tui-avatar
                 size="xs"
                 class="avatar"
-                [avatarUrl]="item.avatarUrl || null"
-                [text]="item.toString()"
-            ></tui-avatar>
+                [src]="item.avatarUrl"
+            >
+                {{ item.toString() | tuiInitials }}
+            </tui-avatar>
             <span class="name">{{ item }}</span>
         </ng-template>
         <ng-template tuiDataList>
@@ -37,9 +38,10 @@
                     <tui-avatar
                         size="xs"
                         class="avatar"
-                        [avatarUrl]="item.avatarUrl || null"
-                        [text]="item.toString()"
-                    ></tui-avatar>
+                        [src]="item.avatarUrl"
+                    >
+                        {{ item.toString() | tuiInitials }}
+                    </tui-avatar>
                     <span class="name">{{ item }}</span>
                 </button>
             </tui-data-list>
diff --git a/projects/demo/src/modules/components/input-phone/examples/3/index.html b/projects/demo/src/modules/components/input-phone/examples/3/index.html
index 00ce62f5b54d2..0b48e9312dab8 100644
--- a/projects/demo/src/modules/components/input-phone/examples/3/index.html
+++ b/projects/demo/src/modules/components/input-phone/examples/3/index.html
@@ -19,9 +19,10 @@
                 <tui-avatar
                     size="s"
                     class="tui-space_right-3"
-                    [avatarUrl]="item.avatarUrl || null"
-                    [text]="item.firstName"
-                ></tui-avatar>
+                    [src]="item.avatarUrl"
+                >
+                    {{ item.firstName | tuiInitials }}
+                </tui-avatar>
                 <span class="user">
                     <span>{{ item.firstName }} {{ item.lastName }}</span>
                     <span class="phone">{{ item.phone }}</span>
@@ -34,9 +35,10 @@
     <tui-avatar
         *ngIf="user$ | async as user"
         size="s"
-        [avatarUrl]="user.avatarUrl || null"
-        [rounded]="true"
-        [text]="user.firstName"
-    ></tui-avatar>
+        [round]="true"
+        [src]="user.avatarUrl"
+    >
+        {{ user.firstName | tuiInitials }}
+    </tui-avatar>
 </ng-template>
 <p>Value: {{ value }}</p>
diff --git a/projects/demo/src/modules/components/input-phone/input-phone.module.ts b/projects/demo/src/modules/components/input-phone/input-phone.module.ts
index b07e16b169a04..c816810f37016 100644
--- a/projects/demo/src/modules/components/input-phone/input-phone.module.ts
+++ b/projects/demo/src/modules/components/input-phone/input-phone.module.ts
@@ -14,7 +14,8 @@ import {
     TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiAvatarModule, TuiInputPhoneModule} from '@taiga-ui/kit';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiInputPhoneModule} from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
@@ -33,7 +34,7 @@ import {ExampleTuiInputPhoneComponent} from './input-phone.component';
         TuiDataListModule,
         TuiButtonModule,
         TuiSvgModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiDropdownModule,
         TuiTextfieldControllerModule,
         TuiHintModule,
@@ -43,6 +44,7 @@ import {ExampleTuiInputPhoneComponent} from './input-phone.component';
         InheritedDocumentationModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputPhoneComponent)),
+        TuiInitialsModule,
     ],
     declarations: [
         ExampleTuiInputPhoneComponent,
diff --git a/projects/demo/src/modules/components/input/examples/4/index.html b/projects/demo/src/modules/components/input/examples/4/index.html
index aec4c4cc69bd2..fd22cc4cf3e21 100644
--- a/projects/demo/src/modules/components/input/examples/4/index.html
+++ b/projects/demo/src/modules/components/input/examples/4/index.html
@@ -23,9 +23,10 @@
                     {{ user }}
                     <tui-avatar
                         size="xs"
-                        [avatarUrl]="user.avatarUrl || null"
-                        [text]="user.toString()"
-                    ></tui-avatar>
+                        [src]="user.avatarUrl"
+                    >
+                        {{ user.toString() | tuiInitials }}
+                    </tui-avatar>
                 </button>
             </tui-data-list>
         </ng-container>
@@ -34,10 +35,11 @@
         <tui-avatar
             *ngIf="lastUser"
             size="s"
-            [avatarUrl]="lastUser.avatarUrl || null"
-            [rounded]="true"
-            [text]="lastUser.toString()"
-        ></tui-avatar>
+            [round]="true"
+            [src]="lastUser.avatarUrl"
+        >
+            {{ lastUser.toString() | tuiInitials }}
+        </tui-avatar>
     </ng-template>
     <tui-input
         formControlName="account"
diff --git a/projects/demo/src/modules/components/input/examples/8/index.html b/projects/demo/src/modules/components/input/examples/8/index.html
index 03733f0d965cc..857cf8a789e9f 100644
--- a/projects/demo/src/modules/components/input/examples/8/index.html
+++ b/projects/demo/src/modules/components/input/examples/8/index.html
@@ -16,9 +16,10 @@
                 <tui-avatar
                     size="xs"
                     class="avatar"
-                    [avatarUrl]="item.avatarUrl || null"
-                    [text]="item.toString()"
-                ></tui-avatar>
+                    [src]="item.avatarUrl"
+                >
+                    {{ item.toString() | tuiInitials }}
+                </tui-avatar>
                 <span class="name">{{ item }}</span>
             </button>
         </tui-data-list>
diff --git a/projects/demo/src/modules/components/input/input.module.ts b/projects/demo/src/modules/components/input/input.module.ts
index 3109565172755..9cc15c37a5b8d 100644
--- a/projects/demo/src/modules/components/input/input.module.ts
+++ b/projects/demo/src/modules/components/input/input.module.ts
@@ -24,8 +24,9 @@ import {
     TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
 import {
-    TuiAvatarModule,
+    TuiAvatarComponent,
     TuiDataListWrapperModule,
     TuiInputDateModule,
     TuiInputModule,
@@ -72,7 +73,7 @@ import {ExampleTuiInputComponent} from './input.component';
         TuiRadioListModule,
         TuiButtonModule,
         TuiInputCardModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiPrimitiveTextfieldModule,
         TuiTextfieldControllerModule,
         TuiHintModule,
@@ -86,6 +87,7 @@ import {ExampleTuiInputComponent} from './input.component';
         TuiTextCodeModule,
         MaskitoModule,
         TuiUnmaskHandlerModule,
+        TuiInitialsModule,
     ],
     declarations: [
         ExampleTuiInputComponent,
diff --git a/projects/demo/src/modules/components/multi-select/examples/2/index.html b/projects/demo/src/modules/components/multi-select/examples/2/index.html
index 32d0e2a4ab738..a68e76d63656c 100644
--- a/projects/demo/src/modules/components/multi-select/examples/2/index.html
+++ b/projects/demo/src/modules/components/multi-select/examples/2/index.html
@@ -26,9 +26,10 @@
         <tui-avatar
             size="xs"
             class="avatar"
-            [avatarUrl]="data.avatarUrl"
-            [text]="data.toString()"
-        ></tui-avatar>
+            [src]="data.avatarUrl"
+        >
+            {{ data.toString() | tuiInitials }}
+        </tui-avatar>
         {{ data }}
     </div>
 </ng-template>
diff --git a/projects/demo/src/modules/components/multi-select/multi-select.module.ts b/projects/demo/src/modules/components/multi-select/multi-select.module.ts
index 3a0650c65991f..e8af2fd5a4e9f 100644
--- a/projects/demo/src/modules/components/multi-select/multi-select.module.ts
+++ b/projects/demo/src/modules/components/multi-select/multi-select.module.ts
@@ -15,8 +15,9 @@ import {
     TuiScrollbarModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
 import {
-    TuiAvatarModule,
+    TuiAvatarComponent,
     TuiDataListWrapperModule,
     TuiMultiSelectModule,
     TuiRadioListModule,
@@ -49,7 +50,7 @@ import {ExampleTuiMultiSelectComponent} from './multi-select.component';
         TuiRadioListModule,
         TuiButtonModule,
         TuiLinkModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiDataListModule,
         TuiDataListWrapperModule,
         TuiLetModule,
@@ -62,6 +63,7 @@ import {ExampleTuiMultiSelectComponent} from './multi-select.component';
         TuiLabelModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiMultiSelectComponent)),
         PolymorpheusModule,
+        TuiInitialsModule,
     ],
     declarations: [
         ExampleTuiMultiSelectComponent,
diff --git a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.module.ts b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.module.ts
index 958b2d42b1e67..153714f848f63 100644
--- a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.module.ts
+++ b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.module.ts
@@ -14,7 +14,8 @@ import {
     TuiTextfieldControllerModule,
     TuiWrapperModule,
 } from '@taiga-ui/core';
-import {TuiAvatarModule, TuiRadioListModule} from '@taiga-ui/kit';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiRadioListModule} from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiCustomizationModule} from '../../app/customization/customization.module';
@@ -37,7 +38,7 @@ import {ExampleTuiPrimitiveTextfieldComponent} from './primitive-textfield.compo
         TuiPrimitiveTextfieldModule,
         TuiTextfieldControllerModule,
         TuiNotificationModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiLinkModule,
         TuiSvgModule,
         TuiButtonModule,
@@ -50,6 +51,7 @@ import {ExampleTuiPrimitiveTextfieldComponent} from './primitive-textfield.compo
         ThemesModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiPrimitiveTextfieldComponent)),
+        TuiInitialsModule,
     ],
     declarations: [
         ExampleTuiPrimitiveTextfieldComponent,
diff --git a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
index 85060cae8d7d9..b18c8a6b25ef6 100644
--- a/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
+++ b/projects/demo/src/modules/components/primitive-textfield/primitive-textfield.template.html
@@ -86,8 +86,9 @@
             <tui-avatar
                 size="xs"
                 class="avatar"
-                [text]="item"
-            ></tui-avatar>
+            >
+                {{ item | tuiInitials }}
+            </tui-avatar>
             {{ item }}
         </ng-template>
         <ng-template #interactiveContent>
diff --git a/projects/demo/src/modules/components/radio-block/examples/3/index.html b/projects/demo/src/modules/components/radio-block/examples/3/index.html
index d79793e88005a..fc4dec2c2e564 100644
--- a/projects/demo/src/modules/components/radio-block/examples/3/index.html
+++ b/projects/demo/src/modules/components/radio-block/examples/3/index.html
@@ -11,10 +11,11 @@
             <div class="content">
                 <tui-avatar
                     size="s"
-                    text="Heading"
                     class="tui-space_right-3"
-                    [rounded]="true"
-                ></tui-avatar>
+                    [round]="true"
+                >
+                    {{ 'Heading' | tuiInitials }}
+                </tui-avatar>
                 Heading
             </div>
         </tui-radio-block>
@@ -28,10 +29,11 @@
             <div class="content">
                 <tui-avatar
                     size="s"
-                    text="Heading"
                     class="tui-space_right-3"
-                    [rounded]="true"
-                ></tui-avatar>
+                    [round]="true"
+                >
+                    {{ 'Heading' | tuiInitials }}
+                </tui-avatar>
                 <div>
                     <div class="label">Label</div>
                     Placeholder
diff --git a/projects/demo/src/modules/components/radio-block/radio-block.module.ts b/projects/demo/src/modules/components/radio-block/radio-block.module.ts
index b910fd5a5bd20..552adec8e0239 100644
--- a/projects/demo/src/modules/components/radio-block/radio-block.module.ts
+++ b/projects/demo/src/modules/components/radio-block/radio-block.module.ts
@@ -4,7 +4,8 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiButtonModule, TuiGroupModule, TuiTooltipModule} from '@taiga-ui/core';
-import {TuiAvatarModule, TuiRadioBlockModule, TuiRadioListModule} from '@taiga-ui/kit';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiRadioBlockModule, TuiRadioListModule} from '@taiga-ui/kit';
 
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {TuiRadioBlockExample1} from './examples/1';
@@ -19,7 +20,7 @@ import {ExampleTuiRadioBlockComponent} from './radio-block.component';
         FormsModule,
         TuiRadioBlockModule,
         ReactiveFormsModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiRadioListModule,
         TuiButtonModule,
         TuiGroupModule,
@@ -27,6 +28,7 @@ import {ExampleTuiRadioBlockComponent} from './radio-block.component';
         InheritedDocumentationModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiRadioBlockComponent)),
+        TuiInitialsModule,
     ],
     declarations: [
         TuiRadioBlockExample1,
diff --git a/projects/demo/src/modules/components/select/examples/6/index.html b/projects/demo/src/modules/components/select/examples/6/index.html
index e96b7daa1bf16..b207891869f3e 100644
--- a/projects/demo/src/modules/components/select/examples/6/index.html
+++ b/projects/demo/src/modules/components/select/examples/6/index.html
@@ -21,9 +21,10 @@
         <tui-avatar
             size="xs"
             class="avatar"
-            [avatarUrl]="data.avatarUrl || null"
-            [text]="data.toString()"
-        ></tui-avatar>
+            [src]="data.avatarUrl"
+        >
+            {{ data.toString() | tuiInitials }}
+        </tui-avatar>
         <div class="name">{{ data }}</div>
     </div>
 </ng-template>
diff --git a/projects/demo/src/modules/components/select/select.module.ts b/projects/demo/src/modules/components/select/select.module.ts
index a95330b0145b6..a18e06615d4de 100644
--- a/projects/demo/src/modules/components/select/select.module.ts
+++ b/projects/demo/src/modules/components/select/select.module.ts
@@ -19,8 +19,9 @@ import {
     TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
 import {
-    TuiAvatarModule,
+    TuiAvatarComponent,
     TuiDataListWrapperModule,
     TuiMarkerIconModule,
     TuiMultiSelectModule,
@@ -61,7 +62,7 @@ import {ExampleTuiSelectComponent} from './select.component';
         TuiButtonModule,
         TuiLinkModule,
         TuiMoneyModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiSvgModule,
         TuiDropdownModule,
         TuiTextfieldControllerModule,
@@ -78,6 +79,7 @@ import {ExampleTuiSelectComponent} from './select.component';
         TuiMarkerIconModule,
         TuiMapperPipeModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSelectComponent)),
+        TuiInitialsModule,
     ],
     declarations: [
         ExampleTuiSelectComponent,
diff --git a/projects/demo/src/modules/components/sheet-dialog/examples/4/index.html b/projects/demo/src/modules/components/sheet-dialog/examples/4/index.html
index 5f38b49d4c711..93d360cd21b08 100644
--- a/projects/demo/src/modules/components/sheet-dialog/examples/4/index.html
+++ b/projects/demo/src/modules/components/sheet-dialog/examples/4/index.html
@@ -30,11 +30,7 @@
             class="item"
             (click)="toggle(false)"
         >
-            <tui-avatar
-                size="s"
-                [autoColor]="true"
-                [text]="user"
-            ></tui-avatar>
+            <tui-avatar size="s">{{ user | tuiInitials }}</tui-avatar>
             {{ user }}
         </button>
     </div>
diff --git a/projects/demo/src/modules/components/sheet-dialog/sheet-dialog.module.ts b/projects/demo/src/modules/components/sheet-dialog/sheet-dialog.module.ts
index 99bba319c781f..6c2102be73002 100644
--- a/projects/demo/src/modules/components/sheet-dialog/sheet-dialog.module.ts
+++ b/projects/demo/src/modules/components/sheet-dialog/sheet-dialog.module.ts
@@ -12,7 +12,8 @@ import {
     TuiNotificationModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiAvatarModule, TuiInputModule} from '@taiga-ui/kit';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiInputModule} from '@taiga-ui/kit';
 
 import {TuiSheetDialogExample1} from './examples/1';
 import {TuiSheetDialogExample2} from './examples/2';
@@ -29,12 +30,13 @@ import {ExampleTuiSheetDialogComponent} from './sheet-dialog.component';
         TuiButtonModule,
         TuiLabelModule,
         TuiMoneyModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiNotificationModule,
         TuiSheetDialogModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSheetDialogComponent)),
         TuiSwipeModule,
+        TuiInitialsModule,
     ],
     declarations: [
         ExampleTuiSheetDialogComponent,
diff --git a/projects/demo/src/modules/components/sheet-dialog/sheet-dialog.template.html b/projects/demo/src/modules/components/sheet-dialog/sheet-dialog.template.html
index ed675a66b5208..28480b42d3e1e 100644
--- a/projects/demo/src/modules/components/sheet-dialog/sheet-dialog.template.html
+++ b/projects/demo/src/modules/components/sheet-dialog/sheet-dialog.template.html
@@ -59,9 +59,10 @@
                 <div class="label">
                     <tui-avatar
                         size="m"
-                        text="Karl Gambolputty"
-                        [rounded]="true"
-                    ></tui-avatar>
+                        [round]="true"
+                    >
+                        {{ 'Karl Gambolputty' | tuiInitials }}
+                    </tui-avatar>
                     <label tuiLabel="Terry Jones">Karl Gambolputty</label>
                 </div>
             </ng-template>
diff --git a/projects/demo/src/modules/components/sheet/sheet.module.ts b/projects/demo/src/modules/components/sheet/sheet.module.ts
index 275b77e6efa75..09d9457eb5e61 100644
--- a/projects/demo/src/modules/components/sheet/sheet.module.ts
+++ b/projects/demo/src/modules/components/sheet/sheet.module.ts
@@ -11,7 +11,8 @@ import {
     TuiLinkModule,
     TuiNotificationModule,
 } from '@taiga-ui/core';
-import {TuiAvatarModule} from '@taiga-ui/kit';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 import {TuiSheetExample1} from './examples/1';
 import {TuiSheetExample2} from './examples/2';
@@ -27,7 +28,7 @@ import {ExampleTuiSheetComponent} from './sheet.component';
         TuiButtonModule,
         TuiLabelModule,
         TuiMoneyModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiNotificationModule,
         TuiLinkModule,
         TuiElasticStickyModule,
@@ -35,6 +36,7 @@ import {ExampleTuiSheetComponent} from './sheet.component';
         IntersectionObserverModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSheetComponent)),
+        TuiInitialsModule,
     ],
     declarations: [
         ExampleTuiSheetComponent,
diff --git a/projects/demo/src/modules/components/sheet/sheet.template.html b/projects/demo/src/modules/components/sheet/sheet.template.html
index 8b88ab2eecf12..7e0cd5d1a5e3e 100644
--- a/projects/demo/src/modules/components/sheet/sheet.template.html
+++ b/projects/demo/src/modules/components/sheet/sheet.template.html
@@ -104,9 +104,10 @@
                 <div class="top">
                     <tui-avatar
                         size="l"
-                        text="Karl Gambolputty"
-                        [rounded]="true"
-                    ></tui-avatar>
+                        [round]="true"
+                    >
+                        {{ 'Karl Gambolputty' | tuiInitials }}
+                    </tui-avatar>
                     <h2>Karl Gambolputty</h2>
                 </div>
             </ng-template>
diff --git a/projects/demo/src/modules/components/tooltip/examples/2/index.html b/projects/demo/src/modules/components/tooltip/examples/2/index.html
index 833ddb7f90b6f..2919c2a1776e6 100644
--- a/projects/demo/src/modules/components/tooltip/examples/2/index.html
+++ b/projects/demo/src/modules/components/tooltip/examples/2/index.html
@@ -12,13 +12,14 @@
 <tui-avatar
     size="l"
     tabindex="0"
-    text="❤"
     tuiHintAppearance="onDark"
     tuiHintDirection="right"
-    [autoColor]="true"
-    [rounded]="true"
+    [round]="true"
+    [style.background]="'❤' | tuiAutoColor"
     [tuiHint]="tooltip"
-></tui-avatar>
+>
+    ❤
+</tui-avatar>
 <ng-template #tooltip>
     <div>
         What is
diff --git a/projects/demo/src/modules/components/tooltip/tooltip.module.ts b/projects/demo/src/modules/components/tooltip/tooltip.module.ts
index 53e06c0f851fb..4a65df9c43c9b 100644
--- a/projects/demo/src/modules/components/tooltip/tooltip.module.ts
+++ b/projects/demo/src/modules/components/tooltip/tooltip.module.ts
@@ -11,7 +11,8 @@ import {
     TuiTextfieldControllerModule,
     TuiTooltipModule,
 } from '@taiga-ui/core';
-import {TuiAvatarModule, TuiInputModule} from '@taiga-ui/kit';
+import {TuiAutoColorModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiInputModule} from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiTooltipExample1} from './examples/1';
@@ -25,7 +26,7 @@ import {ExampleTuiTooltipComponent} from './tooltip.component';
         TuiTooltipModule,
         TuiHintModule,
         TuiLinkModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiLoaderModule,
         TuiInputModule,
         PolymorpheusModule,
@@ -35,6 +36,7 @@ import {ExampleTuiTooltipComponent} from './tooltip.component';
         FormsModule,
         TuiTextfieldControllerModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiTooltipComponent)),
+        TuiAutoColorModule,
     ],
     declarations: [
         ExampleTuiTooltipComponent,
diff --git a/projects/demo/src/modules/customization/dialogs/dialogs.module.ts b/projects/demo/src/modules/customization/dialogs/dialogs.module.ts
index 01324546dd144..bad9238e703d2 100644
--- a/projects/demo/src/modules/customization/dialogs/dialogs.module.ts
+++ b/projects/demo/src/modules/customization/dialogs/dialogs.module.ts
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiButtonModule} from '@taiga-ui/core';
-import {TuiAvatarModule} from '@taiga-ui/kit';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 import {DialogsComponent} from './dialogs.component';
 import {TuiDialogsExample1} from './examples/1';
@@ -14,7 +14,7 @@ import {PromptModule} from './examples/1/prompt/prompt.module';
         CommonModule,
         PromptModule,
         TuiButtonModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(DialogsComponent)),
     ],
diff --git a/projects/demo/src/modules/customization/dialogs/examples/1/index.html b/projects/demo/src/modules/customization/dialogs/examples/1/index.html
index c4bb5ea5fc40a..ffc7b7025c867 100644
--- a/projects/demo/src/modules/customization/dialogs/examples/1/index.html
+++ b/projects/demo/src/modules/customization/dialogs/examples/1/index.html
@@ -8,10 +8,10 @@
 <ng-template #choose>
     <div class="wrapper">
         <tui-avatar
-            avatarUrl="assets/images/choose.png"
             size="l"
+            src="assets/images/choose.png"
             class="tui-space_right-2"
-            [rounded]="true"
+            [round]="true"
         ></tui-avatar>
         «Choose wisely»
     </div>
@@ -19,9 +19,9 @@
 <ng-template #poorly>
     <div class="wrapper">
         <tui-avatar
-            avatarUrl="assets/images/poorly.png"
+            src="assets/images/poorly.png"
             class="tui-space_right-2"
-            [rounded]="true"
+            [round]="true"
         ></tui-avatar>
         «You chose poorly»
     </div>
@@ -30,9 +30,9 @@
     <div class="wrapper">
         «You have chosen wisely»
         <tui-avatar
-            avatarUrl="assets/images/wisely.png"
+            src="assets/images/wisely.png"
             class="tui-space_left-1"
-            [rounded]="true"
+            [round]="true"
         ></tui-avatar>
     </div>
 </ng-template>
diff --git a/projects/demo/src/modules/customization/portals/portals.module.ts b/projects/demo/src/modules/customization/portals/portals.module.ts
index 716787e66671c..efa0107942a90 100644
--- a/projects/demo/src/modules/customization/portals/portals.module.ts
+++ b/projects/demo/src/modules/customization/portals/portals.module.ts
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiButtonModule, TuiSvgModule} from '@taiga-ui/core';
-import {TuiAvatarModule} from '@taiga-ui/kit';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 import {TuiPortalsExample1} from './examples/1';
 import {CustomHostModule} from './examples/1/portal/custom-host.module';
@@ -14,7 +14,7 @@ import {PortalsComponent} from './portals.component';
         CommonModule,
         CustomHostModule,
         TuiButtonModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiAddonDocModule,
         TuiSvgModule,
         RouterModule.forChild(tuiGenerateRoutes(PortalsComponent)),
diff --git a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.module.ts b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.module.ts
index c17db17fb0a19..fce97c3f46339 100644
--- a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.module.ts
+++ b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.module.ts
@@ -4,7 +4,8 @@ import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiButtonModule, TuiDataListModule, TuiDropdownModule} from '@taiga-ui/core';
-import {TuiAvatarModule, TuiTextareaModule} from '@taiga-ui/kit';
+import {TuiInitialsModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiTextareaModule} from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {DropdownDocumentationModule} from '../../components/abstract/dropdown-documentation/dropdown-documentation.module';
@@ -20,11 +21,12 @@ import {TuiDropdownSelectionExample2} from './examples/2';
         TuiDropdownModule,
         TuiButtonModule,
         TuiTextareaModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiDataListModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiDropdownSelectionComponent)),
         DropdownDocumentationModule,
+        TuiInitialsModule,
     ],
     declarations: [
         ExampleTuiDropdownSelectionComponent,
diff --git a/projects/demo/src/modules/directives/dropdown-selection/examples/2/index.html b/projects/demo/src/modules/directives/dropdown-selection/examples/2/index.html
index 7329bdfbcc38e..160ac20eeb3a3 100644
--- a/projects/demo/src/modules/directives/dropdown-selection/examples/2/index.html
+++ b/projects/demo/src/modules/directives/dropdown-selection/examples/2/index.html
@@ -24,10 +24,11 @@
             {{ item.name }}
             <tui-avatar
                 size="s"
-                [avatarUrl]="item.avatar"
-                [rounded]="true"
-                [text]="item.name"
-            ></tui-avatar>
+                [round]="true"
+                [src]="item.avatar"
+            >
+                {{ item.name | tuiInitials }}
+            </tui-avatar>
         </button>
     </tui-data-list>
 </ng-template>
diff --git a/projects/demo/src/modules/directives/dropdown/dropdown.module.ts b/projects/demo/src/modules/directives/dropdown/dropdown.module.ts
index 6e4fc34f0e0a7..48f2e67af1f51 100644
--- a/projects/demo/src/modules/directives/dropdown/dropdown.module.ts
+++ b/projects/demo/src/modules/directives/dropdown/dropdown.module.ts
@@ -11,7 +11,7 @@ import {
     TuiNotificationModule,
 } from '@taiga-ui/core';
 import {
-    TuiAvatarModule,
+    TuiAvatarComponent,
     TuiInputModule,
     TuiSelectModule,
     TuiToggleModule,
@@ -31,7 +31,7 @@ import {TuiDropdownExample4} from './examples/4';
         FormsModule,
         PolymorpheusModule,
         TuiLinkModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiButtonModule,
         TuiDropdownModule,
         TuiSelectModule,
diff --git a/projects/demo/src/modules/directives/dropdown/examples/2/index.html b/projects/demo/src/modules/directives/dropdown/examples/2/index.html
index 28e4fea8508e2..cce1a6a67126a 100644
--- a/projects/demo/src/modules/directives/dropdown/examples/2/index.html
+++ b/projects/demo/src/modules/directives/dropdown/examples/2/index.html
@@ -30,8 +30,8 @@
     <div class="dropdown">
         <tui-avatar
             size="l"
-            [avatarUrl]="avatarUrl"
-            [rounded]="true"
+            [round]="true"
+            [src]="avatarUrl"
         ></tui-avatar>
         <div class="text">
             <div class="label">Taiga UI developer</div>
diff --git a/projects/demo/src/modules/directives/hint/examples/1/index.html b/projects/demo/src/modules/directives/hint/examples/1/index.html
index 11dcacc3798ae..0f15553897e5c 100644
--- a/projects/demo/src/modules/directives/hint/examples/1/index.html
+++ b/projects/demo/src/modules/directives/hint/examples/1/index.html
@@ -1,12 +1,13 @@
 <tui-avatar
     size="l"
-    text="❤"
     tuiHintAppearance="onDark"
     tuiHintDirection="right"
-    [autoColor]="true"
-    [rounded]="true"
+    [round]="true"
+    [style.background]="'❤' | tuiAutoColor"
     [tuiHint]="tooltip"
-></tui-avatar>
+>
+    ❤
+</tui-avatar>
 <ng-template #tooltip>
     <div>
         What is
diff --git a/projects/demo/src/modules/directives/hint/examples/2/index.html b/projects/demo/src/modules/directives/hint/examples/2/index.html
index c4ec32e940f43..7029216458bbd 100644
--- a/projects/demo/src/modules/directives/hint/examples/2/index.html
+++ b/projects/demo/src/modules/directives/hint/examples/2/index.html
@@ -1,10 +1,10 @@
 <tui-avatar
     size="l"
-    text="❤"
     tuiHint
-    [autoColor]="true"
-    [rounded]="true"
+    [round]="true"
+    [style.background]="'❤' | tuiAutoColor"
 >
+    ❤
     <tui-hint
         *tuiHint
         class="hint"
diff --git a/projects/demo/src/modules/directives/hint/hint.module.ts b/projects/demo/src/modules/directives/hint/hint.module.ts
index 410ebb18f95a2..954cec9f5588c 100644
--- a/projects/demo/src/modules/directives/hint/hint.module.ts
+++ b/projects/demo/src/modules/directives/hint/hint.module.ts
@@ -3,7 +3,8 @@ import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiHintModule, TuiNotificationModule} from '@taiga-ui/core';
-import {TuiAvatarModule} from '@taiga-ui/kit';
+import {TuiAutoColorModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 import {InheritedDocumentationModule} from '../../components/abstract/inherited-documentation/inherited-documentation.module';
 import {TuiHintExample1} from './examples/1';
@@ -13,12 +14,13 @@ import {ExampleTuiHintComponent} from './hint.component';
 @NgModule({
     imports: [
         TuiHintModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         CommonModule,
         InheritedDocumentationModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiHintComponent)),
         TuiNotificationModule,
+        TuiAutoColorModule,
     ],
     declarations: [ExampleTuiHintComponent, TuiHintExample1, TuiHintExample2],
     exports: [ExampleTuiHintComponent],
diff --git a/projects/demo/src/modules/experimental/avatar/avatar.component.ts b/projects/demo/src/modules/experimental/avatar/avatar.component.ts
deleted file mode 100644
index 8ba22342dda6c..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/avatar.component.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import {Component, Inject} from '@angular/core';
-import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
-import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
-
-@Component({
-    selector: 'example-avatar',
-    templateUrl: './avatar.template.html',
-    changeDetection,
-})
-export class ExampleTuiAvatarComponent {
-    readonly exampleModule: TuiRawLoaderContent = import(
-        './examples/import/import-module.md?raw'
-    );
-
-    readonly exampleHtml: TuiRawLoaderContent = import(
-        './examples/import/insert-template.md?raw'
-    );
-
-    readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
-        HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
-    };
-
-    readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
-        HTML: import('./examples/3/index.html?raw'),
-    };
-
-    readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
-        HTML: import('./examples/4/index.html?raw'),
-    };
-
-    readonly example5: TuiDocExample = {
-        TypeScript: import('./examples/5/index.ts?raw'),
-        HTML: import('./examples/5/index.html?raw'),
-    };
-
-    readonly example6: TuiDocExample = {
-        TypeScript: import('./examples/6/index.ts?raw'),
-        HTML: import('./examples/6/index.html?raw'),
-        LESS: import('./examples/6/index.less?raw'),
-    };
-
-    readonly sizes: ReadonlyArray<TuiSizeXXL | TuiSizeXXS> = [
-        'xxs',
-        'xs',
-        's',
-        'm',
-        'l',
-        'xl',
-        'xxl',
-    ];
-
-    size = this.sizes[3];
-
-    readonly srcVariants: ReadonlyArray<SafeResourceUrl | string> = [
-        'MW',
-        'https://avatars.githubusercontent.com/u/11832552',
-        'https://taiga-ui.dev/assets/images/test-not-found.png',
-        'tuiIconUserLarge',
-        this.sanitizer.bypassSecurityTrustResourceUrl(
-            'https://avatars.githubusercontent.com/u/10106368',
-        ),
-    ];
-
-    src = this.srcVariants[0];
-
-    round = true;
-
-    constructor(@Inject(DomSanitizer) private readonly sanitizer: DomSanitizer) {}
-}
diff --git a/projects/demo/src/modules/experimental/avatar/avatar.module.ts b/projects/demo/src/modules/experimental/avatar/avatar.module.ts
deleted file mode 100644
index c611215885c3a..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/avatar.module.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {TuiNotificationModule} from '@taiga-ui/core';
-import {
-    TuiAutoColorModule,
-    TuiAvatarLabeledComponent,
-    TuiAvatarModule,
-    TuiAvatarStackModule,
-    TuiFadeModule,
-    TuiFallbackSrcModule,
-    TuiInitialsModule,
-} from '@taiga-ui/experimental';
-
-import {ExampleTuiAvatarComponent} from './avatar.component';
-import {TuiAvatarExample1} from './examples/1';
-import {TuiAvatarExample2} from './examples/2';
-import {TuiAvatarExample3} from './examples/3';
-import {TuiAvatarExample4} from './examples/4';
-import {TuiAvatarExample5} from './examples/5';
-import {TuiAvatarExample6} from './examples/6';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAvatarModule,
-        TuiAvatarStackModule,
-        TuiAvatarLabeledComponent,
-        TuiAutoColorModule,
-        TuiInitialsModule,
-        TuiNotificationModule,
-        TuiFallbackSrcModule,
-        TuiFadeModule,
-        tuiGetDocModules(ExampleTuiAvatarComponent),
-    ],
-    declarations: [
-        ExampleTuiAvatarComponent,
-        TuiAvatarExample1,
-        TuiAvatarExample2,
-        TuiAvatarExample3,
-        TuiAvatarExample4,
-        TuiAvatarExample5,
-        TuiAvatarExample6,
-    ],
-    exports: [ExampleTuiAvatarComponent],
-})
-export class ExampleTuiAvatarModule {}
diff --git a/projects/demo/src/modules/experimental/avatar/avatar.template.html b/projects/demo/src/modules/experimental/avatar/avatar.template.html
deleted file mode 100644
index 4e3de6c00bd4c..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/avatar.template.html
+++ /dev/null
@@ -1,137 +0,0 @@
-<tui-doc-page
-    header="Avatar"
-    package="EXPERIMENTAL"
-    type="components"
->
-    <ng-template pageTab>
-        <tui-notification status="warning">
-            This code is
-            <strong>experimental</strong>
-            and is a subject to change. Expect final solution to be shipped in the next major version
-        </tui-notification>
-
-        <p>New version for Avatar component following updated design specs for displaying text, pictures and icons.</p>
-
-        <tui-doc-example
-            id="content"
-            heading="Content types"
-            [content]="example1"
-        >
-            <tui-notification class="tui-space_bottom-4">
-                This example requires import of
-                <code>TuiFallbackSrcModule</code>
-            </tui-notification>
-            <tui-avatar-example-1></tui-avatar-example-1>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="color"
-            heading="Colors"
-            [content]="example2"
-        >
-            <tui-notification class="tui-space_bottom-4">
-                This example requires import of
-                <code>TuiFadeModule</code>
-            </tui-notification>
-            <tui-avatar-example-2></tui-avatar-example-2>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="size"
-            heading="Sizes"
-            [content]="example3"
-        >
-            <tui-avatar-example-3></tui-avatar-example-3>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="stacking"
-            heading="Stacking"
-            [content]="example4"
-        >
-            <tui-notification class="tui-space_bottom-4">
-                This example requires import of
-                <code>TuiAvatarStackModule</code>
-            </tui-notification>
-            <tui-avatar-example-4></tui-avatar-example-4>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="options"
-            heading="Options with DI"
-            [content]="example5"
-        >
-            <tui-avatar-example-5></tui-avatar-example-5>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="labeled"
-            heading="Labeled"
-            [content]="example6"
-        >
-            <tui-avatar-example-6></tui-avatar-example-6>
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab>
-        <tui-doc-demo>
-            <tui-avatar
-                [round]="round"
-                [size]="size"
-                [src]="src"
-            ></tui-avatar>
-        </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="round"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="round"
-            >
-                Use round shape
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="size"
-                documentationPropertyType="TuiSizeS | TuiSizeL"
-                [documentationPropertyValues]="sizes"
-                [(documentationPropertyValue)]="size"
-            >
-                Size
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="src"
-                documentationPropertyType="SafeResourceUrl | string | null"
-                [documentationPropertyValues]="srcVariants"
-                [(documentationPropertyValue)]="src"
-            >
-                Initials, image URL, or icon name. Alternatively you can pass text as
-                <code>ng-content</code>
-                which would be styled differently from initials and fade if overflown
-            </ng-template>
-        </tui-doc-documentation>
-    </ng-template>
-
-    <ng-template pageTab>
-        <ol class="b-demo-steps">
-            <li>
-                <p>Import module:</p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                ></tui-doc-code>
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                ></tui-doc-code>
-            </li>
-        </ol>
-    </ng-template>
-</tui-doc-page>
diff --git a/projects/demo/src/modules/experimental/avatar/examples/1/index.html b/projects/demo/src/modules/experimental/avatar/examples/1/index.html
deleted file mode 100644
index eaf75bc5fed59..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/1/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<tui-avatar src="tuiIconUserLarge"></tui-avatar>
-<tui-avatar
-    [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
-></tui-avatar>
-<tui-avatar src="AI"></tui-avatar>
-<tui-avatar>99+</tui-avatar>
-<tui-avatar>
-    <picture>
-        <source
-            media="(min-width: 600px)"
-            srcset="/assets/images/angular.svg"
-        />
-        <img
-            alt="Alex Inkin"
-            src="/assets/images/avatar.jpg"
-        />
-    </picture>
-</tui-avatar>
-<tui-avatar>
-    <video
-        autoplay
-        loop
-        playsinline
-        [muted]="true"
-    >
-        <source
-            src="/assets/media/bbb.mp4"
-            type="video/mp4"
-        />
-    </video>
-</tui-avatar>
diff --git a/projects/demo/src/modules/experimental/avatar/examples/1/index.ts b/projects/demo/src/modules/experimental/avatar/examples/1/index.ts
deleted file mode 100644
index 3c402abf8d9fc..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/1/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-avatar-example-1',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiAvatarExample1 {}
diff --git a/projects/demo/src/modules/experimental/avatar/examples/2/index.html b/projects/demo/src/modules/experimental/avatar/examples/2/index.html
deleted file mode 100644
index 3c93cc27b5562..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/2/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<tui-avatar
-    appearance="accent"
-    src="tuiIconUserLarge"
-></tui-avatar>
-<tui-avatar
-    src="AI"
-    class="text"
-    [style.background]="'AI' | tuiAutoColor"
-></tui-avatar>
-<tui-avatar class="text">
-    <div tuiFade>Fading</div>
-</tui-avatar>
diff --git a/projects/demo/src/modules/experimental/avatar/examples/2/index.less b/projects/demo/src/modules/experimental/avatar/examples/2/index.less
deleted file mode 100644
index 7c34c000eadfe..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/2/index.less
+++ /dev/null
@@ -1,9 +0,0 @@
-:host {
-    display: flex;
-    gap: 1rem;
-}
-
-.text {
-    background: var(--tui-base-05);
-    color: var(--tui-text-01-night);
-}
diff --git a/projects/demo/src/modules/experimental/avatar/examples/2/index.ts b/projects/demo/src/modules/experimental/avatar/examples/2/index.ts
deleted file mode 100644
index e75c6c3ef780d..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/2/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-avatar-example-2',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiAvatarExample2 {}
diff --git a/projects/demo/src/modules/experimental/avatar/examples/3/index.html b/projects/demo/src/modules/experimental/avatar/examples/3/index.html
deleted file mode 100644
index 58b3e218997aa..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/3/index.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<tui-avatar size="xxl">XXL</tui-avatar>
-<tui-avatar size="xl">XL</tui-avatar>
-<tui-avatar size="l">L</tui-avatar>
-<tui-avatar size="m">M</tui-avatar>
-<tui-avatar size="s">S</tui-avatar>
-<tui-avatar size="xs">XS</tui-avatar>
-<tui-avatar size="xxs">XXS</tui-avatar>
diff --git a/projects/demo/src/modules/experimental/avatar/examples/3/index.ts b/projects/demo/src/modules/experimental/avatar/examples/3/index.ts
deleted file mode 100644
index f5226c0d218d2..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/3/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-avatar-example-3',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiAvatarExample3 {
-    readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan'];
-}
diff --git a/projects/demo/src/modules/experimental/avatar/examples/4/index.html b/projects/demo/src/modules/experimental/avatar/examples/4/index.html
deleted file mode 100644
index c73e5d628a62a..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/4/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<tui-avatar-stack
-    *ngFor="let size of sizes; let odd = odd"
-    class="tui-space_vertical-4"
-    [direction]="odd ? 'left' : 'right'"
->
-    <tui-avatar
-        *ngFor="let name of names"
-        [round]="odd"
-        [size]="size"
-        [src]="name | tuiInitials"
-        [style.background]="name | tuiAutoColor"
-    ></tui-avatar>
-    <tui-avatar
-        size="l"
-        [round]="odd"
-        [size]="size"
-    >
-        99+
-    </tui-avatar>
-</tui-avatar-stack>
diff --git a/projects/demo/src/modules/experimental/avatar/examples/4/index.ts b/projects/demo/src/modules/experimental/avatar/examples/4/index.ts
deleted file mode 100644
index 8fdc73d4baedf..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/4/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
-
-@Component({
-    selector: 'tui-avatar-example-4',
-    templateUrl: './index.html',
-    encapsulation,
-    changeDetection,
-})
-export class TuiAvatarExample4 {
-    readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan'];
-    readonly sizes: ReadonlyArray<TuiSizeXXL | TuiSizeXXS> = [
-        'xxl',
-        'xl',
-        'l',
-        'm',
-        's',
-        'xs',
-        'xxs',
-    ];
-}
diff --git a/projects/demo/src/modules/experimental/avatar/examples/5/index.html b/projects/demo/src/modules/experimental/avatar/examples/5/index.html
deleted file mode 100644
index 2b74bf735f1a2..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/5/index.html
+++ /dev/null
@@ -1 +0,0 @@
-<tui-avatar src="DI"></tui-avatar>
diff --git a/projects/demo/src/modules/experimental/avatar/examples/5/index.ts b/projects/demo/src/modules/experimental/avatar/examples/5/index.ts
deleted file mode 100644
index c034bf7fe61b0..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/5/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-import {tuiAvatarOptionsProvider} from '@taiga-ui/experimental';
-
-@Component({
-    selector: 'tui-avatar-example-5',
-    templateUrl: './index.html',
-    encapsulation,
-    changeDetection,
-    providers: [tuiAvatarOptionsProvider({size: 'l'})],
-})
-export class TuiAvatarExample5 {}
diff --git a/projects/demo/src/modules/experimental/avatar/examples/6/index.html b/projects/demo/src/modules/experimental/avatar/examples/6/index.html
deleted file mode 100644
index 09cdaa5b4fa51..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/6/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<tui-avatar-labeled>
-    <tui-avatar
-        [src]="'https://avatars.githubusercontent.com/u/10106368' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
-    ></tui-avatar>
-
-    <div tuiFade>MarsiBarsi</div>
-</tui-avatar-labeled>
-
-<tui-avatar-labeled>
-    <tui-avatar
-        [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
-    ></tui-avatar>
-
-    <div tuiFade>Inkin</div>
-    <div tuiFade>Alexander</div>
-</tui-avatar-labeled>
-
-<tui-avatar-labeled>
-    <tui-avatar
-        [src]="'https://avatars.githubusercontent.com/u/46284632' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
-    ></tui-avatar>
-
-    <div tuiFade>Potekhin</div>
-    <div tuiFade>Vladimir</div>
-</tui-avatar-labeled>
-
-<tui-avatar-labeled>
-    <tui-avatar
-        [src]="'https://avatars.githubusercontent.com/u/35179038' | tuiFallbackSrc: 'tuiIconUserLarge' | async"
-    ></tui-avatar>
-
-    <div tuiFade>Barsukov</div>
-    <div tuiFade>Nikita</div>
-</tui-avatar-labeled>
diff --git a/projects/demo/src/modules/experimental/avatar/examples/6/index.less b/projects/demo/src/modules/experimental/avatar/examples/6/index.less
deleted file mode 100644
index d8787b7d1879d..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/6/index.less
+++ /dev/null
@@ -1,8 +0,0 @@
-:host {
-    display: flex;
-    gap: 1rem;
-}
-
-tui-avatar {
-    border: 1px solid var(--tui-base-04);
-}
diff --git a/projects/demo/src/modules/experimental/avatar/examples/6/index.ts b/projects/demo/src/modules/experimental/avatar/examples/6/index.ts
deleted file mode 100644
index 9d34e62df8e93..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/6/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-avatar-example-6',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiAvatarExample6 {}
diff --git a/projects/demo/src/modules/experimental/avatar/examples/import/import-module.md b/projects/demo/src/modules/experimental/avatar/examples/import/import-module.md
deleted file mode 100644
index a876a347a7676..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/import/import-module.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```ts
-import {NgModule} from '@angular/core';
-import {TuiAvatarModule} from '@taiga-ui/experimental';
-// ...
-
-@NgModule({
-  imports: [
-    // ...
-    TuiAvatarModule,
-  ],
-})
-export class MyModule {}
-```
diff --git a/projects/demo/src/modules/experimental/avatar/examples/import/insert-template.md b/projects/demo/src/modules/experimental/avatar/examples/import/insert-template.md
deleted file mode 100644
index 741200be77b21..0000000000000
--- a/projects/demo/src/modules/experimental/avatar/examples/import/insert-template.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<tui-avatar>"Batman"</tui-avatar>
-```
diff --git a/projects/demo/src/modules/experimental/button-vertical/button-vertical.module.ts b/projects/demo/src/modules/experimental/button-vertical/button-vertical.module.ts
index e52de204c0d28..7842555c72a7c 100644
--- a/projects/demo/src/modules/experimental/button-vertical/button-vertical.module.ts
+++ b/projects/demo/src/modules/experimental/button-vertical/button-vertical.module.ts
@@ -3,11 +3,11 @@ import {NgModule} from '@angular/core';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core';
 import {
-    TuiAvatarModule,
     TuiButtonModule,
     TuiButtonVerticalModule,
     TuiFadeModule,
 } from '@taiga-ui/experimental';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 import {ExampleTuiButtonVerticalComponent} from './button-vertical.component';
 import {TuiButtonVerticalExample1} from './examples/1';
@@ -19,7 +19,7 @@ import {TuiButtonVerticalExample2} from './examples/2';
         TuiButtonModule,
         TuiButtonVerticalModule,
         TuiFadeModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiNotificationModule,
         TuiSvgModule,
         tuiGetDocModules(ExampleTuiButtonVerticalComponent),
diff --git a/projects/demo/src/modules/experimental/button/button.module.ts b/projects/demo/src/modules/experimental/button/button.module.ts
index 54d12d1f7ffff..69431c4ee8f7b 100644
--- a/projects/demo/src/modules/experimental/button/button.module.ts
+++ b/projects/demo/src/modules/experimental/button/button.module.ts
@@ -2,7 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiNotificationModule} from '@taiga-ui/core';
-import {TuiAvatarModule, TuiButtonModule, TuiIconModule} from '@taiga-ui/experimental';
+import {TuiButtonModule, TuiIconModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 import {ExampleTuiButtonComponent} from './button.component';
 import {TuiButtonExample1} from './examples/1';
@@ -17,7 +18,7 @@ import {TuiButtonExample5} from './examples/5';
         TuiButtonModule,
         TuiNotificationModule,
         TuiIconModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         tuiGetDocModules(ExampleTuiButtonComponent),
     ],
     declarations: [
diff --git a/projects/demo/src/modules/experimental/card/card.module.ts b/projects/demo/src/modules/experimental/card/card.module.ts
index cfd9854b228c3..1fbb6901aaa4d 100644
--- a/projects/demo/src/modules/experimental/card/card.module.ts
+++ b/projects/demo/src/modules/experimental/card/card.module.ts
@@ -11,8 +11,6 @@ import {
 } from '@taiga-ui/core';
 import {
     TuiAutoColorModule,
-    TuiAvatarModule,
-    TuiAvatarStackModule,
     TuiCardModule,
     TuiFadeModule,
     TuiFallbackSrcModule,
@@ -22,7 +20,11 @@ import {
     TuiThumbnailCardModule,
     TuiTitleModule,
 } from '@taiga-ui/experimental';
-import {TuiBadgeDirective} from '@taiga-ui/kit';
+import {
+    TuiAvatarComponent,
+    TuiAvatarStackComponent,
+    TuiBadgeDirective,
+} from '@taiga-ui/kit';
 
 import {ExampleTuiCardComponent} from './card.component';
 import {TuiCardExample1} from './examples/1';
@@ -36,7 +38,7 @@ import {TuiCardExample7} from './examples/7';
 @NgModule({
     imports: [
         CommonModule,
-        TuiAvatarStackModule,
+        TuiAvatarStackComponent,
         TuiAutoColorModule,
         TuiInitialsModule,
         TuiNotificationModule,
@@ -47,7 +49,7 @@ import {TuiCardExample7} from './examples/7';
         TuiSvgModule,
         TuiBadgeDirective,
         TuiTitleModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiScrollbarModule,
         TuiHintModule,
         FormsModule,
diff --git a/projects/demo/src/modules/experimental/cell/cell.module.ts b/projects/demo/src/modules/experimental/cell/cell.module.ts
index c69e9f1c2b974..83012400587fc 100644
--- a/projects/demo/src/modules/experimental/cell/cell.module.ts
+++ b/projects/demo/src/modules/experimental/cell/cell.module.ts
@@ -13,8 +13,6 @@ import {
     TuiTooltipModule,
 } from '@taiga-ui/core';
 import {
-    TuiAvatarModule,
-    TuiAvatarStackModule,
     TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiCellModule,
@@ -28,6 +26,8 @@ import {
     TuiToggleModule,
 } from '@taiga-ui/experimental';
 import {
+    TuiAvatarComponent,
+    TuiAvatarStackComponent,
     TuiBadgedContentComponent,
     TuiBadgeDirective,
     TuiDataListWrapperModule,
@@ -48,8 +48,8 @@ import {TuiCellExample7} from './examples/7';
     imports: [
         CommonModule,
         FormsModule,
-        TuiAvatarModule,
-        TuiAvatarStackModule,
+        TuiAvatarComponent,
+        TuiAvatarStackComponent,
         TuiBadgeDirective,
         TuiBadgeNotificationModule,
         TuiBadgedContentComponent,
diff --git a/projects/demo/src/modules/experimental/chip/chip.module.ts b/projects/demo/src/modules/experimental/chip/chip.module.ts
index 74478eab2e14e..4f1188562a700 100644
--- a/projects/demo/src/modules/experimental/chip/chip.module.ts
+++ b/projects/demo/src/modules/experimental/chip/chip.module.ts
@@ -6,14 +6,13 @@ import {TuiRepeatTimesModule} from '@taiga-ui/cdk';
 import {TuiNotificationModule} from '@taiga-ui/core';
 import {
     TuiAmountPipeModule,
-    TuiAvatarModule,
     TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiCheckboxModule,
     TuiChipModule,
     TuiFadeModule,
 } from '@taiga-ui/experimental';
-import {TuiBadgedContentComponent} from '@taiga-ui/kit';
+import {TuiAvatarComponent, TuiBadgedContentComponent} from '@taiga-ui/kit';
 
 import {ExampleTuiChipComponent} from './chip.component';
 import {TuiChipExample1} from './examples/1';
@@ -30,7 +29,7 @@ import {TuiChipExample4} from './examples/4';
         TuiFadeModule,
         TuiNotificationModule,
         TuiButtonModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiCheckboxModule,
         TuiAmountPipeModule,
         TuiBadgedContentComponent,
diff --git a/projects/demo/src/modules/experimental/header/header.module.ts b/projects/demo/src/modules/experimental/header/header.module.ts
index 44d571fdfa9d7..3d5df5193dd03 100644
--- a/projects/demo/src/modules/experimental/header/header.module.ts
+++ b/projects/demo/src/modules/experimental/header/header.module.ts
@@ -8,7 +8,6 @@ import {
     TuiTooltipModule,
 } from '@taiga-ui/core';
 import {
-    TuiAvatarModule,
     TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiHeaderDirective,
@@ -18,6 +17,7 @@ import {
     TuiToggleModule,
 } from '@taiga-ui/experimental';
 import {
+    TuiAvatarComponent,
     TuiBadgeDirective,
     TuiDataListWrapperModule,
     TuiSelectModule,
@@ -46,7 +46,7 @@ import {ExampleTuiCellComponent} from './header.component';
         TuiButtonModule,
         tuiGetDocModules(ExampleTuiCellComponent),
         TuiNotificationModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
     ],
     declarations: [
         ExampleTuiCellComponent,
diff --git a/projects/demo/src/modules/experimental/surface/surface.module.ts b/projects/demo/src/modules/experimental/surface/surface.module.ts
index 7968e2b2117dc..303e803119eca 100644
--- a/projects/demo/src/modules/experimental/surface/surface.module.ts
+++ b/projects/demo/src/modules/experimental/surface/surface.module.ts
@@ -12,8 +12,8 @@ import {
     TuiNotificationModule,
     TuiScrollbarModule,
 } from '@taiga-ui/core';
-import {TuiAvatarModule, TuiButtonModule, TuiSurfaceModule} from '@taiga-ui/experimental';
-import {TuiBadgeDirective} from '@taiga-ui/kit';
+import {TuiButtonModule, TuiSurfaceModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiBadgeDirective} from '@taiga-ui/kit';
 
 import {TuiSurfaceExample1} from './examples/1';
 import {TuiSurfaceExample2} from './examples/2';
@@ -36,7 +36,7 @@ import {ExampleTuiSurfaceComponent} from './surface.component';
         TuiScrollbarModule,
         TuiButtonModule,
         TuiLinkModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiLabelModule,
         TuiModeModule,
         TuiMoneyModule,
diff --git a/projects/demo/src/modules/experimental/title/title.module.ts b/projects/demo/src/modules/experimental/title/title.module.ts
index 29b5e8830a895..0dadf0e468334 100644
--- a/projects/demo/src/modules/experimental/title/title.module.ts
+++ b/projects/demo/src/modules/experimental/title/title.module.ts
@@ -2,7 +2,8 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-import {TuiAvatarModule, TuiTitleModule} from '@taiga-ui/experimental';
+import {TuiTitleModule} from '@taiga-ui/experimental';
+import {TuiAvatarComponent} from '@taiga-ui/kit';
 
 import {TuiTitleExample1} from './examples/1';
 import {TuiTitleExample2} from './examples/2';
@@ -14,7 +15,7 @@ import {ExampleTuiTitleComponent} from './title.component';
         CommonModule,
         TuiTitleModule,
         TuiLinkModule,
-        TuiAvatarModule,
+        TuiAvatarComponent,
         TuiNotificationModule,
         tuiGetDocModules(ExampleTuiTitleComponent),
     ],
diff --git a/projects/experimental/components/avatar-stack/avatar-stack.module.ts b/projects/experimental/components/avatar-stack/avatar-stack.module.ts
deleted file mode 100644
index 9e7a5c1616808..0000000000000
--- a/projects/experimental/components/avatar-stack/avatar-stack.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {NgModule} from '@angular/core';
-import {
-    TuiAvatarComponent,
-    TuiAvatarModule,
-} from '@taiga-ui/experimental/components/avatar';
-
-import {TuiAvatarStackComponent} from './avatar-stack.component';
-
-@NgModule({
-    imports: [TuiAvatarModule],
-    declarations: [TuiAvatarStackComponent],
-    exports: [TuiAvatarStackComponent, TuiAvatarComponent],
-})
-export class TuiAvatarStackModule {}
diff --git a/projects/experimental/components/avatar/avatar.component.ts b/projects/experimental/components/avatar/avatar.component.ts
deleted file mode 100644
index 4b1d6e5f47fef..0000000000000
--- a/projects/experimental/components/avatar/avatar.component.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
-import {SafeResourceUrl} from '@angular/platform-browser';
-import {tuiIsString, TuiStringHandler} from '@taiga-ui/cdk';
-import {
-    TUI_ICON_RESOLVER,
-    TuiAppearanceDirective,
-    tuiAppearanceOptionsProvider,
-} from '@taiga-ui/core';
-
-import {TUI_AVATAR_OPTIONS, TuiAvatarOptions} from './avatar.options';
-
-@Component({
-    selector: 'tui-avatar',
-    templateUrl: './avatar.template.html',
-    styleUrls: ['./avatar.style.less'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [tuiAppearanceOptionsProvider(TUI_AVATAR_OPTIONS)],
-    hostDirectives: [
-        {
-            directive: TuiAppearanceDirective,
-            inputs: [
-                'tuiAppearance: appearance',
-                'tuiAppearanceState',
-                'tuiAppearanceFocus',
-            ],
-        },
-    ],
-    host: {
-        '[attr.data-size]': 'size',
-        '[attr.data-type]': 'type',
-        '[style.--t-mask]': '"url(" + resolver(src) + ")"',
-        '[class._round]': 'round',
-    },
-})
-export class TuiAvatarComponent {
-    @Input()
-    size = this.options.size;
-
-    @Input()
-    round = this.options.round;
-
-    @Input()
-    src: SafeResourceUrl | string | null = null;
-
-    constructor(
-        @Inject(TUI_AVATAR_OPTIONS) private readonly options: TuiAvatarOptions,
-        @Inject(TUI_ICON_RESOLVER) readonly resolver: TuiStringHandler<string>,
-    ) {}
-
-    get value(): SafeResourceUrl | string {
-        return this.src || '';
-    }
-
-    get type(): 'content' | 'icon' | 'img' | 'text' {
-        if (this.value && !tuiIsString(this.value)) {
-            return 'img';
-        }
-
-        if (this.value.startsWith('tuiIcon') || this.value.endsWith('.svg')) {
-            return 'icon';
-        }
-
-        if (this.value.length > 0 && this.value.length < 3) {
-            return 'text';
-        }
-
-        return this.value.length ? 'img' : 'content';
-    }
-}
diff --git a/projects/experimental/components/avatar/avatar.module.ts b/projects/experimental/components/avatar/avatar.module.ts
deleted file mode 100644
index 34bd1777dcedc..0000000000000
--- a/projects/experimental/components/avatar/avatar.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {TuiIconModule} from '@taiga-ui/experimental/components/icon';
-import {TuiLazyLoadingModule} from '@taiga-ui/kit';
-
-import {TuiAvatarComponent} from './avatar.component';
-
-@NgModule({
-    imports: [CommonModule, TuiIconModule, TuiLazyLoadingModule],
-    declarations: [TuiAvatarComponent],
-    exports: [TuiAvatarComponent],
-})
-export class TuiAvatarModule {}
diff --git a/projects/experimental/components/avatar/avatar.options.ts b/projects/experimental/components/avatar/avatar.options.ts
deleted file mode 100644
index a0e27313d111f..0000000000000
--- a/projects/experimental/components/avatar/avatar.options.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Provider} from '@angular/core';
-import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
-import {TuiAppearanceOptions, TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
-
-export interface TuiAvatarOptions extends TuiAppearanceOptions {
-    readonly round: boolean;
-    readonly size: TuiSizeXXL | TuiSizeXXS;
-}
-
-export const TUI_AVATAR_DEFAULT_OPTIONS: TuiAvatarOptions = {
-    appearance: '',
-    round: true,
-    size: 'm',
-};
-
-export const TUI_AVATAR_OPTIONS = tuiCreateToken(TUI_AVATAR_DEFAULT_OPTIONS);
-
-export function tuiAvatarOptionsProvider(options: Partial<TuiAvatarOptions>): Provider {
-    return tuiProvideOptions(TUI_AVATAR_OPTIONS, options, TUI_AVATAR_DEFAULT_OPTIONS);
-}
diff --git a/projects/experimental/components/avatar/avatar.style.less b/projects/experimental/components/avatar/avatar.style.less
deleted file mode 100644
index 04ddadb26ecb9..0000000000000
--- a/projects/experimental/components/avatar/avatar.style.less
+++ /dev/null
@@ -1,124 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local';
-
-:host {
-    --t-size: 3.5rem;
-    --t-radius: 0.75rem;
-    position: relative;
-    display: inline-flex;
-    flex-shrink: 0;
-    width: var(--t-size);
-    height: var(--t-size);
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    white-space: nowrap;
-    border-radius: var(--t-radius);
-    background: var(--tui-secondary);
-    color: var(--tui-text-02);
-    vertical-align: middle;
-    box-sizing: border-box;
-    padding: 0.25rem;
-    opacity: 0.999; // Kick in hardware rendering layer to avoid artifacts on the edges
-
-    &:before {
-        .fullsize();
-        background: currentColor;
-        mask: var(--t-mask) no-repeat center/60%;
-    }
-
-    &[data-size='xxs'] {
-        --t-size: 1.5rem;
-        --t-radius: 0.5rem;
-        font: var(--tui-font-text-xs);
-        font-weight: bold;
-
-        &[data-type='content'] {
-            font: var(--tui-font-text-m);
-            font-size: 0.5625rem;
-        }
-    }
-
-    &[data-size='xs'] {
-        --t-size: 2rem;
-        --t-radius: 0.5rem;
-        font: var(--tui-font-text-s);
-        font-weight: bold;
-
-        &[data-type='content'] {
-            font: var(--tui-font-text-xs);
-            font-weight: bold;
-        }
-    }
-
-    &[data-size='s'] {
-        --t-size: 2.5rem;
-        --t-radius: 0.75rem;
-        font: var(--tui-font-text-l);
-        font-weight: bold;
-
-        &[data-type='content'] {
-            font: var(--tui-font-text-m);
-            font-weight: bold;
-        }
-    }
-
-    &[data-size='m'] {
-        --t-size: 3.5rem;
-        --t-radius: 0.75rem;
-        font: var(--tui-font-heading-5);
-
-        &[data-type='content'] {
-            font: var(--tui-font-text-l);
-            font-weight: bold;
-        }
-    }
-
-    &[data-size='l'] {
-        --t-size: 5rem;
-        --t-radius: 0.75rem;
-        font: var(--tui-font-heading-3);
-
-        &[data-type='content'] {
-            font: var(--tui-font-heading-4);
-        }
-    }
-
-    &[data-size='xl'] {
-        --t-size: 6rem;
-        --t-radius: 1rem;
-        font: var(--tui-font-heading-3);
-
-        &[data-type='content'] {
-            font: var(--tui-font-heading-3);
-        }
-    }
-
-    &[data-size='xxl'] {
-        --t-size: 8rem;
-        --t-radius: 1.25rem;
-        font: var(--tui-font-heading-2);
-
-        &[data-type='content'] {
-            font: var(--tui-font-heading-3);
-        }
-    }
-
-    &[data-type='img'] {
-        background: transparent;
-    }
-
-    &[data-type='icon']:before {
-        content: '';
-    }
-
-    &._round {
-        --t-radius: calc(var(--t-size) / 2);
-    }
-
-    ::ng-deep img,
-    ::ng-deep picture,
-    ::ng-deep video {
-        .fullsize();
-        object-fit: cover;
-    }
-}
diff --git a/projects/experimental/components/avatar/avatar.template.html b/projects/experimental/components/avatar/avatar.template.html
deleted file mode 100644
index e706a7e346897..0000000000000
--- a/projects/experimental/components/avatar/avatar.template.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<ng-container [ngSwitch]="type">
-    <img
-        *ngSwitchCase="'img'"
-        alt=""
-        loading="lazy"
-        [src]="value"
-    />
-    <ng-container *ngSwitchCase="'text'">{{ value }}</ng-container>
-    <ng-container *ngSwitchDefault>
-        <ng-content></ng-content>
-    </ng-container>
-</ng-container>
diff --git a/projects/experimental/components/avatar/index.ts b/projects/experimental/components/avatar/index.ts
deleted file mode 100644
index 75e00732d4245..0000000000000
--- a/projects/experimental/components/avatar/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './avatar.component';
-export * from './avatar.module';
-export * from './avatar.options';
diff --git a/projects/experimental/components/avatar/ng-package.json b/projects/experimental/components/avatar/ng-package.json
deleted file mode 100644
index bebf62dcb5e51..0000000000000
--- a/projects/experimental/components/avatar/ng-package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    "lib": {
-        "entryFile": "index.ts"
-    }
-}
diff --git a/projects/experimental/components/chip/chip.directive.ts b/projects/experimental/components/chip/chip.directive.ts
index 0595bc786af24..13c147400cb48 100644
--- a/projects/experimental/components/chip/chip.directive.ts
+++ b/projects/experimental/components/chip/chip.directive.ts
@@ -6,10 +6,10 @@ import {
     TuiIconsDirective,
     TuiSizeXXS,
 } from '@taiga-ui/core';
-import {tuiAvatarOptionsProvider} from '@taiga-ui/experimental/components/avatar';
 import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components/button';
 import {tuiCheckboxOptionsProvider} from '@taiga-ui/experimental/components/checkbox';
 import {tuiToggleOptionsProvider} from '@taiga-ui/experimental/components/toggle';
+import {tuiAvatarOptionsProvider} from '@taiga-ui/kit';
 
 import {TuiChipComponent} from './chip.component';
 import {TUI_CHIP_OPTIONS, TuiChipOptions} from './chip.options';
diff --git a/projects/experimental/components/index.ts b/projects/experimental/components/index.ts
index ba1c2e3c2b771..04aa5099da695 100644
--- a/projects/experimental/components/index.ts
+++ b/projects/experimental/components/index.ts
@@ -1,6 +1,3 @@
-export * from '@taiga-ui/experimental/components/avatar';
-export * from '@taiga-ui/experimental/components/avatar-labeled';
-export * from '@taiga-ui/experimental/components/avatar-stack';
 export * from '@taiga-ui/experimental/components/badge-notification';
 export * from '@taiga-ui/experimental/components/button';
 export * from '@taiga-ui/experimental/components/checkbox';
diff --git a/projects/experimental/directives/cell/cell.directive.ts b/projects/experimental/directives/cell/cell.directive.ts
index d9b890b19319c..e9b16bf18a1a3 100644
--- a/projects/experimental/directives/cell/cell.directive.ts
+++ b/projects/experimental/directives/cell/cell.directive.ts
@@ -1,10 +1,8 @@
 import {Directive, Inject, Input} from '@angular/core';
 import {TuiDirectiveStylesService} from '@taiga-ui/cdk';
 import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
-import {
-    tuiAvatarOptionsProvider,
-    tuiButtonOptionsProvider,
-} from '@taiga-ui/experimental/components';
+import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components';
+import {tuiAvatarOptionsProvider} from '@taiga-ui/kit';
 
 import {TuiCellComponent} from './cell.component';
 
diff --git a/projects/experimental/directives/header/header.directive.ts b/projects/experimental/directives/header/header.directive.ts
index 07d09b1f4d483..00e4895933e57 100644
--- a/projects/experimental/directives/header/header.directive.ts
+++ b/projects/experimental/directives/header/header.directive.ts
@@ -1,11 +1,8 @@
 import {Directive, Input} from '@angular/core';
 import {tuiWithStyles} from '@taiga-ui/cdk';
 import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
-import {
-    tuiAvatarOptionsProvider,
-    tuiButtonOptionsProvider,
-} from '@taiga-ui/experimental/components';
-import {tuiBadgeOptionsProvider} from '@taiga-ui/kit';
+import {tuiButtonOptionsProvider} from '@taiga-ui/experimental/components';
+import {tuiAvatarOptionsProvider, tuiBadgeOptionsProvider} from '@taiga-ui/kit';
 
 import {TuiHeaderComponent} from './header.component';
 
diff --git a/projects/experimental/components/avatar-labeled/avatar-labeled.component.ts b/projects/kit/components/avatar-labeled/avatar-labeled.component.ts
similarity index 100%
rename from projects/experimental/components/avatar-labeled/avatar-labeled.component.ts
rename to projects/kit/components/avatar-labeled/avatar-labeled.component.ts
diff --git a/projects/experimental/components/avatar-labeled/avatar-labeled.styles.less b/projects/kit/components/avatar-labeled/avatar-labeled.styles.less
similarity index 100%
rename from projects/experimental/components/avatar-labeled/avatar-labeled.styles.less
rename to projects/kit/components/avatar-labeled/avatar-labeled.styles.less
diff --git a/projects/experimental/components/avatar-labeled/index.ts b/projects/kit/components/avatar-labeled/index.ts
similarity index 100%
rename from projects/experimental/components/avatar-labeled/index.ts
rename to projects/kit/components/avatar-labeled/index.ts
diff --git a/projects/experimental/components/avatar-labeled/ng-package.json b/projects/kit/components/avatar-labeled/ng-package.json
similarity index 100%
rename from projects/experimental/components/avatar-labeled/ng-package.json
rename to projects/kit/components/avatar-labeled/ng-package.json
diff --git a/projects/experimental/components/avatar-stack/avatar-stack.component.ts b/projects/kit/components/avatar-stack/avatar-stack.component.ts
similarity index 81%
rename from projects/experimental/components/avatar-stack/avatar-stack.component.ts
rename to projects/kit/components/avatar-stack/avatar-stack.component.ts
index cb52ec419a148..25bf0c86aae35 100644
--- a/projects/experimental/components/avatar-stack/avatar-stack.component.ts
+++ b/projects/kit/components/avatar-stack/avatar-stack.component.ts
@@ -6,9 +6,12 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import {TuiHorizontalDirection} from '@taiga-ui/core';
+import {TuiAvatarComponent} from '@taiga-ui/kit/components/avatar';
 
 @Component({
+    standalone: true,
     selector: 'tui-avatar-stack',
+    imports: [TuiAvatarComponent],
     template: '<ng-content></ng-content>',
     styleUrls: ['./avatar-stack.style.less'],
     encapsulation: ViewEncapsulation.None,
diff --git a/projects/experimental/components/avatar-stack/avatar-stack.style.less b/projects/kit/components/avatar-stack/avatar-stack.style.less
similarity index 100%
rename from projects/experimental/components/avatar-stack/avatar-stack.style.less
rename to projects/kit/components/avatar-stack/avatar-stack.style.less
diff --git a/projects/experimental/components/avatar-stack/index.ts b/projects/kit/components/avatar-stack/index.ts
similarity index 51%
rename from projects/experimental/components/avatar-stack/index.ts
rename to projects/kit/components/avatar-stack/index.ts
index ad04b50530161..9949099017cef 100644
--- a/projects/experimental/components/avatar-stack/index.ts
+++ b/projects/kit/components/avatar-stack/index.ts
@@ -1,2 +1 @@
 export * from './avatar-stack.component';
-export * from './avatar-stack.module';
diff --git a/projects/experimental/components/avatar-stack/ng-package.json b/projects/kit/components/avatar-stack/ng-package.json
similarity index 100%
rename from projects/experimental/components/avatar-stack/ng-package.json
rename to projects/kit/components/avatar-stack/ng-package.json
diff --git a/projects/kit/components/avatar/avatar.component.ts b/projects/kit/components/avatar/avatar.component.ts
index d736ee46ceeaa..a1a3de9275765 100644
--- a/projects/kit/components/avatar/avatar.component.ts
+++ b/projects/kit/components/avatar/avatar.component.ts
@@ -1,93 +1,75 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    HostBinding,
-    Inject,
-    Input,
-} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
 import {SafeResourceUrl} from '@angular/platform-browser';
-import {tuiIsString, tuiPure, TuiSafeHtml} from '@taiga-ui/cdk';
-import {tuiSizeBigger, TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
-import {tuiStringHashToHsl} from '@taiga-ui/kit/utils/format';
+import {tuiIsString, TuiStringHandler} from '@taiga-ui/cdk';
+import {
+    TUI_ICON_RESOLVER,
+    TuiAppearanceDirective,
+    tuiAppearanceOptionsProvider,
+} from '@taiga-ui/core';
+// eslint-disable-next-line @taiga-ui/experience/no-deep-imports
+import {TuiIconModule} from '@taiga-ui/experimental/components/icon';
+import {TuiLazyLoadingModule} from '@taiga-ui/kit/directives';
 
 import {TUI_AVATAR_OPTIONS, TuiAvatarOptions} from './avatar.options';
 
 @Component({
+    standalone: true,
     selector: 'tui-avatar',
+    imports: [CommonModule, TuiLazyLoadingModule, TuiIconModule],
     templateUrl: './avatar.template.html',
     styleUrls: ['./avatar.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [tuiAppearanceOptionsProvider(TUI_AVATAR_OPTIONS)],
+    hostDirectives: [
+        {
+            directive: TuiAppearanceDirective,
+            inputs: [
+                'tuiAppearance: appearance',
+                'tuiAppearanceState',
+                'tuiAppearanceFocus',
+            ],
+        },
+    ],
+    host: {
+        '[attr.data-size]': 'size',
+        '[attr.data-type]': 'type',
+        '[style.--t-mask]': '"url(" + resolver(src) + ")"',
+        '[class._round]': 'round',
+    },
 })
 export class TuiAvatarComponent {
     @Input()
-    @HostBinding('attr.data-size')
     size = this.options.size;
 
-    @Input('avatarUrl')
-    set avatarUrlSetter(avatarUrl: SafeResourceUrl | string | null) {
-        this.avatarUrl = avatarUrl;
-        this.isUrlValid = !!avatarUrl && !this.iconAvatar;
-    }
-
-    @Input()
-    text = '';
-
-    @Input()
-    fallback: TuiSafeHtml | null = null;
-
     @Input()
-    autoColor: boolean = this.options.autoColor;
+    round = this.options.round;
 
     @Input()
-    @HostBinding('class._rounded')
-    rounded: boolean = this.options.rounded;
-
-    avatarUrl: SafeResourceUrl | string | null = null;
-
-    isUrlValid = false;
+    src: SafeResourceUrl | string | null = null;
 
-    constructor(@Inject(TUI_AVATAR_OPTIONS) private readonly options: TuiAvatarOptions) {}
+    constructor(
+        @Inject(TUI_AVATAR_OPTIONS) private readonly options: TuiAvatarOptions,
+        @Inject(TUI_ICON_RESOLVER) readonly resolver: TuiStringHandler<string>,
+    ) {}
 
-    @HostBinding('style.background')
-    get bgColor(): string {
-        return this.autoColor ? tuiStringHashToHsl(this.text) : '';
+    get value(): SafeResourceUrl | string {
+        return this.src || '';
     }
 
-    @HostBinding('class._has-avatar')
-    get hasAvatar(): boolean {
-        return this.avatarUrl !== null && this.isUrlValid;
-    }
-
-    get iconAvatar(): boolean {
-        return tuiIsString(this.avatarUrl) && !!this.avatarUrl?.startsWith('tuiIcon');
-    }
-
-    get useFallback(): boolean {
-        return (
-            !!this.fallback && !!this.avatarUrl && !this.isUrlValid && !this.text.length
-        );
-    }
+    get type(): 'content' | 'icon' | 'img' | 'text' {
+        if (this.value && !tuiIsString(this.value)) {
+            return 'img';
+        }
 
-    get computedText(): string {
-        return this.hasAvatar || this.iconAvatar || this.text === ''
-            ? ''
-            : this.getSlicedText(this.text, this.size);
-    }
-
-    get stringAvatar(): string {
-        return this.iconAvatar ? String(this.avatarUrl) : '';
-    }
-
-    onError(): void {
-        this.isUrlValid = false;
-    }
+        if (this.value.startsWith('tuiIcon') || this.value.endsWith('.svg')) {
+            return 'icon';
+        }
 
-    @tuiPure
-    private getSlicedText(text: string, size: TuiSizeXXL | TuiSizeXXS): string {
-        const words = text.split(' ');
+        if (this.value.length > 0 && this.value.length < 3) {
+            return 'text';
+        }
 
-        return words.length > 1 && tuiSizeBigger(size)
-            ? words[0].slice(0, 1) + words[1].slice(0, 1)
-            : words[0].slice(0, 1);
+        return this.value.length ? 'img' : 'content';
     }
 }
diff --git a/projects/kit/components/avatar/avatar.module.ts b/projects/kit/components/avatar/avatar.module.ts
deleted file mode 100644
index f79a911196739..0000000000000
--- a/projects/kit/components/avatar/avatar.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {TuiSvgModule} from '@taiga-ui/core';
-import {TuiLazyLoadingModule} from '@taiga-ui/kit/directives';
-
-import {TuiAvatarComponent} from './avatar.component';
-
-@NgModule({
-    imports: [CommonModule, TuiLazyLoadingModule, TuiSvgModule],
-    declarations: [TuiAvatarComponent],
-    exports: [TuiAvatarComponent],
-})
-export class TuiAvatarModule {}
diff --git a/projects/kit/components/avatar/avatar.options.ts b/projects/kit/components/avatar/avatar.options.ts
index 3bf4b008fadfc..a0e27313d111f 100644
--- a/projects/kit/components/avatar/avatar.options.ts
+++ b/projects/kit/components/avatar/avatar.options.ts
@@ -1,23 +1,18 @@
 import {Provider} from '@angular/core';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk';
-import {TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
+import {TuiAppearanceOptions, TuiSizeXXL, TuiSizeXXS} from '@taiga-ui/core';
 
-export interface TuiAvatarOptions {
-    readonly autoColor: boolean;
-    readonly rounded: boolean;
+export interface TuiAvatarOptions extends TuiAppearanceOptions {
+    readonly round: boolean;
     readonly size: TuiSizeXXL | TuiSizeXXS;
 }
 
-/** Default values for the avatar options. */
 export const TUI_AVATAR_DEFAULT_OPTIONS: TuiAvatarOptions = {
+    appearance: '',
+    round: true,
     size: 'm',
-    autoColor: false,
-    rounded: false,
 };
 
-/**
- * Default parameters for avatar component
- */
 export const TUI_AVATAR_OPTIONS = tuiCreateToken(TUI_AVATAR_DEFAULT_OPTIONS);
 
 export function tuiAvatarOptionsProvider(options: Partial<TuiAvatarOptions>): Provider {
diff --git a/projects/kit/components/avatar/avatar.style.less b/projects/kit/components/avatar/avatar.style.less
index 0ac201b25df6b..04ddadb26ecb9 100644
--- a/projects/kit/components/avatar/avatar.style.less
+++ b/projects/kit/components/avatar/avatar.style.less
@@ -1,210 +1,124 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-@size-xs: 1.5rem;
-@size-s: 2rem;
-@size-m: 3rem;
-@size-l: 4rem;
-@size-xl: 6rem;
-@size-xxl: 9rem;
-
 :host {
+    --t-size: 3.5rem;
+    --t-radius: 0.75rem;
     position: relative;
-    display: flex;
+    display: inline-flex;
     flex-shrink: 0;
-    border-radius: var(--tui-radius-m);
-    color: var(--tui-secondary-active);
-    text-align: center;
-    text-transform: uppercase;
-    justify-content: center;
+    width: var(--t-size);
+    height: var(--t-size);
     align-items: center;
-    background: var(--tui-avatar-background, currentColor);
-    user-select: none;
+    justify-content: center;
     overflow: hidden;
+    white-space: nowrap;
+    border-radius: var(--t-radius);
+    background: var(--tui-secondary);
+    color: var(--tui-text-02);
+    vertical-align: middle;
+    box-sizing: border-box;
+    padding: 0.25rem;
+    opacity: 0.999; // Kick in hardware rendering layer to avoid artifacts on the edges
+
+    &:before {
+        .fullsize();
+        background: currentColor;
+        mask: var(--t-mask) no-repeat center/60%;
+    }
+
+    &[data-size='xxs'] {
+        --t-size: 1.5rem;
+        --t-radius: 0.5rem;
+        font: var(--tui-font-text-xs);
+        font-weight: bold;
+
+        &[data-type='content'] {
+            font: var(--tui-font-text-m);
+            font-size: 0.5625rem;
+        }
+    }
 
     &[data-size='xs'] {
+        --t-size: 2rem;
+        --t-radius: 0.5rem;
         font: var(--tui-font-text-s);
-        width: @size-xs;
-        height: @size-xs;
-    }
+        font-weight: bold;
 
-    &[data-size='s'] {
-        font: var(--tui-font-text-m);
-        width: @size-s;
-        height: @size-s;
+        &[data-type='content'] {
+            font: var(--tui-font-text-xs);
+            font-weight: bold;
+        }
     }
 
-    &[data-size='m'] {
+    &[data-size='s'] {
+        --t-size: 2.5rem;
+        --t-radius: 0.75rem;
         font: var(--tui-font-text-l);
-        width: @size-m;
-        height: @size-m;
-    }
-
-    &[data-size='l'] {
-        font: var(--tui-font-heading-5);
-        width: @size-l;
-        height: @size-l;
-        border-radius: var(--tui-radius-xl);
-    }
-
-    &[data-size='xl'] {
-        font: var(--tui-font-heading-3);
-        width: @size-xl;
-        height: @size-xl;
-        border-radius: var(--tui-radius-xl);
-    }
-
-    &[data-size='xxl'] {
-        font: var(--tui-font-heading-1);
-        width: @size-xxl;
-        height: @size-xxl;
-        border-radius: var(--tui-radius-l);
-    }
-
-    &[new] {
-        &[data-size='xxs'] {
-            width: 1.5rem;
-            height: 1.5rem;
-            border-radius: var(--tui-radius-s);
-
-            .t-icon {
-                transform: scale(0.58);
-            }
-        }
-
-        &[data-size='xs'] {
-            width: 2rem;
-            height: 2rem;
-            border-radius: var(--tui-radius-s);
-
-            .t-icon {
-                transform: scale(0.83);
-            }
-        }
-
-        &[data-size='s'] {
-            width: 2.5rem;
-            height: 2.5rem;
-            border-radius: calc(1.5 * var(--tui-radius-s));
-
-            .t-icon {
-                transform: scale(1);
-            }
-        }
-
-        &[data-size='m'] {
-            width: 3rem;
-            height: 3rem;
-            border-radius: calc(2 * var(--tui-radius-s));
+        font-weight: bold;
 
-            .t-icon {
-                transform: scale(1.17);
-            }
+        &[data-type='content'] {
+            font: var(--tui-font-text-m);
+            font-weight: bold;
         }
-
-        &[data-size='l'] {
-            width: 4rem;
-            height: 4rem;
-            border-radius: calc(2 * var(--tui-radius-s));
-
-            .t-icon {
-                transform: scale(1.67);
-            }
-        }
-
-        &[data-size='xl'] {
-            width: 6rem;
-            height: 6rem;
-            border-radius: calc(3 * var(--tui-radius-s));
-
-            .t-icon {
-                transform: scale(2.33);
-            }
-        }
-
-        &[data-size='xxl'] {
-            width: 8rem;
-            height: 8rem;
-            border-radius: calc(4 * var(--tui-radius-s));
-
-            .t-icon {
-                transform: scale(3.33);
-            }
-        }
-    }
-
-    &._has-avatar {
-        background-color: transparent;
-    }
-
-    &._rounded {
-        border-radius: 100% !important;
-    }
-}
-
-::ng-deep .tui-avatar-stack {
-    display: flex;
-    width: min-content;
-}
-
-:host-context(.tui-avatar-stack) {
-    &[data-size='xs'] {
-        margin-right: -0.625rem;
-        box-shadow: 0 0 0 1px var(--tui-avatar-border, var(--tui-base-01));
-    }
-
-    &[data-size='s'] {
-        margin-right: -0.875rem;
-        box-shadow: 0 0 0 1px var(--tui-avatar-border, var(--tui-base-01));
     }
 
     &[data-size='m'] {
-        margin-right: -1.25rem;
-        box-shadow: 0 0 0 2px var(--tui-avatar-border, var(--tui-base-01));
+        --t-size: 3.5rem;
+        --t-radius: 0.75rem;
+        font: var(--tui-font-heading-5);
+
+        &[data-type='content'] {
+            font: var(--tui-font-text-l);
+            font-weight: bold;
+        }
     }
 
     &[data-size='l'] {
-        margin-right: -1.625rem;
-        box-shadow: 0 0 0 2px var(--tui-avatar-border, var(--tui-base-01));
+        --t-size: 5rem;
+        --t-radius: 0.75rem;
+        font: var(--tui-font-heading-3);
+
+        &[data-type='content'] {
+            font: var(--tui-font-heading-4);
+        }
     }
 
     &[data-size='xl'] {
-        margin-right: -2.25rem;
-        box-shadow: 0 0 0 3px var(--tui-avatar-border, var(--tui-base-01));
-    }
+        --t-size: 6rem;
+        --t-radius: 1rem;
+        font: var(--tui-font-heading-3);
 
-    &[data-size='xxl'] {
-        margin-right: -3.375rem;
-        box-shadow: 0 0 0 3px var(--tui-avatar-border, var(--tui-base-01));
+        &[data-type='content'] {
+            font: var(--tui-font-heading-3);
+        }
     }
-}
-
-.t-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
 
-.t-text {
-    color: var(--tui-avatar-color, var(--tui-text-01));
-}
+    &[data-size='xxl'] {
+        --t-size: 8rem;
+        --t-radius: 1.25rem;
+        font: var(--tui-font-heading-2);
 
-.t-icon {
-    .fullsize();
-    color: var(--tui-avatar-color, var(--tui-text-01));
+        &[data-type='content'] {
+            font: var(--tui-font-heading-3);
+        }
+    }
 
-    :host[data-size='xs'] & {
-        transform: scale(0.5);
+    &[data-type='img'] {
+        background: transparent;
     }
 
-    :host[data-size='m'] & {
-        transform: scale(1.6);
+    &[data-type='icon']:before {
+        content: '';
     }
 
-    :host[data-size='l'] & {
-        transform: scale(2);
+    &._round {
+        --t-radius: calc(var(--t-size) / 2);
     }
 
-    :host[data-size='xl'] & {
-        transform: scale(3.2);
+    ::ng-deep img,
+    ::ng-deep picture,
+    ::ng-deep video {
+        .fullsize();
+        object-fit: cover;
     }
 }
diff --git a/projects/kit/components/avatar/avatar.template.html b/projects/kit/components/avatar/avatar.template.html
index 65ef632d5c330..e706a7e346897 100644
--- a/projects/kit/components/avatar/avatar.template.html
+++ b/projects/kit/components/avatar/avatar.template.html
@@ -1,19 +1,12 @@
-<img
-    *ngIf="isUrlValid"
-    loading="lazy"
-    class="t-image"
-    [attr.alt]="text"
-    [src]="avatarUrl || ''"
-    (error)="onError()"
-/>
-<tui-svg
-    *ngIf="useFallback"
-    class="t-icon"
-    [src]="fallback!"
-></tui-svg>
-<tui-svg
-    *ngIf="stringAvatar"
-    class="t-icon"
-    [src]="stringAvatar"
-></tui-svg>
-<span class="t-text">{{ computedText }}</span>
+<ng-container [ngSwitch]="type">
+    <img
+        *ngSwitchCase="'img'"
+        alt=""
+        loading="lazy"
+        [src]="value"
+    />
+    <ng-container *ngSwitchCase="'text'">{{ value }}</ng-container>
+    <ng-container *ngSwitchDefault>
+        <ng-content></ng-content>
+    </ng-container>
+</ng-container>
diff --git a/projects/kit/components/avatar/index.ts b/projects/kit/components/avatar/index.ts
index 75e00732d4245..34f2945ff0d86 100644
--- a/projects/kit/components/avatar/index.ts
+++ b/projects/kit/components/avatar/index.ts
@@ -1,3 +1,2 @@
 export * from './avatar.component';
-export * from './avatar.module';
 export * from './avatar.options';
diff --git a/projects/kit/components/avatar/tests/avatar-options.spec.ts b/projects/kit/components/avatar/tests/avatar-options.spec.ts
deleted file mode 100644
index b87a683954ea2..0000000000000
--- a/projects/kit/components/avatar/tests/avatar-options.spec.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import {Component, ViewChild} from '@angular/core';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {
-    TuiAvatarComponent,
-    TuiAvatarModule,
-    tuiAvatarOptionsProvider,
-} from '@taiga-ui/kit';
-
-describe('Avatar component options', () => {
-    let fixture: ComponentFixture<TestComponent>;
-    let testComponent: TestComponent;
-
-    @Component({
-        template: `
-            <tui-avatar></tui-avatar>
-        `,
-    })
-    class TestComponent {
-        @ViewChild(TuiAvatarComponent, {static: true})
-        component!: TuiAvatarComponent;
-    }
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [TuiAvatarModule],
-            declarations: [TestComponent],
-            providers: [
-                tuiAvatarOptionsProvider({
-                    size: 'l',
-                    autoColor: true,
-                    rounded: true,
-                }),
-            ],
-        });
-
-        fixture = TestBed.createComponent(TestComponent);
-        testComponent = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('override by custom options', () => {
-        expect(testComponent.component.size).toBe('l');
-        expect(testComponent.component.autoColor).toBe(true);
-        expect(testComponent.component.rounded).toBe(true);
-    });
-});
diff --git a/projects/kit/components/avatar/tests/avatar.component.spec.ts b/projects/kit/components/avatar/tests/avatar.component.spec.ts
deleted file mode 100644
index 8896297b66345..0000000000000
--- a/projects/kit/components/avatar/tests/avatar.component.spec.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import {HarnessLoader} from '@angular/cdk/testing';
-import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {Component} from '@angular/core';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {TuiAvatarModule} from '@taiga-ui/kit';
-import {TuiAvatarHarness, TuiPageObject} from '@taiga-ui/testing';
-
-describe('Avatar', () => {
-    @Component({
-        template: `
-            <tui-avatar
-                id="default"
-                [avatarUrl]="'someURL'"
-                [text]="'James Cameron'"
-            ></tui-avatar>
-            <tui-avatar
-                id="null-url"
-                [avatarUrl]="null"
-                [text]="'James Cameron'"
-            ></tui-avatar>
-            <tui-avatar
-                id="null-url-with-text"
-                [avatarUrl]="null"
-                [text]="'James'"
-            ></tui-avatar>
-            <tui-avatar
-                id="null-url-xs"
-                size="xs"
-                [avatarUrl]="null"
-                [text]="'James'"
-            ></tui-avatar>
-            <tui-avatar
-                id="auto-color"
-                [autoColor]="true"
-            ></tui-avatar>
-        `,
-    })
-    class TestComponent {}
-
-    let fixture: ComponentFixture<TestComponent>;
-    let loader: HarnessLoader;
-    let pageObject: TuiPageObject<TestComponent>;
-    const testContext = {
-        get prefix() {
-            return 'tui-avatar__';
-        },
-    };
-
-    function getAvatar(): HTMLElement {
-        return pageObject.getByAutomationId(`${testContext.prefix}component`)!
-            .nativeElement;
-    }
-
-    beforeEach(async () => {
-        TestBed.configureTestingModule({
-            imports: [TuiAvatarModule],
-            declarations: [TestComponent],
-        });
-        await TestBed.compileComponents();
-        fixture = TestBed.createComponent(TestComponent);
-        loader = TestbedHarnessEnvironment.loader(fixture);
-    });
-
-    describe('computedText', () => {
-        it('if there is an avatar, the text value is empty', async () => {
-            const avatar = await loader.getHarness(TuiAvatarHarness);
-
-            expect(await avatar.text()).toBe('');
-        });
-
-        it('if there is no avatar, the text value is taken from the first letters of the words in text', async () => {
-            const avatar = await loader.getHarness(
-                TuiAvatarHarness.with({selector: '#null-url'}),
-            );
-
-            expect(await avatar.text()).toBe('JC');
-        });
-
-        it('if the avatar is absent, and there is one word in text, its first letter is taken', async () => {
-            const avatar = await loader.getHarness(
-                TuiAvatarHarness.with({selector: '#null-url-with-text'}),
-            );
-
-            expect(await avatar.text()).toBe('J');
-        });
-
-        it('for xs sizes only one letter is taken', async () => {
-            const avatar = await loader.getHarness(
-                TuiAvatarHarness.with({selector: '#null-url-xs'}),
-            );
-
-            expect(await avatar.text()).toBe('J');
-        });
-    });
-
-    // TODO: Jest doesn't support intersection observe
-    xdescribe('Avatar color', () => {
-        it('if there is an avatarUrl the color is rgba(0, 0, 0, 0)', () => {
-            expect(getComputedStyle(getAvatar()).backgroundColor).toBe(
-                'rgba(0, 0, 0, 0)',
-            );
-        });
-
-        it('when autoColor is on, the color will be - rgb(160, 170, 228)', () => {
-            expect(getComputedStyle(getAvatar()).backgroundColor).toBe(
-                'rgb(160, 170, 228)',
-            );
-        });
-    });
-});
diff --git a/projects/kit/components/index.ts b/projects/kit/components/index.ts
index fa89cfd4513fa..3fbe7a999b1a7 100644
--- a/projects/kit/components/index.ts
+++ b/projects/kit/components/index.ts
@@ -2,6 +2,8 @@ export * from '@taiga-ui/kit/components/accordion';
 export * from '@taiga-ui/kit/components/action';
 export * from '@taiga-ui/kit/components/arrow';
 export * from '@taiga-ui/kit/components/avatar';
+export * from '@taiga-ui/kit/components/avatar-labeled';
+export * from '@taiga-ui/kit/components/avatar-stack';
 export * from '@taiga-ui/kit/components/badge';
 export * from '@taiga-ui/kit/components/badged-content';
 export * from '@taiga-ui/kit/components/breadcrumbs';