diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index 6037659da2d..185d6537beb 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -37,6 +37,7 @@
     <PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.ElementIcon" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.FileViewer" Version="9.0.0" />
+    <PackageReference Include="BootstrapBlazor.FluentSystemIcon" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.FontAwesome" Version="9.1.0" />
     <PackageReference Include="BootstrapBlazor.Gantt" Version="9.0.2" />
     <PackageReference Include="BootstrapBlazor.Holiday" Version="9.0.1" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/FluentSystemIcons.razor b/src/BootstrapBlazor.Server/Components/Samples/Icons/FluentSystemIcons.razor
new file mode 100644
index 00000000000..ce943ed7ff1
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Icons/FluentSystemIcons.razor
@@ -0,0 +1,35 @@
+@page "/fluent-icon"
+@inject IStringLocalizer<FluentSystemIcons> Localizer
+
+<HeadContent>
+    <link rel="stylesheet" href="@Assets["_content/BootstrapBlazor.FluentSystemIcon/FluentSystemIcons-Regular.css"]" />
+</HeadContent>
+
+<h3>@Localizer["Title"]</h3>
+
+<h4>@((MarkupString)Localizer["BaseUsageText"].Value)</h4>
+
+<PackageTips Name="BootstrapBlazor.FluentSystemIcon" />
+
+<Tips class="mt-3">
+    <div>@Localizer["P1"] <a href="https://www.nuget.org/packages/BootstrapBlazor.FluentSystemIcon/" target="_blank">BootstrapBlazor.FluentSystemIcon</a> @Localizer["P2"]</div>
+</Tips>
+
+<Pre>&lt;link href="_content/BootstrapBlazor.FluentSystemIcon/FluentSystemIcons-Regular.css" rel="stylesheet"&gt;</Pre>
+
+<ul class="ul-demo">
+    <li>Filled: FluentSystemIcons-Filled.css</li>
+    <li>Light: FluentSystemIcons-Light.css</li>
+    <li>Regular: FluentSystemIcons-Regular.css</li>
+    <li>Resizable: FluentSystemIcons-Resizable.css</li>
+</ul>
+
+<p class="code-label">注意：四种类型的图标库必须独立使用，不可以一起引用使用会冲突导致最终显示的图标不是你想要的图标</p>
+
+<div class="mb-2" style="font-size: 1.2em;">
+    <i class="icon-ic_fluent_clipboard_search_24_regular"></i>
+</div>
+
+<Pre>&lt;i class="icon-ic_fluent_clipboard_search_24_regular"&gt;&lt;/i&gt;</Pre>
+
+<div>@((MarkupString)Localizer["Icons"].Value)</div>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Icons/FluentSystemIcons.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Icons/FluentSystemIcons.razor.cs
new file mode 100644
index 00000000000..dab037a7a65
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/Icons/FluentSystemIcons.razor.cs
@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples.Icons;
+
+/// <summary>
+/// 微软 Fluent UI 图标库
+/// </summary>
+public partial class FluentSystemIcons
+{
+
+}
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
index 3cef31369fa..dec715a6f34 100644
--- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
+++ b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -1675,6 +1675,11 @@ void AddIcons(DemoMenuItem item)
                     Url = "md-icon"
                 },
                 new()
+                {
+                    Text = Localizer["FluentSystemIcon"],
+                    Url = "fluent-icon"
+                },
+                new()
                 {
                     Text = Localizer["OctIcon"],
                     Url = "oct-icon"
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 3f1357895ae..56370fd06cb 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4809,6 +4809,7 @@
     "BootstrapIcon": "Bootstrap Icons",
     "MaterialIcon": "Material Icons",
     "ElementIcon": "Element Icon",
+    "FluentSystemIcon": "Fluent Icons",
     "DrawerService": "DrawerService",
     "SortableList": "SortableList",
     "WinBox": "WinBox",
@@ -6734,6 +6735,13 @@
     "P1": "Extending the Component Package by Reference",
     "P2": "After adding the stylesheet file link open icon"
   },
+  "BootstrapBlazor.Server.Components.Samples.Icons.FluentSystemIcons": {
+    "Title": "Fluent System Icons",
+    "BaseUsageText": "Microsoft Free Open Source Icon Library",
+    "Icons": "For icon list, please visit <a href=\"https://react.fluentui.dev/?path=/docs/icons-catalog--docs\" target=\"_blank\">[portal]</a>",
+    "P1": "Extending the Component Package by Reference",
+    "P2": "After adding the stylesheet file link open icon"
+  },
   "BootstrapBlazor.Server.Components.Samples.Icons.ElementIcon.ElementIcons": {
     "ElementIconTitle": "Element-plus Icons",
     "ElementIconDescription": "Free, high quality, open source icon library",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 4844165f379..2bf60d0108a 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4808,6 +4808,7 @@
     "Icons": "内置图标",
     "BootstrapIcon": "Bootstrap Icons",
     "MaterialIcon": "Material Icons",
+    "FluentSystemIcon": "Fluent Icons",
     "ElementIcon": "饿了么图标 ElementIcon",
     "DrawerService": "抽屉服务 DrawerService",
     "SortableList": "拖拽组件 SortableList",
@@ -6734,6 +6735,13 @@
     "P1": "通过引用扩展组件包",
     "P2": "后添加样式表文件链接开启图标"
   },
+  "BootstrapBlazor.Server.Components.Samples.Icons.FluentSystemIcons": {
+    "Title": "Fluent System Icons",
+    "BaseUsageText": "Microsoft 免费开源图标库",
+    "Icons": "图标列表请通过 <a href=\"https://react.fluentui.dev/?path=/docs/icons-catalog--docs\" target=\"_blank\">[传送门]</a> 查看",
+    "P1": "通过引用扩展组件包",
+    "P2": "后添加样式表文件链接开启图标"
+  },
   "BootstrapBlazor.Server.Components.Samples.Icons.ElementIcon.ElementIcons": {
     "ElementIconTitle": "饿了么图标库",
     "ElementIconDescription": "饿了么免费开源图标库",