Alexa Icon

Note: Learn how to improve your skills with APL with Build visually rich experiences using APL at the Alexa Learning Lab.

Displays an icon in Alexa Vector Graphic (AVG) format. You can use an icon from an Amazon-provided library of icons, or provide your own.

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"
    }
  ]
}

The alexa-icon package includes both the AlexaIcon responsive component and the library of icons.

For details about the alexa-icon package, see Alexa Icon Package.

Name	Type	Default	Description	Widget support	Version added
`iconColor`	Color	`black`	Color of the icon.	Not supported	1.0.0
`iconName`	String	—	Name of an icon in the Alexa Icon Library, such as ic_battery_low	Not supported	1.0.0
`iconSize`	Dimension	24	Size of the icon.	Not supported	1.0.0
`iconSource`	String	—	If the AVG icon is located somewhere else, provide URL to icon JSON	Not supported	1.0.0
`iconStyle`		—	Custom style to apply to the icon. Use this to change the icon opacity, fill colors, and stroke colors for different component states. Define the style in the styles property of the APL document. For details about defining styles, see APL Style Definition and Evaluation.	Not supported	1.0.0
`lang`	String	`${environment.lang ? environment.lang : 'en-US' }`	The lang property of AlexaIcon. Set the lang property to a BCP-47 string (e.g., en-US). By default, it uses environment lang.	Not supported	1.0.0
`layoutDirection`	String	`${environment.layoutDirection}`	The layoutDirection of AlexaIcon. It can be LTR or RTL. By default, it uses environment layoutDirection.	Not supported	1.0.0
`type`	String	—	Always set to `AlexaIcon`.	Not supported	1.0.0

Provide feedback

Last updated: Nov 28, 2023