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

uie-components-icon-examples

PropTypeDescription
name RequiredStringSets 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.
screenReaderTextStringSets 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.uie-components-icon-example-spacing

Below are the currently available icons and their name values.

uie-components-icons-addadd
uie-components-icons_33attach
uie-components-icons_bulbbulb
uie-components-icons_32clock
uie-components-icons_1comment
uie-components-icons_31contact
uie-components-icons_copycopy
uie-components-icons_30dataSync
uie-components-icons_29date
uie-components-icons_28delete
uie-components-icons_27downCarat
uie-component-icon-in-button-downloaddownload
uie-components-icons_25edit
uie-components-icons_24email
uie-components-icons_23exclamation
uie-components-icons_22faceHappy
ui-extension-icon-faceneutralfaceNeutral
uie-components-icons_21faceSad
uie-components-icons_20file
uie-components-icons_homehome
uie-components-icons_19imageGallery
uie-components-icons_18left
uie-components-icons_17location
uie-component-icon-in-button-notification2notification
uie-component-icon-in-button-questionquestion
uie-components-icons_15refresh
uie-components-icons_14remove
uie-components-icons_13reports
uie-components-icons_12right
uie-components-icons_11robot
uie-components-icons_10save
uie-components-icons_9search
uie-components-icons_settingssettings
uie-components-icons_8shoppingCart
uie-components-icons_7star
uie-components-icons_6success
uie-components-icons_5upCarat
uie-components-icons_4upload
uie-components-icons_3video
uie-components-icons_2warning

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.