# Icon Frame
> Icon Frame is a decorative container that wraps an icon in a themed circle or rounded square.

## Import

```js
import { IconFrame } from '@volue/wave-react';
```

## Examples

### Default

```jsx
<IconFrame>
  <SvgIcon iconName="help" />
</IconFrame>
```

### Shape

`IconFrame` supports two shapes. The default is `circle`.

```jsx
<Flex gap="spacingM">
  <IconFrame shape="circle">
    <SvgIcon iconName="help" />
  </IconFrame>
  <IconFrame shape="square">
    <SvgIcon iconName="shield" />
  </IconFrame>
</Flex>
```

<Callout variant="tip">

Pick `square` when the frame is embedded in a rounded rectangular container, so its corners match the surroundings — see the [App header actions](/components/app-header#actions) example.

</Callout>

### Size

Matches the icon-only `Button` sizes. The inner `SvgIcon` is sized automatically — no need to pass `size` on it.

```jsx
<Flex gap="spacingS" wrap="wrap">
  <IconFrame size="xxSmall">
    <SvgIcon iconName="help" />
  </IconFrame>
  <IconFrame size="xSmall">
    <SvgIcon iconName="help" />
  </IconFrame>
  <IconFrame size="small">
    <SvgIcon iconName="help" />
  </IconFrame>
  <IconFrame size="medium">
    <SvgIcon iconName="help" />
  </IconFrame>
  <IconFrame size="large">
    <SvgIcon iconName="help" />
  </IconFrame>
</Flex>
```

### Variant and color

`subtle` (default) applies a soft background; `strong` applies a saturated background with an inverse foreground.

```jsx
<Flex flow="column">
  <Flex gap="spacingS" wrap="wrap">
    <IconFrame variant="subtle" color="neutral">
      <SvgIcon iconName="help" />
    </IconFrame>
    <IconFrame variant="subtle" color="success">
      <SvgIcon iconName="validation" />
    </IconFrame>
    <IconFrame variant="subtle" color="danger">
      <SvgIcon iconName="error" />
    </IconFrame>
    <IconFrame variant="subtle" color="info">
      <SvgIcon iconName="info" />
    </IconFrame>
    <IconFrame variant="subtle" color="warning">
      <SvgIcon iconName="warning" />
    </IconFrame>
  </Flex>
  <Flex gap="spacingS" wrap="wrap">
    <IconFrame variant="strong" color="neutral">
      <SvgIcon iconName="help" />
    </IconFrame>
    <IconFrame variant="strong" color="success">
      <SvgIcon iconName="validation" />
    </IconFrame>
    <IconFrame variant="strong" color="danger">
      <SvgIcon iconName="error" />
    </IconFrame>
    <IconFrame variant="strong" color="info">
      <SvgIcon iconName="info" />
    </IconFrame>
    <IconFrame variant="strong" color="warning">
      <SvgIcon iconName="warning" />
    </IconFrame>
  </Flex>
</Flex>
```

### Anchored

Compose `IconFrame` with [Anchor](/components/layout/anchor) to attach a framed icon to a corner of another element.

```jsx
<Anchor.Root>
  <Avatar.Root of="Torvald Halvor">
    <Avatar.Image src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;fit=crop&amp;h=200&amp;w=200&amp;ixid=eyJhcHBfaWQiOjE3Nzg0fQ" />
    <Avatar.Fallback>
      <Avatar.Initials />
    </Avatar.Fallback>
  </Avatar.Root>
  <Anchor.Target
    position="bottom-end"
    inset="14%"
    as={IconFrame}
    variant="strong"
    color="success"
    size="xxSmall"
  >
    <SvgIcon iconName="check" />
  </Anchor.Target>
</Anchor.Root>
```

---

## API Reference

| Name      | Type                                                        | Default     | Description                                                                                                                                                                                                                                                                                  | Required |
| --------- | ----------------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`      | `keyof JSX.IntrinsicElements \| React.ComponentType<any>`   | `div`       | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](/get-started/composition#polymorphism) guide. |          |
| `shape`   | `"circle" \| "square"`                                      | `"circle"`  | Shape of the frame.                                                                                                                                                                                                                                                                          |          |
| `size`    | `"xxSmall" \| "xSmall" \| "small" \| "medium" \| "large"`   | `"medium"`  | Size of the frame. Matches the icon-only Button sizes.                                                                                                                                                                                                                                       |          |
| `variant` | `"subtle" \| "strong"`                                      | `"subtle"`  | Visual emphasis. `subtle` uses a soft background; `strong` uses a saturated background with inverse foreground.                                                                                                                                                                              |          |
| `color`   | `"neutral" \| "success" \| "danger" \| "info" \| "warning"` | `"neutral"` | Semantic color of the frame.                                                                                                                                                                                                                                                                 |          |
| `css`     | `StitchesCss`                                               |             | Apply styles directly to a component in a similar way how you would define inline styles. Wave uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries or variants.                                                 |          |