diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.internal.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.internal.cs
index 4752100592..b22316c812 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.internal.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.internal.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public partial class BitNav<TItem>
 {
@@ -217,6 +217,43 @@ internal bool GetForceAnchor(TItem item)
         return item.GetValueFromProperty(NameSelectors.ForceAnchor.Name, false);
     }
 
+    internal BitIconInfo? GetIcon(TItem item)
+    {
+        if (item is BitNavItem navItem)
+        {
+            return BitIconInfo.From(navItem.Icon, navItem.IconName);
+        }
+
+        if (item is BitNavOption navOption)
+        {
+            return BitIconInfo.From(navOption.Icon, navOption.IconName);
+        }
+
+        if (NameSelectors is null) return null;
+
+        BitIconInfo? icon = null;
+        if (NameSelectors.Icon.Selector is not null)
+        {
+            icon = NameSelectors.Icon.Selector!(item);
+        }
+        else
+        {
+            icon = item.GetValueFromProperty<BitIconInfo?>(NameSelectors.Icon.Name);
+        }
+
+        string? iconName = null;
+        if (NameSelectors.IconName.Selector is not null)
+        {
+            iconName = NameSelectors.IconName.Selector!(item);
+        }
+        else
+        {
+            iconName = item.GetValueFromProperty<string?>(NameSelectors.IconName.Name);
+        }
+
+        return BitIconInfo.From(icon, iconName);
+    }
+
     internal string? GetIconName(TItem item)
     {
         if (item is BitNavItem navItem)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.parameters.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.parameters.cs
index f9eb458d98..9e646a62a8 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.parameters.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.parameters.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public partial class BitNav<TItem>
 {
@@ -13,10 +13,18 @@ public partial class BitNav<TItem>
     /// </summary>
     [Parameter] public bool AllExpanded { get; set; }
 
+    /// <summary>
+    /// The icon for the chevron-down element of each nav item.
+    /// Takes precedence over <see cref="ChevronDownIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ChevronDownIconName"/> instead.
+    /// </summary>
+    [Parameter] public BitIconInfo? ChevronDownIcon { get; set; }
+
     /// <summary>
     /// The custom icon name of the chevron-down element of each nav item.
     /// </summary>
-    [Parameter] public string? ChevronDownIcon { get; set; }
+    [Parameter] public string? ChevronDownIconName { get; set; }
 
     /// <summary>
     /// Items to render as children.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavItem.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavItem.cs
index 635f43e122..99c5b6b4c5 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavItem.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavItem.cs
@@ -47,6 +47,19 @@ public class BitNavItem
     /// </summary>
     public bool ForceAnchor { get; set; }
 
+    /// <summary>
+    /// Icon to render next to the nav item.
+    /// Takes precedence over <see cref="IconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
+    /// </summary>
+    /// <example>
+    /// Bootstrap: Icon=BitIconInfo.Bi("gear-fill")
+    /// FontAwesome: Icon=BitIconInfo.Fa("solid house")
+    /// Custom CSS: Icon=BitIconInfo.Css("my-icon-class")
+    /// </example>
+    public BitIconInfo? Icon { get; set; }
+
     /// <summary>
     /// Name of an icon to render next to the nav item.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavNameSelectors.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavNameSelectors.cs
index 3d3a816801..2d8d21926d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavNameSelectors.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavNameSelectors.cs
@@ -47,6 +47,11 @@ public class BitNavNameSelectors<TItem>
     /// </summary>
     public BitNameSelectorPair<TItem, bool?> ForceAnchor { get; set; } = new(nameof(BitNavItem.ForceAnchor));
 
+    /// <summary>
+    /// The Icon field name and selector of the custom input class (see <see cref="BitNavItem.Icon"/>).
+    /// </summary>
+    public BitNameSelectorPair<TItem, BitIconInfo?> Icon { get; set; } = new(nameof(BitNavItem.Icon));
+
     /// <summary>
     /// The IconName field name and selector of the custom input class (see <see cref="BitNavItem.IconName"/>).
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor.cs
index c553645173..e48897a683 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor.cs
@@ -61,6 +61,19 @@ public partial class BitNavOption : ComponentBase, IDisposable
     /// </summary>
     [Parameter] public bool ForceAnchor { get; set; }
 
+    /// <summary>
+    /// Icon to render next to the nav option.
+    /// Takes precedence over <see cref="IconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
+    /// </summary>
+    /// <example>
+    /// Bootstrap: Icon=BitIconInfo.Bi("gear-fill")
+    /// FontAwesome: Icon=BitIconInfo.Fa("solid house")
+    /// Custom CSS: Icon=BitIconInfo.Css("my-icon-class")
+    /// </example>
+    [Parameter] public BitIconInfo? Icon { get; set; }
+
     /// <summary>
     /// Name of an icon to render next to the nav option.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor
index 13b479a432..3ee519234e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor
@@ -1,4 +1,4 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @typeparam TItem
 
 <li role="listitem" style="@Nav.GetStyle(Item)" class="@Nav.GetClass(Item)">
@@ -13,7 +13,8 @@
         var text = Nav.GetText(Item);
         var childItems = Nav.GetChildItems(Item);
         var description = Nav.GetDescription(Item);
-        var iconName = Nav.GetIconName(Item);
+        var chevronIcon = BitIconInfo.From(Nav.ChevronDownIcon, Nav.ChevronDownIconName ?? $"ChevronRight {(isExpanded ? "bit-nav-exp" : "bit-ico-r90")}");
+        var icon = Nav.GetIcon(Item);
         var url = Nav.GetUrl(Item);
         var title = Nav.GetTitle(Item);
         var target = Nav.GetTarget(Item);
@@ -66,7 +67,7 @@
                             <div class="bit-nav-iit" style="@(Nav.ReversedChevron ? "flex-flow:row-reverse" : null)">
                                 @if (Nav.NoCollapse is false)
                                 {
-                                    <i class="bit-icon bit-icon--@(Nav.ChevronDownIcon ?? "ChevronRight") @(Nav.ChevronDownIcon.HasValue() ? "" : (isExpanded ? "bit-nav-exp" : "bit-ico-r90"))" aria-hidden="true" />
+                                    <i class="@chevronIcon?.GetCssClasses()" aria-hidden="true" />
                                 }
                                 <span class="bit-nav-ghd">@text</span>
                             </div>
@@ -82,7 +83,7 @@
                         <div class="bit-nav-iit" style="@(Nav.ReversedChevron ? "flex-flow:row-reverse" : null)">
                             @if (Nav.NoCollapse is false)
                             {
-                                <i class="bit-icon bit-icon--@(Nav.ChevronDownIcon ?? "ChevronRight") @(Nav.ChevronDownIcon.HasValue() ? "" : (isExpanded ? "bit-nav-exp" : "bit-ico-r90"))" aria-hidden="true" />
+                                <i class="@chevronIcon?.GetCssClasses()" aria-hidden="true" />
                             }
                             <span class="bit-nav-ghd">@text</span>
                         </div>
@@ -144,7 +145,7 @@
                                  class="bit-nav-cbt @Nav.Classes?.ToggleButton"
                                  aria-expanded="@(isExpanded ? "true" : "false")"
                                  aria-label="@(isExpanded ? colAriaLabel : expAriaLabel)">
-                                <i class="bit-icon bit-icon--@(Nav.ChevronDownIcon ?? "ChevronRight") @(Nav.ChevronDownIcon.HasValue() ? "" : (isExpanded ? "bit-nav-exp" : "bit-ico-r90"))" aria-hidden="true" />
+                                <i class="@chevronIcon?.GetCssClasses()" aria-hidden="true" />
                             </div>
                         }
                         <div style="@GetItemStyles()"
@@ -159,9 +160,9 @@
                             }
                             else
                             {
-                                @if (iconName.HasValue())
+                                @if (icon is not null)
                                 {
-                                    <i style="@Nav.Styles?.ItemIcon" class="bit-nav-iic bit-icon bit-icon--@iconName @Nav.Classes?.ItemIcon" aria-hidden="true" />
+                                    <i style="@Nav.Styles?.ItemIcon" class="bit-nav-iic @icon.GetCssClasses() @Nav.Classes?.ItemIcon" aria-hidden="true" />
                                 }
                                 <span style="@Nav.Styles?.ItemText" class="bit-nav-itx @Nav.Classes?.ItemText">@text</span>
                             }
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/ObjectExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/ObjectExtensions.cs
index d95ea976a5..8892330e62 100644
--- a/src/BlazorUI/Bit.BlazorUI/Extensions/ObjectExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/ObjectExtensions.cs
@@ -1,4 +1,4 @@
-using System.Diagnostics.CodeAnalysis;
+using System.Diagnostics.CodeAnalysis;
 using System.Globalization;
 
 namespace Bit.BlazorUI;
@@ -30,6 +30,18 @@ internal static class ObjectExtensions
             if (value is null) return defaultValue;
         }
 
+        if (value is T tValue)
+        {
+            return tValue;
+        }
+
+        var implicitOp = targetType.GetMethod("op_Implicit", [value.GetType()]);
+        if (implicitOp is not null)
+        {
+            var result = implicitOp.Invoke(null, [value]);
+            return result is null ? defaultValue : (T)result;
+        }
+
         return (T)Convert.ChangeType(value, targetType, CultureInfo.InvariantCulture);
     }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor
index b90be9e7e4..259efbdd27 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor
@@ -1,4 +1,4 @@
-@page "/components/nav"
+@page "/components/nav"
 @inherits AppComponentBase
 
 <PageOutlet Url="components/nav"
@@ -8,7 +8,7 @@
 <div>
     <DemoPage Name="Nav"
               SecondaryNames="@(["Tree", "TreeView"])"
