help center

On this page

Icon List widget

Last Update: March 28, 2024

Add the widget

Icon List widget
  1. In Elementor Editor, click +.
    All available widgets are displayed.
  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Icon List widget?

The Icon List widget allows you to create a list where each item has an icon alongside text. You can choose from a library of pre-designed icons or upload your own custom icons.

You can customize the size, color, and alignment of the icons and text, as well as the spacing between items. These options let you create lists that perfectly match your website’s design.

Common use case

Ana is building a membership website for a yoga studio. They want to showcase the benefits of each membership tier in a visually appealing way. 

To showcase this, Ana creates a list with icons representing features like unlimited classes, exclusive workshops, and personalized coaching. 

Ana also customizes the colors and sizes of the icons to match the website’s theme, creating an eye-catching and informative display that helps visitors understand the value of each membership level at a glance.

Icon List widget 2 Icon List widget 2

Additional use cases

  • Display product features on an e-commerce website.
  • Highlight key services offered by a business.
  • Showcase amenities at a hotel or resort.
  • Present benefits of a subscription or membership.

Video

See a video demonstrating the widget in action.

Add an Icon List widget: Step-by-step

  1. Add the Icon List widget to the canvas. For details, see Add elements to a page.
  2. In the Content tab, under Icon List, from the Layout option, choose Default or Inline layout. Default displays items in a vertical list, while Inline displays items horizontally.
    Icon List widget 7
  3. The Icon List widget comes with three default list items. You can delete default items and add additional items to the list.
    1. Click on the Add Item button to add an item to the list.
    2. To duplicate or delete items, click on the item’s Duplicate or Delete Icon List widget 3  icon.
      Icon List widget 14
  4. Click on the individual item to open its customization settings.
    Icon List widget 11
  5. In the Text field, enter the list item’s text.
    Icon List widget 8
  6. In the Icon field, select the icon for the item. You can choose an icon from the Icon Library or upload an SVG. For more details, see Enable SVG Support in Elementor.
    Icon List widget 1
  7. (Optional) In the Link field, add the URL for the icon list.
    Icon List widget 5
    1. Click the ⚙️ to set the link to either open in a new window or to add rel=nofollow to the link.
    2. Use the Custom Attributes option to assign custom attributes to the link element. Use the | (pipe) for key-value separation and commas to separate pairs.
      Note
      Both the text and the link of the Icon List items can be generated dynamically by clicking the Dynamic icon next to each and choosing the source of the data.
  8. In the Apply Link On field, specify whether you want the link to be applied as Full Width or Inline.
    Icon List widget 12

Settings for the Icon List Widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content

Icon List widget 9

Choose Default or Inline. Default displays items in a vertical list, while Inline displays items horizontally.

Under the Items tab, click on the individual item to open its customization settings.

  • Text: Enter the list item’s text
  • Icon: Select the icon for the item
  • Link: Enter the URL for the item’s link. Click the ⚙️ to set the link to either open in a new window or to add rel=nofollow to the link.

Specify whether you want the link to be applied as Full Width or Inline.

Style

Icon List widget 6 Icon List widget 13

Adjusts the spacing between the items in the list.

Determines how the list items are aligned within the widget

Enables a divider line between each item in the list.

  • Style: Choose from Solid, Double, Dotted or Dashed.
  • Weight: Set the thickness of the divider.
  • Width: Control the width of the divider relative to the container.
  • Color: Choose the divider’s color.
Icon List widget 13 Icon List widget 15

Choose the icon’s color for Normal and Hover states. 

In the Hover state, you can set Transition Duration. This is the length of time it takes for the label to change its appearance.

Set the exact size of the icon.

Specifies the space between the icon and the text.

Determines the horizontal alignment of the icons within their respective containers.

Specifies the vertical alignment of the icons within their respective containers.

Allows you to set the vertical position of the icons.

Icon List widget 4

Customize the font style, size, weight, etc.  Learn more about Typography.

Adds a shadow effect to the text.

Sets the color of the text for Normal and Hover states.

In the Hover state, you can set Transition Duration. This is the length of time it takes for the label to change its appearance.

Advanced

The Advanced tab provides options to control icon list position, adjust spacing, add custom code, and more.

Icon List widget 10

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article