diff --git a/projects/demo/src/modules/experimental/badge/badge.module.ts b/projects/demo/src/modules/experimental/badge/badge.module.ts
index 1b64d622f665..a5fd1e1f898e 100644
--- a/projects/demo/src/modules/experimental/badge/badge.module.ts
+++ b/projects/demo/src/modules/experimental/badge/badge.module.ts
@@ -7,10 +7,9 @@ import {
     TuiLabelModule,
     TuiModeModule,
     TuiNotificationModule,
-    TuiSvgModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiBadgeModule, TuiFadeModule} from '@taiga-ui/experimental';
+import {TuiBadgeModule, TuiFadeModule, TuiIconModule} from '@taiga-ui/experimental';
 import {TuiRadioListModule} from '@taiga-ui/kit';
 
 import {ExampleTuiBadgeComponent} from './badge.component';
@@ -26,7 +25,7 @@ import {TuiBadgeExample6} from './examples/6';
         TuiBadgeModule,
         TuiModeModule,
         TuiRepeatTimesModule,
-        TuiSvgModule,
+        TuiIconModule,
         TuiRadioListModule,
         FormsModule,
         CommonModule,
diff --git a/projects/demo/src/modules/experimental/badge/badge.template.html b/projects/demo/src/modules/experimental/badge/badge.template.html
index f4a6f93ea6d4..ebecb8c9cf65 100644
--- a/projects/demo/src/modules/experimental/badge/badge.template.html
+++ b/projects/demo/src/modules/experimental/badge/badge.template.html
@@ -70,7 +70,7 @@
                     [dot]="dot"
                     [size]="size"
                 >
-                    <tui-svg src="tuiIconCheck"></tui-svg>
+                    <tui-icon icon="tuiIconCheck"></tui-icon>
                     <div tuiFade>Taiga UI</div>
                 </tui-badge>
 
@@ -83,17 +83,15 @@
                     Taiga UI
                 </tui-badge>
 
-                <tui-badge
+                <img
                     *ngIf="contentType === 'image'"
+                    alt="market"
+                    src="assets/images/avatar.jpg"
+                    tuiBadge
                     [appearance]="appearance"
                     [dot]="dot"
                     [size]="size"
-                >
-                    <img
-                        alt="market"
-                        src="assets/images/avatar.jpg"
-                    />
-                </tui-badge>
+                />
             </p>
         </tui-doc-demo>
         <label
diff --git a/projects/demo/src/modules/experimental/badge/examples/3/index.html b/projects/demo/src/modules/experimental/badge/examples/3/index.html
index bed90131c137..4ba2c7c64892 100644
--- a/projects/demo/src/modules/experimental/badge/examples/3/index.html
+++ b/projects/demo/src/modules/experimental/badge/examples/3/index.html
@@ -4,7 +4,7 @@ <h4 class="tui-space_vertical-1">Value with icon</h4>
         appearance="primary"
         size="xl"
     >
-        <tui-svg src="tuiIconBox"></tui-svg>
+        <tui-icon icon="tuiIconBox"></tui-icon>
         x-large
     </tui-badge>
 
@@ -13,7 +13,7 @@ <h4 class="tui-space_vertical-1">Value with icon</h4>
         size="l"
         class="tui-space_left-1"
     >
-        <tui-svg src="tuiIconBox"></tui-svg>
+        <tui-icon icon="tuiIconBox"></tui-icon>
         large
     </tui-badge>
 
@@ -22,7 +22,7 @@ <h4 class="tui-space_vertical-1">Value with icon</h4>
         size="m"
         class="tui-space_left-1"
     >
-        <tui-svg src="tuiIconBox"></tui-svg>
+        <tui-icon icon="tuiIconBox"></tui-icon>
         medium
     </tui-badge>
 
@@ -31,81 +31,75 @@ <h4 class="tui-space_vertical-1">Value with icon</h4>
         size="s"
         class="tui-space_left-1"
     >
