---
title: "How to Create Responsive Horizontal/Vertical Layout for Elementor Icon List?"
url: https://theplusaddons.com/docs/create-responsive-horizontal-vertical-layout-for-elementor-icon-list/
date: 2024-03-30
modified: 2026-08-11
lang: en
author: "Aditya Sharma"
description: "Do you want to create a responsive Elementor icon list? Having a responsive Elementor icon list that can automatically adapt to different screen sizes can improve the user experience. With..."
word_count: 289
---

# How to Create Responsive Horizontal/Vertical Layout for Elementor Icon List?

## 

- The Plus Addons for Elementor Style Lists widget creates a responsive Elementor icon list that adapts to different screen sizes.
- Style Lists lets the user set different layouts for Desktop, Tablet, or Mobile in the Extra Options tab, with Default for vertical and Horizontal for horizontal.
- Style Lists fits service pages, navigation sidebars, and feature comparison sections where icon list alignment changes across breakpoints.

Do you want to create a responsive Elementor icon list? Having a responsive Elementor icon list that can automatically adapt to different screen sizes can improve the user experience.

With the Style Lists widget from The Plus Addons for Elementor, you can create a responsive Elementor icon list.

*To check the complete feature overview documentation of The Plus Addons for Elementor Style Lists widget, [click here.](https://theplusaddons.com/docs/style-lists-widget-settings-overview/)*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

**Best Used For:**

- Service pages that list multiple benefits using icons in a horizontal row on desktop and a vertical stack on mobile

- Navigation sidebars that need to switch between horizontal and vertical layouts across breakpoints

- Feature comparison sections where icon list alignment changes based on screen size

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-stylish-list/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the Style Lists widget to the page and follow the steps:

1. Add the icon list content from the **Stylish List** tab.

2. Go to the **Extra Options** tab, then select the appropriate device tab (**Desktop**, **Tablet**, or **Mobile**) and set the icon list layout from the **Desktop Layout** dropdown. You will find two options:

- **Default** - To set a vertical layout.

- **Horizontal** - To set a horizontal layout.

![Horizonta and Vertical Layout for Elementor Icon List](https://theplusaddons.com/wp-content/uploads/2024/03/Horizonta-and-Vertical-Layout-for-Elementor-Icon-List.gif)

Following this process, you can set different layouts for different devices.

Your Elementor icon list is now responsive and will adapt to different screen sizes.

To add tooltips to individual items in the list, see [How to Add Tooltip in an Elementor Icon List Item](https://theplusaddons.com/docs/add-tooltip-in-an-elementor-icon-list-item/). For a different approach to displaying icons on a page, see [How to Add Social Media Icons in Elementor](https://theplusaddons.com/docs/add-social-media-icons-in-elementor/).

***Suggested Read**: [How to Change Elementor List Item Background on Hover.](https://theplusaddons.com/docs/change-elementor-list-item-background-on-hover/)*