If you're a developer, check out our development onboarding guide to learn how to install and use our icon set.

For additional usage instruction, refer to the icon component pages.

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).

Inline icons must be center-aligned horizontally when placed next to text and center-aligned vertically when stacked.

Use the following semantic tokens to ensure that icons are properly aligned and match the correct font size:

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:

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.

All icon colors that you use should align with the proper semantic design token. For example, a warning icon should use our approved warning color, a danger icon should use our approved danger color, and so on.

To learn more about icon colors and color tokens, visit our colors page.

PatternFly uses custom icons and selections from Font Awesome Free, as shown in this table. 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.

When using HTML, use the following syntax:

• For 'pficon' icons: <i class="pf-icon [insert-icon-name]"></i>
• For 'fa' solid icons: <i class="fas [insert-icon-name]"></i>
• For 'fa' regular icons: <i class="far [insert-icon-name]"></i>

Note: Be sure to reference our development onboarding guide when using 'fa' regular icons.

When using React, you can import 'pficon' icons from our react-icons package by including the following line: import { [insert-icon-name] } from '@patternfly/react-icons/dist/esm/icons/[insert-hyphenated-icon-name]';

For example: import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';

The Font Awesome icons included with PatternFly are Font Awesome solid (FAS) webfont icons. If you're using icons via <i class="[fa, far, fas] [insert-icon-name]"></i>, 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:

1. Host it yourself
2. Include the icons via a package manager
3. Link to a CDN
4. Use the SVG code directly from fontawesome.com (proper attribution is required)

The following table provides details and usage information for all icons that PatternFly supports.

For guidance related to icon tooltips, refer to our tooltips writing guide.

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.)