-              Description="A navigation pane (Nav) provides links to the main areas of an app or site. This component can also be sued as a TreeView to show parent-child data in a tree."
+              Description="A navigation pane (Nav) provides links to the main areas of an app or site. This component can also be used as a TreeView to show parent-child data in a tree."
               Parameters="componentParameters"
               PublicMembers="componentPublicMembers"
               SubClasses="componentSubClasses"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs
index 99a5d600e3..ee25e163de 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Navs.Nav;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Navs.Nav;
 
 public partial class BitNavDemo
 {
@@ -23,9 +23,18 @@ public partial class BitNavDemo
         new()
         {
             Name = "ChevronDownIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon for the chevron-down element of each nav item. Takes precedence over ChevronDownIconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "ChevronDownIconName",
             Type = "string?",
             DefaultValue = "null",
-            Description = "The custom icon name of the chevron-down element of the BitNav component.",
+            Description = "The custom icon name of the chevron-down element of each nav item.",
         },
         new()
         {
@@ -337,6 +346,15 @@ public partial class BitNavDemo
                    Description = "Forces an anchor element render instead of button.",
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitIconInfo?",
+                   DefaultValue = "null",
+                   Description = "The icon to render next to the nav item. Takes precedence over IconName when both are set.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "string?",
@@ -512,6 +530,15 @@ public partial class BitNavDemo
                    Description = "Forces an anchor element render instead of button.",
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitIconInfo?",
+                   DefaultValue = "null",
+                   Description = "The icon to render next to the nav option. Takes precedence over IconName when both are set.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "string?",
@@ -687,6 +714,15 @@ public partial class BitNavDemo
                    Description = "The ForceAnchor field name and selector of the custom input class."
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitNameSelectorPair<TItem, BitIconInfo?>",
+                   DefaultValue = "new(nameof(BitNavItem.Icon))",
+                   Description = "The Icon field name and selector of the custom input class.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "BitNameSelectorPair<TItem, string?>",
@@ -853,6 +889,35 @@ public partial class BitNavDemo
                    Description = "Custom CSS classes/styles for the separator of the BitNav."
                },
             ]
+        },
+        new()
+        {
+            Id = "bit-icon-info",
+            Title = "BitIconInfo",
+            Parameters =
+            [
+               new()
+               {
+                   Name = "Name",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the name of the icon."
+               },
+               new()
+               {
+                   Name = "BaseClass",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to \"bit-icon\". For external icon libraries like FontAwesome, you might set this to \"fa\" or leave empty."
+               },
+               new()
+               {
+                   Name = "Prefix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to \"bit-icon--\". For external icon libraries, you might set this to \"fa-\" or leave empty."
+               },
+            ]
         }
     ];
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/CarMenu.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/CarMenu.cs
index 27eecde80b..030448d869 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/CarMenu.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/CarMenu.cs
@@ -9,6 +9,6 @@ public class CarMenu
     public string? ExpandedAriaLabel { get; set; }
     public string? CollapsedAriaLabel { get; set; }
     public bool IsExpandedParent { get; set; }
-    public List<CarMenu> Links { get; set; } = [];
     public string? Comment { get; set; }
+    public List<CarMenu> Links { get; set; } = [];
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/FoodMenu.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/FoodMenu.cs
index a1c0202ea7..f18ab4ab3a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/FoodMenu.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/FoodMenu.cs
@@ -3,8 +3,8 @@
 public class FoodMenu
 {
     public string Name { get; set; } = string.Empty;
-    public string? Icon { get; set; }
+    public string? Image { get; set; }
     public bool IsExpanded { get; set; }
-    public List<FoodMenu> Childs { get; set; } = [];
     public string? Comment { get; set; }
+    public List<FoodMenu> Childs { get; set; } = [];
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/Section.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/Section.cs
index bdbaabbbec..bd75a1e189 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/Section.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/Section.cs
@@ -3,7 +3,7 @@
 public class Section
 {
     public string Text { get; set; } = string.Empty;
-    public string? Icon { get; set; }
+    public string? ImageName { get; set; }
     public string? Url { get; set; }
     public bool IsEnabled { get; set; } = true;
     public bool IsExpanded { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavCustomDemo.razor
index c2cf085c24..e5b101ee6d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavCustomDemo.razor
@@ -1,13 +1,13 @@
-<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
     <BitNav Items="customBasicNavItems"
-            NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
+            NameSelectors="@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                      ChildItems =  { Name = nameof(Section.Links) },
                                      Description =  { Name = nameof(Section.Comment) } })" />
 </DemoExample>
 
 <DemoExample Title="FitWidth" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
     <BitNav Items="customBasicNavItems" FitWidth
-            NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
+            NameSelectors="@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                      ChildItems =  { Name = nameof(Section.Links) },
                                      Description =  { Name = nameof(Section.Comment) } })" />
 </DemoExample>
@@ -32,7 +32,7 @@
             Mode="BitNavMode.Manual"
             DefaultSelectedItem="customFoodNavItems[0].Childs[2]"
             NameSelectors="@(new() { Text =  { Selector = item => item.Name },
-                                     IconName =  { Selector = item => item.Icon },
+                                     IconName =  { Selector = item => item.Image },
                                      ChildItems =  { Selector = item => item.Childs },
                                      Description =  { Selector = item => item.Comment } })" />
     <br /><br /><br />
@@ -43,7 +43,7 @@
                 Mode="BitNavMode.Manual"
                 DefaultSelectedItem="customFoodNavItems[0].Childs[2]"
                 NameSelectors="@(new() { Text =  { Selector = item => item.Name },
-                                         IconName =  { Selector = item => item.Icon },
+                                         IconName =  { Selector = item => item.Image },
                                          ChildItems =  { Selector = item => item.Childs },
                                          Description =  { Selector = item => item.Comment } })"
                 OnSelectItem="(FoodMenu item) => CustomSelectedFoodName = FoodMenuDropdownItems.Single(i => i.Text == item.Name).Text" />
@@ -60,7 +60,7 @@
     <BitToggle @bind-Value="iconOnly" Label="Hide texts?" Inline />
     <br />
     <BitNav Items="customIconOnlyNavItems" Mode="BitNavMode.Manual" IconOnly="iconOnly"
-            NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
+            NameSelectors="@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                      ChildItems =  { Name = nameof(Section.Links) },
                                      Description =  { Name = nameof(Section.Comment) } })" />
 </DemoExample>
@@ -90,13 +90,13 @@
     <BitNav Items="customFoodNavItems"
             Mode="BitNavMode.Manual"
             NameSelectors="@(new() { Text =  { Selector = item => item.Name },
-                                     IconName =  { Selector = item => item.Icon },
+                                     IconName =  { Selector = item => item.Image },
                                      ChildItems =  { Selector = item => item.Childs },
                                      Description =  { Selector = item => item.Comment } })">
         <ItemTemplate Context="item">
             <div class="nav-custom-item">
                 <BitCheckbox />
-                <BitIcon IconName="@item.Icon" />
+                <BitIcon IconName="@item.Image" />
                 <span>@item.Name</span>
             </div>
         </ItemTemplate>
@@ -111,7 +111,7 @@
                 OnSelectItem="(FoodMenu item) => CustomSelectedItem = item"
                 OnItemToggle="(FoodMenu item) => CustomToggledItem = item"
                 NameSelectors="@(new() { Text =  { Selector = item => item.Name },
-                                                   IconName =  { Selector = item => item.Icon },
+                                                   IconName =  { Selector = item => item.Image },
                                                    ChildItems =  { Selector = item => item.Childs },
                                                    Description =  { Selector = item => item.Comment } })" />
         <div>
@@ -125,14 +125,30 @@
 <DemoExample Title="AllExpanded & NoCollapse" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
     <BitNav AllExpanded NoCollapse
             Items="customNoCollapseNavItems"
-            NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
+            NameSelectors="@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                      ChildItems =  { Name = nameof(Section.Links) },
                                      Description =  { Name = nameof(Section.Comment) } })" />
 </DemoExample>
 
-<DemoExample Title="Custom Styles" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+<DemoExample Title="External Icons" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <div>
+        Use icons from external libraries like FontAwesome with the <BitLink Href="#bit-icon-info">Icon</BitLink> selector in 
+        <BitLink Href="#name-selectors">NameSelectors</BitLink>. See the <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> section in the parameters table for usage.
+        Built-in Fluent UI icons use <BitLink Href="#nav-item">IconName</BitLink>.
+    </div>
+    <br />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <BitNav Items="customExternalIconNavItems"
+            NameSelectors="@(new() { Text =  { Name = nameof(Section.Text) },
+                                     Icon =  { Name = nameof(Section.ImageName) },
+                                     Url =  { Name = nameof(Section.Url) },
+                                     ChildItems =  { Name = nameof(Section.Links) },
+                                     Description =  { Name = nameof(Section.Comment) } })" />
+</DemoExample>
+
+<DemoExample Title="Custom Styles" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
     <BitNav Items="customCustomStyleNavItems"
-            NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
+            NameSelectors="@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                      ChildItems =  { Name = nameof(Section.Links) },
                                      Description =  { Name = nameof(Section.Comment) } })"
             Styles="@(new() { ItemContainer = "border: 1px solid green; margin: 2px;",
@@ -141,12 +157,12 @@
                               ItemIcon = "color: gold; margin-right: 15px;" })" />
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+<DemoExample Title="RTL" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
     <div dir="rtl">
         <BitNav Dir="BitDir.Rtl"
                 Items="customRtlNavItems"
-                NameSelectors="@(new() { IconName =  { Name = nameof(Section.Icon) },
+                NameSelectors="@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                          ChildItems =  { Name = nameof(Section.Links) },
                                          Description =  { Name = nameof(Section.Comment) } })" />
     </div>
