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.
`color`	`'inherit'` (default) \| `'alert'` \| `'warning'` \| `'success'`	The color of the icon. See the colors section for details.
`screenReaderText`	String	Sets the text that screen readers will read for the icon.

Colors

Using the color prop, you can set an icon to one of the following colors:

Default

color="inherit"

Alert

color="alert"

Warning

color="warning"

Success

color="success"

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