diff --git a/live-editing/configs/IconConfigGenerator.ts b/live-editing/configs/IconConfigGenerator.ts
index 8666988c77..73cd20dec9 100644
--- a/live-editing/configs/IconConfigGenerator.ts
+++ b/live-editing/configs/IconConfigGenerator.ts
@@ -15,40 +15,41 @@ export class IconConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // icon sample 1
+        // icon overview
         configs.push(new Config({
-            component: 'IconSample1Component',
+            component: 'IconOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/icon/"
         }));
 
-        // SVG icon sample
+        // icon size
         configs.push(new Config({
-            component: 'SvgIconSampleComponent',
+            component: 'IconSizeComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/icon/"
         }));
 
-        // Icon Styling Sample
+        // icon styling
         configs.push(new Config({
-            component: 'IconStylingSampleComponent',
-            additionalFiles: ["/src/app/data-display/icon/icon-styling-sample/layout.scss"],
+            component: 'IconStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/icon/"
         }));
 
-        // Icon Service Sample
+        // icon tailwind styling
         configs.push(new Config({
-            component: 'IconServiceSampleComponent',
+            component: 'IconTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
+            additionalFiles: [".postcssrc.json"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/icon/"
         }));
 
-        // Material Symbols Sample
+        // Icon Service Sample
         configs.push(new Config({
-            component: 'MaterialSymbolsComponent',
+            component: 'IconServiceSampleComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-display/material-symbols/"
+            shortenComponentPathBy: "/data-display/icon/"
         }));
 
         // Material icons extended sample
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
index 515f44a66b..7c98dbdb23 100644
--- a/src/app/data-display/data-display-routes-data.ts
+++ b/src/app/data-display/data-display-routes-data.ts
@@ -28,12 +28,11 @@ export const dataDisplayRoutesData = {
     // tslint:disable-next-line:max-line-length
     "circular-indeterminate-progressbar": { displayName: "Circular Indeterminate Progressbar", parentName: "Circular Progressbar" },
     "circular-styling-sample": { displayName: "Circular Styling Sample", parentName: "Circular Progressbar" },
-    "icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" },
+    "icon-overview": { displayName: "Icon Overview", parentName: "Icon" },
+    "icon-size": { displayName: "Icon Size", parentName: "Icon" },
     "icon-service": { displayName: "Icon Service", parentName: "Icon" },
     "icon-styling": { displayName: "Icon Styling", parentName: "Icon" },
     "icon-tailwind-styling": { displayName: "Icon Tailwind Styling", parentName: "Icon" },
-    "svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" },
-    "material-symbols": { displayName: "Material Symbols", parentName: "Icon" },
     "material-icons-extended": { displayName: "Material Icons Extended", parentName: "Icon" },
     "igx-for-sample-1": { displayName: "List with igxFor directive", parentName: "For" },
     "igx-for-sample-2": { displayName: "IgxFor Horizontal virtualization", parentName: "For" },
diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts
index 41d01b7717..a0ae6a77d3 100644
--- a/src/app/data-display/data-display.routes.ts
+++ b/src/app/data-display/data-display.routes.ts
@@ -25,15 +25,11 @@ import { CircularDynamicSampleComponent } from './circular-progressbar/circular-
 import { CircularIndeterminateProgressbarComponent } from './circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component';
 import { CircularProgressbarComponent } from './circular-progressbar/circular-progressbar.component';
 import { CircularStylingSampleComponent } from './circular-progressbar/circular-styling-sample/circular-styling-sample.component';
-import { IconSample1Component } from './icon/icon-sample-1/icon-sample-1.component';
-import { IconSample2Component } from './icon/icon-sample-2/icon-sample-2.component';
-import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.component';
-import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component';
-import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component';
-import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component';
-import { IconTailwindStylingSampleComponent } from './icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component';
+import { IconOverviewComponent } from './icon/icon-overview/icon-overview.component';
+import { IconSizeComponent } from './icon/icon-size/icon-size.component';
+import { IconStylingComponent } from './icon/icon-styling/icon-styling.component';
+import { IconTailwindStylingComponent } from './icon/icon-tailwind-styling/icon-tailwind-styling.component';
 import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component';
-import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component';
 import { IgxForComponent } from './igxFor/igxFor.component';
 import { IgxForHorizontalComponent } from './igxFor/igxFor-horizontal-sample/igxFor-horizontal.component';
 import { VirtualScrollOverviewComponent } from './virtual-scroll/virtual-scroll-overview/virtual-scroll-overview.component';
@@ -60,7 +56,6 @@ import { TextHighlightSample2Component } from './text-highlight/text-highlight-s
 import { TextHighlightStyleComponent } from './text-highlight/text-highlight-style/text-highlight-style.component';
 import {
     MaterialIconsExtendedComponent} from './icon/material-icons-extended/material-icons-extended.component';
-import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbols.component';
 import { QrCodeOverviewComponent } from './qr-code/qr-code-overview/qr-code-overview.component';
 import { QrCodeStylingComponent } from './qr-code/qr-code-styling/qr-code-styling.component';
 import { QrCodeTailwindStylingComponent } from './qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component';
