diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index b618ff9d2e7b5..4c091e250b33d 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -189,21 +189,6 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../components/icon'),
         title: 'Icon',
     }),
-    route({
-        path: DemoRoute.IconsLucide,
-        loadComponent: async () => import('../icons/icons'),
-        title: 'Icons',
-    }),
-    route({
-        path: DemoRoute.IconsMaterial,
-        loadComponent: async () => import('../icons/material'),
-        title: 'Icons — Material',
-    }),
-    route({
-        path: DemoRoute.IconsFontawesome,
-        loadComponent: async () => import('../icons/font-awesome'),
-        title: 'Icons — FontAwesome',
-    }),
     route({
         path: DemoRoute.Label,
         title: 'Label',
diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts
index 4614207f9ac80..1f8f3f1d26618 100644
--- a/projects/demo/src/modules/app/demo-routes.ts
+++ b/projects/demo/src/modules/app/demo-routes.ts
@@ -68,9 +68,6 @@ export const DemoRoute = {
     Fade: '/directives/fade',
     Sensitive: '/directives/sensitive',
     Skeleton: '/directives/skeleton',
-    IconsLucide: '/icons/lucide',
-    IconsMaterial: '/icons/material',
-    IconsFontawesome: '/icons/font-awesome',
     InputInline: '/components/input-inline',
     Input: '/components/input',
     InputDate: '/components/input-date',
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 2b0dc33def72a..392e0fedbe927 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -104,26 +104,6 @@ export const pages: TuiDocRoutePages = [
         keywords: 'layout, верстка, palette, markup, цвет, палитра',
         route: DemoRoute.Colors,
     },
-    {
-        section: 'Icons',
-        title: 'Lucide',
-        keywords:
-            'icons, icon, free, pack, lucide, markup, icons, image, картинка, свг, svg, графика',
-        route: DemoRoute.IconsLucide,
-    },
-    {
-        section: 'Icons',
-        title: 'Material',
-        keywords: 'icons, material, design, картинка, свг, svg, графика',
-        route: DemoRoute.IconsMaterial,
-    },
-    {
-        section: 'Icons',
-        title: 'FontAwesome',
-        keywords:
-            'icons, fontawesome, awesome, font, design, картинка, свг, svg, графика',
-        route: DemoRoute.IconsFontawesome,
-    },
     {
         section: 'Foundations',
         title: 'Styles',
diff --git a/projects/demo/src/modules/icons/icons/examples/1/index.html b/projects/demo/src/modules/components/icon/examples/6/index.html
similarity index 100%
rename from projects/demo/src/modules/icons/icons/examples/1/index.html
rename to projects/demo/src/modules/components/icon/examples/6/index.html
diff --git a/projects/demo/src/modules/icons/font-awesome/examples/1/index.less b/projects/demo/src/modules/components/icon/examples/6/index.less
similarity index 100%
rename from projects/demo/src/modules/icons/font-awesome/examples/1/index.less
rename to projects/demo/src/modules/components/icon/examples/6/index.less
diff --git a/projects/demo/src/modules/icons/icons/examples/1/index.ts b/projects/demo/src/modules/components/icon/examples/6/index.ts
similarity index 100%
rename from projects/demo/src/modules/icons/icons/examples/1/index.ts
rename to projects/demo/src/modules/components/icon/examples/6/index.ts
diff --git a/projects/demo/src/modules/icons/material/examples/1/index.html b/projects/demo/src/modules/components/icon/examples/7/index.html
similarity index 100%
rename from projects/demo/src/modules/icons/material/examples/1/index.html
rename to projects/demo/src/modules/components/icon/examples/7/index.html
diff --git a/projects/demo/src/modules/icons/icons/examples/1/index.less b/projects/demo/src/modules/components/icon/examples/7/index.less
similarity index 100%
rename from projects/demo/src/modules/icons/icons/examples/1/index.less
rename to projects/demo/src/modules/components/icon/examples/7/index.less
diff --git a/projects/demo/src/modules/icons/material/examples/1/index.ts b/projects/demo/src/modules/components/icon/examples/7/index.ts
similarity index 100%
rename from projects/demo/src/modules/icons/material/examples/1/index.ts
rename to projects/demo/src/modules/components/icon/examples/7/index.ts
diff --git a/projects/demo/src/modules/icons/font-awesome/examples/1/index.html b/projects/demo/src/modules/components/icon/examples/8/index.html
similarity index 100%
rename from projects/demo/src/modules/icons/font-awesome/examples/1/index.html
rename to projects/demo/src/modules/components/icon/examples/8/index.html
diff --git a/projects/demo/src/modules/icons/material/examples/1/index.less b/projects/demo/src/modules/components/icon/examples/8/index.less
similarity index 100%
rename from projects/demo/src/modules/icons/material/examples/1/index.less
rename to projects/demo/src/modules/components/icon/examples/8/index.less
diff --git a/projects/demo/src/modules/icons/font-awesome/examples/1/index.ts b/projects/demo/src/modules/components/icon/examples/8/index.ts
similarity index 100%
rename from projects/demo/src/modules/icons/font-awesome/examples/1/index.ts
rename to projects/demo/src/modules/components/icon/examples/8/index.ts
diff --git a/projects/demo/src/modules/icons/font-awesome/assets.md b/projects/demo/src/modules/components/icon/examples/import/font-awesome.md
similarity index 100%
rename from projects/demo/src/modules/icons/font-awesome/assets.md
rename to projects/demo/src/modules/components/icon/examples/import/font-awesome.md
diff --git a/projects/demo/src/modules/icons/icons/assets.md b/projects/demo/src/modules/components/icon/examples/import/lucide.md
similarity index 100%
rename from projects/demo/src/modules/icons/icons/assets.md
rename to projects/demo/src/modules/components/icon/examples/import/lucide.md
diff --git a/projects/demo/src/modules/icons/material/assets.md b/projects/demo/src/modules/components/icon/examples/import/material.md
similarity index 100%
rename from projects/demo/src/modules/icons/material/assets.md
rename to projects/demo/src/modules/components/icon/examples/import/material.md
diff --git a/projects/demo/src/modules/components/icon/index.html b/projects/demo/src/modules/components/icon/index.html
index 6a464cfd556da..9332aacdeaf88 100644
--- a/projects/demo/src/modules/components/icon/index.html
+++ b/projects/demo/src/modules/components/icon/index.html
@@ -4,7 +4,20 @@
     type="components"
 >
     <ng-template pageTab>
-        <p>A component to use icons and color them with CSS.</p>
+        <p>
+            A component to use icons and color them with CSS. By default,
+            <code>tui-icon</code>
+            expects the
+            <a
+                href="https://lucide.dev/icons/"
+                target="_blank"
+                tuiLink
+            >
+                Lucide icons.
+            </a>
+            To associate a name with icon you should use that pattern
+            <code>&#64;tui.[name]</code>
+        </p>
 
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
@@ -80,4 +93,146 @@
     </ng-template>
 
     <tui-setup *pageTab />
+
+    <ng-template pageTab="Availible icons">
+        <tui-doc-example
+            id="lucide"
+            heading="Lucide"
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample"
+            [description]="lucideInfo"
+        >
+            <ng-template #lucideInfo>
+                Open source theme for Taiga UI
+                <a
+                    href="https://lucide.dev/"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    Lucide Icons
+                </a>
+                by default. You can browse all the icons from this pack
+                <a
+                    href="https://lucide.dev/icons/"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    here.
+                </a>
+
+                <tui-accordion
+                    class="tui-space_top-5"
+                    [rounded]="true"
+                >
+                    <tui-accordion-item>
+                        Setup
+                        <ng-template tuiAccordionItemContent>
+                            <tui-doc-code code="npm i @taiga-ui/icons" />
+
+                            <tui-doc-code
+                                filename="angular.json"
+                                [code]="lucide"
+                            />
+                        </ng-template>
+                    </tui-accordion-item>
+                </tui-accordion>
+            </ng-template>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="material"
+            heading="Material"
+            [component]="7 | tuiComponent"
+            [content]="7 | tuiExample"
+            [description]="materialInfo"
+        >
+            <ng-template #materialInfo>
+                Taiga UI supports
+                <a
+                    href="https://fonts.google.com/icons?icon.set=Material+Icons"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    Material Icons.
+                </a>
+                You can browse all the icons from this pack and find the one that suits you
+                <a
+                    href="https://marella.me/material-design-icons/demo/font/"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    here.
+                </a>
+                You can replace icons used inside components as well through DI options, see example below.
+
+                <tui-accordion
+                    class="tui-space_top-5"
+                    [rounded]="true"
+                >
+                    <tui-accordion-item>
+                        Setup
+                        <ng-template tuiAccordionItemContent>
+                            <tui-doc-code code="npm i @taiga-ui/icons-material" />
+
+                            <tui-doc-code
+                                filename="angular.json"
+                                [code]="material"
+                            />
+                        </ng-template>
+                    </tui-accordion-item>
+                </tui-accordion>
+            </ng-template>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="font-awesome"
+            heading="FontAwesome"
+            [component]="8 | tuiComponent"
+            [content]="8 | tuiExample"
+            [description]="fontAwesomeInfo"
+        >
+            <ng-template #fontAwesomeInfo>
+                Taiga UI supports
+                <a
+                    href="https://fontawesome.com/"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    FontAwesome Icons (free pack).
+                </a>
+                You can browse all the icons from this pack
+                <a
+                    href="https://fontawesome.com/search?m=free&o=r"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    here
+                </a>
+                . You can replace icons used inside components as well through DI options, see example below.
+
+                <tui-accordion
+                    class="tui-space_top-5"
+                    [rounded]="true"
+                >
+                    <tui-accordion-item>
+                        Setup
+                        <ng-template tuiAccordionItemContent>
+                            <tui-doc-code code="npm i @taiga-ui/icons-font-awesome" />
+
+                            <tui-doc-code
+                                filename="angular.json"
+                                [code]="fontAwesome"
+                            />
+                        </ng-template>
+                    </tui-accordion-item>
+                </tui-accordion>
+            </ng-template>
+        </tui-doc-example>
+    </ng-template>
 </tui-doc-page>
diff --git a/projects/demo/src/modules/components/icon/index.ts b/projects/demo/src/modules/components/icon/index.ts
index 9b3e3000561bc..01e387875d957 100644
--- a/projects/demo/src/modules/components/icon/index.ts
+++ b/projects/demo/src/modules/components/icon/index.ts
@@ -3,16 +3,21 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
 import {TUI_USED_ICONS} from '@taiga-ui/cdk';
 import {TuiIcon} from '@taiga-ui/core';
+import {TuiAccordion} from '@taiga-ui/kit';
 import {tuiInputNumberOptionsProvider} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,
-    imports: [TuiDemo, TuiIcon],
+    imports: [TuiAccordion, TuiDemo, TuiIcon],
     templateUrl: './index.html',
     changeDetection,
     providers: [tuiInputNumberOptionsProvider({min: 0})],
 })
 export default class Page {
+    protected readonly lucide = import('./examples/import/lucide.md?raw');
+    protected readonly material = import('./examples/import/material.md?raw');
+    protected readonly fontAwesome = import('./examples/import/font-awesome.md?raw');
+
     protected readonly iconVariants = ['', ...TUI_USED_ICONS];
     protected readonly colorVariants = ['', 'var(--tui-text-primary)', 'red', '#3aa981'];
 
diff --git a/projects/demo/src/modules/icons/font-awesome/index.html b/projects/demo/src/modules/icons/font-awesome/index.html
deleted file mode 100644
index 90ca1df3223d4..0000000000000
--- a/projects/demo/src/modules/icons/font-awesome/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<tui-doc-page
-    header="FontAwesome"
-    package="icons-fontawesome"
-    type="icons"
->
-    <ng-template pageTab>
-        Taiga UI supports
-        <a
-            href="https://fontawesome.com/"
-            rel="noreferrer"
-            target="_blank"
-            tuiLink
-        >
-            FontAwesome Icons (free pack).
-        </a>
-        You can browse all the icons from this pack
-        <a
-            href="https://fontawesome.com/search?m=free&o=r"
-            rel="noreferrer"
-            target="_blank"
-            tuiLink
-        >
-            here
-        </a>
-        . You can replace icons used inside components as well through DI options, see example below.
-
-        <tui-doc-example
-            id="basic"
-            heading="Basic"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample"
-        />
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <tui-doc-code code="npm i @taiga-ui/icons-fontawesome" />
-
-        <tui-doc-code
-            filename="angular.json"
-            [code]="assets"
-        />
-    </ng-template>
-</tui-doc-page>
diff --git a/projects/demo/src/modules/icons/font-awesome/index.ts b/projects/demo/src/modules/icons/font-awesome/index.ts
deleted file mode 100644
index 55d6b6125285a..0000000000000
--- a/projects/demo/src/modules/icons/font-awesome/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDemo} from '@demo/utils';
-
-@Component({
-    standalone: true,
-    imports: [TuiDemo],
-    templateUrl: './index.html',
-    changeDetection,
-})
-export default class Page {
-    protected readonly assets = import('./assets.md?raw');
-}
diff --git a/projects/demo/src/modules/icons/icons/index.html b/projects/demo/src/modules/icons/icons/index.html
deleted file mode 100644
index c9e7cc972fc93..0000000000000
--- a/projects/demo/src/modules/icons/icons/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<tui-doc-page
-    header="Icons"
-    package="icons"
-    type="icons"
->
-    <ng-template pageTab="Overview">
-        Open source theme for Taiga UI
-        <a
-            href="https://lucide.dev/"
-            rel="noreferrer"
-            target="_blank"
-            tuiLink
-        >
-            Lucide Icons
-        </a>
-        by default. You can browse all the icons from this pack
-        <a
-            href="https://lucide.dev/icons/"
-            rel="noreferrer"
-            target="_blank"
-            tuiLink
-        >
-            here
-        </a>
-
-        <tui-doc-example
-            id="basic"
-            heading="Basic"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample"
-        />
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <tui-doc-code code="npm i @taiga-ui/icons" />
-
-        <tui-doc-code
-            filename="angular.json"
-            [code]="assets"
-        />
-    </ng-template>
-</tui-doc-page>
diff --git a/projects/demo/src/modules/icons/icons/index.ts b/projects/demo/src/modules/icons/icons/index.ts
deleted file mode 100644
index 55d6b6125285a..0000000000000
--- a/projects/demo/src/modules/icons/icons/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDemo} from '@demo/utils';
-
-@Component({
-    standalone: true,
-    imports: [TuiDemo],
-    templateUrl: './index.html',
-    changeDetection,
-})
-export default class Page {
-    protected readonly assets = import('./assets.md?raw');
-}
diff --git a/projects/demo/src/modules/icons/material/index.html b/projects/demo/src/modules/icons/material/index.html
deleted file mode 100644
index 259fa6be87096..0000000000000
--- a/projects/demo/src/modules/icons/material/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<tui-doc-page
-    header="Material"
-    package="icons-material"
-    type="icons"
->
-    <ng-template pageTab>
-        Taiga UI supports
-        <a
-            href="https://fonts.google.com/icons?icon.set=Material+Icons"
-            rel="noreferrer"
-            target="_blank"
-            tuiLink
-        >
-            Material Icons.
-        </a>
-        You can browse all the icons from this pack and find the one that suits you
-        <a
-            href="https://marella.me/material-design-icons/demo/font/"
-            rel="noreferrer"
-            target="_blank"
-            tuiLink
-        >
-            here.
-        </a>
-        You can replace icons used inside components as well through DI options, see example below.
-
-        <tui-doc-example
-            id="basic"
-            heading="Basic"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample"
-        />
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <tui-doc-code code="npm i @taiga-ui/icons-material" />
-
-        <tui-doc-code
-            filename="angular.json"
-            [code]="assets"
-        />
-    </ng-template>
-</tui-doc-page>
diff --git a/projects/demo/src/modules/icons/material/index.ts b/projects/demo/src/modules/icons/material/index.ts
deleted file mode 100644
index 55d6b6125285a..0000000000000
--- a/projects/demo/src/modules/icons/material/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDemo} from '@demo/utils';
-
-@Component({
-    standalone: true,
-    imports: [TuiDemo],
-    templateUrl: './index.html',
-    changeDetection,
-})
-export default class Page {
-    protected readonly assets = import('./assets.md?raw');
-}