How to replace List Bullets to custom icons (SVG)

Less than 1 min.

UL - List

Step 1 Add list:
https://university.webflow.com/article/lists
image

image

Step 2 - Remove bullets:
list-style-type: none;

image

Step 3: Remove ul default padding

LI - List item

Step1 - Add left padding (room for the icon)

Step2 - Set background image
Use SVG (Better than png) - without any extra space around.
Left: 0;
top => “tricky” you should manually add Xpx (Depend on font type, font size and so on).

Done :slight_smile:

Related:

Fit artboard to bounds by adobe-illustrator

Another option:
custom code

<style>
    ul.class-name {
       list-style-image: url('https://my-file.svg');
    }
</style>
18 Likes

Rich Text

Same idea:

Cons: No way to combine some types of bullets inside rich-text for now.

2 Likes

Thanks for sharing with the community @Siton_Systems :raised_hands:

2 Likes

This is one of those ‘why didn’t I think of that?’ sort of things. I’ve always used custom code so this is :ok_hand:

5 Likes

Thanks, very smart. :clap:

1 Like

This is one of those ‘why didn’t Webflow think of that?’ sort of things

4 Likes

Brilliant workaround - thanks for sharing.

2 Likes

Thanks for sharing this! I had a rich text fetched from a CMS collection, and it still worked :slight_smile:

1 Like

thank you so much for this step by step! so helpful and worked immediately on my site. cheers!