Last modified: August 22, 2025
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.
ui-extension-image-component
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}
    />
  );
};
PropTypeDescription
srcStringThe 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.
altStringThe alt text for the image, similar to the alt attribute for the HTML img tag.
hrefObjectWhen provided, sets the URL that will open when the image is clicked. Contains the following fields:
  • url (string): the URL that will open on click.
  • external (boolean): set to true to open the URL in a new tab. By default:
    • Links to HubSpot app pages will open in the same tab.
    • Links to non-HubSpot app pages will open in a new tab.
When an image includes both href and an onClick action, both will be executed on button click.
onClick() => voidA function that will be called when the image is clicked. This function will receive no arguments and any returned values will be ignored.
widthNumberThe pixel width of the image.
heightNumberThe pixel height of the image.
overlayObjectInclude a Modal or Panel component in this object to open it as an overlay on click. Learn more about using overlays.

​
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.
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>
    </>
  );
};