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}
    />
  );
};
PropTypeDescription
nameStringThe name of the illustration. See available illustrations.
altStringThe illustration’s alt text for accessibility. Default value is <name> illustration.
widthNumberThe width of the illustration in pixels.
heightNumberThe height of the illustration in pixels.

Available illustrations

add-on-reporting

addOnReporting

Reporting add-on illustrationaddOnReporting
api

api

API illustrationapi
automated-testing

automatedTesting

Automated testing illustrationautomatedTesting
calling-set-up

callingSetUp

Calling set up illustrationcallingSetUp
companies

companies

Companies illustrationcompanies
contacts

contacts

Contacts illustrationcontacts
content-strategy

contentStrategy

Content strategy illustrationcontentStrategy
custom-objects

customObjects

Custom objects illustrationcustomObjects
customer-experience

customerExperience

Customer experience illustrationcustomerExperience
customer-support

customerSupport

Customer support illustrationcustomerSupport
deals

deals

Deals illustrationdeals
developer-security-update

developerSecurityUpdate

Developer security update illustrationdeveloperSecurityUpdate
electronic-signature

electronicSignature

Electronic signature illustrationelectronicSignature
electronic-signature-empty-state

electronicSignatureEmptyState

Electronic signature empty state illustrationelectronicSignatureEmptyState
email-confirmation

emailConfirmation

Email confirmation illustrationemailConfirmation
empty-state-charts

emptyStateCharts

Empty state charts illustrationemptyStateCharts
error-general

errorGeneral

Error general illustrationerrorGeneral
error-hourglass

errorHourglass

Error hourglass illustrationerrorHourglass
integrations

integrations

Integrations illustrationintegrations
leads

leads

Leads illustrationleads
lock

lock

Lock illustrationlock
meetings

meetings

Meetings illustrationmeetings
middle-pane-cards

middlePaneCards

Middle pane cards illustrationmiddlePaneCards
multiple-objects

multipleObjects

Multiple objects illustrationmultipleObjects
object

object

Object illustrationobject
payments-button

paymentsButton

Payments button illustrationpaymentsButton
products-shopping-cart

productsShoppingCart

Products shopping cart illustrationproductsShoppingCart
properties-sidebar

propertiesSidebar

Properties sidebar illustrationpropertiesSidebar
registration

registration

Registration illustrationregistration
sandbox-add-on

sandboxAddOn

Sandbox add-on illustrationsandboxAddOn
settings-sidebar

sidebar

Sidebar illustrationsidebar
social

social

Social illustrationsocial
store

store

Store illustrationstore
store-disabled

storeDisabled

Store disabled illustrationstoreDisabled
successfully-connected-email

successfullyConnectedEmail

Successfully connected email illustrationsuccessfullyConnectedEmail
target

target

Target illustrationtarget
task

task

Task illustrationtask
tickets

tickets

Tickets illustrationtickets
unlock

unlock

Unlock illustrationunlock