Info alert:Beta feature
This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.
Examples
Sizing content within the icon container
Use a size modifier on the icon container to maintain a consistent size, even if the contents change in size.
Documentation
Overview
The icon element is a container used to maintain a stable space for an icon or spinner, regardless of size or aspect ratio of the contents.
Refer to the icons page for information about the PatternFly icon set and guidelines for use.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-icon | <span>, <div> | Initiates an icon component. Required |
.pf-c-icon__content | <span>, <div> | Initiates the icon content. Required |
.pf-c-icon__progress | <span>, <div> | Initiates a container for a progress spinner. |
.pf-m-inline | .pf-c-icon | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
.pf-m-[sm,md,lg,xl] | .pf-c-icon | Modifies the icon container to be small, medium, large, or extra large. |
.pf-m-[sm,md,lg,xl] | .pf-c-icon__content, pf-c-icon__progress | Modifies the icon content or progress element to be small, medium, large, or extra large. |
.pf-m-in-progress | .pf-c-icon | Shows the progress element in place of the icon content. |
.pf-m-danger, .pf-m-warning, .pf-m-success, .pf-m-info, .pf-m-default | .pf-c-icon__content | Modifies the icon content to use a status color. |
CSS variables
| .pf-c-icon | --pf-c-icon--Width | 1.125rem | ||
| .pf-c-icon | --pf-c-icon--Height | 1.125rem | ||
| .pf-c-icon | --pf-c-icon--m-inline--Width | 1em | ||
| .pf-c-icon | --pf-c-icon--m-inline--Height | 1em | ||
| .pf-c-icon | --pf-c-icon--m-sm--Width | 0.625rem | ||
| .pf-c-icon | --pf-c-icon--m-md--Width | 1.125rem | ||
| .pf-c-icon | --pf-c-icon--m-lg--Width | 1.5rem | ||
| .pf-c-icon | --pf-c-icon--m-xl--Width | 3.375rem | ||
| .pf-c-icon | --pf-c-icon--m-sm--Height | 0.625rem | ||
| .pf-c-icon | --pf-c-icon--m-md--Height | 1.125rem | ||
| .pf-c-icon | --pf-c-icon--m-lg--Height | 1.5rem | ||
| .pf-c-icon | --pf-c-icon--m-xl--Height | 3.375rem | ||
| .pf-c-icon | --pf-c-icon__content--Color | #151515 | ||
| .pf-c-icon | --pf-c-icon__content--m-danger--Color | #c9190b | ||
| .pf-c-icon | --pf-c-icon__content--m-warning--Color | #f0ab00 | ||
| .pf-c-icon | --pf-c-icon__content--m-success--Color | #3e8635 | ||
| .pf-c-icon | --pf-c-icon__content--m-info--Color | #2b9af3 | ||
| .pf-c-icon | --pf-c-icon__content--m-default--Color | #73c5c5 | ||
| .pf-c-icon | --pf-c-icon__content--FontSize | 1.125rem | ||
| .pf-c-icon | --pf-c-icon--m-inline__content--FontSize | 1em | ||
| .pf-c-icon | --pf-c-icon__content--svg--VerticalAlign | -.125em | ||
| .pf-c-icon | --pf-c-icon--m-sm--content--FontSize | 0.625rem | ||
| .pf-c-icon | --pf-c-icon--m-md--content--FontSize | 1.125rem | ||
| .pf-c-icon | --pf-c-icon--m-lg--content--FontSize | 1.5rem | ||
| .pf-c-icon | --pf-c-icon--m-xl--content--FontSize | 3.375rem | ||
| .pf-c-icon.pf-m-inline | --pf-c-icon--Width | 1em | ||
| .pf-c-icon.pf-m-inline | --pf-c-icon--Height | 1em | ||
| .pf-c-icon.pf-m-inline | --pf-c-icon__content--FontSize | 1em | ||
| .pf-c-icon.pf-m-inline | --pf-c-icon__content--Color | currentcolor | ||
| .pf-c-icon.pf-m-inline .pf-c-spinner | --pf-c-spinner--diameter | 1em | ||
| .pf-c-icon.pf-m-sm | --pf-c-icon--Width | 0.625rem | ||
| .pf-c-icon.pf-m-sm | --pf-c-icon--Height | 0.625rem | ||
| .pf-c-icon.pf-m-sm | --pf-c-icon__content--FontSize | 0.625rem | ||
| .pf-c-icon.pf-m-md | --pf-c-icon--Width | 1.125rem | ||
| .pf-c-icon.pf-m-md | --pf-c-icon--Height | 1.125rem | ||
| .pf-c-icon.pf-m-md | --pf-c-icon__content--FontSize | 1.125rem | ||
| .pf-c-icon.pf-m-lg | --pf-c-icon--Width | 1.5rem | ||
| .pf-c-icon.pf-m-lg | --pf-c-icon--Height | 1.5rem | ||
| .pf-c-icon.pf-m-lg | --pf-c-icon__content--FontSize | 1.5rem | ||
| .pf-c-icon.pf-m-xl | --pf-c-icon--Width | 3.375rem | ||
| .pf-c-icon.pf-m-xl | --pf-c-icon--Height | 3.375rem | ||
| .pf-c-icon.pf-m-xl | --pf-c-icon__content--FontSize | 3.375rem | ||
| .pf-c-icon.pf-m-in-progress | --pf-c-icon__content--Opacity | 0 | ||
| .pf-c-icon.pf-m-in-progress | --pf-c-icon__progress--Opacity | 1 | ||
| .pf-c-icon__content.pf-m-sm | --pf-c-icon__content--FontSize | 0.625rem | ||
| .pf-c-icon__content.pf-m-md | --pf-c-icon__content--FontSize | 1.125rem | ||
| .pf-c-icon__content.pf-m-lg | --pf-c-icon__content--FontSize | 1.5rem | ||
| .pf-c-icon__content.pf-m-xl | --pf-c-icon__content--FontSize | 3.375rem | ||
| .pf-c-icon__content.pf-m-danger | --pf-c-icon__content--Color | #c9190b | ||
| .pf-c-icon__content.pf-m-warning | --pf-c-icon__content--Color | #f0ab00 | ||
| .pf-c-icon__content.pf-m-success | --pf-c-icon__content--Color | #3e8635 | ||
| .pf-c-icon__content.pf-m-info | --pf-c-icon__content--Color | #2b9af3 | ||
| .pf-c-icon__content.pf-m-default | --pf-c-icon__content--Color | #73c5c5 | ||
View source on GitHub