From ff3eb0a72317a3092613b76ce16a875e7e9b5cc5 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 16 Apr 2026 16:27:06 -0400 Subject: [PATCH 1/2] docs(iconography): Updates docs with new icons. --- .../styles/iconography/IconsTable.jsx | 97 +- .../styles/iconography/iconography.md | 82 +- .../styles/iconography/icons.css | 5 + .../styles/iconography/icons.js | 1467 +++++++---------- 4 files changed, 705 insertions(+), 946 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/IconsTable.jsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/IconsTable.jsx index d51d5d6878..6c7172deb8 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/IconsTable.jsx +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/IconsTable.jsx @@ -23,15 +23,21 @@ import { } from '@patternfly/react-table'; import { iconsData } from './icons'; import { saveAs } from 'file-saver'; -import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; -import * as iconUnicodes from '@patternfly/patternfly/assets/icons/iconUnicodes.json'; +import RhUiSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-search-icon'; + +const REACT_COLUMN_LABEL = 'React name'; export const IconsTable = () => { - const columns = ['Icon', 'Name', 'Style', 'React', 'Usage', 'Unicode']; + const columns = ['Icon', 'Name', 'React', 'Usage']; const [searchValue, setSearchValue] = React.useState(''); - const [isCopied, setCopied] = React.useState(false); const [sortByIndex, setSortByIndex] = React.useState(1); const [sortDirection, setSortDirection] = React.useState('asc'); + /** Which row’s React name was last copied (for tooltip feedback). */ + const [copiedReactName, setCopiedReactName] = React.useState(null); + + React.useEffect(() => { + setCopiedReactName(null); + }, [searchValue]); const getSortParams = columnIndex => ({ sortBy: { @@ -62,11 +68,6 @@ export const IconsTable = () => { saveAs(blob, filename); }; - const clipboardCopyFunc = (event, text) => { - navigator.clipboard.writeText(text.toString()); - setCopied(true); - }; - const filteredRows = React.useMemo(() => { return iconsData.filter(icon => { return icon.Name.toLowerCase().includes(searchValue.toLowerCase()) || @@ -115,7 +116,7 @@ export const IconsTable = () => { @@ -123,16 +124,13 @@ export const IconsTable = () => { - - - - + + {sortedRows.map((icon, index) => { const Icon = icons[icon.React_name]; - const iconUnicode = icon.Unicode || iconUnicodes.default[icon.Name] || ''; return ( @@ -148,33 +146,47 @@ export const IconsTable = () => { - - - - + ) })} @@ -182,9 +194,18 @@ export const IconsTable = () => {
{columns[0]} {columns[1]}{columns[2]}{columns[3]}{columns[4]}{columns[5]}{REACT_COLUMN_LABEL}{columns[3]}
{icon.Name}{icon.Style}{icon.React_name} - {icon.Contextual_usage} - {icon.Extra_context && ( - -

{icon.Extra_context} - - )} - 		+ {isCopied ? 'Copied' : 'Copy'}} + content={
{copiedReactName === icon.React_name ? 'Copied' : 'Copy React name'}
} position={TooltipPosition.left} - exitDelay={isCopied ? 1000 : 100} - onTooltipHidden={() => setCopied(false)} + exitDelay={copiedReactName === icon.React_name ? 1000 : 100} + onTooltipHidden={() => { + if (copiedReactName === icon.React_name) { + setCopiedReactName(null); + } + }} > - + {icon.React_name} + 		+ {icon.Contextual_usage} + {icon.Extra_context && ( + +

{icon.Extra_context} + + )} +
{filteredRows.length === 0 && ( - - We couldn't find any icons that matched your search. If none of the icons listed fit - your use case, you may use any additional 'fa' icons within Font Awesome's free set. + + + We couldn't find any icons that matched your search. Try different keywords or browse the full list above. + If you need an icon that isn't listed, you can{' '} + + request a new icon from the Red Hat brand team + + . )} diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md index 30d06cc42f..3e8166baf5 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md @@ -3,18 +3,18 @@ id: Iconography section: foundations-and-styles --- import { Icon, Content, ContentVariants } from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; -import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; +import RhUiStarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-icon'; import { IconsTable } from './IconsTable.jsx'; import './icons.css'; If you're a developer, check out our [development onboarding guide](/get-started/develop#using-icons) to learn how to install and use our icon set. -For additional usage instruction, [refer to the icon component pages.](/components/icon) +For React and HTML implementation examples, [refer to the icon component pages.](/components/icon) ## Icon sizes @@ -34,20 +34,20 @@ Use the following semantic tokens to ensure that icons are properly aligned and | **Size** | **Token** | **Example** | | --- | --- | :---: | -| 1.375rem (22px) | `pf-t--global--icon--size--font--heading--h1` | Heading | -| 1.25rem (20px) | `pf-t--global--icon--size--font--heading--h2` | Heading | -| 1.125rem (18px) | `pf-t--global--icon--size--font--heading--h3` | Heading | -| 1rem (16px) | `pf-t--global--icon--size--font--heading--h4` | Heading | -| 1rem (16px) | `pf-t--global--icon--size--font--heading--h5` | Heading | -| 1rem (16px) | `pf-t--global--icon--size--font--heading--h6` | Heading | +| 1.375rem (22px) | `pf-t--global--icon--size--font--heading--h1` | Heading | +| 1.25rem (20px) | `pf-t--global--icon--size--font--heading--h2` | Heading | +| 1.125rem (18px) | `pf-t--global--icon--size--font--heading--h3` | Heading | +| 1rem (16px) | `pf-t--global--icon--size--font--heading--h4` | Heading | +| 1rem (16px) | `pf-t--global--icon--size--font--heading--h5` | Heading | +| 1rem (16px) | `pf-t--global--icon--size--font--heading--h6` | Heading | ### Body text | **Size** | **Token** | **Example** | | --- | --- | :---: | -| 0.75rem (12px) | `pf-t--global--icon--size--font--body--sm` | Small body | -| 0.875rem (14px) | `pf-t--global--icon--size--font--body--default` | Default body -| 1rem (16px) | `pf-t--global--icon--size--font--body--lg` | Large body +| 0.75rem (12px) | `pf-t--global--icon--size--font--body--sm` | Small body | +| 0.875rem (14px) | `pf-t--global--icon--size--font--body--default` | Default body +| 1rem (16px) | `pf-t--global--icon--size--font--body--lg` | Large body ## Standalone icons @@ -55,12 +55,12 @@ Occasionally, you may need to use a standalone icon that isn't aligned with any | **Size** | **Token** | **Example** | | --- | --- | :---: | -| Small (0.75rem, 12px) | `--pf-t--global--icon--size--sm` | | -| Medium (0.875rem, 14px) | `--pf-t--global--icon--size--md` | | -| Large (1rem, 16px) | `--pf-t--global--icon--size--lg` | | -| X-large (1.375rem, 22px) | `--pf-t--global--icon--size--xl` | | -| 2xl (3.5rem, 56px) | `--pf-t--global--icon--size--2xl` | | -| 3xl (6rem, 96px) | `--pf-t--global--icon--size--3xl` | | +| Small (0.75rem, 12px) | `--pf-t--global--icon--size--sm` | | +| Medium (0.875rem, 14px) | `--pf-t--global--icon--size--md` | | +| Large (1rem, 16px) | `--pf-t--global--icon--size--lg` | | +| X-large (1.375rem, 22px) | `--pf-t--global--icon--size--xl` | | +| 2xl (3.5rem, 56px) | `--pf-t--global--icon--size--2xl` | | +| 3xl (6rem, 96px) | `--pf-t--global--icon--size--3xl` | | Medium icons are typically the most versatile size to use in a UI. Most icons in PatternFly components are medium; other sizes are used sparingly. @@ -69,46 +69,34 @@ All icon colors that you use should align with the proper [semantic design token | **Icon state** | **Color token** | **Example** | | --- | --- | :---: | -| Danger | `--pf-t--global--icon--color--status--danger--default` | | -| Warning | `--pf-t--global--icon--color--status--warning--default` | | -| Success | `--pf-t--global--icon--color--status--success--default` | | -| Info | `--pf-t--global--icon--color--status--info--default` | | -| Custom | `--pf-t--global--icon--color--status--custom--default` | | +| Danger | `--pf-t--global--icon--color--status--danger--default` | | +| Warning | `--pf-t--global--icon--color--status--warning--default` | | +| Success | `--pf-t--global--icon--color--status--success--default` | | +| Info | `--pf-t--global--icon--color--status--info--default` | | +| Custom | `--pf-t--global--icon--color--status--custom--default` | | To learn more about icon colors and color tokens, visit our [colors page.](/foundations-and-styles/colors) ## PatternFly icons -PatternFly uses custom icons and selections from Font Awesome Free, as shown in [this table](#all-icons). If PatternFly doesn't offer an icon for your use case, you can download SVGs of additional 'fa' icons from Font Awesome's free set. Be sure to properly attribute these additional icons as outlined on the Font Awesome site. +We use Red Hat brand UI icons (`rh-ui-*`), delivered through `@patternfly/react-icons` and the [icon component](/components/icon). The following table lists the icons we document for use in PatternFly UIs. -### HTML icons -When using HTML, use the following syntax: - -- For 'pficon' icons: `` -- For 'fa' solid icons: `` -- For 'fa' regular icons: `` - -**Note:** Be sure to reference our [development onboarding guide](/get-started/develop#using-icons) when using 'fa' regular icons. +Use the [React Icon component](/components/icon) with imports from `@patternfly/react-icons`, or inline SVG from your product’s PatternFly assets. For setup details, see the [development onboarding guide](/get-started/develop#using-icons). ### React icons -When using React, you can import 'pficon' icons from our [react-icons package](https://www.npmjs.com/package/@patternfly/react-icons) by including the following line: `import { [insert-icon-name] } from '@patternfly/react-icons/dist/esm/icons/[insert-hyphenated-icon-name]';` +Import icons from our [react-icons package](https://www.npmjs.com/package/@patternfly/react-icons): -For example: -`import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';` +`import { [insert-icon-name] } from '@patternfly/react-icons/dist/esm/icons/[insert-hyphenated-icon-name]';` -### Font Awesome solid (FAS) vs Font Awesome regular (FAR) -The Font Awesome icons included with PatternFly are Font Awesome solid (FAS) webfont icons. If you're using icons via ``, you can use any FAS icon. If you need to use a Font Awesome regular (FAR) icon, you must include the FAR icons yourself by doing one of the following: +For example: -1. [Host it yourself](https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself) -2. [Include the icons via a package manager](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers) -3. [Link to a CDN](https://cdnjs.com/libraries/font-awesome) -4. Use the SVG code directly from [fontawesome.com](https://fontawesome.com) (proper attribution is required) +`import RhUiStarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-icon';` ## All icons -The following table provides details and usage information for all icons that PatternFly supports. +The following table lists Red Hat UI icons with usage guidance for PatternFly. For guidance related to icon tooltips, [refer to our tooltips writing guide.](/content-design/writing-guides/tooltips#icon-tooltips) -Select any single icon in the table to download it as an SVG. You can also download all icon SVGs on GitHub (via patternfly-icons.zip.) +Select any single icon in the table to download it as an SVG. diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/icons.css b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/icons.css index 7c2f37dd26..36626bba75 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/icons.css +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/icons.css @@ -3,3 +3,8 @@ width: 400px; } } + +/* Inline text — avoids full-width plain Button stretching the cell on narrow viewports */ +#ws-icons-table .ws-icons-react-name-copy { + cursor: pointer; +} diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/icons.js b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/icons.js index 1a66680487..f0ef8d872a 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/icons.js +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/icons.js @@ -1,1379 +1,1124 @@ export const iconsData = [ { - "Style": "fas", - "Name": "fa-angle-double-left", - "React_name": "AngleDoubleLeftIcon", + "Name": "rh-ui-double-caret-left", + "React_name": "RhUiDoubleCaretLeftIcon", "Type": "Framework", - "Contextual_usage": "Indicates the ability to navigate to the first page of a multi-page data set", + "Contextual_usage": "Indicates the ability to navigate to the first page of a multi-page data set" }, { - "Style": "fas", - "Name": "fa-angle-double-right", - "React_name": "AngleDoubleRightIcon", + "Name": "rh-ui-double-caret-right", + "React_name": "RhUiDoubleCaretRightIcon", "Type": "Framework", - "Contextual_usage": "Indicates the ability to navigate to the last page of a multi-page data set", + "Contextual_usage": "Indicates the ability to navigate to the last page of a multi-page data set" }, { - "Style": "fas", - "Name": "fa-angle-down", - "React_name": "AngleDownIcon", + "Name": "rh-ui-caret-down", + "React_name": "RhUiCaretDownIcon", "Type": "Framework", - "Contextual_usage": "Indicates expandable components such as accordions, progressive disclosures, or expandable lists are currently expanded. Clicking this will collapse the component.", + "Contextual_usage": "Indicates expandable components such as accordions, progressive disclosures, or expandable lists are currently expanded. Clicking this will collapse the component." }, { - "Style": "fas", - "Name": "fa-angle-left", - "React_name": "AngleLeftIcon", + "Name": "rh-ui-caret-left", + "React_name": "RhUiCaretLeftIcon", "Type": "Framework", - "Contextual_usage": "Indicates the ability to navigate to the previous page of a multi-page data set", + "Contextual_usage": "Indicates the ability to navigate to the previous page of a multi-page data set" }, { - "Style": "fas", - "Name": "fa-angle-right", - "React_name": "AngleRightIcon", + "Name": "rh-ui-caret-right", + "React_name": "RhUiCaretRightIcon", "Type": "Framework", "Contextual_usage": "Indicates expandable elements such as accordions, progressive disclosures, or expandable lists are currently collapsed. Clicking this will expand the element.", "Extra_context": "Also indicates the ability to navigate to the next page in a multipage data set." }, { - "Style": "fas", - "Name": "fa-angle-up", - "React_name": "AngleUpIcon", + "Name": "rh-ui-caret-up", + "React_name": "RhUiCaretUpIcon", "Type": "Framework", - "Contextual_usage": "Indicates expandable table rows (on mobile) are currently expanded. Clicking this will collapse the component.", + "Contextual_usage": "Indicates expandable table rows (on mobile) are currently expanded. Clicking this will collapse the component." }, { - "Style": "pficon", - "Name": "pficon-ansible-tower", - "React_name": "AnsibleTowerIcon", - "Type": "Brand", - "Contextual_usage": "Represents \"Ansible Tower\"", + "Name": "rh-ui-arrow-circle-down", + "React_name": "RhUiArrowCircleDownIcon", + "Type": "Status", + "Contextual_usage": "Represents status: an item (such as a VM) is down" }, { - "Style": "fas", - "Name": "fa-arrow-circle-down", - "React_name": "ArrowCircleDownIcon", + "Name": "rh-ui-arrow-circle-up", + "React_name": "RhUiArrowCircleUpIcon", "Type": "Status", - "Contextual_usage": "Represents status: an item (such as a VM) is down", + "Contextual_usage": "Represents status: an item (such as a VM) is up" + }, + { + "Name": "rh-ui-arrow-up-down", + "React_name": "RhUiArrowUpDownIcon", + "Type": "Framework", + "Contextual_usage": "Indicates the availability of a sorting function in a table header" + }, + { + "Name": "rh-ui-arrow-right", + "React_name": "RhUiArrowRightIcon", + "Type": "Framework", + "Contextual_usage": "Indicates the ability to take an action or navigate to another page. Is paired with text" }, { - "Style": "fas", - "Name": "fa-arrow-circle-up", - "React_name": "ArrowCircleUpIcon", + "Name": "rh-ui-scale-balanced", + "React_name": "RhUiScaleBalancedIcon", "Type": "Status", - "Contextual_usage": "Represents status: an item (such as a VM) is up", + "Contextual_usage": "Represents status: an item needs rebalancing" }, { - "Style": "fas", - "Name": "fa-arrows-alt-v", - "React_name": "ArrowsAltVIcon", + "Name": "rh-ui-ban", + "React_name": "RhUiBanIcon", + "Type": "Status", + "Contextual_usage": "Represents status: an item is disabled, canceled, terminated or is not ready" + }, + { + "Name": "rh-ui-menu-bars", + "React_name": "RhUiMenuBarsIcon", "Type": "Framework", - "Contextual_usage": "Indicates the availability of a sorting function in a table header", + "Contextual_usage": "Indicates the ability to collapse a navigation menu" }, { - "Style": "fas", - "Name": "fa-arrow-right", - "React_name": "ArrowRightIcon", + "Name": "rh-ui-notification-fill", + "React_name": "RhUiNotificationFillIcon", "Type": "Framework", - "Contextual_usage": "Indicates the ability to take an action or navigate to another page. Is paired with text", + "Contextual_usage": "Indicates the ability to open a notification drawer." }, { - "Style": "fas", - "Name": "fa-balance-scale", - "React_name": "BalanceScaleIcon", + "Name": "rh-ui-notification-fill (blue)", + "React_name": "RhUiNotificationFillIcon", "Type": "Status", - "Contextual_usage": "Represents status: an item needs rebalancing", + "Contextual_usage": "Represents status: default notification", + "color": "var(--pf-t--global--icon--color--brand--default)" }, { - "Style": "fas", - "Name": "fa-ban", - "React_name": "BanIcon", + "Name": "rh-ui-attention-bell-fill", + "React_name": "RhUiAttentionBellFillIcon", "Type": "Status", - "Contextual_usage": "Represents status: an item is disabled, canceled, terminated or is not ready", + "Contextual_usage": "Represents status: attention" }, { - "Style": "fas", - "Name": "fa-bars", - "React_name": "BarsIcon", - "Type": "Framework", - "Contextual_usage": "Indicates the ability to collapse a navigation menu", - }, - { - "Style": "fas", - "Name": "fa-bell", - "React_name": "BellIcon", - "Type": "Framework", - "Contextual_usage": "Indicates the ability to open a notification drawer.", - }, - { - "Style": "", - "Name": "fa-bell (blue)", - "React_name": "BellIcon", - "Type": "Status", - "Contextual_usage": "Represents status: default notification", - color: 'var(--pf-t--global--icon--color--brand--default)', - }, - { - "Style": "pficon", - "Name": "pficon-attention-bell", - "React_name": "AttentionBellIcon", - "Type": "Status", - "Contextual_usage": "Represents status: attention", - }, - { - "Style": "fas", - "Name": "fa-bug", - "React_name": "BugIcon", + "Name": "rh-ui-bug", + "React_name": "RhUiBugIcon", "Type": "Status", - "Contextual_usage": "Represents status: there is a bug present", + "Contextual_usage": "Represents status: there is a bug present" }, { - "Style": "far", - "Name": "fa-calendar-alt", - "React_name": "OutlinedCalendarAltIcon", + "Name": "rh-ui-calendar", + "React_name": "RhUiCalendarIcon", "Type": "Framework", - "Contextual_usage": "Indicates a date picker function is available", + "Contextual_usage": "Indicates a date picker function is available" }, { - "Style": "fas", - "Name": "fa-caret-down", - "React_name": "CaretDownIcon", + "Name": "rh-ui-caret-down", + "React_name": "RhUiCaretDownIcon", "Type": "Framework", - "Contextual_usage": "Indicates the ability to acces option panels for components like drop-downs, filters and page ranges", + "Contextual_usage": "Indicates the ability to acces option panels for components like drop-downs, filters and page ranges" }, { - "Style": "fas", - "Name": "fa-check", - "React_name": "CheckIcon", + "Name": "rh-ui-check", + "React_name": "RhUiCheckIcon", "Type": "Status", - "Contextual_usage": "Represents status: Indicates a switch toggle is in the enabled position", + "Contextual_usage": "Represents status: Indicates a switch toggle is in the enabled position" }, { - "Style": "fas", - "Name": "fa-check-circle", - "React_name": "CheckCircleIcon", - "Type": ["Action","Status"], + "Name": "rh-ui-check-circle-fill", + "React_name": "RhUiCheckCircleFillIcon", + "Type": [ + "Action", + "Status" + ], "Contextual_usage": "Indicates the ability to commit edited changes", "Extra_context": "Represents status: OK in content views such as a tables", - color: 'var(--pf-t--global--icon--color--status--success--default)', + "color": "var(--pf-t--global--icon--color--status--success--default)" }, { - "Style": "fas", - "Name": "fa-clipboard-check", - "React_name": "ClipboardCheckIcon", + "Name": "rh-ui-check-clipboard", + "React_name": "RhUiCheckClipboardIcon", "Type": "Object", - "Contextual_usage": "Represents orders or tasks", + "Contextual_usage": "Represents orders or tasks" }, { - "Style": "far", - "Name": "fa-clock", - "React_name": "OutlinedClockIcon", + "Name": "rh-ui-clock", + "React_name": "RhUiClockIcon", "Type": "Framework", - "Contextual_usage": "Represents a time interval", + "Contextual_usage": "Represents a time interval" }, { - "Style": "fas", - "Name": "fa-code", - "React_name": "CodeIcon", + "Name": "rh-ui-code", + "React_name": "RhUiCodeIcon", "Type": "Object", - "Contextual_usage": "Represents code", + "Contextual_usage": "Represents code" }, { - "Style": "fas", - "Name": "fa-code-branch", - "React_name": "CodeBranchIcon", + "Name": "rh-ui-branch", + "React_name": "RhUiBranchIcon", "Type": "Object", - "Contextual_usage": "Represents code branch", + "Contextual_usage": "Represents code branch" }, { - "Style": "fas", - "Name": "fa-cog", - "React_name": "CogIcon", + "Name": "rh-ui-settings", + "React_name": "RhUiSettingsIcon", "Type": "Action", - "Contextual_usage": "Indicates availability of configurable settings", + "Contextual_usage": "Indicates availability of configurable settings" }, { - "Style": "fas", - "Name": "fa-columns", - "React_name": "ColumnsIcon", + "Name": "rh-ui-columns", + "React_name": "RhUiColumnsIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to manage columns for a table view", + "Contextual_usage": "Indicates the ability to manage columns for a table view" }, { - "Style": "far", - "Name": "fa-comments", - "React_name": "OutlinedCommentsIcon", + "Name": "rh-ui-comments", + "React_name": "RhUiCommentsIcon", "Type": "Framework", - "Contextual_usage": "Indicates availability of commenting", + "Contextual_usage": "Indicates availability of commenting" }, { - "Style": "fas", - "Name": "fa-compress", - "React_name": "CompressIcon", + "Name": "rh-ui-compress", + "React_name": "RhUiCompressIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to compress an item. Should toggle with fa-expand", + "Contextual_usage": "Indicates the ability to compress an item. Should toggle with fa-expand" }, { - "Style": "fas", - "Name": "fa-compress-arrows-alt", - "React_name": "CompressArrowsAltIcon", + "Name": "rh-ui-compress-arrows", + "React_name": "RhUiCompressArrowsIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to compress an item (alt concept). Should toggle with fa-expand-arrows-alt", + "Contextual_usage": "Indicates the ability to compress an item (alt concept). Should toggle with fa-expand-arrows-alt" }, { - "Style": "fas", - "Name": "fa-copy", - "React_name": "CopyIcon", + "Name": "rh-ui-copy", + "React_name": "RhUiCopyIcon", "Type": "Action", - "Contextual_usage": "Indicates the availability of a copy to clipboard function", + "Contextual_usage": "Indicates the availability of a copy to clipboard function" }, { - "Style": "pficon", - "Name": "pficon-critical-risk", - "React_name": "CriticalRiskIcon", + "Name": "rh-ui-severity-critical-fill", + "React_name": "RhUiSeverityCriticalFillIcon", "Type": "Status", - "Contextual_usage": "Represents potential critical impact on a system or cluster. This is an old icon, going forward, use the pficon-severity-critical icon.", + "Contextual_usage": "Represents potential critical impact on a system or cluster. This is an old icon, going forward, use the pficon-severity-critical icon." }, { - "Style": "pficon", - "Name": "pficon-severity-critical", - "React_name": "SeverityCriticalIcon", + "Name": "rh-ui-severity-critical-fill", + "React_name": "RhUiSeverityCriticalFillIcon", "Type": "Status", "Contextual_usage": "Indicates the highest level of severity for an error or issue. This icon should be used instead of pficon-critical-risk for new implementations.", - color: 'var(--pf-t--global--icon--color--severity--critical--default)', + "color": "var(--pf-t--global--icon--color--severity--critical--default)" }, { - "Style": "pficon", - "Name": "pficon-severity-important", - "React_name": "SeverityImportantIcon", + "Name": "rh-ui-severity-important-fill", + "React_name": "RhUiSeverityImportantFillIcon", "Type": "Status", "Contextual_usage": "Indicates important severity for an error or issue.", - color: 'var(--pf-t--global--icon--color--severity--important--default)', + "color": "var(--pf-t--global--icon--color--severity--important--default)" }, { - "Style": "pficon", - "Name": "pficon-severity-moderate", - "React_name": "SeverityModerateIcon", + "Name": "rh-ui-severity-moderate-fill", + "React_name": "RhUiSeverityModerateFillIcon", "Type": "Status", "Contextual_usage": "Indicates moderate severity for an error or issue.", - color: 'var(--pf-t--global--icon--color--severity--moderate--default)', + "color": "var(--pf-t--global--icon--color--severity--moderate--default)" }, { - "Style": "pficon", - "Name": "pficon-severity-minor", - "React_name": "SeverityMinorIcon", + "Name": "rh-ui-severity-minor-fill", + "React_name": "RhUiSeverityMinorFillIcon", "Type": "Status", "Contextual_usage": "Indicates minor severity for an error or issue.", - color: 'var(--pf-t--global--icon--color--severity--minor--default)', + "color": "var(--pf-t--global--icon--color--severity--minor--default)" }, { - "Style": "pficon", - "Name": "pficon-severity-none", - "React_name": "SeverityNoneIcon", + "Name": "rh-ui-severity-none-fill", + "React_name": "RhUiSeverityNoneFillIcon", "Type": "Status", "Contextual_usage": "Indicates no severity for an error or issue.", - color: 'var(--pf-t--global--icon--color--severity--none--default)', + "color": "var(--pf-t--global--icon--color--severity--none--default)" }, { - "Style": "pficon", - "Name": "pficon-severity-undefined", - "React_name": "SeverityUndefinedIcon", + "Name": "rh-ui-severity-undefined-fill", + "React_name": "RhUiSeverityUndefinedFillIcon", "Type": "Status", "Contextual_usage": "Indicates undefined severity for an error or issue. Use if a severity level has not been determined yet, but is expected to change and be defined later.", - color: 'var(--pf-t--global--icon--color--severity--undefined--default)', + "color": "var(--pf-t--global--icon--color--severity--undefined--default)" }, { - "Style": "fas", - "Name": "fa-cube", - "React_name": "CubeIcon", + "Name": "rh-ui-container", + "React_name": "RhUiContainerIcon", "Type": "Object", - "Contextual_usage": "Represents a container", + "Contextual_usage": "Represents a container" }, { - "Style": "fas", - "Name": "fa-cubes", - "React_name": "CubesIcon", + "Name": "rh-ui-module", + "React_name": "RhUiModuleIcon", "Type": "Object", - "Contextual_usage": "Represents a Kubernetes pod(s)", + "Contextual_usage": "Represents a Kubernetes pod(s)" }, { - "Style": "fas", - "Name": "fa-database", - "React_name": "DatabaseIcon", + "Name": "rh-ui-storage", + "React_name": "RhUiStorageIcon", "Type": "Object", - "Contextual_usage": "Represents a database", + "Contextual_usage": "Represents a database" }, { - "Style": "fas", - "Name": "fa-desktop", - "React_name": "DesktopIcon", + "Name": "rh-ui-desktop", + "React_name": "RhUiDesktopIcon", "Type": "Object", - "Contextual_usage": "Represents a desktop, workstation or terminal", + "Contextual_usage": "Represents a desktop, workstation or terminal" }, { - "Style": "fas", - "Name": "fa-download", - "React_name": "DownloadIcon", + "Name": "rh-ui-download", + "React_name": "RhUiDownloadIcon", "Type": "Action", - "Contextual_usage": "Indicates a download function is available", + "Contextual_usage": "Indicates a download function is available" }, { - "Style": "fas", - "Name": "fa-ellipsis-v", - "React_name": "EllipsisVIcon", + "Name": "rh-ui-ellipsis-vertical", + "React_name": "RhUiEllipsisVerticalIcon", "Type": "Framework", - "Contextual_usage": "Indicates a contextual menu of actions or additional actions is available", + "Contextual_usage": "Indicates a contextual menu of actions or additional actions is available" }, { - "Style": "fas", - "Name": "fa-exclamation-circle", - "React_name": "ExclamationCircleIcon", + "Name": "rh-ui-error-fill", + "React_name": "RhUiErrorFillIcon", "Type": "Status", "Contextual_usage": "Represents alert status: danger, major error or critical error", - color: 'var(--pf-t--global--icon--color--status--danger--default)', + "color": "var(--pf-t--global--icon--color--status--danger--default)" }, { - "Style": "fas", - "Name": "fa-exclamation-triangle", - "React_name": "ExclamationTriangleIcon", + "Name": "rh-ui-warning-fill", + "React_name": "RhUiWarningFillIcon", "Type": "Status", "Contextual_usage": "Represents alert status: warning", - color: 'var(--pf-t--global--icon--color--status--warning--default)', + "color": "var(--pf-t--global--icon--color--status--warning--default)" }, { - "Style": "fas", - "Name": "fa-expand", - "React_name": "ExpandIcon", + "Name": "rh-ui-expand", + "React_name": "RhUiExpandIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to expand an item. Should toggle with fa-compress", + "Contextual_usage": "Indicates the ability to expand an item. Should toggle with fa-compress" }, { - "Style": "fas", - "Name": "fa-expand-arrows-alt", - "React_name": "ExpandArrowsAltIcon", + "Name": "rh-ui-expand-arrows", + "React_name": "RhUiExpandArrowsIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to expand an item (alt concept). Should toggle with fa-compress-arrows-alt", + "Contextual_usage": "Indicates the ability to expand an item (alt concept). Should toggle with fa-compress-arrows-alt" }, { - "Style": "fas", - "Name": "fa-external-link-alt", - "React_name": "ExternalLinkAltIcon", + "Name": "rh-ui-external-link", + "React_name": "RhUiExternalLinkIcon", "Type": "Action", - "Contextual_usage": "Indicates the link navigates to an external site", + "Contextual_usage": "Indicates the link navigates to an external site" }, { - "Style": "fas", - "Name": "fa-eye", - "React_name": "EyeIcon", + "Name": "rh-ui-view", + "React_name": "RhUiViewIcon", "Type": "Framework", - "Contextual_usage": "Indicates the content of a component is currently hidden but can be revealed", + "Contextual_usage": "Indicates the content of a component is currently hidden but can be revealed" }, { - "Style": "fas", - "Name": "fa-eye-slash", - "React_name": "EyeSlashIcon", + "Name": "rh-ui-view-off", + "React_name": "RhUiViewOffIcon", "Type": "Framework", - "Contextual_usage": "Indicates the content of a component is revealed but can be hidden", + "Contextual_usage": "Indicates the content of a component is revealed but can be hidden" }, { - "Style": "fas", - "Name": "fa-file", - "React_name": "FileIcon", + "Name": "rh-ui-document", + "React_name": "RhUiDocumentIcon", "Type": "Framework", - "Contextual_usage": "Represents a file type", + "Contextual_usage": "Represents a file type" }, { - "Style": "fas", - "Name": "fa-filter", - "React_name": "FilterIcon", + "Name": "rh-ui-filter", + "React_name": "RhUiFilterIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to filter search results or datasets", + "Contextual_usage": "Indicates the ability to filter search results or datasets" }, { - "Style": "fas", - "Name": "fa-flag", - "React_name": "FlagIcon", - "Type": ["Object", "Action"], + "Name": "rh-ui-flag", + "React_name": "RhUiFlagIcon", + "Type": [ + "Object", + "Action" + ], "Contextual_usage": "Represents a message.", - "Extra_context": "Also indicates the ability to access a messages.", + "Extra_context": "Also indicates the ability to access a messages." }, { - "Style": "fas", - "Name": "fa-folder", - "React_name": "FolderIcon", + "Name": "rh-ui-folder", + "React_name": "RhUiFolderIcon", "Type": "Framework", "Contextual_usage": "Represents a collapsed hierarchical group.", - "Extra_context": "Indicates the ability to expand the group.", + "Extra_context": "Indicates the ability to expand the group." }, { - "Style": "fas", - "Name": "fa-folder-open", - "React_name": "FolderOpenIcon", + "Name": "rh-ui-folder-open", + "React_name": "RhUiFolderOpenIcon", "Type": "Framework", "Contextual_usage": "Represents an expanded hierarchical group.", - "Extra_context": "Indicates the ability to collapse the group.", + "Extra_context": "Indicates the ability to collapse the group." }, { - "Style": "fas", - "Name": "fa-grip-horizontal", - "React_name": "GripHorizontalIcon", + "Name": "rh-ui-grip-horizontal", + "React_name": "RhUiGripHorizontalIcon", "Type": "Framework", - "Contextual_usage": "Indicates the ability to move a vertically-oriented component via drag and drop", + "Contextual_usage": "Indicates the ability to move a vertically-oriented component via drag and drop" }, { - "Style": "fas", - "Name": "fa-grip-vertical", - "React_name": "GripVerticalIcon", + "Name": "rh-ui-grip-vertical", + "React_name": "RhUiGripVerticalIcon", "Type": "Framework", - "Contextual_usage": "Indicates the ability to move a horizontally-oriented component via drag and drop", + "Contextual_usage": "Indicates the ability to move a horizontally-oriented component via drag and drop" }, { - "Style": "fas", - "Name": "fa-history", - "React_name": "HistoryIcon", + "Name": "rh-ui-history", + "React_name": "RhUiHistoryIcon", "Type": "Status", - "Contextual_usage": "Represents status: restarting", + "Contextual_usage": "Represents status: restarting" }, { - "Style": "fas", - "Name": "fa-undo", - "React_name": "UndoIcon", + "Name": "rh-ui-undo", + "React_name": "RhUiUndoIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to undo an a step in a historical log", + "Contextual_usage": "Indicates the ability to undo an a step in a historical log" }, { - "Style": "fas", - "Name": "fa-hdd", - "React_name": "OutlinedHddIcon", + "Name": "rh-ui-hard-drive", + "React_name": "RhUiHardDriveIcon", "Type": "Object", - "Contextual_usage": "Represents a single node or host", + "Contextual_usage": "Represents a single node or host" }, { - "Style": "fas", - "Name": "fa-home", - "React_name": "HomeIcon", + "Name": "rh-ui-home", + "React_name": "RhUiHomeIcon", "Type": "Framework", - "Contextual_usage": "Indicates a link to a default/home page", + "Contextual_usage": "Indicates a link to a default/home page" }, { - "Style": "fas", - "Name": "fa-info-circle", - "React_name": "InfoCircleIcon", + "Name": "rh-ui-information-fill", + "React_name": "RhUiInformationFillIcon", "Type": "Status", "Contextual_usage": "Represents alert status: information", - color: 'var(--pf-t--global--icon--color--status--info--default)', + "color": "var(--pf-t--global--icon--color--status--info--default)" }, { - "Style": "fas", - "Name": "fa-key", - "React_name": "KeyIcon", + "Name": "rh-ui-key", + "React_name": "RhUiKeyIcon", "Type": "Object", - "Contextual_usage": "Represents an SSH key or similar security concepts", + "Contextual_usage": "Represents an SSH key or similar security concepts" }, { - "Style": "fas", - "Name": "fa-list", - "React_name": "ListIcon", + "Name": "rh-ui-list", + "React_name": "RhUiListIcon", "Type": "View Type", - "Contextual_usage": "Represents data view content in a list format.", + "Contextual_usage": "Represents data view content in a list format." }, { - "Style": "fas", - "Name": "fa-lock", - "React_name": "LockIcon", + "Name": "rh-ui-lock", + "React_name": "RhUiLockIcon", "Type": "Status", - "Contextual_usage": "Represents status: locked", + "Contextual_usage": "Represents status: locked" }, { - "Style": "fas", - "Name": "fa-lock-open", - "React_name": "LockOpenIcon", + "Name": "rh-ui-unlock", + "React_name": "RhUiUnlockIcon", "Type": "Status", - "Contextual_usage": "Represents status: unlocked", + "Contextual_usage": "Represents status: unlocked" }, { - "Style": "fas", - "Name": "fa-long-arrow-alt-down", - "React_name": "LongArrowAltDownIcon", + "Name": "rh-ui-long-arrow-down", + "React_name": "RhUiLongArrowDownIcon", "Type": "Framework", - "Contextual_usage": "Represents the largest-to-smallest, highest-to-lowest or last-to-first (descending) sort order for any data type in a data table column. Clicking this will toggle the sort to ascending.", + "Contextual_usage": "Represents the largest-to-smallest, highest-to-lowest or last-to-first (descending) sort order for any data type in a data table column. Clicking this will toggle the sort to ascending." }, { - "Style": "fas", - "Name": "fa-long-arrow-alt-up", - "React_name": "LongArrowAltUpIcon", + "Name": "rh-ui-long-arrow-up", + "React_name": "RhUiLongArrowUpIcon", "Type": "Framework", - "Contextual_usage": "Represents the smallest-to-largest, lowest-to-highest or first-to-last (ascending) sort order for any data type in a data table column. Clicking this will toggle the sort to descending.", + "Contextual_usage": "Represents the smallest-to-largest, lowest-to-highest or first-to-last (ascending) sort order for any data type in a data table column. Clicking this will toggle the sort to descending." }, { - "Style": "fas", - "Name": "fa-map-marker", - "React_name": "MapMarkerIcon", - "Type": "Framework", - "Contextual_usage": "Represents a locale", - }, - { - "Style": "fas", - "Name": "fa-memory", - "React_name": "MemoryIcon", + "Name": "rh-ui-memory", + "React_name": "RhUiMemoryIcon", "Type": "Object", - "Contextual_usage": "Represents the memory on a device", + "Contextual_usage": "Represents the memory on a device" }, { - "Style": "fas", - "Name": "fa-microchip", - "React_name": "MicrochipIcon", + "Name": "rh-ui-circuit", + "React_name": "RhUiCircuitIcon", "Type": "Object", - "Contextual_usage": "Represents the CPU of a device", + "Contextual_usage": "Represents the CPU of a device" }, { - "Style": "fas", - "Name": "fa-minus", - "React_name": "MinusIcon", + "Name": "rh-ui-minus", + "React_name": "RhUiMinusIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to remove an item (such as a table row), decrease (in number input controls), or minimize", + "Contextual_usage": "Indicates the ability to remove an item (such as a table row), decrease (in number input controls), or minimize" }, { - "Style": "fas", - "Name": "fa-minus-circle", - "React_name": "MinusCircleIcon", + "Name": "rh-ui-minus-circle", + "React_name": "RhUiMinusCircleIcon", "Type": "Action", - "Contextual_usage": "Alternative option that indicates the ability to remove an item (such as a table row), decrease (in number input controls), or minimize", + "Contextual_usage": "Alternative option that indicates the ability to remove an item (such as a table row), decrease (in number input controls), or minimize" }, { - "Style": "fas", - "Name": "fa-pause", - "React_name": "PauseIcon", + "Name": "rh-ui-pause", + "React_name": "RhUiPauseIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to pause. Should toggle with fa-play", + "Contextual_usage": "Indicates the ability to pause. Should toggle with fa-play" }, { - "Style": "fas", - "Name": "fa-pause-circle", - "React_name": "PauseCircleIcon", + "Name": "rh-ui-pause-circle", + "React_name": "RhUiPauseCircleIcon", "Type": "Status", - "Contextual_usage": "Represents status: an interruption and/or stoppage of a process", - }, - { - "Style": "fas", - "Name": "fa-pencil-alt", - "React_name": "PencilAltIcon", - "Type": "Action", - "Contextual_usage": "Indicates the ability to edit an item", + "Contextual_usage": "Represents status: an interruption and/or stoppage of a process" }, { - "Style": "fas", - "Name": "fa-plus", - "React_name": "PlusIcon", + "Name": "rh-ui-edit", + "React_name": "RhUiEditIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to add an item; not for creating completely new objects (see pficon-circle-add)", + "Contextual_usage": "Indicates the ability to edit an item" }, { - "Style": "fas", - "Name": "fa-plus-circle", - "React_name": "PlusCircleIcon", + "Name": "rh-ui-add", + "React_name": "RhUiAddIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to create an item", + "Contextual_usage": "Indicates the ability to add an item; not for creating completely new objects (see pficon-circle-add)" }, { - "Style": "pficon", - "Name": "pficon-add-circle-o", - "React_name": "AddCircleOIcon", + "Name": "rh-ui-add-circle", + "React_name": "RhUiAddCircleIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to create an item. Use this if there are many instances of this icon in a UI (data list, table, etc) to reduce visual noise.", + "Contextual_usage": "Indicates the ability to create an item. Use this if there are many instances of this icon in a UI (data list, table, etc) to reduce visual noise." }, { - "Style": "fas", - "Name": "fa-power-off", - "React_name": "PowerOffIcon", + "Name": "rh-ui-power", + "React_name": "RhUiPowerIcon", "Type": "Status", - "Contextual_usage": "Represents status: powered on", + "Contextual_usage": "Represents status: powered on" }, { - "Style": "pficon", - "Name": "pficon-off", - "React_name": "OffIcon", + "Name": "rh-ui-off", + "React_name": "RhUiOffIcon", "Type": "Status", - "Contextual_usage": "Represents status: powered off", - }, - { - "Style": "pficon", - "Name": "pficon-openshift", - "React_name": "OpenshiftIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: OpenShift", - }, - { - "Style": "pficon", - "Name": "pficon-openstack", - "React_name": "OpenstackIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: OpenStack", + "Contextual_usage": "Represents status: powered off" }, { - "Style": "fas", - "Name": "fa-play", - "React_name": "PlayIcon", + "Name": "rh-ui-play", + "React_name": "RhUiPlayIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to start or resume. Should toggle with fa-pause", + "Contextual_usage": "Indicates the ability to start or resume. Should toggle with fa-pause" }, { - "Style": "fas", - "Name": "fa-print", - "React_name": "PrintIcon", + "Name": "rh-ui-print", + "React_name": "RhUiPrintIcon", "Type": "Action", - "Contextual_usage": "Indicates the availability of a print function", + "Contextual_usage": "Indicates the availability of a print function" }, { - "Style": "far", - "Name": "fa-question-circle (outlined)", - "React_name": "OutlinedQuestionCircleIcon", + "Name": "rh-ui-question-mark-circle (outlined)", + "React_name": "RhUiQuestionMarkCircleIcon", "Type": "Framework", - "Contextual_usage": "Indicates the availability of contextual help", + "Contextual_usage": "Indicates the availability of contextual help" }, { - "Style": "fas", - "Name": "fa-question-circle", - "React_name": "QuestionCircleIcon", + "Name": "rh-ui-question-mark-circle", + "React_name": "RhUiQuestionMarkCircleIcon", "Type": "Framework", - "Contextual_usage": "Indicates the availability of a help system in the masthead", + "Contextual_usage": "Indicates the availability of a help system in the masthead" }, { - "Style": "fas", - "Name": "fa-redo", - "React_name": "RedoIcon", + "Name": "rh-ui-redo", + "React_name": "RhUiRedoIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to refresh. Please use the animated spinner to indicate that something is “loading” or in the middle of processing", + "Contextual_usage": "Indicates the ability to refresh. Please use the animated spinner to indicate that something is “loading” or in the middle of processing" }, { - "Style": "fas", - "Name": "fa-search", - "React_name": "SearchIcon", + "Name": "rh-ui-search", + "React_name": "RhUiSearchIcon", "Type": "Action", - "Contextual_usage": "Indicates that that user may perform a search", + "Contextual_usage": "Indicates that that user may perform a search" }, { - "Style": "fas", - "Name": "fa-search-minus", - "React_name": "SearchMinusIcon", + "Name": "rh-ui-zoom-out", + "React_name": "RhUiZoomOutIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to zoom out", + "Contextual_usage": "Indicates the ability to zoom out" }, { - "Style": "fas", - "Name": "fa-search-plus", - "React_name": "SearchPlusIcon", + "Name": "rh-ui-zoom-in", + "React_name": "RhUiZoomInIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to zoom in", + "Contextual_usage": "Indicates the ability to zoom in" }, { - "Style": "fas", - "Name": "fa-share-square", - "React_name": "ShareSquareIcon", + "Name": "rh-ui-share-alt", + "React_name": "RhUiShareAltIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to share via various methods with others", + "Contextual_usage": "Indicates the ability to share via various methods with others" }, { - "Style": "fas", - "Name": "fa-sort-amount-down", - "React_name": "SortAmountDownIcon", + "Name": "rh-ui-sort-down-large-to-small", + "React_name": "RhUiSortDownLargeToSmallIcon", "Type": "Action", - "Contextual_usage": "Represents the largest-to-smallest, highest-to-lowest or last-to-first (descending) sort order for any data type.", + "Contextual_usage": "Represents the largest-to-smallest, highest-to-lowest or last-to-first (descending) sort order for any data type." }, { - "Style": "fas", - "Name": "fa-sort-amount-down-alt", - "React_name": "SortAmountDownAltIcon", + "Name": "rh-ui-sort-down-small-to-large", + "React_name": "RhUiSortDownSmallToLargeIcon", "Type": "Action", - "Contextual_usage": "Represents the smallest-to-largest, lowest-to-highest or first-to-last (ascending) sort order for any data type.", - "Unicode": "f884" + "Contextual_usage": "Represents the smallest-to-largest, lowest-to-highest or first-to-last (ascending) sort order for any data type." }, { - "Style": "fas", - "Name": "fa-sync-alt", - "React_name": "SyncAltIcon", + "Name": "rh-ui-sync", + "React_name": "RhUiSyncIcon", "Type": "Action", - "Contextual_usage": "Indicates the availability of a sync action", + "Contextual_usage": "Indicates the availability of a sync action" }, { - "Style": "fas", - "Name": "fa-star-icon", - "React_name": "StarIcon", + "Name": "rh-ui-star", + "React_name": "RhUiStarIcon", "Type": "Action", - "Contextual_usage": "Indicates that an item is marked as a favorite", + "Contextual_usage": "Indicates that an item is marked as a favorite" }, { - "Style": "fas", - "Name": "fa-tag", - "React_name": "TagIcon", + "Name": "rh-ui-tag", + "React_name": "RhUiTagIcon", "Type": "Object", - "Contextual_usage": "Indicates the abiltiy to access or create a set of tags", + "Contextual_usage": "Indicates the abiltiy to access or create a set of tags" }, { - "Style": "fas", - "Name": "fa-table", - "React_name": "TableIcon", + "Name": "rh-ui-table", + "React_name": "RhUiTableIcon", "Type": "View Type", - "Contextual_usage": "Represents data view content in a table format", + "Contextual_usage": "Represents data view content in a table format" }, { - "Style": "fas", - "Name": "fa-tachometer-alt", - "React_name": "TachometerAltIcon", + "Name": "rh-ui-speedometer", + "React_name": "RhUiSpeedometerIcon", "Type": "View Type", - "Contextual_usage": "Represents data view content in a dashboard", + "Contextual_usage": "Represents data view content in a dashboard" }, { - "Style": "pficon", - "Name": "pficon-task", - "React_name": "TaskIcon", + "Name": "rh-ui-task", + "React_name": "RhUiTaskIcon", "Type": "Framework, Object", - "Contextual_usage": "Indicates the ability to open a task drawer. Also can represent tasks or activity.", + "Contextual_usage": "Indicates the ability to open a task drawer. Also can represent tasks or activity." }, { - "Style": "fas", - "Name": "fa-th", - "React_name": "ThIcon", + "Name": "rh-ui-thumbnail-view-small", + "React_name": "RhUiThumbnailViewSmallIcon", "Type": "View Type", - "Contextual_usage": "Represents data view content in a small card format", + "Contextual_usage": "Represents data view content in a small card format" }, { - "Style": "fas", - "Name": "fa-th-large", - "React_name": "ThLargeIcon", + "Name": "rh-ui-thumbnail-view-large", + "React_name": "RhUiThumbnailViewLargeIcon", "Type": "View Type", - "Contextual_usage": "Represents data view content in a large card format", + "Contextual_usage": "Represents data view content in a large card format" }, { - "Style": "fas", - "Name": "fa-thumbtack", - "React_name": "ThumbtackIcon", + "Name": "rh-ui-thumbtack", + "React_name": "RhUiThumbtackIcon", "Type": "Framework", - "Contextual_usage": "Indicates the ability to pin an item", + "Contextual_usage": "Indicates the ability to pin an item" }, { - "Style": "fas", - "Name": "fa-times", - "React_name": "TimesIcon", + "Name": "rh-ui-close", + "React_name": "RhUiCloseIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to close a modal or other panel. Also indicates the ability to clear existing data, such as filter criteria or labels", + "Contextual_usage": "Indicates the ability to close a modal or other panel. Also indicates the ability to clear existing data, such as filter criteria or labels" }, { - "Style": "fas", - "Name": "fa-times-circle", - "React_name": "TimesCircleIcon", + "Name": "rh-ui-close-circle", + "React_name": "RhUiCloseCircleIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to close the about modal", + "Contextual_usage": "Indicates the ability to close the about modal" }, { - "Style": "fas", - "Name": "fa-trash", - "React_name": "TrashIcon", + "Name": "rh-ui-trash", + "React_name": "RhUiTrashIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to delete an item/element or remove an uploaded file", + "Contextual_usage": "Indicates the ability to delete an item/element or remove an uploaded file" }, { - "Style": "fas", - "Name": "fa-upload", - "React_name": "UploadIcon", + "Name": "rh-ui-upload", + "React_name": "RhUiUploadIcon", "Type": "Action", - "Contextual_usage": "Indicates an upload function is available", + "Contextual_usage": "Indicates an upload function is available" }, { - "Style": "fas", - "Name": "fa-user", - "React_name": "UserIcon", - "Type": ["Framework","Object"], + "Name": "rh-ui-profile", + "React_name": "RhUiProfileIcon", + "Type": [ + "Framework", + "Object" + ], "Contextual_usage": "Represents a user (in a dataset, paired with a username).", - "Extra_context": "Indicates the availability of a user profile (in the masthead, paired with a username).", - }, + "Extra_context": "Indicates the availability of a user profile (in the masthead, paired with a username)." + }, { - "Style": "fas", - "Name": "fa-users", - "React_name": "UsersIcon", + "Name": "rh-ui-users", + "React_name": "RhUiUsersIcon", "Type": "Object", - "Contextual_usage": "Represents multiple users, a user grouping or project", + "Contextual_usage": "Represents multiple users, a user grouping or project" }, { - "Style": "far", - "Name": "fa-window-restore", - "React_name": "OutlinedWindowRestoreIcon", + "Name": "rh-ui-restore-window", + "React_name": "RhUiRestoreWindowIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to open link in a new window", + "Contextual_usage": "Indicates the ability to open link in a new window" }, { - "Style": "fas", - "Name": "fa-wrench", - "React_name": "WrenchIcon", + "Name": "rh-ui-build", + "React_name": "RhUiBuildIcon", "Type": "Status", - "Contextual_usage": "Represents status: in preparation for maintenance", - }, - { - "Style": "fab", - "Name": "fa-github", - "React_name": "GithubIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: GitHub", - }, - { - "Style": "fab", - "Name": "fa-gitlab", - "React_name": "GitlabIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: GitLab", - }, - { - "Style": "fab", - "Name": "fa-google", - "React_name": "GoogleIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: Google", - }, - { - "Style": "fab", - "Name": "fa-stack-overflow", - "React_name": "StackOverflowIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: Stack Overflow", - }, - { - "Style": "fab", - "Name": "fa-facebook-square", - "React_name": "FacebookSquareIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: Facebook", - }, - { - "Style": "fab", - "Name": "fa-twitter", - "React_name": "TwitterIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: Twitter", - }, - { - "Style": "fab", - "Name": "fa-windows", - "React_name": "WindowsIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: Windows", - }, - { - "Style": "fab", - "Name": "fa-linkedin", - "React_name": "LinkedinIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: LinkedIn", - }, - { - "Style": "fab", - "Name": "fa-linux", - "React_name": "LinuxIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: Linux", + "Contextual_usage": "Represents status: in preparation for maintenance" }, { - "Style": "fab", - "Name": "fa-dropbox", - "React_name": "DropboxIcon", + "Name": "rh-ui-windows", + "React_name": "RhUiWindowsIcon", "Type": "Brands", - "Contextual_usage": "Represents brand: Dropbox", + "Contextual_usage": "Represents brand: Windows" }, { - "Style": "fab", - "Name": "fa-drupal", - "React_name": "DrupalIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: Drupal", - }, - { - "Style": "fab", - "Name": "fa-js", - "React_name": "JsIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: js", - }, - { - "Style": "pficon", - "Name": "pficon-asleep", - "React_name": "AsleepIcon", + "Name": "rh-ui-asleep", + "React_name": "RhUiAsleepIcon", "Type": "Status", - "Contextual_usage": "Represents an item is asleep or in power suspended mode", - }, - { - "Style": "pficon", - "Name": "pficon-automation", - "React_name": "AutomationIcon", - "Type": "Object", - "Contextual_usage": "Represents a process-automation object", + "Contextual_usage": "Represents an item is asleep or in power suspended mode" }, { - "Style": "pficon", - "Name": "pficon-blueprint", - "React_name": "BlueprintIcon", + "Name": "rh-ui-automation", + "React_name": "RhUiAutomationIcon", "Type": "Object", - "Contextual_usage": "Represents a blueprint", + "Contextual_usage": "Represents a process-automation object" }, { - "Style": "pficon", - "Name": "pficon-build", - "React_name": "BuildIcon", + "Name": "rh-ui-blueprint", + "React_name": "RhUiBlueprintIcon", "Type": "Object", - "Contextual_usage": "Represents a build", + "Contextual_usage": "Represents a blueprint" }, { - "Style": "pficon", - "Name": "pficon-builder-image", - "React_name": "BuilderImageIcon", + "Name": "rh-ui-cubes", + "React_name": "RhUiCubesIcon", "Type": "Object", - "Contextual_usage": "Represents a builder image", + "Contextual_usage": "Represents a package; used in Satellite, Cockpit, and Composer to indicate a generic package or rpm" }, { - "Style": "pficon", - "Name": "pficon-bundle", - "React_name": "BundleIcon", + "Name": "rh-ui-catalog-alt", + "React_name": "RhUiCatalogAltIcon", "Type": "Object", - "Contextual_usage": "Represents a package; used in Satellite, Cockpit, and Composer to indicate a generic package or rpm", + "Contextual_usage": "Indicates the availability of a catalog or library" }, { - "Style": "pficon", - "Name": "pficon-catalog", - "React_name": "CatalogIcon", + "Name": "rh-ui-cloud-security", + "React_name": "RhUiCloudSecurityIcon", "Type": "Object", - "Contextual_usage": "Indicates the availability of a catalog or library", + "Contextual_usage": "Represents cloud security" }, { - "Style": "pficon", - "Name": "pficon-cloud-security", - "React_name": "CloudSecurityIcon", + "Name": "rh-ui-cloud-tenant", + "React_name": "RhUiCloudTenantIcon", "Type": "Object", - "Contextual_usage": "Represents cloud security", + "Contextual_usage": "Represents a cloud tenant" }, { - "Style": "pficon", - "Name": "pficon-cloud-tenant", - "React_name": "CloudTenantIcon", + "Name": "rh-ui-server-stack", + "React_name": "RhUiServerStackIcon", "Type": "Object", - "Contextual_usage": "Represents a cloud tenant", + "Contextual_usage": "Represents a cluster or server" }, { - "Style": "pficon", - "Name": "pficon-cluster", - "React_name": "ClusterIcon", - "Type": "Object", - "Contextual_usage": "Represents a cluster or server", - }, - { - "Style": "pficon", - "Name": "pficon-connected", - "React_name": "ConnectedIcon", + "Name": "rh-ui-connected", + "React_name": "RhUiConnectedIcon", "Type": "Status", - "Contextual_usage": "Represents an item's power is on and is “up”; this is a more active alternative to “pficon-on”", + "Contextual_usage": "Represents an item's power is on and is “up”; this is a more active alternative to “pficon-on”" }, { - "Style": "pficon", - "Name": "pficon-data-processor", - "React_name": "DataProcessorIcon", + "Name": "rh-ui-data-processor", + "React_name": "RhUiDataProcessorIcon", "Type": "Status", - "Contextual_usage": "Represents a data processor", + "Contextual_usage": "Represents a data processor" }, { - "Style": "pficon", - "Name": "pficon-data-sink", - "React_name": "DataSinkIcon", + "Name": "rh-ui-data-sink", + "React_name": "RhUiDataSinkIcon", "Type": "Status", - "Contextual_usage": "Represents a data sink", + "Contextual_usage": "Represents a data sink" }, { - "Style": "pficon", - "Name": "pficon-data-source", - "React_name": "DataSourceIcon", + "Name": "rh-ui-data-source", + "React_name": "RhUiDataSourceIcon", "Type": "Status", - "Contextual_usage": "Represents a data source", + "Contextual_usage": "Represents a data source" }, { - "Style": "pficon", - "Name": "pficon-degraded", - "React_name": "DegradedIcon", + "Name": "rh-ui-degraded", + "React_name": "RhUiDegradedIcon", "Type": "Status", - "Contextual_usage": "Volume replication is degraded", + "Contextual_usage": "Volume replication is degraded" }, { - "Style": "pficon", - "Name": "pficon-disconnected", - "React_name": "DisconnectedIcon", + "Name": "rh-ui-disconnected", + "React_name": "RhUiDisconnectedIcon", "Type": "Status", - "Contextual_usage": "Represents an item's power is off and is “down”; this is a more active alternative to “pficon-off”", - }, - { - "Style": "pficon", - "Name": "pficon-domain", - "React_name": "DomainIcon", - "Type": "Object", - "Contextual_usage": "Represents a domain", + "Contextual_usage": "Represents an item's power is off and is “down”; this is a more active alternative to “pficon-off”" }, { - "Style": "pficon", - "Name": "pficon-enhancement", - "React_name": "EnhancementIcon", + "Name": "rh-ui-enhancement", + "React_name": "RhUiEnhancementIcon", "Type": "Status", - "Contextual_usage": "Represents status: enhancement advisory is present", + "Contextual_usage": "Represents status: enhancement advisory is present" }, { - "Style": "pficon", - "Name": "pficon-enterprise", - "React_name": "EnterpriseIcon", + "Name": "rh-ui-enterprise", + "React_name": "RhUiEnterpriseIcon", "Type": "Object", - "Contextual_usage": "Represents an enterprise", + "Contextual_usage": "Represents an enterprise" }, { - "Style": "pficon", - "Name": "pficon-export", - "React_name": "ExportIcon", + "Name": "rh-ui-export", + "React_name": "RhUiExportIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to export a file or other data", - }, - { - "Style": "pficon", - "Name": "pficon-flavor", - "React_name": "FlavorIcon", - "Type": "Object", - "Contextual_usage": "Represents a flavor", + "Contextual_usage": "Indicates the ability to export a file or other data" }, { - "Style": "fas", - "Name": "fa-image", - "React_name": "ImageIcon", + "Name": "rh-ui-image", + "React_name": "RhUiImageIcon", "Type": "Object", - "Contextual_usage": "Represents an image", + "Contextual_usage": "Represents an image" }, { - "Style": "pficon", - "Name": "pficon-import", - "React_name": "ImportIcon", + "Name": "rh-ui-import", + "React_name": "RhUiImportIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to import a file or other data", + "Contextual_usage": "Indicates the ability to import a file or other data" }, { - "Style": "pficon", - "Name": "pficon-in-progress", - "React_name": "InProgressIcon", + "Name": "rh-ui-in-progress", + "React_name": "RhUiInProgressIcon", "Type": "Status", - "Contextual_usage": "Represents running a determinite action", + "Contextual_usage": "Represents running a determinite action" }, { - "Style": "pficon", - "Name": "pficon-infrastructure", - "React_name": "InfrastructureIcon", + "Name": "rh-ui-infrastructure", + "React_name": "RhUiInfrastructureIcon", "Type": "Object", - "Contextual_usage": "Represents an infrastructure", + "Contextual_usage": "Represents an infrastructure" }, { - "Style": "pficon", - "Name": "pficon-integration", - "React_name": "IntegrationIcon", + "Name": "rh-ui-puzzle-piece", + "React_name": "RhUiPuzzlePieceIcon", "Type": "Object", - "Contextual_usage": "Represents an integration of two or more objects", + "Contextual_usage": "Represents an integration of two or more objects" }, { - "Style": "pficon", - "Name": "pficon-migration", - "React_name": "MigrationIcon", + "Name": "rh-ui-migrate", + "React_name": "RhUiMigrateIcon", "Type": "Status", - "Contextual_usage": "Represents an item such as a VM is currently migrating", + "Contextual_usage": "Represents an item such as a VM is currently migrating" }, { - "Style": "pficon", - "Name": "pficon-middleware", - "React_name": "MiddlewareIcon", + "Name": "rh-ui-path", + "React_name": "RhUiPathIcon", "Type": "Object", - "Contextual_usage": "Represents middleware", + "Contextual_usage": "Represents middleware" }, { - "Style": "pficon", - "Name": "pficon-module", - "React_name": "ModuleIcon", + "Name": "rh-ui-module", + "React_name": "RhUiModuleIcon", "Type": "Object", - "Contextual_usage": "Represents a module", + "Contextual_usage": "Represents a module" }, { - "Style": "pficon", - "Name": "pficon-monitoring", - "React_name": "MonitoringIcon", + "Name": "rh-ui-monitoring", + "React_name": "RhUiMonitoringIcon", "Type": "Object", - "Contextual_usage": "Represents monitoring", + "Contextual_usage": "Represents monitoring" }, { - "Style": "pficon", - "Name": "pficon-multicluster", - "React_name": "MulticlusterIcon", + "Name": "rh-ui-cluster", + "React_name": "RhUiClusterIcon", "Type": "Object", - "Contextual_usage": "Indicates a multicluster object", + "Contextual_usage": "Indicates a multicluster object" }, { - "Style": "pficon", - "Name": "pficon-network", - "React_name": "NetworkIcon", + "Name": "rh-ui-network", + "React_name": "RhUiNetworkIcon", "Type": "Object", - "Contextual_usage": "Represents network", + "Contextual_usage": "Represents network" }, { - "Style": "pficon", - "Name": "pficon-pficon-network-range", - "React_name": "PficonNetworkRangeIcon", + "Name": "rh-ui-connected", + "React_name": "RhUiConnectedIcon", "Type": "Object", - "Contextual_usage": "Represents network range", + "Contextual_usage": "Represents network range" }, { - "Style": "pficon", - "Name": "pficon-running", - "React_name": "RunningIcon", + "Name": "rh-ui-running", + "React_name": "RhUiRunningIcon", "Type": "Status", - "Contextual_usage": "Represents status: running", + "Contextual_usage": "Represents status: running" }, { - "Style": "pficon", - "Name": "pficon-open-drawer-right", - "React_name": "OpenDrawerRightIcon", + "Name": "rh-ui-open-drawer-right", + "React_name": "RhUiOpenDrawerRightIcon", "Type": "Action", - "Contextual_usage": "Open or close a drawer", + "Contextual_usage": "Open or close a drawer" }, { - "Style": "pficon", - "Name": "pficon-optimize", - "React_name": "OptimizeIcon", + "Name": "rh-ui-optimize", + "React_name": "RhUiOptimizeIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to optimize an item or a process", + "Contextual_usage": "Indicates the ability to optimize an item or a process" }, { - "Style": "pficon", - "Name": "pficon-package", - "React_name": "PackageIcon", + "Name": "rh-ui-package", + "React_name": "RhUiPackageIcon", "Type": "Object", - "Contextual_usage": "Represents a package", + "Contextual_usage": "Represents a package" }, { - "Style": "pficon", - "Name": "pficon-pending", - "React_name": "PendingIcon", + "Name": "rh-ui-pending", + "React_name": "RhUiPendingIcon", "Type": "Status", - "Contextual_usage": "Represents status: pending; currently waiting on contingencies", + "Contextual_usage": "Represents status: pending; currently waiting on contingencies" }, { - "Style": "pficon", - "Name": "pficon-private", - "React_name": "PrivateIcon", + "Name": "rh-ui-lock", + "React_name": "RhUiLockIcon", "Type": "Status", - "Contextual_usage": "Represents status: private; cannot access with current credentials", - }, - { - "Style": "pficon", - "Name": "pficon-port", - "React_name": "PortIcon", - "Type": "Object", - "Contextual_usage": "Represents a port or route", + "Contextual_usage": "Represents status: private; cannot access with current credentials" }, { - "Style": "pficon", - "Name": "pficon-process-automation", - "React_name": "ProcessAutomationIcon", + "Name": "rh-ui-port", + "React_name": "RhUiPortIcon", "Type": "Object", - "Contextual_usage": "Represents process automation", + "Contextual_usage": "Represents a port or route" }, { - "Style": "pficon", - "Name": "pficon-regions", - "React_name": "RegionsIcon", + "Name": "rh-ui-process-automation", + "React_name": "RhUiProcessAutomationIcon", "Type": "Object", - "Contextual_usage": "Represents a region", + "Contextual_usage": "Represents process automation" }, { - "Style": "pficon", - "Name": "pficon-registry", - "React_name": "RegistryIcon", + "Name": "rh-ui-regions", + "React_name": "RhUiRegionsIcon", "Type": "Object", - "Contextual_usage": "Represents a registry", + "Contextual_usage": "Represents a region" }, { - "Style": "pficon", - "Name": "pficon-replicator", - "React_name": "ReplicatorIcon", + "Name": "rh-ui-registry", + "React_name": "RhUiRegistryIcon", "Type": "Object", - "Contextual_usage": "Represents a replicator", + "Contextual_usage": "Represents a registry" }, { - "Style": "pficon", - "Name": "pficon-repository", - "React_name": "RepositoryIcon", + "Name": "rh-ui-replicator", + "React_name": "RhUiReplicatorIcon", "Type": "Object", - "Contextual_usage": "Represents a repository", + "Contextual_usage": "Represents a replicator" }, { - "Style": "pficon", - "Name": "pficon-resource-pool", - "React_name": "ResourcePoolIcon", + "Name": "rh-ui-folders", + "React_name": "RhUiFoldersIcon", "Type": "Object", - "Contextual_usage": "Represents a resource pool", + "Contextual_usage": "Represents a repository" }, { - "Style": "pficon", - "Name": "pficon-resources-empty", - "React_name": "ResourcesEmptyIcon", + "Name": "rh-ui-resources-empty", + "React_name": "RhUiResourcesEmptyIcon", "Type": "Status", - "Contextual_usage": "Represents status: is empty", + "Contextual_usage": "Represents status: is empty" }, { - "Style": "pficon", - "Name": "pficon-resources-almost-empty", - "React_name": "ResourcesAlmostEmptyIcon", + "Name": "rh-ui-resources-almost-empty", + "React_name": "RhUiResourcesAlmostEmptyIcon", "Type": "Status", - "Contextual_usage": "Represents status: is almost empty", + "Contextual_usage": "Represents status: is almost empty" }, { - "Style": "pficon", - "Name": "pficon-resources-almost-full", - "React_name": "ResourcesAlmostFullIcon", + "Name": "rh-ui-resources-almost-full", + "React_name": "RhUiResourcesAlmostFullIcon", "Type": "Status", - "Contextual_usage": "Represents status: is almost full", + "Contextual_usage": "Represents status: is almost full" }, { - "Style": "pficon", - "Name": "pficon-resources-full", - "React_name": "ResourcesFullIcon", + "Name": "rh-ui-resources-full", + "React_name": "RhUiResourcesFullIcon", "Type": "Status", - "Contextual_usage": "Represents status: is full", + "Contextual_usage": "Represents status: is full" }, { - "Style": "fas", - "Name": "fa-route", - "React_name": "RouteIcon", + "Name": "rh-ui-route", + "React_name": "RhUiRouteIcon", "Type": "Object", - "Contextual_usage": "Represents a route", - "Unicode": "f4d7" + "Contextual_usage": "Represents a route" }, { - "Style": "pficon", - "Name": "pficon-pficon-satellite", - "React_name": "PficonSatelliteIcon", - "Type": "Brands", - "Contextual_usage": "Represents brand: Satellite", - }, - { - "Style": "pficon", - "Name": "pficon-save", - "React_name": "SaveIcon", + "Name": "rh-ui-save", + "React_name": "RhUiSaveIcon", "Type": "Action", - "Contextual_usage": "Indicates the ability to save a file or other object", + "Contextual_usage": "Indicates the ability to save a file or other object" }, { - "Style": "pficon", - "Name": "pficon-security", - "React_name": "SecurityIcon", + "Name": "rh-ui-security", + "React_name": "RhUiSecurityIcon", "Type": "Status", - "Contextual_usage": "Represents status: security advisory is present", - }, - { - "Style": "pficon", - "Name": "pficon-server-group", - "React_name": "ServerGroupIcon", - "Type": "Object", - "Contextual_usage": "Represents a server group", + "Contextual_usage": "Represents status: security advisory is present" }, { - "Style": "pficon", - "Name": "pficon-service", - "React_name": "ServiceIcon", + "Name": "rh-ui-server-stack", + "React_name": "RhUiServerStackIcon", "Type": "Object", - "Contextual_usage": "Represents a Kubernetes service", + "Contextual_usage": "Represents a server group" }, { - "Style": "pficon", - "Name": "pficon-services", - "React_name": "ServicesIcon", + "Name": "rh-ui-kubernetes-service", + "React_name": "RhUiKubernetesServiceIcon", "Type": "Object", - "Contextual_usage": "Represents services", + "Contextual_usage": "Represents a Kubernetes service" }, { - "Style": "pficon", - "Name": "pficon-service-catalog", - "React_name": "ServiceCatalogIcon", + "Name": "rh-ui-catalog-alt", + "React_name": "RhUiCatalogAltIcon", "Type": "Object", - "Contextual_usage": "Indicates availability of a catalog/library to browse", + "Contextual_usage": "Indicates availability of a catalog/library to browse" }, { - "Style": "pficon", - "Name": "pficon-storage-domain", - "React_name": "StorageDomainIcon", + "Name": "rh-ui-storage-domain", + "React_name": "RhUiStorageDomainIcon", "Type": "Object", - "Contextual_usage": "Indicates a storage domain", + "Contextual_usage": "Indicates a storage domain" }, { - "Style": "pficon", - "Name": "pficon-pficon-template", - "React_name": "PficonTemplateIcon", + "Name": "rh-ui-template", + "React_name": "RhUiTemplateIcon", "Type": "Object", - "Contextual_usage": "Represents a template; includes contents or instructions used to generate one or more instances of a final output", + "Contextual_usage": "Represents a template; includes contents or instructions used to generate one or more instances of a final output" }, { - "Style": "pficon", - "Name": "pficon-tenant", - "React_name": "TenantIcon", + "Name": "rh-ui-tenant", + "React_name": "RhUiTenantIcon", "Type": "Object", - "Contextual_usage": "Represents a tenant", + "Contextual_usage": "Represents a tenant" }, { - "Style": "pficon", - "Name": "pficon-topology", - "React_name": "TopologyIcon", + "Name": "rh-ui-topology", + "React_name": "RhUiTopologyIcon", "Type": "View type", - "Contextual_usage": "Represents data view content in a topology format", + "Contextual_usage": "Represents data view content in a topology format" }, { - "Style": "pficon", - "Name": "pficon-trend-down", - "React_name": "TrendDownIcon", + "Name": "rh-ui-trend-down", + "React_name": "RhUiTrendDownIcon", "Type": "Status", - "Contextual_usage": "Represents status: downward trend", + "Contextual_usage": "Represents status: downward trend" }, { - "Style": "pficon", - "Name": "pficon-trend-up", - "React_name": "TrendUpIcon", + "Name": "rh-ui-trend-up", + "React_name": "RhUiTrendUpIcon", "Type": "Status", - "Contextual_usage": "Represents status: upward trend", + "Contextual_usage": "Represents status: upward trend" }, { - "Style": "pficon", - "Name": "pficon-unknown", - "React_name": "UnknownIcon", + "Name": "rh-ui-unknown", + "React_name": "RhUiUnknownIcon", "Type": "Status", - "Contextual_usage": "Represents status: unknown", + "Contextual_usage": "Represents status: unknown" }, { - "Style": "pficon", - "Name": "pficon-pficon-vcenter", - "React_name": "PficonVcenterIcon", + "Name": "rh-ui-virtual-machine-center", + "React_name": "RhUiVirtualMachineCenterIcon", "Type": "Object", - "Contextual_usage": "Represents a vcenter", + "Contextual_usage": "Represents a vcenter" }, { - "Style": "pficon", - "Name": "pficon-virtual-machine", - "React_name": "VirtualMachineIcon", + "Name": "rh-ui-virtual-server", + "React_name": "RhUiVirtualServerIcon", "Type": "Object", - "Contextual_usage": "Represents a virtual machine", + "Contextual_usage": "Represents a virtual machine" }, { - "Style": "pficon", - "Name": "pficon-volume", - "React_name": "VolumeIcon", + "Name": "rh-ui-storage", + "React_name": "RhUiStorageIcon", "Type": "Object", - "Contextual_usage": "Represents a volume", + "Contextual_usage": "Represents a volume" }, { - "Style": "pficon", - "Name": "pficon-zone", - "React_name": "ZoneIcon", + "Name": "rh-ui-zone", + "React_name": "RhUiZoneIcon", "Type": "Object", - "Contextual_usage": "Represents a zone; a grouping of servers based on geographic location, network location, or function", + "Contextual_usage": "Represents a zone; a grouping of servers based on geographic location, network location, or function" + }, + { + "Name": "rh-ui-ai-experience-icon", + "React_name": "RhUiAiExperienceIcon", + "Type": "AI", + "Contextual_usage": "Use for general AI identification or when no other AI icon is appropriate.", + "Extra_context": "Must be paired with a button label or tooltip that includes “with AI” or “by AI.” See the AI design language guide." + }, + { + "Name": "rh-ui-ai-experience-fill-icon", + "React_name": "RhUiAiExperienceFillIcon", + "Type": "AI", + "Contextual_usage": "Use for general AI identification or when no other AI icon is appropriate.", + "Extra_context": "Must be paired with a button label or tooltip that includes “with AI” or “by AI.” See the AI design language guide." + }, + { + "Name": "rh-ui-ai-create-icon", + "React_name": "RhUiAiCreateIcon", + "Type": "AI", + "Contextual_usage": "Create something new with the help of AI.", + "Extra_context": "Suggested label: “Create with AI.”" + }, + { + "Name": "rh-ui-ai-edit-icon", + "React_name": "RhUiAiEditIcon", + "Type": "AI", + "Contextual_usage": "Use to edit something with the help of AI. Typically used for editing text.", + "Extra_context": "Suggested label: “Edit with AI.”" + }, + { + "Name": "rh-ui-ai-enhance-icon", + "React_name": "RhUiAiEnhanceIcon", + "Type": "AI", + "Contextual_usage": "Use AI to enhance something.", + "Extra_context": "Suggested label: “Enhance with AI.”" + }, + { + "Name": "rh-ui-ai-error-icon", + "React_name": "RhUiAiErrorIcon", + "Type": "AI", + "Contextual_usage": "Use when a problem has been identified by AI.", + "Extra_context": "Suggested label: “Error found by AI.”" + }, + { + "Name": "rh-ui-ai-filter-icon", + "React_name": "RhUiAiFilterIcon", + "Type": "AI", + "Contextual_usage": "Use to filter data with the help of AI.", + "Extra_context": "Suggested label: “Filter with AI.”" + }, + { + "Name": "rh-ui-ai-info-icon", + "React_name": "RhUiAiInfoIcon", + "Type": "AI", + "Contextual_usage": "Use when provided information is partially or completely generated by AI.", + "Extra_context": "Suggested label: “Information by AI.”" + }, + { + "Name": "rh-ui-ai-search-icon", + "React_name": "RhUiAiSearchIcon", + "Type": "AI", + "Contextual_usage": "Use to search for something with the help of AI.", + "Extra_context": "Suggested label: “Search with AI.”" + }, + { + "Name": "rh-ui-ai-troubleshoot-icon", + "React_name": "RhUiAiTroubleshootIcon", + "Type": "AI", + "Contextual_usage": "Use to receive help from AI when troubleshooting issues.", + "Extra_context": "Suggested label: “Troubleshoot with AI.”" } ] From fa21ee8663edc5e88b0b455bdae70c298dc9970a Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Wed, 22 Apr 2026 16:19:04 -0400 Subject: [PATCH 2/2] Finishes preparing iconography-related docs with new icons. --- .../TooltipIconReferenceTable.jsx | 115 ++++++++++++++++++ .../content-design/writing-guides/tooltips.md | 51 +++----- .../styles/iconography/iconography.md | 71 ++++++----- .../content/get-started/develop.md | 14 ++- .../status-and-severity.md | 58 +++++---- 5 files changed, 210 insertions(+), 99 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/content-design/writing-guides/TooltipIconReferenceTable.jsx diff --git a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/TooltipIconReferenceTable.jsx b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/TooltipIconReferenceTable.jsx new file mode 100644 index 0000000000..aa8d746cd0 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/TooltipIconReferenceTable.jsx @@ -0,0 +1,115 @@ +import React from 'react'; +import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core'; +import { + Table, + Tbody, + Thead, + Tr, + Th, + Td +} from '@patternfly/react-table'; +import RhUiArrowCircleUpIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-up-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; +import RhUiSettingsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-icon'; +import RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon'; +import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon'; +import RhUiEllipsisVerticalIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon'; +import RhUiEditIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-icon'; +import RhUiSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-search-icon'; +import RhUiZoomOutIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-zoom-out-icon'; +import RhUiZoomInIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-zoom-in-icon'; +import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon'; +import RhUiTrashIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-icon'; +import RhUiExportIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-export-icon'; +import RhUiTaskIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-task-icon'; + +const REACT_LABEL = 'React name'; + +const ROWS = [ + { Icon: RhUiArrowCircleUpIcon, name: 'rh-ui-arrow-circle-up', reactName: 'RhUiArrowCircleUpIcon', tooltip: 'Upgrade', note: '' }, + { Icon: RhUiNotificationFillIcon, name: 'rh-ui-notification-fill', reactName: 'RhUiNotificationFillIcon', tooltip: 'Notifications', note: '' }, + { Icon: RhUiSettingsIcon, name: 'rh-ui-settings', reactName: 'RhUiSettingsIcon', tooltip: 'Settings', note: '' }, + { Icon: RhUiCopyIcon, name: 'rh-ui-copy', reactName: 'RhUiCopyIcon', tooltip: 'Copy', note: '' }, + { Icon: RhUiDownloadIcon, name: 'rh-ui-download', reactName: 'RhUiDownloadIcon', tooltip: 'Download', note: '' }, + { Icon: RhUiEllipsisVerticalIcon, name: 'rh-ui-ellipsis-vertical', reactName: 'RhUiEllipsisVerticalIcon', tooltip: 'More options', note: '' }, + { Icon: RhUiEditIcon, name: 'rh-ui-edit', reactName: 'RhUiEditIcon', tooltip: 'Edit', note: '' }, + { Icon: RhUiSearchIcon, name: 'rh-ui-search', reactName: 'RhUiSearchIcon', tooltip: 'Search', note: '' }, + { Icon: RhUiZoomOutIcon, name: 'rh-ui-zoom-out', reactName: 'RhUiZoomOutIcon', tooltip: 'Zoom out', note: '' }, + { Icon: RhUiZoomInIcon, name: 'rh-ui-zoom-in', reactName: 'RhUiZoomInIcon', tooltip: 'Zoom in', note: '' }, + { Icon: RhUiSyncIcon, name: 'rh-ui-sync', reactName: 'RhUiSyncIcon', tooltip: 'Sync', note: 'Choose the best fit for your scenario.' }, + { Icon: RhUiTrashIcon, name: 'rh-ui-trash', reactName: 'RhUiTrashIcon', tooltip: 'Delete', note: '' }, + { Icon: RhUiExportIcon, name: 'rh-ui-export', reactName: 'RhUiExportIcon', tooltip: 'Export', note: '' }, + { Icon: RhUiTaskIcon, name: 'rh-ui-task', reactName: 'RhUiTaskIcon', tooltip: 'Tasks', note: '' } +]; + +export const TooltipIconReferenceTable = () => { + const [copiedReactName, setCopiedReactName] = React.useState(null); + + return ( + + + + + + + + + + + + {ROWS.map((row) => { + const Icon = row.Icon; + return ( + + + + + + + + ); + })} + +
IconName{REACT_LABEL}Tooltip contentNote
+ + + + + {row.name} + + {copiedReactName === row.reactName ? 'Copied' : 'Copy React name'}} + position={TooltipPosition.left} + exitDelay={copiedReactName === row.reactName ? 1000 : 100} + onTooltipHidden={() => { + if (copiedReactName === row.reactName) { + setCopiedReactName(null); + } + }} + > + { + navigator.clipboard.writeText(row.reactName); + setCopiedReactName(row.reactName); + }} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + navigator.clipboard.writeText(row.reactName); + setCopiedReactName(row.reactName); + } + }} + > + {row.reactName} + + + {row.tooltip}{row.note || null}
+ ); +}; diff --git a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/tooltips.md b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/tooltips.md index 20a44b482d..fdf38bd037 100644 --- a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/tooltips.md +++ b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/tooltips.md @@ -4,28 +4,22 @@ section: content-design subsection: writing-guides --- -import ArrowCircleUpIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-up-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; -import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; -import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; -import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon'; -import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon'; -import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; -import SearchMinusIcon from '@patternfly/react-icons/dist/esm/icons/search-minus-icon'; -import SearchPlusIcon from '@patternfly/react-icons/dist/esm/icons/search-plus-icon'; -import SyncAltIcon from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon'; -import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; -import ExportIcon from '@patternfly/react-icons/dist/esm/icons/export-icon'; -import TaskIcon from '@patternfly/react-icons/dist/esm/icons/task-icon'; -import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; -import { Button, Icon, Tooltip, Split, SplitItem } from '@patternfly/react-core' +import RhUiSettingsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-icon'; +import RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon'; +import RhUiSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-search-icon'; +import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon'; +import { Button, Tooltip, Split, SplitItem } from '@patternfly/react-core' +import { TooltipIconReferenceTable } from './TooltipIconReferenceTable.jsx'; A **tooltip** is a message box that is shown when a UI element, like a button or an icon, is in a hover state. They contain short descriptions that offer additional information to help users better understand elements within a UI. + + + + When writing tooltips, follow these general recommendations: @@ -36,7 +30,7 @@ When writing tooltips, follow these general recommendations: | Don't repeat information that is already available in the UI. | Do write content that is succinct, clear, and effective. | | Don't use tooltips for critical information. | Do use tooltips for additional, non-essential information. | | Don't end sentence fragments in a period. | Do end full sentences in a period. | -| Don’t place tooltips on question-circle icons (). Instead, use a [popover](/components/popover). | Do follow [our tooltip development accessibility guidelines](/components/tooltip/accessibility) to ensure that tooltip content is available to all users.| +| Don’t place tooltips on question-mark icons (). Instead, use a [popover](/components/popover). | Do follow [our tooltip development accessibility guidelines](/components/tooltip/accessibility) to ensure that tooltip content is available to all users.| @@ -51,33 +45,18 @@ For example: - + - + - + In PatternFly, there are commonly used icons that hold universal meanings. These should always use the same tooltip description, as shown in the following table: -|**Icon** | **Name** | **Tooltip content** | **Note** | -|------------|-----------|-----------|---- | -| | fa-arrow-circle-up | Upgrade | -| | fa-bell | Notifications | -| | fa-cog | Settings | -| | fa-copy | Copy | -| | fa-download | Download | -| | fa-ellipsis-v | More options | -| | fa-pencil-alt | Edit | -| | fa-search | Search | -| | fa-search-minus | Search minus | -| | fa-search-plus | Search plus | -| | fa-sync-alt | Sync, Refresh, or Running | Choose the best fit for your scenario.| -| | fa-trash | Delete | -| | pficon-export | Export | -| | pficon-task | Tasks | + You can learn more about the usage of these icons in our [design foundations.](/foundations-and-styles/iconography) diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md index 3e8166baf5..8e851991ba 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md @@ -2,7 +2,7 @@ id: Iconography section: foundations-and-styles --- -import { Icon, Content, ContentVariants } from '@patternfly/react-core'; +import { Icon, Content, ContentVariants, Alert } from '@patternfly/react-core'; import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; @@ -11,22 +11,34 @@ import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh- import RhUiStarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-icon'; import { IconsTable } from './IconsTable.jsx'; import './icons.css'; +import '../../../components/components.css'; -If you're a developer, check out our [development onboarding guide](/get-started/develop#using-icons) to learn how to install and use our icon set. +We use Red Hat brand UI icons (`rh-ui-*`) in PatternFly, which are delivered via the [`@patternfly/react-icons` package](https://www.npmjs.com/package/@patternfly/react-icons) and the [icon component](/components/icon). The [all icons](#all-icons) table at the end of this page lists the icons commonly used in PatternFly, including their usage details. -For React and HTML implementation examples, [refer to the icon component pages.](/components/icon) +The [iconography documentation of the Red Hat Design System (RHDS)](https://ux.redhat.com/foundations/iconography/) outlines the full Red Hat icon catalog, including: +- UI icons (the same set we use, plus more variants) +- A large set of standard icons (more general, illustrative, and typically less appropriate for product UIs) +- Microns (smaller, compact icons) +- Social icons -## Icon sizes +In general, rely on the all-icons table on this page and supplement your needs with the RHDS catalog if needed. If there's no icon for your use case, [submit a new icon request](https://docs.google.com/forms/d/e/1FAIpQLSde61rTDD4keaZEA3JFzBPbQVJ5EgEkhNapsYoI6ajKCsX4_Q/viewform) to the Brand team. -Icon size tokens use rems, rather than pixels. Rems are relative units that adjust font size based on a webpage's HTML document root element size. For example, if the root size is 10px, a rem size of 1.5 would be 15px. - -PatternFly's default root element size is 16px. If you change this default size, note that the following tables will no longer show accurate pixel measurements (though the rem values will stay the same). + +

+ To automatically migrate your Font Awesome and PatternFly icons to their respective Red Hat UI icons, you can use the + pfToRhIcons.mjs script. While you can still use Font Awesome or legacy PatternFly icons manually if necessary, they are no longer our recommended approach and should be replaced with Red Hat icons going forward. +

+ ## Inline icons +Rather than pixels, icons are sized in rems, which are relative to your page’s root font size. For example, if the root size is 10px, a rem size of 1.5 is 15px. PatternFly’s default root is 16px. If you change the root, the following tables’ size values will only be accurate in rems. + [Inline icons](/components/icon#inline) must be center-aligned horizontally when placed next to text and center-aligned vertically when stacked. +
![Icons correctly center-aligned beside icons incorrectly front-aligned.](./icon-alignment.svg) +
Use the following semantic tokens to ensure that icons are properly aligned and match the correct font size: @@ -34,24 +46,24 @@ Use the following semantic tokens to ensure that icons are properly aligned and | **Size** | **Token** | **Example** | | --- | --- | :---: | -| 1.375rem (22px) | `pf-t--global--icon--size--font--heading--h1` | Heading | -| 1.25rem (20px) | `pf-t--global--icon--size--font--heading--h2` | Heading | -| 1.125rem (18px) | `pf-t--global--icon--size--font--heading--h3` | Heading | -| 1rem (16px) | `pf-t--global--icon--size--font--heading--h4` | Heading | -| 1rem (16px) | `pf-t--global--icon--size--font--heading--h5` | Heading | -| 1rem (16px) | `pf-t--global--icon--size--font--heading--h6` | Heading | +| 1.375rem (22px) | `--pf-t--global--icon--size--font--heading--h1` | Heading | +| 1.25rem (20px) | `--pf-t--global--icon--size--font--heading--h2` | Heading | +| 1.125rem (18px) | `--pf-t--global--icon--size--font--heading--h3` | Heading | +| 1rem (16px) | `--pf-t--global--icon--size--font--heading--h4` | Heading | +| 1rem (16px) | `--pf-t--global--icon--size--font--heading--h5` | Heading | +| 1rem (16px) | `--pf-t--global--icon--size--font--heading--h6` | Heading | ### Body text | **Size** | **Token** | **Example** | | --- | --- | :---: | -| 0.75rem (12px) | `pf-t--global--icon--size--font--body--sm` | Small body | -| 0.875rem (14px) | `pf-t--global--icon--size--font--body--default` | Default body -| 1rem (16px) | `pf-t--global--icon--size--font--body--lg` | Large body +| 0.75rem (12px) | `--pf-t--global--icon--size--font--body--sm` | Small body | +| 0.875rem (14px) | `--pf-t--global--icon--size--font--body--default` | Default body +| 1rem (16px) | `--pf-t--global--icon--size--font--body--lg` | Large body ## Standalone icons -Occasionally, you may need to use a standalone icon that isn't aligned with any kind of text. PatternFly supports a range of icon sizes that can adapt to these use cases, including small, medium, large, x-large, 2xl, and 3xl icons. These sizes correspond to the following font sizes and tokens: +Occasionally, you may need to use a standalone icon that isn't aligned with any kind of text. We support a range of icon sizes for these use cases, including small, medium, large, x-large, 2xl, and 3xl icons. These sizes correspond to the following font sizes and tokens: | **Size** | **Token** | **Example** | | --- | --- | :---: | @@ -62,10 +74,10 @@ Occasionally, you may need to use a standalone icon that isn't aligned with any | 2xl (3.5rem, 56px) | `--pf-t--global--icon--size--2xl` | | | 3xl (6rem, 96px) | `--pf-t--global--icon--size--3xl` | | -Medium icons are typically the most versatile size to use in a UI. Most icons in PatternFly components are medium; other sizes are used sparingly. +Most standalone icons in PatternFly components are medium, since that is typically the most versatile size for a UI—other sizes are used sparingly. ## Icon colors -All icon colors that you use should align with the proper [semantic design token.](/foundations-and-styles/design-tokens/all-design-tokens) For example, a warning icon should use our approved warning color, a danger icon should use our approved danger color, and so on. +All icon colors that you use should align with the proper [semantic design token.](/foundations-and-styles/design-tokens/all-design-tokens) For example, a warning icon should use our approved warning color token, a danger icon should use our approved danger color token, and so on. | **Icon state** | **Color token** | **Example** | | --- | --- | :---: | @@ -77,26 +89,21 @@ All icon colors that you use should align with the proper [semantic design token To learn more about icon colors and color tokens, visit our [colors page.](/foundations-and-styles/colors) -## PatternFly icons -We use Red Hat brand UI icons (`rh-ui-*`), delivered through `@patternfly/react-icons` and the [icon component](/components/icon). The following table lists the icons we document for use in PatternFly UIs. - -Use the [React Icon component](/components/icon) with imports from `@patternfly/react-icons`, or inline SVG from your product’s PatternFly assets. For setup details, see the [development onboarding guide](/get-started/develop#using-icons). - -### React icons -Import icons from our [react-icons package](https://www.npmjs.com/package/@patternfly/react-icons): +## Using icons in development -`import { [insert-icon-name] } from '@patternfly/react-icons/dist/esm/icons/[insert-hyphenated-icon-name]';` +Developers should first refer to our [development onboarding guide](/get-started/develop#using-icons) to install, import, and use icons within your product. For React and HTML examples, [refer to the icon component.](/components/icon) -For example: +### React imports +Once installed, you can import individual icons from the [react-icons package](https://www.npmjs.com/package/@patternfly/react-icons). For example `import RhUiStarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-icon';` ## All icons -The following table lists Red Hat UI icons with usage guidance for PatternFly. +The table lists Red Hat UI icons with usage guidance for PatternFly. For the full catalog of Red Hat icons (UI, standard, microns, and social), refer to [the RDHS iconography guidelines](https://ux.redhat.com/foundations/iconography/). -For guidance related to icon tooltips, [refer to our tooltips writing guide.](/content-design/writing-guides/tooltips#icon-tooltips) +For guidance on icon tooltips, [refer to our tooltips writing guide.](/content-design/writing-guides/tooltips#icon-tooltips) -Select any single icon in the table to download it as an SVG. +Click an icon to download it as an SVG, or click the React name to copy the icon's name for use in React. - + \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/get-started/develop.md b/packages/documentation-site/patternfly-docs/content/get-started/develop.md index 14f69b5e67..370ce4ff36 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/develop.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/develop.md @@ -74,6 +74,16 @@ If you wish to migrate an existing project to PatternFly you must install and co yarn add @patternfly/react-core ``` +## Using icons + +PatternFly utilizes [Red Hat UI icons](https://www.redhat.com/en/about/brand/standards/icons) (`rh-ui-*`), which are available in the [`@patternfly/react-icons` package](https://www.npmjs.com/package/@patternfly/react-icons). Refer to the [icon component](/components/icon) and guidance on the [iconography](/foundations-and-styles/iconography) foundations page for more implementation guidance. + +### Migrating to Red Hat icons + +We offer a script to help you migrate from previous React icon component names to Red Hat UI icons: [`pfToRhIcons.mjs`](https://github.com/patternfly/patternfly-react/blob/main/packages/react-icons/scripts/icons/pfToRhIcons.mjs). This script allows you to automatically migrate icons across your product, based on a best-guess mapping. Note that it will not catch every icon that can be updated, so you might need to manually check its work and make additional changes. + +While you can still use the previous Font Awesome (`fa`, `fas`, `far`, and similar) or PatternFly (`pf`) icons if your product already relies on them, they are not the recommended path for new work. + ## Develop with HTML/CSS The PatternFly HTML/CSS library contains a collection of code samples that you can use to build interfaces with consistent PatternFly markup and styling. @@ -117,7 +127,9 @@ Use these files to consume the library. The recommended consumption approach wil ### Using icons -PatternFly uses [Font Awesome 5](https://fontawesome.com/), which can be utilized in 2 different ways: +For the recommended Red Hat icon approach (including React), see ["Using icons"](#using-icons) at the start of this page. The following describes using our previously recommended Font Awesome icons in the HTML/CSS bundle, which you may still rely on for legacy markup. + +[Font Awesome 5](https://fontawesome.com/) can be utilized in 2 different ways: * **Built into PatternFly:** By default, Font Awesome is included as part of the PatternFly CSS file. You do not need to do anything else to use this icon font family. diff --git a/packages/documentation-site/patternfly-docs/content/patterns/status-and-severity/status-and-severity.md b/packages/documentation-site/patternfly-docs/content/patterns/status-and-severity/status-and-severity.md index 1004719a13..0a897e4a05 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/status-and-severity/status-and-severity.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/status-and-severity/status-and-severity.md @@ -4,19 +4,17 @@ section: patterns --- import { Button, Icon, Content, ContentVariants } from '@patternfly/react-core'; import './status-and-severity.css'; -import SeverityCriticalIcon from '@patternfly/react-icons/dist/esm/icons/severity-critical-icon'; -import SeverityImportantIcon from '@patternfly/react-icons/dist/esm/icons/severity-important-icon'; -import SeverityMinorIcon from '@patternfly/react-icons/dist/esm/icons/severity-minor-icon'; -import SeverityModerateIcon from '@patternfly/react-icons/dist/esm/icons/severity-moderate-icon'; -import SeverityNoneIcon from '@patternfly/react-icons/dist/esm/icons/severity-none-icon'; -import SeverityUndefinedIcon from '@patternfly/react-icons/dist/esm/icons/severity-undefined-icon'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; -import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon'; -import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; +import RhUiSeverityCriticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-severity-critical-fill-icon'; +import RhUiSeverityImportantFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-severity-important-fill-icon'; +import RhUiSeverityMinorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-severity-minor-fill-icon'; +import RhUiSeverityModerateFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-severity-moderate-fill-icon'; +import RhUiSeverityNoneFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-severity-none-fill-icon'; +import RhUiSeverityUndefinedFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-severity-undefined-fill-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; # Communicating status versus severity @@ -44,11 +42,11 @@ The following table outlines the proper combination of status type, icon, and co | **Status** | **Icon** | **Color token** | **Usage** | | --- | --- | :---: | --- | -| Danger | |`--pf-t--global--icon--color--status--danger--default` | Use when a major error or blocking error has occurred. | -| Warning | | `--pf-t--global--icon--color--status--warning--default` | Use when a non-critical error has occurred. | -| Success | | `--pf-t--global--icon--color--status--success--default` | Use when a task or process has completed without error.| -| Info | | `--pf-t--global--icon--color--status--info--default` | Use for general, informational messages. | -| Custom | |`--pf-t--global--icon--color--status--custom--default` | Use for generic messages, with no associated severity. Allows you to use custom colors.| +| Danger | |`--pf-t--global--icon--color--status--danger--default` | Use when a major error or blocking error has occurred. | +| Warning | | `--pf-t--global--icon--color--status--warning--default` | Use when a non-critical error has occurred. | +| Success | | `--pf-t--global--icon--color--status--success--default` | Use when a task or process has completed without error.| +| Info | | `--pf-t--global--icon--color--status--info--default` | Use for general, informational messages. | +| Custom | |`--pf-t--global--icon--color--status--custom--default` | Use for generic messages, with no associated severity. Allows you to use custom colors.| ### Usage @@ -65,14 +63,14 @@ When there is an issue or incident related to a source of data, it is important These icons utilize color and visual weight to reflect the sense of severity that the icon is communicating. As the icons progress from less severe to more severe, the visual weight shifts and the color becomes more attention-grabbing. -| **Severity level** |

**Icon**

| **Color token** | **Usage** | -| --- | :---: | --- | --- | -| Critical |

| `--pf-t--global--icon--color--severity--critical--default`| Reserve for the highest severity issues. | -| Important |

| `--pf-t--global--icon--color--severity--important--default` | Use for high-threat issues. | -| Moderate |

| `--pf-t--global--icon--color--severity--moderate--default`| Use for moderate-threat issues. | -| Minor |

| `--pf-t--global--icon--color--severity--minor--default`| Use for low-threat issues. | -| None |

| `--pf-t--global--icon--color--severity--none--default` | Use when there is no security threat. | -| Undefined |

| `--pf-t--global--icon--color--severity--undefined--default` | Use if a severity level has not been determined yet, but is expected to change and be defined later. | +| **Severity level** |

**Icon**

| **Name** | **React name** | **Color token** | **Usage** | +| --- | :---: | --- | --- | --- | --- | +| Critical |

| rh-ui-severity-critical-fill | RhUiSeverityCriticalFillIcon | `--pf-t--global--icon--color--severity--critical--default`| Reserve for the highest severity issues. | +| Important |

| rh-ui-severity-important-fill | RhUiSeverityImportantFillIcon | `--pf-t--global--icon--color--severity--important--default` | Use for high-threat issues. | +| Moderate |

| rh-ui-severity-moderate-fill | RhUiSeverityModerateFillIcon | `--pf-t--global--icon--color--severity--moderate--default`| Use for moderate-threat issues. | +| Minor |

| rh-ui-severity-minor-fill | RhUiSeverityMinorFillIcon | `--pf-t--global--icon--color--severity--minor--default`| Use for low-threat issues. | +| None |

| rh-ui-severity-none-fill | RhUiSeverityNoneFillIcon | `--pf-t--global--icon--color--severity--none--default` | Use when there is no security threat. | +| Undefined |

| rh-ui-severity-undefined-fill | RhUiSeverityUndefinedFillIcon | `--pf-t--global--icon--color--severity--undefined--default` | Use if a severity level has not been determined yet, but is expected to change and be defined later. | ### Usage @@ -95,10 +93,10 @@ Due to varying use cases, you can use anywhere between 3 to 6 icons to communica | **Scale** | **Levels** | **Icons** | | --- | --- | --- | -| 6-point scale | Critical, important, moderate, minor, none, undefined |                | -| 5-point scale | Critical, important, moderate, minor, none or undefined (choose 1) |            
or
            | -| 4-point scale | Critical, important, moderate, minor |          | -| 3-point scale | Critical, moderate, minor |       | +| 6-point scale | Critical, important, moderate, minor, none, undefined |                | +| 5-point scale | Critical, important, moderate, minor, none or undefined (choose 1) |            
or
            | +| 4-point scale | Critical, important, moderate, minor |          | +| 3-point scale | Critical, moderate, minor |       | These groups of severity icons are especially useful in data displays, like tables and cards.