diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e0389776..42a12c48 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -36,6 +36,7 @@ import { AppComponent } from './app.component';
 import { IconBootstrapComponent } from './icons/icon-bootstrap/icon-bootstrap.component';
 import { IconExportComponent } from './icons/icon-export/icon-export.component';
 import { IconGenericComponent } from './icons/icon-generic/icon-generic.component';
+import { IconFluentComponent } from './icons/icon-fluent/icon-fluent.component';
 import { IconMaterialComponent } from './icons/icon-material/icon-material.component';
 import { IconMetadataComponent } from './icons/icon-metadata/icon-metadata.component';
 import { IconThemeCircleComponent } from './icons/icon-theme-circle/icon-theme-circle.component';
@@ -83,6 +84,7 @@ import { HelpTooltipComponent } from './layouts/header/export-popup/help-tooltip
         IconThemesComponent,
         IconGenericComponent,
         IconMaterialComponent,
+        IconFluentComponent,
         IconMetadataComponent,
         IconExportComponent,
         IconBootstrapComponent,
diff --git a/src/app/icons/icon-fluent/icon-fluent.component.css b/src/app/icons/icon-fluent/icon-fluent.component.css
new file mode 100644
index 00000000..4885d3ab
--- /dev/null
+++ b/src/app/icons/icon-fluent/icon-fluent.component.css
@@ -0,0 +1,7 @@
+.st0 {
+    fill: #2190F7;
+}
+
+.st1 {
+    fill: #ffffff;
+}
diff --git a/src/app/icons/icon-fluent/icon-fluent.component.html b/src/app/icons/icon-fluent/icon-fluent.component.html
new file mode 100644
index 00000000..2df0dc5b
--- /dev/null
+++ b/src/app/icons/icon-fluent/icon-fluent.component.html
@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle class="st0" cx="40" cy="40" r="40"/>
+    <path class="st1" fill-rule="evenodd" clip-rule="evenodd"
+          d="M40.6911 16.1584C40.2561 15.9472 39.7439 15.9472 39.3088 16.1584L23.8543 23.6584C23.3307 23.9124 23 24.4318 23 25V53.5C23 54.0269 23.2848 54.5152 23.7503 54.7862L39.2049 63.7862C39.6823 64.0643 40.2769 64.0716 40.7614 63.8053C40.7797 63.7952 40.7978 63.7849 40.8155 63.7742L56.2495 54.7861C56.715 54.5151 56.9998 54.0266 56.9998 53.5V40.0219C56.9999 40.0146 57 40.0073 57 40C57 39.9927 56.9999 39.9854 56.9998 39.9781V25.0219C56.9999 25.0146 57 25.0073 57 25C57 24.4318 56.6693 23.9124 56.1457 23.6584L40.6911 16.1584ZM26.0909 52.6507V25.9271L40 19.1771L51.9988 25L39.3088 31.1584C38.7853 31.4124 38.4545 31.9318 38.4545 32.5C38.4545 33.0682 38.7853 33.5876 39.3088 33.8416L51.9988 40L40.1632 45.7438C39.116 46.2519 38.4545 47.2907 38.4545 48.4271V59.8507L26.0909 52.6507Z"
+    />
+</svg>
diff --git a/src/app/icons/icon-fluent/icon-fluent.component.ts b/src/app/icons/icon-fluent/icon-fluent.component.ts
new file mode 100644
index 00000000..0433ff9d
--- /dev/null
+++ b/src/app/icons/icon-fluent/icon-fluent.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-icon-fluent',
+    templateUrl: './icon-fluent.component.html',
+    styleUrls: ['./icon-fluent.component.css']
+})
+export class IconFluentComponent { }
diff --git a/src/app/index/index.component.html b/src/app/index/index.component.html
index 65c65515..27512311 100644
--- a/src/app/index/index.component.html
+++ b/src/app/index/index.component.html
@@ -68,6 +68,12 @@
                         </div>
                         <div class="block-title">Material</div>
                     </div>
+                    <div class="block" [routerLink]="['/master/fluent/blue-light']">
+                        <div class="block-image">
+                            <app-icon-fluent></app-icon-fluent>
+                        </div>
+                        <div class="block-title">Fluent</div>
+                    </div>
                 </div>
             </div>
         </ng-container>
diff --git a/src/index.html b/src/index.html
index 1e2b2888..cc5a3b18 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,7 +19,7 @@
         }
 
         if(isIframe()) {
-            var themeMarker = "dx." + /generic|material/.exec(window.location.pathname)[0];
+            var themeMarker = "dx." + /generic|material|fluent/.exec(window.location.pathname)[0];
             document.write('<style>.dx-theme-marker { font-family: "' + themeMarker + '"; }</style>');
         } else {
             document.write('<link rel="stylesheet" type="text/css" href="content/css/dx.material.blue.light.compact.css" />');