@@ -194,34 +189,14 @@ export const DataDisplayRoutes: Routes = [
         path: 'circular-progressbar'
     },
     {
-        component: IconSample1Component,
-        data: dataDisplayRoutesData['icon-sample-1'],
-        path: 'icon-sample-1'
+        component: IconOverviewComponent,
+        data: dataDisplayRoutesData['icon-overview'],
+        path: 'icon-overview'
     },
     {
-        component: IconSample2Component,
-        data: dataDisplayRoutesData['icon-sample-2'],
-        path: 'icon-sample-2'
-    },
-    {
-        component: IconSample3Component,
-        data: dataDisplayRoutesData['icon-sample-3'],
-        path: 'icon-sample-3'
-    },
-    {
-        component: IconSample4Component,
-        data: dataDisplayRoutesData['icon-sample-4'],
-        path: 'icon-sample-4'
-    },
-    {
-        component: IconSample5Component,
-        data: dataDisplayRoutesData['icon-sample-5'],
-        path: 'icon-sample-5'
-    },
-    {
-        component: SvgIconSampleComponent,
-        data: dataDisplayRoutesData['svg-icon-sample'],
-        path: 'svg-icon-sample'
+        component: IconSizeComponent,
+        data: dataDisplayRoutesData['icon-size'],
+        path: 'icon-size'
     },
     {
         component: IgxForComponent,
@@ -334,12 +309,12 @@ export const DataDisplayRoutes: Routes = [
         path: 'icon-service'
     },
     {
-        component: IconStylingSampleComponent,
+        component: IconStylingComponent,
         data: dataDisplayRoutesData['icon-styling'],
         path: 'icon-styling'
     },
     {
-        component: IconTailwindStylingSampleComponent,
+        component: IconTailwindStylingComponent,
         data: dataDisplayRoutesData['icon-tailwind-styling'],
         path: 'icon-tailwind-styling'
     },
@@ -353,11 +328,6 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['chip-tailwind-styling'],
         path: 'chip-tailwind-styling'
     },
