fix(FilterIcon): Replace FilterIcon with RhUiFilterFillIcon (#12524)

rebeccaalpert · cursoragent · web-flow · commit f8bcd7cc8b14 · 2026-07-08T14:04:32.000-04:00
Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;
diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -10,7 +10,7 @@ import { Fragment, useState, useLayoutEffect, useRef } from 'react';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx
@@ -12,7 +12,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -124,7 +124,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
   );
 
   const items = (
-    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
       {toggleGroupItems}
     </ToolbarToggleGroup>
   );
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx
@@ -12,7 +12,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -129,7 +129,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
   );
 
   const items = (
-    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
       {toggleGroupItems}
     </ToolbarToggleGroup>
   );
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx
@@ -14,7 +14,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
@@ -169,7 +169,7 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
 
   const toolbarItems = (
     <Fragment>
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
         {toggleGroupItems}
       </ToolbarToggleGroup>
       <ToolbarGroup variant="action-group-plain">
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
@@ -23,8 +23,8 @@ import {
   ToolbarToggleGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 export const ToolbarStacked: React.FunctionComponent = () => {
   // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
@@ -203,7 +203,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     <Fragment>
       <Toolbar>
         <ToolbarContent>
-          <ToolbarToggleGroup variant="label-group" toggleIcon={<FilterIcon />} breakpoint="lg">
+          <ToolbarToggleGroup variant="label-group" toggleIcon={<RhUiFilterFillIcon />} breakpoint="lg">
             {toggleGroupItems}
           </ToolbarToggleGroup>
           <ToolbarItem>
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
@@ -18,7 +18,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
@@ -205,7 +205,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const toolbarItems = (
     <Fragment>
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
         {toggleGroupItems}
       </ToolbarToggleGroup>
       <ToolbarGroup variant="action-group-plain">
diff --git a/packages/react-core/src/demos/Filters/FilterDemos.md b/packages/react-core/src/demos/Filters/FilterDemos.md
@@ -29,7 +29,7 @@ Button,
 Bullseye,
 ToolbarToggleGroup
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
@@ -25,7 +25,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -523,7 +523,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       ref={attributeToggleRef}
       onClick={onAttributeToggleClick}
       isExpanded={isAttributeMenuOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
     >
       {activeAttributeMenu}
     </MenuToggle>
@@ -582,7 +582,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarGroup variant="filter-group">
             <ToolbarItem>{attributeDropdown}</ToolbarItem>
             <ToolbarFilter
diff --git a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
@@ -16,7 +16,7 @@ import {
   Pagination
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -289,7 +289,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       {...(selections.length > 0 && { badge: <Badge isRead>{selections.length}</Badge> })}
       style={
         {
diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
@@ -24,7 +24,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -320,7 +320,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
       {...(areSelectionsPresent && {
         badge: <Badge isRead>{locationSelections.length + statusSelections.length}</Badge>
       })}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
@@ -413,7 +413,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarFilter
             labels={statusSelections}
             deleteLabel={(category, label) => onLabelDelete(category as string, label as string)}
diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
@@ -23,7 +23,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -290,7 +290,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       ref={statusToggleRef}
       onClick={onStatusToggleClick}
       isExpanded={isStatusMenuOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
@@ -389,7 +389,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       onClick={onLocationMenuToggleClick}
       isExpanded={isLocationMenuOpen}
       {...(locationSelections.length > 0 && { badge: <Badge isRead>{locationSelections.length}</Badge> })}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
@@ -464,7 +464,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarFilter
             labels={statusSelection !== '' ? [statusSelection] : ([] as string[])}
             deleteLabel={() => setStatusSelection('')}
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
@@ -21,7 +21,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -291,7 +291,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       ref={statusToggleRef}
       onClick={onStatusToggleClick}
       isExpanded={isStatusMenuOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
@@ -385,7 +385,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       ref={locationToggleRef}
       onClick={onLocationMenuToggleClick}
       isExpanded={isLocationMenuOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
@@ -451,7 +451,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     >
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarItem>{statusSelect}</ToolbarItem>
           <ToolbarItem>{locationSelect}</ToolbarItem>
         </ToolbarToggleGroup>
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
@@ -13,7 +13,7 @@ import {
   Pagination
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface Repository {
   name: string;
@@ -293,7 +293,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
-      icon={<FilterIcon />}
+      icon={<RhUiFilterFillIcon />}
       style={
         {
           width: '200px'
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
@@ -10,7 +10,7 @@ import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhUiCloseCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-circle-fill-icon';
 import pfIcon from './assets/pf-logo-small.svg';
diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
@@ -9,9 +9,9 @@ import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-u
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import display from '@patternfly/react-styles/css/utilities/Display/display';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
@@ -44,9 +44,9 @@ import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-bra
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhUiCloseCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-circle-fill-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface SelectOptionType extends Omit<SelectOptionProps, 'children'> {
   label: string;
@@ -176,7 +176,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
   );
 
   const ToolbarItems = (
-    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
       {toggleGroupItems}
     </ToolbarToggleGroup>
   );
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
@@ -44,9 +44,9 @@ import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-bra
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhUiCloseCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-circle-fill-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 interface SelectOptionType extends Omit<SelectOptionProps, 'children'> {
   label: string;
@@ -176,7 +176,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
   );
 
   const ToolbarItems = (
-    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
       {toggleGroupItems}
     </ToolbarToggleGroup>
   );
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
@@ -44,10 +44,9 @@ import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-bra
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhUiCloseCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-circle-fill-icon';
-
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 interface SelectOptionType extends Omit<SelectOptionProps, 'children'> {
   label: string;
 }
@@ -176,7 +175,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
   );
 
   const ToolbarItems = (
-    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
       {toggleGroupItems}
     </ToolbarToggleGroup>
   );
diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -52,8 +52,8 @@ import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import { KeyTypes } from '../../../helpers';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
@@ -178,7 +178,7 @@ export const TablesAndTabs = () => {
   const toolbar = (
     <Toolbar id="page-layout-table-column-management-action-toolbar-top">
       <ToolbarContent>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
           <ToolbarItem>
             <MenuToggle>Name</MenuToggle>
           </ToolbarItem>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
@@ -24,7 +24,7 @@ import {
   SelectOption
 } from '@patternfly/react-core';
 import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
@@ -249,7 +249,7 @@ class ToolbarDemo extends Component<ToolbarProps, ToolbarState> {
 
     const toolbarItems = (
       <>
-        <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl" id="demo-toggle-group">
+        <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl" id="demo-toggle-group">
           {toggleGroupItems}
         </ToolbarToggleGroup>
         <ToolbarGroup variant="action-group-plain">
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisibilityDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisibilityDemo.tsx
diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
diff --git a/packages/react-table/src/demos/examples/TableCompact.tsx b/packages/react-table/src/demos/examples/TableCompact.tsx
diff --git a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
diff --git a/packages/react-table/src/demos/examples/TableFilterable.tsx b/packages/react-table/src/demos/examples/TableFilterable.tsx
diff --git a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
