diff --git a/package-lock.json b/package-lock.json
index e9909faf..c4b9bc8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.8.2",
       "dependencies": {
         "@aboutbits/pagination": "^2.0.2",
-        "@aboutbits/react-material-icons": "^1.2.5",
+        "@aboutbits/react-material-icons": "^2.0.0",
         "@aboutbits/react-toolbox": "^0.2.5",
         "@floating-ui/react": "^0.26.10",
         "@headlessui/react": "^1.7.18",
@@ -168,9 +168,9 @@
       }
     },
     "node_modules/@aboutbits/react-material-icons": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@aboutbits/react-material-icons/-/react-material-icons-1.2.5.tgz",
-      "integrity": "sha512-LX2BSqAPpE5e+caB6dPxahpBqxxkBi/3BMdQJfjEoHpSG5jx1GS4JXFCONuxejlu+tS2S8swYjDTl//B9dbnwQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@aboutbits/react-material-icons/-/react-material-icons-2.0.0.tgz",
+      "integrity": "sha512-ZIwT9pHOn8iHGgxKUfB1CCN7yEzhdBaFIYDqiZoang3yzYnkvHcWoqU32FtGXBz4SwunEmYAhQvggqL8iXK4QQ==",
       "engines": {
         "node": ">=16",
         "npm": ">=8"
diff --git a/package.json b/package.json
index d6541748..f586a54e 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@aboutbits/pagination": "^2.0.2",
-    "@aboutbits/react-material-icons": "^1.2.5",
+    "@aboutbits/react-material-icons": "^2.0.0",
     "@aboutbits/react-toolbox": "^0.2.5",
     "@floating-ui/react": "^0.26.10",
     "@headlessui/react": "^1.7.18",
diff --git a/src/components/alert/Alert.stories.tsx b/src/components/alert/Alert.stories.tsx
index dd65dfb5..b6914065 100644
--- a/src/components/alert/Alert.stories.tsx
+++ b/src/components/alert/Alert.stories.tsx
@@ -1,6 +1,6 @@
-import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconCheckOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import {
   Controls,
   Markdown,
@@ -26,9 +26,9 @@ const icons = {
   options: ['None', 'Warning', 'Check', 'Info'],
   mapping: {
     None: undefined,
-    Warning: IconWarning,
-    Check: IconCheck,
-    Info: IconInfo,
+    Warning: IconWarningOutlinedFilled,
+    Check: IconCheckOutlinedFilled,
+    Info: IconInfoOutlinedFilled,
   },
   control: { type: 'select' },
 }
@@ -88,7 +88,7 @@ const meta = {
     children:
       'This alert component can be used to highlight a message to the user.',
     tone: Tone.Critical,
-    icon: IconWarning,
+    icon: IconWarningOutlinedFilled,
   },
   argTypes: {
     title: { control: 'text' },
@@ -169,7 +169,7 @@ export const ConvinientAlertComponents: Story = {
 
 export const ActionsResponsive: Story = {
   args: {
-    icon: IconCheck,
+    icon: IconCheckOutlinedFilled,
     tone: Tone.Success,
     actions: DissmissSuccessButton,
     actionsPosition: AlertActionsPosition.Responsive,
@@ -186,7 +186,7 @@ export const ActionsResponsive: Story = {
 
 export const ActionsFixedRight: Story = {
   args: {
-    icon: IconCheck,
+    icon: IconCheckOutlinedFilled,
     tone: Tone.Success,
     actions: DissmissSuccessButton,
     actionsPosition: AlertActionsPosition.FixedRight,
@@ -207,7 +207,7 @@ export const ActionsFixedRight: Story = {
 
 export const ActionsFixedBottom: Story = {
   args: {
-    icon: IconCheck,
+    icon: IconCheckOutlinedFilled,
     tone: Tone.Success,
     actions: DissmissSuccessButton,
     actionsPosition: AlertActionsPosition.FixedBottom,
@@ -228,7 +228,7 @@ export const ActionsFixedBottom: Story = {
 
 export const VeryLongMessage: Story = {
   args: {
-    icon: IconWarning,
+    icon: IconWarningOutlinedFilled,
     tone: Tone.Critical,
   },
   render: (args) => (
diff --git a/src/components/alert/ConvenientAlerts.tsx b/src/components/alert/ConvenientAlerts.tsx
index 00646b9d..f0d054bb 100644
--- a/src/components/alert/ConvenientAlerts.tsx
+++ b/src/components/alert/ConvenientAlerts.tsx
@@ -1,6 +1,6 @@
-import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconCheckOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import { ReactElement } from 'react'
 import { Tone } from '../types'
 import { Alert } from './Alert'
@@ -11,7 +11,7 @@ export function AlertSuccess({
   ...props
 }: Omit<AlertProps, 'tone' | 'icon'>): ReactElement {
   return (
-    <Alert tone={Tone.Success} icon={IconCheck} {...props}>
+    <Alert tone={Tone.Success} icon={IconCheckOutlinedFilled} {...props}>
       {children}
     </Alert>
   )
@@ -22,7 +22,7 @@ export function AlertWarning({
   ...props
 }: Omit<AlertProps, 'tone' | 'icon'>): ReactElement {
   return (
-    <Alert tone={Tone.Warning} icon={IconWarning} {...props}>
+    <Alert tone={Tone.Warning} icon={IconWarningOutlinedFilled} {...props}>
       {children}
     </Alert>
   )
@@ -33,7 +33,7 @@ export function AlertCritical({
   ...props
 }: Omit<AlertProps, 'tone' | 'icon'>): ReactElement {
   return (
-    <Alert tone={Tone.Critical} icon={IconWarning} {...props}>
+    <Alert tone={Tone.Critical} icon={IconWarningOutlinedFilled} {...props}>
       {children}
     </Alert>
   )
@@ -44,7 +44,7 @@ export function AlertInformative({
   ...props
 }: Omit<AlertProps, 'tone' | 'icon'>): ReactElement {
   return (
-    <Alert tone={Tone.Informative} icon={IconInfo} {...props}>
+    <Alert tone={Tone.Informative} icon={IconInfoOutlinedFilled} {...props}>
       {children}
     </Alert>
   )
diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
index def02892..1a308d14 100644
--- a/src/components/button/Button.stories.tsx
+++ b/src/components/button/Button.stories.tsx
@@ -1,5 +1,5 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
 import {
   Controls,
   Description,
@@ -22,8 +22,8 @@ const icons = {
   options: ['None', 'Add', 'Info'],
   mapping: {
     None: undefined,
-    Add: IconAdd,
-    Info: IconInfo,
+    Add: IconAddOutlinedFilled,
+    Info: IconInfoOutlinedFilled,
   },
 }
 
@@ -111,12 +111,12 @@ export const Disabled: Story = {
 
 export const IconStart: Story = {
   args: {
-    iconStart: IconInfo,
+    iconStart: IconInfoOutlinedFilled,
   },
 }
 export const IconEnd: Story = {
   args: {
-    iconEnd: IconInfo,
+    iconEnd: IconInfoOutlinedFilled,
   },
 }
 
diff --git a/src/components/button/ButtonIcon.stories.tsx b/src/components/button/ButtonIcon.stories.tsx
index 88e08138..11d9e4d9 100644
--- a/src/components/button/ButtonIcon.stories.tsx
+++ b/src/components/button/ButtonIcon.stories.tsx
@@ -1,5 +1,5 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
 import {
   Controls,
   Description,
@@ -19,8 +19,8 @@ import { ButtonVariant } from './types'
 const icons = {
   options: ['Info', 'Add'],
   mapping: {
-    Info: IconInfo,
-    Add: IconAdd,
+    Info: IconInfoOutlinedFilled,
+    Add: IconAddOutlinedFilled,
   },
 }
 
@@ -32,7 +32,7 @@ const meta = {
     variant: ButtonVariant.Solid,
     size: Size.Md,
     tone: Tone.Primary,
-    icon: IconAdd,
+    icon: IconAddOutlinedFilled,
   },
   argTypes: {
     icon: icons,
diff --git a/src/components/button/ButtonIconLink.stories.tsx b/src/components/button/ButtonIconLink.stories.tsx
index 1503005a..a85adcbf 100644
--- a/src/components/button/ButtonIconLink.stories.tsx
+++ b/src/components/button/ButtonIconLink.stories.tsx
@@ -1,5 +1,5 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
 import {
   Controls,
   Description,
@@ -22,7 +22,7 @@ const meta = {
     variant: ButtonVariant.Solid,
     size: Size.Md,
     tone: Tone.Primary,
-    icon: IconAdd,
+    icon: IconAddOutlinedFilled,
   },
   argTypes: {
     mode: {
@@ -44,8 +44,8 @@ const meta = {
     icon: {
       options: ['Info', 'Add'],
       mapping: {
-        Info: IconInfo,
-        Add: IconAdd,
+        Info: IconInfoOutlinedFilled,
+        Add: IconAddOutlinedFilled,
       },
       control: { type: 'select' },
     },
diff --git a/src/components/button/ButtonLink.stories.tsx b/src/components/button/ButtonLink.stories.tsx
index c190c93f..fe86bad9 100644
--- a/src/components/button/ButtonLink.stories.tsx
+++ b/src/components/button/ButtonLink.stories.tsx
@@ -1,5 +1,5 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
 import {
   Controls,
   Description,
@@ -48,12 +48,20 @@ const meta = {
     },
     iconStart: {
       options: ['None', 'Add', 'Info'],
-      mapping: { None: undefined, Add: IconAdd, Info: IconInfo },
+      mapping: {
+        None: undefined,
+        Add: IconAddOutlinedFilled,
+        Info: IconInfoOutlinedFilled,
+      },
       control: { type: 'select' },
     },
     iconEnd: {
       options: ['None', 'Add', 'Info'],
-      mapping: { None: undefined, Add: IconAdd, Info: IconInfo },
+      mapping: {
+        None: undefined,
+        Add: IconAddOutlinedFilled,
+        Info: IconInfoOutlinedFilled,
+      },
       control: { type: 'select' },
     },
   },
diff --git a/src/components/button/SubmitButton.stories.tsx b/src/components/button/SubmitButton.stories.tsx
index fa2ecbb2..a96312ce 100644
--- a/src/components/button/SubmitButton.stories.tsx
+++ b/src/components/button/SubmitButton.stories.tsx
@@ -1,5 +1,5 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
 import {
   Controls,
   Description,
@@ -18,12 +18,20 @@ const meta = {
   argTypes: {
     iconStart: {
       options: ['None', 'Add', 'Info'],
-      mapping: { None: undefined, Add: IconAdd, Info: IconInfo },
+      mapping: {
+        None: undefined,
+        Add: IconAddOutlinedFilled,
+        Info: IconInfoOutlinedFilled,
+      },
       control: { type: 'select' },
     },
     iconEnd: {
       options: ['None', 'Add', 'Info'],
-      mapping: { None: undefined, Add: IconAdd, Info: IconInfo },
+      mapping: {
+        None: undefined,
+        Add: IconAddOutlinedFilled,
+        Info: IconInfoOutlinedFilled,
+      },
       control: { type: 'select' },
     },
   },
diff --git a/src/components/content/ContentMessage/ContentMessage.stories.tsx b/src/components/content/ContentMessage/ContentMessage.stories.tsx
index a9840315..e863dea5 100644
--- a/src/components/content/ContentMessage/ContentMessage.stories.tsx
+++ b/src/components/content/ContentMessage/ContentMessage.stories.tsx
@@ -1,6 +1,6 @@
-import IconError from '@aboutbits/react-material-icons/dist/IconError'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconErrorOutlinedFilled from '@aboutbits/react-material-icons/dist/IconErrorOutlinedFilled'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import {
   Controls,
   Description,
@@ -19,16 +19,16 @@ const meta = {
   args: {
     title: 'No items',
     text: 'No data available for this view',
-    icon: IconInfo,
+    icon: IconInfoOutlinedFilled,
   },
   argTypes: {
     icon: {
       options: ['None', 'Info', 'Warning', 'Error'],
       mapping: {
         None: undefined,
-        Info: IconInfo,
-        Warning: IconWarning,
-        Error: IconError,
+        Info: IconInfoOutlinedFilled,
+        Warning: IconWarningOutlinedFilled,
+        Error: IconErrorOutlinedFilled,
       },
       control: { type: 'select' },
     },
diff --git a/src/components/dialog/Dialog/ConvenientDialogContentMessage.tsx b/src/components/dialog/Dialog/ConvenientDialogContentMessage.tsx
index 77d1ff99..28b8231f 100644
--- a/src/components/dialog/Dialog/ConvenientDialogContentMessage.tsx
+++ b/src/components/dialog/Dialog/ConvenientDialogContentMessage.tsx
@@ -1,5 +1,5 @@
-import IconList from '@aboutbits/react-material-icons/dist/IconList'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconListOutlinedFilled from '@aboutbits/react-material-icons/dist/IconListOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import { ReactElement } from 'react'
 import { Tone } from '../../types'
 import {
@@ -8,14 +8,14 @@ import {
 } from './DialogContentMessage'
 
 export function DialogContentError({
-  icon: Icon = IconWarning,
+  icon: Icon = IconWarningOutlinedFilled,
   ...props
 }: Omit<DialogContentMessageProps, 'tone'>): ReactElement {
   return <DialogContentMessage tone={Tone.Critical} icon={Icon} {...props} />
 }
 
 export function DialogContentEmpty({
-  icon: Icon = IconList,
+  icon: Icon = IconListOutlinedFilled,
   ...props
 }: Omit<DialogContentMessageProps, 'tone'>): ReactElement {
   return <DialogContentMessage tone={Tone.Neutral} icon={Icon} {...props} />
diff --git a/src/components/dialog/DialogHeader/DialogHeaderCloseAction.tsx b/src/components/dialog/DialogHeader/DialogHeaderCloseAction.tsx
index 366c63ee..fbc75852 100644
--- a/src/components/dialog/DialogHeader/DialogHeaderCloseAction.tsx
+++ b/src/components/dialog/DialogHeader/DialogHeaderCloseAction.tsx
@@ -1,4 +1,4 @@
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
+import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled'
 import { ComponentType, ReactElement } from 'react'
 import { useInternationalization } from '../../../framework'
 import { IconProps } from '../../types'
@@ -18,7 +18,7 @@ export type DialogHeaderCloseActionProps = Omit<
 }
 
 export function DialogHeaderCloseAction({
-  icon = IconClose,
+  icon = IconCloseOutlinedFilled,
   label,
   ...props
 }: DialogHeaderCloseActionProps): ReactElement {
diff --git a/src/components/dialog/DialogItem/DialogListItemButton.tsx b/src/components/dialog/DialogItem/DialogListItemButton.tsx
index a2686d71..116aea4a 100644
--- a/src/components/dialog/DialogItem/DialogListItemButton.tsx
+++ b/src/components/dialog/DialogItem/DialogListItemButton.tsx
@@ -1,4 +1,4 @@
-import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight'
+import IconKeyboardArrowRightOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRightOutlinedFilled'
 import classNames from 'classnames'
 import { MouseEventHandler, forwardRef } from 'react'
 import { useTheme } from '../../../framework'
@@ -32,7 +32,7 @@ export const DialogListItemButton = forwardRef<
       {...props}
     >
       {children}
-      <IconKeyboardArrowRight
+      <IconKeyboardArrowRightOutlinedFilled
         width="24"
         height="24"
         className={dialog.listItemButton.icon}
diff --git a/src/components/form/InputField.stories.tsx b/src/components/form/InputField.stories.tsx
index 4cd51736..e8126f43 100644
--- a/src/components/form/InputField.stories.tsx
+++ b/src/components/form/InputField.stories.tsx
@@ -1,5 +1,5 @@
-import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge'
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconBadgeOutlinedFilled from '@aboutbits/react-material-icons/dist/IconBadgeOutlinedFilled'
+import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled'
 import {
   Controls,
   Description,
@@ -31,8 +31,8 @@ const meta = {
       options: ['None', 'Search', 'Badge'],
       mapping: {
         None: undefined,
-        Search: IconSearch,
-        Badge: IconBadge,
+        Search: IconSearchOutlinedFilled,
+        Badge: IconBadgeOutlinedFilled,
       },
       control: { type: 'select' },
     },
@@ -40,8 +40,8 @@ const meta = {
       options: ['None', 'Search', 'Badge'],
       mapping: {
         None: undefined,
-        Search: IconSearch,
-        Badge: IconBadge,
+        Search: IconSearchOutlinedFilled,
+        Badge: IconBadgeOutlinedFilled,
       },
       control: { type: 'select' },
     },
@@ -112,11 +112,11 @@ export const Disabled: Story = {
   },
 }
 
-export const WithIcons: Story = {
+export const WithIconsOutlinedFilled: Story = {
   render: (args) => (
     <div className="flex flex-row space-x-4">
-      <InputField {...args} iconStart={IconSearch} />
-      <InputField {...args} iconEnd={IconBadge} />
+      <InputField {...args} iconStart={IconSearchOutlinedFilled} />
+      <InputField {...args} iconEnd={IconBadgeOutlinedFilled} />
     </div>
   ),
 }
diff --git a/src/components/form/SearchField.tsx b/src/components/form/SearchField.tsx
index 1f5d05ee..56ecfc7c 100644
--- a/src/components/form/SearchField.tsx
+++ b/src/components/form/SearchField.tsx
@@ -1,4 +1,4 @@
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled'
 import { forwardRef } from 'react'
 import { useInternationalization } from '../../framework'
 import { InputField, InputFieldProps } from './InputField'
@@ -18,7 +18,7 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         name={name}
         ref={ref}
         placeholder={messages['search.placeholder']}
-        iconStart={IconSearch}
+        iconStart={IconSearchOutlinedFilled}
         {...props}
       />
     )
diff --git a/src/components/form/primitive/Checkbox/Checkbox.tsx b/src/components/form/primitive/Checkbox/Checkbox.tsx
index 26b8a710..307e52b5 100644
--- a/src/components/form/primitive/Checkbox/Checkbox.tsx
+++ b/src/components/form/primitive/Checkbox/Checkbox.tsx
@@ -1,5 +1,5 @@
-import IconCheckBoxOutlineBlankRounded from '@aboutbits/react-material-icons/dist/IconCheckBoxOutlineBlankRounded'
-import IconCheckBoxRounded from '@aboutbits/react-material-icons/dist/IconCheckBoxRounded'
+import IconCheckBoxOutlineBlankRoundedFilled from '@aboutbits/react-material-icons/dist/IconCheckBoxOutlineBlankRoundedFilled'
+import IconCheckBoxRoundedFilled from '@aboutbits/react-material-icons/dist/IconCheckBoxRoundedFilled'
 import classNames from 'classnames'
 import { ReactNode, forwardRef } from 'react'
 import { useTheme } from '../../../../framework'
@@ -80,13 +80,17 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           required={required}
           className={checkboxInputCss}
         />
-        <IconCheckbox mode={mode} size={size} disabled={disabled} />
+        <IconCheckboxOutlinedFilled
+          mode={mode}
+          size={size}
+          disabled={disabled}
+        />
       </label>
     )
   },
 )
 
-export const IconCheckbox = ({
+export const IconCheckboxOutlinedFilled = ({
   size,
   mode,
   disabled,
@@ -115,7 +119,7 @@ export const IconCheckbox = ({
 
   return (
     <>
-      <IconCheckBoxRounded
+      <IconCheckBoxRoundedFilled
         className={classNames(
           theme.checked.base,
           theme.checked.modeState[mode][disabledState],
@@ -123,7 +127,7 @@ export const IconCheckbox = ({
         )}
         {...props}
       />
-      <IconCheckBoxOutlineBlankRounded
+      <IconCheckBoxOutlineBlankRoundedFilled
         className={classNames(
           theme.unchecked.base,
           theme.unchecked.modeState[mode][disabledState],
diff --git a/src/components/form/primitive/Input.stories.tsx b/src/components/form/primitive/Input.stories.tsx
index facdf92a..add890a0 100644
--- a/src/components/form/primitive/Input.stories.tsx
+++ b/src/components/form/primitive/Input.stories.tsx
@@ -1,5 +1,5 @@
-import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge'
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconBadgeOutlinedFilled from '@aboutbits/react-material-icons/dist/IconBadgeOutlinedFilled'
+import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled'
 import {
   Controls,
   Description,
@@ -27,8 +27,8 @@ const meta = {
       options: ['None', 'Search', 'Badge'],
       mapping: {
         None: undefined,
-        Search: IconSearch,
-        Badge: IconBadge,
+        Search: IconSearchOutlinedFilled,
+        Badge: IconBadgeOutlinedFilled,
       },
       control: { type: 'select' },
     },
@@ -36,8 +36,8 @@ const meta = {
       options: ['None', 'Search', 'Badge'],
       mapping: {
         None: undefined,
-        Search: IconSearch,
-        Badge: IconBadge,
+        Search: IconSearchOutlinedFilled,
+        Badge: IconBadgeOutlinedFilled,
       },
       control: { type: 'select' },
     },
@@ -89,11 +89,15 @@ export const Tone: Story = {
   ),
 }
 
-export const Icons: Story = {
+export const IconsOutlinedFilled: Story = {
   render: (args) => (
     <div className="flex flex-row space-x-4">
-      <Input {...args} iconStart={IconSearch} placeholder="Search" />
-      <Input {...args} iconEnd={IconBadge} placeholder="Badge" />
+      <Input
+        {...args}
+        iconStart={IconSearchOutlinedFilled}
+        placeholder="Search"
+      />
+      <Input {...args} iconEnd={IconBadgeOutlinedFilled} placeholder="Badge" />
     </div>
   ),
 }
diff --git a/src/components/form/primitive/InputIcon/InputIcon.stories.tsx b/src/components/form/primitive/InputIcon/InputIcon.stories.tsx
index 8b1ca549..9945b26c 100644
--- a/src/components/form/primitive/InputIcon/InputIcon.stories.tsx
+++ b/src/components/form/primitive/InputIcon/InputIcon.stories.tsx
@@ -1,5 +1,5 @@
-import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge'
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconBadgeOutlinedFilled from '@aboutbits/react-material-icons/dist/IconBadgeOutlinedFilled'
+import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled'
 import {
   Controls,
   Description,
@@ -16,15 +16,15 @@ import { IconPosition } from './types'
 const meta = {
   component: InputIcon,
   args: {
-    icon: IconSearch,
+    icon: IconSearchOutlinedFilled,
     position: IconPosition.Start,
   },
   argTypes: {
     icon: {
       options: ['Search', 'Badge'],
       mapping: {
-        Search: IconSearch,
-        Badge: IconBadge,
+        Search: IconSearchOutlinedFilled,
+        Badge: IconBadgeOutlinedFilled,
       },
       control: { type: 'select' },
     },
diff --git a/src/components/form/primitive/Radio/Radio.tsx b/src/components/form/primitive/Radio/Radio.tsx
index d76f2a30..22bd2b4f 100644
--- a/src/components/form/primitive/Radio/Radio.tsx
+++ b/src/components/form/primitive/Radio/Radio.tsx
@@ -59,13 +59,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
         disabled={disabled}
         className={radioInputCss}
       />
-      <IconRadio mode={mode} size={size} disabled={disabled} />
+      <IconRadioOutlinedFilled mode={mode} size={size} disabled={disabled} />
       {Boolean(label) && <span className={radioLabelCss}>{label}</span>}
     </label>
   )
 })
 
-const IconRadio = ({
+const IconRadioOutlinedFilled = ({
   size,
   mode,
   disabled,
diff --git a/src/components/header/actions/HeaderBackAction.stories.mdx b/src/components/header/actions/HeaderBackAction.stories.mdx
index dc9bb268..29242b5e 100644
--- a/src/components/header/actions/HeaderBackAction.stories.mdx
+++ b/src/components/header/actions/HeaderBackAction.stories.mdx
@@ -1,4 +1,4 @@
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
+import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled'
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { InternationalizationMessages } from '../../../../.storybook/components'
 import { HeaderBackAction } from './HeaderBackAction'
@@ -22,7 +22,7 @@ export const Template = (args) => <HeaderBackAction {...args} />
         options: ['Default', 'Close'],
         mapping: {
           Default: undefined,
-          Close: IconClose,
+          Close: IconCloseOutlinedFilled,
         },
         control: { type: 'select' },
       },
diff --git a/src/components/header/actions/HeaderBackAction.tsx b/src/components/header/actions/HeaderBackAction.tsx
index 8674dac0..242d8480 100644
--- a/src/components/header/actions/HeaderBackAction.tsx
+++ b/src/components/header/actions/HeaderBackAction.tsx
@@ -1,4 +1,4 @@
-import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack'
+import IconArrowBackOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackOutlinedFilled'
 import { ComponentProps, ComponentType } from 'react'
 import { useInternationalization } from '../../../framework'
 import { IconProps } from '../../types'
@@ -35,7 +35,7 @@ export type HeaderBackActionOnClickOrFallbackUrlProps =
     }
 
 export function HeaderBackAction({
-  icon = IconArrowBack,
+  icon = IconArrowBackOutlinedFilled,
   label,
   onClick,
   fallbackUrl,
diff --git a/src/components/header/actions/HeaderButtonIcon.stories.mdx b/src/components/header/actions/HeaderButtonIcon.stories.mdx
index 1e634347..c9a1c563 100644
--- a/src/components/header/actions/HeaderButtonIcon.stories.mdx
+++ b/src/components/header/actions/HeaderButtonIcon.stories.mdx
@@ -1,5 +1,5 @@
-import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack'
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
+import IconArrowBackOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackOutlinedFilled'
+import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled'
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { Theme } from '../../../../.storybook/components'
 import { HeaderButtonIcon } from './HeaderButtonIcon'
@@ -20,8 +20,8 @@ export const Template = (args) => <HeaderButtonIcon {...args} />
       icon: {
         options: ['ArrowBack', 'Close'],
         mapping: {
-          ArrowBack: IconArrowBack,
-          Close: IconClose,
+          ArrowBack: IconArrowBackOutlinedFilled,
+          Close: IconCloseOutlinedFilled,
         },
         control: { type: 'select' },
       },
diff --git a/src/components/header/actions/HeaderCloseAction.stories.mdx b/src/components/header/actions/HeaderCloseAction.stories.mdx
index 1fabf53a..e3ccce5a 100644
--- a/src/components/header/actions/HeaderCloseAction.stories.mdx
+++ b/src/components/header/actions/HeaderCloseAction.stories.mdx
@@ -1,5 +1,5 @@
-import IconArrowBackIos from '@aboutbits/react-material-icons/dist/IconArrowBackIos'
-import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack'
+import IconArrowBackIosOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackIosOutlinedFilled'
+import IconArrowBackOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackOutlinedFilled'
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { InternationalizationMessages } from '../../../../.storybook/components'
 import { HeaderCloseAction } from './HeaderCloseAction'
@@ -26,8 +26,8 @@ export const Template = (args) => <HeaderCloseAction {...args} />
         options: ['Default', 'ArrowBack', 'ArrowBackIos'],
         mapping: {
           Default: undefined,
-          ArrowBack: IconArrowBack,
-          ArrowBackIos: IconArrowBackIos,
+          ArrowBack: IconArrowBackOutlinedFilled,
+          ArrowBackIos: IconArrowBackIosOutlinedFilled,
         },
         control: { type: 'select' },
       },
diff --git a/src/components/header/actions/HeaderCloseAction.tsx b/src/components/header/actions/HeaderCloseAction.tsx
index 088be826..a92eb56c 100644
--- a/src/components/header/actions/HeaderCloseAction.tsx
+++ b/src/components/header/actions/HeaderCloseAction.tsx
@@ -1,4 +1,4 @@
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
+import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled'
 import { ComponentType, ReactElement } from 'react'
 import { useInternationalization } from '../../../framework'
 import { IconProps } from '../../types'
@@ -15,7 +15,7 @@ export type HeaderCloseActionProps = Omit<HeaderLeftActionIconProps, 'icon'> & {
 }
 
 export function HeaderCloseAction({
-  icon = IconClose,
+  icon = IconCloseOutlinedFilled,
   label,
   ...props
 }: HeaderCloseActionProps): ReactElement {
diff --git a/src/components/header/actions/HeaderLeftActionIcon.stories.mdx b/src/components/header/actions/HeaderLeftActionIcon.stories.mdx
index 0a4e2cdc..e00c22f8 100644
--- a/src/components/header/actions/HeaderLeftActionIcon.stories.mdx
+++ b/src/components/header/actions/HeaderLeftActionIcon.stories.mdx
@@ -1,5 +1,5 @@
-import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack'
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
+import IconArrowBackOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackOutlinedFilled'
+import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled'
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { Theme } from '../../../../.storybook/components'
 import { HeaderLeftActionIcon } from './HeaderLeftActionIcon'
@@ -25,8 +25,8 @@ export const Template = (args) => <HeaderLeftActionIcon {...args} />
       icon: {
         options: ['ArrowBack', 'Close'],
         mapping: {
-          ArrowBack: IconArrowBack,
-          Close: IconClose,
+          ArrowBack: IconArrowBackOutlinedFilled,
+          Close: IconCloseOutlinedFilled,
         },
         control: { type: 'select' },
       },
diff --git a/src/components/header/actions/HeaderRightActionIcon.stories.mdx b/src/components/header/actions/HeaderRightActionIcon.stories.mdx
index a27c23c2..b9c07739 100644
--- a/src/components/header/actions/HeaderRightActionIcon.stories.mdx
+++ b/src/components/header/actions/HeaderRightActionIcon.stories.mdx
@@ -1,5 +1,5 @@
-import IconSave from '@aboutbits/react-material-icons/dist/IconSave'
-import IconForward from '@aboutbits/react-material-icons/dist/IconForward'
+import IconSaveOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSaveOutlinedFilled'
+import IconForwardOutlinedFilled from '@aboutbits/react-material-icons/dist/IconForwardOutlinedFilled'
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { Theme } from '../../../../.storybook/components'
 import { HeaderRightActionIcon } from './HeaderRightActionIcon'
@@ -25,8 +25,8 @@ export const Template = (args) => <HeaderRightActionIcon {...args} />
       icon: {
         options: ['Save', 'Forward'],
         mapping: {
-          Save: IconSave,
-          Forward: IconForward,
+          Save: IconSaveOutlinedFilled,
+          Forward: IconForwardOutlinedFilled,
         },
         control: { type: 'select' },
       },
diff --git a/src/components/header/areas/HeaderLeftArea.stories.mdx b/src/components/header/areas/HeaderLeftArea.stories.mdx
index 19905fc8..f61ab051 100644
--- a/src/components/header/areas/HeaderLeftArea.stories.mdx
+++ b/src/components/header/areas/HeaderLeftArea.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack'
+import IconArrowBackOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackOutlinedFilled'
 import { action } from '@storybook/addon-actions'
 import { Theme } from '../../../../.storybook/components'
 import { HeaderButtonIcon } from '../actions/HeaderButtonIcon'
@@ -26,7 +26,7 @@ export const Template = ({ children, ...args }) => (
         mapping: {
           HeaderButtonIcon: (
             <HeaderButtonIcon
-              icon={IconArrowBack}
+              icon={IconArrowBackOutlinedFilled}
               label="Back"
               onClick={action('onClick')}
             />
diff --git a/src/components/header/areas/HeaderRightArea.stories.mdx b/src/components/header/areas/HeaderRightArea.stories.mdx
index c9f4776a..2450c4d3 100644
--- a/src/components/header/areas/HeaderRightArea.stories.mdx
+++ b/src/components/header/areas/HeaderRightArea.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import IconEdit from '@aboutbits/react-material-icons/dist/IconEdit'
+import IconEditOutlinedFilled from '@aboutbits/react-material-icons/dist/IconEditOutlinedFilled'
 import { action } from '@storybook/addon-actions'
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
+import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
 import { Theme } from '../../../../.storybook/components'
 import { HeaderButtonIcon } from '../actions/HeaderButtonIcon'
 import { HeaderRightArea } from './HeaderRightArea'
@@ -27,7 +27,7 @@ export const Template = ({ children, ...args }) => (
         mapping: {
           HeaderButtonIcon: (
             <HeaderButtonIcon
-              icon={IconEdit}
+              icon={IconEditOutlinedFilled}
               label="Edit"
               onClick={action('onClick')}
             />
@@ -55,12 +55,12 @@ export const Template = ({ children, ...args }) => (
   <Story name="Multiple children">
     <HeaderRightArea>
       <HeaderButtonIcon
-        icon={IconEdit}
+        icon={IconEditOutlinedFilled}
         label="Edit"
         onClick={action('onClick')}
       />
       <HeaderButtonIcon
-        icon={IconAdd}
+        icon={IconAddOutlinedFilled}
         label="Add"
         onClick={action('onClick')}
       />
diff --git a/src/components/menu/Menu.stories.tsx b/src/components/menu/Menu.stories.tsx
index 9cb55095..22329de4 100644
--- a/src/components/menu/Menu.stories.tsx
+++ b/src/components/menu/Menu.stories.tsx
@@ -1,5 +1,5 @@
-import IconArrowDropUp from '@aboutbits/react-material-icons/dist/IconArrowDropUp'
-import IconMoreVert from '@aboutbits/react-material-icons/dist/IconMoreVert'
+import IconArrowDropUpOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowDropUpOutlinedFilled'
+import IconMoreVertOutlinedFilled from '@aboutbits/react-material-icons/dist/IconMoreVertOutlinedFilled'
 import { action } from '@storybook/addon-actions'
 import {
   Controls,
@@ -120,7 +120,7 @@ export const WithCustomButtonAndArrow: Story = {
     button: ({ placement, open }) => (
       <MenuButton>
         Menu
-        <IconArrowDropUp
+        <IconArrowDropUpOutlinedFilled
           className={classNames(
             'h-6 w-6',
             placement === MenuPlacement.Top
@@ -149,7 +149,7 @@ export const WithButtonIcon: Story = {
   args: {
     button: (
       <ButtonIcon
-        icon={IconMoreVert}
+        icon={IconMoreVertOutlinedFilled}
         tone={Tone.Neutral}
         variant={ButtonVariant.Transparent}
       />
diff --git a/src/components/pagination/PaginationPreviousNextContent.tsx b/src/components/pagination/PaginationPreviousNextContent.tsx
index c6c36fc4..9172668b 100644
--- a/src/components/pagination/PaginationPreviousNextContent.tsx
+++ b/src/components/pagination/PaginationPreviousNextContent.tsx
@@ -1,5 +1,5 @@
-import IconKeyboardArrowLeft from '@aboutbits/react-material-icons/dist/IconKeyboardArrowLeft'
-import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight'
+import IconKeyboardArrowLeftOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowLeftOutlinedFilled'
+import IconKeyboardArrowRightOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRightOutlinedFilled'
 import { ReactElement } from 'react'
 import { useInternationalization, useTheme } from '../../framework'
 
@@ -9,7 +9,9 @@ export function PaginationPreviousContent(): ReactElement {
 
   return (
     <>
-      <IconKeyboardArrowLeft className={pagination.prevNext.icon.base} />
+      <IconKeyboardArrowLeftOutlinedFilled
+        className={pagination.prevNext.icon.base}
+      />
       <span className={pagination.prevNext.text.base}>
         {messages['pagination.prev']}
       </span>
@@ -26,7 +28,9 @@ export function PaginationNextContent(): ReactElement {
       <span className={pagination.prevNext.text.base}>
         {messages['pagination.next']}
       </span>
-      <IconKeyboardArrowRight className={pagination.prevNext.icon.base} />
+      <IconKeyboardArrowRightOutlinedFilled
+        className={pagination.prevNext.icon.base}
+      />
     </>
   )
 }
diff --git a/src/components/react-hook-form/DateFormField.stories.tsx b/src/components/react-hook-form/DateFormField.stories.tsx
index 1ecbd93c..9c7bcabf 100644
--- a/src/components/react-hook-form/DateFormField.stories.tsx
+++ b/src/components/react-hook-form/DateFormField.stories.tsx
@@ -1,5 +1,5 @@
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { action } from '@storybook/addon-actions'
 import {
@@ -20,8 +20,8 @@ const icons = {
   options: ['None', 'Warning', 'Info'],
   mapping: {
     None: undefined,
-    Warning: IconWarning,
-    Info: IconInfo,
+    Warning: IconWarningOutlinedFilled,
+    Info: IconInfoOutlinedFilled,
   },
 }
 
diff --git a/src/components/react-hook-form/FormSubmitFeedback.stories.mdx b/src/components/react-hook-form/FormSubmitFeedback.stories.mdx
index 3e201bd8..0f416f39 100644
--- a/src/components/react-hook-form/FormSubmitFeedback.stories.mdx
+++ b/src/components/react-hook-form/FormSubmitFeedback.stories.mdx
@@ -1,11 +1,11 @@
-import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircle'
-import IconSave from '@aboutbits/react-material-icons/dist/IconSave'
+import IconCheckCircleOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckCircleOutlinedFilled'
+import IconSaveOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSaveOutlinedFilled'
 import { action } from '@storybook/addon-actions'
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
 import { useForm } from 'react-hook-form'
 import {
-  InternationalizationMessages,
-  Theme,
+    InternationalizationMessages,
+    Theme,
 } from '../../../.storybook/components'
 import { SubmitButton } from '../button/SubmitButton'
 import { Form } from './Form'
@@ -46,8 +46,8 @@ export const Template = ({ children, ...args }) => (
         options: ['None', 'CheckCircle', 'Save'],
         mapping: {
           None: null,
-          CheckCircle: IconCheckCircle,
-          Save: IconSave,
+          CheckCircle: IconCheckCircleOutlinedFilled,
+          Save: IconSaveOutlinedFilled,
         },
         control: { type: 'select' },
       },
diff --git a/src/components/react-hook-form/FormSubmitFeedback.tsx b/src/components/react-hook-form/FormSubmitFeedback.tsx
index 43384ebf..2464d66b 100644
--- a/src/components/react-hook-form/FormSubmitFeedback.tsx
+++ b/src/components/react-hook-form/FormSubmitFeedback.tsx
@@ -1,4 +1,4 @@
-import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircle'
+import IconCheckCircleOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckCircleOutlinedFilled'
 import classNames from 'classnames'
 import { ComponentType, ReactElement, ReactNode } from 'react'
 import { useInternationalization, useTheme } from '../../framework'
@@ -14,7 +14,7 @@ export type FormSubmitFeedbackProps = {
 
 export function FormSubmitFeedback({
   savedMessage,
-  icon: Icon = IconCheckCircle,
+  icon: Icon = IconCheckCircleOutlinedFilled,
   successDelay,
   className,
 }: FormSubmitFeedbackProps): ReactElement | null {
diff --git a/src/components/react-hook-form/InputFormField.stories.tsx b/src/components/react-hook-form/InputFormField.stories.tsx
index 675ce44c..7934c6a1 100644
--- a/src/components/react-hook-form/InputFormField.stories.tsx
+++ b/src/components/react-hook-form/InputFormField.stories.tsx
@@ -1,5 +1,5 @@
-import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge'
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconBadgeOutlinedFilled from '@aboutbits/react-material-icons/dist/IconBadgeOutlinedFilled'
+import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { action } from '@storybook/addon-actions'
 import {
@@ -20,8 +20,8 @@ const icons = {
   options: ['None', 'Badge', 'Search'],
   mapping: {
     None: undefined,
-    Badge: IconBadge,
-    Search: IconSearch,
+    Badge: IconBadgeOutlinedFilled,
+    Search: IconSearchOutlinedFilled,
   },
 }
 
diff --git a/src/components/react-hook-form/NumberFormField.stories.tsx b/src/components/react-hook-form/NumberFormField.stories.tsx
index 1e571c45..164dda4c 100644
--- a/src/components/react-hook-form/NumberFormField.stories.tsx
+++ b/src/components/react-hook-form/NumberFormField.stories.tsx
@@ -1,5 +1,5 @@
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { action } from '@storybook/addon-actions'
 import {
@@ -20,8 +20,8 @@ const icons = {
   options: ['None', 'Warning', 'Info'],
   mapping: {
     None: undefined,
-    Warning: IconWarning,
-    Info: IconInfo,
+    Warning: IconWarningOutlinedFilled,
+    Info: IconInfoOutlinedFilled,
   },
 }
 
diff --git a/src/components/react-hook-form/SearchFormField.tsx b/src/components/react-hook-form/SearchFormField.tsx
index c0420c99..3ec1693e 100644
--- a/src/components/react-hook-form/SearchFormField.tsx
+++ b/src/components/react-hook-form/SearchFormField.tsx
@@ -1,4 +1,4 @@
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled'
 import { ForwardedRef, forwardRef } from 'react'
 import { FieldPath, FieldValues } from 'react-hook-form'
 import { useInternationalization } from '../../framework'
@@ -30,7 +30,7 @@ export const SearchFormField = forwardRef(function SearchFormField<
       name={name}
       ref={ref}
       placeholder={messages['search.placeholder']}
-      iconStart={IconSearch}
+      iconStart={IconSearchOutlinedFilled}
       {...props}
     />
   )
diff --git a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx
index 8330199b..130bafc0 100644
--- a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx
+++ b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx
@@ -1,5 +1,5 @@
 import { IndexType } from '@aboutbits/pagination'
-import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch'
+import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled'
 import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/routers/inMemory'
 import { AsyncView } from '@aboutbits/react-toolbox'
 import { ReactElement, ReactNode } from 'react'
@@ -162,7 +162,7 @@ export function SelectItemDialogSearch({
         <InputFormField
           name="search"
           variant={FormVariant.Soft}
-          iconStart={IconSearch}
+          iconStart={IconSearchOutlinedFilled}
           placeholder={messages['search.placeholder']}
         />
       </form>
diff --git a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx
index 0def1c95..f196cd5f 100644
--- a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx
+++ b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx
@@ -1,5 +1,5 @@
-import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
-import IconKeyboardArrowDown from '@aboutbits/react-material-icons/dist/IconKeyboardArrowDown'
+import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled'
+import IconKeyboardArrowDownOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowDownOutlinedFilled'
 import classNames from 'classnames'
 import { ReactNode, useMemo, useRef } from 'react'
 import { useInternationalization, useTheme } from '../../../framework'
@@ -98,7 +98,7 @@ export function SelectItemFormFieldInput<
             {placeholder}
           </span>
           <span className={form.selectItem.input.iconContainer.base}>
-            <IconKeyboardArrowDown
+            <IconKeyboardArrowDownOutlinedFilled
               className={classNames(
                 form.selectItem.input.icon.base,
                 disabled && form.selectItem.input.icon.disabled,
@@ -140,7 +140,7 @@ export function SelectItemFormFieldInput<
                 : form.selectItem.input.iconContainer.normal,
             )}
           >
-            <IconClose
+            <IconCloseOutlinedFilled
               className={classNames(
                 form.selectItem.input.icon.base,
                 disabled && form.selectItem.input.icon.disabled,
diff --git a/src/components/section/Section/ConvenientSectionContentMessage.tsx b/src/components/section/Section/ConvenientSectionContentMessage.tsx
index 7d73523a..d4f757dd 100644
--- a/src/components/section/Section/ConvenientSectionContentMessage.tsx
+++ b/src/components/section/Section/ConvenientSectionContentMessage.tsx
@@ -1,5 +1,5 @@
-import IconList from '@aboutbits/react-material-icons/dist/IconList'
-import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconListOutlinedFilled from '@aboutbits/react-material-icons/dist/IconListOutlinedFilled'
+import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled'
 import { ReactElement } from 'react'
 import { Tone } from '../../types'
 import {
@@ -8,14 +8,14 @@ import {
 } from './SectionContentMessage'
 
 export function SectionContentError({
-  icon: Icon = IconWarning,
+  icon: Icon = IconWarningOutlinedFilled,
   ...props
 }: Omit<SectionContentMessageProps, 'tone'>): ReactElement {
   return <SectionContentMessage tone={Tone.Critical} icon={Icon} {...props} />
 }
 
 export function SectionContentEmpty({
-  icon: Icon = IconList,
+  icon: Icon = IconListOutlinedFilled,
   ...props
 }: Omit<SectionContentMessageProps, 'tone'>): ReactElement {
   return <SectionContentMessage tone={Tone.Neutral} icon={Icon} {...props} />
diff --git a/src/components/section/Section/SectionContentMessage.stories.mdx b/src/components/section/Section/SectionContentMessage.stories.mdx
index 4b92a168..ae2e0c21 100644
--- a/src/components/section/Section/SectionContentMessage.stories.mdx
+++ b/src/components/section/Section/SectionContentMessage.stories.mdx
@@ -1,11 +1,11 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import IconList from '@aboutbits/react-material-icons/dist/IconList'
+import IconListOutlinedFilled from '@aboutbits/react-material-icons/dist/IconListOutlinedFilled'
 import { Theme } from '../../../../.storybook/components'
 import { Tone } from '../../types'
 import { SectionContentMessage } from './SectionContentMessage'
 import {
-  SectionContentEmpty,
-  SectionContentError,
+    SectionContentEmpty,
+    SectionContentError,
 } from './ConvenientSectionContentMessage'
 
 <Meta
@@ -35,7 +35,7 @@ export const Template = (args) => <SectionContentMessage {...args} />
         options: ['None', 'List'],
         mapping: {
           None: undefined,
-          List: IconList,
+          List: IconListOutlinedFilled,
         },
         control: { type: 'select' },
       },
diff --git a/src/components/section/SectionItem/SectionListItem.tsx b/src/components/section/SectionItem/SectionListItem.tsx
index cbc46311..836ffb1f 100644
--- a/src/components/section/SectionItem/SectionListItem.tsx
+++ b/src/components/section/SectionItem/SectionListItem.tsx
@@ -1,4 +1,4 @@
-import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight'
+import IconKeyboardArrowRightOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRightOutlinedFilled'
 import classNames from 'classnames'
 import { ReactNode, forwardRef } from 'react'
 import {
@@ -26,7 +26,7 @@ function SectionListItemIcon() {
   const { section } = useTheme()
 
   return (
-    <IconKeyboardArrowRight
+    <IconKeyboardArrowRightOutlinedFilled
       width="24"
       height="24"
       className={section.listItemButtonLink.icon}
diff --git a/src/components/section/SectionItem/SectionListItemWithAction.stories.mdx b/src/components/section/SectionItem/SectionListItemWithAction.stories.mdx
index 2496a3d9..6d74a761 100644
--- a/src/components/section/SectionItem/SectionListItemWithAction.stories.mdx
+++ b/src/components/section/SectionItem/SectionListItemWithAction.stories.mdx
@@ -1,12 +1,12 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import IconEdit from '@aboutbits/react-material-icons/dist/IconEdit'
-import IconCopyAll from '@aboutbits/react-material-icons/dist/IconCopyAll'
+import IconEditOutlinedFilled from '@aboutbits/react-material-icons/dist/IconEditOutlinedFilled'
+import IconCopyAllOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCopyAllOutlinedFilled'
 import { Theme } from '../../../../.storybook/components'
 import {
-  Section,
-  SectionContainer,
-  SectionContentList,
-  SectionListItemWithAction,
+    Section,
+    SectionContainer,
+    SectionContentList,
+    SectionListItemWithAction,
 } from '../'
 
 <Meta
@@ -29,7 +29,7 @@ export const Template = ({ children, action }) => (
     name="Default"
     args={{
       children: 'Jane Doe',
-      action: <IconEdit width={20} height={20} className="fill-current" />,
+      action: <IconEditOutlinedFilled width={20} height={20} className="fill-current" />,
     }}
     argTypes={{
       action: { control: false },
@@ -55,7 +55,7 @@ export const Template = ({ children, action }) => (
     args={{
       children:
         'This list item has a very long text. The text should wrap, there should be a space between text and action. And the action should not shrink.',
-      action: <IconCopyAll width={20} height={20} className="fill-current" />,
+      action: <IconCopyAllOutlinedFilled width={20} height={20} className="fill-current" />,
     }}
   >
     {Template.bind({})}
@@ -71,21 +71,21 @@ export const Template = ({ children, action }) => (
         <SectionContentList>
           <SectionListItemWithAction
             action={
-              <IconEdit width={20} height={20} className="fill-current" />
+              <IconEditOutlinedFilled width={20} height={20} className="fill-current" />
             }
           >
             Jane Doe
           </SectionListItemWithAction>
           <SectionListItemWithAction
             action={
-              <IconEdit width={20} height={20} className="fill-current" />
+              <IconEditOutlinedFilled width={20} height={20} className="fill-current" />
             }
           >
             John Doe
           </SectionListItemWithAction>
           <SectionListItemWithAction
             action={
-              <IconEdit width={20} height={20} className="fill-current" />
+              <IconEditOutlinedFilled width={20} height={20} className="fill-current" />
             }
           >
             Mary Doe
diff --git a/src/examples/Form.stories.tsx b/src/examples/Form.stories.tsx
index b4a24166..faf51abd 100644
--- a/src/examples/Form.stories.tsx
+++ b/src/examples/Form.stories.tsx
@@ -1,5 +1,5 @@
 import { IndexType } from '@aboutbits/pagination'
-import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck'
+import IconCheckOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckOutlinedFilled'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { action } from '@storybook/addon-actions'
 import { Markdown, Primary, Title } from '@storybook/addon-docs'
@@ -362,7 +362,7 @@ export const UserEdit: Story = () => {
               {showSuccess && (
                 <Alert
                   tone={Tone.Success}
-                  icon={IconCheck}
+                  icon={IconCheckOutlinedFilled}
                   className="xl:col-span-full"
                 >
                   Submitted!
diff --git a/src/examples/List.stories.tsx b/src/examples/List.stories.tsx
index 75e96522..4a3124a9 100644
--- a/src/examples/List.stories.tsx
+++ b/src/examples/List.stories.tsx
@@ -1,5 +1,5 @@
 import { IndexType } from '@aboutbits/pagination'
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
+import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled'
 import { useMatchMediaQuery } from '@aboutbits/react-toolbox'
 import { action } from '@storybook/addon-actions'
 import { Markdown } from '@storybook/addon-docs'
@@ -166,7 +166,7 @@ export const ListWithFilter: Story = () => {
           <SectionHeaderTitle>List of users</SectionHeaderTitle>
           <ButtonIcon
             label="Add"
-            icon={IconAdd}
+            icon={IconAddOutlinedFilled}
             variant={ButtonVariant.Transparent}
             tone={Tone.Neutral}
             onClick={action('onAddNew')}