## Examples

### Basic


import IconBasic from "./IconBasic.tsx?raw"

<LiveExample src={IconBasic} />

### Standalone icon sizes

These are the standard options for sizing icons.


import StandaloneIconSizes from "./StandaloneIconSizes.tsx?raw"

<LiveExample src={StandaloneIconSizes} />

### Body sizes

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


import BodyIconSizes from "./BodyIconSizes.tsx?raw"

<LiveExample src={BodyIconSizes} />

### Heading sizes

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


import HeadingIconSizes from "./HeadingIconSizes.tsx?raw"

<LiveExample src={HeadingIconSizes} />

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


import IconStatus from "./IconStatus.tsx?raw"

<LiveExample src={IconStatus} />

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


import IconContentSizes from "./IconContentSizes.tsx?raw"

<LiveExample src={IconContentSizes} />

### Inline


import IconInline from "./IconInline.tsx?raw"

<LiveExample src={IconInline} />

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


import IconProgress from "./IconProgress.tsx?raw"

<LiveExample src={IconProgress} />

### Custom in progress icon


import IconCustomProgress from "./IconCustomProgress.tsx?raw"

<LiveExample src={IconCustomProgress} />