Icon List displays a list whose items include icons and text. Use it for short features, benefits, or contact details.
Click Add , choose Icon List , and place it in the container.
Populate Content > Content > List and configure each item.
Set Design > Icon , Layout , and Typography .
Adjust spacing between the list and surrounding content.
Save your changes.
Icon List controls in the Breakdance editor This element has no children; use its own controls.
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Content > Content
Setting
Purpose and options
Behavior
List Add, edit, remove, and reorder list.
Shared
List > Text Visible text.
Shared
List > Icon Icon.
Shared
List > Link Destination and link options .
Shared
Design > Icon
Setting
Purpose and options
Behavior
Position Top , Bottom , Bottom .Shared
Size Size and unit.
Responsive
Color Color or supported fill.
Hover
Background On/off.
Shared
Shown when Background is set.
Setting
Purpose and options
Behavior
Fill Color or supported fill.
Hover
Padding Padding.
Responsive
Radius Radius and unit.
Responsive
Setting
Purpose and options
Behavior
Nudge > Vertical Vertical and unit.
Responsive
Nudge > Horizontal Horizontal and unit.
Shared
Design > Layout
Setting
Purpose and options
Behavior
Width Width.
Responsive
Text Indent Text indent and unit.
Responsive
Space Between Space between and unit.
Responsive
Stack Vertical , Horizontal .Shared
Horizontal Align Between , Around , Center , Start , End . When: Stack = Horizontal .Shared
Stack Vertical At Breakpoint. When: Stack = Horizontal .
Shared
Alignment When Vertical Left , Center , Right .Shared
Design > Typography
Setting
Purpose and options
Behavior
Color Color or supported fill.
Responsive, Hover
Alignment Left , Center , Right , Justify .Responsive
Typography Set the font family, size, weight, line height, and other typography settings .
Shared
Effects > Stroke Width Stroke width and unit.
Responsive, Hover
Effects > Stroke Color Color or supported fill.
Responsive, Hover
Effects > Fill Transparent , Gradient , Image .Responsive
Effects > Gradient Color or supported fill. When: Fill = Gradient .
Responsive, Hover
Effects > Image WordPress media. When: Fill = Image .
Responsive, Hover
Effects > Size Cover , Contain , Auto , Custom . When: Fill = Image .Responsive
Effects > Height Height and unit. When: Size = Custom .
Responsive
Effects > Width Width and unit. When: Size = Custom .
Responsive
Effects > Repeat no-repeat , repeat , repeat-x , repeat-y . When: Fill = Image .Responsive
Effects > Position Left Top , Left Center , Left Bottom , Right Top , Right Center , Right Bottom , Center Top , Center Center , Center Bottom , Custom . When: Fill = Image .Responsive
Effects > Top Top and unit. When: Position = Custom .
Responsive
Effects > Left Left and unit. When: Position = Custom .
Responsive
Effects > Text Shadow Shadow offset, blur, spread, color.
Responsive, Hover
Design > Spacing
Setting
Purpose and options
Behavior
Spacing spacing controls .See linked controls
Troubleshooting
The list icons do not align with long labels Review Icon and Layout alignment and spacing, then test an item that wraps to a second line.
The content appears as one item Add separate entries in List instead of placing the full list in one item's text field.