-        <tui-svg src="tuiIconBox"></tui-svg>
+        <tui-icon icon="tuiIconBox"></tui-icon>
         small
     </tui-badge>
 </div>
 
 <div>
     <h4 class="tui-space_top-3 tui-space_bottom-1">Icon only</h4>
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconBox"
         size="xl"
-    >
-        <tui-svg src="tuiIconBox"></tui-svg>
-    </tui-badge>
+        tuiBadge
+    ></tui-icon>
 
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconBox"
         size="l"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <tui-svg src="tuiIconBox"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
 
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconBox"
         size="m"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <tui-svg src="tuiIconBox"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
 
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconBox"
         size="s"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <tui-svg src="tuiIconBox"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
 </div>
 
 <div>
     <h4 class="tui-space_top-3 tui-space_bottom-1">Image</h4>
-    <tui-badge size="xl">
-        <img
-            alt="market"
-            src="assets/images/avatar.jpg"
-        />
-    </tui-badge>
+    <img
+        alt="market"
+        size="xl"
+        src="assets/images/avatar.jpg"
+        tuiBadge
+    />
 
-    <tui-badge
+    <img
+        alt="market"
         size="l"
+        src="assets/images/avatar.jpg"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <img
-            alt="market"
-            src="assets/images/avatar.jpg"
-        />
-    </tui-badge>
+    />
 
-    <tui-badge
+    <img
+        alt="market"
         size="m"
+        src="assets/images/avatar.jpg"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <img
-            alt="market"
-            src="assets/images/avatar.jpg"
-        />
-    </tui-badge>
+    />
 
-    <tui-badge
+    <img
+        alt="market"
         size="s"
+        src="assets/images/avatar.jpg"
+        tuiBadge
         class="tui-space_left-1"
-    >
-        <img
-            alt="market"
-            src="assets/images/avatar.jpg"
-        />
-    </tui-badge>
+    />
 </div>
diff --git a/projects/demo/src/modules/experimental/badge/examples/4/index.html b/projects/demo/src/modules/experimental/badge/examples/4/index.html
index d17049e70b36..c51e347c0b52 100644
--- a/projects/demo/src/modules/experimental/badge/examples/4/index.html
+++ b/projects/demo/src/modules/experimental/badge/examples/4/index.html
@@ -11,6 +11,6 @@
     size="l"
     class="badge tui-space_top-3"
 >
-    <tui-svg src="tuiIconBox"></tui-svg>
+    <tui-icon icon="tuiIconBox"></tui-icon>
     <div class="t-ellipsis">Very long value in badge</div>
 </tui-badge>
diff --git a/projects/demo/src/modules/experimental/badge/examples/5/index.html b/projects/demo/src/modules/experimental/badge/examples/5/index.html
index 98ab581785a4..eeec213ce0b9 100644
--- a/projects/demo/src/modules/experimental/badge/examples/5/index.html
+++ b/projects/demo/src/modules/experimental/badge/examples/5/index.html
@@ -3,7 +3,7 @@
     size="xl"
     class="custom-1"
 >
-    <tui-svg src="tuiIconLock"></tui-svg>
+    <tui-icon icon="tuiIconLock"></tui-icon>
     10 000 000 $
 </tui-badge>
 
