> ## 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: 2084d4a3-d981-47da-938c-c33c6ea8fea8
---

# Image

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

The `Image` component renders an image. Use this component to add a logo or other visual brand identity asset, or to accentuate other content in the extension.

Images cannot exceed the width of the extension's container at various screen sizes, and values beyond that maximum width will not be applied to the image.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/ui-extension-image-component.png" alt="ui-extension-image-component" />
</Frame>

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

const Extension = () => {
  return (
    <Image
      alt="A picture of a welcome sign"
      src="https://picsum.photos/id/237/200/300"
      href={{
        url: "https://www.wikipedia.org",
        external: true,
      }}
      onClick={() => {
        console.log("Someone clicked the image!");
      }}
      width={200}
    />
  );
};
```

## Props

| **Prop**  | **Type**         | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| --------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `alt`     | String           | The alt text for the image, similar to the `alt` attribute for the HTML [img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#attributes).                                                                                                                                                                                                                                                                                                                                                                            |
| `height`  | Number           | The pixel height of the image.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `href`    | String \| Object | When provided, sets the URL that will open when the image is clicked. Can be set to a URL string or an object with the following fields:<ul><li>`url` (string): the URL that will open on click.</li><li>`external` (boolean, optional): set to `true` to open the URL in a new tab. By default:<ul><li>Links to HubSpot app pages will open in the same tab.</li><li>Links to non-HubSpot app pages will open in a new tab.</li></ul></li></ul>When an image includes both `href` and an `onClick` action, both will be executed on button click. |
| `onClick` | `() => void`     | A function that will be called when the image is clicked. This function will receive no arguments and any returned values will be ignored.                                                                                                                                                                                                                                                                                                                                                                                                         |
| `overlay` | Object           | Include a [Modal](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/modal) or [Panel](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/panel) component in this object to open it as an overlay on click. Learn more about [using overlays](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#open-overlays).                                                                                                                                         |
| `src`     | String           | The source of the image display. You can specify a URL or you can `import` the image directly if it's within your project. Learn more about [image sources](#image-guidelines).                                                                                                                                                                                                                                                                                                                                                                    |
| `width`   | Number           | The pixel width of the image.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

## Image guidelines

* Supported types: the `Image` component supports the following file types: `.jpg`, `.jpeg`, `.png`, `.gif`, `.svg`, `.webp`.
* Supported sources: the `src` prop specifies the source of the image, which can be a URL (shown above) or you can import the file if it's included in your project. To import images, first add the files to your project, then import them by relative path (shown below). While there's no specific file size limit for images bundled in projects, the total size of your project cannot exceed 50MB.

```jsx theme={null}
import { Image } from "@hubspot/ui-extensions";
import myImage from "./images/myImage.png";
import myImage2 from "./images/myImage2.png";

const Extension = () => {
  return (
    <>
      <Image src={myImage} width={300}></Image>
      <Image src={myImage2} width={300}></Image>
    </>
  );
};
```

## Related components

* [Link](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/link)
* [Text](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/text)
* [Heading](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/heading)