> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bosscart.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Icon list

> Icons lists are a great way to display lists in a more visual way.

Icons lists are a great way to display lists in a more visual way.

Open your widget tab to the left side of your builder canvas, and select the **Icon list** tab.

<img src="https://mintcdn.com/alavon365/m47yzIyDG9neC9jn/images/builder/ce1d51e41bd97e21.png?fit=max&auto=format&n=m47yzIyDG9neC9jn&q=85&s=54b67e3651f469d30796d675bb960801" alt="" width="1479" height="862" data-path="images/builder/ce1d51e41bd97e21.png" />

Once you have selected the **icon list** and dropped in to the builder canvas, you can now start to edit the widget.

<img src="https://mintcdn.com/alavon365/FdYN6CBeMqTMvZFP/images/builder/8f1a89f012268fff.png?fit=max&auto=format&n=FdYN6CBeMqTMvZFP&q=85&s=88a3855adbb505cc9b75db50078ffa4f" alt="" width="991" height="426" data-path="images/builder/8f1a89f012268fff.png" />

To the right side in the editing block, is where you can start to add your own information and display style to your **icon list**.

Within the icon list values, for example the labels: List item one, list item two, list item three 'as displayed above. When you click or add a new list item you can edit the values as shown in the image below:

* **Title**
* **Description**
* **Icon**
* **Link 'Optional'**

<img src="https://mintcdn.com/alavon365/jdtI0XQKlmiI8Ux4/images/builder/1b6799b70080519d.png?fit=max&auto=format&n=jdtI0XQKlmiI8Ux4&q=85&s=9f32ae9a71f31e8c02d2a183c3ed0dd6" alt="" width="696" height="476" data-path="images/builder/1b6799b70080519d.png" />

### Select your display style

By clicking the **Style button**, you have multiple options to display the icon list on your page.

<img src="https://mintcdn.com/alavon365/uuQgZm_Mu6oLUDLv/images/builder/fdfc0d706237224a.png?fit=max&auto=format&n=uuQgZm_Mu6oLUDLv&q=85&s=e171bcdf7f49ec10e0138b691574a246" alt="" width="929" height="402" data-path="images/builder/fdfc0d706237224a.png" />

### **Standard Layout**

The standard layout is a simple vertical list, with icons.

<img src="https://mintcdn.com/alavon365/FdYN6CBeMqTMvZFP/images/builder/8c2610ae3f90fb30.png?fit=max&auto=format&n=FdYN6CBeMqTMvZFP&q=85&s=ca01368de29a40fc9a00440f9f8975bd" alt="" width="943" height="518" data-path="images/builder/8c2610ae3f90fb30.png" />

### **Table Layout**

The table layout is similar to the Standard layout, but the table layout has horizonal lines, that separate your list.

<img src="https://mintcdn.com/alavon365/m47yzIyDG9neC9jn/images/builder/d4e30f7c45dc5e9b.png?fit=max&auto=format&n=m47yzIyDG9neC9jn&q=85&s=537c2c9befcf73a8bc4e62501e5fbd25" alt="" width="934" height="502" data-path="images/builder/d4e30f7c45dc5e9b.png" />

### **Cards Layout**

The cards layout is a neat boxed inline list, with a border box surrounding the text and icon.

<img src="https://mintcdn.com/alavon365/jdtI0XQKlmiI8Ux4/images/builder/02661d8a0046970a.png?fit=max&auto=format&n=jdtI0XQKlmiI8Ux4&q=85&s=55dc10bb8da0a7ccf4a8ec87788b5ecc" alt="" width="1151" height="565" data-path="images/builder/02661d8a0046970a.png" />