diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json
index 4bac997d054..36b663cb3f2 100644
--- a/webui/react/package-lock.json
+++ b/webui/react/package-lock.json
@@ -18,7 +18,7 @@
         "core-js": "3.32",
         "dayjs": "^1.11.7",
         "debug": "^4.3.4",
-        "determined-ui": "git+https://git@github.com/determined-ai/determined-ui.git#v0.5.2",
+        "determined-ui": "git+https://git@github.com/determined-ai/determined-ui.git#v0.5.4",
         "events": "^3.3.0",
         "fp-ts": "^2.13.1",
         "fuse.js": "^6.6.2",
@@ -4185,8 +4185,8 @@
       }
     },
     "node_modules/determined-ui": {
-      "version": "0.5.2",
-      "resolved": "git+https://git@github.com/determined-ai/determined-ui.git#503ea71299d96052c8c5846d5899e73f124b3714",
+      "version": "0.5.4",
+      "resolved": "git+https://git@github.com/determined-ai/determined-ui.git#a6c8d89aa7912cce031de5934d18203fb1ff14ed",
       "dependencies": {
         "@ant-design/icons": "^5.0.1",
         "@codemirror/lang-markdown": "^6.2.1",
diff --git a/webui/react/package.json b/webui/react/package.json
index a7f14f8f956..060c80d205b 100644
--- a/webui/react/package.json
+++ b/webui/react/package.json
@@ -42,7 +42,7 @@
     "core-js": "3.32",
     "dayjs": "^1.11.7",
     "debug": "^4.3.4",
-    "determined-ui": "git+https://git@github.com/determined-ai/determined-ui.git#v0.5.2",
+    "determined-ui": "git+https://git@github.com/determined-ai/determined-ui.git#v0.5.4",
     "events": "^3.3.0",
     "fp-ts": "^2.13.1",
     "fuse.js": "^6.6.2",
diff --git a/webui/react/src/components/DynamicIcon.module.scss b/webui/react/src/components/DynamicIcon.module.scss
deleted file mode 100644
index 0c1717c3f06..00000000000
--- a/webui/react/src/components/DynamicIcon.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.base {
-  aspect-ratio: 1;
-  background-color: var(--theme-surface-weak);
-  border-radius: var(--theme-border-radius-weak);
-  display: grid;
-
-  & > * {
-    place-self: center;
-    text-transform: uppercase;
-  }
-}
diff --git a/webui/react/src/components/DynamicIcon.tsx b/webui/react/src/components/DynamicIcon.tsx
deleted file mode 100644
index 5b098f310ef..00000000000
--- a/webui/react/src/components/DynamicIcon.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import useUI, { DarkLight } from 'determined-ui/Theme';
-import React, { CSSProperties, useMemo } from 'react';
-
-import { hex2hsl, hsl2str } from 'utils/color';
-import md5 from 'utils/md5';
-
-import css from './DynamicIcon.module.scss';
-
-interface Props {
-  name?: string;
-  size?: number;
-  style?: CSSProperties;
-}
-
-const DynamicIcon: React.FC<Props> = ({ name, size = 70, style }: Props) => {
-  const { ui } = useUI();
-
-  const nameAcronym = useMemo(() => {
-    if (!name) return '-';
-    return name
-      .split(/\s/)
-      .reduce((response, word) => (response += word.slice(0, 1)), '')
-      .slice(0, 2);
-  }, [name]);
-
-  const backgroundColor = useMemo(() => {
-    const hslColor = name ? hex2hsl(md5(name).substring(0, 6)) : hex2hsl('#808080');
-    return hsl2str({
-      ...hslColor,
-      l: ui.darkLight === DarkLight.Dark ? 80 : 90,
-      s: ui.darkLight === DarkLight.Dark ? 40 : 77,
-    });
-  }, [name, ui.darkLight]);
-
-  const fontSize = useMemo(() => {
-    if (size > 50) return 16;
-    if (size > 25) return 12;
-    return 10;
-  }, [size]);
-
-  return (
-    <div
-      className={css.base}
-      style={{
-        backgroundColor,
-        color: 'black',
-        fontSize,
-        height: size,
-        width: size,
-        ...style,
-      }}>
-      <span>{nameAcronym}</span>
-    </div>
-  );
-};
-
-export default DynamicIcon;
diff --git a/webui/react/src/components/ModelRegistry.tsx b/webui/react/src/components/ModelRegistry.tsx
index 973df74c105..cf0e1469918 100644
--- a/webui/react/src/components/ModelRegistry.tsx
+++ b/webui/react/src/components/ModelRegistry.tsx
@@ -5,6 +5,7 @@ import {
   SorterResult,
   TablePaginationConfig,
 } from 'antd/lib/table/interface';
+import Avatar from 'determined-ui/Avatar';
 import Button from 'determined-ui/Button';
 import Dropdown, { MenuItem } from 'determined-ui/Dropdown';
 import Icon from 'determined-ui/Icon';
@@ -19,7 +20,6 @@ import _ from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import DeleteModelModal from 'components/DeleteModelModal';
-import DynamicIcon from 'components/DynamicIcon';
 import FilterCounter from 'components/FilterCounter';
 import Link from 'components/Link';
 import { ModelActionMenuKey as MenuKey, ModelActionDropdown } from 'components/ModelActionDropdown';
@@ -338,7 +338,7 @@ const ModelRegistry: React.FC<Props> = ({ workspace }: Props) => {
       if (!workspace) {
         return (
           <Link disabled>
-            <DynamicIcon name="-" size={24} />
+            <Avatar palette="muted" square text="-" />
           </Link>
         );
       }
@@ -352,7 +352,7 @@ const ModelRegistry: React.FC<Props> = ({ workspace }: Props) => {
                   ? paths.projectDetails(workspaceId)
                   : paths.workspaceDetails(workspaceId)
               }>
-              <DynamicIcon name={workspace?.name} size={24} />
+              <Avatar palette="muted" square text={workspace?.name} />
             </Link>
           </div>
         </Tooltip>
diff --git a/webui/react/src/components/NavigationSideBar.tsx b/webui/react/src/components/NavigationSideBar.tsx
index 28252e8d67c..7d7e105de1e 100644
--- a/webui/react/src/components/NavigationSideBar.tsx
+++ b/webui/react/src/components/NavigationSideBar.tsx
@@ -1,3 +1,4 @@
+import Avatar from 'determined-ui/Avatar';
 import Button from 'determined-ui/Button';
 import Dropdown, { MenuItem } from 'determined-ui/Dropdown';
 import Icon, { IconName, IconSize } from 'determined-ui/Icon';
@@ -13,7 +14,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom';
 import { CSSTransition } from 'react-transition-group';
 
-import DynamicIcon from 'components/DynamicIcon';
 import Link, { Props as LinkProps } from 'components/Link';
 import UserSettings from 'components/UserSettings';
 import shortCutSettingsConfig, {
@@ -311,7 +311,7 @@ const NavigationSideBar: React.FC = () => {
                           workspace={workspace}>
                           <li>
                             <NavigationItem
-                              icon={<DynamicIcon name={workspace.name} size={24} />}
+                              icon={<Avatar palette="muted" square text={workspace.name} />}
                               label={workspace.name}
                               path={paths.workspaceDetails(workspace.id)}
                               tooltip={settings.navbarCollapsed}
diff --git a/webui/react/src/components/NavigationTabbar.tsx b/webui/react/src/components/NavigationTabbar.tsx
index 2c1a6ce60b9..943c1e1bf80 100644
--- a/webui/react/src/components/NavigationTabbar.tsx
+++ b/webui/react/src/components/NavigationTabbar.tsx
@@ -1,3 +1,4 @@
+import Avatar from 'determined-ui/Avatar';
 import Icon, { IconName } from 'determined-ui/Icon';
 import { useModal } from 'determined-ui/Modal';
 import Spinner from 'determined-ui/Spinner';
@@ -7,7 +8,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import ActionSheet, { ActionItem } from 'components/ActionSheet';
-import DynamicIcon from 'components/DynamicIcon';
 import Link, { Props as LinkProps } from 'components/Link';
 import UserSettings from 'components/UserSettings';
 import usePermissions from 'hooks/usePermissions';
@@ -100,7 +100,7 @@ const NavigationTabbar: React.FC = () => {
       workspaces.map(
         (workspace) =>
           ({
-            icon: <DynamicIcon name={workspace.name} size={24} style={{ color: 'black' }} />,
+            icon: <Avatar palette="muted" square text={workspace.name} />,
             label: workspace.name,
             onClick: (e: AnyMouseEvent) =>
               handlePathUpdate(e, paths.workspaceDetails(workspace.id)),
diff --git a/webui/react/src/components/ProjectCard.tsx b/webui/react/src/components/ProjectCard.tsx
index daa9f630985..5d239a66bbe 100644
--- a/webui/react/src/components/ProjectCard.tsx
+++ b/webui/react/src/components/ProjectCard.tsx
@@ -1,4 +1,5 @@
 import { Typography } from 'antd';
+import Avatar, { Size } from 'determined-ui/Avatar';
 import Card from 'determined-ui/Card';
 import Icon from 'determined-ui/Icon';
 import Tooltip from 'determined-ui/Tooltip';
@@ -10,7 +11,6 @@ import { Project } from 'types';
 import { nearestCardinalNumber } from 'utils/number';
 import { AnyMouseEvent } from 'utils/routes';
 
-import DynamicIcon from './DynamicIcon';
 import { useProjectActionMenu } from './ProjectActionDropdown';
 import css from './ProjectCard.module.scss';
 
@@ -58,7 +58,7 @@ const ProjectCard: React.FC<Props> = ({
             {showWorkspace && project.workspaceId !== 1 && (
               <Tooltip content={project.workspaceName}>
                 <div className={css.workspaceIcon}>
-                  <DynamicIcon name={project.workspaceName} size={20} />
+                  <Avatar palette="muted" size={Size.Small} square text={project.workspaceName} />
                 </div>
               </Tooltip>
             )}
diff --git a/webui/react/src/components/ResourcePoolBindings.tsx b/webui/react/src/components/ResourcePoolBindings.tsx
index 2cf24906c3e..280ff3aafce 100644
--- a/webui/react/src/components/ResourcePoolBindings.tsx
+++ b/webui/react/src/components/ResourcePoolBindings.tsx
@@ -1,10 +1,10 @@
+import Avatar, { Size } from 'determined-ui/Avatar';
 import Button from 'determined-ui/Button';
 import { useModal } from 'determined-ui/Modal';
 import { Loadable } from 'determined-ui/utils/loadable';
 import { useObservable } from 'micro-observables';
 import { useCallback, useEffect, useMemo } from 'react';
 
-import DynamicIcon from 'components/DynamicIcon';
 import Link from 'components/Link';
 import ResourcePoolBindingModalComponent from 'components/ResourcePoolBindingModal';
 import { ColumnDef } from 'components/Table/InteractiveTable';
@@ -39,7 +39,7 @@ const ResourcePoolBindings = ({ pool }: Props): JSX.Element => {
         key: 'workspace',
         render: (_, record) => (
           <div className={css.tableRow}>
-            <DynamicIcon name={record.name} size={40} style={{ borderRadius: '100%' }} />
+            <Avatar palette="muted" size={Size.Medium} square text={record.name} />
             <div>
               <div>
                 <Link path={paths.workspaceDetails(record.id)}>{record.name}</Link>
diff --git a/webui/react/src/components/Table/Table.tsx b/webui/react/src/components/Table/Table.tsx
index 5357d37ce52..3d16c8a8c8f 100644
--- a/webui/react/src/components/Table/Table.tsx
+++ b/webui/react/src/components/Table/Table.tsx
@@ -1,4 +1,5 @@
 import { Space, Typography } from 'antd';
+import Avatar from 'determined-ui/Avatar';
 import Icon from 'determined-ui/Icon';
 import Spinner from 'determined-ui/Spinner';
 import { StateOfUnion } from 'determined-ui/Theme';
@@ -7,7 +8,6 @@ import React from 'react';
 
 import Badge, { BadgeType } from 'components/Badge';
 import { ConditionalWrapper } from 'components/ConditionalWrapper';
-import DynamicIcon from 'components/DynamicIcon';
 import ExperimentIcons from 'components/ExperimentIcons';
 import HumanReadableNumber from 'components/HumanReadableNumber';
 import Link from 'components/Link';
@@ -192,7 +192,7 @@ export const taskWorkspaceRenderer = (
               ? paths.projectDetails(workspaceId)
               : paths.workspaceDetails(workspaceId)
           }>
-          <DynamicIcon name={workspace?.name} size={24} />
+          <Avatar palette="muted" square text={workspace?.name ?? ''} />
         </Link>
       </div>
     </Tooltip>
diff --git a/webui/react/src/components/UserAvatar.tsx b/webui/react/src/components/UserAvatar.tsx
index e9695a35d8c..6857d8da6a2 100644
--- a/webui/react/src/components/UserAvatar.tsx
+++ b/webui/react/src/components/UserAvatar.tsx
@@ -4,14 +4,22 @@ import React from 'react';
 import { User } from 'types';
 import { getDisplayName } from 'utils/user';
 
-export interface Props extends Omit<AvatarProps, 'darkLight' | 'displayName'> {
+export interface Props extends Omit<AvatarProps, 'darkLight' | 'text'> {
   user?: User;
+  deactivated?: boolean;
 }
 
-const UserAvatar: React.FC<Props> = ({ user, ...rest }) => {
+const UserAvatar: React.FC<Props> = ({ user, deactivated, ...rest }) => {
   const displayName = getDisplayName(user);
 
-  return <Avatar {...rest} displayName={displayName} />;
+  return (
+    <Avatar
+      {...rest}
+      inactive={deactivated}
+      text={displayName}
+      tooltipText={deactivated ? `${displayName} (deactivated)` : displayName}
+    />
+  );
 };
 
 export default UserAvatar;
diff --git a/webui/react/src/components/WorkspaceFilter.tsx b/webui/react/src/components/WorkspaceFilter.tsx
index 1bfa70dd032..e28ec72c554 100644
--- a/webui/react/src/components/WorkspaceFilter.tsx
+++ b/webui/react/src/components/WorkspaceFilter.tsx
@@ -1,6 +1,6 @@
+import Avatar from 'determined-ui/Avatar';
 import React from 'react';
 
-import DynamicIcon from 'components/DynamicIcon';
 import { Workspace } from 'types';
 
 import css from './WorkspaceFilter.module.scss';
@@ -12,7 +12,7 @@ interface Props {
 const WorkspaceFilter: React.FC<Props> = ({ workspace }: Props) => {
   return (
     <div className={css.item}>
-      <DynamicIcon name={workspace.name} size={24} />
+      <Avatar palette="muted" square text={workspace.name} />
       <span className={css.name}>{workspace.name}</span>
     </div>
   );
diff --git a/webui/react/src/pages/DesignKit.tsx b/webui/react/src/pages/DesignKit.tsx
index e142386ab55..32bf0349b5c 100644
--- a/webui/react/src/pages/DesignKit.tsx
+++ b/webui/react/src/pages/DesignKit.tsx
@@ -1,7 +1,7 @@
 import { Card as AntDCard, Space } from 'antd';
 import { SelectValue } from 'antd/es/select';
 import Accordion from 'determined-ui/Accordion';
-import Avatar from 'determined-ui/Avatar';
+import Avatar, { AvatarGroup, Size as AvatarSize } from 'determined-ui/Avatar';
 import Breadcrumb from 'determined-ui/Breadcrumb';
 import Button from 'determined-ui/Button';
 import Card from 'determined-ui/Card';
@@ -1557,8 +1557,36 @@ const AvatarSection: React.FC = () => {
           abbreviated with an option to hover for an unabbreviated view.
         </p>
       </AntDCard>
-      <AntDCard title="Usage">
-        <Avatar displayName="Test User" />
+      <AntDCard title="Variations">
+        <strong>Sizes</strong>
+        ExtraSmall
+        <Avatar size={AvatarSize.ExtraSmall} text="Test User" />
+        Small (Default Size)
+        <Avatar size={AvatarSize.Small} text="Test User" />
+        Medium
+        <Avatar size={AvatarSize.Medium} text="Test User" />
+        Large
+        <Avatar size={AvatarSize.Large} text="Test User" />
+        ExtraLarge
+        <Avatar size={AvatarSize.ExtraLarge} text="Test User" />
+        <strong>Shape</strong>
+        Square
+        <Avatar square text="Test User" />
+        <strong>Color</strong>
+        Muted palette
+        <Avatar palette="muted" text="Test User" />
+        No Color
+        <Avatar noColor text="Test User" />
+        Inactive
+        <Avatar inactive text="Test User" />
+        <strong>Tooltip</strong>
+        Custom tooltip text
+        <Avatar text="Test User" tooltipText="Custom tooltip text" />
+        Hide tooltip
+        <Avatar hideTooltip text="Test User" />
+      </AntDCard>
+      <AntDCard title="Group">
+        <AvatarGroup items={['Test User', 'Sample Person', 'Example Individual']} />
       </AntDCard>
     </ComponentSection>
   );
@@ -1581,14 +1609,14 @@ const NameplateSection: React.FC = () => {
         <li>With name and alias</li>
         <Nameplate
           alias={testUser.displayName}
-          icon={<Avatar displayName={testUser.displayName} />}
+          icon={<Avatar text={testUser.displayName} />}
           name={testUser.username}
         />
         <li>Compact format</li>
         <Nameplate
           alias={testUser.displayName}
           compact
-          icon={<Avatar displayName={testUser.displayName} />}
+          icon={<Avatar text={testUser.displayName} />}
           name={testUser.username}
         />
         <li>No alias</li>
diff --git a/webui/react/src/pages/WorkspaceList/WorkspaceCard.tsx b/webui/react/src/pages/WorkspaceList/WorkspaceCard.tsx
index 7ac91922dc9..9a37f85ffbd 100644
--- a/webui/react/src/pages/WorkspaceList/WorkspaceCard.tsx
+++ b/webui/react/src/pages/WorkspaceList/WorkspaceCard.tsx
@@ -1,4 +1,5 @@
 import { Typography } from 'antd';
+import Avatar, { Size } from 'determined-ui/Avatar';
 import Card from 'determined-ui/Card';
 import { Columns } from 'determined-ui/Columns';
 import Icon from 'determined-ui/Icon';
@@ -6,8 +7,7 @@ import Spinner from 'determined-ui/Spinner';
 import { Loadable } from 'determined-ui/utils/loadable';
 import React from 'react';
 
-import DynamicIcon from 'components/DynamicIcon';
-import Avatar from 'components/UserAvatar';
+import UserAvatar from 'components/UserAvatar';
 import { handlePath, paths } from 'routes/utils';
 import userStore from 'stores/users';
 import { Workspace } from 'types';
@@ -43,7 +43,7 @@ const WorkspaceCard: React.FC<Props> = ({ workspace, fetchWorkspaces }: Props) =
         <div className={workspace.archived ? css.archived : ''}>
           <Columns gap={8}>
             <div className={css.icon}>
-              <DynamicIcon name={workspace.name} size={78} />
+              <Avatar palette="muted" size={Size.ExtraLarge} square text={workspace.name} />
             </div>
             <div className={css.info}>
               <div className={css.nameRow}>
@@ -61,7 +61,7 @@ const WorkspaceCard: React.FC<Props> = ({ workspace, fetchWorkspaces }: Props) =
               <div className={css.avatarRow}>
                 <div className={css.avatar}>
                   <Spinner conditionalRender spinning={Loadable.isNotLoaded(loadableUser)}>
-                    {Loadable.isLoaded(loadableUser) && <Avatar user={user} />}
+                    {Loadable.isLoaded(loadableUser) && <UserAvatar user={user} />}
                   </Spinner>
                 </div>
                 {workspace.archived && <div className={css.archivedBadge}>Archived</div>}