How can I use my own icons as bullet points in an unordered list on my Webflow site?

You can use custom icons as bullet points in an unordered list in Webflow by replacing the default list-style with background images or inline icons styled with CSS.

1. Convert Your List to Custom Structure

Webflow doesn’t let you directly style default bullets, so you’ll need to replace the standard <ul> list with a styled layout:

• Use a Div Block or Rich Text element if you need to preserve some semantics.
• Create a flex layout: place an icon and text side-by-side within each list item.
• Add a Text Block for the label and an Image or Icon (SVG or PNG) for the custom bullet.

2. Use Flexbox for Alignment

To ensure your custom bullets align well with the text:

• Set the parent container (the new "list item") to Display: Flex.
• Set Align to Start or Center depending on your vertical layout preference.
• Set Gap or Margin between icon and text for spacing.

3. Style and Reuse as a Symbol or Component

After designing one list item:

• Duplicate for the number of items you need.
• Optionally save it as a Component to reuse across your site.

4. (Optional) Use Background Image for Visual Consistency

If you prefer to keep semantic <ul><li> structure and use CSS:

• Set the list-style to none.
• Add a custom class to the list items (li) and add a background image to mimic a bullet.
• Use padding-left to offset the text correctly.

Summary

To use custom icons as bullets in Webflow, replace standard list items with a flex layout that includes an icon and text, or use CSS with background images if preserving <li> structure. Ensure spacing and alignment using Flexbox, and optionally save as a Component for reuse.