Style Webflow list elements by selecting the List Item element and modifying bullet appearance in Style Panel > Typography, or hide default bullets and use a custom icon or pseudo-element approach via an Embed element. For icon lists (checkmarks, arrows), add an Image or Icon element inside each List Item and set the List to display Flex for horizontal alignment.
Webflow Custom Lists: Styled Bullets, Ordered Lists, and Icon Lists
Webflow's List element provides unordered and ordered lists, but the default browser bullet styles are plain. This tutorial covers every method for creating beautiful, custom lists: styling native bullets with color and size, building icon lists using flex layout with SVG or image icons, creating numbered lists with custom counter styles, and handling nested list indentation. Unlike typography adjustments that affect text properties, list styling involves the structural relationship between the List Wrapper, List, and List Item elements — this tutorial maps those exact Webflow UI paths.
Prerequisites
- A Webflow project open in the Designer
- Basic familiarity with the Style Panel (S) and Add Elements panel (A)
- An SVG or icon asset uploaded to the Asset Manager if you want icon lists
Step-by-step guide
Add a List element and understand its structure
Add a List element and understand its structure
Open the Add Elements panel (A) and scroll to the Typography section. Drag a List element onto your canvas. Webflow creates a default unordered list with three list items. Open the Navigator (Z) to see the structure: 'List Wrapper' at the top, 'List' inside it, and 'List Item' elements inside the List. This three-level structure matters for styling — styles applied to 'List' affect the container and spacing, while styles on 'List Item' affect each individual item. Click the List Wrapper to select it and rename the class to 'feature-list-wrapper'. Click the List inside to apply class 'feature-list'. Click one List Item to apply class 'feature-list-item'.
Expected result: A 3-item unordered list is on the canvas with named classes at each level, visible in the Navigator panel.
Style the default bullet color and size
Style the default bullet color and size
Select the List element (not the List Item) from the Navigator. In the Style Panel (S), the native bullet color inherits from the font color of the list. To change the bullet color independently from the text color in a native bullet list, you have two options: Option A — set the List Item text color to your desired bullet color, then wrap the text in a Span element and set the Span's font color to your text color (the bullet color will be whatever color the list item text is set to). Option B — use the Custom Properties section at the bottom of the Style Panel, add property 'list-style-color' with your desired hex value (though browser support is limited). For sizing native bullets, you change the font-size of the List Item, as bullets scale with the text.
Expected result: The list displays with modified bullet appearance, or you're ready to move to the icon list approach for more control.
Remove default bullets and prepare for icon list
Remove default bullets and prepare for icon list
Select your List element. In Style Panel > Typography, find the 'List Style' control (the icon that looks like a bulleted list). Click it and select 'None' to remove the browser default bullets. Now in Style Panel > Spacing, remove the default left padding that browsers apply to list elements: set Padding Left to 0. Without this step, your list items will have unexpected indentation. Select one List Item and confirm it has zero extra left padding as well. The list is now a clean container ready for your custom icon layout.
Expected result: All default bullets are gone. The list items are left-aligned with no extra indentation.
Build an icon list using Flexbox in each List Item
Build an icon list using Flexbox in each List Item
Select a List Item element. In Style Panel > Layout > Display, click 'Flex'. Set Direction to 'Row' (horizontal). Set Align to 'Center' (vertically center the icon with the text). Set Gap to 12px to create space between the icon and text. Now click Add Elements (A), find the Image element, and drag it inside the List Item in the Navigator. Set the image source in Element Settings (D) to your checkmark or arrow SVG from the Asset Manager. Set the image Width to 20px and Height to 20px in the Style Panel > Size section. Finally, add a Text Block element next to the image inside the same List Item for the item text. Apply these same flex styles to all List Items using the class.
Expected result: Each list item shows a custom icon aligned with text in a horizontal row, with consistent spacing between the icon and label.
Style an ordered (numbered) list
Style an ordered (numbered) list
Add a new List element from the Add Elements panel (A). In the Element Settings panel (D, gear icon), look for the List Type setting — change it from 'Unordered' to 'Ordered'. The list will now show numbers (1, 2, 3...) instead of bullets. To change the number style: select the List Item, go to Style Panel > Typography > look for the list style controls, or use Custom Properties at the bottom of the Style Panel: add property 'list-style-type' with values like 'decimal', 'upper-roman', 'upper-alpha', or 'lower-alpha'. To change the starting number: select the List element, Custom Properties > 'counter-reset' > 'list-counter 0' (change 0 to any start number - 1). To control the number color: wrap the list item content in a Span, style the number using the ::marker approach via a Page Head Code Embed.
Expected result: The ordered list shows numbered items, and you can control the numbering style and starting value.
Add proper indentation for nested lists
Add proper indentation for nested lists
To create a nested sublist, select a List Item in the Navigator, then drag a new List element inside that List Item (drop it below the text content in that item). Webflow will create a nested list. Select the nested List element. In Style Panel > Spacing, set Padding Left to 24px (this is the visual indent for sub-items). Set Margin Top to 8px and Margin Bottom to 8px to give the nested list breathing room from the parent items above and below. Style the nested List Items with a slightly smaller font size (Style Panel > Typography > Font Size > 14px) and a lighter color to create visual hierarchy between levels.
Expected result: The nested list appears indented under its parent item, with appropriate size and color differentiation from the top-level items.
Create a 'feature checklist' component
Create a 'feature checklist' component
Combine the icon list technique with component creation for a reusable feature checklist. Select your icon list wrapper element. Right-click > Create Component (or use Shift+A Components panel > '+' icon). Name it 'Feature Checklist'. This turns the entire icon list into a reusable component. Add a Component Property for the list items: in the Properties panel (K, visible when editing the main component), add a Text property for each list item text. Now every instance of the Feature Checklist component can have different text while maintaining the same icon, layout, and styling. This is the professional Webflow approach to reusable UI patterns.
Expected result: A Feature Checklist component exists in the Components panel, reusable across any page with customizable text per instance.
Complete working example
1/* Custom bullet color using ::marker — inject via Page Settings > Head Code2 Requires paid Webflow plan (Basic and above)3 Replace .feature-list-item with your actual class name */45.feature-list-item::marker {6 color: #7B2FF7;7 font-size: 1.2em;8}910/* For ordered lists with custom counter styling */11.step-list {12 list-style: none;13 counter-reset: step-counter;14 padding-left: 0;15}1617.step-list-item {18 counter-increment: step-counter;19 display: flex;20 gap: 16px;21 align-items: flex-start;22 margin-bottom: 16px;23}2425.step-list-item::before {26 content: counter(step-counter);27 background: #7B2FF7;28 color: white;29 width: 28px;30 height: 28px;31 border-radius: 50%;32 display: flex;33 align-items: center;34 justify-content: center;35 font-size: 13px;36 font-weight: 700;37 flex-shrink: 0;38 line-height: 1;39}Common mistakes
Why it's a problem: List items have unexpected left indentation even after styling
How to avoid: Browsers add default padding-left (~40px) to list elements. Select the List element (not the List Item) in the Navigator. Style Panel > Spacing > set Padding Left to 0. Also check if there's a margin on the List Wrapper element. The indentation usually comes from the List element itself, not the items.
Why it's a problem: The icon in an icon list doesn't stay aligned with multi-line text
How to avoid: You need to set Align Items to 'flex-start' (top) rather than 'center' on the List Item's Flex layout. This anchors the icon to the top of the first line of text instead of vertically centering it with all lines. Style Panel > Layout > Display: Flex > Align > select the top-aligned option.
Why it's a problem: Bullet styles applied to the List Item class affect all lists on the site
How to avoid: You've applied styles to a class that's shared across multiple list types. Create a specific class for this list's items (e.g., 'feature-list-item') rather than using the generic 'list-item' class. Select the List Item, clear the class in the Selector field, and type a new specific class name.
Why it's a problem: Nested list appears beside (not under) the parent list item text
How to avoid: The nested List element is a sibling of the List Item text, not inside it. Check the Navigator hierarchy. The structure should be: List Item > [Text Block] + [Nested List]. Both elements should be direct children of the same List Item. Drag the Nested List inside the List Item in the Navigator if it's currently positioned incorrectly.
Best practices
- Remove default browser list padding (Padding Left: 0 on the List element) before adding your own — browsers add ~40px left padding by default that creates unexpected indentation.
- Use the Flex layout method for icon lists rather than trying to style ::marker via custom CSS — it gives you full visual control without code and is editable in the Designer.
- Give each level of a nested list a clear visual difference: smaller font size, lighter color, and indented padding so users can instantly understand the hierarchy.
- When creating icon lists, use consistent icon sizes (18px–24px) and set flex align-items: center on the List Item to ensure icons stay vertically centered with text that wraps to multiple lines.
- For checklists with completed/incomplete states, use a Webflow Switch field in the CMS and conditional visibility to show different icon images (filled checkmark vs empty circle) based on the field value.
- Create the icon list layout in a Webflow Component so you can maintain one source of truth and update the styling across all instances at once.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a feature list in Webflow with custom checkmark icons instead of default bullets. I want each list item to show a green SVG checkmark on the left and text on the right, vertically centered. Walk me through the exact Webflow Designer steps to remove the default bullets, set up Flexbox layout on the List Item, and add an Image element as the icon. What class names should I use and what exact Style Panel settings should I apply?
Create a styled feature checklist section in Webflow with 5 items. Each item should have a purple checkmark icon (20px) on the left and list text on the right, using Flexbox row layout. Remove default bullets. The list items should have 12px gap between icon and text, and 16px margin between rows.
Frequently asked questions
How do I change the bullet color in Webflow without custom code?
Webflow doesn't have a direct bullet color control in the visual editor for native list markers. The easiest no-code approach is to use the icon list method: remove native bullets by selecting the List element > Style Panel > Typography > List Style: None, then use Flex layout with an Image element as your 'bullet'. This gives full color control. For CSS-based marker color, inject a .list-item::marker { color: #yourcolor; } rule in Page Settings > Head Code, which requires a paid plan.
How do I add a numbered list that starts at a number other than 1 in Webflow?
Select the ordered List element. In the Style Panel, scroll to Custom Properties at the bottom. Add property 'counter-reset' with value 'list-counter [N-1]' where N is your desired starting number (so for start at 3, use 'list-counter 2'). Alternatively, you can add a custom attribute: Element Settings (D) > Custom Attributes > attribute 'start' with the value of your starting number (e.g., '3'). The HTML start attribute is the simplest no-code option.
Can I connect a Webflow list to CMS data so items update automatically?
Yes. Add a Collection List element (Add panel > CMS > Collection List) and connect it to your CMS Collection. The Collection List item becomes a dynamic list where each CMS record renders as a list row. Style the Collection Item like a List Item with your icon + text layout. You can then manage all list items from the CMS editor without touching the Designer. This is the recommended approach for features, pricing, team members, and any frequently updated lists.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation