Illustration - HubSpot docs

Last modified: August 22, 2025

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

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

Prop	Type	Description
`name`	String	The name of the illustration. See available illustrations.
`alt`	String	The illustration’s alt text for accessibility. Default value is `<name> illustration`.
`width`	Number	The width of the illustration in pixels.
`height`	Number	The height of the illustration in pixels.