Icon | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

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).

uie-components-icon-examples

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.

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 &nbsp; or {" "} as shown below.uie-components-icon-example-spacing

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'/>&nbsp;Icon inside a tile</Tile> <Text><Icon name='faceHappy' />{" "}Icon with text</Text> </Flex> ); };

Available icons

Below are the currently available icons and their name values.

uie-components-icons-add

add

uie-components-icons_33

attach

ui-extension-components-icons-bulb-large

bulb

uie-components-icons_32

clock

uie-components-icons_1

comment

uie-components-icons_31

contact

ui-extension-components-icons-copy-large

copy

uie-components-icons_30

dataSync

uie-components-icons_29

date

uie-components-icons_28

delete

uie-components-icons_27

downCarat

uie-component-icon-in-button-download

download

uie-components-icons_25

edit

uie-components-icons_24

email

uie-components-icons_23

exclamation

uie-components-icons_22

faceSad

ui-extension-icon-faceneutral

faceNeutral

uie-components-icons_21

faceSad

uie-components-icons_20

file

ui-extension-components-icons-home-large

home

uie-components-icons_19

imageGallery

uie-components-icons_18

left

uie-components-icons_17

location

uie-component-icon-in-button-notification

notification

ui-extension-components-icons-question-large

question

uie-components-icons_15

refresh

uie-components-icons_14

remove

uie-components-icons_13

reports

uie-components-icons_12

right

uie-components-icons_11

robot

uie-components-icons_10

save

uie-components-icons_9

search

ui-extension-components-icons-settings-large

settings

uie-components-icons_8

shoppingCart

uie-components-icons_7

star

uie-component-icon-in-button-success

success

uie-components-icons_5

upCarat

uie-components-icons_4

upload

uie-components-icons_3

video

uie-components-icons_2

warning

Guidelines

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.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.