Skip to main content
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). Always pair icons with text. If that’s not possible, include the screenReaderText prop to convey the icon’s meaning for users with screen readers.
Example of the Icon component used in a UI extension to add icons to an alert, a button, and alongside text.
import { Alert, Button, Flex, Icon, Text } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <Flex align="start" direction="column" gap="sm">
      <Alert title="Sync complete" variant="success">
        <Icon name="success" /> 42 contacts updated
      </Alert>
      <Button variant="primary">
        <Icon name="refresh" /> Sync contacts
      </Button>
      <Text>
        <Icon name="clock" /> Last synced 5 minutes ago
      </Text>
    </Flex>
  );
};

​
Props

PropTypeDescription
name Required
color
screenReaderText
size
testId

​
Colors

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

​
Spacing

By default, spacing is not added around the icon. However, To add a space between the icon and adjacent text, you can manually add a space with the space bar, or by using &nbsp; and {" "} as shown below. 
<>
  <Alert title="Sync complete" variant="success">
    <Icon name="success" /> 42 contacts updated
  </Alert>
  <Button variant="primary">
    <Icon name="refresh" />&nbsp;Sync contacts
  </Button>
  <Text>
    <Icon name="clock" />{" "}Last synced 5 minutes ago
  </Text>
</>

​
Available icons

Below are the currently available icons and their name values, which you can copy by clicking the icon.
Last modified on February 20, 2026