- React

## Examples

### Basic

### Standalone icon sizes

These are the standard options for sizing icons.

### Body sizes

These size options are meant to make icons match the size of body text.

### Heading sizes

These size options are meant to make icons match the size of heading text.

### Status colors

The following example demonstrates the various status variants of an icon. Keep in mind that these icons are displayed out of a typical context, and that you should not rely on color alone to convey status to users.

### Sizing an icon within the icon container

Providing both size and iconSize properties allows the icon container to maintain a consistent size, even if the icon changes in size.

### Inline

### In progress

Passing the `isInProgress` property will swap the icon to a progress icon. By default this progress icon will be a `Spinner` but may be customized or overriden using the `progressIcon` property.

### Custom in progress icon

##
CSS variables