diff --git a/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
new file mode 100644
index 0000000000..7558101df7
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/BitIconInfo.cs
@@ -0,0 +1,202 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// Represents icon information for rendering icons in Bit BlazorUI components.
+/// Supports both built-in Fluent UI icons and custom/external icon libraries.
+/// </summary>
+public class BitIconInfo
+{
+    /// <summary>
+    /// Creates a new instance of <see cref="BitIconInfo"/>.
+    /// </summary>
+    public BitIconInfo() { }
+
+    /// <summary>
+    /// Creates a new instance of <see cref="BitIconInfo"/> with the specified icon name.
+    /// </summary>
+    /// <param name="name">
+    /// The name of the icon.
+    /// </param>
+    public BitIconInfo(string name)
+    {
+        Name = name;
+    }
+
+    /// <summary>
+    /// Creates a new instance of <see cref="BitIconInfo"/> with full customization.
+    /// </summary>
+    /// <param name="name">
+    /// The name of the icon or the CSS class for external icons.
+    /// </param>
+    /// <param name="baseClass">
+    /// The base CSS class for the icon. 
+    /// Set to null or empty string for external icon libraries that don't need a base class.
+    /// </param>
+    /// <param name="prefix">
+    /// The CSS class prefix used before the icon name.
+    /// Set to null or empty string for external icons that don't use a prefix.
+    /// </param>
+    public BitIconInfo(string name, string? baseClass, string? prefix = null)
+    {
+        Name = name;
+        BaseClass = baseClass;
+        Prefix = prefix;
+    }
+
+    /// <summary>
+    /// Gets or sets the name of the icon.
+    /// For external icons, this can be the full CSS class name if <see cref="BaseClass"/> and <see cref="Prefix"/> are empty.
+    /// </summary>
+    public string? Name { get; set; }
+
+    /// <summary>
+    /// Gets or sets the base CSS class for the icon.
+    /// For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
+    /// </summary>
+    public string? BaseClass { get; set; }
+
+    /// <summary>
+    /// Gets or sets the CSS class prefix used before the icon name.
+    /// For external icon libraries, you might set this to "fa-" or leave empty.
+    /// </summary>
+    public string? Prefix { get; set; }
+
+
+
+    /// <summary>
+    /// Gets the CSS classes to render the icon.
+    /// </summary>
+    /// <returns>The complete CSS class string for the icon.</returns>
+    public string GetCssClasses()
+    {
+        if (Name.HasNoValue()) return string.Empty;
+
+        if (BaseClass.HasNoValue() && Prefix.HasNoValue())
+        {
+            return Name!;
+        }
+
+        if (BaseClass.HasNoValue())
+        {
+            return $"{Prefix}{Name}";
+        }
+
+        if (Prefix.HasNoValue())
+        {
+            return $"{BaseClass} {Name}";
+        }
+
+        return $"{BaseClass} {Prefix}{Name}";
+    }
+
+    /// <summary>
+    /// Implicit conversion from string to <see cref="BitIconInfo"/>.
+    /// This maintains backward compatibility with the existing string-based IconName parameter.
+    /// </summary>
+    /// <param name="iconName">
+    /// The icon name string.
+    /// </param>
+    public static implicit operator BitIconInfo?(string? iconName)
+    {
+        if (iconName is null) return null;
+
+        return new BitIconInfo(iconName);
+    }
+
+    /// <summary>
+    /// Implicit conversion from <see cref="BitIconInfo"/> to string.
+    /// Returns the icon name for simple scenarios.
+    /// </summary>
+    /// <param name="iconInfo">
+    /// The icon info instance.
+    /// </param>
+    public static implicit operator string?(BitIconInfo? iconInfo)
+    {
+        return iconInfo?.Name;
+    }
+
+    /// <summary>
+    /// Creates a <see cref="BitIconInfo"/> for an external/custom icon using the provided CSS classes directly.
+    /// </summary>
+    /// <param name="cssClasses">
+    /// The complete CSS class(es) to render the icon (e.g., "fa-solid fa-house" for FontAwesome).
+    /// </param>
+    /// <returns>
+    /// A new <see cref="BitIconInfo"/> instance configured for external icons.
+    /// </returns>
+    public static BitIconInfo Css(string cssClasses)
+    {
+        return new BitIconInfo(cssClasses, baseClass: "", prefix: "");
+    }
+
+    /// <summary>
+    /// Creates a <see cref="BitIconInfo"/> for a built-in bit BlazorUI icon.
+    /// </summary>
+    /// <param name="name">
+    /// The bit BlazorUI icon name (e.g., "add").
+    /// </param>
+    /// <returns>
+    /// A new <see cref="BitIconInfo"/> instance configured for bit BlazorUI icons.
+    /// </returns>
+    public static BitIconInfo Bit(string name)
+    {
+        return new BitIconInfo(name, baseClass: "bit-icon", prefix: "bit-icon--");
+    }
+
+    /// <summary>
+    /// Creates a <see cref="BitIconInfo"/> for a FontAwesome icon.
+    /// </summary>
+    /// <param name="icons">
+    /// The FontAwesome icon classes (e.g., "fa-solid fa-house", "solid house", or just "house" with style parameter).
+    /// </param>
+    /// <returns>
+    /// A new <see cref="BitIconInfo"/> instance configured for FontAwesome icons.
+    /// </returns>
+    public static BitIconInfo Fa(string icons)
+    {
+        var cssClasses = string.Join(' ', icons.Split(' ', StringSplitOptions.RemoveEmptyEntries)
+                                               .Select(i => i.StartsWith("fa-") ? i : $"fa-{i}"));
+
+        return new BitIconInfo(cssClasses, baseClass: "", prefix: "");
+    }
+
+    /// <summary>
+    /// Creates a <see cref="BitIconInfo"/> for a Bootstrap Icons icon.
+    /// </summary>
+    /// <param name="iconName">
+    /// The Bootstrap Icon name without the "bi-" prefix (e.g., "house", "search").
+    /// </param>
+    /// <returns>
+    /// A new <see cref="BitIconInfo"/> instance configured for Bootstrap Icons.
+    /// </returns>
+    public static BitIconInfo Bi(string iconName)
+    {
+        return new BitIconInfo(iconName, baseClass: "bi", prefix: "bi-");
+    }
+
+    /// <summary>
+    /// Resolves the effective icon from either a <see cref="BitIconInfo"/> or an icon name string.
+    /// The <paramref name="icon"/> parameter takes precedence when both are provided.
+    /// </summary>
+    /// <param name="icon">
+    /// The icon info instance, if provided.
+    /// </param>
+    /// <param name="iconName">
+    /// The icon name string for built-in icons, if provided.
+    /// </param>
+    /// <returns>
+    /// A <see cref="BitIconInfo"/> instance if either parameter has a value; otherwise, <c>null</c>.
+    /// </returns>
+    /// <remarks>
+    /// This method is useful for components to unify the handling of
+    /// the <c>Icon</c> and <c>IconName</c> parameters.
+    /// </remarks>
+    public static BitIconInfo? From(BitIconInfo? icon, string? iconName)
+    {
+        if (icon is not null) return icon;
+
+        if (iconName.HasNoValue()) return null;
+
+        return Bit(iconName!);
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
index 9d9d7846d5..bc2a2064eb 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs
@@ -1,30 +1,46 @@
 namespace Bit.BlazorUI;
 
 /// <summary>
-/// An icon represents concept or meaning for the user. It's used to make better user experience (UX) and user-friendly applications.
+/// A component for displaying icons that enhance visual communication and user experience.
+/// Supports both built-in Fluent UI icons and external icon libraries.
 /// </summary>
 public partial class BitIcon : BitComponentBase
 {
     /// <summary>
-    /// The general color of the icon.
+    /// Specifies the color theme of the icon.
+    /// Default value is <see cref="BitColor.Primary"/>.
     /// </summary>
     [Parameter, ResetClassBuilder]
     public BitColor? Color { get; set; }
 
     /// <summary>
-    /// The icon name for the icon shown.
+    /// Specifies the icon configuration for rendering icons from external icon libraries using custom CSS classes.
+    /// Takes precedence over <see cref="IconName"/> when both are set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property for external icon libraries such as FontAwesome, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use the <see cref="IconName"/> property instead.
+    /// </remarks>
+    [Parameter, ResetClassBuilder]
+    public BitIconInfo? Icon { get; set; }
+
+    /// <summary>
+    /// Specifies the name of the icon from the built-in Fluent UI icon library.
+    /// This property is ignored when <see cref="Icon"/> is set.
     /// </summary>
     [Parameter, ResetClassBuilder]
     public string? IconName { get; set; }
 
     /// <summary>
-    /// The size of the icon.
+    /// Specifies the size of the icon.
+    /// Default value is <see cref="BitSize.Medium"/>.
     /// </summary>
     [Parameter, ResetClassBuilder]
     public BitSize? Size { get; set; }
 
     /// <summary>
-    /// The visual variant of the icon.
+    /// Specifies the visual styling variant of the icon.
+    /// Default value is <see cref="BitVariant.Text"/>.
     /// </summary>
     [Parameter, ResetClassBuilder]
     public BitVariant? Variant { get; set; }
@@ -57,7 +73,7 @@ protected override void RegisterCssClasses()
             _ => "bit-ico-pri"
         });
 
-        ClassBuilder.Register(() => IconName.HasValue() ? $"bit-icon bit-icon--{IconName}" : string.Empty);
+        ClassBuilder.Register(() => BitIconInfo.From(Icon, IconName)?.GetCssClasses());
 
         ClassBuilder.Register(() => Size switch
         {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
index f4829557b9..f834edbba0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor
@@ -1,4 +1,4 @@
-@page "/components/icon"
+@page "/components/icon"
 
 <PageOutlet Url="components/icon"
             Title="Icon"
@@ -7,6 +7,7 @@
 <DemoPage Name="Icon"
           Description="An icon represents concept or meaning for the user. It's used to make better user experience (UX) and user-friendly applications."
           Parameters="componentParameters"
+          SubClasses="componentSubClasses"
           SubEnums="componentSubEnums"
           GitHubUrl="Utilities/Icon/BitIcon.razor"
           GitHubDemoUrl="Utilities/Icon/BitIconDemo.razor">
@@ -16,8 +17,11 @@
         <BitIcon IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon IconName="@BitIconName.Pinned" />
+
         <br /><br /><br /><br />
-        <div>Disabled</div><br />
+
+        <div>Disabled</div>
+        <br />
         <BitIcon IconName="@BitIconName.Accept" IsEnabled="false" />
         &nbsp;
         <BitIcon IconName="@BitIconName.Bus" IsEnabled="false" />
@@ -26,92 +30,100 @@
     </DemoExample>
 
     <DemoExample Title="Variant" RazorCode="@example2RazorCode" Id="example2">
-        <div>Fill</div><br />
+        <div>Fill</div>
+        <br />
         <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Fill" />
+
         <br /><br /><br /><br />
-        <div>Outline</div><br />
+
+        <div>Outline</div>
+        <br />
         <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Outline" />
-        <br /><br /><br /><br />
-        <div>Text (default)</div><br />
-        <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Text" />
-    </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example3RazorCode" Id="example3">
-        <div>Small</div><br />
-        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Accept" />
-        &nbsp;
-        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Bus" />
-        &nbsp;
-        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Pinned" />
-        <br /><br /><br /><br />
-        <div>Medium</div><br />
-        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Accept" />
-        &nbsp;
-        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Bus" />
-        &nbsp;
-        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Pinned" />
         <br /><br /><br /><br />
-        <div>Large</div><br />
-        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Accept" />
-        &nbsp;
-        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Bus" />
-        &nbsp;
-        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Pinned" />
+
+        <div>Text (default)</div>
+        <br />
+        <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Text" />
     </DemoExample>
 
-    <DemoExample Title="Color" RazorCode="@example4RazorCode" Id="example4">
+    <DemoExample Title="Color" RazorCode="@example3RazorCode" Id="example3">
         <div>Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.</div>
+        
         <br /><br /><br />
-        <div>Primary</div><br />
+
+        <div>Primary</div>
+        <br />
         <BitIcon Color="BitColor.Primary" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Primary" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Primary" IconName="@BitIconName.Pinned" />
+
         <br /><br /><br /><br />
-        <div>Secondary</div><br />
+        
+        <div>Secondary</div>
+        <br />
         <BitIcon Color="BitColor.Secondary" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Secondary" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Secondary" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Tertiary</div><br />
+
+        <div>Tertiary</div>
+        <br />
         <BitIcon Color="BitColor.Tertiary" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Tertiary" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Tertiary" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Info</div><br />
+
+        <div>Info</div>
+        <br />
         <BitIcon Color="BitColor.Info" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Info" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Info" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Success</div><br />
+
+        <div>Success</div>
+        <br />
         <BitIcon Color="BitColor.Success" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Success" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Success" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Warning</div><br />
+        
+        <div>Warning</div>
+        <br />
         <BitIcon Color="BitColor.Warning" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Warning" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.Warning" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>SevereWarning</div><br />
+        
+        <div>SevereWarning</div>
+        <br />
         <BitIcon Color="BitColor.SevereWarning" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.SevereWarning" IconName="@BitIconName.Bus" />
         &nbsp;
         <BitIcon Color="BitColor.SevereWarning" IconName="@BitIconName.Pinned" />
+        
         <br /><br /><br /><br />
-        <div>Error</div><br />
+        
+        <div>Error</div>
+        <br />
         <BitIcon Color="BitColor.Error" IconName="@BitIconName.Accept" />
         &nbsp;
         <BitIcon Color="BitColor.Error" IconName="@BitIconName.Bus" />
@@ -119,11 +131,76 @@
         <BitIcon Color="BitColor.Error" IconName="@BitIconName.Pinned" />
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
+    <DemoExample Title="External Icons" RazorCode="@example4RazorCode" Id="example4">
+        <div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b> parameter.</div>
+
+        <br /><br />
+        
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+        
+        <div>FontAwesome</div>
+        <br />
+        <BitIcon Icon="@("fa-solid fa-house")" Size="BitSize.Large" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Css("fa-solid fa-heart")" Color="BitColor.Error" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Fa("fa-brands fa-github")" Size="BitSize.Large" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Fa("solid rocket")" Color="BitColor.Secondary" />
+        
+        <br /><br /><br /><br />
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+
+        <div>Bootstrap Icons</div>
+        <br />
+        <BitIcon Icon="@("bi bi-house-fill")" Size="BitSize.Large" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Css("bi bi-heart-fill")" Color="BitColor.Error" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Bi("github")" Size="BitSize.Large" />
+        &nbsp;
+        <BitIcon Icon="@BitIconInfo.Bi("gear-fill")" Color="BitColor.Secondary" />
+    </DemoExample>
+
+    <DemoExample Title="Size" RazorCode="@example5RazorCode" Id="example5">
+        <div>Small</div>
+        <br />
+        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Accept" />
+        &nbsp;
+        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Bus" />
+        &nbsp;
+        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Pinned" />
+        
+        <br /><br /><br /><br />
+
+        <div>Medium</div>
+        <br />
+        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Accept" />
+        &nbsp;
+        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Bus" />
+        &nbsp;
+        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Pinned" />
+        
+        <br /><br /><br /><br />
+        
+        <div>Large</div>
+        <br />
+        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Accept" />
+        &nbsp;
+        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Bus" />
+        &nbsp;
+        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Pinned" />
+    </DemoExample>
+
+    <DemoExample Title="Style & Class" RazorCode="@example6RazorCode" Id="example6">
         <div>
-            <BitIcon IconName="@BitIconName.Accept" Size="BitSize.Large"
+            <BitIcon Size="BitSize.Large"
+                     IconName="@BitIconName.Accept" 
                      Style="background-color: brown; border-radius: 4px" />
-            <BitIcon IconName="@BitIconName.Accept" Class="icon-class" />
+
+            <BitIcon Class="icon-class"
+                     IconName="@BitIconName.Accept" />
         </div>
     </DemoExample>
 </DemoPage>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
index 28f1cedbab..fa28a82786 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs
@@ -9,16 +9,25 @@ public partial class BitIconDemo
             Name = "Color",
             Type = "BitColor?",
             DefaultValue = "null",
-            Description = "The general color of the icon.",
+            Description = "Specifies the color theme of the icon. Default value is BitColor.Primary.",
             LinkType = LinkType.Link,
             Href = "#color-enum",
         },
         new()
+        {
+            Name = "Icon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "Specifies the icon configuration for rendering icons from external icon libraries using custom CSS classes. Takes precedence over IconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
         {
             Name = "IconName",
             Type = "string",
             DefaultValue = "",
-            Description = "The icon name for the icon shown",
+            Description = "Specifies the name of the icon from the built-in Fluent UI icon library. This property is ignored when Icon is set.",
             LinkType = LinkType.Link,
             Href = "/iconography",
         },
@@ -27,7 +36,7 @@ public partial class BitIconDemo
             Name = "Size",
             Type = "BitSize?",
             DefaultValue = "null",
-            Description = "The size of the icon.",
+            Description = "Specifies the size of the icon. Default value is BitSize.Medium.",
             LinkType = LinkType.Link,
             Href = "#icon-size-enum",
         },
@@ -36,12 +45,45 @@ public partial class BitIconDemo
             Name = "Variant",
             Type = "BitVariant?",
             DefaultValue = "null",
-            Description = "The visual variant of the icon.",
+            Description = "Specifies the visual styling variant of the icon. Default value is BitVariant.Text.",
             LinkType = LinkType.Link,
             Href = "#variant-enum",
         },
     ];
 
