Icon

This component is the representation of an icon.

It is a small visual element, which is used to graphically represent functions, features, or types of content within a user interface.

Properties

fallback

This optional property provides a way to handle situations when the provided icon name is not found in the registry.

<App>
  <Icon name="noicon" fallback="trash" />
</App>

name

This string property specifies the name of the icon to display. All icons have unique names and identifying the name is case-sensitive.

The engine looks up the icon in its registry and determines which icon is associated with the name that the component will show. Nothing is displayed if the icon name is not found in the registry.

<App>
  <HStack>
    <Icon name="message" />
    <Icon name="note" />
    <Icon name="cog" />
    <Icon name="start" />
    <Icon name="some-non-existing-icon" />
    <Icon name="some-non-existing-icon-with fallback" fallback="trash" />
  </HStack>
</App>

size

This property defines the size of the Icon. Note that setting the height and/or the width of the component will override this property.

Available values: xs, sm, md, lg

<App>
  <HStack>
    <Icon name="like" />
    <Icon name="like" size="xs" />
    <Icon name="like" size="sm" />
    <Icon name="like" size="md" />
    <Icon name="like" size="lg" />
  </HStack>
</App>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

The Icon component uses these theme variables:

• size-Icon
• thickness-stroke-Icon:

"size-Icon": "4rem",
"thickness-stroke-Icon": "10px"

Theme Variables