diff --git a/projects/demo/src/modules/experimental/badged-content/badged-content.module.ts b/projects/demo/src/modules/experimental/badged-content/badged-content.module.ts
index da1762722f72..a75f86a1cb6f 100644
--- a/projects/demo/src/modules/experimental/badged-content/badged-content.module.ts
+++ b/projects/demo/src/modules/experimental/badged-content/badged-content.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 {TuiPlatformModule} from '@taiga-ui/cdk';
-import {TuiNotificationModule, TuiSvgModule} from '@taiga-ui/core';
+import {TuiNotificationModule} from '@taiga-ui/core';
 import {
     TuiAvatarModule,
     TuiBadgedContentModule,
@@ -11,6 +11,7 @@ import {
     TuiBadgeNotificationModule,
     TuiButtonModule,
     TuiFallbackSrcModule,
+    TuiIconModule,
 } from '@taiga-ui/experimental';
 import {TuiInputModule} from '@taiga-ui/kit';
 
@@ -23,7 +24,7 @@ import {TuiBadgedContentExample3} from './examples/3';
     imports: [
         CommonModule,
         TuiBadgeNotificationModule,
-        TuiSvgModule,
+        TuiIconModule,
         TuiBadgeModule,
         TuiBadgedContentModule,
         TuiAvatarModule,
diff --git a/projects/demo/src/modules/experimental/badged-content/examples/1/index.html b/projects/demo/src/modules/experimental/badged-content/examples/1/index.html
index e77fff4ec5e4..b927bd9aa341 100644
--- a/projects/demo/src/modules/experimental/badged-content/examples/1/index.html
+++ b/projects/demo/src/modules/experimental/badged-content/examples/1/index.html
@@ -27,13 +27,13 @@
 </tui-badged-content>
 
 <tui-badged-content>
-    <tui-badge
+    <tui-icon
         appearance="primary"
+        icon="tuiIconStar"
         size="l"
+        tuiBadge
         tuiSlot="top"
-    >
-        <tui-svg src="tuiIconStar"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
     <tui-avatar
         size="l"
         src="tuiIconUserLarge"
@@ -53,11 +53,11 @@
         src="tuiIconUserLarge"
         [round]="false"
     ></tui-avatar>
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconStar"
         size="l"
+        tuiBadge
         tuiSlot="bottom"
-    >
-        <tui-svg src="tuiIconStar"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
 </tui-badged-content>
diff --git a/projects/demo/src/modules/experimental/badged-content/examples/2/index.html b/projects/demo/src/modules/experimental/badged-content/examples/2/index.html
index f6e8a249648c..34bf0d871cc0 100644
--- a/projects/demo/src/modules/experimental/badged-content/examples/2/index.html
+++ b/projects/demo/src/modules/experimental/badged-content/examples/2/index.html
@@ -13,13 +13,13 @@
 </tui-badged-content>
 
 <tui-badged-content [style.--tui-radius.%]="50">
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconStar"
         size="m"
+        tuiBadge
         tuiSlot="bottom"
-    >
-        <tui-svg src="tuiIconStar"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
     <tui-avatar
         size="m"
         src="tuiIconUserLarge"
diff --git a/projects/demo/src/modules/experimental/badged-content/examples/3/index.html b/projects/demo/src/modules/experimental/badged-content/examples/3/index.html
index 2567f54d2439..371219a52f19 100644
--- a/projects/demo/src/modules/experimental/badged-content/examples/3/index.html
+++ b/projects/demo/src/modules/experimental/badged-content/examples/3/index.html
@@ -1,6 +1,5 @@
 <tui-badged-content>
     <tui-badge-notification
-        appearance="success"
         size="xs"
         tuiSlot="top"
     ></tui-badge-notification>
@@ -8,12 +7,12 @@
 </tui-badged-content>
 
 <tui-badged-content>
-    <tui-badge
+    <tui-icon
         appearance="accent"
+        icon="tuiIconCheck"
         size="s"
+        tuiBadge
         tuiSlot="bottom"
-    >
-        <tui-svg src="tuiIconCheckCircleLarge"></tui-svg>
-    </tui-badge>
+    ></tui-icon>
     <button tuiButton>Button</button>
 </tui-badged-content>
diff --git a/projects/experimental/components/avatar/avatar.component.ts b/projects/experimental/components/avatar/avatar.component.ts
index 3a212da9abd2..b46823c4d8da 100644
--- a/projects/experimental/components/avatar/avatar.component.ts
+++ b/projects/experimental/components/avatar/avatar.component.ts
@@ -1,6 +1,7 @@
 import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
 import {SafeResourceUrl} from '@angular/platform-browser';
-import {TUI_PLATFORM, tuiIsString, TuiPlatform} from '@taiga-ui/cdk';
+import {tuiIsString, TuiStringHandler} from '@taiga-ui/cdk';
+import {TUI_ICON_RESOLVER} from '@taiga-ui/experimental/tokens';
 
 import {TUI_AVATAR_OPTIONS, TuiAvatarOptions} from './avatar.options';
 
@@ -13,9 +14,9 @@ import {TUI_AVATAR_OPTIONS, TuiAvatarOptions} from './avatar.options';
         tuiAppearance: '',
         '[attr.data-appearance]': 'appearance',
         '[attr.data-size]': 'size',
-        '[attr.data-platform]': 'platform',
+        '[attr.data-type]': 'type',
+        '[style.--t-mask]': '"url(" + resolver(src) + ")"',
         '[class._round]': 'round',
-        '[class._img]': 'type === "img"',
     },
 })
 export class TuiAvatarComponent {
@@ -33,7 +34,7 @@ export class TuiAvatarComponent {
 
     constructor(
         @Inject(TUI_AVATAR_OPTIONS) private readonly options: TuiAvatarOptions,
-        @Inject(TUI_PLATFORM) readonly platform: TuiPlatform,
+        @Inject(TUI_ICON_RESOLVER) readonly resolver: TuiStringHandler<string>,
     ) {}
 
     get value(): SafeResourceUrl | string {
diff --git a/projects/experimental/components/avatar/avatar.module.ts b/projects/experimental/components/avatar/avatar.module.ts
index 70e8a835cff1..34bd1777dced 100644
--- a/projects/experimental/components/avatar/avatar.module.ts
+++ b/projects/experimental/components/avatar/avatar.module.ts
@@ -1,12 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {TuiSvgModule} from '@taiga-ui/core';
+import {TuiIconModule} from '@taiga-ui/experimental/components/icon';
 import {TuiLazyLoadingModule} from '@taiga-ui/kit';
 
 import {TuiAvatarComponent} from './avatar.component';
 
 @NgModule({
-    imports: [CommonModule, TuiSvgModule, TuiLazyLoadingModule],
+    imports: [CommonModule, TuiIconModule, TuiLazyLoadingModule],
     declarations: [TuiAvatarComponent],
     exports: [TuiAvatarComponent],
 })
diff --git a/projects/experimental/components/avatar/avatar.style.less b/projects/experimental/components/avatar/avatar.style.less
index 49f582810f23..04ddadb26ecb 100644
--- a/projects/experimental/components/avatar/avatar.style.less
+++ b/projects/experimental/components/avatar/avatar.style.less
@@ -16,15 +16,23 @@
     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;
 
-        .t-content {
+        &[data-type='content'] {
             font: var(--tui-font-text-m);
             font-size: 0.5625rem;
         }
@@ -36,7 +44,7 @@
         font: var(--tui-font-text-s);
         font-weight: bold;
 
-        .t-content {
+        &[data-type='content'] {
             font: var(--tui-font-text-xs);
             font-weight: bold;
         }
@@ -48,7 +56,7 @@
         font: var(--tui-font-text-l);
         font-weight: bold;
 
-        .t-content {
+        &[data-type='content'] {
             font: var(--tui-font-text-m);
             font-weight: bold;
         }
@@ -59,7 +67,7 @@
         --t-radius: 0.75rem;
         font: var(--tui-font-heading-5);
 
-        .t-content {
+        &[data-type='content'] {
             font: var(--tui-font-text-l);
             font-weight: bold;
         }
@@ -70,7 +78,7 @@
         --t-radius: 0.75rem;
         font: var(--tui-font-heading-3);
 
-        .t-content {
+        &[data-type='content'] {
             font: var(--tui-font-heading-4);
         }
     }
@@ -80,7 +88,7 @@
         --t-radius: 1rem;
         font: var(--tui-font-heading-3);
 
-        .t-content {
+        &[data-type='content'] {
             font: var(--tui-font-heading-3);
         }
     }
@@ -90,17 +98,21 @@
         --t-radius: 1.25rem;
         font: var(--tui-font-heading-2);
 
-        .t-content {
+        &[data-type='content'] {
             font: var(--tui-font-heading-3);
         }
     }
 
-    &._round {
-        --t-radius: calc(var(--t-size) / 2);
+    &[data-type='img'] {
+        background: transparent;
     }
 
-    &._img {
-        background: transparent;
+    &[data-type='icon']:before {
+        content: '';
+    }
+
+    &._round {
+        --t-radius: calc(var(--t-size) / 2);
     }
 
     ::ng-deep img,
@@ -110,14 +122,3 @@
         object-fit: cover;
     }
 }
-
-.t-icon {
-    width: 60%;
-    height: 60%;
-}
-
-.t-content {
-    max-width: 100%;
-    padding: 0.25rem;
-    box-sizing: border-box;
-}
diff --git a/projects/experimental/components/avatar/avatar.template.html b/projects/experimental/components/avatar/avatar.template.html
index d861a691c7d7..e706a7e34689 100644
--- a/projects/experimental/components/avatar/avatar.template.html
+++ b/projects/experimental/components/avatar/avatar.template.html
@@ -1,25 +1,12 @@
 <ng-container [ngSwitch]="type">
-    <tui-svg
-        *ngSwitchCase="'icon'"
-        class="t-icon"
-        [src]="value"
-    ></tui-svg>
-    <span
-        *ngSwitchCase="'text'"
-        class="t-text"
-    >
-        {{ value }}
-    </span>
     <img
         *ngSwitchCase="'img'"
         alt=""
         loading="lazy"
         [src]="value"
     />
-    <div
-        *ngSwitchDefault
-        class="t-content"
-    >
+    <ng-container *ngSwitchCase="'text'">{{ value }}</ng-container>
+    <ng-container *ngSwitchDefault>
         <ng-content></ng-content>
-    </div>
+    </ng-container>
 </ng-container>
diff --git a/projects/experimental/components/badge/badge.component.ts b/projects/experimental/components/badge/badge.component.ts
index 160a98a80644..df873784c0e7 100644
--- a/projects/experimental/components/badge/badge.component.ts
+++ b/projects/experimental/components/badge/badge.component.ts
@@ -1,38 +1,12 @@
-import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
-import {TUI_PLATFORM, TuiPlatform} from '@taiga-ui/cdk';
-import {MODE_PROVIDER, TUI_MODE, TuiBrightness} from '@taiga-ui/core';
-import {Observable} from 'rxjs';
-
-import {TUI_BADGE_OPTIONS, TuiBadgeOptions} from './badge.options';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
-    selector: 'tui-badge',
-    templateUrl: './badge.template.html',
+    template: '',
     styleUrls: ['./badge.style.less'],
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [MODE_PROVIDER],
     host: {
-        tuiAppearance: '',
-        '[class._dot]': 'dot',
-        '[attr.data-platform]': 'platform',
-        '[attr.data-appearance]': 'appearance',
-        '[attr.data-size]': 'size',
-        '($.data-mode.attr)': 'mode$',
+        class: 'tui-badge',
     },
 })
-export class TuiBadgeComponent {
-    @Input()
-    size = this.options.size;
-
-    @Input()
-    appearance = this.options.appearance;
-
-    @Input()
-    dot = this.options.dot;
-
-    constructor(
-        @Inject(TUI_BADGE_OPTIONS) private readonly options: TuiBadgeOptions,
-        @Inject(TUI_MODE) readonly mode$: Observable<TuiBrightness | null>,
-        @Inject(TUI_PLATFORM) readonly platform: TuiPlatform,
-    ) {}
-}
+export class TuiBadgeComponent {}
diff --git a/projects/experimental/components/badge/badge.directive.ts b/projects/experimental/components/badge/badge.directive.ts
new file mode 100644
index 000000000000..0217eb6ab8a1
--- /dev/null
+++ b/projects/experimental/components/badge/badge.directive.ts
@@ -0,0 +1,34 @@
+import {Directive, Inject, Input} from '@angular/core';
+import {TUI_PLATFORM, TuiDirectiveStylesService, TuiPlatform} from '@taiga-ui/cdk';
+
+import {TuiBadgeComponent} from './badge.component';
+import {TUI_BADGE_OPTIONS, TuiBadgeOptions} from './badge.options';
+
+@Directive({
+    selector: 'tui-badge,[tuiBadge]',
+    host: {
+        tuiAppearance: '',
+        '[class._dot]': 'dot',
+        '[attr.data-platform]': 'platform',
+        '[attr.data-appearance]': 'appearance',
+        '[attr.data-size]': 'size',
+    },
+})
+export class TuiBadgeDirective {
+    @Input()
+    size = this.options.size;
+
+    @Input()
+    appearance = this.options.appearance;
+
+    @Input()
+    dot = this.options.dot;
+
+    constructor(
+        @Inject(TUI_BADGE_OPTIONS) private readonly options: TuiBadgeOptions,
+        @Inject(TUI_PLATFORM) readonly platform: TuiPlatform,
+        @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
+    ) {
+        directiveStyles.addComponent(TuiBadgeComponent);
+    }
+}
diff --git a/projects/experimental/components/badge/badge.module.ts b/projects/experimental/components/badge/badge.module.ts
index 2e2857df50d4..b85e2101fa82 100644
--- a/projects/experimental/components/badge/badge.module.ts
+++ b/projects/experimental/components/badge/badge.module.ts
@@ -1,9 +1,10 @@
 import {NgModule} from '@angular/core';
 
 import {TuiBadgeComponent} from './badge.component';
+import {TuiBadgeDirective} from './badge.directive';
 
 @NgModule({
-    declarations: [TuiBadgeComponent],
-    exports: [TuiBadgeComponent],
+    declarations: [TuiBadgeComponent, TuiBadgeDirective],
+    exports: [TuiBadgeDirective],
 })
 export class TuiBadgeModule {}
diff --git a/projects/experimental/components/badge/badge.style.less b/projects/experimental/components/badge/badge.style.less
index 78450f6d95ef..f40720efdef1 100644
--- a/projects/experimental/components/badge/badge.style.less
+++ b/projects/experimental/components/badge/badge.style.less
@@ -1,11 +1,11 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-:host {
-    --left-content-color: currentColor;
+tui-badge,
+[tuiBadge] {
+    .clearbtn();
     position: relative;
     display: inline-flex;
     align-items: center;
-    justify-content: center;
     box-sizing: border-box;
     background: #959595;
     color: var(--tui-base-01);
@@ -16,25 +16,47 @@
     font: var(--tui-font-text-s);
     flex-shrink: 0;
     max-width: 100%;
+    padding: var(--t-padding);
+    height: var(--t-size);
+    min-width: var(--t-size);
+
+    --t-dot: currentColor;
+    --t-icon-size: 1rem;
+
+    &._dot:before {
+        content: '';
+        display: block;
+        background: var(--t-dot);
+        margin: 0 0.125rem 0 0.25rem;
+        width: 0.25rem;
+        height: 0.25rem;
+        border-radius: 100%;
+    }
+
+    > tui-svg,
+    > tui-icon {
+        width: var(--t-icon-size) !important;
+        height: var(--t-icon-size) !important;
+    }
 
     &[data-appearance='error'] {
-        --left-content-color: var(--tui-error-fill);
+        --t-dot: var(--tui-error-fill);
     }
 
     &[data-appearance='success'] {
-        --left-content-color: var(--tui-success-fill);
+        --t-dot: var(--tui-success-fill);
     }
 
     &[data-appearance='warning'] {
-        --left-content-color: var(--tui-warning-fill);
+        --t-dot: var(--tui-warning-fill);
     }
 
     &[data-appearance='info'] {
-        --left-content-color: var(--tui-info-fill);
+        --t-dot: var(--tui-info-fill);
     }
 
     &[data-appearance='neutral'] {
-        --left-content-color: var(--tui-neutral-fill);
+        --t-dot: var(--tui-neutral-fill);
 
         &[data-platform='ios'],
         &[data-platform='android'] {
@@ -42,67 +64,49 @@
         }
     }
 
-    &:not(._empty-value) {
-        padding: 0 0.25rem;
-
-        &[data-size='xl'] {
-            padding: 0 0.375rem;
-        }
-
-        &[data-size='xl'][data-platform='web'] {
-            padding: 0 0.5rem;
-        }
-
-        &[data-size='s'] {
-            padding: 0 0.125rem;
-        }
-
-        &[data-size='s'][data-platform='web'] {
-            padding: 0 0.25rem;
-        }
-    }
-
     &[data-size='s'] {
-        height: 1.25rem;
-        min-width: 1.25rem;
+        text-indent: 0.125rem;
+
+        --t-padding: 0 0.3125rem 0 0.1875rem;
+        --t-size: 1rem;
+        --t-icon-size: 0.625rem;
 
         &[data-platform='ios'],
         &[data-platform='android'] {
             font: var(--tui-font-text-xs);
             font-weight: bold;
-            height: 1rem;
-            min-width: 1rem;
         }
     }
 
     &[data-size='m'] {
-        height: 1.25rem;
-        min-width: 1.25rem;
+        text-indent: 0.125rem;
+
+        --t-padding: 0 0.375rem 0 0.25rem;
+        --t-size: 1.25rem;
+        --t-icon-size: 0.75rem;
     }
 
     &[data-size='l'] {
-        height: var(--tui-height-xs);
-        min-width: var(--tui-height-xs);
+        text-indent: 0.25rem;
 
-        &[data-platform='ios'],
-        &[data-platform='android'] {
-            height: 1.5rem;
-            min-width: 1.5rem;
-        }
+        --t-padding: 0 0.5rem 0 0.25rem;
+        --t-size: var(--tui-height-xs);
     }
 
     &[data-size='xl'] {
-        height: var(--tui-height-s);
-        min-width: var(--tui-height-s);
+        font: var(--tui-font-text-m);
+        text-indent: 0.25rem;
+
+        --t-padding: 0 0.75rem 0 0.5rem;
+        --t-size: var(--tui-height-s);
 
         &[data-platform='ios'],
         &[data-platform='android'] {
-            height: 1.75rem;
-            min-width: 1.75rem;
-        }
+            font: var(--tui-font-text-s);
+            font-weight: bold;
 
-        &[data-platform='web'] {
-            font: var(--tui-font-text-m);
+            --t-padding: 0 0.625rem 0 0.375rem;
+            --t-size: 1.75rem;
         }
     }
 
@@ -112,131 +116,25 @@
     }
 }
 
-.t-text {
-    white-space: nowrap;
-    padding: 0 0.125rem;
-    overflow: hidden;
-
-    &:empty {
-        display: none;
-    }
-
-    :host[data-size='xl'][data-platform='web'] & {
-        padding: 0 0.375rem;
-    }
-
-    :host[data-size='xl'] & {
-        padding: 0 0.25rem;
-    }
-
-    :host[data-size='l'] & {
-        padding: 0 0.25rem;
-    }
+img[tuiBadge] {
+    padding: 0;
 }
 
-.t-icon {
-    display: none;
-    color: var(--left-content-color);
-
-    &:not(:empty) {
-        display: flex;
-        width: 1rem;
-        height: 1rem;
-        align-items: center;
-        justify-content: center;
+tui-icon[tuiBadge] {
+    mask: none;
+    height: var(--t-size);
+    width: var(--t-size);
 
-        &:before {
-            content: none;
-        }
-
-        :host[data-size='m'] &,
-        :host[data-size='s'][data-platform='web'] & {
-            width: 0.75rem;
-            transform: scale(0.75);
-        }
-
-        :host[data-size='s'] & {
-            width: 0.625rem;
-            transform: scale(0.625);
-        }
-
-        :host[data-size='s'] &:not(._icon-only) {
-            margin-left: 0.0625rem;
-        }
-    }
-
-    &:before {
-        content: '';
-        display: block;
-        background: currentColor;
-        margin: 0 0.125rem 0 0.25rem;
-        width: 0.25rem;
-        height: 0.25rem;
-        border-radius: 100%;
+    &[data-size='s']:after {
+        mask-size: 0.625rem;
     }
 
-    :host._dot & {
-        &:empty {
-            display: block;
-        }
-    }
-
-    :host[data-size='l'] &:before {
-        width: 0.375rem;
-        height: 0.375rem;
+    &[data-size='m']:after {
+        mask-size: 0.75rem;
     }
 
-    :host[data-size='xl'] &:before {
-        width: 0.5rem;
-        height: 0.5rem;
-    }
-}
-
-.t-image {
-    display: none;
-
-    :host::ng-deep & img {
-        width: 100%;
-        height: 100%;
-    }
-
-    &:not(:empty) {
-        display: block;
-        width: 1rem;
-        height: 1rem;
-        margin: 0 -0.5rem;
-
-        & ~ .t-text {
-            margin-left: 0.5rem;
-        }
-
-        & ~ .t-icon {
-            display: none;
-        }
-
-        :host[data-size='xl'] & {
-            height: 1.75rem;
-            width: 1.75rem;
-        }
-
-        :host[data-size='l'] & {
-            height: 1.5rem;
-            width: 1.5rem;
-        }
-
-        :host[data-size='m'] & {
-            height: 1.25rem;
-            width: 1.25rem;
-        }
-
-        :host[data-size='xl'][data-platform='web'] & {
-            width: 2rem;
-            height: 2rem;
-        }
-
-        :host[data-size='s'][data-platform='web'] & {
-            width: 1.25rem;
-            height: 1.25rem;
-        }
+    &[data-size='l']:after,
+    &[data-size='xl']:after {
+        mask-size: 1rem;
     }
 }
diff --git a/projects/experimental/components/badge/badge.template.html b/projects/experimental/components/badge/badge.template.html
deleted file mode 100644
index b8c1a118bd33..000000000000
--- a/projects/experimental/components/badge/badge.template.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="t-image">
-    <ng-content select="img"></ng-content>
-</div>
-<div
-    class="t-icon"
-    [class._icon-only]="!text.innerHTML.trim()"
->
-    <ng-content select="tui-svg"></ng-content>
-</div>
-
-<span
-    #text
-    class="t-text"
->
-    <ng-content></ng-content>
-</span>
diff --git a/projects/experimental/components/badge/index.ts b/projects/experimental/components/badge/index.ts
index fc445984faf6..21658be63df2 100644
--- a/projects/experimental/components/badge/index.ts
+++ b/projects/experimental/components/badge/index.ts
@@ -1,3 +1,4 @@
 export * from './badge.component';
+export * from './badge.directive';
 export * from './badge.module';
 export * from './badge.options';
diff --git a/projects/experimental/directives/sensitive/sensitive.style.less b/projects/experimental/directives/sensitive/sensitive.style.less
index 052e61af6833..c71bd4efe79f 100644
--- a/projects/experimental/directives/sensitive/sensitive.style.less
+++ b/projects/experimental/directives/sensitive/sensitive.style.less
@@ -3,8 +3,8 @@
 .tui-sensitive {
     position: relative;
     display: inline-block;
-    border-radius: 0.25rem;
     line-height: 1em;
+    clip-path: inset(0 round 0.25rem);
 
     &:before {
         .fullsize();