+    private readonly List<ComponentSubClass> componentSubClasses =
+    [
+        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."
+               },
+            ]
+        },
+    ];
+
     private readonly List<ComponentSubEnum> componentSubEnums =
     [
         new()
@@ -230,19 +272,6 @@ public partial class BitIconDemo
 <BitIcon IconName=""@BitIconName.Accept"" Variant=""BitVariant.Text"" />";
 
     private readonly string example3RazorCode = @"
-<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Accept"" />
-<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Bus"" />
-<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Pinned"" />
-
-<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Accept"" />
-<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Bus"" />
-<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Pinned"" />
-
-<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Accept"" />
-<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Bus"" />
-<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Pinned"" />";
-
-    private readonly string example4RazorCode = @"
 <BitIcon Color=""BitColor.Primary"" IconName=""@BitIconName.Accept"" />
 <BitIcon Color=""BitColor.Primary"" IconName=""@BitIconName.Bus"" />
 <BitIcon Color=""BitColor.Primary"" IconName=""@BitIconName.Pinned"" />
@@ -275,7 +304,36 @@ public partial class BitIconDemo
 <BitIcon Color=""BitColor.Error"" IconName=""@BitIconName.Bus"" />
 <BitIcon Color=""BitColor.Error"" IconName=""@BitIconName.Pinned"" />";
 
+    private readonly string example4RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+
+<BitIcon Icon=""@(""fa-solid fa-house"")"" Size=""BitSize.Large"" />
+<BitIcon Icon=""@BitIconInfo.Css(""fa-solid fa-heart"")"" Color=""BitColor.Error"" />
+<BitIcon Icon=""@BitIconInfo.Fa(""fa-brands fa-github"")"" Size=""BitSize.Large"" />
+<BitIcon Icon=""@BitIconInfo.Fa(""solid rocket"")"" Color=""BitColor.Secondary"" />
+
+
+<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
+
+<BitIcon Icon=""@(""bi bi-house-fill"")"" Size=""BitSize.Large"" />
+<BitIcon Icon=""@BitIconInfo.Css(""bi bi-heart-fill"")"" Color=""BitColor.Error"" />
+<BitIcon Icon=""@BitIconInfo.Bi(""github"")"" Size=""BitSize.Large"" />
+<BitIcon Icon=""@BitIconInfo.Bi(""gear-fill"")"" Color=""BitColor.Secondary"" />";
+
     private readonly string example5RazorCode = @"
+<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Accept"" />
+<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Bus"" />
+<BitIcon Size=""BitSize.Small"" IconName=""@BitIconName.Pinned"" />
+
+<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Accept"" />
+<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Bus"" />
+<BitIcon Size=""BitSize.Medium"" IconName=""@BitIconName.Pinned"" />
+
+<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Accept"" />
+<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Bus"" />
+<BitIcon Size=""BitSize.Large"" IconName=""@BitIconName.Pinned"" />";
+
+    private readonly string example6RazorCode = @"
 <style>
     .icon-class {
         padding: 4px;
@@ -285,7 +343,10 @@ public partial class BitIconDemo
     }
 </style>
 
-<BitIcon IconName=""@BitIconName.Accept"" Size=""BitSize.Large""
+<BitIcon Size=""BitSize.Large""
+         IconName=""@BitIconName.Accept"" 
          Style=""background-color: brown; border-radius: 4px"" />
-<BitIcon IconName=""@BitIconName.Accept"" Class=""icon-class"" />";
+
+<BitIcon Class=""icon-class""
+         IconName=""@BitIconName.Accept"" />";
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
new file mode 100644
index 0000000000..d391926a64
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Icon/BitIconInfoTests.cs
@@ -0,0 +1,426 @@
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Utilities.Icon;
+
+[TestClass]
+public class BitIconInfoTests
+{
+    [TestMethod]
+    public void ConstructorShouldSetAllProperties()
+    {
+        var iconInfo = new BitIconInfo("home", "fa", "fa-");
+
+        Assert.AreEqual("home", iconInfo.Name);
+        Assert.AreEqual("fa", iconInfo.BaseClass);
+        Assert.AreEqual("fa-", iconInfo.Prefix);
+    }
+
+    [TestMethod]
+    public void ConstructorWithOnlyNameShouldSetNameOnly()
+    {
+        var iconInfo = new BitIconInfo("home");
+
+        Assert.AreEqual("home", iconInfo.Name);
+        Assert.IsNull(iconInfo.BaseClass);
+        Assert.IsNull(iconInfo.Prefix);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithBaseClassAndPrefixShouldReturnCorrectClasses()
+    {
+        var iconInfo = new BitIconInfo("home", "fa", "fa-");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("fa fa-home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithBaseClassOnlyShouldReturnBaseClassAndName()
+    {
+        var iconInfo = new BitIconInfo("home", "material-icons", "");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("material-icons home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithPrefixOnlyShouldReturnPrefixedName()
+    {
+        var iconInfo = new BitIconInfo("home", "", "icon-");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("icon-home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithEmptyBaseClassAndPrefixShouldReturnNameOnly()
+    {
+        var iconInfo = new BitIconInfo("home", "", "");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("home", result);
+    }
+
+    // Factory Method Tests
+
+    [TestMethod]
+    public void CssShouldCreateIconInfoWithEmptyBaseClassAndPrefix()
+    {
+        var iconInfo = BitIconInfo.Css("fa-solid fa-home");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("", iconInfo.BaseClass);
+        Assert.AreEqual("", iconInfo.Prefix);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FontAwesomeShouldCreateIconInfoForFontAwesome6()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-solid fa-home");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("", iconInfo.BaseClass);
+        Assert.AreEqual("", iconInfo.Prefix);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FontAwesomeShouldHandleBrandIcons()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-brands fa-github");
+
+        Assert.AreEqual("fa-brands fa-github", iconInfo.Name);
+        Assert.AreEqual("fa-brands fa-github", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void BootstrapShouldCreateBootstrapIconInfo()
+    {
+        var iconInfo = BitIconInfo.Bi("check-circle");
+
+        Assert.AreEqual("check-circle", iconInfo.Name);
+        Assert.AreEqual("bi", iconInfo.BaseClass);
+        Assert.AreEqual("bi-", iconInfo.Prefix);
+        Assert.AreEqual("bi bi-check-circle", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void BootstrapShouldHandleVariousIconNames()
+    {
+        var iconInfo = BitIconInfo.Bi("house");
+
+        Assert.AreEqual("house", iconInfo.Name);
+        Assert.AreEqual("bi", iconInfo.BaseClass);
+        Assert.AreEqual("bi-", iconInfo.Prefix);
+        Assert.AreEqual("bi bi-house", iconInfo.GetCssClasses());
+    }
+
+    // Implicit Conversion Tests
+
+    [TestMethod]
+    public void ImplicitConversionFromStringShouldCreateIconInfo()
+    {
+        BitIconInfo iconInfo = "home";
+
+        Assert.AreEqual("home", iconInfo.Name);
+        Assert.IsNull(iconInfo.BaseClass);
+        Assert.IsNull(iconInfo.Prefix);
+    }
+
+    [TestMethod]
+    public void ImplicitConversionFromNullStringShouldReturnNull()
+    {
+        string? nullString = null;
+        BitIconInfo? iconInfo = nullString;
+
+        Assert.IsNull(iconInfo);
+    }
+
+    [TestMethod]
+    public void ImplicitConversionToStringShouldReturnName()
+    {
+        var iconInfo = new BitIconInfo("home", "fa", "fa-");
+
+        string? result = iconInfo;
+
+        Assert.AreEqual("home", result);
+    }
+
+    [TestMethod]
+    public void ImplicitConversionFromNullIconInfoShouldReturnNull()
+    {
+        BitIconInfo? iconInfo = null;
+
+        string? result = iconInfo;
+
+        Assert.IsNull(result);
+    }
+
+    // CSS class generation tests
+
+    [TestMethod]
+    public void GetCssClassesFontAwesome6SolidIconShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-solid fa-user");
+
+        Assert.AreEqual("fa-solid fa-user", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClassesFontAwesome6RegularIconShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-regular fa-heart");
+
+        Assert.AreEqual("fa-regular fa-heart", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClassesFontAwesome6BrandIconShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-brands fa-github");
+
+        Assert.AreEqual("fa-brands fa-github", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClassesBootstrapShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Bi("arrow-right");
+
+        Assert.AreEqual("bi bi-arrow-right", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClassesCustomCssShouldGenerateCorrectClasses()
+    {
+        var iconInfo = BitIconInfo.Css("my-custom-icon-class");
+
+        Assert.AreEqual("my-custom-icon-class", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClassesCustomIconWithConstructorShouldGenerateCorrectClasses()
+    {
+        var iconInfo = new BitIconInfo("custom-icon", "my-icons", "ico-");
+
+        Assert.AreEqual("my-icons ico-custom-icon", iconInfo.GetCssClasses());
+    }
+
+    // Edge Cases
+
+    [TestMethod]
+    public void GetCssClassesWithEmptyBaseClassShouldHandleCorrectly()
+    {
+        var iconInfo = new BitIconInfo("home", "", "icon-");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("icon-home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithEmptyPrefixShouldHandleCorrectly()
+    {
+        var iconInfo = new BitIconInfo("home", "icons", "");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("icons home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithAllEmptyStringsShouldReturnEmptyString()
+    {
+        var iconInfo = new BitIconInfo("", "", "");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("", result);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithSpecialCharactersInNameShouldHandleCorrectly()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-solid fa-arrow-circle-right");
+
+        Assert.AreEqual("fa-solid fa-arrow-circle-right", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void GetCssClassesBootstrapWithHyphenatedNameShouldHandleCorrectly()
+    {
+        var iconInfo = BitIconInfo.Bi("check-circle-fill");
+
+        Assert.AreEqual("bi bi-check-circle-fill", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void DefaultConstructorShouldCreateEmptyIconInfo()
+    {
+        var iconInfo = new BitIconInfo();
+
+        Assert.IsNull(iconInfo.Name);
+        Assert.IsNull(iconInfo.BaseClass);
+        Assert.IsNull(iconInfo.Prefix);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithNullNameShouldReturnEmptyString()
+    {
+        var iconInfo = new BitIconInfo();
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("", result);
+    }
+
+    // Bit Factory Method Tests
+
+    [TestMethod]
+    public void BitShouldCreateIconInfoForBitBlazorUIIcons()
+    {
+        var iconInfo = BitIconInfo.Bit("Add");
+
+        Assert.AreEqual("Add", iconInfo.Name);
+        Assert.AreEqual("bit-icon", iconInfo.BaseClass);
+        Assert.AreEqual("bit-icon--", iconInfo.Prefix);
+        Assert.AreEqual("bit-icon bit-icon--Add", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void BitShouldHandleVariousIconNames()
+    {
+        var iconInfo = BitIconInfo.Bit("ChevronDown");
+
+        Assert.AreEqual("ChevronDown", iconInfo.Name);
+        Assert.AreEqual("bit-icon", iconInfo.BaseClass);
+        Assert.AreEqual("bit-icon--", iconInfo.Prefix);
+        Assert.AreEqual("bit-icon bit-icon--ChevronDown", iconInfo.GetCssClasses());
+    }
+
+    // From Method Tests
+
+    [TestMethod]
+    public void FromShouldReturnIconWhenIconIsProvided()
+    {
+        var icon = BitIconInfo.Fa("fa-solid fa-home");
+
+        var result = BitIconInfo.From(icon, "Add");
+
+        Assert.AreSame(icon, result);
+    }
+
+    [TestMethod]
+    public void FromShouldCreateBitIconWhenOnlyIconNameIsProvided()
+    {
+        var result = BitIconInfo.From(null, "Add");
+
+        Assert.IsNotNull(result);
+        Assert.AreEqual("Add", result.Name);
+        Assert.AreEqual("bit-icon", result.BaseClass);
+        Assert.AreEqual("bit-icon--", result.Prefix);
+        Assert.AreEqual("bit-icon bit-icon--Add", result.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FromShouldReturnNullWhenBothParametersAreNull()
+    {
+        var result = BitIconInfo.From(null, null);
+
+        Assert.IsNull(result);
+    }
+
+    [TestMethod]
+    public void FromShouldReturnNullWhenIconNameIsEmpty()
+    {
+        var result = BitIconInfo.From(null, "");
+
+        Assert.IsNull(result);
+    }
+
+    [TestMethod]
+    public void FromShouldPrioritizeIconOverIconName()
+    {
+        var icon = BitIconInfo.Bi("house");
+
+        var result = BitIconInfo.From(icon, "Add");
+
+        Assert.AreSame(icon, result);
+        Assert.AreEqual("bi bi-house", result?.GetCssClasses());
+    }
+
+    // Null BaseClass and Prefix Tests
+
+    [TestMethod]
+    public void GetCssClassesWithNullBaseClassAndNullPrefixShouldReturnNameOnly()
+    {
+        var iconInfo = new BitIconInfo("home");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithNullBaseClassAndPrefixShouldReturnPrefixedName()
+    {
+        var iconInfo = new BitIconInfo("home", null, "icon-");
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("icon-home", result);
+    }
+
+    [TestMethod]
+    public void GetCssClassesWithBaseClassAndNullPrefixShouldReturnBaseClassAndName()
+    {
+        var iconInfo = new BitIconInfo("home", "material-icons", null);
+
+        var result = iconInfo.GetCssClasses();
+
+        Assert.AreEqual("material-icons home", result);
+    }
+
+    // FontAwesome Shorthand Tests
+
+    [TestMethod]
+    public void FontAwesomeShouldAddFaPrefixWhenMissing()
+    {
+        var iconInfo = BitIconInfo.Fa("solid home");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FontAwesomeShouldNotAddFaPrefixWhenAlreadyPresent()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-solid fa-home");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FontAwesomeShouldHandleMixedPrefixes()
+    {
+        var iconInfo = BitIconInfo.Fa("fa-solid home");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+
+    [TestMethod]
+    public void FontAwesomeShouldHandleExtraSpaces()
+    {
+        var iconInfo = BitIconInfo.Fa("  solid   home  ");
+
+        Assert.AreEqual("fa-solid fa-home", iconInfo.Name);
+        Assert.AreEqual("fa-solid fa-home", iconInfo.GetCssClasses());
+    }
+}