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).
x
import { Alert, Button, Flex, Icon, Text } from '@hubspot/ui-extensions';
const Extension = () => {
return (
<Flex direction="column" gap="small">
<Alert title="AlertTitle">
<Icon name="download" /> Icon inside an Alert
</Alert>
<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. |
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.
xxxxxxxxxx
17
import { Alert, Flex, Icon, Tile, Text } from '@hubspot/ui-extensions';
const Extension = () => {
return (
<Flex direction="column" gap="small">
<Alert title="AlertTitle">
<Icon name="warning" /> Icon inside an alert
</Alert>
<Tile>
<Icon name="robot" /> Icon inside a tile
</Tile>
<Text>
<Icon name="faceHappy" /> Icon with text
</Text>
</Flex>
);
};
Below are the currently available icons and their name
values.

add

attach

bulb

clock

comment

contact

copy

dataSync

date

delete

downCarat

download

edit

email

exclamation

faceHappy

faceNeutral

faceSad

file

home

imageGallery

left

location

notification

question

refresh

remove

reports

right

robot

save

search

settings

shoppingCart

star

success

upCarat

upload

video

warning
Always pair icons with text. If that is not possible, include the screenReaderText
prop to convey the icon's meaning for users with screen readers.