How can I use my own icons as bullet points in an unordered list on my Webflow site?
TL;DR
- Build a custom list using Div blocks with images/icons and text arranged in a flex row layout, styled with margins and consistent icon sizing.
- Alternatively, style native list items by removing default bullets and applying background images as icons using custom CSS.
You can replace standard list bullets with your own custom icons in Webflow by using background images or Webflow’s built-in structure and styling tools.
1. Use a List Wrapper With Custom Structure
- By default, Webflow’s list element doesn’t support replacing bullets with images directly.
- Instead, use a Collection of Div blocks or manually build your list using a flexbox structure that mimics an unordered list:
- Create a Div Block to act as the list wrapper.
- Inside, add multiple Div Blocks, each representing a "list item".
2. Insert Image or Icon as Bullet
- Inside each “list item” Div, add two elements:
- An Image (upload your custom icon) or an Icon component from a library like Font Awesome (via embed or custom code).
- A Text Block or Paragraph element for the list text.
- Set the parent Div to Display: Flex, Direction: Row, and align items vertically center.
- Add spacing between the icon and the text using margin or padding.
3. Style Your Custom List Items
- Define consistent sizing for the custom icon (e.g., 24x24 pixels).
- Use padding or margin to properly align the text relative to the icon.
- Add spacing between each list item by applying bottom margin to the individual item Divs.
4. Optional: Use Symbols or Components
- If this list structure will be reused across your site, convert one of the custom list items into a Component so you can reuse and manage it globally.
5. Alternative: Style Native List Using Background Image
- If you prefer to keep the native HTML unordered list, you can:
- Add a custom class to your List Block (e.g.,
custom-bullet). - Inside the Selector for list items (
li), set:- List Style: None
- Padding-left: Enough to fit your icon
- Background Image: Set your custom icon
- Background Position:
0 center - Background Repeat:
no-repeat
(Note: This method requires applying styles at the CSS level using Webflow’s Style panel or custom CSS.)
Summary
To use custom icons as bullet points, either recreate list items using Divs with icons and text (most flexible in Webflow), or apply a background image to native list elements using custom styles.