-    {
-        component: MaterialSymbolsComponent,
-        data: dataDisplayRoutesData['material-symbols'],
-        path: 'material-symbols'
-    },
     {
         component: MaterialIconsExtendedComponent,
         data: dataDisplayRoutesData['material-icons-extended'],
diff --git a/src/app/data-display/icon/icon-overview/icon-overview.component.html b/src/app/data-display/icon/icon-overview/icon-overview.component.html
new file mode 100644
index 0000000000..9377ace28c
--- /dev/null
+++ b/src/app/data-display/icon/icon-overview/icon-overview.component.html
@@ -0,0 +1,10 @@
+<igx-nav-drawer class="menu" [isOpen]="true" [pin]="true" [pinThreshold]="0">
+    <ng-template igxDrawer>
+        @for (item of menuItems; track item.label) {
+            <span igxDrawerItem [active]="item.label === activeItem" (click)="activeItem = item.label">
+                <igx-icon [name]="item.icon"></igx-icon>
+                <span>{{ item.label }}</span>
+            </span>
+        }
+    </ng-template>
+</igx-nav-drawer>
diff --git a/src/app/data-display/icon/icon-overview/icon-overview.component.scss b/src/app/data-display/icon/icon-overview/icon-overview.component.scss
new file mode 100644
index 0000000000..b48df7a53d
--- /dev/null
+++ b/src/app/data-display/icon/icon-overview/icon-overview.component.scss
@@ -0,0 +1,18 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.menu {
+    height: auto;
+}
+
+/* A pinned drawer fills the height of its container. Here it is only as tall
+   as its items. */
+.menu ::ng-deep .igx-nav-drawer__aside {
+    height: auto;
+    min-height: auto;
+}
diff --git a/src/app/data-display/icon/icon-overview/icon-overview.component.ts b/src/app/data-display/icon/icon-overview/icon-overview.component.ts
new file mode 100644
index 0000000000..3ca83b4a87
--- /dev/null
+++ b/src/app/data-display/icon/icon-overview/icon-overview.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer';
+
+interface MenuItem {
+    label: string;
+    icon: string;
+}
+
+@Component({
+    selector: 'app-icon-overview',
+    styleUrls: ['./icon-overview.component.scss'],
+    templateUrl: './icon-overview.component.html',
+    imports: [IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxIconComponent]
+})
+export class IconOverviewComponent {
+    public menuItems: MenuItem[] = [
+        { label: 'Home', icon: 'home' },
+        { label: 'Inbox', icon: 'mail' },
+        { label: 'Reports', icon: 'assignment' },
+        { label: 'Settings', icon: 'settings' },
+        { label: 'Support', icon: 'feedback' }
+    ];
+
+    public activeItem = 'Home';
+}
diff --git a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html b/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html
deleted file mode 100644
index 0eb739c306..0000000000
--- a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="wrapper">
-    <div class="icon-sample">
-        <igx-icon>sentiment_very_satisfied</igx-icon>
-    </div>
-
-    <div class="icon-sample">
-        <igx-icon>home</igx-icon>
-    </div>
-
-    <div class="icon-sample">
-        <igx-icon>airplanemode_active</igx-icon>
-    </div>
-
-    <div class="icon-sample">
-        <igx-icon>favorite</igx-icon>
-    </div>
-
-    <div class="icon-sample">
-        <igx-icon [active]="false">search</igx-icon>
-    </div>
-</div>
diff --git a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss b/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss
deleted file mode 100644
index 6284f642c7..0000000000
--- a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.wrapper {
-    display: flex;
-    flex-flow: row wrap;
-    margin: 16px 0;
-}
-
-.icon-sample {
-    display: flex;
-    flex: 1 0 20%;
-    width: 44px;
-    height: 44px;
-    justify-content: center;
-    align-items: center;
-}
diff --git a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts b/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts
deleted file mode 100644
index 41cdf3d721..0000000000
--- a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-@Component({
-    selector: 'app-icon-sample-1',
-    styleUrls: ['./icon-sample-1.component.scss'],
-    templateUrl: './icon-sample-1.component.html',
-    imports: [IgxIconComponent]
-})
-export class IconSample1Component { }
diff --git a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html b/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html
deleted file mode 100644
index 16f6cc1c38..0000000000
--- a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="wrapper">
-    <div class="icon-sample">
-        <igx-icon>phone_iphone</igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon class="custom-size">phone_iphone</igx-icon>
-    </div>
-</div>
diff --git a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss b/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss
deleted file mode 100644
index a39f68af46..0000000000
--- a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.custom-size {
-    --size: 56px;
-}
-
-.wrapper {
-    display: flex;
-    flex-flow: row wrap;
-    margin: 16px 8px;
-}
-
-.icon-sample {
-    display: flex;
-    flex: 1 0 20%;
-    height: 44px;
-    align-items: center;
-    max-width: 80px;
-}
diff --git a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts b/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts
deleted file mode 100644
index 82694a9f68..0000000000
--- a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-@Component({
-    selector: 'app-icon-sample-2',
-    styleUrls: ['./icon-sample-2.component.scss'],
-    templateUrl: './icon-sample-2.component.html',
-    imports: [IgxIconComponent]
-})
-export class IconSample2Component { }
diff --git a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html b/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html
deleted file mode 100644
index 66a2096959..0000000000
--- a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<igx-icon [style.color]="'#e41c77'">home</igx-icon>
diff --git a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss b/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss
deleted file mode 100644
index bf5c4a2e12..0000000000
--- a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.igx-icon {
-    margin: 8px;
-}
diff --git a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts b/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts
deleted file mode 100644
index 4b663ead5b..0000000000
--- a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-@Component({
-    selector: 'app-icon-sample-3',
-    styleUrls: ['./icon-sample-3.component.scss'],
-    templateUrl: './icon-sample-3.component.html',
-    imports: [IgxIconComponent]
-})
-export class IconSample3Component { }
diff --git a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html b/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html
deleted file mode 100644
index c3d5fa4110..0000000000
--- a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<igx-icon [active]="false">volume_off</igx-icon>
diff --git a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss b/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss
deleted file mode 100644
index bf5c4a2e12..0000000000
--- a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.igx-icon {
-    margin: 8px;
-}
diff --git a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts b/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts
deleted file mode 100644
index ea39a69e79..0000000000
--- a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-@Component({
-    selector: 'app-icon-sample-4',
-    styleUrls: ['./icon-sample-4.component.scss'],
-    templateUrl: './icon-sample-4.component.html',
-    imports: [IgxIconComponent]
-})
-export class IconSample4Component { }
diff --git a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html b/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html
deleted file mode 100644
index 5140923d0f..0000000000
--- a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<igx-icon>bluetooth</igx-icon>
diff --git a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss b/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss
deleted file mode 100644
index bf5c4a2e12..0000000000
--- a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.igx-icon {
-    margin: 8px;
-}
diff --git a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts b/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts
deleted file mode 100644
index 182f6beb00..0000000000
--- a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-@Component({
-    selector: 'app-icon-sample-5',
-    styleUrls: ['./icon-sample-5.component.scss'],
-    templateUrl: './icon-sample-5.component.html',
-    imports: [IgxIconComponent]
-})
-export class IconSample5Component { }
diff --git a/src/app/data-display/icon/icon-size/icon-size.component.html b/src/app/data-display/icon/icon-size/icon-size.component.html
new file mode 100644
index 0000000000..8b39fae7a9
--- /dev/null
+++ b/src/app/data-display/icon/icon-size/icon-size.component.html
@@ -0,0 +1,8 @@
+<div class="icon-sizes">
+    <igx-icon class="size-large" name="notifications"></igx-icon>
+    <span class="size-label">Large</span>
+    <igx-icon class="size-medium" name="notifications"></igx-icon>
+    <span class="size-label">Medium</span>
+    <igx-icon class="size-small" name="notifications"></igx-icon>
+    <span class="size-label">Small</span>
+</div>
diff --git a/src/app/data-display/icon/icon-size/icon-size.component.scss b/src/app/data-display/icon/icon-size/icon-size.component.scss
new file mode 100644
index 0000000000..ee81b47b6e
--- /dev/null
+++ b/src/app/data-display/icon/icon-size/icon-size.component.scss
@@ -0,0 +1,39 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.icon-sizes {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: auto auto;
+    place-items: center;
+    column-gap: 4.25rem;
+    row-gap: 1.0625rem;
+}
+
+.icon-sizes igx-icon {
+    color: var(--ig-gray-800);
+}
+
+.size-large {
+    --ig-size: var(--ig-size-large);
+}
+
+.size-medium {
+    --ig-size: var(--ig-size-medium);
+}
+
+.size-small {
+    --ig-size: var(--ig-size-small);
+}
+
+.size-label {
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", Arial, sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
diff --git a/src/app/data-display/icon/icon-size/icon-size.component.ts b/src/app/data-display/icon/icon-size/icon-size.component.ts
new file mode 100644
index 0000000000..7c9a086efb
--- /dev/null
+++ b/src/app/data-display/icon/icon-size/icon-size.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+@Component({
+    selector: 'app-icon-size',
+    styleUrls: ['./icon-size.component.scss'],
+    templateUrl: './icon-size.component.html',
+    imports: [IgxIconComponent]
+})
+export class IconSizeComponent { }
diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html
deleted file mode 100644
index 417a699ee7..0000000000
--- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="wrapper">
-    <div class="icon-sample">
-        <igx-icon>person</igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon>wifi</igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon>laptop_mac</igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon>pin_drop</igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon [active]="false">cloud</igx-icon>
-    </div>
-</div>
diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss
deleted file mode 100644
index e3ab907c20..0000000000
--- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use "layout.scss";
-@use "igniteui-angular/theming" as *;
-
-$custom-icon-theme: icon-theme(
-  $color: #1481b8,
-  $disabled-color: #494949
-);
-
-:host {
-    @include tokens($custom-icon-theme);
-}
diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts
deleted file mode 100644
index 09050f3abe..0000000000
--- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-@Component({
-    selector: 'app-icon-styling-sample',
-    styleUrls: ['./icon-styling-sample.component.scss'],
-    templateUrl: './icon-styling-sample.component.html',
-    imports: [IgxIconComponent]
-})
-export class IconStylingSampleComponent { }
diff --git a/src/app/data-display/icon/icon-styling-sample/layout.scss b/src/app/data-display/icon/icon-styling-sample/layout.scss
deleted file mode 100644
index 6951373f07..0000000000
--- a/src/app/data-display/icon/icon-styling-sample/layout.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  margin: 16px 0;
-}
-
-.icon-sample {
-  display: flex;
-  flex: 1 0 20%;
-  width: 44px;
-  height: 44px;
-  justify-content: center;
-  align-items: center;
-}
-
-.igx-icon:hover {
-  color: #0a415c;
-}
\ No newline at end of file
diff --git a/src/app/data-display/icon/icon-styling/icon-styling.component.html b/src/app/data-display/icon/icon-styling/icon-styling.component.html
new file mode 100644
index 0000000000..729cceca6d
--- /dev/null
+++ b/src/app/data-display/icon/icon-styling/icon-styling.component.html
@@ -0,0 +1,33 @@
+<div class="icon-styling">
+    <div class="button-row">
+        <button igxButton="contained" type="button" class="download-button">
+            <igx-icon>download</igx-icon>
+            Download
+        </button>
+        <button igxButton="outlined" type="button" class="continue-button">
+            Continue
+            <igx-icon>arrow_forward</igx-icon>
+        </button>
+        <button igxButton="outlined" type="button" class="delete-button">
+            <igx-icon>delete</igx-icon>
+            Delete
+        </button>
+        <button igxButton="fab" type="button" class="add-button" aria-label="Add">
+            <igx-icon>add</igx-icon>
+        </button>
+    </div>
+    <div class="icon-toolbar">
+        @for (action of actions; track action.label) {
+            <button
+                igxIconButton="flat"
+                type="button"
+                [attr.aria-label]="action.label"
+                [igxTooltipTarget]="tooltip"
+                [hasArrow]="true"
+                [positionSettings]="tooltipPosition">
+                <igx-icon>{{ action.icon }}</igx-icon>
+            </button>
+            <span #tooltip="tooltip" igxTooltip class="icon-tooltip">{{ action.label }}</span>
+        }
+    </div>
+</div>
diff --git a/src/app/data-display/icon/icon-styling/icon-styling.component.scss b/src/app/data-display/icon/icon-styling/icon-styling.component.scss
new file mode 100644
index 0000000000..c2bf9fba1b
--- /dev/null
+++ b/src/app/data-display/icon/icon-styling/icon-styling.component.scss
@@ -0,0 +1,128 @@
+@use "sass:meta";
+@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light");
+
+app-icon-styling {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.icon-styling {
+    --ig-font-family: "Aktiv Grotesk", Arial, sans-serif;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2.8125rem;
+}
+
+.button-row {
+    /* The buttons keep the medium size of the design, while styles.scss asks
+       the page for the large one. */
+    --ig-size: var(--ig-size-medium);
+
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.button-row .igx-button {
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: 0.1px;
+    text-transform: none;
+}
+
+.download-button {
+    border-color: #a9b8cc;
+    background: #e5ebf3;
+    color: #344b65;
+    box-shadow: none;
+}
+
+.download-button igx-icon {
+    color: #344b65;
+}
+
+.continue-button {
+    --ig-outlined-button-hover-background: rgb(0 93 204 / 8%);
+    --ig-outlined-button-focus-hover-background: rgb(0 93 204 / 8%);
+    --ig-outlined-button-active-background: rgb(0 93 204 / 16%);
+    --ig-outlined-button-focus-background: rgb(0 93 204 / 16%);
+    --ig-outlined-button-focus-visible-background: rgb(0 93 204 / 16%);
+
+    border-color: #005dcc;
+    color: #005dcc;
+}
+
+.continue-button igx-icon {
+    color: #005dcc;
+}
+
+.delete-button {
+    --ig-outlined-button-hover-background: rgb(223 27 116 / 8%);
+    --ig-outlined-button-focus-hover-background: rgb(223 27 116 / 8%);
+    --ig-outlined-button-active-background: rgb(223 27 116 / 16%);
+    --ig-outlined-button-focus-background: rgb(223 27 116 / 16%);
+    --ig-outlined-button-focus-visible-background: rgb(223 27 116 / 16%);
+
+    border-color: #df1b74;
+    color: #df1b74;
+}
+
+.delete-button igx-icon {
+    color: #df1b74;
+}
+
+.add-button {
+    --ig-size: var(--ig-size-small);
+
+    width: 2.25rem;
+    min-width: 0;
+    height: 2.25rem;
+    min-height: 0;
+    padding: 0;
+    border: 1px solid #0176ff;
+    border-radius: 50%;
+    background: #cce4ff;
+    box-shadow: none;
+}
+
+.add-button igx-icon {
+    color: #005dcc;
+}
+
+.icon-toolbar {
+    display: flex;
+    gap: 1.5rem;
+    padding: 0.5rem;
+    border: 1px solid #e5ebf3;
+    border-radius: 999px;
+    background: #fff;
+}
+
+.icon-toolbar .igx-icon-button {
+    --ig-flat-icon-button-hover-background: #f8f8f8;
+    --ig-flat-icon-button-focus-background: #e0e0e0;
+    --ig-flat-icon-button-focus-hover-background: #f8f8f8;
+    --ig-flat-icon-button-active-background: #e0e0e0;
+
+    width: 1.5rem;
+    min-width: 0;
+    height: 1.5rem;
+    min-height: 0;
+    padding: 0;
+    border-radius: 50%;
+}
+
+.icon-toolbar igx-icon {
+    color: #344b65;
+}
+
+/* The tooltips are moved to the overlay, outside of the toolbar. */
+.icon-tooltip {
+    --ig-tooltip-background: rgb(52 75 101 / 90%);
+    --ig-tooltip-text-color: #fff;
+}
diff --git a/src/app/data-display/icon/icon-styling/icon-styling.component.ts b/src/app/data-display/icon/icon-styling/icon-styling.component.ts
new file mode 100644
index 0000000000..312bdf652e
--- /dev/null
+++ b/src/app/data-display/icon/icon-styling/icon-styling.component.ts
@@ -0,0 +1,27 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { PositionSettings } from 'igniteui-angular/core';
+import { IgxButtonDirective, IgxIconButtonDirective, IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+interface ToolbarAction {
+    icon: string;
+    label: string;
+}
+
+@Component({
+    selector: 'app-icon-styling',
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./icon-styling.component.scss'],
+    templateUrl: './icon-styling.component.html',
+    imports: [IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxTooltipDirective, IgxTooltipTargetDirective]
+})
+export class IconStylingComponent {
+    public actions: ToolbarAction[] = [
+        { icon: 'edit', label: 'Edit' },
+        { icon: 'content_copy', label: 'Copy' },
+        { icon: 'share', label: 'Share' },
+        { icon: 'delete', label: 'Delete' }
+    ];
+
+    public tooltipPosition: PositionSettings = { offset: 25 };
+}
diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
deleted file mode 100644
index 9ee3ab6090..0000000000
--- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<igx-icon class="!light-icon ![--color:#7B9E89] ![--size:48px]">person</igx-icon>
diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts
deleted file mode 100644
index abb7841ea1..0000000000
--- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-@Component({
-    selector: 'app-icon-tailwind-styling-sample',
-    styleUrls: ['./icon-tailwind-styling-sample.component.scss'],
-    templateUrl: './icon-tailwind-styling-sample.component.html',
-    imports: [IgxIconComponent]
-})
-export class IconTailwindStylingSampleComponent { }
diff --git a/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.html b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.html
new file mode 100644
index 0000000000..bcdb4c06d8
--- /dev/null
+++ b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.html
@@ -0,0 +1,40 @@
+<div class="flex flex-col gap-6 rounded-2xl border border-[#d2dbe8] bg-white px-[27px] py-[31px] [--ig-body-1-font-size:0.875rem] [--ig-font-family:'Aktiv_Grotesk',Arial,sans-serif] [--ig-size:var(--ig-size-medium)]">
+    <igx-input-group class="search-field" [class]="fieldClasses + ' ' + focusClasses">
+        <label igxLabel class="!text-xs !leading-4 !uppercase !text-[#344b65]">Search</label>
+        <igx-prefix class="!ps-2">
+            <igx-icon class="!text-[#344b65]">search</igx-icon>
+        </igx-prefix>
+        <input igxInput type="text" placeholder="Find a report..." />
+    </igx-input-group>
+
+    <igx-input-group [class]="fieldClasses + ' ' + focusClasses">
+        <label igxLabel class="!text-xs !leading-4 !uppercase !text-[#344b65]">Password</label>
+        <input igxInput [type]="passwordVisible ? 'text' : 'password'" value="reports-2026" />
+        <igx-suffix class="!p-0">
+            <button
+                igxIconButton="flat"
+                type="button"
+                class="!h-full !w-[39px] !min-w-0 !rounded-none !p-0"
+                [attr.aria-label]="passwordVisible ? 'Hide password' : 'Show password'"
+                (click)="passwordVisible = !passwordVisible">
+                <igx-icon class="!text-[#344b65]">{{ passwordVisible ? 'visibility' : 'visibility_off' }}</igx-icon>
+            </button>
+        </igx-suffix>
+    </igx-input-group>
+
+    <igx-input-group class="email-field" [class]="fieldClasses + ' ' + (emailInvalid ? invalidClasses : focusClasses)">
+        <label igxLabel class="!text-xs !leading-4 !uppercase !text-[#344b65]">E-mail</label>
+        <igx-prefix class="!ps-2">
+            <igx-icon [class]="emailInvalid ? '!text-[#ff134a]' : '!text-[#344b65]'">mail</igx-icon>
+        </igx-prefix>
+        <input igxInput type="email" [value]="email" [attr.aria-invalid]="emailInvalid" (input)="onEmailInput($event)" />
+        @if (emailInvalid) {
+            <igx-suffix>
+                <igx-icon class="!text-[#ff134a]">info</igx-icon>
+            </igx-suffix>
+        }
+        @if (emailInvalid) {
+            <igx-hint class="text-xs leading-4 tracking-[0.4px] text-[#ff134a]">Enter a complete address</igx-hint>
+        }
+    </igx-input-group>
+</div>
diff --git a/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.scss b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.scss
new file mode 100644
index 0000000000..a6e5c39eaf
--- /dev/null
+++ b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.scss
@@ -0,0 +1,22 @@
+@use "sass:meta";
+@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light");
+
+app-icon-tailwind-styling {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+/* The icons sit inside the field, so the input drops the border that would set
+   them apart. The border is on the input's wrapper, which the template can't
+   reach with a class. */
+.search-field .igx-input-group__bundle-main,
+.email-field .igx-input-group__bundle-main {
+    border-inline-start-width: 0;
+}
+
+.email-field.igx-input-group--suffixed .igx-input-group__bundle-main {
+    border-inline-end-width: 0;
+}
diff --git a/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.ts b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.ts
new file mode 100644
index 0000000000..9d20bc1ccb
--- /dev/null
+++ b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.ts
@@ -0,0 +1,39 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
+
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+@Component({
+    selector: 'app-icon-tailwind-styling',
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./icon-tailwind-styling.component.scss'],
+    templateUrl: './icon-tailwind-styling.component.html',
+    imports: [
+        IgxInputGroupComponent,
+        IgxInputDirective,
+        IgxLabelDirective,
+        IgxPrefixDirective,
+        IgxSuffixDirective,
+        IgxHintDirective,
+        IgxIconComponent,
+        IgxIconButtonDirective
+    ]
+})
+export class IconTailwindStylingComponent {
+    public fieldClasses = 'w-[260px] [--ig-input-group-input-prefix-background:transparent] [--ig-input-group-input-prefix-background--filled:transparent] [--ig-input-group-input-prefix-background--focused:transparent] [--ig-input-group-input-suffix-background:transparent] [--ig-input-group-input-suffix-background--filled:transparent] [--ig-input-group-input-suffix-background--focused:transparent] [--ig-input-group-placeholder-color:#344b65] [--ig-input-group-hover-placeholder-color:#344b65] [--ig-input-group-focused-secondary-color:transparent]';
+    public focusClasses = 'focus-within:[--ig-input-group-border-color:var(--ig-primary-500)] focus-within:[--ig-input-group-focused-border-color:var(--ig-primary-500)]';
+    public invalidClasses = '[--ig-input-group-border-color:#ff134a] [--ig-input-group-focused-border-color:#ff134a]';
+
+    public passwordVisible = false;
+    public email = 'ana@';
+
+    public get emailInvalid(): boolean {
+        return !emailPattern.test(this.email);
+    }
+
+    public onEmailInput(event: Event): void {
+        this.email = (event.target as HTMLInputElement).value;
+    }
+}
diff --git a/src/app/data-display/icon/material-symbols/material-symbols.component.html b/src/app/data-display/icon/material-symbols/material-symbols.component.html
deleted file mode 100644
index 368fc8f0f9..0000000000
--- a/src/app/data-display/icon/material-symbols/material-symbols.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
-<div class="wrapper">
-    <div class="icon-sample">
-        <igx-icon family="material-symbols" class="custom-icon">grade</igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon family="material-symbols" class="custom-icon">favorite</igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon family="material-symbols" class="custom-icon">&#xe73c;</igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon family="material-symbols" class="custom-icon">diamond</igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon family="material-symbols" class="custom-icon">auto_awesome</igx-icon>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/app/data-display/icon/material-symbols/material-symbols.component.scss b/src/app/data-display/icon/material-symbols/material-symbols.component.scss
deleted file mode 100644
index 13403b140c..0000000000
--- a/src/app/data-display/icon/material-symbols/material-symbols.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.wrapper {
-    display: flex;
-    flex-flow: row wrap;
-    margin: 16px 0;
-}
-
-.icon-sample {
-    display: flex;
-    flex: 1 0 20%;
-    width: 44px;
-    height: 44px;
-    justify-content: center;
-    align-items: center;
-}
-
-.custom-icon {
-    font-variation-settings:
-    'FILL' 0,
-    'wght' 200,
-    'GRAD' 0,
-    'opsz' 40
-}
\ No newline at end of file
diff --git a/src/app/data-display/icon/material-symbols/material-symbols.component.ts b/src/app/data-display/icon/material-symbols/material-symbols.component.ts
deleted file mode 100644
index 88a7a8d5a8..0000000000
--- a/src/app/data-display/icon/material-symbols/material-symbols.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, OnInit, inject } from '@angular/core';
-import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
-
-@Component({
-    selector: 'app-material-symbols',
-    templateUrl: './material-symbols.component.html',
-    styleUrls: ['./material-symbols.component.scss'],
-    imports: [IgxIconComponent]
-})
-export class MaterialSymbolsComponent implements OnInit {
-    private iconService = inject(IgxIconService);
-
-
-    public ngOnInit() {
-        this.iconService.registerFamilyAlias('material-symbols', 'material-symbols-outlined');
-    }
-}
diff --git a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html b/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html
deleted file mode 100644
index e9856835eb..0000000000
--- a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<div class="wrapper">
-    <div class="icon-sample">
-        <igx-icon family="filter-icons" name="contains"></igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon family="filter-icons" name="does_not_contain"></igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon family="filter-icons" name="does_not_equal"></igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon family="filter-icons" name="ends_with"></igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon family="filter-icons" name="equals"></igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon family="filter-icons" name="is_empty"></igx-icon>
-    </div>
-    <div class="icon-sample">
-        <igx-icon family="filter-icons" name="starts_with"></igx-icon>
-    </div>
-</div>
diff --git a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss b/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss
deleted file mode 100644
index 5048e080c7..0000000000
--- a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.wrapper {
-    display: flex;
-    flex-flow: row wrap;
-    margin: 16px 0;
-}
-
-.icon-sample {
-    display: flex;
-    flex: 1 0 10%;
-    height: 44px;
-    justify-content: center;
-    align-items: center;
-}
diff --git a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts b/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts
deleted file mode 100644
index 8df38cf200..0000000000
--- a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component, OnInit, inject } from '@angular/core';
-import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
-
-@Component({
-    selector: 'app-svg-icon-sample',
-    styleUrls: ['./svg-icon-sample.component.scss'],
-    templateUrl: './svg-icon-sample.component.html',
-    imports: [IgxIconComponent]
-})
-export class SvgIconSampleComponent implements OnInit {
-    private iconService = inject(IgxIconService);
-
-
-    public ngOnInit() {
-        // register custom SVG icons
-        this.iconService.addSvgIcon('contains', 'assets/images/svg/contains.svg', 'filter-icons');
-        this.iconService.addSvgIcon('does_not_contain', 'assets/images/svg/does_not_contain.svg', 'filter-icons');
-        this.iconService.addSvgIcon('does_not_equal', 'assets/images/svg/does_not_equal.svg', 'filter-icons');
-        this.iconService.addSvgIcon('ends_with', 'assets/images/svg/ends_with.svg', 'filter-icons');
-        this.iconService.addSvgIcon('equals', 'assets/images/svg/equals.svg', 'filter-icons');
-        this.iconService.addSvgIcon('is_empty', 'assets/images/svg/is_empty.svg', 'filter-icons');
-        this.iconService.addSvgIcon('starts_with', 'assets/images/svg/starts_with.svg', 'filter-icons');
-    }
-}
diff --git a/src/assets/images/svg/contains.svg b/src/assets/images/svg/contains.svg
deleted file mode 100644
index a69a25741c..0000000000
--- a/src/assets/images/svg/contains.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>Icons/filter/contains</title>
-    <desc>Created with Sketch.</desc>
-    <path d="M5,5 L19,5 L19,19 L5,19 L5,5 Z M6,6 L6,18 L18,18 L18,6 L6,6 Z M15.16,10.576 L15.16,14.672 C15.1920002,15.0666686 15.5013304,15.301333 16.088,15.376 L16.04,16.32 C15.1973291,16.32 14.5626688,16.1066688 14.136,15.68 C13.1759952,16.1066688 12.2160048,16.32 11.256,16.32 C10.5199963,16.32 9.96000192,16.1120021 9.576,15.696 C9.19199808,15.2799979 9,14.6826706 9,13.904 C9,13.1253294 9.19733136,12.5520018 9.592,12.184 C9.98666864,11.8159982 10.6053291,11.5893338 11.448,11.504 L13.96,11.264 L13.96,10.576 C13.96,10.0319973 13.8426678,9.64266784 13.608,9.408 C13.3733322,9.17333216 13.0533354,9.056 12.648,9.056 C11.7946624,9.056 10.9093379,9.1093328 9.992,9.216 L9.496,9.264 L9.448,8.352 C10.6213392,8.11733216 11.6613288,8 12.568,8 C13.4746712,8 14.1333313,8.20799792 14.544,8.624 C14.9546687,9.04000208 15.16,9.69066224 15.16,10.576 Z M10.232,13.84 C10.232,14.8213382 10.6373293,15.312 11.448,15.312 C12.173337,15.312 12.8879965,15.1893346 13.592,14.944 L13.96,14.816 L13.96,12.176 L11.592,12.4 C11.1119976,12.4426669 10.7653344,12.5813322 10.552,12.816 C10.3386656,13.0506678 10.232,13.3919978 10.232,13.84 Z" id="path-1"></path>
-    <g id="Icons/filter/contains" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="contains">
-            <g id="Icon-24px">
-                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="Combined-Shape"></g>
-                <g id="Colors/grays.600" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
-                    <rect id="grays.600" x="0" y="0" width="24" height="24"></rect>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/svg/does_not_contain.svg b/src/assets/images/svg/does_not_contain.svg
deleted file mode 100644
index 75e0c0a9a2..0000000000
--- a/src/assets/images/svg/does_not_contain.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>Icons/filter/does not contain</title>
-    <desc>Created with Sketch.</desc>
-    <path d="M17.3578644,6 L6,6 L6,17.3578644 L9.02162818,14.3362362 C9.00720939,14.1989667 9,14.054888 9,13.904 C9,13.1253294 9.19733136,12.5520018 9.592,12.184 C9.98666864,11.8159982 10.6053291,11.5893338 11.448,11.504 L11.8967374,11.461127 L13.7557663,9.60209803 C13.7131731,9.52861698 13.6639177,9.46391769 13.608,9.408 C13.3733322,9.17333216 13.0533354,9.056 12.648,9.056 C11.7946624,9.056 10.9093379,9.1093328 9.992,9.216 L9.496,9.264 L9.448,8.352 C10.6213392,8.11733216 11.6613288,8 12.568,8 C13.4746712,8 14.1333313,8.20799792 14.544,8.624 C14.575355,8.6557622 14.605513,8.68889233 14.6344739,8.72339041 L17.3578644,6 Z M18,6.77207794 L15.0768537,9.69522422 C15.1322847,9.95714034 15.16,10.2507319 15.16,10.576 L15.16,14.672 C15.1920002,15.0666686 15.5013304,15.301333 16.088,15.376 L16.04,16.32 C15.1973291,16.32 14.5626688,16.1066688 14.136,15.68 C13.1759952,16.1066688 12.2160048,16.32 11.256,16.32 C10.5199963,16.32 9.96000192,16.1120021 9.576,15.696 C9.49578886,15.6091046 9.42395518,15.5142977 9.36049891,15.411579 L6.77207794,18 L18,18 L18,6.77207794 Z M13.4603397,11.3117382 L13.96,11.264 L13.96,10.8120779 L13.4603397,11.3117382 Z M12.4535786,12.3184993 L10.3037613,14.4683166 C10.4528539,15.0307743 10.834265,15.312 11.448,15.312 C12.173337,15.312 12.8879965,15.1893346 13.592,14.944 L13.96,14.816 L13.96,12.176 L12.4535786,12.3184993 Z M5,5 L19,5 L19,19 L5,19 L5,5 Z" id="path-1"></path>
-    <g id="Icons/filter/does-not-contain" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="does-not-contain">
-            <g id="Icon-24px">
-                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="Combined-Shape"></g>
-                <g id="Colors/grays.600" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
-                    <rect id="grays.600" x="0" y="0" width="24" height="24"></rect>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/svg/does_not_equal.svg b/src/assets/images/svg/does_not_equal.svg
deleted file mode 100644
index 585f8475ac..0000000000
--- a/src/assets/images/svg/does_not_equal.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>Icons/filter/does not equal</title>
-    <desc>Created with Sketch.</desc>
-    <path d="M10.1519158,12.842 L11.1287924,11.15 L6.5,11.15 L6.5,8.9 L12.4278305,8.9 L14.525721,5.26634712 L16.4742782,6.39134712 L15.0259067,8.9 L17.5,8.9 L17.5,11.15 L13.7268686,11.15 L12.749992,12.842 L17.5,12.842 L17.5,15.092 L11.4509539,15.092 L9.33868278,18.7505608 L7.39012563,17.6255608 L8.85287766,15.092 L6.5,15.092 L6.5,12.842 L10.1519158,12.842 Z" id="path-1"></path>
-    <g id="Icons/filter/does-not-equal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="does-not-equal">
-            <g id="Icon-24px">
-                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="="></g>
-                <g id="Colors/grays.600" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
-                    <rect id="grays.600" x="0" y="0" width="24" height="24"></rect>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/svg/ends_with.svg b/src/assets/images/svg/ends_with.svg
deleted file mode 100644
index 6e0ce79bf2..0000000000
--- a/src/assets/images/svg/ends_with.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>Icons/filter/ends with</title>
-    <desc>Created with Sketch.</desc>
-    <path d="M3,17.16 L3,15.336 L4.312,15.336 L4.312,17.16 L3,17.16 Z M7.08,17.16 L7.08,15.336 L8.376,15.336 L8.376,17.16 L7.08,17.16 Z M11.144,17.16 L11.144,15.336 L12.456,15.336 L12.456,17.16 L11.144,17.16 Z M20.478,11.576 L20.478,15.672 C20.5100002,16.0666686 20.8193304,16.301333 21.406,16.376 L21.358,17.32 C20.5153291,17.32 19.8806688,17.1066688 19.454,16.68 C18.4939952,17.1066688 17.5340048,17.32 16.574,17.32 C15.8379963,17.32 15.2780019,17.1120021 14.894,16.696 C14.5099981,16.2799979 14.318,15.6826706 14.318,14.904 C14.318,14.1253294 14.5153314,13.5520018 14.91,13.184 C15.3046686,12.8159982 15.9233291,12.5893338 16.766,12.504 L19.278,12.264 L19.278,11.576 C19.278,11.0319973 19.1606678,10.6426678 18.926,10.408 C18.6913322,10.1733322 18.3713354,10.056 17.966,10.056 C17.1126624,10.056 16.2273379,10.1093328 15.31,10.216 L14.814,10.264 L14.766,9.352 C15.9393392,9.11733216 16.9793288,9 17.886,9 C18.7926712,9 19.4513313,9.20799792 19.862,9.624 C20.2726687,10.0400021 20.478,10.6906622 20.478,11.576 Z M15.55,14.84 C15.55,15.8213382 15.9553293,16.312 16.766,16.312 C17.491337,16.312 18.2059965,16.1893346 18.91,15.944 L19.278,15.816 L19.278,13.176 L16.91,13.4 C16.4299976,13.4426669 16.0833344,13.5813322 15.87,13.816 C15.6566656,14.0506678 15.55,14.3919978 15.55,14.84 Z" id="path-1"></path>
-    <g id="Icons/filter/ends-with" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="ends-with">
-            <g id="Icon-24px">
-                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="…a"></g>
-                <g id="Colors/grays.600" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
-                    <rect id="grays.600" x="0" y="0" width="24" height="24"></rect>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/svg/equals.svg b/src/assets/images/svg/equals.svg
deleted file mode 100644
index 47cf89046e..0000000000
--- a/src/assets/images/svg/equals.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>Icons/filter/equals</title>
-    <desc>Created with Sketch.</desc>
-    <path d="M6.5,12.842 L17.5,12.842 L17.5,15.092 L6.5,15.092 L6.5,12.842 Z M6.5,8.9 L17.5,8.9 L17.5,11.15 L6.5,11.15 L6.5,8.9 Z" id="path-1"></path>
-    <g id="Icons/filter/equals" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="equals">
-            <g id="Icon-24px">
-                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="="></g>
-                <g id="Colors/grays.600" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
-                    <rect id="grays.600" x="0" y="0" width="24" height="24"></rect>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/svg/is_empty.svg b/src/assets/images/svg/is_empty.svg
deleted file mode 100644
index dd271bcbbd..0000000000
--- a/src/assets/images/svg/is_empty.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>Icons/filter/is empty</title>
-    <desc>Created with Sketch.</desc>
-    <path d="M18,18 L18,17 L19,17 L19,18 L19,19 L17,19 L17,18 L18,18 Z M19,6 L19,7 L18,7 L18,6 L17,6 L17,5 L19,5 L19,6 Z M6,18 L7,18 L7,19 L5,19 L5,18 L5,17 L6,17 L6,18 Z M6,6 L6,7 L5,7 L5,6 L5,5 L7,5 L7,6 L6,6 Z M9,5 L11,5 L11,6 L9,6 L9,5 Z M13,5 L15,5 L15,6 L13,6 L13,5 Z M9,18 L11,18 L11,19 L9,19 L9,18 Z M13,18 L15,18 L15,19 L13,19 L13,18 Z M5,9 L6,9 L6,11 L5,11 L5,9 Z M5,13 L6,13 L6,15 L5,15 L5,13 Z M18,9 L19,9 L19,11 L18,11 L18,9 Z M18,13 L19,13 L19,15 L18,15 L18,13 Z" id="path-1"></path>
-    <g id="Icons/filter/is-empty" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="is-empty">
-            <g id="Icon-24px">
-                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="Combined-Shape"></g>
-                <g id="Colors/grays.600" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
-                    <rect id="grays.600" x="0" y="0" width="24" height="24"></rect>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/assets/images/svg/starts_with.svg b/src/assets/images/svg/starts_with.svg
deleted file mode 100644
index c5e44e0b69..0000000000
--- a/src/assets/images/svg/starts_with.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>Icons/filter/starts with</title>
-    <desc>Created with Sketch.</desc>
-    <path d="M2,17.072 L5.04,6 L7.728,6 L10.768,17.072 L9.552,17.072 L8.752,14.224 L4.016,14.224 L3.216,17.072 L2,17.072 Z M5.968,7.056 L4.288,13.12 L8.48,13.12 L6.8,7.056 L5.968,7.056 Z M12.374,17.072 L12.374,15.248 L13.686,15.248 L13.686,17.072 L12.374,17.072 Z M16.454,17.072 L16.454,15.248 L17.75,15.248 L17.75,17.072 L16.454,17.072 Z M20.518,17.072 L20.518,15.248 L21.83,15.248 L21.83,17.072 L20.518,17.072 Z" id="path-1"></path>
-    <g id="Icons/filter/starts-with" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="starts-with">
-            <g id="Icon-24px">
-                <polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="A…"></g>
-                <g id="Colors/grays.600" mask="url(#mask-2)" fill="#000000" fill-opacity="0.54">
-                    <rect id="grays.600" x="0" y="0" width="24" height="24"></rect>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file