IgniteUI · IMinchev64 · Aug 19, 2026
diff --git a/samples/layouts/avatar/shape/src/index.css b/samples/layouts/avatar/shape/src/index.css
@@ -19,6 +19,7 @@
 
 .avatar-label {
   color: var(--ig-gray-600);
+  font-family: "Aktiv Grotesk", Arial, sans-serif;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }

diff --git a/samples/layouts/avatar/size/src/index.css b/samples/layouts/avatar/size/src/index.css
@@ -34,6 +34,7 @@
 
 .avatar-label {
   color: var(--ig-gray-600);
+  font-family: "Aktiv Grotesk", Arial, sans-serif;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }

diff --git a/samples/layouts/avatar/styling/src/icons.ts b/samples/layouts/avatar/styling/src/icons.ts
@@ -0,0 +1,14 @@
+export const checkIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 16.17-4.17-4.17-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z"/></svg>';
+
+export const calendarTodayIcon =
+  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 3H19V1H17V3H7V1H5V3H4C2.9 3 2 3.9 2 5V21C2 22.1 2.9 23 4 23H20C21.1 23 22 22.1 22 21V5C22 3.9 21.1 3 20 3ZM20 21H4V8H20V21Z" fill="#424242"/></svg>';
+
+export const xIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>';
+
+export const horizontalRuleIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M160-440v-80h640v80H160Z"/></svg>';
+
+export const peopleIcon =
+  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 11C17.66 11 18.99 9.66 18.99 8C18.99 6.34 17.66 5 16 5C14.34 5 13 6.34 13 8C13 9.66 14.34 11 16 11ZM8 11C9.66 11 10.99 9.66 10.99 8C10.99 6.34 9.66 5 8 5C6.34 5 5 6.34 5 8C5 9.66 6.34 11 8 11ZM8 13C5.67 13 1 14.17 1 16.5V19H15V16.5C15 14.17 10.33 13 8 13ZM16 13C15.71 13 15.38 13.02 15.03 13.05C16.19 13.89 17 15.02 17 16.5V19H23V16.5C23 14.17 18.33 13 16 13Z" fill="#424242"/></svg>';
diff --git a/samples/layouts/avatar/styling/src/index.css b/samples/layouts/avatar/styling/src/index.css
@@ -5,8 +5,32 @@
 }
 
 .chat-list {
+  --ig-font-family: "Aktiv Grotesk", Arial, sans-serif;
+  --ig-h2-font-family: "Aktiv Grotesk", Arial, sans-serif;
+  --ig-subtitle-1-font-family: "Aktiv Grotesk", Arial, sans-serif;
+  --ig-subtitle-1-font-weight: 600;
+  --ig-subtitle-2-font-family: "Aktiv Grotesk", Arial, sans-serif;
+  --ig-body-1-font-family: "Aktiv Grotesk", Arial, sans-serif;
+  --ig-body-2-font-family: "Aktiv Grotesk", Arial, sans-serif;
+  --ig-caption-font-family: "Aktiv Grotesk", Arial, sans-serif;
+  --ig-button-font-family: "Aktiv Grotesk", Arial, sans-serif;
+  --ig-list-header-text-color: var(--ig-gray-900);
   width: 344px;
   max-width: 100%;
+  font-family: "Aktiv Grotesk", Arial, sans-serif;
+}
+
+.chat-list * {
+  font-family: "Aktiv Grotesk", Arial, sans-serif;
+}
+
+.chat-list [slot="end"] {
+  color: var(--ig-gray-600);
+}
+
+.chat-list-item--split {
+  --border-color: var(--ig-gray-200);
+  --border-width: 1px;
 }
 
 .size-small {
@@ -33,6 +57,10 @@
   bottom: -4px;
 }
 
