Alexa Icon Package

The Alexa icon package (alexa-icon) provides a set of icons defined in Alexa Vector Graphics (AVG) format. Use these icons in your Alexa Presentation Language (APL) documents with the AlexaButton and AlexaIcon responsive components.

Import the alexa-icon package

To use the package, add the alexa-icon package to the import array in your document. The latest version of the alexa-icon package is 1.0.0.

Example of the imports section of a document:

Copied to clipboard.

{
  "import": [
    {
      "name": "alexa-icon",
      "version": "1.0.0"
    }
  ]
}

Use an icon on the AlexaButton component

The AlexaButton responsive component can display an icon from the icon package. Set the buttonIconName parameter on AlexaButton to the name of the icon from the library.

The following example shows multiple buttons that include the icon, some with a button title and some without.

Display an icon from the package

To display an icon in your APL document

  1. Add the alexa-icon package to the import array in your document.
  2. In your mainTemplate or in a layout, add the AlexaIcon component.
  3. Set the iconName property for the AlexaIcon component to the name of the icon to display.

The following example shows four different icons from the library.

For details about the properties on the AlexaIcon responsive component, see AlexaIcon. For a reference to all available icons in the library, see Alexa Icon Library Reference.

Was this page helpful?

Last updated: Nov 28, 2023