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 RequiredStringSets the icon to display. See all available icons.
color'inherit' (default) | 'alert' | 'warning' | 'success'The color of the icon. See the colors section for details.
screenReaderTextStringSets the text that screen readers will read for the icon.
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.

​
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 January 13, 2026