Icon

Stay organized with collections Save and categorize content based on your preferences.

The Icon widget represents either a built-in icon or custom icon. You can use Icon in card messages and dialogs in the following ways:

  • Display a standalone icon.
  • Display an icon in front of related text, as part of a DecoratedText widget.
  • Display an icon as an interactive button, as part of a ButtonList widget.

Example

The following image displays a card consisting of an Icon component.

A card message in Google Chat depicting an Icon.
Figure 1: A card message in Google Chat showing an email icon next to someone's email address.

Here's the card's JSON:

JSON

{
  "cardsV2": [
    {
      "card": {
        "sections": [{
          "widgets": [
            {
              "decoratedText": {
                "text": "sasha@example.com",
                "startIcon": {
                  "knownIcon": "EMAIL",
                }
              }
            }
          ]
        }]
      }
    }
  ]
}

Available built-in icons for the Icon widget

To use a built-in icon, you use the knownIcon field:

{
  .
  .
  .
      "knownIcon": "TRAIN",
  .
  .
  .
}

The following table lists the built-in icons that are available for card messages:

AIRPLANE BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

Icon JSON representation and fields

An icon displayed in a widget on a card.

Supports built-in and custom icons.

JSON representation 
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}
Fields
altText

string

Optional. A description of the icon used for accessibility. If unspecified, the default value "Button" is provided. As a best practice, you should set a helpful description for what the icon displays, and if applicable, what it does. For example, A user's account portrait , or Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat .

If the icon is set in a Button , the altText appears as helper text when the user hovers over the button. However, if the button also sets text , the icon's altText is ignored.

imageType

enum ( ImageType )

The crop style applied to the image. In some cases, applying a CIRCLE crop causes the image to be drawn larger than a built-in icon.

Union field icons . The icon displayed in the widget on the card. icons can be only one of the following:
knownIcon

string

Display one of the built-in icons provided by Google Workspace.

For example, to display an airplane icon, specify AIRPLANE . For a bus, specify BUS .

For a full list of supported icons, see built-in icons .

iconUrl

string

Display a custom icon hosted at an HTTPS URL.

For example: 

"iconUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png"

Supported file types include .png and .jpg .