-</DemoExample>
\ No newline at end of file
+</DemoExample>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavCustomDemo.razor.cs
index fceff44fa3..1b5c52eea7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavCustomDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavCustomDemo.razor.cs
@@ -10,7 +10,7 @@ public partial class _BitNavCustomDemo
             Comment = "the bit platform description",
             Links =
             [
-                new() { Text = "Home", Icon = BitIconName.Home, Url = "https://bitplatform.dev/" },
+                new() { Text = "Home", ImageName = BitIconName.Home, Url = "https://bitplatform.dev/" },
                 new()
                 {
                     Text = "Products & Services",
@@ -21,18 +21,18 @@ public partial class _BitNavCustomDemo
                             Text = "Project Templates",
                             Links =
                             [
-                                new() { Text = "Todo sample", Icon = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" },
-                                new() { Text = "AdminPanel sample", Icon = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" },
+                                new() { Text = "Todo sample", ImageName = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" },
+                                new() { Text = "AdminPanel sample", ImageName = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" },
                             ]
                         },
-                        new() { Text = "BlazorUI", Icon = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" },
-                        new() { Text = "Cloud hosting solutions", Icon = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsEnabled = false },
-                        new() { Text = "Bit academy", Icon = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false },
+                        new() { Text = "BlazorUI", ImageName = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" },
+                        new() { Text = "Cloud hosting solutions", ImageName = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsEnabled = false },
+                        new() { Text = "Bit academy", ImageName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false },
                     ]
                 },
-                new() { Text = "Pricing", Icon = BitIconName.Money, Url = "https://bitplatform.dev/pricing" },
-                new() { Text = "About", Icon = BitIconName.Info, Url = "https://bitplatform.dev/about-us" },
-                new() { Text = "Contact us", Icon = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" },
+                new() { Text = "Pricing", ImageName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" },
+                new() { Text = "About", ImageName = BitIconName.Info, Url = "https://bitplatform.dev/about-us" },
+                new() { Text = "Contact us", ImageName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" },
             ],
         },
         new()
@@ -40,31 +40,31 @@ public partial class _BitNavCustomDemo
             Text = "Community",
             Links =
             [
-                new() { Text = "Linkedin", Icon = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" },
-                new() { Text = "Twitter", Icon = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" },
-                new() { Text = "Github repo", Icon = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" },
+                new() { Text = "Linkedin", ImageName = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" },
+                new() { Text = "Twitter", ImageName = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" },
+                new() { Text = "Github repo", ImageName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" },
             ]
         },
-        new() { Text = "Iconography", Icon = BitIconName.AppIconDefault, Url = "/iconography" },
+        new() { Text = "Iconography", ImageName = BitIconName.AppIconDefault, Url = "/iconography" },
     ];
 
     private static readonly List<Section> customIconOnlyNavItems =
     [
-        new() { Text = "Home", Icon = BitIconName.Home },
+        new() { Text = "Home", ImageName = BitIconName.Home },
         new() {
             Text = "AdminPanel sample",
-            Icon = BitIconName.LocalAdmin,
+            ImageName = BitIconName.LocalAdmin,
             Links =
             [
-                new() { Text = "Dashboard", Icon = BitIconName.ViewDashboard },
-                new() { Text = "Categories", Icon = BitIconName.BuildQueue },
-                new() { Text = "Products", Icon = BitIconName.Product },
+                new() { Text = "Dashboard", ImageName = BitIconName.ViewDashboard },
+                new() { Text = "Categories", ImageName = BitIconName.BuildQueue },
+                new() { Text = "Products", ImageName = BitIconName.Product },
             ]
         },
-        new() { Text = "Todo sample", Icon = BitIconName.ToDoLogoOutline},
-        new() { Text = "BlazorUI", Icon = BitIconName.F12DevTools },
-        new() { Text = "Bit academy", Icon = BitIconName.LearningTools, IsEnabled = false },
-        new() { Text = "Contact us", Icon = BitIconName.Contact },
+        new() { Text = "Todo sample", ImageName = BitIconName.ToDoLogoOutline},
+        new() { Text = "BlazorUI", ImageName = BitIconName.F12DevTools },
+        new() { Text = "Bit academy", ImageName = BitIconName.LearningTools, IsEnabled = false },
+        new() { Text = "Contact us", ImageName = BitIconName.Contact },
     ];
 
     private static readonly List<CarMenu> customCarNavItems =
@@ -131,7 +131,7 @@ public partial class _BitNavCustomDemo
         new()
         {
             Name = "Fast foods",
-            Icon = BitIconName.HeartBroken,
+            Image = BitIconName.HeartBroken,
             IsExpanded = true,
             Comment = "List of fast foods",
             Childs =
@@ -165,7 +165,7 @@ public partial class _BitNavCustomDemo
         new()
         {
             Name = "Fruits",
-            Icon = BitIconName.Health,
+            Image = BitIconName.Health,
             Childs =
             [
                 new() { Name = "Apple" },
@@ -185,7 +185,7 @@ public partial class _BitNavCustomDemo
             Comment = "the bit platform description",
             Links =
             [
-                new() { Text = "Home", Icon = BitIconName.Home, Url = "https://bitplatform.dev/" },
+                new() { Text = "Home", ImageName = BitIconName.Home, Url = "https://bitplatform.dev/" },
                 new()
                 {
                     Text = "Products & Services",
@@ -196,18 +196,18 @@ public partial class _BitNavCustomDemo
                             Text = "Project Templates",
                             Links =
                             [
-                                new() { Text = "Todo sample", Icon = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" },
-                                new() { Text = "AdminPanel sample", Icon = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" },
+                                new() { Text = "Todo sample", ImageName = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" },
+                                new() { Text = "AdminPanel sample", ImageName = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" },
                             ]
                         },
-                        new() { Text = "BlazorUI", Icon = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" },
-                        new() { Text = "Cloud hosting solutions", Icon = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsEnabled = false },
-                        new() { Text = "Bit academy", Icon = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false },
+                        new() { Text = "BlazorUI", ImageName = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" },
+                        new() { Text = "Cloud hosting solutions", ImageName = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsEnabled = false },
+                        new() { Text = "Bit academy", ImageName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false },
                     ]
                 },
-                new() { Text = "Pricing", Icon = BitIconName.Money, Url = "https://bitplatform.dev/pricing" },
-                new() { Text = "About", Icon = BitIconName.Info, Url = "https://bitplatform.dev/about-us" },
-                new() { Text = "Contact us", Icon = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" },
+                new() { Text = "Pricing", ImageName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" },
+                new() { Text = "About", ImageName = BitIconName.Info, Url = "https://bitplatform.dev/about-us" },
+                new() { Text = "Contact us", ImageName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" },
             ],
         },
         new()
@@ -215,12 +215,37 @@ public partial class _BitNavCustomDemo
             Text = "Community",
             Links =
             [
-                new() { Text = "Linkedin", Icon = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" },
-                new() { Text = "Twitter", Icon = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" },
-                new() { Text = "Github repo", Icon = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" },
+                new() { Text = "Linkedin", ImageName = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" },
+                new() { Text = "Twitter", ImageName = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" },
+                new() { Text = "Github repo", ImageName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" },
             ]
         },
-        new() { Text = "Iconography", Icon = BitIconName.AppIconDefault, Url = "/iconography" },
+        new() { Text = "Iconography", ImageName = BitIconName.AppIconDefault, Url = "/iconography" },
+    ];
+
+    private static readonly List<Section> customExternalIconNavItems =
+    [
+        new()
+        {
+            Text = "bit platform",
+            Comment = "Nav with external icons (FontAwesome)",
+            Links =
+            [
+                new() { Text = "Home", ImageName = BitIconInfo.Css("fa-solid fa-house"), Url = "https://bitplatform.dev/" },
+                new()
+                {
+                    Text = "Products & Services",
+                    Links =
+                    [
+                        new() { Text = "BlazorUI", ImageName = BitIconInfo.Fa("solid code"), Url = "https://bitplatform.dev/components" },
+                        new() { Text = "Pricing", ImageName = BitIconInfo.Css("fa-solid fa-tag"), Url = "https://bitplatform.dev/pricing" },
+                    ]
+                },
+                new() { Text = "About", ImageName = BitIconInfo.Fa("solid circle-info"), Url = "https://bitplatform.dev/about-us" },
+                new() { Text = "Contact us", ImageName = BitIconInfo.Css("fa-solid fa-envelope"), Url = "https://bitplatform.dev/contact-us" },
+            ],
+        },
+        new() { Text = "Iconography", ImageName = BitIconInfo.Css("fa-solid fa-icons"), Url = "/iconography" },
     ];
 
     private static readonly List<Section> customCustomStyleNavItems =
@@ -231,7 +256,7 @@ public partial class _BitNavCustomDemo
             Comment = "the bit platform description",
             Links =
             [
-                new() { Text = "Home", Icon = BitIconName.Home, Url = "https://bitplatform.dev/" },
+                new() { Text = "Home", ImageName = BitIconName.Home, Url = "https://bitplatform.dev/" },
                 new()
                 {
                     Text = "Products & Services",
@@ -242,18 +267,18 @@ public partial class _BitNavCustomDemo
                             Text = "Project Templates",
                             Links =
                             [
-                                new() { Text = "Todo sample", Icon = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" },
-                                new() { Text = "AdminPanel sample", Icon = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" },
+                                new() { Text = "Todo sample", ImageName = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" },
+                                new() { Text = "AdminPanel sample", ImageName = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" },
                             ]
                         },
-                        new() { Text = "BlazorUI", Icon = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" },
-                        new() { Text = "Cloud hosting solutions", Icon = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsEnabled = false },
-                        new() { Text = "Bit academy", Icon = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false },
+                        new() { Text = "BlazorUI", ImageName = BitIconName.F12DevTools, Url = "https://bitplatform.dev/components" },
+                        new() { Text = "Cloud hosting solutions", ImageName = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsEnabled = false },
+                        new() { Text = "Bit academy", ImageName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false },
                     ]
                 },
-                new() { Text = "Pricing", Icon = BitIconName.Money, Url = "https://bitplatform.dev/pricing" },
-                new() { Text = "About", Icon = BitIconName.Info, Url = "https://bitplatform.dev/about-us" },
-                new() { Text = "Contact us", Icon = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" },
+                new() { Text = "Pricing", ImageName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" },
+                new() { Text = "About", ImageName = BitIconName.Info, Url = "https://bitplatform.dev/about-us" },
+                new() { Text = "Contact us", ImageName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" },
             ],
         },
         new()
@@ -261,12 +286,12 @@ public partial class _BitNavCustomDemo
             Text = "Community",
             Links =
             [
-                new() { Text = "Linkedin", Icon = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" },
-                new() { Text = "Twitter", Icon = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" },
-                new() { Text = "Github repo", Icon = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" },
+                new() { Text = "Linkedin", ImageName = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" },
+                new() { Text = "Twitter", ImageName = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" },
+                new() { Text = "Github repo", ImageName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" },
             ]
         },
-        new() { Text = "Iconography", Icon = BitIconName.AppIconDefault, Url = "/iconography" },
+        new() { Text = "Iconography", ImageName = BitIconName.AppIconDefault, Url = "/iconography" },
     ];
 
     private static readonly List<Section> customRtlNavItems =
@@ -277,7 +302,7 @@ public partial class _BitNavCustomDemo
             Comment = "توضیحاتِ پلتفرمِ بیت",
             Links =
             [
-                new() { Text = "خانه", Icon = BitIconName.Home, Url = "https://bitplatform.dev/" },
+                new() { Text = "خانه", ImageName = BitIconName.Home, Url = "https://bitplatform.dev/" },
                 new()
                 {
                     Text = "محصولات و خدمات",
@@ -288,18 +313,18 @@ public partial class _BitNavCustomDemo
                             Text = "قالب های پروژه",
                             Links =
                             [
-                                new() { Text = "نمونه ی Todo", Icon = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" },
-                                new() { Text = "نمونه ی AdminPanel", Icon = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" },
+                                new() { Text = "نمونه ی Todo", ImageName = BitIconName.ToDoLogoOutline, Url = "https://bitplatform.dev/templates/overview" },
+                                new() { Text = "نمونه ی AdminPanel", ImageName = BitIconName.LocalAdmin, Url = "https://bitplatform.dev/templates/overview" },
                             ]
                         },
-                        new() { Text = "رابط کاربری Blazor", Icon = BitIconName.F12DevTools, Url = "https://blazorui.bitplatform.dev/" },
-                        new() { Text = "راه های هاست ابری", Icon = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsEnabled = false },
-                        new() { Text = "آکادمی بیت", Icon = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false },
+                        new() { Text = "رابط کاربری Blazor", ImageName = BitIconName.F12DevTools, Url = "https://blazorui.bitplatform.dev/" },
+                        new() { Text = "راه های هاست ابری", ImageName = BitIconName.Cloud, Url = "https://bitplatform.dev/#", IsEnabled = false },
+                        new() { Text = "آکادمی بیت", ImageName = BitIconName.LearningTools, Url = "https://bitplatform.dev/#", IsEnabled = false },
                     ]
                 },
-                new() { Text = "قیمت", Icon = BitIconName.Money, Url = "https://bitplatform.dev/pricing" },
-                new() { Text = "درباره ما", Icon = BitIconName.Info, Url = "https://bitplatform.dev/about-us" },
-                new() { Text = "ارتباط با ما", Icon = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" },
+                new() { Text = "قیمت", ImageName = BitIconName.Money, Url = "https://bitplatform.dev/pricing" },
+                new() { Text = "درباره ما", ImageName = BitIconName.Info, Url = "https://bitplatform.dev/about-us" },
+                new() { Text = "ارتباط با ما", ImageName = BitIconName.Contact, Url = "https://bitplatform.dev/contact-us" },
             ],
         },
         new()
@@ -307,12 +332,12 @@ public partial class _BitNavCustomDemo
             Text = "انجمن ها",
             Links =
             [
-                new() { Text = "لینکدین", Icon = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" },
-                new() { Text = "توییتر", Icon = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" },
-                new() { Text = "گیتهاب", Icon = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" },
+                new() { Text = "لینکدین", ImageName = BitIconName.LinkedInLogo, Url = "https://www.linkedin.com/company/bitplatformhq" },
+                new() { Text = "توییتر", ImageName = BitIconName.Globe, Url = "https://twitter.com/bitplatformhq" },
+                new() { Text = "گیتهاب", ImageName = BitIconName.GitGraph, Url = "https://github.com/bitfoundation/bitplatform" },
             ]
         },
-        new() { Text = "شمایل نگاری", Icon = BitIconName.AppIconDefault, Url = "/iconography" },
+        new() { Text = "شمایل نگاری", ImageName = BitIconName.AppIconDefault, Url = "/iconography" },
     ];
 
     private bool iconOnly;
@@ -347,17 +372,18 @@ public partial class _BitNavCustomDemo
 
     private readonly string example1RazorCode = @"
 <BitNav Items=""customBasicNavItems""
-        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.Icon) },
+        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                  ChildItems =  { Name = nameof(Section.Links) },
                                  Description =  { Name = nameof(Section.Comment) } })"" />";
     private readonly string example1CsharpCode = @"
 public class Section
 {
     public string Text { get; set; } = string.Empty;
-    public string? Icon { get; set; }
+    public string? ImageName { get; set; }
     public string? Url { get; set; }
     public bool IsEnabled { get; set; } = true;
     public bool IsExpanded { get; set; }
+    public string? Comment { get; set; }
     public List<Section> Links { get; set; } = [];
 }
 
@@ -369,7 +395,7 @@ public class Section
         Comment = ""the bit platform description"",
         Links =
         [
-            new() { Text = ""Home"", Icon = BitIconName.Home, Url = ""https://bitplatform.dev/"" },
+            new() { Text = ""Home"", ImageName = BitIconName.Home, Url = ""https://bitplatform.dev/"" },
             new()
             {
                 Text = ""Products & Services"",
@@ -380,18 +406,18 @@ public class Section
                         Text = ""Project Templates"",
                         Links =
                         [
-                            new() { Text = ""Todo sample"", Icon = BitIconName.ToDoLogoOutline, Url = ""https://bitplatform.dev/templates/overview"" },
-                            new() { Text = ""AdminPanel sample"", Icon = BitIconName.LocalAdmin, Url = ""https://bitplatform.dev/templates/overview"" },
+                            new() { Text = ""Todo sample"", ImageName = BitIconName.ToDoLogoOutline, Url = ""https://bitplatform.dev/templates/overview"" },
+                            new() { Text = ""AdminPanel sample"", ImageName = BitIconName.LocalAdmin, Url = ""https://bitplatform.dev/templates/overview"" },
                         ]
                     },
-                    new() { Text = ""BlazorUI"", Icon = BitIconName.F12DevTools, Url = ""https://bitplatform.dev/components"" },
-                    new() { Text = ""Cloud hosting solutions"", Icon = BitIconName.Cloud, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
-                    new() { Text = ""Bit academy"", Icon = BitIconName.LearningTools, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
+                    new() { Text = ""BlazorUI"", ImageName = BitIconName.F12DevTools, Url = ""https://bitplatform.dev/components"" },
+                    new() { Text = ""Cloud hosting solutions"", ImageName = BitIconName.Cloud, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
+                    new() { Text = ""Bit academy"", ImageName = BitIconName.LearningTools, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
                 ]
             },
-            new() { Text = ""Pricing"", Icon = BitIconName.Money, Url = ""https://bitplatform.dev/pricing"" },
-            new() { Text = ""About"", Icon = BitIconName.Info, Url = ""https://bitplatform.dev/about-us"" },
-            new() { Text = ""Contact us"", Icon = BitIconName.Contact, Url = ""https://bitplatform.dev/contact-us"" },
+            new() { Text = ""Pricing"", ImageName = BitIconName.Money, Url = ""https://bitplatform.dev/pricing"" },
+            new() { Text = ""About"", ImageName = BitIconName.Info, Url = ""https://bitplatform.dev/about-us"" },
+            new() { Text = ""Contact us"", ImageName = BitIconName.Contact, Url = ""https://bitplatform.dev/contact-us"" },
         ],
     },
     new()
@@ -399,27 +425,28 @@ public class Section
         Text = ""Community"",
         Links =
         [
-            new() { Text = ""Linkedin"", Icon = BitIconName.LinkedInLogo, Url = ""https://www.linkedin.com/company/bitplatformhq"" },
-            new() { Text = ""Twitter"", Icon = BitIconName.Globe, Url = ""https://twitter.com/bitplatformhq"" },
-            new() { Text = ""Github repo"", Icon = BitIconName.GitGraph, Url = ""https://github.com/bitfoundation/bitplatform"" },
+            new() { Text = ""Linkedin"", ImageName = BitIconName.LinkedInLogo, Url = ""https://www.linkedin.com/company/bitplatformhq"" },
+            new() { Text = ""Twitter"", ImageName = BitIconName.Globe, Url = ""https://twitter.com/bitplatformhq"" },
+            new() { Text = ""Github repo"", ImageName = BitIconName.GitGraph, Url = ""https://github.com/bitfoundation/bitplatform"" },
         ]
     },
-    new() { Text = ""Iconography"", Icon = BitIconName.AppIconDefault, Url = ""/iconography"" },
+    new() { Text = ""Iconography"", ImageName = BitIconName.AppIconDefault, Url = ""/iconography"" },
 ];";
 
     private readonly string example2RazorCode = @"
 <BitNav Items=""customBasicNavItems"" FitWidth
-        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.Icon) },
+        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                  ChildItems =  { Name = nameof(Section.Links) },
                                  Description =  { Name = nameof(Section.Comment) } })"" />";
     private readonly string example2CsharpCode = @"
 public class Section
 {
     public string Text { get; set; } = string.Empty;
-    public string? Icon { get; set; }
+    public string? ImageName { get; set; }
     public string? Url { get; set; }
     public bool IsEnabled { get; set; } = true;
     public bool IsExpanded { get; set; }
+    public string? Comment { get; set; }
     public List<Section> Links { get; set; } = [];
 }
 
@@ -431,7 +458,7 @@ public class Section
         Comment = ""the bit platform description"",
         Links =
         [
-            new() { Text = ""Home"", Icon = BitIconName.Home, Url = ""https://bitplatform.dev/"" },
+            new() { Text = ""Home"", ImageName = BitIconName.Home, Url = ""https://bitplatform.dev/"" },
             new()
             {
                 Text = ""Products & Services"",
@@ -442,18 +469,18 @@ public class Section
                         Text = ""Project Templates"",
                         Links =
                         [
-                            new() { Text = ""Todo sample"", Icon = BitIconName.ToDoLogoOutline, Url = ""https://bitplatform.dev/templates/overview"" },
-                            new() { Text = ""AdminPanel sample"", Icon = BitIconName.LocalAdmin, Url = ""https://bitplatform.dev/templates/overview"" },
+                            new() { Text = ""Todo sample"", ImageName = BitIconName.ToDoLogoOutline, Url = ""https://bitplatform.dev/templates/overview"" },
+                            new() { Text = ""AdminPanel sample"", ImageName = BitIconName.LocalAdmin, Url = ""https://bitplatform.dev/templates/overview"" },
                         ]
                     },
-                    new() { Text = ""BlazorUI"", Icon = BitIconName.F12DevTools, Url = ""https://bitplatform.dev/components"" },
-                    new() { Text = ""Cloud hosting solutions"", Icon = BitIconName.Cloud, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
-                    new() { Text = ""Bit academy"", Icon = BitIconName.LearningTools, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
+                    new() { Text = ""BlazorUI"", ImageName = BitIconName.F12DevTools, Url = ""https://bitplatform.dev/components"" },
+                    new() { Text = ""Cloud hosting solutions"", ImageName = BitIconName.Cloud, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
+                    new() { Text = ""Bit academy"", ImageName = BitIconName.LearningTools, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
                 ]
             },
-            new() { Text = ""Pricing"", Icon = BitIconName.Money, Url = ""https://bitplatform.dev/pricing"" },
-            new() { Text = ""About"", Icon = BitIconName.Info, Url = ""https://bitplatform.dev/about-us"" },
-            new() { Text = ""Contact us"", Icon = BitIconName.Contact, Url = ""https://bitplatform.dev/contact-us"" },
+            new() { Text = ""Pricing"", ImageName = BitIconName.Money, Url = ""https://bitplatform.dev/pricing"" },
+            new() { Text = ""About"", ImageName = BitIconName.Info, Url = ""https://bitplatform.dev/about-us"" },
+            new() { Text = ""Contact us"", ImageName = BitIconName.Contact, Url = ""https://bitplatform.dev/contact-us"" },
         ],
     },
     new()
@@ -461,12 +488,12 @@ public class Section
         Text = ""Community"",
         Links =
         [
-            new() { Text = ""Linkedin"", Icon = BitIconName.LinkedInLogo, Url = ""https://www.linkedin.com/company/bitplatformhq"" },
-            new() { Text = ""Twitter"", Icon = BitIconName.Globe, Url = ""https://twitter.com/bitplatformhq"" },
-            new() { Text = ""Github repo"", Icon = BitIconName.GitGraph, Url = ""https://github.com/bitfoundation/bitplatform"" },
+            new() { Text = ""Linkedin"", ImageName = BitIconName.LinkedInLogo, Url = ""https://www.linkedin.com/company/bitplatformhq"" },
+            new() { Text = ""Twitter"", ImageName = BitIconName.Globe, Url = ""https://twitter.com/bitplatformhq"" },
+            new() { Text = ""Github repo"", ImageName = BitIconName.GitGraph, Url = ""https://github.com/bitfoundation/bitplatform"" },
         ]
     },
-    new() { Text = ""Iconography"", Icon = BitIconName.AppIconDefault, Url = ""/iconography"" },
+    new() { Text = ""Iconography"", ImageName = BitIconName.AppIconDefault, Url = ""/iconography"" },
 ];";
 
     private readonly string example3RazorCode = @"
@@ -491,6 +518,7 @@ public class CarMenu
     public string ExpandedAriaLabel { get; set; }
     public string CollapsedAriaLabel { get; set; }
     public bool IsExpandedParent { get; set; }
+    public string? Comment { get; set; }
     public List<CarMenu> Links { get; set; } = [];
 }
 
@@ -558,7 +586,7 @@ public class CarMenu
         Mode=""BitNavMode.Manual""
         DefaultSelectedItem=""customCarNavItems[0].Childs[2]""
         NameSelectors=""@(new() { Text =  { Selector = item => item.Name },
-                                 IconName =  { Selector = item => item.Icon },
+                                 IconName =  { Selector = item => item.Image },
                                  ChildItems =  { Selector = item => item.Childs },
                                  Description =  { Selector = item => item.Comment } })"" />
 
@@ -568,7 +596,7 @@ public class CarMenu
         Mode=""BitNavMode.Manual""
         DefaultSelectedItem=""customCarNavItems[0].Childs[2]""
         NameSelectors=""@(new() { Text =  { Selector = item => item.Name },
-                                 IconName =  { Selector = item => item.Icon },
+                                 IconName =  { Selector = item => item.Image },
                                  ChildItems =  { Selector = item => item.Childs },
                                  Description =  { Selector = item => item.Comment } })""
         OnSelectItem=""(FoodMenu item) => CustomSelectedFoodName = FoodMenuDropdownItems.Single(i => i.Text == item.Name).Text"" />
@@ -581,8 +609,9 @@ public class CarMenu
 public class FoodMenu
 {
     public string Name { get; set; } = string.Empty;
-    public string Icon { get; set; }
+    public string Image { get; set; }
     public bool IsExpanded { get; set; }
+    public string? Comment { get; set; }
     public List<FoodMenu> Childs { get; set; } = [];
 }
 
@@ -591,7 +620,7 @@ public class FoodMenu
     new()
     {
         Name = ""Fast foods"",
-        Icon = BitIconName.HeartBroken,
+        Image = BitIconName.HeartBroken,
         IsExpanded = true,
         Comment = ""List of fast foods"",
         Childs =
@@ -625,7 +654,7 @@ public class FoodMenu
     new()
     {
         Name = ""Fruits"",
-        Icon = BitIconName.Health,
+        Image = BitIconName.Health,
         Childs =
         [
             new() { Name = ""Apple"" },
@@ -662,7 +691,7 @@ public class FoodMenu
     private readonly string example5RazorCode = @"
 <BitToggle @bind-Value=""iconOnly"" Label=""Hide texts?"" Inline />
 <BitNav Items=""customIconOnlyNavItems"" Mode=""BitNavMode.Manual"" IconOnly=""iconOnly""
-        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.Icon) },
+        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                  ChildItems =  { Name = nameof(Section.Links) },
                                  Description =  { Name = nameof(Section.Comment) } })"" />";
     private readonly string example5CsharpCode = @"
@@ -671,30 +700,31 @@ public class FoodMenu
 public class Section
 {
     public string Text { get; set; } = string.Empty;
-    public string? Icon { get; set; }
+    public string? ImageName { get; set; }
     public string? Url { get; set; }
     public bool IsEnabled { get; set; } = true;
     public bool IsExpanded { get; set; }
+    public string? Comment { get; set; }
     public List<Section> Links { get; set; } = [];
 }
 
 private static readonly List<Section> customIconOnlyNavItems =
 [
-    new() { Text = ""Home"", Icon = BitIconName.Home },
+    new() { Text = ""Home"", ImageName = BitIconName.Home },
     new() {
         Text = ""AdminPanel sample"",
-        Icon = BitIconName.LocalAdmin,
+        ImageName = BitIconName.LocalAdmin,
         Links =
         [
-            new() { Text = ""Dashboard"", Icon = BitIconName.ViewDashboard },
-            new() { Text = ""Categories"", Icon = BitIconName.BuildQueue },
-            new() { Text = ""Products"", Icon = BitIconName.Product },
+            new() { Text = ""Dashboard"", ImageName = BitIconName.ViewDashboard },
+            new() { Text = ""Categories"", ImageName = BitIconName.BuildQueue },
+            new() { Text = ""Products"", ImageName = BitIconName.Product },
         ]
     },
-    new() { Text = ""Todo sample"", Icon = BitIconName.ToDoLogoOutline},
-    new() { Text = ""BlazorUI"", Icon = BitIconName.F12DevTools },
-    new() { Text = ""Bit academy"", Icon = BitIconName.LearningTools, IsEnabled = false },
-    new() { Text = ""Contact us"", Icon = BitIconName.Contact },
+    new() { Text = ""Todo sample"", ImageName = BitIconName.ToDoLogoOutline},
+    new() { Text = ""BlazorUI"", ImageName = BitIconName.F12DevTools },
+    new() { Text = ""Bit academy"", ImageName = BitIconName.LearningTools, IsEnabled = false },
+    new() { Text = ""Contact us"", ImageName = BitIconName.Contact },
 ];";
 
     private readonly string example6RazorCode = @"
@@ -736,10 +766,10 @@ public class Section
 
 
 
-<BitNav Items=""customCarNavItems""
+<BitNav Items=""customFoodNavItems""
         Mode=""BitNavMode.Manual""
         NameSelectors=""@(new() { Text =  { Selector = item => item.Name },
-                                 IconName =  { Selector = item => item.Icon },
+                                 IconName =  { Selector = item => item.Image },
                                  ChildItems =  { Selector = item => item.Childs },
                                  Description =  { Selector = item => item.Comment } })"">
     <ItemTemplate Context=""item"">
@@ -760,14 +790,16 @@ public class CarMenu
     public string ExpandedAriaLabel { get; set; }
     public string CollapsedAriaLabel { get; set; }
     public bool IsExpandedParent { get; set; }
+    public string? Comment { get; set; }
     public List<CarMenu> Links { get; set; } = [];
 }
 
 public class FoodMenu
 {
     public string Name { get; set; } = string.Empty;
-    public string Icon { get; set; }
+    public string Image { get; set; }
     public bool IsExpanded { get; set; }
+    public string? Comment { get; set; }
     public List<FoodMenu> Childs { get; set; } = [];
 }
 
@@ -830,12 +862,12 @@ public class FoodMenu
     },
 ];
 
-private static readonly List<FoodMenu> customCarNavItems =
+private static readonly List<FoodMenu> customFoodNavItems =
 [
     new()
     {
         Name = ""Fast foods"",
-        Icon = BitIconName.HeartBroken,
+        Image = BitIconName.HeartBroken,
         IsExpanded = true,
         Comment = ""List of fast foods"",
         Childs =
@@ -869,7 +901,7 @@ public class FoodMenu
     new()
     {
         Name = ""Fruits"",
-        Icon = BitIconName.Health,
+        Image = BitIconName.Health,
         Childs =
         [
             new() { Name = ""Apple"" },
@@ -882,13 +914,13 @@ public class FoodMenu
 ];";
 
     private readonly string example7RazorCode = @"
-<BitNav Items=""customCarNavItems""
+<BitNav Items=""customFoodNavItems""
         Mode=""BitNavMode.Manual""
         OnItemClick=""(FoodMenu item) => CustomClickedItem = item""
         OnSelectItem=""(FoodMenu item) => CustomSelectedItem = item""
         OnItemToggle=""(FoodMenu item) => CustomToggledItem = item""
         NameSelectors=""@(new() { Text =  { Selector = item => item.Name },
-                                 IconName =  { Selector = item => item.Icon },
+                                 IconName =  { Selector = item => item.Image },
                                  ChildItems =  { Selector = item => item.Childs },
                                  Description =  { Selector = item => item.Comment } })"" />
 <div>Clicked Item: @CustomClickedItem?.Name</div>
@@ -898,8 +930,9 @@ public class FoodMenu
 public class FoodMenu
 {
     public string Name { get; set; } = string.Empty;
-    public string Icon { get; set; }
+    public string Image { get; set; }
     public bool IsExpanded { get; set; }
+    public string? Comment { get; set; }
     public List<FoodMenu> Childs { get; set; } = [];
 }
 
@@ -908,7 +941,7 @@ public class FoodMenu
     new()
     {
         Name = ""Fast foods"",
-        Icon = BitIconName.HeartBroken,
+        Image = BitIconName.HeartBroken,
         IsExpanded = true,
         Comment = ""List of fast foods"",
         Childs =
@@ -942,7 +975,7 @@ public class FoodMenu
     new()
     {
         Name = ""Fruits"",
-        Icon = BitIconName.Health,
+        Image = BitIconName.Health,
         Childs =
         [
             new() { Name = ""Apple"" },
@@ -961,17 +994,18 @@ public class FoodMenu
     private readonly string example8RazorCode = @"
 <BitNav AllExpanded NoCollapse
         Items=""customBasicNavItems""
-        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.Icon) },
+        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                  ChildItems =  { Name = nameof(Section.Links) },
                                  Description =  { Name = nameof(Section.Comment) } })"" />";
     private readonly string example8CsharpCode = @"
 public class Section
 {
     public string Text { get; set; } = string.Empty;
-    public string? Icon { get; set; }
+    public string? ImageName { get; set; }
     public string? Url { get; set; }
     public bool IsEnabled { get; set; } = true;
     public bool IsExpanded { get; set; }
+    public string? Comment { get; set; }
     public List<Section> Links { get; set; } = [];
 }
 
@@ -983,7 +1017,7 @@ public class Section
         Comment = ""the bit platform description"",
         Links =
         [
-            new() { Text = ""Home"", Icon = BitIconName.Home, Url = ""https://bitplatform.dev/"" },
+            new() { Text = ""Home"", ImageName = BitIconName.Home, Url = ""https://bitplatform.dev/"" },
             new()
             {
                 Text = ""Products & Services"",
@@ -994,18 +1028,18 @@ public class Section
                         Text = ""Project Templates"",
                         Links =
                         [
-                            new() { Text = ""Todo sample"", Icon = BitIconName.ToDoLogoOutline, Url = ""https://bitplatform.dev/templates/overview"" },
-                            new() { Text = ""AdminPanel sample"", Icon = BitIconName.LocalAdmin, Url = ""https://bitplatform.dev/templates/overview"" },
+                            new() { Text = ""Todo sample"", ImageName = BitIconName.ToDoLogoOutline, Url = ""https://bitplatform.dev/templates/overview"" },
+                            new() { Text = ""AdminPanel sample"", ImageName = BitIconName.LocalAdmin, Url = ""https://bitplatform.dev/templates/overview"" },
                         ]
                     },
-                    new() { Text = ""BlazorUI"", Icon = BitIconName.F12DevTools, Url = ""https://bitplatform.dev/components"" },
-                    new() { Text = ""Cloud hosting solutions"", Icon = BitIconName.Cloud, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
-                    new() { Text = ""Bit academy"", Icon = BitIconName.LearningTools, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
+                    new() { Text = ""BlazorUI"", ImageName = BitIconName.F12DevTools, Url = ""https://bitplatform.dev/components"" },
+                    new() { Text = ""Cloud hosting solutions"", ImageName = BitIconName.Cloud, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
+                    new() { Text = ""Bit academy"", ImageName = BitIconName.LearningTools, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
                 ]
             },
-            new() { Text = ""Pricing"", Icon = BitIconName.Money, Url = ""https://bitplatform.dev/pricing"" },
-            new() { Text = ""About"", Icon = BitIconName.Info, Url = ""https://bitplatform.dev/about-us"" },
-            new() { Text = ""Contact us"", Icon = BitIconName.Contact, Url = ""https://bitplatform.dev/contact-us"" },
+            new() { Text = ""Pricing"", ImageName = BitIconName.Money, Url = ""https://bitplatform.dev/pricing"" },
+            new() { Text = ""About"", ImageName = BitIconName.Info, Url = ""https://bitplatform.dev/about-us"" },
+            new() { Text = ""Contact us"", ImageName = BitIconName.Contact, Url = ""https://bitplatform.dev/contact-us"" },
         ],
     },
     new()
@@ -1013,31 +1047,78 @@ public class Section
         Text = ""Community"",
         Links =
         [
-            new() { Text = ""Linkedin"", Icon = BitIconName.LinkedInLogo, Url = ""https://www.linkedin.com/company/bitplatformhq"" },
-            new() { Text = ""Twitter"", Icon = BitIconName.Globe, Url = ""https://twitter.com/bitplatformhq"" },
-            new() { Text = ""Github repo"", Icon = BitIconName.GitGraph, Url = ""https://github.com/bitfoundation/bitplatform"" },
+            new() { Text = ""Linkedin"", ImageName = BitIconName.LinkedInLogo, Url = ""https://www.linkedin.com/company/bitplatformhq"" },
+            new() { Text = ""Twitter"", ImageName = BitIconName.Globe, Url = ""https://twitter.com/bitplatformhq"" },
+            new() { Text = ""Github repo"", ImageName = BitIconName.GitGraph, Url = ""https://github.com/bitfoundation/bitplatform"" },
         ]
     },
-    new() { Text = ""Iconography"", Icon = BitIconName.AppIconDefault, Url = ""/iconography"" },
+    new() { Text = ""Iconography"", ImageName = BitIconName.AppIconDefault, Url = ""/iconography"" },
 ];";
 
     private readonly string example9RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+
+<BitNav Items=""customExternalIconNavItems""
+        NameSelectors=""@(new() { Text =  { Name = nameof(Section.Text) },
+                                 Icon =  { Name = nameof(Section.ImageName) },
+                                 Url =  { Name = nameof(Section.Url) },
+                                 ChildItems =  { Name = nameof(Section.Links) },
+                                 Description =  { Name = nameof(Section.Comment) } })"" />";
+    private readonly string example9CsharpCode = @"
+public class Section
+{
+    public string Text { get; set; } = string.Empty;
+    public string? ImageName { get; set; }
+    public string? Url { get; set; }
+    public bool IsEnabled { get; set; } = true;
+    public bool IsExpanded { get; set; }
+    public string? Comment { get; set; }
+    public List<Section> Links { get; set; } = [];
+}
+
+private static readonly List<Section> customExternalIconNavItems =
+[
+    new()
+    {
+        Text = ""bit platform"",
+        Comment = ""Nav with external icons (FontAwesome)"",
+        Links =
+        [
+            new() { Text = ""Home"", ImageName = BitIconInfo.Css(""fa-solid fa-house""), Url = ""https://bitplatform.dev/"" },
+            new()
+            {
+                Text = ""Products & Services"",
+                Links =
+                [
+                    new() { Text = ""BlazorUI"", ImageName = BitIconInfo.Fa(""solid code""), Url = ""https://bitplatform.dev/components"" },
+                    new() { Text = ""Pricing"", ImageName = BitIconInfo.Css(""fa-solid fa-tag""), Url = ""https://bitplatform.dev/pricing"" },
+                ]
+            },
+            new() { Text = ""About"", ImageName = BitIconInfo.Fa(""solid circle-info""), Url = ""https://bitplatform.dev/about-us"" },
+            new() { Text = ""Contact us"", ImageName = BitIconInfo.Css(""fa-solid fa-envelope""), Url = ""https://bitplatform.dev/contact-us"" },
+        ],
+    },
+    new() { Text = ""Iconography"", ImageName = BitIconInfo.Css(""fa-solid fa-icons""), Url = ""/iconography"" },
+];";
+
+    private readonly string example10RazorCode = @"
 <BitNav Items=""customCustomStyleNavItems""
-        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.Icon) },
+        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                  ChildItems =  { Name = nameof(Section.Links) },
                                  Description =  { Name = nameof(Section.Comment) } })""
         Styles=""@(new() { ItemContainer = ""border: 1px solid green; margin: 2px;"",
                           ToggleButton = ""color: cyan;"",
                           Item = ""color: red;"",
                           ItemIcon = ""color: gold; margin-right: 15px;"" })"" />";
-    private readonly string example9CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 public class Section
 {
     public string Text { get; set; } = string.Empty;
-    public string? Icon { get; set; }
+    public string? ImageName { get; set; }
     public string? Url { get; set; }
     public bool IsEnabled { get; set; } = true;
     public bool IsExpanded { get; set; }
+    public string? Comment { get; set; }
     public List<Section> Links { get; set; } = [];
 }
 
@@ -1049,7 +1130,7 @@ public class Section
         Comment = ""the bit platform description"",
         Links =
         [
-            new() { Text = ""Home"", Icon = BitIconName.Home, Url = ""https://bitplatform.dev/"" },
+            new() { Text = ""Home"", ImageName = BitIconName.Home, Url = ""https://bitplatform.dev/"" },
             new()
             {
                 Text = ""Products & Services"",
@@ -1060,18 +1141,18 @@ public class Section
                         Text = ""Project Templates"",
                         Links =
                         [
-                            new() { Text = ""Todo sample"", Icon = BitIconName.ToDoLogoOutline, Url = ""https://bitplatform.dev/templates/overview"" },
-                            new() { Text = ""AdminPanel sample"", Icon = BitIconName.LocalAdmin, Url = ""https://bitplatform.dev/templates/overview"" },
+                            new() { Text = ""Todo sample"", ImageName = BitIconName.ToDoLogoOutline, Url = ""https://bitplatform.dev/templates/overview"" },
+                            new() { Text = ""AdminPanel sample"", ImageName = BitIconName.LocalAdmin, Url = ""https://bitplatform.dev/templates/overview"" },
                         ]
                     },
-                    new() { Text = ""BlazorUI"", Icon = BitIconName.F12DevTools, Url = ""https://bitplatform.dev/components"" },
-                    new() { Text = ""Cloud hosting solutions"", Icon = BitIconName.Cloud, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
-                    new() { Text = ""Bit academy"", Icon = BitIconName.LearningTools, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
+                    new() { Text = ""BlazorUI"", ImageName = BitIconName.F12DevTools, Url = ""https://bitplatform.dev/components"" },
+                    new() { Text = ""Cloud hosting solutions"", ImageName = BitIconName.Cloud, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
+                    new() { Text = ""Bit academy"", ImageName = BitIconName.LearningTools, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
                 ]
             },
-            new() { Text = ""Pricing"", Icon = BitIconName.Money, Url = ""https://bitplatform.dev/pricing"" },
-            new() { Text = ""About"", Icon = BitIconName.Info, Url = ""https://bitplatform.dev/about-us"" },
-            new() { Text = ""Contact us"", Icon = BitIconName.Contact, Url = ""https://bitplatform.dev/contact-us"" },
+            new() { Text = ""Pricing"", ImageName = BitIconName.Money, Url = ""https://bitplatform.dev/pricing"" },
+            new() { Text = ""About"", ImageName = BitIconName.Info, Url = ""https://bitplatform.dev/about-us"" },
+            new() { Text = ""Contact us"", ImageName = BitIconName.Contact, Url = ""https://bitplatform.dev/contact-us"" },
         ],
     },
     new()
@@ -1079,28 +1160,29 @@ public class Section
         Text = ""Community"",
         Links =
         [
-            new() { Text = ""Linkedin"", Icon = BitIconName.LinkedInLogo, Url = ""https://www.linkedin.com/company/bitplatformhq"" },
-            new() { Text = ""Twitter"", Icon = BitIconName.Globe, Url = ""https://twitter.com/bitplatformhq"" },
-            new() { Text = ""Github repo"", Icon = BitIconName.GitGraph, Url = ""https://github.com/bitfoundation/bitplatform"" },
+            new() { Text = ""Linkedin"", ImageName = BitIconName.LinkedInLogo, Url = ""https://www.linkedin.com/company/bitplatformhq"" },
+            new() { Text = ""Twitter"", ImageName = BitIconName.Globe, Url = ""https://twitter.com/bitplatformhq"" },
+            new() { Text = ""Github repo"", ImageName = BitIconName.GitGraph, Url = ""https://github.com/bitfoundation/bitplatform"" },
         ]
     },
-    new() { Text = ""Iconography"", Icon = BitIconName.AppIconDefault, Url = ""/iconography"" },
+    new() { Text = ""Iconography"", ImageName = BitIconName.AppIconDefault, Url = ""/iconography"" },
 ];";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 <BitNav Dir=""BitDir.Rtl""
         Items=""customRtlNavItems""
-        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.Icon) },
+        NameSelectors=""@(new() { IconName =  { Name = nameof(Section.ImageName) },
                                  ChildItems =  { Name = nameof(Section.Links) },
                                  Description =  { Name = nameof(Section.Comment) } })"" />";
-    private readonly string example10CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 public class Section
 {
     public string Text { get; set; } = string.Empty;
-    public string? Icon { get; set; }
+    public string? ImageName { get; set; }
     public string? Url { get; set; }
     public bool IsEnabled { get; set; } = true;
     public bool IsExpanded { get; set; }
+    public string? Comment { get; set; }
     public List<Section> Links { get; set; } = [];
 }
 
@@ -1112,7 +1194,7 @@ public class Section
         Comment = ""توضیحاتِ پلتفرمِ بیت"",
         Links =
         [
-            new() { Text = ""خانه"", Icon = BitIconName.Home, Url = ""https://bitplatform.dev/"" },
+            new() { Text = ""خانه"", ImageName = BitIconName.Home, Url = ""https://bitplatform.dev/"" },
             new()
             {
                 Text = ""محصولات و خدمات"",
@@ -1123,18 +1205,18 @@ public class Section
                         Text = ""قالب های پروژه"",
                         Links =
                         [
-                            new() { Text = ""نمونه ی Todo"", Icon = BitIconName.ToDoLogoOutline, Url = ""https://bitplatform.dev/templates/overview"" },
-                            new() { Text = ""نمونه ی AdminPanel"", Icon = BitIconName.LocalAdmin, Url = ""https://bitplatform.dev/templates/overview"" },
+                            new() { Text = ""نمونه ی Todo"", ImageName = BitIconName.ToDoLogoOutline, Url = ""https://bitplatform.dev/templates/overview"" },
+                            new() { Text = ""نمونه ی AdminPanel"", ImageName = BitIconName.LocalAdmin, Url = ""https://bitplatform.dev/templates/overview"" },
                         ]
                     },
-                    new() { Text = ""رابط کاربری Blazor"", Icon = BitIconName.F12DevTools, Url = ""https://blazorui.bitplatform.dev/"" },
-                    new() { Text = ""راه های هاست ابری"", Icon = BitIconName.Cloud, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
-                    new() { Text = ""آکادمی بیت"", Icon = BitIconName.LearningTools, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
+                    new() { Text = ""رابط کاربری Blazor"", ImageName = BitIconName.F12DevTools, Url = ""https://blazorui.bitplatform.dev/"" },
+                    new() { Text = ""راه های هاست ابری"", ImageName = BitIconName.Cloud, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
+                    new() { Text = ""آکادمی بیت"", ImageName = BitIconName.LearningTools, Url = ""https://bitplatform.dev/#"", IsEnabled = false },
                 ]
             },
-            new() { Text = ""قیمت"", Icon = BitIconName.Money, Url = ""https://bitplatform.dev/pricing"" },
-            new() { Text = ""درباره ما"", Icon = BitIconName.Info, Url = ""https://bitplatform.dev/about-us"" },
-            new() { Text = ""ارتباط با ما"", Icon = BitIconName.Contact, Url = ""https://bitplatform.dev/contact-us"" },
+            new() { Text = ""قیمت"", ImageName = BitIconName.Money, Url = ""https://bitplatform.dev/pricing"" },
+            new() { Text = ""درباره ما"", ImageName = BitIconName.Info, Url = ""https://bitplatform.dev/about-us"" },
+            new() { Text = ""ارتباط با ما"", ImageName = BitIconName.Contact, Url = ""https://bitplatform.dev/contact-us"" },
         ],
     },
     new()
@@ -1142,11 +1224,11 @@ public class Section
         Text = ""انجمن ها"",
         Links =
         [
-            new() { Text = ""لینکدین"", Icon = BitIconName.LinkedInLogo, Url = ""https://www.linkedin.com/company/bitplatformhq"" },
-            new() { Text = ""توییتر"", Icon = BitIconName.Globe, Url = ""https://twitter.com/bitplatformhq"" },
-            new() { Text = ""گیتهاب"", Icon = BitIconName.GitGraph, Url = ""https://github.com/bitfoundation/bitplatform"" },
+            new() { Text = ""لینکدین"", ImageName = BitIconName.LinkedInLogo, Url = ""https://www.linkedin.com/company/bitplatformhq"" },
+            new() { Text = ""توییتر"", ImageName = BitIconName.Globe, Url = ""https://twitter.com/bitplatformhq"" },
+            new() { Text = ""گیتهاب"", ImageName = BitIconName.GitGraph, Url = ""https://github.com/bitfoundation/bitplatform"" },
         ]
     },
-    new() { Text = ""شمایل نگاری"", Icon = BitIconName.AppIconDefault, Url = ""/iconography"" },
+    new() { Text = ""شمایل نگاری"", ImageName = BitIconName.AppIconDefault, Url = ""/iconography"" },
 ];";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavItemDemo.razor
index 1212198628..ec601a6c8f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavItemDemo.razor
@@ -1,4 +1,4 @@
-<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
     <BitNav Items="basicNavItems" />
 </DemoExample>
 
@@ -80,6 +80,18 @@
     <BitNav Items="noCollapseNavItems" AllExpanded NoCollapse />
 </DemoExample>
 
+<DemoExample Title="External Icons" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+    <div>
+        Use icons from external libraries like FontAwesome with the <BitLink Href="#bit-icon-info">Icon</BitLink> parameter 
+        (<BitLink Href="#nav-item">BitNavItem</BitLink>.<BitLink Href="#bit-icon-info">Icon</BitLink>). 
+        See the <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> section in the parameters table for usage. 
+        Built-in Fluent UI icons use <BitLink Href="#nav-item">IconName</BitLink>.
+    </div>
+    <br />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <BitNav Items="externalIconNavItems" />
+</DemoExample>
+
 <DemoExample Title="Custom Styles" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
     <BitNav Items="customStyleNavItems"
             Styles="@(new() { ItemContainer = "border: 1px solid green; margin: 2px;",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavItemDemo.razor.cs
index 5790364bb4..6699c9ed89 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavItemDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavItemDemo.razor.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Navs.Nav;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Navs.Nav;
 
 public partial class _BitNavItemDemo
 {
@@ -177,6 +177,31 @@ public partial class _BitNavItemDemo
         new() { Text = "Cookie" },
     ];
 
+    private static readonly List<BitNavItem> externalIconNavItems =
+    [
+        new()
+        {
+            Text = "bit platform",
+            Description = "Nav with external icons (FontAwesome)",
+            ChildItems =
+            [
+                new() { Text = "Home", Icon = BitIconInfo.Css("fa-solid fa-house"), Url = "https://bitplatform.dev/" },
+                new()
+                {
+                    Text = "Products & Services",
+                    ChildItems =
+                    [
+                        new() { Text = "BlazorUI", Icon = BitIconInfo.Fa("solid code"), Url = "https://bitplatform.dev/components" },
+                        new() { Text = "Pricing", Icon = BitIconInfo.Css("fa-solid fa-tag"), Url = "https://bitplatform.dev/pricing" },
+                    ]
+                },
+                new() { Text = "About", Icon = BitIconInfo.Fa("solid circle-info"), Url = "https://bitplatform.dev/about-us" },
+                new() { Text = "Contact us", Icon = BitIconInfo.Css("fa-solid fa-envelope"), Url = "https://bitplatform.dev/contact-us" },
+            ],
+        },
+        new() { Text = "Iconography", Icon = BitIconInfo.Css("fa-solid fa-icons"), Url = "/iconography" },
+    ];
+
     private static readonly List<BitNavItem> noCollapseNavItems =
     [
         new()
@@ -940,6 +965,36 @@ public partial class _BitNavItemDemo
     new() { Text = ""Iconography"", IconName = BitIconName.AppIconDefault, Url = ""/iconography"" },
 ];";
 
+    private readonly string example11RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+
+<BitNav Items=""externalIconNavItems"" />";
+    private readonly string example11CsharpCode = @"
+private static readonly List<BitNavItem> externalIconNavItems =
+[
+    new()
+    {
+        Text = ""bit platform"",
+        Description = ""Nav with external icons (FontAwesome)"",
+        ChildItems =
+        [
+            new() { Text = ""Home"", Icon = BitIconInfo.Css(""fa-solid fa-house""), Url = ""https://bitplatform.dev/"" },
+            new()
+            {
+                Text = ""Products & Services"",
+                ChildItems =
+                [
+                    new() { Text = ""BlazorUI"", Icon = BitIconInfo.Fa(""solid code""), Url = ""https://bitplatform.dev/components"" },
+                    new() { Text = ""Pricing"", Icon = BitIconInfo.Css(""fa-solid fa-tag""), Url = ""https://bitplatform.dev/pricing"" },
+                ]
+            },
+            new() { Text = ""About"", Icon = BitIconInfo.Fa(""solid circle-info""), Url = ""https://bitplatform.dev/about-us"" },
+            new() { Text = ""Contact us"", Icon = BitIconInfo.Css(""fa-solid fa-envelope""), Url = ""https://bitplatform.dev/contact-us"" },
+        ],
+    },
+    new() { Text = ""Iconography"", Icon = BitIconInfo.Css(""fa-solid fa-icons""), Url = ""/iconography"" },
+];";
+
     private readonly string example9RazorCode = @"
 <BitNav Items=""customStyleNavItems""
         Styles=""@(new() { ItemContainer = ""border: 1px solid green; margin: 2px;"",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavOptionDemo.razor
index 194f889fa9..ddd7f7158f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavOptionDemo.razor
@@ -1,4 +1,4 @@
-<DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
+<DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
     <BitNav TItem="BitNavOption">
         <BitNavOption Text="bit platform"
                       Description="the bit platform description"
@@ -327,7 +327,25 @@
     </BitNav>
 </DemoExample>
 
-<DemoExample Title="Custom Styles" RazorCode="@example9RazorCode" Id="example9">
+<DemoExample Title="External Icons" RazorCode="@example9RazorCode" Id="example9">
+    <div>Use icons from external libraries like FontAwesome with the <BitLink Href="#bit-icon-info">Icon</BitLink> parameter (<BitLink Href="#nav-option">BitNavOption</BitLink>.<BitLink Href="#bit-icon-info">Icon</BitLink>). See the <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> section in the parameters table for usage. Built-in Fluent UI icons use <BitLink Href="#nav-option">IconName</BitLink>.</div>
+    <br />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <BitNav TItem="BitNavOption">
+        <BitNavOption Text="bit platform" Description="Nav with external icons (FontAwesome)">
+            <BitNavOption Text="Home" Icon="@BitIconInfo.Css("fa-solid fa-house")" Url="https://bitplatform.dev/" Target="_blank" />
+            <BitNavOption Text="Products & Services">
+                <BitNavOption Text="BlazorUI" Icon="@BitIconInfo.Fa("solid code")" Url="https://bitplatform.dev/components" Target="_blank" />
+                <BitNavOption Text="Pricing" Icon="@BitIconInfo.Css("fa-solid fa-tag")" Url="https://bitplatform.dev/pricing" Target="_blank" />
+            </BitNavOption>
+            <BitNavOption Text="About" Icon="@BitIconInfo.Fa("solid circle-info")" Url="https://bitplatform.dev/about-us" Target="_blank" />
+            <BitNavOption Text="Contact us" Icon="@BitIconInfo.Css("fa-solid fa-envelope")" Url="https://bitplatform.dev/contact-us" Target="_blank" />
+        </BitNavOption>
+        <BitNavOption Text="Iconography" Icon="@BitIconInfo.Css("fa-solid fa-icons")" Url="/iconography" Target="_blank" />
+    </BitNav>
+</DemoExample>
+
+<DemoExample Title="Custom Styles" RazorCode="@example10RazorCode" Id="example10">
     <BitNav TItem="BitNavOption"
             Styles="@(new() { ItemContainer = "border: 1px solid green; margin: 2px;",
                                   ToggleButton = "color: cyan;",
@@ -362,7 +380,7 @@
     </BitNav>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example10RazorCode" Id="example10">
+<DemoExample Title="RTL" RazorCode="@example11RazorCode" Id="example11">
     <div dir="rtl">
         <BitNav Dir="BitDir.Rtl" TItem="BitNavOption">
             <BitNavOption Text="پلتفرمِ بیت" Description="توضیحاتِ پلتفرمِ بیت">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavOptionDemo.razor.cs
index 271113c076..a67d2d7ec7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/_BitNavOptionDemo.razor.cs
@@ -360,6 +360,22 @@ public partial class _BitNavOptionDemo
 </BitNav>";
 
     private readonly string example9RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+
+<BitNav TItem=""BitNavOption"">
+    <BitNavOption Text=""bit platform"" Description=""Nav with external icons (FontAwesome)"">
+        <BitNavOption Text=""Home"" Icon=""@BitIconInfo.Css(""fa-solid fa-house"")"" Url=""https://bitplatform.dev/"" Target=""_blank"" />
+        <BitNavOption Text=""Products & Services"">
+            <BitNavOption Text=""BlazorUI"" Icon=""@BitIconInfo.Fa(""solid code"")"" Url=""https://bitplatform.dev/components"" Target=""_blank"" />
+            <BitNavOption Text=""Pricing"" Icon=""@BitIconInfo.Css(""fa-solid fa-tag"")"" Url=""https://bitplatform.dev/pricing"" Target=""_blank"" />
+        </BitNavOption>
+        <BitNavOption Text=""About"" Icon=""@BitIconInfo.Fa(""solid circle-info"")"" Url=""https://bitplatform.dev/about-us"" Target=""_blank"" />
+        <BitNavOption Text=""Contact us"" Icon=""@BitIconInfo.Css(""fa-solid fa-envelope"")"" Url=""https://bitplatform.dev/contact-us"" Target=""_blank"" />
+    </BitNavOption>
+    <BitNavOption Text=""Iconography"" Icon=""@BitIconInfo.Css(""fa-solid fa-icons"")"" Url=""/iconography"" Target=""_blank"" />
+</BitNav>";
+
+    private readonly string example10RazorCode = @"
 <BitNav TItem=""BitNavOption""
         Styles=""@(new() { ItemContainer = ""border: 1px solid green; margin: 2px;"",
                           ToggleButton = ""color: cyan;"",
@@ -392,7 +408,7 @@ public partial class _BitNavOptionDemo
     <BitNavOption Text=""Iconography"" IconName=""@BitIconName.AppIconDefault"" Url=""/iconography"" Target=""_blank"" />
 </BitNav>";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 <BitNav Dir=""BitDir.Rtl"" TItem=""BitNavOption"">
     <BitNavOption Text=""پلتفرمِ بیت"" Description=""توضیحاتِ پلتفرمِ بیت"">
         <BitNavOption Text=""خانه"" IconName=""@BitIconName.Home"" Url=""https://bitplatform.dev/"" Target=""_blank"" />