# asset

## Overview

The `asset` element adds visual content such as images or icons to a `list-item`.

## Standard Attributes

### `icon`

**Optional**

**Type**: `string`

**Default**: unset

**Shorthand supported?** `true`

The icon to display on the left-hand side of the list-item. The icon can be a one of JourneyApps' supported icons. To display an image or photo, use the `src=""` attribute.

#### Example: Shorthand syntax

```xml
<list>
    <list-item icon="my-icon-name" />
</list>
```

#### Example: Longhand syntax

```xml
<list>
    <list-item>
        <asset icon="my-icon-name" />
    </list-item>
</list>
```

## Advanced Attributes

### `color`

**Optional**

**Type**: `string`- can be a named color or #HEX value

**Default**: unset

**Shorthand supported?** `false`

The color of the icon.

```xml
<list>
    <list-item>
        <asset icon="my-icon-name" color="#FF5733" />
    </list-item>
</list>
```

### `src`

**Optional**

**Type**: `string`

**Default**: unset

**Shorthand supported?** `true`

The photo or image to display on the left-hand side of the list-item. The photo or image can be a `png` or `SVG` file, and can referenced from a database object or your app's assets. To display an icon, use the `icon=""` attribute.

#### Example: Shorthand syntax

```xml
<list>
    <list-item image="{formatString}" />
</list>
```

#### Example: Longhand syntax

```xml
<list>
    <list-item>
        <asset src="{formatString}" />
        <!-- or -->
        <asset src="{dbObject.photo}" /> <!-- Supported from v4.31 of the JourneyApps Container -->
    </list-item>
</list>
```