Icon - HubSpot docs

Last modified: August 22, 2025

Use the Icon component to render a visual icon within other components. It can generally be used inside most components, excluding ones that don’t support child components (e.g., the Input component does not support icons).

import { Alert, Button, Flex, Icon, Text } from '@hubspot/ui-extensions';

const Extension = () => {
  return (
    <Flex direction="column" gap="small">
<Info>
<Icon name="download" /> Icon inside an Alert
</Info>
      <Button>
        <Icon name="download" /> Icon inside a button
      </Button>
      <Text>
        <Icon name="download" /> Icon with text
      </Text>
    </Flex>
  );
};

Prop	Type	Description
`name` Required	String	Sets the icon to display. See all available icons.
`size`	`'small'` \| `'medium'` \| `'large'`	By default, the size of the icon is set automatically based on the parent component. If you need to override the default size, you can specify one to use instead.
`screenReaderText`	String	Sets the text that screen readers will read for the icon.

Spacing

By default, spacing is not added around the icon. However, there may be times when you want more space between the icon and neighboring text. You can do this by manually adding a space to the text string, or by using   or {" "} as shown below.

import { Alert, Flex, Icon, Tile, Text } from '@hubspot/ui-extensions';

const Extension = () => {
  return (
    <Flex direction="column" gap="small">
<Info>
<Icon name="warning" /> Icon inside an alert
</Info>
      <Tile>
        <Icon name="robot" /> Icon inside a tile
      </Tile>
      <Text>
        <Icon name="faceHappy" /> Icon with text
      </Text>
    </Flex>
  );
};