# \<IcePanel />

Copy as Markdown[View as Markdown](/docs/development/components/external-diagram-embeds/icepanel.md)

***

**Added in** `eventcatalog@3.2.1`

The `<IcePanel />` component renders an [IcePanel diagram](https://icepanel.io/) in your documentation.

Each IcePanel diagram embedded can also be loaded in a full screen mode, letting your teams explore the diagram in detail.

### Support[​](#support "Direct link to Support")

The `<IcePanel />` component is supported in domains, services, all messages and [custom documentation](/docs/development/bring-your-own-documentation/custom-pages/introduction.md).

### Usage[​](#usage "Direct link to Usage")

1. Get your IcePanel share URL from your IcePanel diagram (click "Share" and copy the embed URL)
2. Include the `<IcePanel />` component inside the markdown
   <!-- -->
   * e.g `/events/MyEvent/index.mdx`

**Basic Example**

```
---
#event frontmatter
---

<IcePanel url="https://s.icepanel.io/OpQVdslrqhZkyb/0QfB" />
```

**Example with title and description**

```
---
#event frontmatter
---

<IcePanel
  url="https://s.icepanel.io/OpQVdslrqhZkyb/0QfB"
  title="System Architecture"
  description="Overview of our microservices architecture and communication patterns."
  height="800"
/>
```

### Output example in EventCatalog[​](#output-example-in-eventcatalog "Direct link to Output example in EventCatalog")

![Example output](/assets/images/ice-panel-5c454588818acf2d27e95d729296b296.png)

### Props[​](#props "Direct link to Props")

| Name          | Type     | Default | Required | Description                                                                                                    |
| ------------- | -------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------- |
| `url`         | `string` |         | Yes      | The share URL of the IcePanel diagram. To get the URL, click "Share" in IcePanel and copy the embed/share URL. |
| `title`       | `string` |         | No       | The title to display above the diagram.                                                                        |
| `description` | `string` |         | No       | A description to display below the title.                                                                      |
| `height`      | `string` | `600`   | No       | The height of the embedded diagram in pixels.                                                                  |
| `width`       | `string` | `100%`  | No       | The width of the embedded diagram.                                                                             |