Skip to content

chore(ArrowRightIcon): Update any uses of FA arrow right icon to RH brand arrow right icon #12365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tlabaj wants to merge 3 commits into
base: main
Choose a base branch
from
Open

chore(ArrowRightIcon): Update any uses of FA arrow right icon to RH brand arrow right icon #12365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1bcf5ed
chore(ArrowRightIcon): Update any uses of FA arro right icon to RH br…
tlabaj Apr 20, 2026
d1098e5
fix paths
tlabaj Apr 21, 2026
b4a7b39
more fixes
tlabaj Apr 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Accordion/examples/Accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionTog
---

import { useState } from 'react';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
import RhUiCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-caret-right-icon';

## Examples

Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
Button,
Checkbox
} from '@patternfly/react-core';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
import RhUiCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-caret-right-icon';

export const AccordionBordered: React.FunctionComponent = () => {
const [expanded, setExpanded] = useState('bordered-toggle4');
Expand Down Expand Up @@ -95,7 +95,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
</AccordionExpandableContentBody>
<AccordionExpandableContentBody>
<Button variant="link" size="lg" isInline>
Call to action <ArrowRightIcon />
Call to action <RhUiCaretRightIcon />
</Button>
</AccordionExpandableContentBody>
</AccordionContent>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Button/examples/Button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-micron
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
import RhUiCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-caret-right-icon';
import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button, Flex } from '@patternfly/react-core';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
import RhUiCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-caret-right-icon';

export const ButtonCallToAction: React.FunctionComponent = () => (
<Flex columnGap={{ default: 'columnGapSm' }}>
Expand All @@ -12,7 +12,7 @@ export const ButtonCallToAction: React.FunctionComponent = () => (
<Button variant="tertiary" size="lg">
Call to action
</Button>
<Button variant="link" size="lg" icon={<ArrowRightIcon />} iconPosition="end">
<Button variant="link" size="lg" icon={<RhUiCaretRightIcon />} iconPosition="end">
Call to action
</Button>
</Flex>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Nav/examples/Nav.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ ouia: true

import { useState } from 'react';
import './nav.css';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
import RhUiCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-caret-right-icon';
import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/SearchInput/SearchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
import RhUiCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-caret-right-icon';
import { AdvancedSearchMenu } from './AdvancedSearchMenu';
import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
import { InputGroup, InputGroupItem } from '../InputGroup';
Expand Down Expand Up @@ -479,7 +479,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
isDisabled={isDisabled}
icon={
<Icon shouldMirrorRTL>
<ArrowRightIcon />
<RhUiCaretRightIcon />
</Icon>
}
/>
Expand Down
100 changes: 20 additions & 80 deletions ...s/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,24 +149,12 @@ exports[`SearchInput advanced search 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 448 512"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
/>
</svg>
<path
d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -328,24 +316,12 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 448 512"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
/>
</svg>
<path
d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -697,24 +673,12 @@ exports[`SearchInput renders search input in strict mode 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 448 512"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
/>
</svg>
<path
d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -913,24 +877,12 @@ exports[`SearchInput search input with hint 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 448 512"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
/>
</svg>
<path
d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -1121,24 +1073,12 @@ exports[`SearchInput simple search input 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 448 512"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
/>
</svg>
<path
d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
/>
</svg>
</span>
</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/CardDemos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ section: components
import { Fragment, useState } from 'react';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
import RhUiCaretRightIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-caret-right-icon';
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
import { RhUiCheckCircleFillIcon, RhUiErrorFillIcon, RhUiWarningFillIcon, RhUiNotificationFillIcon } from '@patternfly/react-icons';
import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
Expand Down
10 changes: 5 additions & 5 deletions packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
MenuToggleElement
} from '@patternfly/react-core';
import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
import RhUiCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-caret-right-icon';
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

Expand Down Expand Up @@ -134,7 +134,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
</ListItem>
</List>
</Flex>
<Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
<Button href="#" component="a" variant="link" isInline icon={<RhUiCaretRightIcon />} iconPosition="right">
View all set up cluster steps
</Button>
</Flex>
Expand Down Expand Up @@ -162,7 +162,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
</ListItem>
</List>
</Flex>
<Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
<Button href="#" component="a" variant="link" isInline icon={<RhUiCaretRightIcon />} iconPosition="right">
View all guided tours
</Button>
</Flex>
Expand Down Expand Up @@ -193,7 +193,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
</ListItem>
</List>
</Flex>
<Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
<Button href="#" component="a" variant="link" isInline icon={<RhUiCaretRightIcon />} iconPosition="right">
View all quick starts
</Button>
</Flex>
Expand Down Expand Up @@ -227,7 +227,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
</ListItem>
</List>
</Flex>
<Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
<Button href="#" component="a" variant="link" isInline icon={<RhUiCaretRightIcon />} iconPosition="right">
View all learning resources
</Button>
</Flex>
Expand Down
Loading