package.docs.components.Icon.examples.Icon.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: 'Icon'
section: components
cssPrefix: pf-v6-c-icon
---## Examples

### Basic

```html

  
    
  



  
    
  



  
    
  



  
    
  


```

### Standalone icon sizes

```html

  
    
  


  
    
  


  
    
  


  
    
  


  
    
  


  
    
  


```

### Body sizes

```html

  
    
  


  
    
  


  
    
  


```

### Heading sizes

```html

  
    
  


  
    
  


  
    
  


  
    
  


  
    
  


  
    
  


```

### Status colors

```html

  
    
  


  
    
  


  
    
  


  
    
  


  
    
  


```

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

```html

  
    
  


  
    
  


  
    
  


  
    
  


```

### Inline

```html

  
    Heading
    
      
        
      
    
  
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    Sed hendrerit nisi in cursus maximus.
  
  
    Second level
    
      
        
      
    
  
  
    
      
        
      
    
    Curabitur accumsan turpis pharetra
    
      augue tincidunt
      
        
          
        
      
     blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel
    cursus venenatis. Suspendisse potenti.
  
  
    Sometimes you need small text
    
      
        
      
    
  
Inline with size specified:

  
    
  

small,

  
    
  

medium,

  
    
  

large,

  
    
  

extra large

```

### In progress

```html

  
    
  
  
    
  



  
    
  
  
    
  


```

## 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](/design-foundations/icons) page for information about the PatternFly icon set and guidelines for use.

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-icon` | ``, `` | Initiates an icon component. **Required**  |
| `.pf-v6-c-icon__content` | ``, `` | Initiates the icon content. **Required**  |
| `.pf-v6-c-icon__progress` | ``, `` | Initiates a container for a progress spinner.  |
| `.pf-m-inline` | `.pf-v6-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,2xl,3xl]` | `.pf-v6-c-icon` | Modifies the icon container to be small, medium, large, extra large, double extra large, or triple extra large. |
| `.pf-m-body-[sm,default,lg]` | `.pf-v6-c-icon` | Modifies the icon container to be a size matching small, default, or large body text. |
| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon` | Modifies the icon container to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon__content`, `pf-v6-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
| `.pf-m-body-[sm,default,lg]` | `.pf-v6-c-icon__content` | Modifies the icon content or progress element to be a size matching small, default, or large body text. |
| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v6-c-icon__content` | Modifies the icon content or progress element to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
| `.pf-m-in-progress` | `.pf-v6-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-custom`  | `.pf-v6-c-icon__content` | Modifies the icon content to use a status color.  |