+.avatar-icon {
+  color: #424242;
+}
+
 .avatar-muted-badge {
   --ig-badge-background-color: var(--ig-gray-300);
   --ig-badge-icon-color: var(--ig-gray-700);
@@ -41,3 +69,7 @@
 .avatar-muted {
   --ig-avatar-background: #D2DBE8;
 }
+
+.avatar-meeting {
+  --ig-avatar-background: var(--ig-gray-300);
+}
diff --git a/samples/layouts/avatar/styling/src/index.tsx b/samples/layouts/avatar/styling/src/index.tsx
@@ -11,21 +11,13 @@ import {
   registerIconFromText,
 } from "igniteui-react";
 import "igniteui-webcomponents/themes/light/material.css";
-
-const checkIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 16.17-4.17-4.17-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z"/></svg>';
-
-const calendarIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/></svg>';
-
-const xIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>';
-
-const horizontalRuleIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M160-440v-80h640v80H160Z"/></svg>';
-
-const groupIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM247-527q-47-47-47-113t47-113q47-47 113-47t113 47q47 47 47 113t-47 113q-47 47-113 47t-113-47Zm466 0q-47 47-113 47-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113q0 66-47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm296.5-343.5Q440-607 440-640t-23.5-56.5Q393-720 360-720t-56.5 23.5Q280-673 280-640t23.5 56.5Q327-560 360-560t56.5-23.5ZM360-240Zm0-400Z"/></svg>';
+import {
+  calendarTodayIcon,
+  checkIcon,
+  horizontalRuleIcon,
+  peopleIcon,
+  xIcon,
+} from "./icons";
 
 type AvatarListItem = {
   title: string;
@@ -107,15 +99,17 @@ const sections: AvatarListSection[] = [
         avatar: {
           icon: "calendar",
           alt: "Calendar Icon.",
+          className: "avatar-meeting",
         },
       },
       {
         title: "Design Discussion",
         subtitle: "https://www.infra.com",
         end: "11:30 AM",
         avatar: {
-          icon: "group",
+          icon: "people",
           alt: "Group Icon.",
+          className: "avatar-meeting",
         },
       },
     ],
@@ -132,19 +126,19 @@ function renderAvatar(item: AvatarListItem) {
       alt={item.avatar.alt}
     >
       {item.avatar.icon && (
-        <IgrIcon name={item.avatar.icon} collection="material" />
+        <IgrIcon className="avatar-icon size-small" name={item.avatar.icon} collection="material" />
       )}
     </IgrAvatar>
   );
 }
 
 export default function AvatarStyling() {
   useEffect(() => {
-    registerIconFromText("calendar", calendarIcon, "material");
+    registerIconFromText("calendar", calendarTodayIcon, "material");
     registerIconFromText("check", checkIcon, "material");
     registerIconFromText("x", xIcon, "material");
     registerIconFromText("horizontalRule", horizontalRuleIcon, "material");
-    registerIconFromText("group", groupIcon, "material");
+    registerIconFromText("people", peopleIcon, "material");
   }, []);
 
   return (
@@ -154,7 +148,10 @@ export default function AvatarStyling() {
           <React.Fragment key={section.header}>
             <IgrListHeader>{section.header}</IgrListHeader>
             {section.items.map((item) => (
-              <IgrListItem key={`${section.header}-${item.title}-${item.end}`}>
+              <IgrListItem
+                className={section.header === "Chats" ? "chat-list-item--split" : undefined}
+                key={`${section.header}-${item.title}-${item.end}`}
+              >
                 <div className="avatar-with-badge" slot="start">
                   {renderAvatar(item)}
                   {item.badge && (

diff --git a/samples/layouts/avatar/tailwind-styling/src/index.tsx b/samples/layouts/avatar/tailwind-styling/src/index.tsx
@@ -32,7 +32,7 @@ export default function AvatarTailwindStyling() {
   }, []);
 
   return (
-    <div className="sample flex flex-row flex-nowrap items-center justify-center gap-10">
+    <div className='sample flex flex-row flex-nowrap items-center justify-center gap-10 font-["Aktiv_Grotesk",Arial,sans-serif]'>
       <IgrCard className="box-border h-[479px] w-[344px] [--ig-card-border-radius:30px]">
         <IgrCardMedia className="h-[189px] overflow-hidden">
           <img

diff --git a/samples/layouts/avatar/variants/src/index.css b/samples/layouts/avatar/variants/src/index.css
@@ -19,6 +19,7 @@
 
 .avatar-label {
   color: var(--ig-gray-600);
+  font-family: "Aktiv Grotesk", Arial, sans-serif;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }