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

To use custom icons as bullet points in an unordered list on your Webflow site, you'll need to replace the default list styling with custom design settings. Here's how to do it:

​

1. Remove Default List Style

• Select the Unordered List element in the Webflow Designer.
• In the Style panel, go to the Selector for your list or list item (li).
• Set List Style to None under the Typography section. This hides the default bullets.

​

2. Add a Custom Icon

• Add a Div Block inside each li item or before the text within it.
• Give that Div a class like icon-bullet.
• Choose one of the following to display your icon:
• Use an Image: Drag an Image element into the icon-bullet div and upload your icon file.
• Use a Webflow Symbol or SVG: Add inline SVG or use Webflow's built-in assets like Font Awesome (if added via custom code).

​

3. Style Your Icon and List Item

• Set Display: Flex on the li element to align the icon and text side by side.
• Optionally, apply spacing:
• Use margin-right on the .icon-bullet to add space between the icon and the text.
• Use align-items: center to vertically center the icon and text.

​

4. Reuse the List with CMS (Optional)

• If the unordered list is inside a CMS Collection List, set up a structure that includes:
• An image field for the icon (if using custom icons per item).
• Bind the image element inside .icon-bullet to that CMS field.

​

5. Ensure Accessibility

• If using decorative icons, add alt="" to image elements or mark decorative SVGs with aria-hidden="true" via the Attributes panel.

​

Summary

To use your own icons as bullet points, set list-style to none, then add and style a custom icon (image or SVG) inside each list item. Use flexbox for alignment and spacing.