> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/dual-listbox/display-contacts-with-custom-icons.md).

# Display contacts with custom icons

## Overview

This tutorial will guide you through creating a visually appealing and user-friendly card header screen flow using the [Dual Listbox component](/flow/flow-components/dual-listbox.md). You will learn how to customize the appearance and functionality of the Header.

So, let's get started!

## Result

<figure><img src="/files/fO1FiF6tpfOGaElqsaDn" alt=""><figcaption></figcaption></figure>

## Steps

### Create the flow

Type Flow in the setup menu

* Click on the "**New Flow**" button to create a new flow
* Select "**Screen Flow**"

{% @arcade/embed url="<https://app.arcade.software/share/qSuQYiG2FCYgKnf5UdOs>" flowId="qSuQYiG2FCYgKnf5UdOs" %}

### Create the Get Records element

We will create the Get Records collection to retrieve contact records.

* Add a "**Get Records**" element
* Enter an API Name
* Select the **Contact** object
* Filter Contact Records
  * None - Get All Records
* Display "**All Records**"
* Click on the "**Done**" button

{% @arcade/embed url="<https://app.arcade.software/share/V7QNXegR7xRzFJWPZKww>" flowId="V7QNXegR7xRzFJWPZKww" %}

### Add a Screen element

* Drag a screen element with the following settings:
  * Enter a Screen API Name
  * Remove the Screen Header and Footer (if needed)

{% @arcade/embed url="<https://app.arcade.software/share/pqfWjhLBFG7mjp6VORNE>" flowId="pqfWjhLBFG7mjp6VORNE" %}

### Add the Dual Listbox Component

* Drag the [Dual Listbox Component](/flow/flow-components/dual-listbox.md) from the custom list (or type Avatar Group from the search box)
* Enter an API Name
* **Open the Component Builder** to access all the component's settings
* Set the following settings:
  * **Label**: Select Contacts
  * **Data Source**: Variable
    * Source collection: GetContacts (preciously created)
  * **Data Mappings**
    * **Label**: Record.FullName
    * **Description**: Record.Phone
    * **Avatar Icon Name**: standard:employee\_contact

{% @arcade/embed url="<https://app.arcade.software/share/4iihFWe1xplxT3A1DeSB>" flowId="4iihFWe1xplxT3A1DeSB" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/dual-listbox/display-contacts-with-custom-icons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.