diff --git a/src/Client/Web/Playground/Bit.Client.Web.BlazorUI.Playground/Web/Pages/IconPage.razor b/src/Client/Web/Playground/Bit.Client.Web.BlazorUI.Playground/Web/Pages/IconPage.razor
index c6ec2af5cc..61dbdad4cf 100644
--- a/src/Client/Web/Playground/Bit.Client.Web.BlazorUI.Playground/Web/Pages/IconPage.razor
+++ b/src/Client/Web/Playground/Bit.Client.Web.BlazorUI.Playground/Web/Pages/IconPage.razor
@@ -2,7 +2,10 @@
 
 <section class="page-container">
     <div class="page-title">Iconography</div>
-    <div class="page-desc">Bit has traditionally used a custom font for its iconography. This font is part of the MDL2 design system and contains glyphs that you can scale, color, and style in any way.</div>
+    <div class="page-desc">
+        Bit has traditionally used a custom font for its iconography.
+        This font is part of the MDL2 design system and contains glyphs that you can scale, color, and style in any way.
+    </div>
 
     <div class="page-box">
         <div class="box-header">Available Icons</div>
@@ -12,7 +15,9 @@
                           IconName="BitIconName.Search"
                           Value="@searchText"
                           ValueChanged="@HandleChange"
-                          OnClear="@HandleClear"></BitSearchBox>
+                          OnClear="@HandleClear">
+            </BitSearchBox>
+
             <div class="icon-list">
                 @if (filteredIcons.Count == 0)
                 {
@@ -20,13 +25,14 @@
                 }
                 else
                 {
-                    foreach (var icon in filteredIcons)
-                    {
-                        <div class="icon-box">
-                            <i class="bit-icon bit-icon--icongraphy bit-icon--@icon"></i>
-                            <span class="icon-name">@icon</span>
-                        </div>
-                    }
+                    <BitBasicList Virtualize="true" Items="filteredIcons" Role="list">
+                        <RowTemplate Context="icon">
+                            <div class="icon-box">
+                                <i class="bit-icon bit-icon--icongraphy bit-icon--@icon"></i>
+                                <span class="icon-name">@icon</span>
+                            </div>
+                        </RowTemplate>
+                    </BitBasicList>
                 }
             </div>
         </div>
diff --git a/src/Client/Web/Playground/Bit.Client.Web.BlazorUI.Playground/Web/Pages/IconPage.razor.scss b/src/Client/Web/Playground/Bit.Client.Web.BlazorUI.Playground/Web/Pages/IconPage.razor.scss
index 057f32bad8..f85600fc2f 100644
--- a/src/Client/Web/Playground/Bit.Client.Web.BlazorUI.Playground/Web/Pages/IconPage.razor.scss
+++ b/src/Client/Web/Playground/Bit.Client.Web.BlazorUI.Playground/Web/Pages/IconPage.razor.scss
@@ -151,7 +151,7 @@
 }
 
 .icon-box {
-    display: flex;
+    display: inline-flex;
     flex-flow: column nowrap;
     justify-content: flex-start;
     align-items: center;