> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 0e8be2d8-7dc5-47a2-8749-eee2447c5d86
---

# Illustration

> Learn about the Illustration component for use in UI extensions.

The `Illustration` component renders an illustration from HubSpot's illustration library. Use this component to add a visual indicator to your app card.

![Example showing an app card that uses the 'lock' illustration](https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/uie-component-example-illustration.png)

```jsx theme={null}
import { Illustration } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <Illustration
      name="lock"
      alt="Lock icon indicating content is currently restricted or inaccessible"
      width={300}
      height={300}
    />
  );
};
```

## Props

| Prop | Type | Description |
| - | - | - |
| `alt` | String | The illustration's alt text for accessibility. Default value is `<name> illustration`. |
| `height` | Number | The height of the illustration in pixels. |
| `name` | String | The name of the illustration. See [available illustrations](#available-illustrations). |
| `width` | Number | The width of the illustration in pixels. |

## Available illustrations

> [card]
>
> `addOnReporting`

> [card]
>
> `api`

> [card]
>
> `automatedTesting`

> [card]
>
> `callingSetUp`

> [card]
>
> `companies`

> [card]
>
> `contacts`

> [card]
>
> `contentStrategy`

> [card]
>
> `customObjects`

> [card]
>
> `customerExperience`

> [card]
>
> `customerSupport`

> [card]
>
> `deals`

> [card]
>
> `developerSecurityUpdate`

> [card]
>
> `electronicSignature`

> [card]
>
> `electronicSignatureEmptyState`

> [card]
>
> `emailConfirmation`

> [card]
>
> `emptyStateCharts`

> [card]
>
> `errorGeneral`

> [card]
>
> `errorHourglass`

> [card]
>
> `integrations`

> [card]
>
> `leads`

> [card]
>
> `lock`

> [card]
>
> `meetings`

> [card]
>
> `middlePaneCards`

> [card]
>
> `multipleObjects`

> [card]
>
> `object`

> [card]
>
> `paymentsButton`

> [card]
>
> `productsShoppingCart`

> [card]
>
> `propertiesSidebar`

> [card]
>
> `registration`

> [card]
>
> `sandboxAddOn`

> [card]
>
> `sidebar`

> [card]
>
> `social`

> [card]
>
> `store`

> [card]
>
> `storeDisabled`

> [card]
>
> `successfullyConnectedEmail`

> [card]
>
> `target`

> [card]
>
> `task`

> [card]
>
> `tickets`

> [card]
>
> `unlock`

## Related components

* [Icon](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/icon.md)
* [EmptyState](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/empty-state.md)
* [ErrorState](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/error-state.md)